Gráficos

Los gráficos son uno de de los elementos que hacen más atractivo un documento.

Para insertar un gráfico se utiliza el tag <IMG>. Este tag exige el modificador SRC que indica el nombre del fichero que se va a insertar. Hay que recordar que el nombre del fichero gráfico, al ser el valor de un modificador, va siempre entre comillas.
 

Código fuente.

Resultado.

<IMG SRC="homer.gif">

Podemos alinear el gráfico a la izquierda, centro y derecha de la pantalla. Para ello nos valdremos del tag </DIV> y el modificador ALIGN.
 

Código fuente.

Resultado.

<DIV ALIGN="left">
<IMG SRC="homer.gif">
</DIV>

<DIV ALIGN="center">
<IMG SRC="homer.gif">
</DIV>

<DIV ALIGN="right">
<IMG SRC="homer.gif">
</DIV>

Ahora vamos a ver cómo se pueden integrar texto e imágenes. Para ello, como en los casos anteriores, se mostrará a la izquierda el código fuente y a la derecha el resultado obtenido con dicho código.
 

Código fuente.

Resultado.

<P>(...)<IMG SRC="homer.gif">(...)

Podemos colocar sin más una imagen entre las líneas del texto, pero como se ve aquí, pero el efecto no siempre queda bien, pues la imagen separa las líneas.

<P><IMG SRC="homer.gif">(...)

Podemos colocar la imagen en el principio del párrafo, pero se puede ver que el texto comienza en la parte inferior de la imagen, y el efecto no queda muy bien.

<P><IMG SRC="homer.gif" ALIGN="bottom">(...)

El efecto aquí, es igual que en la opción anterior, pero con ALIGN="bottom" hemos indicado claramente al navegador que éste era el efecto de alineación que deseábamos.

<P><IMG SRC="homer.gif" ALIGN="middle">(...)

Ahora el texto comienza alineado a media altura de la imagen.

<P><IMG SRC="homer.gif" ALIGN="top">(...)

Ahora el texto está alineado en la parte superior de la imagen, pero si el texto se alarga lo suficiente, como ocurre en este párrafo, podemos ver que la segunda línea de nuestro texto continúa debajo de la imagen y no a su lado.

<P><IMG SRC="homer.gif" ALIGN="left">(...)

Ahora el texto comienza en la parte superior de la imagen y la va rodeando a medida que el texto se va presentando en nuestra pantalla.

Éste es probablemente el efecto más adecuado para integrar imágenes y texto en nuestro documento, pues es el que da un mejor efecto visual, al quedar el texto y la imagen perfectamente integrados en la pantalla, ocupando espacios claramente diferenciados.

<P><IMG SRC="homer.gif" ALIGN="right">(...)

Aquí el texto y la imagen se presentan, al igual que en la opción anterior, perfectamente diferenciados e integrados. La única diferencia entre ambos ejemplos es que la imagen está a la derecha y no a la izquierda.

<P><IMG SRC="homer.gif" ALIGN="right">
<P ALIGN="right">(...)

Ahora hemos mezclado los efectos de alineación a la derecha de texto e imagen, de manera que una imagen situada a la derecha de la pantalla tiene el texto alineado a su borde.

<P><IMG SRC="homer.gif" ALIGN="left" HSPACE="15">(...)

En todos los casos anteriores el texto y la imagen estaban demasiado cerca el uno del otro, de manera que el documento pierde algo de calidad visual. Ahora hemos insertado un pequeño espacio entre el texto y la imagen (15 píxeles), que facilita sin duda la lectura.

<P><IMG SRC="homer.gif" ALIGN="left" HSPACE="15" VSPACE="15">(...)

Aquí,además del espacio horizontal del ejemplo anterior hemos añdido un espacio vertical, también de 15 pixels.

Esto que viene ahora no es más que un texto largo para que sepueda apreciar el margen vertical que hemos dado al gráfico. Esto que viene ahora no es más que un texto largo para que se pueda apreciar el margen vertical que hemos dado al gráfico. Esto que viene ahora no es más que un texto largo para que se pueda apreciar el margen vertical que hemos dado al gráfico.

<P><IMG SRC="homer.gif" ALIGN="left" HSPACE="15" ALT="Homer">(...)

HomerAunque aquí la visualización sea igual que en el ejemplo anterior, hemos añadido una instrucción que puede ser útil cuando tarde en bajarse el fichero gráfico de nuestra web, pues mientras el fichero se carga, aparecerá en el lugar donde estará situado, un breve texto indicando qué imagen se está bajando.

 

alt64@alt64.org

Página principal del curso
Página principal de Alt+64