CAPAS Y APPLETS

Capas

Son elementos como páginas, texto, imágenes,... que se pueden incluir dentro de otras páginas.

Se define la capa igual que hacíamos con el elemento ID (identificadores):

Le damos un nombre y entre las llaves ponemos las propiedades separadas con ";".

position

La propiedad que va a definir a una capa es POSITION que lleva como valores absolute y relative. El primero sirve para situar la capa donde queramos, aunque haya texto debajo. El segundo la situará de acuerdo a donde escribamos los códigos para llamar a la capa.

Para llamar a la capa:

<BODY>
<SPAN ID="capa">
El texto que queremos que tenga dentro la capa.
</SPAN>
</BODY>

También podemos poner las propiedades directamente en la etiqueta (o sacarlas fuera, a un archivo aparte).

<BODY>
<SPAN ID="capa" STYLE="position:absolute; top:100; left:200">
El texto que queremos que tenga dentro la capa.
</SPAN>
</BODY>

Los valores top y left se explican solitos.

En este caso quedará como vemos aquí. Su código es:

<BODY>
<SPAN ID="capa" STYLE="position:absolute; top:100; left:200;color:blue;font-size:2cm;">
El texto que queremos que tenga dentro la capa.
</SPAN>
</BODY>

Queda claro. Una capa con posición absoluta se coloca donde le digamos con top y left partiendo de la esquina superior izquierda y se coloca ahí (encima) aunque haya algo debajo.

Podemos hace que se coloque debajo del texto y que sea una imagen.

Quedará como vemos aquí. Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer, en Netscape no se verá la imagen).

En Netscape, para poner la imagen debajo, tenemos que poner el z-index en la imagen y también en el <P> o <SPAN> (o <DIV> o <FONT>,...) que contenga al texto, con unos valores numéricos de modo que el menor quedará debajo. Esto también vale para el Explorer.

Pincha aquí para verlo en ambos.

El código:

<BODY>
<SPAN ID="capa" STYLE="position:absolute; top:100; left:200;z-index:1">
<img src="grande.jpg">
</SPAN>
<DIV STYLE="position:relative; z-index:2">
......texto.....
</DIV>
</BODY>

Hay que poner a la fuerza position:relative en la etiqueta del texto (pero sin valores).

En el caso de la position:relative la colocación será a partir del lugar donde se ha colocado la etiqueta con la propiedad.

<BODY>
Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima
<SPAN ID="capa" STYLE="position:relative; top:10; left:100">
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57>
</SPAN>
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.
</BODY>

Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.

Observa que la imagen se ha movido 10 px desde donde tenía que estar hacia abajo y 100 px hacia la derecha.

Si le damos valores negativos irá al contrario, hacia arriba y hacia la izquierda:

<BODY>
Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima
<SPAN ID="capa" STYLE="position:relative; top:-10; left:-100">
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57>
</SPAN>
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.
</BODY>

ĄQue cosas! ĄEh!.

Además, todo funciona exactamente igual si le quitamos el id, lo que nos lleva a pensar que, en realidad, la capa sólo se define con position. EL id nos servirá si queremos modificarla desde un lenguaje de script como JavaScript.

<BODY>
Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima
<SPAN STYLE="position:relative; top:-10; left:-100">
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57>
</SPAN>
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.
</BODY>

Si quitamos el <SPAN> y ponemos <DIV>, que es el que debería estar, vemos que el top funciona como antes pero el otro no, se sitúa esos píxeles desde el lado izquierdo de la página, no de la posición. Además en Netscape se ve bien el dibujo con uno y no con el otro.

<BODY>
Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima
<DIV STYLE="position:relative; top:10; left:100">
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57>
</DIV>
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.
</BODY>

Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima

y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.

Si queremos situar, no un texto o una imagen, sino una página HTML (o TXT,...) en una capa recurrimos al <IFRAME>, que ya hemos visto. Podemos usar posiciones relativas:

<BODY>
Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima
<DIV STYLE="position:relative; top:10; left:100">
<IFRAME SRC="estilos.htm" width=200 height=100> </IFRAME>
</DIV>
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.
</BODY>

Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima

y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.

O absolutas.

width y height

Seguimos con los viejos WIDTH y HEIGHT que marcarán la anchura y altura de la capa respectivamente (siempre que sean más anchas y altas que el texto, imagen,... en Explorer, en Netscape se ve de distinta forma si son menores). Como, por defecto, el fondo de la capa es transparente, no podremos ver estas propiedades si no le damos un color.

