Éste artículo es totalmente dedicado a las imágenes. A continuación aprenderás fácilmente a insertarlas y luego a manejarlas, y hasta insertar hipervínculos con ellas.

La estructura básica es:

<IMG SRC="imagen1.gif">

Donde IMG SRC (image source) se indica que en ese lugar habrá una imagen de nombre imagen1.gif, o cualquiera que sea.
Dentro del tag se pude incluir el atributo ALT, que muestra un mensaje alternativo al poner el cursor sobre la imagen (cuando veamos la página en el navegador):

<IMG SRC="imagen1.gif" ALT="mensaje o descripción alternativa">

Éste tipo de tags funciona para los usuarios que navegan sin ver las imágenes, y que al menos estén enterados qué tipo de imagen hay, para que quizá la abran.

Con el tema del lugar proveniente de la imagen es igual que en los enlaces. Se debe escribir una ruta correcta, si está en la misma que la página solo el nombre del archivo, sino la ruta completa.

Las imágenes tienen que estar guardadas en formato de fichero, especialmente en GIF (Graphics Interchange Format). Este GIF pude contener imágenes de hasta 256 colores, dando la posibilidad de que se abran más rápido pero quizá se vean mal. Existen otros formatos como JPEG (Joint Photographic Expert Group) y BMP (Bit Map Picture). Los más usados son los dos primeros (JPEG y GIF). El BMP ya no es tan usado y puede no verse bien.

Como verás mientras estás navegando, hay textos que rodean a las imágenes en su mayoría de casos. Esto es fácil mediante la etiqueta ALIGN dentro de IMG SRC. Por ejemplo:

<IMG SRC="imagen1.gif" ALIGN="aaa">

En vez de aaa deberemos ingresar la palabra correspondiente a la alineación:

...ALIGN="TOP"> - alineado arriba
...ALIGN="MIDDLE"> - alineado en medio
...ALIGN="BOTTOM"> - alineado abajo

Veamos como queda en una simple imagen.

Alineación arriba

Alineación en medio

Alineación debajo

Una opción muy buena es la de vincular imágenes con otros documentos del web.
Generalmente se usan imágenes pequeñas (botones, íconos) para ir a secciones de páginas, o a marcadores. Pero un link se puede hacer con el tamaño de imagen que quieras y como quieras.

Como vimos en el capítulo 3, la estructura es la misma:

<a href="yyy">xxx</a>

Donde yyy es la ruta del enlace y xxx el texto del mismo. Cambiaremos el yyy con el nombre del archivo (la ruta) a donde irá ese hipervínculo. Y en vez de un texto, como lo era xxx, escribiremos las etiquetas de la imagen.

Un ejemplo va a ser e irá enlazado a imagehtml.htm
El código es el siguiente:

<a href="imagehtml.htm"><img src="imagen.gif"><a/>

Cosa que da lo siguiente:

Si cliqueás en la imagen verás cómo vas directamente a imagehtml.htm como lo habíamos definido.
Te darás cuenta que la imagen contiene un borde alrededor. Si te molesta es posible sacarlo introduciendo el atributo BORDER=0. Un ejemplo:

<a href="index-1.htm"><img src="imagen.gif" BORDER=0></a>

Y quedaría de la siguiente manera:

Otra forma es enlazar imagen con imagen. Muy fácil:

<a href="imagen.jpg"><img src="imagen1.gif"></a>

Cuando se va hacia una imagen, o cuando aparece en las páginas, es posible guardarla.
Haciendo clic con el botón derecho del mouse sobre la imagen, se despliega un menú contextual del que seleccionaremos Guardar imagen como (Explorer) o Save Image As (Netscape).
Se abrirá un cuadro de diálogo donde elegiremos el destino de la imagen, el formato y el nombre.

CRISTIAN GENTILUOMO