Las capas es otro de los elementos que podemos agregar a nuestro proyecto, ya que nos permitirán hacer ifinidad de cosas utiles como insertarles imágenes, texto fijo o en movimiento, tablas, etc.

Otra cualidad importante de las capa es solaparse y ocultarse lo cual las hace un objeto indispensable para desarrollar un proyecto Web.

ETIQUETA <DIV> </DIV> y <SPAN> </SPAN> : Estas etiquetas nos permiten insertar una capa, tienen infinidad de atributos, algunos de estos los veremos en este tutorial, sin embargo no profundizaremos demasiado ya que este tema tanbién esta ligado estrechamente con las CSS ( Cascada style sheets ) y al no estar incluido en el temario de este tutorial nos concentraremos especialmente en la etiqueta <DIV></DIV> y algúnos atributos que se aplican tanto a <SPAN> como a <DIV> recomendamos que para profundizar en este tema se siga el tutorial sobre CSS ( Cascada style sheets ).

ATRIBUTO ID: Nos permite dar nombre a la capa, es importante dar nombre a todos los componenetes que agregamos a nuestra Web. en este caso hablando de las capas, se podria decir que es fundamental, ya que un mismo documento podria tener infinidad de capas, las cuales pueden llegar a estar solapadas y de este modo sería muy díficil editarlas si así fuera necesario, así que lo mejor siempre es darles un nombre que seamos capaces de reconocer en un momento dado.

ATRIBUTO ALIGN: Este atributo solo se puede utiizar con la etiqueta <DIV></DIV> y nos permite localizar la capa mediante sus pripiedades

RIGHT: Derecha
CENTER: Centro
LEFT: Izquierda
JUSTIFIC: Justificar

La etiqueta <SAPAN></SPAN> carece de este atributo, ya que esta diseñada para aplicarle estilo o cambiar una linea o bloque mucho más pequeño que lo que podriamos hacer con <DIV></DIV>, que se utiliza para modificar bloques, insertar imágenes, y tablas.

A continuación haremos un ejemplo de capa aplicando los atributos hasta ahora vistos a la etiqueta div, recodemos que a excepción de el atributo Aling, que solo se puede aplicar a la etiqueta DIV, todos los demas atributos , se aplican tanto a la etiqueta DIV como a la etiqueta SPAN:

EJEMPLO:

<DIV ID= "EJPLO1" ALIGN=""CENTER><IMG SRC = "IMAGENES/ANGELITO.JPG" >
</DIV>

ATRIBUTO STYLE : Este es un atributo con diversas propiedades que nos permite definir las caracteristicas de las capas, se puede aplicar tanto a <DIV> como a la etiqueta <SPAN>.

Todas las propiedades de STYLE debén ír entre comillas dobles (""), separadas por punto y coma (;) y en lugar de utilizar el simbolo, igual (=), se utilizará los dos puntos (:).

PROPIEDAD POSITION: Esta propiedad, se utiliza para dar la ubicación de la capa en el documento, esta propiedad admite cinco valores: Absolute, Relative, Static, Fixed, e Inherit. Por defecto es Static, en este tutorial solo estudiaremos los valores Absolute y Relative

