Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta <IMG> de esta manera:
<IMG SRC="fichero_grafico" ALT="descripcion">
El parámetro SRC especifica el nombre del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF y el JPG. La últimas versiones de Netscape y Explorer aceptan también el formato PNG.
El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya desactivado. Algunos navegadores lo muestran cuando pasamos el ratón por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estádar HTML 4.0 obliga a hacerlo.
Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura y la anchura del gráfico en pixels. De este modo, el navegador puede mostrar un recuadro del tamaño de la imagen mientras la va leyendo de la red y así poder mostrar el resto de la página correctamente mientras tanto.
<IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31>
Se ve así:
Para los menos avezados en inglés, decir que WIDTH es la anchura y HEIGHT la altura.
8.1. Imágenes y enlaces
Suele ser común incluir enlaces dentro de un gráfico. En ese caso, por defecto, los navegadores le pondrán un borde al gráfico para indicar que efectivamente es un enlace. Práctico, pero la mayoría de las veces bastante poco estético. Por medio del parámetro BORDER podremos alterar el grosor de ese borde o incluso eliminarlo poniendolo a cero.
<A HREF="http://www.netscape.com"> <IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31> </A>
Se ve así:
Sin embargo,
<A HREF="http://www.netscape.com"> <IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31 BORDER=0> </A>
Se ve así:
8.2. Alineación respecto al texto
Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona, por medio del parámetro ALIGN, las siguientes maneras de alinear una imagen respecto del texto que la acompaña:
| Valor de ALIGN | Utilidad | Resultado |
|---|---|---|
| TOP | Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual. | Este es el texto |
| MIDDLE | Alinea el punto medio (en altura) de la imagen con la base del texto. | Este es el texto |
| BOTTOM Por defecto | Alinea el punto más bajo de la imagen con la base del texto. | Este es el texto |
LEFT | Coloca la imagen a la izquierda del texto. | Este es el texto |
| RIGHT | Coloca la imagen a la derecha del texto. | Este es el texto |
Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras del alfabeto excepto algunas como la p, la g o la j.
 |
 Listas | Formateo fino |
