MODULO 4 - Lección 6 - HTML: IMAGENES

Las imágenes son el elemento principal que confiere a la web su carácter de hipermedia, es decir, su capacidad de integrar en un mismo soporte contenidos, la pagina web, contenidos muy distintos como textos, imágenes, vídeos, audios y otros.

La etiqueta para insertar una imagen en HTML es <img>

La etiqueta <img> tiene dos elementos obligatorios en XHTML 1.0:

src
alt

El atributo src indica la ruta dónde se encuentra la imagen.

El atributo alt es el texto alternativo que se debe visualizar cuando la imagen aún no se ha cargado o no se puede cargar (no existe o su formato no es válido)

La etiqueta <img> posee los siguientes atributos opcionales:

width y height: Sirven para definir las dimensiones de la imagen; el ancho y el alto.
longdesc: Sirve para indicar la URL de una página en la que se proporciona una descripción larga de la imagen. Es un atributo muy importante para la accesibilidad de una página.
ismap y usemap: Sirven para definir mapas de imagen.

Existen también unos atributos obsoletos (se desaconseja su uso ya que su función ha sido substituida por propiedades de CSS)

align
border
hspace
vspace

En HTML, se puede incluir también una imagen como fondo de ciertos elementos, como el fondo de una página o una tabla. Para ello se podría utilizar <background>, aunque este uso esta desaconsejado y se recomienda utilizar CSS.

<body background=" ">
<table background=" ">

<img src="foto.jpg" alt="Foto del equipo"/>: Insertaría una imagen en formato jpg del equipo que se encuentra en el mismo directorio en el que se encuentra la pagina web.

<img src="http://www.w3.org/Icons/w3c_home.png" alt="Logo del W3C">: Insertaria una imagen en formato png que se encuentra en otros servidor web. Hay que indicar la ruta completa de acceso a la imagen.

FOMATOS:

Los formatos gráficos, dependerán del navegador, pero los 3 principales son:

GIF (Graphic Interchange Format): Es el formato más antiguo y el primero que se empleo en las páginas web. Sus características más particulares, son las siguientes:

Tipo MIME: image/gif
Comprensión sin pérdidas
Profundidad del color: paleta de colores (color indexado) de longitud variable (256 máximo)
Transparencia (1 color)
Entrelazado: SI
Animación; SI
Uso: Imágenes sencillas y planas, con pocos colores (logotipos, mapas, diagramas, elementos decorativos...)

Como el fotmato GIF sólo admite paletas de 256 colores, se suele emplear una técnica llamada dithering, que permite representar una imagen, como una fotografía, con una variedad de colores prácticamente infinita, mediante un número limitado de colores.

Consiste en colocar dos puntos juntos con colores diferentes, para crear la ilusión de que existe un tercer color.

A día de hoy, no es apenas necesario usar está técnica, por que existen otros formatos de imagen que permiten el uso de millones de colores.

JPG/ JPEG (Joint Photographic Experts Group): Es quizás el más popular en la web, ya que permite trabajar con imágenes de más de 16 millones de colores y con tamaños de ficheros muy pequeños. Se logra mediante el uso de algoritmos de compresión con pérdidas.

La compresión con pérdidas, significa, que una vez comprimida una imagen, al descomprimirla no se obtendrá la imagen original, si no una aproximación.

Tipo MIME: image/jpeg
Compresión con pérdidas → Diferentes niveles de compresión
Profundidad de color: 8 bits (escala de grises), 12 y 24 bits (color real)
Transparencia: NO
Entrelazado: SI
Animación: NO
Uso: Imágenes complejas (reales) con muchos colores.

PNG (Portable Network Graphics): Se creo específicamente para la web y ofrece una gran variedad de posibilidades. Ofrece la máximas calidad, pero con un tamaño superior al formato JPG

Tipo MIME: image/png
Compresión con prédidas
Profundidad del color: 1, 2, 4, 8 (color indexado); 16, 24, 32, 48, 64 (color real)
Transparencia: 8 o 16 bits (canal alpha)
Entrelazado: SI
Animación: NO (pero existe MNG)
Uso: los mismos que GIF y JPG

MAPAS DE IMAGEN:

Imagen sensible: Una imagen que contiene zonas activas (sensibles, calientes) que son enlaces a otras páginas
Se puede procesar en el lado del cliente (usemap) o en el lado del servidor (ismap)

Un mapa de imágenes en el lado del cliente, se define con dos etiquetas de HTML:

Con la etiqueta <map>, se define el mapa de imagen, con sus distintas zonas activas. El mapa de imagen debe tener un nombre, ya que ese nombre se emplea en la etiqueta <img> para relacionar el mapa de imagen, con la imagen correspondiente.

<map name=" ">

En la etique <img> que representa la imagen del mapa, se utiliza el atributo <usemap> para indicar el nombre del mapa que se quiere utilizar.

<img usemap=" ">

Cada zona activa o sensible del mapa de imagen, se define mediante una figura o forma geométrica. Existen 3 tipos de figuras geométricas que se pueden emplear.

Todas las zonas activas, se definen con la etiqueta <area> que posee los atributos <shape> para indicar el tipo de figura geométrica, <coords> para indicar las coordenadas de la figura geométrica, <href> para indicar la URL del destino del enlace y <alt> para definir el texto alternativo que representa la figura geométrica en el caso que no se pueda visualizar el enlace.

El atributo <alt> ayuda a mejorar la accesibilidad de la página web.

<area shape=" " coords=" " href=" " alt=" " />

rect → Define un rectángulo: shape="rect" →coords="x1, y1, x2,y2"

circle →Define un circulo: shape="cicle" →coords="x, y, r"

poli →Define un polígono: shape="poly"→coords="x1, y1, x2, y2, ..., xn, yn"

Ejemplo 1:

Ejemplo 2:

Los mapas de imagen, se usan para:

Mapas geográficos
Barras de navegación
Página Principal

Buscar este blog

ACTIVATE BLOG SPACE