Html5

Programación Web II

Uso de etiquetas HTML5
UPSLP | MTI Rosario Agundis Laguna

Objetivo
En esta lección los estudiantes aprenden a utilizar los nuevos elementos HTML5 para lograr presentaciones en pantalla más avanzadas.

Fundamentos de HTML5
En HTML5 no hay diferencia entre mayúsculas y minúsculas y la página sigue siendo válida. Así, el código siguiente es técnicamente válido:Ultimas noticias desde Madrid

Fundamentos de HTML5
No se exigen las etiquetas de cierre de los elementos. Por ejemplo, se admite la inserción de múltiples párrafos de esta forma: Ha habido un accidente en la autopista entre Madrid y Alcala. Los conductores deberán utilizar rutas alternativas. La velocidad está limitada a 90 Kms/h.

Fundamentos de HTML5
Las comillas en los atributos sonopcionales. Por ejemplo, se da por válido este código:


La declaración DOCTYPE de HTML5
La línea inicial de la mayoría de los archivos HTML es la que se llama DOCTYPE, que le indica al navegador el tipo de documento que tiene que traducir.

Versión de HTML


Versión de XHTML


Versión de HTML5


Práctica

"Dime y lo olvido, enséñame y lo recuerdo, involúcrame y lo aprendo“.-- Benjamín Franklin

Objetivo
Convertir una página HTML antigua en HTML5.

Realiza los siguientes pasos:
1. Agrega al administrador de Sitios de DW la carpeta Worldwide.

2. Selecciona el archivo index.html 3. Visualiza la página en tu navegador para comprobar el aspecto que tiene en este momento 4. Cierra el navegador y vuelve al editor. Selecciona toda la declaración en las dosprimeras líneas y bórrala. Escribe en su lugar esto:



5. Guarda el archivo y ábrelo en el navegador. Verás que no hay cambios, pero el navegador reconoce este archive como HTML5, no como HTML 4.01. 6. Cierra el navegador. Vamos a sustituir algunos de los elementos DIV por elementos HTML5 nuevos, pero antes tenemos que ver cómo se clasifican en HTML5 los distintos tipos de contenidos.Categorías de contenido utilizadas en HTML5
Podemos dividir el contenido de una página web en varias categorías que, en su mayor parte, no son novedades de HTML5, pero que nos ayudan a entender cómo se organiza internamente la información.

Categorías
• • • • • • • Metadatos Flujo Secciones Títulos Textos Contenidos embebidos Contenidos interactivos

Metadatos
A la información que establece elmodo de restitución o el comportamiento del resto del contenido de la página se le denomina Metadatos. Los metadatos se ubican en la sección del documento

Flujo
Son todas las etiquetas utilizadas para definir contenidos entran dentro de esta categoría, como por ejemplo, , , , , etc. En HTML5 aparecen algunos elementos nuevos dentro de esta categoría, como , , , , y algunos más.

SeccionesEs una nueva categoría de HTML5 y actualmente incluye cuatro elementos: , , y . El W3C define el contenido de Secciones como aquellos elementos que “definen el alcance de cabeceras y pies de página”.

Las definiciones de las secciones y otras categorías se pueden consultar en la web:http://dev.w3.org/html5/spec/content-models.html

Títulos
Los títulos contienen todos los elementos deencabezamiento que ya se vienen utilizando en HTML 4.0: , y sucesivos. HTML5 incorpora además el elemento , pensado para agrupar dos o más títulos. El contenido de titulares forma parte del contenido de flujo.

Contenido de textos
Engloba todo el texto del documento, incluyendo los elementos delimitadores de texto dentro de los párrafos. El contenido de texto es un subconjunto del contenido deflujo.

Contenidos embebidos
Los contenidos embebidos son aquellos que se importan de otros recursos dentro de la página, como son imágenes, vídeos o archivos para descargar.

Contenidos interactivos
Uno de los elementos más básicos, como es la etiqueta (utilizada en los vínculos), o que se utilizan en los formularios se la considera un elemento interactivo.

Botón con código Javascript...