Curso completo de HTML - Imagenes en las paginas Web (III)

Como terminar el texto envolvente

En la figura 5.11 adelantábamos un ejemplo de cómo quedaba una imagen con texto que envolviéndola. En ese caso usábamos una fotografía de tamaño considerable, y por tanto había numerosas líneas de texto a su izquierda. Después de la primera frase pusimos un punto y aparte, que como ya sabemos, se hace en HTML con la etiqueta <br>, y continuamos: "Desde las...".

Pero podemos imaginar otro caso, como el de la figura 5.17 en el que lo único que queremos es escribir unas pocas líneas que comenten la imagen pero continuar el resto del texto después (debajo) de la imagen. Si ponemos br sin más pasaremos a la siguiente línea, pero no al final de la imagen. Un primer método que se nos podría ocurrir para conseguir este efecto sería poner la etiqueta br muchas veces, tantas como líneas quepan hasta el final de la imagen. Sin embargo este sistema a parte de ser molesto, no funciona como puede comprobar el lector si decide probarlo.

Pero entonces ¿existe alguna otra forma de conseguirlo? La respuesta es SI. Cuando se añadieron los valores right y left a los modos de alineamiento se introdujo también un nuevo atributo en la etiqueta br que nos permitiera tratar con este tipo de alineamiento. Ese atributo se llama clear, puede tomar los siguientes valores.

Ya empezamos a sentir que tenemos una gran control sobre la disposición de las imágenes en nuestra página, pero aún podemos manejar un parámetro más en relación a estas y al texto que las envuelve: el espaciado que hay entre ellas.

Márgenes alrededor de las imágenes

Para poder controlar los márgenes se crearon dos nuevos atributos más para la etiqueta img: vspace y hspace que controlan el tamaño de los márgenes vertical (vspace proviene de Vertical SPACE que significa espaciado vertical) y horizontal (hspace proviene de Horizontal SPACE, espaciado horizontal) respectivamente. Estos atributos suelen acompañar al uso de align=left y align=right.

El tamaño de los márgenes se indicará en pixeles (puntos de pantalla). Veamos ahora un ejemplo con amplios márgenes para que podamos apreciar bien el efecto de estos atributos. El código usado es:

 <img align=left vspace=35 hspace=35>
       

Y podemos ver el resultado en la figura 5.18

Imágenes enlace

A estas alturas del curso de HTML dominamos la creación de enlaces hipertexto y conocemos como insertar imágenes en nuestras Web. Uniendo ambos conocimientos vamos a crear imágenes que nos servirán como enlaces a otros lugares del World Wide Web.

No será necesario aprender nada nuevo, lo único que necesitaremos es combinar los efectos de las etiquetas a y img. En primer lugar deberemos insertar la instrucción de inicio de a, después incluir la etiquequeta img y por último insertamos la etiqueta de fin de a. Un ejemplo muy típico del uso de imágenes enlace, como suelen ser denominadas, son las flechas para avanzar o volver atrás en una página. En nuestra práctica del capítulo pasado usamos estas flechas pero solo como indicación de el resultado de pulsar sobre el texto adjunto. Ahora convertiremos esas imágenes en enlace para que se pueda pulsar sobre ellas. El código a usar es:

 <a href="index.htm">
  <img src="img/izda.gif">
  </a>
       

Invitamos al lector a que haga el mismo cambio en el resto de imágenes usadas en aquella práctica.

Invitamos al lector a que haga el mismo cambio en el resto de imágenes usadas en aquella práctica.

Nuestro siguiente objetivo será aprender a controlar este borde así como crear otros muchos efectos con las imágenes.