joaquinls
Nuevas etiquetas
HTML5 estructurales
Joaquín Lara Sierra
Nuevas etiquetas HTML5 estructurales por Joaquin Lara S...
joaquinls
De que hablar
• ¿Qué es HTML5?
• El contexto de HTML.
• Los Navegadores.
• DocType.
• Nuevos elementos
estructur...
joaquinls
HTML5, la última versión del Hypertext Markup Language
(HTML), es la versión más radical del lenguaje a la fecha...
joaquinls
Contexto
• Tim Berners-Lee creó el HTML original en 1989 para
solucionar las deficiencias de los métodos existen...
joaquinls
• Para el momento de este escrito, HTML5 ha sido
lanzado oficialmente. La mayoría del contenido en la
Web todaví...
joaquinls
Sin importar las capacidades de sus navegadores objetivo,
usted debe decirle al navegador que usted desea que su...
joaquinls
La razón para crear nuevas
etiquetas estructurales es
dividir las páginas Web en
partes lógicas que describan
el...
joaquinls
De HTML 4
Si usted ha creado incluso los documentos HTML más
simples, entonces estará familiarizado (a) con la e...
joaquinls
De HTML 4
Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
<!DOCTYPE html PUBLIC "-//W3C//DTD X...
joaquinls
De HTML 5
HTML5 responde a este problema proporcionando un
conjunto de etiquetas que definen con mayor claridad ...
joaquinls
El área header
<!DOCTYPE html>
<html>
<head>
<title> Una página HTML simple </title>
</head>
<body>
<header>Head...
joaquinls
El área section
<!DOCTYPE html>
<html>
<head>
<title> Una página HTML simple </title>
</head>
<body>
<header>Hea...
joaquinls
El área article
<!DOCTYPE html>
<html>
<head> <title> Una página HTML simple </title> </head>
<body>
<header>Hea...
joaquinls
La etiqueta aside
<!DOCTYPE html>
<html>
<head> <title> Una página HTML simple </title> </head>
<body>
<header>H...
joaquinls
La etiqueta footer
<!DOCTYPE html>
<html>
<head> <title> Una página HTML simple </title> </head>
<body> <header>...
joaquinls
La etiqueta nav
<!DOCTYPE html>
<html>
<head> <title> Una página HTML simple </title> </head>
<body>
<header>Hea...
joaquinls
Ejemplo completo
<!DOCTYPE html>
<html>
<head> <title> Una página HTML simple </title></head>
<body> <header>Hea...
joaquinls
Gracias
18
Próxima SlideShare
Cargando en…5
×

Introducción a Etiquetas HTML 5

1.606 visualizaciones

Publicado el

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/.

0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.606
En SlideShare
0
De insertados
0
Número de insertados
304
Acciones
Compartido
0
Descargas
33
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Introducción a Etiquetas HTML 5

  1. 1. joaquinls Nuevas etiquetas HTML5 estructurales Joaquí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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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. Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 5
  6. 6. 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 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? <!DOCTYPE html> 6
  7. 7. 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. Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 7
  8. 8. 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. Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 8 Header Footer Content
  9. 9. joaquinls De HTML 4 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? <!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
  10. 10. 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 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 10 <div id = “header”> <div id = “nav”> <div id = “footer”> <div id = “sction”> <div id = “aside”> <div id = “article”>
  11. 11. 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> <div id='footer'>Footer</div> </body> </html> 11 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
  12. 12. joaquinls El área section <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <section><p> Esta es una sección importante de la página. </p> </section> <div id='footer'>Footer</div> </body> </html> 12 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
  13. 13. joaquinls El área article <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <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> </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> <div id='footer'>Footer</div> </body> </html> 13 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
  14. 14. joaquinls La etiqueta aside <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <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> </p> Este es un aparte de la primera 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> <div id='footer'>Footer</div> </body> </html> 14 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
  15. 15. joaquinls La etiqueta footer <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <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> </p> Este es un aparte de la primera 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 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
  16. 16. joaquinls La etiqueta nav <!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> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </aside> </p> Este es un aparte de la primera 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> 16 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
  17. 17. 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> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </aside> </p> Este es un aparte de la primera 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> 17 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
  18. 18. joaquinls Gracias 18

×