Capas

Introducción

Una capa es un contenedor que tiene la peculiaridad fundamental de poder situarse en cualquier punto de nuestra página Web.

Una capa puede contener cualquier elemento HTML, texto, tablas, imágenes, incluso otras capas.

También podemos superponer variar capas, de tal manera que la capa que está por encima ocultará a la de abajo.

Otra propiedad de las capas es la visibilidad, como consecuencia de un evento, podemos mostrar u ocultar el contenido de una capa.

Por todas estas características, las capas tienen dos utilidades fundamentales:

  1. Servir de contenedoras para situar una parte de documento en cualquier posición de la página.
  2. Con la ayuda de código Javascript que se desencadena por eventos, permitir efectos dinámicos, por ejemplo menús desplegables, textos que aparecen al situar el ratón sobre un enlace, textos que se mueven siguiendo al puntero del ratón, etc.

En esta lección explicaremos el uso básico de las capas como elementos contenedores.

Referencia HTML

Etiquetas DIV y SPAN

Las etiquetas HTML que permiten el uso de las capas son DIV y SPAN. Todas las etiquetas HTML comprendidas entre las correspondientes etiquetas de apertura y cierre configuran la capa.

La etiqueta DIV dispone del modificador id que permite dar un nombre a la capa. Dar un nombre a una capa es fundamental para que los programas Javascript puedan acceder a la misma.

Las características de la capa se establecen con un estilo (style) dentro de la etiqueta DIV de apertura.

El uso de la etiqueta DIV y SPAN es similar, la diferencia es que la etiqueta DIV genera un salto de línea anterior y posterior a su contenido, mientras que la etiqueta SPAN no. La etiqueta SPAN se utiliza para, por ejemplo, crear una capa que contenga algo y se alinee entre dos palabras de un párrafo.