background-color

Vamos a poner un colorcito.

<BODY>
Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima
<DIV STYLE="position:relative; top:10; left:10"; background-color:red; width:150; height:100;">
La caries dental
</DIV>
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.
</BODY>

Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima
La caries dental
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.

Como se ve el texto se sitúa arriba a la izquierda por defecto. Nosotros podemos centralo con <CENTER> y bajarlo con varios <BR> seguidos:

<BODY>
Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima
<DIV STYLE="position:relative; top:10; left:10"; background-color:red; width:150; height:100;">
<CENTER><BR><BR><BR> La caries dental </CENTER>
</DIV>
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.
</BODY>

Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima

La caries dental
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.

Mira que chulo queda, además, con borde. Pincha.

background-image

Es decir, que podemos poner una imagen de fondo.

<BODY>
Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima
<DIV STYLE="position:relative; top:10; left:10"; background-image:URL(grande.jpg); width:150; height:100;">
<CENTER><BR><BR><BR> La caries dental </CENTER>
</DIV>
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.
</BODY>

Observa que he incluído una nueva propiedad que es z-index que es la que dice qué va a estar encima

La caries dental
y qué debajo. Si le ponemos el valor -1 quedará debajo (Explorer). Cuando tengamos más de una capa lo volveremos a ver.

Pincha.

z-index

Ya hablamos de este. Queda muy aparente cuando tenemos más de una capa y queremos que una esté sobre la otra.

Si no lo ponemos quedará arriba la que escribimos en segundo lugar. Pincha aquí.

Pero podemos invertirlas si le colocamos a la azul el número 1 (en la propiedad) y a la roja el 2.

<DIV STYLE="position:absolute; top:100; left:200; width:250; height:150; background-color:red; font-size:30; z-index=2">
Texto de Capa </DIV>
<DIV STYLE="position:absolute; top:150; left:250; width:250; height:150; background-color:blue; font-size:30; z-index=1">
Texto de Capa </DIV>

Pincha aquí para verlo.

clip

Sirve para recortar la capa y que sólo se vea lo que yo quiera que se vea. Aunque hemos visto que las propiedades de anchura y altura cortan la capa, cuando la imagen es el fondo, desde arriba-izquierda (pincha aquí para recordarlo); esta propiedad la corta de forma más flexible, es decir, desde donde queramos.

Se usa clip con el valor rect y 4 números entre paréntesis. Observa el dibujo.

Aplicado a mi imagen quedaría:

Pincha aquí para verlo.

visibility

Especifica si la capa se verá o no.

Valores:

- visible: el predeterminado que es que se vea.
- hidden: que no se vea.
- inherit: que herede el tipo de visibilidad de la capa donde esté metida.

Applets

Un APPLET es un pequeńo programa hecho con un lenguaje llamado JAVA (que no tiene nada que ver con JavaScript) y que nosotros podemos bajarnos de la red (gratuitamente sin fines comerciales) e incluirlo en nuestro documento web. Necesita que el navegador pueda leer ese lenguaje, como hacen ya los modernos.

Se usa la etiqueta <APPLET> con su cierre. Entre ellas situamos los parámetros que podemos modificar a nuestro gusto y que dependen del programador que creó el applet. Se escriben como <PARAM> con NAME y VALUE que tendrá valores en espańol (en el caso que vamos a ver).

Situamos las etiquetas donde queremos que salga:

Ponemos la llamada al código del applet que es lo que me he bajado:

Ponemos los parámetros:

E incluimos un texto para que el usuario sepa que ahí hay un applet si es que no puede verlo por su navegador:

<BODY>
<APPLET CODE="Cartel.class" WIDTH="200" HEIGHT="50">
<PARAM NAME="colorfondo" VALUE="azul">
<PARAM NAME="colortexto" VALUE="rojo">
<PARAM NAME="texto" VALUE="Ejemplo de Applet">
<PARAM NAME="desplazamiento" VALUE="izquierda">
<PARAM NAME="fps" VALUE="34">
<PARAM NAME="saltopuntos" VALUE="4">
<PARAM NAME="URL" VALUE="http://www.arrakis.es/~lao">
<PARAM NAME="efecto3d" VALUE="si">
<PARAM NAME="borde" VALUE="si">
Tu Visualizador WEB no puede ejecutar código JAVA
</APPLET>
</BODY>

Y vemos el bicho en cuestión (el autor es Luis Ángel Ortega):

Tu Visualizador WEB no puede ejecutar código JAVA