Introducción a HTML5

1. ¿Qué es HTML5?
• Especificación experimental del consorcio internacional W3C y del grupo de trabajo WHATWG que organiza
tres tecnologías altamente dependientes como HTML, CSS y Javascript bajo un mismo propósito, la
construcción de sitios y aplicaciones web.
• ¿Por qué estudiar estos lenguajes de programación?
HTML5 permite a los programadores crear aplicaciones no nativas (web) que se comportan como si lo fueran,
eliminando la pesada tarea que supone diseñar aplicaciones nativas para cada una de las plataformas
(Android, iOS, Windows Mobile, Symbian, BlackBerry OS, Palm OS).
• A pesar de no ser un estándar oficial, actualmente la mayoría de navegadores web (Safari, Chrome, Firefox,
Opera, Internet Explorer ) soportan los nuevos elementos (HTML y CSS) y APIs (Javascript) que incorpora
HTML5. Sustituye al anterior estándar HTML 4.0.1. que data del año 1999.
• ¿Qué función desempeña cada tecnología?
 HTML5 lenguaje hipertexto de marcado usado para generar la estructura del documento (plantilla) y
facilitar la inserción tanto de contenido multimedia como de aplicaciones.
 CSS, versión 3, es el responsable de representar la estructura y su contenido.
 Javascript es el responsable de dotar de mayor funcionalidades a la web, haciendo que las
aplicaciones interactúen con el contenido y los servicios externos de la nube. Javascript permite añadir
contenido dinámico a la estructura (Web 2.0).
HTML5 Francesc Pérez
Fdez

2. Estructura del documento
• Con un editor de texto es posible crear un documento HTML, tan sólo se ha de guardar con la extensión .html.
El código HTML debe ser introducido dentro del elemento “html” representado por las etiquetas de apertura
<html> y cierre </html>.
• La estructura principal de un documento HTML está formada por dos elementos: la cabecera (<head>) y el
cuerpo (<body>).
• La información de cabecera no se muestra en el navegador y se utiliza para referenciar estilos y scripts
externos (<link>), además de proporcionar meta información a los motores de búsqueda (<meta>).
• El cuerpo es la parte más importante y visible del documento HTML y es donde se organiza la plantilla.
Cabecera
Cuerpo
Fdez
Etiqueta <!DOCTYPE> define el tipo de archivo
El atributo “lang” de la etiqueta “html”, con valor “es”,
define el idioma del contenido.
Head (no
visible)
Body (visible)

3. Cabecera del documento
• La información de cabecera no es visible para el usuario; pero sí puede ser leída por ordenadores,
navegadores web y motores de búsqueda que utilizan la meta información (descripción, etc) para realizar sus
funciones.
Fdez
Los archivos externos de estilos, imágenes y
scripts deben ubicarse en la misma carpeta
donde se aloja el archivo .html. Si no se hace
referencia a archivos externos de estilos el
navegador aplica los suyos por defecto.
Conjunto de caracteres
que debe utilizar el navegador
 Comentarios. No afectan al código

4. Cuerpo del documento
• La imagen muestra un diseño, con una organización básica, hecho con los nuevos elementos estructurales
que incorpora HTML5. Cada elemento del cuerpo desempeña un propósito diferente dentro de la plantilla.
• Un error común es confundir el elemento <head> con <header>. El primero hace referencia a la cabecera del
documento HTML y no se muestra en el navegador, el segundo hace referencia a la cabecera del cuerpo del
documento HTML y por lo tanto su contenido se muestra al usuario.
Fdez
Cabecera del cuerpo
(logo y título)
Barra de navegación
Información
Principal
Barra Lateral
(info adicional)
Institucional, personal derechos de autor,
<header> </header>
<nav> </nav>
<section> </section>
<aside>
</aside>
<footer> </footer>

• El siguiente código implementa la estructura básica de la plantilla anterior. Observe que todo el código
relacionado con la estructura está alojado dentro del cuerpo <body>.
Fdez
Header
Nav
Aside
Footer
Section
En nuestro ejemplo, hemos suprimido de la cabecera del documento la línea que hace referencia a archivos de estilo
externos por lo que el navegador los representará con los estilos que tiene definidos por defecto. Para el navegador
todos los elementos son elementos “block”, motivo por el cual los apila como cajas uno encima de otro. Como veremos
más tarde, creando nuevos estilo se puede corregir este comportamiento hasta obtener el resultado esperado.

• Para crear unidades independientes de contenido dentro de la estructura básica creada, utilice el elemento
<article>.
Fdez
Insertar párrafo
Declara que el contenido es
Imagen, vídeo
Texto descriptivo de la
imagen, vídeo
Sección
Artículo
Artículo

• Hasta aquí hemos diseñado y configurado la estructura básica y común de una web, pero carente de estilo.
Todos los elementos (header, nav, section, aside, footer, article) son interpretados por el navegador como un
conjunto de cajas apiladas. Creando nuevos estilos podemos reorganizar las cajas para que adopten la
estructura básica propuesta (elemento aside aparezca al lado del section).
• Otras etiquetas relevantes: mark, small, cite, address, time, details, progress, ruby, rp, rt, wbr, datalist, audio,
vídeo, source, embed, fieldset, keygen, meter, output,
• Nuevos type de Inputs: tel, search, url, email, datetime, date, month, week, time, datetime-local, range, color
• Nuevos tipos de atributos para Inputs: autocomplete, autofocus, loadform, formaction, formenctype,
formmethod, formtarget, height, width, list, min, max, step, multiple, novalidate, pattern, placeholder, required
 Ejemplo de plantilla básica
Fdez

Introducción a HTML5

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (16)

En vedette

En vedette (20)

Similaire à Introducción a HTML5

Similaire à Introducción a HTML5 (20)

Plus de Francesc Perez

Plus de Francesc Perez (20)

Dernier

Dernier (20)

Introducción a HTML5