Volver a la portada de Duiops
Volver al
Web de Duiops


Portada | Diseñando con HTML | Trabajando con imágenes | Imágenes flotantes

 

Trabajando con imágenes ] Coloreando el fondo y el texto ]

 


Atrás Arriba Siguiente

 

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>

 

Atrás Arriba Siguiente


 © 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