Imágenes y texto

Cuando insertamos una imagen ésta se sitúa justo en el lugar donde está la etiqueta IMG independientemente de si hay texto alrededor o no, por esta razón este tipo de imágenes reciben el nombre de imágenes en línea o imágenes inline. Usando esta característica podíamos insertar imágenes pequeñas como si fuesen parte de un párrafo.

Si queremos insertar una imagen en el interior de un elemento de nivel de bloque, pongamos por ejemplo un encabezado, no tendremos más que poner la etiqueta en el interior de ese elemento (entre las instrucciones de inicio y fin). Si no lo hiciéramos así, después de la imagen se produciría un salto de línea antes del encabezado. Para entender esto mejor podemos fijarnos en la figura 5.8 y comparar entre los siguientes códigos:

Figura 5.8. Podemos apreciar la diferencia entre insertar una imagen dentro del encabezado o insertarla fuera, en cuyo caso queda en la línea superior.

ue nos resultarán familiares de la primera práctica.

Como vemos, en el primer caso la instrucción de inicio del encabezado, <h2>, provocará una salto de línea y el efecto no será el deseado. En el siguiente caso hemos incluido la etiqueta IMG dentro del encabezado, es decir, estamos diciendo al navegador algo así: ‘el encabezado consta de esta imagen y este texto’. En este caso, como resulta totalmente lógico, el resultado es el deseado.

Aún así el ejemplo anterior no resuelve todos los problemas que podrían plantearse al insertar imágenes. Como ya vimos en un ejemplo del capítulo 2 (fig. 2.9), que ahora reproducimos en la figura 5.9 cuando las imágenes son pequeñas pueden incluirse junto con el texto sin problemas, pero ¿qué ocurre si queremos insertar una imagen de dimensiones mayores? Podemos usar el método anterior, pero entonces obtendríamos resultados como el de la figura 5.10, que sin duda no es el deseado y provoca que el texto sea difícilmente legible.

Figura 5.9. Como veíamos en el fascículo 2 (fig. 2.9) cuando la imagen es pequeña puede entremezclarse con el texto sin problema.

Figura 5.10. Cuando la imagen es grande, al insertarla en una línea de texto ésta queda muy separada de la línea anterior en lugar de envolver la imagen.

Una opción para solucionar este problema es provocar un salto de línea antes y después de la imagen, tal y como hacíamos en la práctica 2 para las imágenes de la página de presentación. Podemos usar diversas etiquetas para conseguir los saltos de línea: P, CENTER, BLOCKQUOTE, BR, etc. por ejemplo:

Sin embargo no siempre nos conformamos con esto. Habitualmente lo que queremos es que la imagen se inserte junto con el texto y que este se sitúe alrededor suyo, tal y como vemos en periódicos u otras publicaciones. De esta forma podríamos conseguir el efecto de la figura 5.11. Afortunadamente es posible conseguir ese efecto usando las capacidades de alineamiento de imágenes del HTML.

Figura 5.11. Con las técnicas de alineamiento del lenguaje HTML que estudiamos en este capítulo podemos crear interesantes efectos como texto envolviendo a una imagen.

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1