6.-IMÁGENES

La etiqueta que nos sirve para incluir imágenes en nuestras páginas 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, en lugar de indicar al programa navegador el nombre y la localización de un documento de texto HTML para que lo cargue, se le indica el nombre y la localización de un archivo que contiene una imagen.

La estructura de la etiqueta es:

Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada, como está indicado, imagen.gif (o el nombre que tenga).

Dentro de la etiqueta se pueden añadir otros comandos, como ALT

Con el comando ALT se introduce una descripción (una palabra o una frase breve) indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra página con un programa navegador en for- ma de texto como el Lynx. Ya que no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Pero no es sólo por esto. Hay casos, como veremos más adelante, en los que se utiliza una imagen como enlace a otra página. Si se omitiera este comando, los que utilizan dichos navegadores no podrían de ninguna manera acceder a esas páginas.

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

Las imágenes deben estar guardadas en formato GIF (máximo 256 colores, para dibujos) o en formato JPG (para imagen fotográfica).

Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esté intentando car- gar nuestra página se canse de esperar, y desista.

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. Los navegadores actuales (como el Netscape Navigator y el Microsoft Internet Explorer) permiten que el texto pueda rodear a la imagen.

De momento nos vamos a limitar a escoger la posición del titular con respecto a la imagen. 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 gene- ralmente 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:

En este caso sustituimos XXX por el nombre del archivo de la página a la que queremos acceder. Y en lugar de YYY po- nemos la etiqueta completa de la imagen (que queda así englobada dentro de la etiqueta del enlace).

Como por ejemplo (hombre.gif) para acceder al ejemplo práctico del capítulo 2 (mipag2.html):

Pulsando la imagen comprobamos que efectivamente enlaza con la página deseada. Obsérvese además que la imagen está rodeada de un rectágulo del color normal en los enlaces. Si no se desea que aparezca ese rectángulo, hay que incluir dentro de la etiqueta de la imagen el atributo BORDER="0", es decir:

Posicionando el cursor sobre esta última imagen, comprobamos que actúa también como enlace aunque carezca del rec- tángulo de color. Esto puede resultar más estético, pero se corre el riesgo de que el usuario no se dé cuenta de que la ima- gen sirve de enlace.

También podemos utilizar una imagen para enlazar con otra imagen. Supongamos que queremos enlazar con la imagen estaimagen.gif por medio de esta otra imagen desdeesta.gif:

Por ultimo, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso sustituimos XXX (el des- tino del enlace) con el nombre del archivo de la imagen a la que queremos acceder e YYY (lo que aparece en pantalla co- mo el enlace) por el texto.

Ejemplo

<A HREF="isla.gif"> un paraíso tropical </A>

Un tipo de imágenes del que se hace abundante uso y que sirven para mejorar la presentación de la página son los iconos, botones, barras separadoras, etc. A pesar de su tamaño o forma, son imágenes como cualquier otra.