viernes, 3 de enero de 2014

Continuación HTML5

Ahora sigue la etiqueta <title>simplemente especifica el título del documento, y no hay nada nuevo para comentar:
    

  1.     <!DOCTYPE html>
    2. 

  2.     <html lang="es">
    3. 

  3.     <head>
    4. 

  4.      <meta charset="iso-8859-1">
    5. 

  5.       <meta name="description" content="El ejemplo HTML5">
    6. 

  6.          <meta charset="keywords" content="HTML5, CSS3">
    7. 

  7.   <title>Aquí colocamos el título del documento</title>
    8. 

  8.     </head>
    9. 

  9.     <body>
    10. 

  10.     </body>
    11. 

  11.     </html>
    12.
Ahora bien un diseño común de una página web lo vemos a continuación en la siguiente imagen:
arquitectura.jpg
Imagen 1: Arquitectura común de una página web
En HTML5 nos encontramos con la siguiente arquitectura:
arquitectura2.jpg
Imagen 2: Arquitectura común de HTML5 en una página web
En HTML5 tenemos <header> este elemento no lo debemos de confundir con el <head>, la intención del <header> es proveer información introductoria (títulos, subtítulos, logos), pero en el caso de <head> su propósito es proveer información de todo el documento. Pues <header> es usado solo para el cuerpo o secciones especificas dentro del cuerpo.
    

  1.     <!DOCTYPE html>
    2. 

  2.     <html lang="es">
    3. 

  3.     <head>
    4. 

  4.      <meta charset="iso-8859-1">
    5. 

  5.       <meta name="description" content="El ejemplo HTML5">
    6. 

  6.          <meta charset="keywords" content="HTML5, CSS3">
    7. 

  7.   <title>Aquí colocamos el título del documento</title>
    8. 

  8.     </head>
    9. 

  9.     <body>
    10. 

  10.   <header>
    11. 

  11.      <h1>Este es el título principal de la página web</h1> 
    12. 

  12.   <header>
    13. 

  13.     </body>
    14. 

  14.     </html>
    15.
Nota: Recuerda para que tu código funcione correctamente debes guardar tu archivo (en estos ejemplos que estamos haciendo) con la extensión .html
Ahora la etiqueta <nav> se refiere a la barra de navegación:
    

  1.     <!DOCTYPE html>
    2. 

  2.     <html lang="es">
    3. 

  3.     <head>
    4. 

  4.      <meta charset="iso-8859-1">
    5. 

  5.       <meta name="description" content="El ejemplo HTML5">
    6. 

  6.          <meta charset="keywords" content="HTML5, CSS3">
    7. 

  7.   <title>Aquí colocamos el título del documento</title>
    8. 

  8.     </head>
    9. 

  9.     <body>
    10. 

  10.   <header>
    11. 

  11.      <h1>Este es el título principal de la página web</h1> 
    12. 

  12.   <header>
    13. 

  13.   <nav>
    14. 

  14.     <ul>
    15. 

  15.       <li>Principal</li>
    16. 

  16.              <li>Videos</li>
    17. 

  17.       <li>Galeria</li>
    18. 

  18.       <li>Contacto</li> 
    19. 

  19.       <ul>  
    20. 

  20.          </nav>   
    21. 

  21.     </body>
    22. 

  22.     </html>
    23.
El elemento <aside> podría estar ubicado del lado derecho o izquierdo de nuestra página de ejemplo, esta etiqueta no tiene una posición predefinida. Podemos usar <aside> dentro del elemento <section> o incluision insertado entre la información relevante, como en el caso de una cita.
    

  1.     <!DOCTYPE html>
    2. 

  2.     <html lang="es">
    3. 

  3.     <head>
    4. 

  4.      <meta charset="iso-8859-1">
    5. 

  5.       <meta name="description" content="El ejemplo HTML5">
    6. 

  6.          <meta charset="keywords" content="HTML5, CSS3">
    7. 

  7.   <title>Aquí colocamos el título del documento</title>
    8. 

  8.     </head>
    9. 

  9.     <body>
    10. 

  10.   <header>
    11. 

  11.      <h1>Este es el título principal de la página web</h1> 
    12. 

  12.   <header>
    13. 

  13.   <nav>
    14. 

  14.     <ul>
    15. 

  15.       <li>Principal</li>
    16. 

  16.              <li>Videos</li>
    17. 

  17.       <li>Galeria</li>
    18. 

  18.       <li>Contacto</li> 
    19. 

  19.       <ul>  
    20. 

  20.          </nav>
    21. 

  21.   <section>
    22. 

  22.  
    23. 

  23.   </section>
    24. 

  24.   <aside>
    25.
Recibe un saludo de mi parte @telecristy.
a la/s
Etiquetas:

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)