|
[ Trabajando con imágenes ] [ Coloreando el fondo y el texto ]
  
Imágenes flotantes
Usando una combinación de los atributos dentro
de la etiqueta IMG, puedes conseguir una disposición de las imágenes y
los textos atractiva y dinámica. Mientras que las tablas y las hojas de estilo
son posiblemente las formas más sofisticada de conseguir este propósito,
también esta técnica es perfectamente válida.
Para hacer "flotar" a las imágenes,
primero debes alinearla. A no ser que quieras tener la imagen en la izquierda,
la cual es normalmente la posición por defecto, debes usar el atributo align
para usar esta técnica.
<HTML>
<HEAD>
<TITLE>Imagen flotante y texto dinámico: izquierda</TITLE>
</HEAD>
<body>
<IMG src="images/bander.gif"
width="86" height="59" border="0" align="left"
alt="Dibujo de una bandera">
En esta pequeña página web te
servirá de ejemplo para ver cómo una imagen puede pasar a ser
flotante, de forma que el texto dinámicamente se recoloque por la
pantalla del navegador, y así haya una disposición precisa y clara de
todos los elementos en pantalla, creando a la vez interesantes efectos
estéticos, siempre y cuando esté de acuerdo con el diseño de la
página, que intentaremos que sea lo más armonioso y agradable a la
vista que podamos o que esté a nuestro alcance, dependiendo también
del contenido de la página. El diseño y el contenido de una WEB deben
ir parejos, uno depende del otro, eso nos asegurará el éxito de
nuestro sitio web.
</body>
</HTML> |
Pulsa aquí para ver la
página generada con este código, y observa cómo el código rodea
dinámicamente al gráfico.
 NOTA
La palabra
"dinámico" se usa frecuentemente pero a veces de forma
impropia dentro del ámbito del diseño web. En el caso del texto
envolvente, la palabra dinámico se refiere a que el texto encuentra una
manera de rodear a la imagen, tomando todo el espacio que haya
disponible. Mira la página del ejemplo anterior. Haz que la ventana del
navegador no ocupe toda la pantalla, y, una vez hecho eso, redimensiona
la ventana. Verás cómo el texto se recoloca en el espacio extra,
siempre rodeando a la imagen. Con hojas de estilo o tablas, el
posicionamiento es absoluto. Esto significa que la posición del texto y
la imagen son fijos, todo ello dependiendo de las circuntancias. |
También se puede probar alineando la imagen al
otro margen. Aquí tienes un ejemplo similar al anterior, pero con una imagen
flotante a la derecha.
<HTML>
<HEAD>
<TITLE>Imagen flotante y texto dinámico: derecha</TITLE>
</HEAD>
<body>
<IMG src="images/bander.gif"
width="86" height="59" border="0" align="right"
alt="Dibujo de una bandera">
En esta pequeña página web te
servirá de ejemplo para ver cómo una imagen puede pasar a ser
flotante, de forma que el texto dinámicamente se recoloque por la
pantalla del navegador, y así haya una disposición precisa y clara de
todos los elementos en pantalla, creando a la vez interesantes efectos
estéticos, siempre y cuando esté de acuerdo con el diseño de la
página, que intentaremos que sea lo más armonioso y agradable a la
vista que podamos o que esté a nuestro alcance, dependiendo también
del contenido de la página. El diseño y el contenido de una WEB deben
ir parejos, uno depende del otro, eso nos asegurará el éxito de
nuestro sitio web.
</body>
</HTML> |
Pulsa aquí para ver la
página generada con este código, y observa cómo el código rodea
dinámicamente al gráfico.
Te habrás dado cuenta de que el texto varias
veces casi llega a tocar a los bordes de la imagen. Quizás la imagen de ejemplo
no sea demasiado clara al estar rodeada de un espacio en blanco. De todas
formas, si usas unas una fotografía normal, una imagen cuadrada o una imagen
con borde, el alineamiento y el texto envolvente sin usar los atributos hspace
y vspace puede hacer que una página parezca engorrosa y difícil de
leer.
Para evitar este problema, añade un valor
numérico de 5 a 15 en cada uno de los atributos de espaciado:
<HTML>
<HEAD>
<TITLE>Imagen flotante y texto dinámico: izquierda con
espaciado</TITLE>
</HEAD>
<body>
<IMG src="images/bander.gif"
width="86" height="59" border="0" align="left"
alt="Dibujo de una bandera" hspace="10" vspace"15">
En esta pequeña página web te
servirá de ejemplo para ver cómo una imagen puede pasar a ser flotante,
de forma que el texto dinámicamente se recoloque por la pantalla del
navegador, y así haya una disposición precisa y clara de todos los
elementos en pantalla, creando a la vez interesantes efectos estéticos,
siempre y cuando esté de acuerdo con el diseño de la página, que
intentaremos que sea lo más armonioso y agradable a la vista que podamos
o que esté a nuestro alcance, dependiendo también del contenido de la
página. El diseño y el contenido de una WEB deben ir parejos, uno
depende del otro, eso nos asegurará el éxito de nuestro sitio web.
</body>
</HTML> |
Pulsa aquí para ver la
página. Verás que la relación entre el texto y la imagen es más harmoniosa y
legible.
 TRUCO
¿Quieres añadir algo
de distancia entre un gráfico alineado y otro elemento, tales como otra
imagen o texto? Para romper el envolvimiento dinámico, usa la etiqueta <BR>
con el atributo y valor clear="all" (mira el capítulo
"Formateando el texto") |
Alineando múltiples imágenes
Vamos a hacer una página que contenga una
cabecera gráfica, una imagen y texto dinámico.
Escribe en tu editor HTML la estructura
básica.
<HTML>
<HEAD>
<TITLE>Prueba de varias imágenes alineadas</TITLE>
</HEAD>
<body>
</body>
</HTML> |
© 1997-2009 Duiops (http://www.duiops.net)
Prohibida la reproducción parcial o total de
los textos o las imágenes.
Para comentarios, usar las
direcciones
e-mail de contacto
|
