Introducción a Etiquetas HTML 5

joaquinls

Nuevas etiquetas

HTML5 estructuralesJoaquín Lara Sierra

Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia.

Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.

1

http://creativecommons.org/licenses/by-nc-sa/2.5/co/

http://www.unitecnologica.edu.co/


http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/



joaquinls

De que hablar

• ¿Qué es HTML5?

• El contexto de HTML.

• Los Navegadores.

• DocType.

• Nuevos elementos

estructurales.

• Enfoque HTML 4.

• Enfoque HTML 5.

• Ejemplos. 2

joaquinls

HTML5, la última versión del Hypertext Markup Language

(HTML), es la versión más radical del lenguaje a la fecha.

Esta presenta muchos recursos nuevos en una variedad

de áreas. Algunas de las adiciones más notables incluyen:

• Etiquetas integradas multimedia para audio y video

• Un bastidor para dibujar contenido en el navegador

• Formatos más inteligentes que le permiten hacer cosas

como validación mediante el uso de un atributo

requerido

Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?

3

joaquinls

Contexto

• Tim Berners-Lee creó el HTML original en 1989 para

solucionar las deficiencias de los métodos existentes para

acceder a información en Internet. Desde que se concibió,

encontrar su camino en Internet era una tarea difícil.

• HTTP es un protocolo de servicio utilizado para entregar

contenido.

• La combinación de HTTP y HTML ofrece una navegación

rápida y fácil por el contenido en Internet, al permitirle

simplemente hacer clic en los enlaces de texto para

navegar entre documentos.

• Después de crear estas dos tecnologías, Berners-Lee

continuó y fundó el World Wide Web Consortium (W3C)

Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?

4

joaquinls

• Para el momento de este escrito, HTML5 ha sido

lanzado oficialmente. La mayoría del contenido en la

Web todavía está siendo escrito para la especificación

HTML4. No obstante, varios navegadores incluyen

soporte para la especificación HTML5. Como cada

navegador puede soportar solo ciertos recursos de

HTML5, las cosas se complican un poco. Antes de

escribir un sitio basado en HTML5, revise cada uno de

sus navegadores objetivo para asegurarse de que

soporten los recursos que va a utilizar para su sitio.


5

joaquinls

Sin importar las capacidades de sus navegadores objetivo,

usted debe decirle al navegador que usted desea que su

contenido sea presentado usando la especificación

HTML5. Usted hace esto usando la declaración doctype.

Afortunadamente, la declaración doctype se ha

simplificado bastante en HTML5. De hecho es sólo una.

Para que su navegador presente en pantalla usando la

especificación HTML5


<!DOCTYPE html>

6

joaquinls

La razón para crear nuevas

etiquetas estructurales es

dividir las páginas Web en

partes lógicas que describan

el tipo de contenido que

incluyen. Conceptualmente,

piense en la página Web

como un documento. Los

documentos tienen

encabezados, pies de

página, capítulos y otras

convenciones diferentes que

dividen el documento en

partes lógicas.


7

joaquinls

De HTML 4

Si usted ha creado incluso los documentos HTML más

simples, entonces estará familiarizado (a) con la etiqueta

div . La etiqueta div es el principal mecanismo de la era

pre-HTML5 para crear bloques de contenido en un

documento HTM.


8

Header

Footer

Content

joaquinls

De HTML 4


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Una página HTML simple usando Divs</title>

</head>

<body>

<div id='header'>Header</div>

<div id='content'>Content</div>

<div id='footer'>Footer</div>

</body>

</html>

9

joaquinls

De HTML 5

HTML5 responde a este problema proporcionando un

conjunto de etiquetas que definen con mayor claridad los

bloques principales de contenido que componen un

documento HTML.

Las nuevas etiquetas son:

• header

• section

• article

• aside

• footer

• nav


10

<div id = “header”>

<div id = “nav”>

<div id = “footer”>

<div id = “sction”> <div id = “aside”>

<div id = “article”>

joaquinls

El área header

<!DOCTYPE html>

<html>

<head>

<title> Una página HTML simple </title>

</head>

<body>

<header>Header</header>

<div id='content'>Content</div>


</body>

</html>

11


joaquinls

El área section<!DOCTYPE html>

<html>

<head>

<title> Una página HTML simple </title>

</head>

<body>


<section><p>

Esta es una sección importante de la página. </p>

</section>


</body>

</html>

12


joaquinls

El área article<!DOCTYPE html>

<html>

<head> <title> Una página HTML simple </title> </head>

<body>


<section>

<article>

<p>Esta es una sección importante del contenido de la página.

Tal vez una publicación en blog. </p>

</article>

<article>

<p> Esta es una sección importante del contenido de la página.


</article>

</section>


</body>

</html>

13


joaquinls

La etiqueta aside<!DOCTYPE html>

<html>


<body>


<section>

<article>



</aside> </p> Este es un aparte de la primera publicación en blog. </p>

</aside>

</article>

<article>



</article>

</section>


</body>

</html>

14


joaquinls

La etiqueta footer<!DOCTYPE html>

<html>


<body> <header>Header</header>

<section>

<article> <p> Esta es una sección importante del contenido de la página. Tal vez una

publicación en blog. </p>


</aside>

</article>

<article> <p> Esta es una sección importante del contenido de la página. Tal vez una

publicación en blog. </p>

</article>

</section>

<footer>Footer</footer>

</body>

</html>

15


joaquinls

La etiqueta nav<!DOCTYPE html>

<html>


<body>

<header>Header

<nav>

<a href='#'>Algún enlace de navegación</a>

<a href='#'>Algún enlace de navegación adicional</a>

<a href='#'>Un tercer enlace de navegación</a>

</nav>

</header>

<section>

<article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p>


</aside>

</article>


</article>

</section>


</body>

</html>

16


joaquinls

Ejemplo completo<!DOCTYPE html>

<html>

<head> <title> Una página HTML simple </title></head>

<body> <header>Header

<nav>

<a href='#'>Algún enlace de navegación</a>

<a href='#'>Algún enlace de navegación adicional</a>

<a href='#'>Un tercer enlace de navegación</a>

</nav>

</header>

<section>



</aside>

</article>


</article>

</section>


</body>

</html>

17


joaquinls

Gracias

18

Introducción a Etiquetas HTML 5

Documents

Transcript of Introducción a Etiquetas HTML 5