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">(...)
|
Aunque
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.
|