Curso HTML5 y CSS3 Parte 4

[youtube]https://www.youtube.com/watch?v=YXuAoJQbQfo[/youtube]

Cuerpo de un Documento HTML5

Como vimos en la parte 2 del curso de HTML5 y CSS3, un documento HTML5 esta dividido en dos partes principales, el head y el body. Si has seguido este curso ya deberias tener completa la parte del head, ahora veremos la estructura del cuerpo de nuestro sitio e iremos maquetando el código HTML de éste. También veremos las tres posibles maneras de agregar CSS a nuestro sitio.

Bien, ahora veamos una ves más la estructura que usaremos para nuestro sitio:

Estructura a construir durante el curso
Estructura a construir durante el curso

Como podran apreciar, he usado colores diferentes para representar la caja de cada elemento que conforma nuestra página web, el body o cuerpo esta representado por el rectángulo azul claro que esta al centro del fondo o background de color gris. Dentro del body tenemos otros cuatro rectángulos de color naranja, azul-verde, rosa y verde claro respectivamente. De momento olvidemos los elementos que estan dentro de ellos, ya que primero debemos crear estos elementos ‘contenedores’ y entonces podremos crear los elementos ‘contenidos’.

Encabezado del Sitio

El encabezado del sitio es el lugar que utilizaremos para mostrar el logo, nombre y slogan de nuestro sitio, para ello utilizaremos la etiqueta <header> teniendo en cuenta lo siguiente:

  • <header> define el encbezado de todo el documento o una sección de él.
  • El elemento <header> debe utilizarse como contenedor de contenidos introductorios o conjunto de vínculos de navegación.
  • Puede existir más de un elemento <header> en un solo documento.
  • La etiqueta <header> no puede estar dentro de <footer>, <address> o dentro de otro elemento <header>.

Fuente: http://www.w3schools.com/tags/tag_header.asp

Menú de Navegación

El menú de navegación es una de las partes más importantes de cualquier sitio web, con el, podemos navegar por el sitio para ver su contenido, en HTML5 se ha incorporado una etiqueta que nos permite definir el menu de navegación, y esa estiqueta es <nav>, que según la w3school…

  • Define un conjunto de enlaces de navegación.
  • No todos los enlaces del documento deben estar dentro de una etiqueta <nav>, la etiqueta <nav> es solo para las categorias o secciones principales de un sitio.

Fuente: http://www.w3schools.com/tags/tag_nav.asp

Sección Principal del Sitio

En esta es la sección principal del sitio, ya que es donde mostraremos el contenido del sitio, ya sean artículos, videos, imágenes, música, etc. Pero esta a su ves se divide en dos partes, la sección del contenido y la barra lateral. Para ello usaremos la etiqueta <section>, que se utiliza para definir secciones del documento, como capítulos, encabezados, pie de página y cualquier otra sección del documento. Por ello si apreciamos bien la imagen, el rectángulo amarillo también es una sección, y por ello tendremos un <section> que contendra un <section> más y la barra lateral.

Fuente: http://www.w3schools.com/tags/tag_section.asp

Barra Lateral del Sitio

La etiqueta <aside> se utiliza para representar una barra lateral en los sitios web, donde se pondrá contenido de menor reelevanciá que la del contenido principal, como pueden ser un formulario de búsqueda, enlaces a sitios de nuestro agrado, etc.

Fuente: http://www.w3schools.com/tags/tag_aside.asp

Pie de Página

En la gran mayoria de los sitios, al final de la página se pone un pie de página donde se suele poner información sobre copyright, información de contacto del autor o el mapa del sitio. También puede usarse como ‘pie de sección’, es decir, al final de alguna seccion del documento.

Fuente: http://www.w3schools.com/tags/tag_footer.asp

Ahora nuestro documento deberia de quedarnos asi:

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”utf-8″ />
<meta name=”description” content=”Sitio web con HTML5 y CSS3″ />
<meta name=”keywords” content=”HTML5, CSS3″ />
<meta name=”author” content=”Isaac Robles”/>
<title>Plantilla HTML5 con CSS3</title>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<section></section>
<aside></aside>
</section>
<footer>
</footer>
</body>
</html>

Eso sería todo por el momento, en la siguiente entrega de este curso veremos las diferentes formas de agregar código CSS a nuestro sitio.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

13 ÷ = 13