22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Seminario
HTML...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Los elementos ...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <f...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <n...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <s...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <a...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <a...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <f...
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Aunque use HTM...
Upcoming SlideShare
Loading in …5
×

Introducción a html5 elementos de la estructura

551 views
466 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
551
On SlideShare
0
From Embeds
0
Number of Embeds
169
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a html5 elementos de la estructura

  1. 1. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Seminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Los elementos de la estructura HTML5 Facilitadora: María Zeballos
  2. 2. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Los elementos de la estructura HTML5 El elemento <header> El nuevo elemento <header> permite insertar una zona de visualización para las cabeceras. Puede definirse esta cabecera para toda la página (como ya lo usó) o para una zona determinada: artículo, menú lateral... Debemos considerar que este elemento se puede usar desde dos puntos de vista: • A nivel de la página: es la típica cabecera de la página, que a menudo aparece en lo alto de la pantalla, con un logotipo, un eslogan, un menú de navegación principal... • A nivel del contenido: permite disponer de una zona de introducción del contenido que se incluya a continuación. Como puede ver, el elemento <header> no tiene que aparecer obligatoriamente en la estructura de la página.
  3. 3. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS El elemento <footer> El nuevo elemento <footer> permite insertar una zona de visualización para los pie de página. Volvemos a encontrarnos con la misma semántica de los encabezados. Es posible definir un pie de página para la página completa, o bien para cualquier otra zona de visualización o para un artículo. Su uso es similar al de los <header>, pero aplicado a los pie de página. Por lo tanto, no debemos seguir al "pie de la letra" la traducción literal de "pie de página". Se trata más bien de un "pie de zona de visualización", donde la zona de visualización puede ser una página, una sección, un artículo... Los elementos de la estructura HTML5
  4. 4. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS El elemento <nav> El elemento <nav>, como su nombre indica, está pensado para la visualización de una zona de navegación con vínculos hipertexto. Cuidado, no quiere decir que solo podrá tener una zona de navegación en cada página, o que tenga que crear tantos elementos <nav> como zonas de navegación haya en sus páginas, bastará con que los identifique correctamente. El elemento <nav> está pensado en especial para la navegación principal del sitio web, para la inserción de vínculos entre las páginas de dicho sitio web. Los elementos de la estructura HTML5
  5. 5. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS El elemento <section> El elemento <section> permite agrupar elementos que tengan la misma temática. De este modo podemos agrupar en un mismo elemento un contenido, con su título y su pie de página. Los elementos de la estructura HTML5
  6. 6. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS El elemento <article> El elemento <article> permite insertar un contenido autónomo, que puede volver a usarse en otro lugar del sitio web, sin que por ello se anule su significado. Claro está, un artículo podría tener una cabecera (<header>), un pie de página (<footer>) y varios títulos (<hx>). Los elementos de la estructura HTML5
  7. 7. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS El elemento <aside> El elemento <aside> permite mostrar un contenido relacionado con el contenido al cual esté vinculado. Puede tratarse de barras laterales (sidebars), de zonas de widgets, de complementos sobre artículos, etc. Los elementos de la estructura HTML5
  8. 8. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS El elemento <figure> El elemento <figure> permite agrupar todos los elementos necesarios para la inserción de una imagen: la propia imagen (elemento <img>), o bien, una foto, un vídeo, una animación... y su leyenda, con el nuevo elemento <figcaption>. Veamos un ejemplo: <p>Fotografía de una Sarracenia de mi jardín.<p/> <figure> <img src="sarracenia.jpg" /> <figcaption>sarracenia purpura</figcaption> </figure> Los elementos de la estructura HTML5
  9. 9. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Aunque use HTML5 no tiene por qué erradicar el uso de las cajas <div>. ¡Todavía podemos usarlas y siguen teniendo su utilidad! Los elementos de la estructura HTML5

×