SESIÓN 4: IMÁGENES

IMAGEN <IMG>

Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imágenes que les sirven de acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico in situ o en el web. Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas.

<IMG SRC="immagine.gif">

FORMATOS DE IMAGEN

Existen muchos formatos para guardar imágenes que tienen diferentes extensiones bmp, tiff, dib, wmf, etc. En internet se usan básicamente dos: GIF y JPG. Ambos formatos comprimen las imágenes para reducir su tamaño, de este modo se asegura una transferencia más rápida por la red. Esto es importante, ya que si la imagen se tarda en cargar, es posible que el visitante de nuestra pàgina la abandone por ello. En los casos en que es necesario poner una imagen con una resolución elevada para ver los detalles, es mejor colocar una imagen pequeña y usarla como enlace que nos conduzca a la imagen final. De ese modo el visitante ya sabe la imagen que va a cargar y puede ser más paciente. 

TEXTO ALTERNATIVO

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen.

Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.

Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código:

<img src="gatito.gif" alt="Imagen gato" >

Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la imagen se mostrará lo siguiente:

Si en lugar del código anterior hubiéramos insertado el siguiente código:

<img src="imagenes/gatito.gif" alt="Imagen gato" >

La imagen habría mostrado correctamente:

El texto alternativo se muestra también al situar el puntero sobre la imagen. Si situas el puntero sobre la imagen durante unos segundos, verás como aparece el texto Imagen gato.

El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo.

BORDE DE UNA IMAGEN

En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor, pero es posible establecer uno a través del atributo border.

El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde.

TAMAÑO DE UNA IMAGEN

Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original, pero por diversos motivos puede interesarnos modificar dicho tamaño.

A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen en el navegador.

El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de % cuando se desee que sea en porcentaje con respecto a la página.

ALINEACIÓN DE UNA IMAGEN

• top 

Ajusta la imagen a la parte más alta de la línea. Esto quiere decir que, si hay una imagen más alta, ambas imágenes presentaran el borde superior a la misma altura.

• bottom 

Ajusta el bajo de la imagen al texto.

• Absbottom 

Colocara el borde inferior de la imagen a nivel del elemento más bajo de la línea.

middle 

Hace coincidir la base de la línea de texto con el medio vertical de la imagen.

• Absmiddle 

Ajusta la imagen al medio absoluto de la línea.

Ejemplo:

Resultado: