Cómo añadir imágenes a una página web

Para agregar imágenes a tu web, lo primero que necesitas saber es que la imagen también va a necesitar estar en algún lugar de la Internet. No puede estar solamente en tu computador. Necesitarás decidir si vas a alojar la imagen en tu propio servicio de hosting o en una web que permita compartir archivos antes de continuar.

La ventaja de alojar tus propias imágenes es que siempre podrás saber que están allí hasta que las borres. La ventaja de alojar tus imágenes en alguna otra web es que te ahorrarás la transferencia de cada una de ellas. No obstante, si el dueño del otro sitio web retira las imágenes de su sitio, tu página web ya no mostrará ninguna imagen con la instrucción <img>.

Una vez que tengas la URL para la imagen, usarás la instrucción...

<img src="" alt="" width="" height="" title="" usemap="#">

...para incluirla en tu página. src="" significa fuente e indica la URL del gráfico que utilizarás. alt="" significa texto alternativo, y será lo que las personas con impedimentos visuales escuchen como descripción de lo que estás publicando. width="" y height="" indicarán al navegador el tamaño final deseado en pixeles para la imagen que incluyes en la página; mientras que title="" indicará el texto que se mostrará cuando un usuario coloque su ratón sobre la imagen.

De estos seis atributos, puedes considerar que solo src="" y alt="" son obligatorios.

También es posible hacer que toda una imagen o solo algunas regiones de ella sean 'cliqueables', enlaces. Para hacer toda una imagen un enlace utilizarás el marcador <a>; mientras que, para regiones, usarás el marcador <map>. Algunos ejemplos te ayudarán a entenderlo mejor.

Ejemplos

Comencemos con el más sencillo de los ejemplos. Esto es lo que hago para incluir el logotipo de mi web en esta página web:

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama">

Si quisiera especificar su tamaño, utilizaría height="" y width="". Si no, puedo simplemente dejar que el computador calcule el tamaño por sí mismo.

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama" height="315" width="118">

Para hacer del logo un enlace solo necesito incluir el ancla para indicarlo.

<a href="portada.htm"><img id="logo" src="pics/heptagrama.png" alt="Heptagrama"></a>

Si además quisiera que el usuario vea un mensaje cuando coloca el ratón sobre la imagen, uso title="".

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama" height="315" width="118" title="Este es mi logotipo. No lo copies.">

utilizo estas instrucciones porque mi logotipo está alojado en mi propia web. Tengo una carpeta en mi servidor llamada 'pics' y el logotipo está allí. Es por eso que uso una instrucción src="" relativa. Si tú necesitases colocar una imagen de algún otro lugar, necesitarás incluir la URL completa.

Tomar una imagen de otra web se conoce en inglés como hacer hot-linking. Solo ten presente que el hot-linking no es algo que agrade a todos; algunas personas lo entienden como una manera de robar el ancho de banda del hosting de otra persona. Dicho esto, si vas a hacer hot-linking de un archivo externo, asegúrate de hacerlo de un sitio web al que no le importe que lo hagas.

Tampoco olvides cerrar el marcador <img /> si estás usando XHTML.

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama" />

Usar un mapa

Como mencioné arriba, hay un procedimiento para transformar una imagen en una especie de menú. Utilizarás el marcador <map> para indicar esto, en un proceso que tiene dos partes.

Primero, necesitarás indicar que la imagen utilizará instrucciones de mapeo...

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama" usemap="#logo">

...y luego crearás el mapa en sí, indicando las regiones con el marcador <area>.

<area> utiliza cuatro partes:

<area shape="" coords="" alt="" href="">

Shape significa forma y tiene tres opciones: rectángulo (rect), círculo (circle) y polígono (poly). Esto indicará la forma del mapa.

Coords indicará las cooredenadas de cada región, y su uso dependerá de lo que hayas indicado en shape="":

Si estás usando un rectángulo, indicarás dos puntos: la posición superior izquierda con dos cifras, y la posición inferior derecha con otras dos cifras. Para mi logotipo, por ejemplo, de querer crear una región que cubra el nombre de esta web, utilizaría la siguiente instrucción:

<area shape="rect" coords="115,45,290,70" alt="text-region" href="javascript:;">

Si usas círculo, indicarás tres números. Los primeros dos indican la posición del centro del círculo; el tercero, el radio de la región. Para crear una región en la zona de la estrella de mi logotipo, usaría:

<area shape="circle" coords="61,61,40" alt="circular-region" href="javascript:;">

Si estás usando polígono, necesitarás indicar los puntos de la forma con pares ordenados. Trata de mantener siempre tus polígonos cerrados. Para cerrar un polígono, coloca el último punto en el mismo lugar que el primero.

<area shape="poly" coords="1,1,100,100,10,120,130,130,1,1" alt="polygon-region" href="javascript:;">

Nota que no hay espacios entre las cifras de ninguna región.

El atributo alt="", igual que con cualquier otra imagen, es para que le des información a las personas con daños en la vista. El atributo href="", para terminar, es para que indiques la dirección web de destino de aquellos que hagan clic en la región mapeada.


Aprende + Computadores e Internet + Desarrollo web