APRENDER
A USAR HTML (parte III)
2.
Insertando imágenes
La etiqueta utilizada para
agregar imágenes a una página Web es <IMG> y va acompañada de un atributo
fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene
la imagen a insertar.
Es decir: <IMG SRC="lugar donde guardo la imagen">
Supongamos que tengo la imagen earth.gif, que está presente en el mismo directorio
donde está la página y que la quiero insertar. La etiqueta apropiada sería:
<IMG SRC="earth.gif">
Y el usuario verá en el browser: 
La página que creamos en El Sitio guarda todos los archivos en el mismo directorio.
Pero también puede ocurrir que la imagen no se encuentre dentro del mismo directorio.
En este caso, habrá que especificar la ruta completa (es decir, la ubicación exacta
del archivo). Supongamos que guardo la imagen mono.gif en el directorio fotos.
La etiqueta debería decir:
<IMG SRC="fotos/mono.gif" width="32" height="32">
El atributo ALT
Otro atributo importante (aunque no imprescindible) de la etiqueta <IMG>
es "ALT". Este atributo permite complementar la imagen con un texto alternativo,
utilizado principalmente para aquellos browsers que no permiten mostrar imágenes,
ya sea porque son navegadores que sólo soportan texto (como Lynx), porque el usuario
tiene desactivada esta opción o porque se produjo un accidente que impidió la
llegada del gráfico a la PC del usuario. El texto aparecerá en el espacio correspondiente
a la imagen, y también cuando el usuario pase el mouse por arriba de la imagen,
incluso si ésta bajó normalmente a la computadora del navegante.
Ejemplo:
<IMG SRC="earth.gif" ALT= "Globo terráqueo">
El usuario verá (pasar el mouse arriba del texto):
Con sólo una gota de ingenio
Aunque puede no parecerlo, el atributo ALT es de gran utilidad, y puede serlo
aún más si es utilizado con un mínimo de inteligencia. De esta manera, se puede
utilizar para complementar la imagen o para negarla y de esa forma (intentar)
producir un efecto gracioso. Lo que hay que evitar a toda costa es caer en culaquier
tipo de redundancia.
Un ejemplo correcto sería:
<img src="juan.gif" alt="Juan después de retarme a un partido de tenis">
Y no:
<img src="juan.gif" alt="FOTO">
Imágenes como enlaces
Otra característica interesante de las imágenes insertadas es que permiten ser
utilizadas como hipervínculos. Para esto, es necesario crear un enlace (ver la
segunda entrega de este tutorial) y en vez encerrar texto dentro la etiqueta <A>
hay que encerrar una imagen.
Ejemplo:
<A HREF="http://www.elsitio.com"> <img src="logositio.gif"
alt="Click aqui para ir a El Sitio"></A>
Resultado:
Una idea interesante, aunque a esta altura poco original, sigue siendo la de enlazar
una imagen a una dirección de correo.
Ejemplo:
<A HREF=mailto:negropintos@hotmail.com img src="mail.gif"> <alt="Click
aqui para mandarme un mail"> </A>
El usuario verá:
Pero todavía hay más.
• 3. Más atributos
Guía de lectura
• Introducción
• 1. GIF vs. JPG
TEMAS
RELACIONADOS
Manual de JavaScript para "bajar" a tu computadora
Tutorial
de Flash 5
Editores
de páginas web fáciles y gratuitos
Todo para tu sitio