CAPAS EN EL LENGUAJE HTML
Definición de las capas:
Un cambio importante en los navegadores web fue la interpretación de código
HTML Dinámico (DHTML). Éste permitía el uso de capas o layers que son
porciones de página que pueden tratarse de forma independiente y ser
modificada de diferentes formas, por ejemplo moverla de un lado a otro, poner
una capa encima de otra, etc.
El uso de capas permite mejorar el aspecto de nuestra página aplicándole
"efectos especiales", por ejemplo hacer que determinados objetos sean visibles
sólo cuando hagan falta.
Creación de capas:
Netscape utiliza la etiqueta <layer> para definir una capa, esta etiqueta
era incompatible en los navegadores Internet Explorer que soporta una versión
reducida de ellas representada en la etiqueta <div> y su cierre </div>.
Entre esas etiquetas podemos escribir cualquier cosa (texto, imágenes, tablas
o incluso otra capa).
La etiqueta <div> puede incluir el atributo id que incluirá el identificador
utilizado para referirnos a esa capa.
El atributo style indicará el estilo aplicado a la capa, aunque esto lo
estudiaremos a fondo en el próximo tema, veremos brevemente algunos de las
posibles propiedades que se pueden aplicar a "style":
• position: indica la posición de la capa con respecto a la totalidad de la
ventana del navegador (absolute) o con respecto a la capa que lo contiene
(relative)
• indica la posición vertical en píxeles en la que empezará la esquina
superior-izquierda de la capa.
• left: indica la posición horizontal en píxeles en la que empezará la esquina
superior-izquierda de la capa.
• background: nos permite indicar el color de fondo de la capa aceptando
tanto colores predefinidos como códigos hexadecimales.
• width y height : indican el ancho y alto de la capa respectivamente. Acepta
tanto porcentajes como píxeles.
• z-index: establece el orden en el que el navegador debe mostrar cada capa,
si tiene el valor 1 indica que será la primera que el navegador visualizará,
el 2 la siguiente y así sucesivamente, por lo tanto cuanto mayor sea el
número más encima estará una capa del resto.
La sintaxis de los estilos es la siguiente "propiedad:valor" y se separan
entre ellas mediante ";"
A continuación veremos un ejemplo de cómo crear una capa de 100x100 píxeles
de color azul situada a 150 píxeles de distancia vertical y 300 píxeles de
distancia de la esquina superior-izquierda del navegador:
<html>
<body>
<div id="micapa" style="position:absolute; top:150px; left:300px;
background:red; width:100px;height:100px;">
</div>
</body>
</html>
Aquí de abajo vemos como se mostrarán las etiquetas y atributos.
Ahora veremos el uso de la propiedad “z-index” para ello crearemos una capa de color rojo sobre la capa anterior, pero
desplazada 20 píxeles hacia abajo y hacia la derecha:
<html>
<body>
<div id="capa_azul" style="position:absolute; top:150px; left:300px; background:blue; width:100px;height:100px;z-index:1">
</div>
</div>
<div id="capa_roja" style="position:absolute; top:170px; left:320px; background:red; width:100px;height:100px;z-index:2">
</div>
</body>
</html>
Aquí de abajo vemos cómo se mostrarán las etiquetas y atributos.
En el ejemplo de ahora, utilizaremos la propiedad z-index para crear sombra en un texto. Para ello definiremos una capa con el
texto “Bienvenido” en color negro y otra capa debajo con el mismo texto pero en color gris desplazada 5 píxeles hacia
abajo y hacia la derecha:
<html>
<body>
<div id="capa_primera" style="position:absolute; top:50px; left:300px; width:200px;height:200px;z-index:1">
<font size="7" color="black">Bienvenido</font>
</div>
<div id="capa_segunda" style="position:absolute; top:60px; left:305px; width:200px;height:200px;z-index:2">
<font size="7" color="gray">Bienvenido</font>
</div>
</body>
</html>
Aquí de abajo vemos cómo se mostrarán las etiquetas y atributos
IMPORTANTE: Si no especificamos la propiedad “z-index” las capas se mostrarán en el orden en el que se escribieron
(es decir primero se visualizar; la que se escriba antes).
