La disposición más fácil de implementar con CSS es una disposición de una columna. Esto es sólo una serie de cajas apiladas una encima de la otra. Tendremos un área de cabecera, un menú de navegación horizontal, un área para los contenidos de la página, y finalmente un Pie. La disposición que diseñaremos se ve así:

A simple one column layout

Como puedes ver, es bastante sencillo: área de cabecera en la parte superior, navegación barra, el contenido de la página, luego el pie de página.

Lo primero que hay que hacer es el HTML. Luego se puede añadir el CSS encima de esto.

Echa un vistazo a la carpeta de plantillas que te descargas con este curso (extra_files/plantillas). (Si aún no tienes los archivos extra, la ubicación de la descarga está aquí, bajo el título Diseño Web - Nuevo Curso : Descargar los archivos extra necesarios para este curso (No necesitas las descargas para el viejo curso.)

Abra la plantilla llamada template_one_col.txt . Debería ver la siguiendo el HTML:

The HTML 5 code for a simple one column layout

Hay bastantes etiquetas aquí que no has conocido antes. Estas etiquetas son nuevo en HTML5, y no están presentes en las versiones anteriores. Lo están:

CABEZA
NAV
SECCIÓN
ARTÍCULO
PIE

En versiones anteriores de HTML sólo se usaban las etiquetas DIV en lugar de las arriba. Las nuevas se llaman etiquetas semánticas. En realidad no hacen nada por sí mismos - están ahí para hacer las cosas más claras para usted (y tal vez los motores de búsqueda). Si usas etiquetas DIV para todo, entonces el código de la página puede obtener muy desordenado y confuso.

Echemos un vistazo a nuestro código, sin embargo.

Empezando por arriba, tenemos una etiqueta de HEADER:

La etiqueta del TITULAR no está sólo en la parte superior de la página. Si miras más abajo la página que puede ver que tenemos otro par de ellos:

Título de la sección</H2;

La etiqueta HEADER debe ser usada cuando quieras un buen encabezado para diferentes secciones de tu página. Nuestro primer encabezado es para algún texto H1. Ya que está en la parte superior de nuestra página, sin embargo, podríamos reemplazar las etiquetas H1 con, digamos, una imagen para usar como un banner del sitio.

Nuestro segundo HEADER está rodeando un par de etiquetas de H2. Este podría ser el título de un artículo en el que queremos que la gente haga clic.

Después de las etiquetas de la parte superior de HEADER tenemos un par de etiquetas de NAV. Estas están rodeadas una lista no ordenada que queremos usar como barra de navegación. Anteriormente, teníamos Las etiquetas DIV que rodean nuestra lista no ordenada. Ahora, es mucho más claro lo que esta lista se está utilizando para.

La siguiente etiqueta semántica es "SECCIÓN". Tenemos dos pares de éstas. El primer par están en la parte superior e inferior de la página:

The SECTION tag in HTML 5

Estas etiquetas de SECCIONES contienen el contenido principal del sitio.

Entre el primer par de etiquetas de SECCIÓN tenemos una etiqueta de ARTÍCULO. Como el nombre sugiere, se utilizan para cuando se quiere separar un artículo de texto de el resto de su sitio. Puede que tengas más de un artículo, en cuyo caso puedes usar otro par de etiquetas de ARTÍCULO. Como esta, por ejemplo:

The ARTICLE tag in HTML 5

Aquí, tenemos dos artículos en la página. Cada par de etiquetas de ARTÍCULO tiene un CABEZAL y una sección. Las etiquetas de la cabecera se han convertido en hipervínculos, mientras que la sección se utilizan para el titular de la historia.

Guarda tu plantilla como un archivo HTML. Guárdalo en una nueva carpeta llamada diseños. Para el nombre del archivo, escribe layout_one_col.html .

Cuando cargues la página en un navegador, verás esto:

A browser showing the HTML 5 laid out

Debido a que sólo usamos etiquetas HTML la página se ve bastante básica.

Una última cosa que hacer antes de llegar al CSS. Añade los siguientes atributos ID a tu código HTML:

Code showing the HTML 5 for a one column layout

Así que hay cinco atributos de identificación para agregar, resaltados en negrita arriba. (Por cierto, pueden ser selectores de clase en lugar de selectores de identificación, si lo prefiere. Usando ID significa que puedes referirte a ellos en un lenguaje de scripts como JavaScript, así como el uso de CSS).

En la siguiente parte, aprenderás a dar estilo a tu diseño en HTML 5.

...CSS flota... Estilizando el diseño...