• Insertar imágenes
• Imágenes y enlaces
• Alineación respecto al texto

arriba

Una página web sin alguna imagen es como el mar sin sal. Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta

<IMG SRC="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0>

El parámetro SRC especifica la URL del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF, PNG y JPG. Si quieres saber más sobre imágenes e internet debes dirigirte a esta sección dedicada al tema en la guía de diseño.

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. Su uso es además muy interesante cara a los robots buscadores que de este atributo pueden sacar información del tema tratado en la página.

Los atributos WIDTH y HEIGHT indican el ancho y alto del gráfico en pixels. Su uso no es obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen: el navegador sabe el espacio que ocupará la imagen y puede seguir colocando los otros elementos de la página mientras se termina de descargar la imagen.

Por último vemos el atributo BORDER que como podrás adivinar tan solo coloca el ancho del borde que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemops en el siguiente apartado.

Por ejemplo

<img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">

arriba

Recordarás que al hablar de los enalces decíamos que en el contenido de la etiqueta <A> podía ir texto o una imagen. En este caso el navegador destaca la imagen colocandole un borde del color que use para señalar los enlaces de texto. Algo bastante lógico pero que en la mayoría de los casos queda poco estético, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo BORDER.

<a href="tema1.htm">
<img src="/imgs/im_crear/indice2.png" 
     alt="Tema 1" width="45" height="30">
</a>

Se ve así:

Sin embargo,

<a href="tema1.htm">
<img src="/imgs/im_crear/indice2.png" 
     alt="Tema 1" width="45" height="30" BORDER="0">
</a>

Se ve así:

arriba

arriba