3. Imágenes en las páginas Web.

En el segundo capítulo: 'Nuestra primera página Web', aprendimos a insertar imágenes en una Web. Ahora empezaremos recordando brevemente aquel capítulo, para continuar con las distintas técnicas que nos ofrece el lenguaje HTML no sólo para incluir imágenes, sino para manejarlas, cambiar su apariencia o controlar su disposición respecto a los demás elementos de la página.

3.1. Insertando Imágenes.

Recordemos que para insertar una imagen en una página Web era imprescindible guardarla en un archivo independiente del documento HTML. Dicho archivo podía contener la imagen en varios formatos, siendo los de mayor uso GIF y JPEG que pueden ser vistos con la práctica totalidad de navegadores. Cuando tenemos una imagen con estos formatos suelen tener la extensión .gif en el caso del formato GIF y .jpg o .jpeg en el caso de imágenes JPEG.

Atención

Algunas aplicaciones de retoque de imágenes guardan las imágenes GIF y JPEG con la extensión en mayúsculas (.GIF, .JPEG). Esta terminación es válida, pero los nombres de los archivos que contienen imágenes, igual que los de los documentos HTML, son sensibles a mayúsculas/minúsculas y por tanto .gif no es lo mismo que .GIF con lo que al referirnos al archivo debemos escribir su nombre y terminación respetando las mayúsculas y minúsculas. Si las hemos confundido cuando probemos las páginas en el ordenador local probablemente funcionen, pero dejarán de hacerlo cuando las publiquemos, es decir, cuando las pongamos en el servidor Web.

Nota

El formato de una imagen es el código usado para almacenarla en un archivo. Los formatos simples simplemente guardan una tabla con el color de cada punto de pantalla (pixel) de la imagen. Sin embargo si guardamos una imagen grande con este formato ocupará demasiado. Por esta razón se crearon formatos más complicados basados en complejas fórmulas matemáticas, que consiguen reducir el tamaño de la imagen. GIF y JPEG son ejemplos de estos formatos. Los navegadores usan la extensión (los tres/cuatro últimos caracteres tras un punto) de los archivos para averiguar el formato en que están codificadas, si cambiamos manualmente esa extensión no tendrán esa información y la imagen no podrá ser visualizada.

Es importante resaltar cambiando la extensión de una imagen no cambiamos el formato de dicha imagen, pero podemos dejarla inútil.

Más adelante trataremos a fondo estos dos formatos y comentaremos cuando es conveniente usar uno u otro.

Una vez tenemos la imagen en un archivo aparte (por ejemplo img.gif) con el formato adecuado insertamos la imagen usando la etiqueta IMG de la siguiente manera:

	<img src="img.gif">
      

Como ya comentamos, esta etiqueta consta de una única instrucción. Pero aunque sólo vimos uno de sus atributos, SRC, contiene muchos más que iremos estudiando a lo largo del capítulo.

Pero antes de comenzar a ver nuevos conceptos...

3.2. 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.

	<img src="imagenes/chistera.gif">
	<h2>LA CHISTERA-Humor y magia</h2>
	<h2>
	<img src="imagenes/chistera.gif">LA CHISTERA-Humor y magia</h2>
      

que 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:

	<p>
	<img src="montanas.html">
	</p>
	<center>
	<img src="montanas.html">
	</center>
      

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.

3.3. Alineamiento de imágenes.

En los ejemplos vistos al principio, en los que insertábamos imágenes junto con texto normal, la parte inferior de la imagen quedaba alineada con la parte inferior del texto. La etiqueta IMG tiene un atributo llamado ALIGN que nos permite controlar el alineamiento vertical de la imagen en función del texto que le rodee o de otras imágenes de la misma línea. El atributo ALIGN puede tomar cinco valores diferentes. En primer lugar veremos aquellos que nos permiten controlar la alineación vertical de la imagen. Para cada uno de ello mostraremos dos ejemplos, en ambos la imagen que será alineada es un cuadrado rojo con una línea que marca su centro. En el primero la imagen irá seguida de tres líneas de texto y en el segundo irá precedida de una imagen el doble de alto que marcará los límites verticales de la línea.

