Imágenes

La etiqueta que nos sirve para incluir imágenes en nuestras páginas del Web es muy similar a la de enlaces a otras páginas, que hemos visto en el capítulo anterior. La única diferencia es que se le indica el nombre y la localización de un fichero que contiene una imagen.

La estructura de la etiqueta es: <IMG SRC="imagen.gif">; Dentro de la etiqueta se pueden añadir otros comandos, tal como <IMG SRC="imagen.gif" ALT="descripción">

Con respecto a la localización del fichero de esa imagen, se puede decir aquí lo mismo que en el capítulo anterior referente a los enlaces. Si no se indica nada especial, como en el caso que se ha expuesto, quiere decir que el fichero imagen.gif está en el mismo directorio que el documento HTML que estamos escribiendo. Si no es así, se siguen los mismos criterios que los indicados para los enlaces.

Al igual que una página con la que queremos enlazar puede estar fuera de nuestro sistema, (en cuyo caso había que indicar su URL o dirección completa), podemos cargar una imagen que no esté en nuestro sistema siguiendo el mismo método, es decir, indicar en la etiqueta el URL completo de la imagen. Aunque esto no es muy aconsejable, pues alargaría innecesariamente el tiempo de carga de nuestra página.

Para elegir la posición de la imagen con respecto al texto hay distintas posibilidades. La más sencilla es colocarla entre dos párrafos, con un titular a un lado.

De momento nos vamos a limitar a escoger la posición del titular con respecto a la imagen (si es que queremos ponerle un titular, claro está).

Se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera:

<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba

<IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio

<IMG SRC="isla.gif" ALIGN=BOTTOM>Titular alineado abajo

Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página. Para estos casos se utilizan generalmente imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen. Según vimos en el capítulo anterior, la estructura general de un enlace es:

<A HREF="xxx"> yyy </A>; donde xxx era el destino del enlace e yyy el texto del enlace (o más generalmente hablando, lo que aparece en la pantalla como el enlace; en el capítulo anterior era un texto, y en éste va a ser una imagen). En este caso sustituimos xxx por el nombre del fichero de la página a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen (que queda así englobada dentro de la etiqueta del enlace) <A HREF="pagina de destino.html"><IMG SRC="imagen.gif"></A>; Si no se desea que aparezca ese rectángulo, hay que incluir dentro de la etiqueta de la imagen el atributo BORDER=0, más estético, pero se corre el riesgo de que el usuario no se dé cuenta de que la imagen sirve de enlace.

Para alinear todo el texto alrededor de una imagen:

<IMG SRC="imagen.gif" ALIGN=RIGHT>

<IMG SRC="imagen.gif" ALIGN=LEFT>

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <BR>:

<BR CLEAR=LEFT> Busca el primer margen libre (clear) a la izquierda.
<BR CLEAR=RIGHT> Busca el primer margen libre a la derecha.
<BR CLEAR=ALL> Busca el primer margen libre a ambos lados.

Dimensionando la imagen: Se puede cambiar el tamaño de una imagen dando sus dimensiones en pixels. (Este dato lo habremos obtenido previamente de algún programa gráfico). Con los comandos son WIDTH (ancho) y HEIGHT (alto).