Implementación y Control de Imágenes en HTML: Atributos y Flujo de Texto

Práctica 5 (1)

Inclusión de Imágenes en las Páginas Web

1. Inclusión Básica de Imágenes

Lo primero que vamos a incluir es una imagen que no tenga etiqueta. Poco a poco le iremos añadiendo más atributos.

Para poder ver lo que ocurre, hay que situar el ratón encima y comprobar que no aparece ninguna pista, recuadro, título o etiqueta descriptiva.

En concreto, la imagen que viene a continuación está puesta con el tamaño original.

2. Imágenes con Pista Descriptiva (Atributo title)

Cuando incluimos una imagen con una pista, recuadro o etiqueta descriptiva, debemos situar el ratón encima de la imagen para poder visualizarla. Ahora muestro una imagen a tamaño original, centrada.

3. Dimensionamiento y Centrado

En la imagen que a continuación muestro, que es la misma que la anterior, le he cambiado el tamaño (altura 200 y anchura 100) y la he centrado.

4. Manejo de Errores y Texto Alternativo

En el caso de que no se quiera (algunos dispositivos no lo hacen) o no se puedan descargar o mostrar las imágenes, por cualquier razón, donde debería estar la imagen aparece un "aspa", si el título o el texto alternativo no se han especificado.

Podemos hacer fallar las siguientes imágenes. La primera no tiene pista, la segunda sí.

5. Alineación de Imágenes y Texto Adyacente

Ahora es el momento de mostrar una imagen con un texto a su lado (he centrado algunas imágenes y todas las he dimensionado):

• Salto base desde Monserrat (Arriba)

• Salto base vistoso (En medio y con pista)

• Salto base urbano (Abajo)

6. Problemas de Alineación sin Separación de Párrafos

Lo que viene a continuación son las mismas imágenes que las de arriba, pero no he centrado la primera y la alineación del texto es a la izquierda, a la derecha y abajo, respectivamente, y sin que estén separados por párrafos.

Salto base desde Monserrat (Arriba) Salto base vistoso (En medio y con pista) Salto base urbano (Abajo)

Esto provoca verdaderos líos y malos diseños. Para solventar esto, más adelante estudiaremos las tablas para situar los elementos según queramos.

7. Uso de Separadores Gráficos

Aprovecho para meter una línea separadora que no sea <HR>. Además, podría ser GIF o JPG, pero he elegido un PNG para que veáis que también se pueden emplear.

8. Dimensionamiento Personalizado y Flujo de Texto

Imágenes con anchura y altura que queramos (a elegir):

• Esta es con el tamaño original.

• Esta es la imagen, pero con el tamaño 150x100 píxeles.

• Esta es la misma imagen, pero con el tamaño 450 x 400 píxeles. Como se puede observar, el texto se coloca donde puede y no donde nosotros queremos. Podríamos solventar esto poniendo en esta imagen el atributo ALIGN a LEFT o a RIGHT, pero la complejidad aumenta y no podemos controlar bien el resto de la página. Podéis comprobarlo.

9. Bordes y Tipos de Imagen (GIF con Transparencia)

Por último, podemos poner un borde a la imagen, pero a veces esto no queda bien. Comprobadlo (por cierto, he empezado a incluir GIF, con y sin transparencia).

10. Espaciado de Imágenes

Espaciado encima, debajo y a los lados de una imagen GIF con fondo transparente y además animado.

A lo alto.