Estructura de cajas de una página web
Introducción
Nos estamos acercando cada vez más al objetivo de diseñar una página web en HTML. Si nuestras páginas web todavía no se parecen lo suficiente a las que usamos habitualmente, es porque carecemos de los conocimientos necesarios para realizar la maquetación.
En general, una página web consta de un encabezado (en la parte superior), menús de navegación (arriba o a los lados), diferentes secciones en el centro... y un pie de página (en la parte inferior).
En este capítulo, se tratarán las nuevas etiquetas HTML dedicadas a la estructuración de un sitio. Estas etiquetas fueron introducidas en HTML5 y permiten decir:"Este es mi encabezado","Este es mi menú de navegación", etc...
El modelo de cajas es la base del diseño web — cada elemento se representa como una caja rectangular, con su contenido, padding (espacio interior), borde y margen construidos uno sobre otro como las capas de una cebolla. El navegador, para interpretar el diseño de una página, procesa los estilos que se aplicarán a cada caja, el tamaño de las capas de la cebolla y la ubicación de unas cajas con respecto a otras. Antes de comprender cómo crear diseños CSS, debemos entender el modelo de cajas.
Se va a preparar un documento HTML para poder descubrir el diseño a continuación.
En general, una página web consta de un encabezado (en la parte superior), menús de navegación (arriba o a los lados), diferentes secciones en el centro... y un pie de página (en la parte inferior).
En este capítulo, se tratarán las nuevas etiquetas HTML dedicadas a la estructuración de un sitio. Estas etiquetas fueron introducidas en HTML5 y permiten decir:"Este es mi encabezado","Este es mi menú de navegación", etc...
El modelo de cajas es la base del diseño web — cada elemento se representa como una caja rectangular, con su contenido, padding (espacio interior), borde y margen construidos uno sobre otro como las capas de una cebolla. El navegador, para interpretar el diseño de una página, procesa los estilos que se aplicarán a cada caja, el tamaño de las capas de la cebolla y la ubicación de unas cajas con respecto a otras. Antes de comprender cómo crear diseños CSS, debemos entender el modelo de cajas.
Se va a preparar un documento HTML para poder descubrir el diseño a continuación.
Estructura de cajas de una página web
Etiquetas de estructura HTML5
Aquí se presentan las nuevas etiquetas introducidas por HTML5 para estructurar las páginas web. No cambiará mucho la apariencia de un sitio diseñado con los conocimientos previos, por el momento, pero estará bien construido y listo para darle formato después.
La mayoría de los sitios web suelen tener un encabezado en la parte superior. Se suele dedicar a ubicar un logotipo, un banner, el eslogan del sitio...
Esta información se coloca dentro de la etiqueta
Puede haber varios encabezados en una página. Si se divide en varias secciones, cada una puede tener su propia cabecera con su
<header>: encabezadoLa mayoría de los sitios web suelen tener un encabezado en la parte superior. Se suele dedicar a ubicar un logotipo, un banner, el eslogan del sitio...
Esta información se coloca dentro de la etiqueta
<header>:Puede haber varios encabezados en una página. Si se divide en varias secciones, cada una puede tener su propia cabecera con su
<header>
Estructura de cajas de una página web
Etiquetas de estructura HTML5
<footer>: pie de páginaA diferencia del encabezado, el pie de página generalmente se encuentra en la parte inferior del documento. Información como enlaces de contacto, nombre del autor, avisos legales, etc. se puede encontrar en esa ubicación.
La siguiente figura muestra cómo es el pie de la página del W3C.
Estructura de cajas de una página web
Etiquetas de estructura HTML5
<nav>: principales enlaces de navegaciónLa etiqueta
<nav> debe incluir todos los enlaces principales de navegación del sitio. Se colocará allí, por ejemplo el menú principal del sitio.Normalmente, el menú se crea como una lista con viñetas dentro de la etiqueta
<nav>:La siguiente figura muestra cómo es menú de navegación de la página del W3C.
Estructura de cajas de una página web
Etiquetas de estructura HTML5
<section>: una sección de la páginaLa etiqueta
<section> es usada para agrupar contenidos según su temática. Normalmente se incluye una parte del contenido en el centro de la página.La siguiente figura muestra cómo es menú de navegación del del portal Free.
Estructura de cajas de una página web
Etiquetas de estructura HTML5
<aside>: información complementariaLa etiqueta
<aside> está diseñada para contener información adicional al documento que se está viendo. Esta información suele colocarse al margen (aunque no es obligatorio).En una página puede haber varios bloques de este tipo.
En Wikipedia, por ejemplo, es común ver a la derecha un bloque de información adicional al artículo que se está viendo. Así, en la página que presenta el planeta Saturno, se encuentran en este bloque las características del planeta (dimensiones, masa).
Estructura de cajas de una página web
Etiquetas de estructura HTML5
<article>: artículo independienteLa etiqueta
<article> es usada para incluir una porción generalmente autónoma de la página. Es una parte de la página que podría ser reproducida en otro sitio. Este es el caso, por ejemplo, de las noticias (artículos en blogs).
Estructura de cajas de una página web
Etiquetas de estructura HTML5
Esquema general
Estructura de cajas de una página web
Maquetación con div
Como se ha visto en las etiquetas previas, maquetar o estructurar una página web consiste en organizar su contenido para que cada elemento aparezca en el lugar y con el formato deseado. El formato (los estilos) se dejan para CSS y la estructura se organizamos en HTML.
El código mostrado a continuación es un ejemplo de estructuración de una página mediante la etiqueta div, procedimiento empleado antes de la versión 5 de HTML.
El código mostrado a continuación es un ejemplo de estructuración de una página mediante la etiqueta div, procedimiento empleado antes de la versión 5 de HTML.
<body>
<div id="global">
<div id="cabecera">
Contenido de la cabecera.
</div>
<div id="navegacion">
Contenido del menú de navegación.
</div>
<div id="principal">
Contenido de la página.
</div>
<div class="anuncios1">
Contenido de una zona de anuncios.
</div>
<div id="pie">
Contenido del pie.
</div>
</div>
</body>