Professional Documents
Culture Documents
Etiquetas HTML5
ndice
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Introduccin HTML5 Estructura HTML5 Etiqueta HEADER Etiqueta NAV Etiqueta ARTICLE Etiqueta SECTION Etiqueta ASIDE Etiqueta HGGROUP Etiqueta FOOTER Compatibilidad con varios navegadores HTML5 Shiv Conclusin Link de referencia
Introduccin:
En esta sesin veremos el uso de las nuevas etiquetas HTML5 (Header, Footer, Section, Article, Nav, Hggroup); asi mismo veremos la compatibilidad entre varios navegadores haciendo uso de la instruccin html5 shiv. Usaremos la Propiedad Display: Block para mostrar en bloque los datos y emplearemos reglas de clases en CSS para darle formato a las pginas web.
HTML5
El HTML5 (HyperText Markup Language, versin 5) es la quinta revisin del lenguaje de programacin bsico de la World Wide Web, el HTML. Esta nueva versin pretende remplazar al actual (X)HTML, corrigiendo problemas con los que los desarrolladores web se encuentran, as como redisear el cdigo actualizndolo a nuevas necesidades que demanda la web de hoy en da.
Comparacin de estructuras:
HTML4
HTML5
Estructura HTML5
Observe cmo sera la estructura HTML 5 de un sitio web, en este ejemplo de una pgina de 2 columnas.
Etiqueta HEADER
Se encarga de indicar a los navegadores que lo que contienen es la cabecera de la pgina y que dentro llevarn algn logotipo, el ttulo de la pgina o una descripcin de la misma.
http://www.littlecoogie.com/
continuacin.
http://www.littlecoogie.com/
Etiqueta NAV
La etiqueta <nav></nav> es donde las personas navegan a travs de las paginas, formada por enlaces a las zonas principales de la web, o por un men de navegacin.
http://www.littlecoogie.com/
continuacin.
http://www.littlecoogie.com/
10
Etiqueta ARTICLE
La etiqueta <article></article> especifica una distribucin de forma independiente del resto del sitio; con un auto-contenido incluido, que debe tener sentido por s mismo. Puede representar un artculo, ya sea un artculo de opinin, un entrada en un blog, un comentario en un foro, etc.
http://www.elladesign.com/
11
continuacin.
http://www.elladesign.com/
12
Etiqueta SECTION
La etiqueta <section></section> representa un agrupamiento de contenido con la misma temtica dentro de un documento o aplicacin
http://ousmane-ndiaye.com/
13
continuacin.
http://ousmane-ndiaye.com/ 14
Etiqueta ASIDE
La etiqueta aside indica que el contenido dentro de ella est relacionado el contenido principal de la pgina pero que no es parte de ella.
http://ousmane-ndiaye.com/
15
continuacin.
Son representadas mayormente como barras laterales o como inserciones, como publicidad, la biografa del autor, o en aplicaciones web, la informacin de perfil, etc.
16
Etiqueta Hggroup
La etiqueta <hgroup></hgroup> se ha creado para agrupar titulares(h1h6). En muchas ocasiones es habitual encontrarnos con el ttulo de la pgina web con una breve descripcin o definicin o lema de la pgina bajo l.
17
continuacin.
antes
despus
18
Etiqueta FOOTER
La etiqueta <footer></footer> representa el pie de un documento o seccin.
http://ousmane-ndiaye.com/
19
continuacin.
La informacin que se suele aadir en este bloque es el autor del documento, enlaces a contenido relacionado, informacin de copyright, avisos legales, etc.
http://ousmane-ndiaye.com/ 20
21
continuacin.
22
continuacin.
HTML5 Shiv:
IE no reconoce los nuevos elementos del HTML5 (article, section, etc), es por esto que para que se visualicen correctamente estilizados en el mencionado navegador, es necesario crearlos mediante javascript agregando el siguiente cdigo en el head de tu sitio.
23
continuacin.
Internet Explorer
Mozilla Firefox
Google Chrome
Safari
Opera
24
Conclusin
El objetivo de esta sesin fue identificar y aplicar las nuevas etiquetas HTM5 usando las reglas de Clase, formato de texto, manejo de colores y realizando la verificacin de navegadores, al correcto maquetado de una pgina web. Al finalizar esta sesin podrs hacer uso de las nuevas etiquetas HTML5 y veras su aplicacin en los casos de estudio que desarrollaremos.
25
Las nuevas etiquetas HTML5 traen consigo nuevas novedades para mejorar y enriquecer el diseo de una pgina web
26
Links de referencia
http://www.w3schools.com/html/html5_intro.asp http://html5demos.com/ http://www.html5rocks.com/es/ http://html5test.com/ http://html5.org/
27