div es un elemento de bloque con el que es posible agrupar otros elementos como párrafos, listas y gráficos en una sección común (div = división = sección). Dicho de otra forma, div es un contenedor, una caja, una box, en el que se pueden almacenar otras cajas para, por ejemplo, darles formato a todas más tarde mediante CSS.
Cuatro secciones: encabezado, navegación, texto y pie
Casi todas las páginas web tienen u n encabezado con un logotipo, una sección para los elementos de navegación, otra para el contenido y una línea de pie. El siguiente equipamiento mínimo corresponde a esta estructura y se ha establecido como base para diseños sencillos:
• Encabezado con logotipo y eslogan
• Sección de navegación con elementos de navegación
• Sección de texto con texto e imágenes
• Pie con espacio para la dirección, copyright, etc.
Para poder distinguir las secciones en el código fuente, se les asigna u n nombre único mediante el atributo id. En HTML tiene este aspecto:
<div id="encabezado"> </div>
<div id="navegacion"> </div>
<div id="areatexto"> </div>
<div id="pie"> </div>
<div id="navegacion"> </div>
<div id="areatexto"> </div>
<div id="pie"> </div>
La forma abreviada de ''un elemento con el atributo id y el valor areatexto" es el signo # y la ID de la
sección, p. ej. areatexto.
Para otros diseños
a división en estas secciones constituye la base para diseños sencillos a una o dos columnas. Los diseños más complejos se pueden regir por otro tipo de disposición. Volveremos a hablar de ello en el capítulo dedicado a los diseños de varias columnas
La sobrecubierta: #wrapper
Muchos libros tienen una sobrecubierta, una cubierta adicional sobre las tapas cuya misión es protegerlas (y que se puede imprimir de forma fácil y asequible). Nuestra página web también necesita una especie de sobrecubierta: una sección que abarque a todas las demás. Esta sección no tiene ninguna relevancia desde el punto de vista del contenido, pero es imprescindible para muchos diseños CSS. En muchas páginas web se le llama wrapper, que en español significa "sobrecubierta". Concretamente se llama <div id= "wrapper" >, o abreviado #wrapper. Creación de secciones con div Crea las siguientes secciones al principio del body de la página.
Tarea: dividir la página en secciones con div
1. Abre la página inicial index.html.
2. Añade el código fuente resaltado en negrita:
<body id="inicio">
<div id="wrapper">
<div id="encabezado">
</div> < ! - - Fin encabezado -->
<div id="navegacion">
</div> <!-- Fin navegación -->
<div id="areatexto">
</div> <!-- Fin a r e a t e x t o -->
<div id="pie">
</div> <!-- Fin pie -->
</div> <!-- Fin #wrapper -->
</body>
3. Guarda la página.
En la ventana del navegador no cambia nada,pero al diseñar con CSS las secciones con nombres asignados mediante id cobran más importancia Los comentarios después de cada </div> ayudan a facilitar la lectura, aunque los tags de inicio y final estén más separados entre sí.
Representación esquemática de las secciones div
Los elementos div permiten crear cuadros rectangulares en la página web en los que es posible almacenar otros elementos HTML como títulos y párrafos. Esquemáticamente tendría este aspecto:
No response to “Elementos HTML: Dividir la página en secciones "div"”
Publicar un comentario