POSITION ABSOLUTE:A traves de los valores LEFT Y TOP ( y en CSS2 además RIGHT y BOTTOM ), Se define la posición de la capa respecto de la capa que la contiene, en el caso de ser la etiqueta BODY, ( Que es el contenedor principal de todo el documento ó etiqueta PADRE- PARENT ) ó si esta dentro de otro elemento posicionado absoluta o relativamente en el documento, como otra capa, tabla, etc. Será la esquina superior izquierda del elemento PARENT o ELEMENTO CONTENEDOR la referencia que tome para establecer las coordenadas del valor absoluto para posicionarse, en el caso de no haber fijado las coordenadas atraves de los valores left y top está ubicará su inicio en la parte superior en lo alto de la ultima linea del elemento PARENT o ELEMENTO CONTENEDOR ( si fuese una imagen el inicio de la capa absolute sería en la parte superior del elemento parent) y su inicio en el lado izquierdo, al final de la ultima línea del elemento parent (si fuese una imágen su inicio sería al final de la parte derecha del elemento parent.

position absolute

POSITION RELATIVE: Fijará la capa dentro del flujo normal de la página, esto quiere decir que la capa se ubicará después del elemento que la precede, ( una tabla, una imágen, otra capaetc.), dentro del elemento que la contiene.( la etiqueta body, otra capa, una tabla etc.).

Debemos recordar que un elemento posicionado absoluto no esta dentro del flujo normal de la página, ya que siempre mantendra la posición fijada, sin importar que tenga que sobreponerse a otro, mientras que un elemento fijado en posición relativa, siempre fluirá con el elemento que le precede dentro del flujo normal de la página, es decir: que su inicio será al final del elemento inmediatamente anterior en el documento HTML. o de su contenedor, resaltaremos diciendo, que sera el elemento previo dentro del documento, no en el codigo. A traves de las propiedades LEFT y TOP, fijaremos las coordenadas de la capa relative, que tomará como punto de inicio el final del lugar que ocuparía en caso de que no hubieramos asignado ningún valor.

position relative

LEFT:En la position absoluta establecerá la pocisión de la capa, al lado izquierdo en el documento, respecto al margen superior izquierdo del elemento contenedor, en la postion relative las coordenadas se fijarán partiendo del punto en el flujo del documento en el que tendria que estar si no hubiese sido posicionado, que sería el final del documento previo a este.

TOP: En la position absoluta establecerá la posición de la capa respecto al margen superior del elemento contenedor, en la position relative al igual que LEFT, tomará como referencia la parte superior en donde debería de estar dentro del flujo natural del documento contenedor, que sería el final del documento previo a este. Estos valores se pueden expresar en pixeles ó en porcentaje.

A continuación haremos unos ejemplos de las capas absoluta y relativa, con valores left y top asignados:

EJEMPLO 1, CAPA EN POSITION ABSOLTE : Para mayor comprensión del ejercicio, crearemos una capa parent o elemento contenedor, en position relative con una capa child en position absolute. ( recordemos que elemento contenedor o parent, también podria ser la etiqueta BODY, ya que este es el contenedor principal de todo el docuento) :

EJEMPLO 1 CAPA RELATIVE VERDE, PARENT DE ABSOLUTE AZUL

EJEMPLO 1 CAPA AZUL EN POSITION ABSOLUTE, CHILD DE RELATIVE VERDE, CON VALORES LEFT A 10 PX Y TOPA 10PX EJEMPLO 1.--- EJEMPLO 1 CAPA AZUL EN POSITION ABSOLUTE, CHILD DE RELATIVE VERDE, CON VALORES LEFT A 10 PX Y TOPA 10PX EJEMPLO 1 CAPA

</DIV>

EJEMPLO 1 CAPA RELATIVE VERDE, SIN VALORES LEFT NI TO ASIGNADOS PARENT DE ABSOLUTE AZUL EJEMPLO 1 CAPA RELATIVE VERDE, SIN VALORES LEFT NI TO ASIGNADOS PARENT DE ABSOLUTE AZUL EJEMPLO 1 CAPA RELATIVE VERDE, SIN VALORES LEFT NI TOP ASIGNADOS PARENT DE ABSOLUTE AZUL EJEMPLO 1 CAPA RELATIVE VERDE, SIN VALORES LEFT NI TOP ASIGNADOS PARENT DE ABSOLUTE AZUL

EJEMPLO 1 CAPA AZUL EN POSITION ABSOLUTE, CHILD DE RELATIVE VERDE, CON VALORES LEFT A 10 PX Y TOPA 10PX EJEMPLO 1.---- CAPA EJEMPLO 1 CAPA AZUL EN POSITION ABSOLUTE, CHILD DE RELATIVE VERDE, CON VALORES LEFT A 10 PX Y TOPA 10PX EJEMPLO.-------------

Como se puede observar, la capa absolute mantiene la posición asignada con los valores left 10px y top 10px, partiendo de la esquina superior izquierda de la capa parent superponiendose al contenido de esta, y aunque redimensionemos la ventana la capa absolute, siempre mantendrá la posición dada ya que esta dentro del flujo normal del documento.

EJEMPLO 2, CAPA EN POSITION RELATIVE : Para mayor comprensión del tema, haremos tres capas o elementos en position relative, el primero parent del segundo y el tercero en el mismo nivel del primero.

En el caso de la capa child, le fijaremos coordenadas, para poder observar como toma como punto de inicio para fijar dichas coordenadas el final del lugar en donde estaría en caso de no haber establecido valores left y top, y la capa parent se extiende, ocupando dicho lugar.( debemos tener en cuenta que en ninguno de los ejemplos anteriores hemos visto propiedades de dimensión de capas WIDTH e HEIGHT, por tanto dichos valores al no estar especificados son tomados por defecto "AUTO"propiedades que serán vistas más tarde,) :

EJEMPLO 2, CAPA AMARILLA EN POSITION RELATIVE PARENT DE GRIS

EJEMPLO 2, CAPA GRIS, CHILD DE AMARILLO CON VALORES LEFT DE 15PX Y TOP DE 80PX

</DIV>

EJEMPLO 2,CAPA VERDE EN POSITION RELATIVE, AL MISMO NIVEL QUE AMARILLO, SIN ESTABLECIMIENTO DE VALORES LEFT NI TOP.

</DIV>

EJEMPLO 2, CAPA AMARILLA EN POSITION RELATIVA, PARENT DE GRIS.

EJEMPLO 2, CAPA GRIS, CHILD DE AMARILLO CON VALORES LEFT DE 15PX Y TOP DE 80PX.-------------- EJEMPLO 2, CAPA GRIS, CHILD DE AMARILLO CON VALORES LEFT DE 15PX Y TOP DE 80PX. --------------

EJEMPLO 2, CAPA VERDE, AL MISMO NIVEL QUE AMARILLA, SIN ESTABLECIMIENTO DE VALORES LEFT NI TOP.

En el ejemplo anterior podemos ver que las capas amarilla y verde en position relative, sin valores left y top asignados fluyen naturalmente dentro del documento poniendose una detras de otra, (aunque en el codigo la capa verde la hemos puesto en tercer lugar, ya que como dijimos anteriormente, no hablamos del flujo dentro del codigo, sino en el documento ), también se puede observar como la capa amarilla, se extiende hasta donde su child ocuparia el lugar en caso de no haberle asignado valores left ni top, independientemente de que su contenido no llega hasta esa dimensión y la capa verde tiene su inicio en donde la capa child gris, tendría su fin, en caso de no haberle asignado las propiedades left y top

En el caso de la capa gris, child de la capa amarilla, con valores left y top asignados, fija las coordenadas dadas, desde el lugar en el que hubiera ocupado en caso de no haber asignado valores.

Concluiremos anotando que las capas relative, fluyen dentro del documento ya que aunque redimensionemos la ventana ellas, al contrario de las capas en position absolute, se adaptaran al tamaño para ubicarse una detras de otra en el fluir de la página..

WIDTH: Esta propiedad nos permite establecer el ancho de la capa, que puede especificarse tanto en pixeles como en porcentaje, Pero el comportamiento de las capas con estas propiedades definidas tampoco es igual para la capa en position relative que para que esta en position absolute; veamos:

Cuando la propiedad width no es definida, la capa se extiende hasta el ancho de la ventana, como se puede observar en los ejercicios de capas que hemos expuesto anteriormente, que al no tener definidos los valores width ni height adoptan el comportamiento por defecto del navegador.

Como habíamos dicho anteriormente las capas en position absolute, no fluyen con el documento, cuando una capa absolute tiene la propiedad width definida, mantendra la posición fijada, aunque para ello tenga que expandirse más allá de la ventana del navegador; en el caso de que la propiedad height no este definida y la capa fuese demasiado estrecha para mostrar su contenido, la capa se extenderá hacia abajo todo lo necesario para mostarlo.

EJEMPLO 1: CAPA EN POSITION ABSOLUTE CON PROPIEDAD WITH DEFINIDA EN 550PX:

EJEMPLO 1,CAPA MORADO EN POSITION ABSOLUTE CON PROPIEDAD WIDTH DEFINIDA EN 550PX

En el caso de las capas con positon relativa, la capa fluye con el documento y si redimensionamos la ventana, veremos como, esta adaptará su dimensión para mostrar el contenido, sin embargo, si el valor dado a Width excede el ancho de la ventana del documento en principio creado este se redimensionará con nuestra capa.(En este caso, nuevamente podemos observar el flujo del documento).

EJEMPLO 2: CAPA EN POSITION RELATIVE CON PROPIEDAD WIDTH DEFINIDA EN 750PX, DENTRO DE LA ETIQUETA BODY:

EJEMPLO 2, CAPA RELATIVA FUCCIA CON PROPIEDAD WIDTH DEFINIDA EN 750, DENTRO DE BODY

Pero si la capa relativa con width definido se encuentra dentro de una capa en position absolute, la capa relativa, solo fluirá dentro de los limites de su parent absolute.

EJEMPLO 3, CAPA ABSOLUTE CON CHILD RELATIVE, CON VALORES WITH DEFINIDOS EN :

CAPA ABSOLUTE CON PROPIEDAD WITH DEFINIDA EN 700 PX PARENT DE VERDE

CHILD DE CAPA NARANJA ABSOLUTE, RELATIVE CON WITH DEFINIDO EN 400 PX

HEIGHT: Con esta propiedad estableceremos el alto de la capa, y su comportamiento es igual al descrito de la propiedad Width.

PROPIEDAD OVERFLOW: Esta propiedad nos permite definir el comportamiento del contenido de la capa; una vez definidas las propiedades, LEFT, TOP, WIDTH Y HEIGHT, es posible que el contenido de la capa no se vea como se espera, para solucionarlo podemos aplicar la propiedad OVERFLOW, a la que se le pueden aplicar los siguientes valores:

Visible: Ajusta el tamaño de la capa para mostrar el contenido.( Es el valor por defecto )
Heidden: Ajusta el tamaño del contenido al especificado en la capa a traves de valores anteriores.
Auto: Este valor, coloca barras de scroll en caso de que el contenido exceda el tamaño de la capa.
Scroll: Coloca barras de scoll, independientemente del contenido de la capa.

Ejemplos:

OVERFLOW HEIDDEN:

CAPA AZUL EN POSITION RELATIVE, WIDTH 200PX , HEIGHT 115PX, OVERFLOW= HEIDDEN. CAPA AZUL-CAPA AZUL

OVERFLOW SCROLL:

CAPA VERDE EN POSITION RELATIVE, WIDTH 200PX , HEIGHT 115PX, OVERFLOW= SCROLL. CAPA VERDE-CAPA VERDE

PROPIEDAD VISIBILITY: Establece la visibilidad de la capa atraves de los siguientes valores.

INHERIT: Se muestra la capa siempre y cuando la capa a la que pertenece se este mostrando (El documento HTML, también esta considerado como una capa )

VISIBLE: Se muestra la capa aunque la capa a la que pertenece no se este mostrando

HIDDEN: Oculta la capa, sin afectar el flujo del documento y el elemento continua ocupando su espacio aunque no se pueda ver.

Z-INDEX: Este es el indice de la capa dentro de la página, una capa podra ser solapada por otra que sea de mayor indice, por defecto se apilarán según como se vayan añadiendo al documento, pero este atributo nos permite decidir que capas serán las que esten solapando a otras, se bederán siempre poner números enteros positivos para especificar estos valores.

Veamos: las capas dentro del documento se van añadiendo una detras de otra, en caso de haberse dado coordenadas a una capa en position absoluta y esta se superpone a otra que queremos que se vea por encima de la capa absoluta, entonces aplicaremos a las capas un valor Z- INDEX que nos permita lograrlo, de modo que a la capa absoluta le daremos un valor inferior que a la que queremos ver encima.

EJEMPLO 1: Tres capas con valor Z-INDEX, cada una se coloca despues de la otra con menor Z-INDEX

Z-INDEX = 1

Z-INDEX = 2

Z-INDEX = 3

Algo que debemos tener muy en cuenta a la hora de aplicar estos valores, es que se aplican entre elementos del mismo nivel, esto quiere decir que si tenemos un elemento parent de otro y uno siguiente del mismo nivel de parent, aunque apliquemos el mayor valor al child del primer elemento, este quedará, debajo del tercero ya que, como dijimos anteriormente estos valores solo aplican entre elementos del mismo nivel.

EJEMPLO 2: En el siguiente ejemplo vemos tres capas, gris parent de verde y rosa al mismo nivel de gris, el valor Z-INDEX solo se aplica a las capas gris y rosa, ya que la capa verde sigue a su parent y no se superpone a la rosa.

Z-INDEX=1

Z-INDEX=3

Z-INDEX=2

Si desea ampliar un poco más los conceptos vistos anteriorente, puede seguir el siguiente enlace de ejemplos de posicionamiento:

TUTORIAL HTML

CAPAS

(Hipertex markup language)