align=top:

Alinea la parte superior de la imagen con la parte superior de la línea. Para determinar cual es el límite superior de la línea se tendrán en cuenta todos los elementos de esta (ya sean texto, imágenes u otros), tanto los anteriores como los posteriores a la imagen que estamos insertando. En la figura 5.12 podemos ver dos ejemplos de align=top. El primer caso es sencillo de entender, pero el segundo requiere alguna explicación. La primera imagen se alinea (por defecto) con su parte inferior a la misma altura que la base del texto, después nuestro cuadrado rojo, alinea su parte superior con la parte superior de dicha imagen.

Figura 5.12. Ejemplos de align=top. En el primer caso la parte superior de la imagen coincide con la del texto y en el segundo con la parte superior de la imagen azul.

align=middle:

Alinea el centro (vertical) de la imagen con el centro de la línea. Si la línea esta compuesta únicamente por texto el se tomará la base de éste como centro de la línea. Si hay más elementos el navegador calcula cual es el centro de la línea en función de todos ellos. En la figura 5.13 podemos ver unos ejemplos.

Figura 5.13. Ejemplos de align=middle. En el primer caso el centro de la imagen coincide con la base del texto, en el segundo intenta centrarse con la imagen azul.

align=bottom:

Alinea la parte inferior de la imagen con la parte inferior de la línea de texto. En este caso no se tendrán en cuenta otros elementos a parte del texto para realizar el alineamiento. De nuevo podemos ver ejemplos de este alineamiento en este caso en la figura 5.14.

Figura 5.14. Ejemplos de align=bottom. En ambos casos la parte inferior de la imagen se alinea con la base del texto, aunque la imagen azul baje por debajo.

NOTA: Es posible que nos encontremos alguna página en la que haya una imagen con el atributo align=center. Este nuevo valor (center) sólo funciona con Internet Explorer y tiene el mismo significado que align=middle y además su nombre puede confundirnos y creer que la imagen se mostrará como si estuviese encerrada por la etiqueta <center>..</denter>. Por estas dos razones recomendamos el uso de align=middle en su lugar.

Estos tres son los únicos tipos de alineamiento que incluía el lenguaje HTML en sus orígenes. Sin embargo, aunque son útiles, no nos permiten controlar la disposición de las imágenes tanto como querríamos. Por ejemplo, todavía no podemos insertar una imagen y que el texto la bordee tal y como veíamos en la figura 5.11. De hecho en todos los valores anteriores sólo la primera línea de texto introducida después de la imagen se situaba a la derecha de esta, aunque esta línea estuviese en la parte superior de la imagen como ocurría en el primer caso de la figura 5.12. La segunda línea y las siguientes serían mostradas debajo de la imagen.

3.4. Texto que envuelve a las imágenes o alineamiento horizontal.

Vista la necesidad de nuevos métodos de alineamiento se crearon dos nuevos valores para el atributo align: left y right, que nos permitirán controlar el alineamiento horizontal de las imágenes (esto es, izquierda o derecha). Estos valores se han convertido en los más usados de las páginas Web por su enorme utilidad. En seguida veremos como funcionan.

NOTA: Las imágenes pueden alinearse vertical y horizontalmente, pero nunca a la vez. Esto es así porque ambos tipos de alineamiento usan el atributo. align, y sólo puede incluirse uno de estos atributos dentro de la etiqueta img. Si ponemos más el navegador se quedará con el primer valor e ignorará el resto.

Antes es necesario hacer una matización. Aunque en un capítulo próximo estudiaremos con más detenimiento las diferentes versiones del lenguaje HTML, adelantaremos que los tres primeros valores estudiados: top, middle y bottom, pertenecen al estándar HTML 2.0. Sin embargo los dos nuevos valores que vamos a explicar fueron introducidos en la versión HTML 3.2. El lector se preguntará ¿y para que quiero saber yo eso? Pues bueno, todos los navegadores entienden HTML 2.0, pero alguno no entiende HTML 3.2 y por tanto no entenderán align=left ni align=right. Sin embargo no debemos preocuparnos en este caso, ya que es difícil a estas alturas encontrar un navegador que no soporte HTML 3.2 y por tanto podremos estar casi seguros que nuestros visitantes disfrutarán de nuestras imágenes alineadas.

