Etiqueta <IMG>
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 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> |
Para los menos avezados en inglés, decir que WIDTH es la anchura y
HEIGHT la altura.
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> |
<A HREF="http://www.netscape.com"> <IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31 BORDER=0> </A> |
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 | ![]() |
MIDDLE | Alinea el punto medio (en altura) de la imagen con la base del texto | ![]() |
BOTTOM Por defecto | Alinea el punto más bajo de la imagen con la base del texto | ![]() |
LEFT | Coloca la imagen a la izquierda del texto | ![]() |
RIGHT | Coloca la imagen a la izquierda del texto | ![]() |
Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras excepto algunas como la p, la g o la j.
![]() |
![]() |
![]() |
Lección Anterior | Lección Siguiente |