Para insertar una imagen en la página web usaremos la etiqueta <img>:
<img
align: alineación horizontal de la imagen (bottom | left | middle | right | top).
alt: muestra un texto descriptivo en lugar de la imagen si ésta no ha sido encontrada, o bien en caso de
navegadores web en modo de sólo texto.
border: ancho del borde de la imagen (en píxels).
height: indica el alto de la imagen (en píxels). Si no se indica width, se estirará proporcionalmente a
lo ancho.
hspace: espacio horizontal en píxels entre la imagen y el texto que la rodea.
longdesc: descripción larga de la imagen. Utilizada como complemento del atributo alt.
src: ruta y/o nombre y extensión, o bien URL de la imagen a mostrar.
usemap: indica que la imagen será usada en un mapa de imagen definido con la etiqueta <map>.
vspace: espacio vertical en píxels entre la imagen y el texto que la rodea.
width: indica el ancho de la imagen (en píxels). Si no se indica height, ésta se estirará
proporcionalmente a lo alto.
/>
Ejemplo:
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
<img src="email.jpg" alt="Enviar correo electrónico"/>
<img src="imagenes/email.jpg" alt="Enviar correo electrónico"/>
<img src="http://dominio.com/images/email.jpg" alt="Enviar correo electrónico"/>
</body>
</html>
Según el ejemplo, en la primera imagen se indica que el archivo 'email.jpg' se encuentra en el mismo directorio que la página web, en la segunda que se halla en el subdirectorio 'images', y en la tercera en otro servidor (aunque también puede usarse este método si se encuentra en el propio servidor).
Usando el atributo alt se establece un texto alternativo que será mostrado en lugar de la imagen, si ésta no es encontrada.
Otros atributos disponibles:
<html>
<head>
<title>Mi primera página WEB: Imágenes</title>
</head>
<body>
<img src="email.jpg" width="400" height="300" border="3"/>
</body>
</html>
Con los atributos width y height indicamos el tamaño en píxels de la imagen. Ten en cuenta que si las dimensiones indicadas son mayores a las de la imagen, la imagen perderá calidad, así como que puede quedar desproporcionada.
En el atributo border se indica el ancho en píxels del borde la imagen (según el ejemplo no tendrá borde alguno).
El atributo border se encuentra desactualizado en HTML 4: se recomienda usar Hojas de Estilos CSS en su lugar.
Los mapas de imagen se usan para definir áreas de una imagen, de forma que al hacer clic en ellas se realice una determinada acción (normalmente abrir una página web).
Para crear mapas de imagen se usa la etiqueta <map>, entre cuya apertura y cierre escribiremos tantas etiquetas <area> como áreas de la imagen queramos definir. Sus atributos más importantes son:
<map
name: nombre del mapa de imagen, que deberá indicarse en el atributo usemap de <img>.
>
</map>
<area
alt: muestra un texto descriptivo en lugar de la imagen si ésta no ha sido encontrada, o bien en caso de
navegadores web en modo de sólo texto.
coords: coordenadas de la imagen en las que se encuentra limitada el área.
href: URL que se cargará al hacer clic en el área definida. Si no se cargará ninguna debe usarse el
atributo nohref.
nohref: indica que no se cargará ninguna URL al hacer clic en el área especificada.
shape: tipo de área que se desea definir: rect, circle, poly o default.
tabindex: define un orden de tabulación para el área de la imagen.
target: especifica dónde se cargará la URL: _blank (en una pestaña o ventana nueva), _parent (en el frame o marco que contiene al actual), _self (en el frame actual) o _top (en la ventana principal del navegador web).
>
</area>
Ejemplo:
<html>
<head>
<title>Mi primera página WEB: Mapa de imagen</title>
</head>
<body>
<map id="mapaSuscripcion" name="mapaSuscripcion">
<area shape="rect" coords="44,63,111,129" href="http://www.facebook.com/pages/Aprenderinformatica/124212020947403" alt="Facebook" />
<area shape="rect" coords="125,63,191,130" href="http://feeds.feedburner.com/informaticapc-com" alt="RSS" />
<area shape="rect" coords="207,62,273,130" href="http://twitter.com/ApInf" alt="Twitter" />
<area shape="rect" coords="288,65,353,129" href="http://www.youtube.com/user/AprInformatica/" alt="Youtube" />
</map>
<img id="img1" name="img1" src="imagen.jpg" alt="Síguenos en..." border="0" usemap="#mapaSuscripcion" />
</body>
</html>
A continuación puedes ver una muestra de su funcionamiento:
Dado que es laborioso el establecer las coordenadas de un mapa de imagen, es recomendable usar algún programa gratis que genere el código HTML necesario, como por ejemplo X-Map (en inglés pero muy sencillo de usar).