Por otro lado aquellos visitantes de la página que usen un navegador muy antiguo verán lo mismo que si no hubiésemos puesto el atributo align, pero no tendrán ningún otro problema, por tanto concluiremos que podemos usar los nuevos valores sin demasiada preocupación.

Y después de esta matización pasamos ya a explicar el significado de estos atributos.

align=left

La palabra left significa, en inglés, izquierda, por tanto al usar este valor la imagen se sitúa a la izquierda de la página. Pero su efecto es aún más importante, ya que si a continuación de la imagen introducimos texto o cualquier otro elemento del Web éste rodeará a la imagen, no pasará a la siguiente línea.

Como es importante entender bien el significado de esta etiqueta para usarla adecuadamente vamos a explicar más detenidamente como reacciona un navegador cuando se encuentra una imagen alineada a la izquierda entre un párrafo de texto: en primer lugar se pasa a la siguiente línea y se inserta la imagen, alineada, como hemos dicho antes, a la izquierda. Después si el navegador se encuentra con más texto y queda sitio en la línea anterior a la imagen lo rellena con ese texto, cuando se acabe la línea seguirá mostrando el texto en las líneas sucesivas, rodeando la imagen. En la figura 5.15 podemos ver un ejemplo de su funcionamiento. Como vemos aunque insertamos la etiqueta img tras la palabra imagen tras insertar ésta el texto posterior a esta etiqueta sigue mostrándose como si la imagen no hubiera sido insertada.

Figura 5.15. Alineando una imagen a la izquierda con align=left conseguiremos que el texto envuelva a la imagen.

align=right

Probablemente el lector ya haya deducido que este otro valor sirve para indicar que la imagen estará alineada a la derecha (right significa precisamente derecha en inglés). El efecto provocado por align=right es idéntico al anterior, solo que ahora la imagen se situará a la derecha de la página y el texto la bordeará por la izquierda. En la figura 5.16 podemos apreciar el mismo código de la figura 5.15 pero cambiando el alineamiento de la imagen.

Figura 5.16. Usando align=right conseguimos igualmente que el texto envuelva a la imagen pero ahora ésta se situará a la derecha de la página.

NOTA: Existen otros modos de alineamiento, pero no funcionan en todos los navegadores, ni forman parte del lenguaje HTML. Esos modos de alineamiento han sido creados por los fabricantes de un determinado navegador y por tanto no funcionan con el resto. En posteriores capítulos hablaremos de este tema y de otras extensiones de los navegadores y comentaremos los otros tipos de alineamiento existentes.

3.5. 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.

Figura 5.17. Usando el atributo clear de la etiqueta br podemos terminar el texto envolvente y seguir escribiendo debajo de la imagen.

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.

left

Provoca un salto de línea hasta el primer margen libre a la izquierda. Esto quiere decir que provocará un salto hasta la primera línea en la que no hay una imagen a la izquierda y por tanto se usa, en general, cuando hay una imagen alineada a ese lado. Este valor es el que hemos usado en el ejemplo de la figura 5.17. Su modo de uso es el siguiente:

	      <br clear=left>
	    
right

Provoca un salto de línea hasta el primer margen libre a la derecha, por lo demás funciona idénticamente al valor anterior:

	      <br clear=right>
	    
all

Provoca un salto hasta la primera línea que tiene tanto el margen izquierdo como el margen derecho libres. Es decir provoca el efecto de los dos valores anteriores combinados.

	      br clear=all
	    

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.

3.6. 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

Figura 5.18. Usando los atributos hspace y vspace podemos controlar la separación entre la imágen y el texto que la envuelve.

3.7. 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.

Figura 5.19. Combinando las etiquetas img y a adecuadamente podemos crear imágenes enlace. Los navegadores indican esto mostrando un borde azul alrededor de estas imágenes.

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