CAPÍTULO XI. IMÁGENES.
SINTAXIS GENERAL
Para insertar imágenes en un documento HTML se utiliza el elemento <img> junto con el atributo src, que indica dónde se encuentra localizada la imagen.
Ejemplos:
Si queremos insertan un favicon dentro de <head>:
ATRIBUTOS
Podemos incluir el atributo alt para que el navegador ofrezca una descripción alternativa de la imagen si, por alguna razón, la misma no puede mostrarse:
<img src="logo.gif" alt="logotipo de marca"/>.
El atributo title se puede usar para añadir información a la imagen, la cual aparecerá al situar el cursor encima (sin hacer clic) en forma de caja desplegable:
<img src "logo.gif" title="Blog de Tecnología"/>.
Otros dos atributos importantes son: width (anchura) y height (altura); si no se especifican la anchura y la altura, la imagen se mostrará con su tamaño original. Pueden especificarse de dos formas distintas:
1) <img src="logo.png" width="141" height="32"/>
2) <img src="logo.png" style="width:500px; height:600px;"/>
También podemos incluir un borde a la imagen de la siguiente forma:
<img src="logo.png" border="1"/>
En este caso, será un borde de 1 píxel de grosor y color negro (a no ser que tenga enlace, en cuyo caso tendrá el color del enlace).
ENLACE EN UNA IMAGEN
Para insertar un enlace en una imagen:
<a href="http://www.html.net"><img src="logo.png"/></a>
SITUACIÓN DE LA IMAGEN
Podemos situar una imagen (al igual que cualquier otro elemento) en el lugar preciso que se quiera de la página:
<img src="logo.png" style="position:fixed; bottom:50px; right;30px;"/>
Podemos situar las imágenes de manera flotante, a la izquierda o a la derecha de un texto:
<p><img src="logo.png" style="float:right;"/>La imagen se situará a la derecha del texto</p>
También podemos utilizar una imagen adecuada como fondo de nuestra página:
<body background="fondo.gif">
MAPAS DE IMAGEN
La etiqueta o elemento <map> define una "imagen-mapa" con áreas delimitadas mediante coordenadas (que pueden comprobarse con un programa de edición de imágenes como GIMP) en las que se puede insertar un enlace haciendo clic en ellas. Por ejemplo, si utilizamos la siguiente imagen (de 400x379 px), podríamos delimitar tres áreas: el ordenador, el teléfono móvil y el café. En cada una de ellas podríamos hacer clic para acceder a una página distinta.
El atributo name de la etiqueta <map> está asociado al atributo usemap de la etiqueta <img> y crea una relación entre la imagen y el mapa.
El elemento <map> contiene una serie de etiquetas <area>, que definen las zonas de la imagen en las que se puede hacer clic.
Si quieres practicar, crea una página en la que aparezca la siguiente imagen (puedes descargarla si pulsas sobre ella) e inserta tres zonas en las que puedas hacer clic y acceder a información relevante (por ejemplo en Wikipedia) sobre las siguientes herramientas: segueta, pistola de silicona termofusible y martillo de peña.
