1. Introducción

El lenguaje HTML nos permite ubicar la información dentro de una página web con una flexibilidad total.

El contenido de una página web puede ser diferenciado en zonas o bloques, que pueden estar ubicados en la página de muchas formas diferentes.

2. La etiqueta div

La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.

El uso de la etiqueta div es sencillo. Observemos este ejemplo:

<div>
  <h1>Índice</h1>
  Página principal<br />
  Material multimedia<br />
 Autores<br />
</div>
Este sería el resto de nuestra página que se encuentra fuera del div.

Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en la estructura interna del documento hemos aplicado una división muy importante.

La imagen muestra el texto del ejemplo; no hay ninguna diferencia visible.

Probemos ahora a aplicar una modificación a la apariencia de ese bloque, añadiendo un estilo de borde a la etiqueta <div>; quedaría así:

<div style="border: 2px solid rgb(204, 102, 204);">
  <h1>Índice</h1>
  Página principal<br />
  Material multimedia<br />
 Autores<br />
</div>
Este sería el resto de nuestra página que se encuentra fuera del div.

Observemos de nuevo la figura; ahora sí que aparece un borde sólido de 2 píxeles alrededor de todo el espacio definido por la etiqueta div.

Eso es todo lo que necesitamos saber: la etiqueta <div> configura espacios dentro de la página.

3. La etiqueta span

Después de un </div> se comienza con una nueva línea. Esa es una de las diferencias principales con la otra etiqueta que empleamos para diferenciar contenidos, la etiqueta <span>. Con ella conseguimos un efecto similar, pero en el interior de un párrafo. Recordemos que span se emplea con frecuencia para aplicar estilos en el interior de un bloque de texto.

4. Diferenciando las etiquetas div y span

Adicionalmente, las etiquetas div y span se suelen acompañar de uno o dos parámetros destinados a identificar ese bloque:

id: permite establecer un identificador único para el bloque. Así podremos referirnos al bloque de forma inequívoca.

class: es similar a id, pero con la ventaja de que se puede repetir; así que podemos tener varios <div> diferentes con la misma clase.

Usando id y class podemos diferenciar unos div de otros y así aplicarles estilos CSS diferentes o hacer que actúen de forma distinta.

Las etiquetas id y class se utilizan como se muestra en el ejemplo:

<div id="indice">
<br>índice
</div>
<div class="destacado">
Este texto se destaca mediante un estilo.
</div>
<div id="articulo15" class="articulos_estandar">
Texto de un artículo
</div>

Como se puede apreciar, las etiquetas id y class se pueden mezclar.

5. Posicionando bloques

Con los elementos que ya conocemos podemos realizar operaciones de maquetación dentro de una página web.

La ventaja del uso de bloques definidos con <div>, además de aplicar formato es que podemos posicionarlos en el lugar que más nos convenga, gracias a algunas de las propiedades de las hojas de estilo.

Utilizando los valores de Flotación podemos ubicar el bloque a la izquierda, a la derecha e incluso centrarlo en determinados momentos.

Traducido a estilos, este cambio es tan sencillo como añadir <div syle="float: right;"> en nuestro código:

<div style="border: 2px solid rgb(204, 102, 204); float: right">
  <h1>Índice</h1>
  Página principal<br />
  Material multimedia<br />
 Autores<br />
</div>
Este sería el resto de nuestra página que se encuentra fuera del div.

Probemos ahora a modificar la posición en valor absoluto. Los estilos que podemos emplear con sus respectivos valores son:

• position: absolute: indica que vamos a establecer una posición fija para ese <div> en la página.
• left (izquierdo), right (derecho), bottom (inferior) y top (superior): estos valores, seguidos de un número de píxeles, porcentaje u otros valores, establecen la distancia que habrá entre el div y el borde respectivo.
• width (ancho) y height (alto): indican la altura o anchura que tendrá el cuadro.

<div style="border: 2px solid rgb(204, 102, 204); position:absolute; top:20px; left:20px">
  <h1>Índice</h1>
  Página principal<br />
  Material multimedia<br />
 Autores<br />
</div>
Este sería el resto de nuestra página que se encuentra fuera del div.

Por último, no es necesario establecer siempre valores fijos. En lugar de píxeles podemos emplear porcentajes.Por ejemplo:

<div style="text-align: center; position: absolute; top: 30%; left: 30%; right: 30%; bottom: 30%;">

Un <div> no sólo puede contener texto, sino que puede contener a cualquier otro elemento HTML: imágenes, párrafos, iframes, vídeos, cualquier cosa. Incluso pueden contener otros <div>. De hecho anidar unos <div> dentro de otros es una práctica más que habitual para estructurar correctamente una página web.

Ha llegado el momento de que demuestres lo aprendido.

• Crea un nuevo documento HTML y guárdalo como mimaquetacion.htm.
• Crea toda la estructura básica del documento, recuerda: <!DOCTYPE html>, <html>,<head>... Puedes revisar el primero que hiciste.
• Añade las etiquetas meta para el autor, descripción y palabras claves.
• Añade la etiqueta de título con el texto "Mi maquetación".
• Crea las cinco bloques que ves en la imagen. La distancia a los bordes son 20 píxeles, excepto el del centro que ya lo indica él.
• La imagen que se usa de fondo en el bloque de la derecha está tomada de "http://www.tuinstitutoonline.es/img/logoejer.jpg" y debes hacer referencia a ella con la URL.
• Fíjate en los bordes y los colores de fondo.
• Te debe quedar algo así:

• Guarda el documento mimaquetacion.htm y súbelo a la plataforma.