CODIGOS PARA HTML AVAZADO.

1.- CODIGO PARA ESCRIBIR SOBRE UNA IMAGEN:

<table background=imagen.gif height=xx width=xx>

<tr>
<td>TEXTO; donde xx es el tamaño de la imagen
</td>
</tr>
</table>

2.-CODIGO DE INSERTAR IMAGEN:

<img src="aspire_4315.jpg" alt="laptop" width="280" height="200" />

3.-
Escribir por encima de las
imágenes
Un par de sencillos ejemplos para constatar que esto es posible.

En este taller de HTML vamos a aprender a colocar texto encima de una imagen,
utilizando un pequeño truco con tablas.

Como el lector sabrá, las imágenes ocupan un espacio en la página que no se puede
ocupar también con texto, es decir, si colocamos una imagen en un lugar, en principio,
no se podría colocar texto ni otros elementos encima. Bueno, esto no es del todo cierto.
Realmente se pueden utilizar capas para realizar esa tarea, pero el trabajo con capas
siempre es complicado y puede llegar a dar problemas de compatibilidad con diferentes
navegadores.

Este ejemplo puede ser útil para muchos casos. Por ejemplo, para jugar con fondos que
tengan varios colores, o para escribir texto decorado con un bonito fondo de imagen que
no tiene porque repetirse en toda la página.

Lo mejor es que visualicemos el efecto buscado en una página aparte.

El código de este ejemplo es el siguiente:

<table border=1 bordercolor=black align=center width=159 cellpadding=3 cellspacing=2

background="huella.gif" height="146">
<tr>
<td>
<font size=2 face="arial,verdana">
<br>
Esta es la huella de mi perrito.
<br>
<br>
Estoy muy contento de que se pasee de vez en cuando por este sitio web.
</font>
</td>
</tr>
</table>

Se trata de una tabla a la que le hemos colocado una imagen de fondo, utilizando el
atributo background. Para que aparezca la imagen entera, la tabla se dimensiona al
tamaño de la imagen. El texto que queremos escribir en el fondo de la imagen se coloca,
tal cual, en la celda.

Otro ejemplo de imágenes de fondo en la tabla

Otro efecto que queda muy atractivo es crear una imagen con una trama de dos colores,
que se puede utilizar de fondo, en la página o bien en una tabla.

Se puede ver el ejemplo aquí.

El código de la tabla sería el siguiente:

<table align=center width=700 cellpadding=3 cellspacing=2 background="trama.gif"

bgcolor="000000">
<tr>
<td>
<font size=2 face="arial,verdana" color="#ffffff">
Esto podría ser una barra de enlaces | Enlace 2 | Otro enlace | Termino con los enlaces
</font>
</td>
</tr>
</table>

Es un ejemplo muy simple y se consigue un efecto bastante elaborado. Si se embellece

un poco más, se podría utilizar para una barra de navegación muy decente.

Nota: Es importante que el color de las tablas (atributo bgcolor) o las celdas donde
coloques las imágenes de fondo (atributo background) sea lo más parecido al color
predominante de la imagen. De este modo, se podrán ver perfectamente los textos que
hayas escrito en la celda mientras se carga la imagen de fondo o, incluso, si no llega a
cargarse por cualquier problema.

Por cortesía de Miguel Angel Alvarez

Director de DesarrolloWeb.com