Introducción a XHTML Capítulo 6.

Imágenes y objetos

Capítulo 6. Imágenes y objetos

6.1. Imágenes
Las imágenes son uno de los elementos más importantes de las páginas web. De hecho,
prácticamente todas las páginas web contienen alguna imagen y la mayoría incluyen decenas de
imágenes. Dentro de las imágenes que se pueden incluir en una página HTML se deben distinguir
dos tipos: las imágenes de contenido y las imágenes de adorno.

Las imágenes de contenido son las que proporcionan información y complementan la

información textual. Las imágenes de adorno son las que se utilizan para hacer bordes
redondeados, para mostrar pequeños iconos en las listas de elementos, para mostrar fondos de
página, etc. Las imágenes de contenido se incluyen directamente en el código HTML mediante la
etiqueta <img> y las imágenes de adorno no se deberían incluir en el código HTML, sino que
deberían emplearse hojas de estilos CSS para mostrarlas.

A continuación se muestra la definición de la etiqueta <img>, utilizada para incluir las imágenes
en las páginas HTML:

<img> Imagen

Atributos comunes básicos, i18n y eventos

▪ src = "url" - Indica la URL de la imagen que se muestra

▪ alt = "texto" - Descripción corta de la imagen
▪ longdesc = "url" - Indica una URL en la que puede encontrarse una descripción
más detallada de la imagen
Atributos
específicos ▪ name = "texto" - Nombre del elemento imagen
▪ height = "unidad_de_medida" - Indica la altura con la que se debe mostrar la
imagen (no es obligatorio que coincida con la altura original de la imagen)
▪ width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar la
imagen (no es obligatorio que coincida con la anchura original de la imagen)

Tipo de elemento En línea y etiqueta vacía

Descripción Se emplea para incluir imágenes en los documentos

Los dos atributos requeridos son src y alt. El atributo src es similar al atributo href de los
enlaces, ya que establece la URL de la imagen que se va a mostrar en la página. Las URL
indicadas pueden ser absolutas o relativas. El atributo alt permite describir el contenido de la
imagen mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024
caracteres y son útiles para las personas y dispositivos discapacitados que no pueden acceder a
las imágenes.

Ejemplo sencillo para incluir una imagen:

www.librosweb.es 73
Introducción a XHTML Capítulo 6. Imágenes y objetos

<img src="logotipo.gif" alt="Logotipo de Mi Sitio" />

Como <img> es una etiqueta vacía, no tiene etiqueta de cierre. No obstante, para que la página
XHTML sea válida, todas las etiquetas deben estar cerradas. Como ya se explicó anteriormente,
para cerrar una etiqueta vacía se incluyen los caracteres /> al final de la etiqueta.

HTML no impone ninguna restricción sobre el formato gráfico que se puede utilizar en las
imágenes, por lo que en principio la etiqueta <img> puede incluir cualquier formato gráfico
existente. Sin embargo, si la imagen utiliza un formato poco habitual, todos o algunos
navegadores no serán capaces de mostrar esa imagen.

La recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden todos
los navegadores modernos: GIF, JPG y PNG. El formato PNG presenta el inconveniente de que los
navegadores obsoletos como Internet Explorer 6 no muestran correctamente las imágenes con
transparencias de 24 bits.

El atributo longdesc no se utiliza de forma habitual, pero permite indicar la URL en la que se
puede encontrar más información sobre la imagen. Como el atributo alt sólo permite incluir
descripciones de hasta 1024 caracteres, el atributo longdesc se emplea con las imágenes
complejas que necesitan mucha información para ser descritas:
<img src="/imagenes/proyecto1.png" alt="Imagen del Proyecto 1" longdesc="/portfolio/
proyecto1.html" />

<img src="/imagenes/proyecto2.jpg" alt="Imagen del Proyecto 2"

longdesc="/mas_informacion.html" />

En el ejemplo anterior, las dos imágenes se encuentran en el mismo directorio del servidor
(/imagenes/). Se trata de una estrategia habitual en la mayoría de sitios web: guardar todas las
imágenes de contenido en un directorio especial independiente del resto de contenidos HTML.
Además, el directorio siempre suele llamarse de la misma manera: "imagenes" o "images" en
inglés.

Los atributos width y height se utilizan para indicar la anchura y altura con la que se muestran
las imágenes, por lo que son los más contradictorios. Como ya se ha comentado, HTML
estructura de forma correcta los contenidos de la página y CSS define el aspecto gráfico con el
que se muestran los contenidos. En principio, la anchura y la altura con la que se muestra una
imagen es parte de su aspecto gráfico, por lo que debería ser propio de CSS y no de XHTML.

Sin embargo, en la práctica no es viable establecer la anchura y altura de todas las imágenes de
contenidos mediante CSS. Si el sitio web dispone de muchas imágenes, la sobrecarga de estilos
diferentes que debería definir CSS sería contraproducente. Por este motivo, los atributos width y
height son la excepción a la norma de que el código HTML no haga referencia al aspecto de los
contenidos.
<img src="/imagenes/foto1.jpg" alt="Fotografía de un paisaje" width="200" height="350"
/>

<img src="/imagenes/foto2.jpg" alt="Fotografía de un atardecer en la playa" width="330"

height="220" />

www.librosweb.es 74
Introducción a XHTML Capítulo 6. Imágenes y objetos

Si el valor del atributo width o height se indica mediante un número entero, el navegador
supone que hace referencia a la unidad de medida píxel. Por tanto, en el ejemplo anterior, la
primera foto se muestra con una anchura de 200 píxel y una altura de 350 píxel.

También es posible indicar la anchura y altura en forma de porcentaje. En este caso, el

porcentaje hace referencia a la altura/anchura del elemento en el que está contenida la imagen.
Si la imagen no se encuentra dentro de ningún otro elemento, hace referencia a la anchura/
altura total de la página.
<div>
<img src="/imagenes/foto1.jpg" alt="Fotografía de un paisaje" width="30%"
height="350" />
</div>

El ejemplo anterior mezcla los dos tipos de medidas que se pueden utilizar, para indicar que la
foto tiene una anchura igual al 30% de la anchura del elemento <div> que la contiene y una altura
de 350 píxel.

La anchura/altura con la que se muestra una imagen no tiene que coincidir obligatoriamente con
la anchura/altura real de la imagen. Sin embargo, cuando estos valores no coinciden, las
imágenes se muestran deformadas y el aspecto final es muy desagradable.

Si solamente se establece la altura de la imagen, el navegador calcula la anchura necesaria para

que se mantenga la proporción de la imagen. De la misma forma, si sólo se establece la anchura
de la imagen, el navegador calcula la altura que hace que la imagen se siga viendo con las mismas
proporciones.

Ejercicio 10

Modificar la página de índice del portfolio de los ejercicios 6 y 7 para mostrar directamente las
imágenes de los proyectos.

www.librosweb.es 75
Introducción a XHTML Capítulo 6. Imágenes y objetos

Figura 6.1. Nueva página del portfolio que muestra la imagen de cada uno de los proyectos

6.2. Mapas de imagen

Aunque el uso de los mapas de imagen se ha reducido drásticamente en los últimos años, aún se
utilizan en algunos sitios especializados. Muchas agencias de viaje y sitios relacionados utilizan
mapas geográficos para seleccionar el destino del viaje. La mayoría de mapas se realiza hoy en
día mediante Flash, aunque algunos sitios siguen recurriendo a los mapas de imagen.

Un mapa de imagen permite definir diferentes zonas "pinchables" dentro de una imagen. El
usuario puede pinchar sobre cada una de las zonas definidas y cada una de ellas puede apuntar a
una URL diferente. Siguiendo el ejemplo anterior, una sola imagen que muestre un mapa de
todos los continentes puede definir una zona diferente para cada continente. De esta forma, el
usuario puede pinchar sobre la zona correspondiente a cada continente para que el navegador
muestre la página que contiene los viajes disponibles a ese destino.

Las zonas o regiones que se pueden definir en una imagen se crean mediante rectángulos,
círculos y polígonos. Para crear un mapa de imagen, en primer lugar se inserta la imagen original
mediante la etiqueta <img>. A continuación, se utiliza la etiqueta <map> para definir las zonas o
regiones de la imagen. Cada zona se define mediante la etiqueta <area>.

www.librosweb.es 76
Introducción a XHTML Capítulo 6. Imágenes y objetos

<map> Mapa de imagen

Atributos comunes básicos, i18n y eventos

Atributos ▪ name = "texto" - Nombre que identifica de forma única al mapa definido (es
específicos obligatorio indicar un nombre único)

Tipo de elemento Bloque y en línea

Descripción Se emplea para definir mapas de imagen

<area> Area de un mapa de imagen

Atributos comunes básicos, i18n, eventos y foco

▪ href = "url" - URL a la que se accede al pinchar sobre el área

▪ nohref = "nohref" - Se emplea para las áreas que no son seleccionables
▪ shape = "default | rect | circle | poly" - Indica el tipo de área que se
define (toda la imagen, rectangular, circular o poligonal)
Atributos ▪ coords = "lista de números" - Se trata de una lista de números separados
específicos por comas que representan las coordenadas del área. Rectangular = X1,Y1,X2,Y2
(coordenadas X e Y del vértice superior izquierdo y coordenadas X e Y del vértice
inferior derecho). Circular = X1,Y1,R (coordenadas X e Y del centro y radio del
círculo). Poligonal = X1,Y1,X2,Y2,...,XnYn (coordenadas de los vértices del polígono.
Si las últimas coordenadas no son iguales que las primeras, se cierra
automáticamente el polígono uniendo ambos vértices)

Tipo de elemento Etiqueta vacía

Descripción Se emplea para definir las distintas áreas que forman un mapa de imagen

Si una imagen utiliza un mapa de imagen, debe indicarlo mediante el atributo usemap. El valor
del atributo debe ser el nombre del mapa de imagen definido en otra parte del mismo
documento HTML:
<img src="mapa_mundo.gif" usemap="#continentes" />
...
<map name="continentes">
...
</map>

Las áreas se definen mediante el atributo shape que indica el tipo de área y coords que es una
lista de coordenadas cuyo significado depende del tipo de área definido. El enlace de cada área
se define mediante el atributo href, con la misma sintaxis y significado que para los enlaces
normales.

El siguiente ejemplo muestra una imagen sencilla que contiene cuatro figuras geométricas:

www.librosweb.es 77
Introducción a XHTML Capítulo 6. Imágenes y objetos

Figura 6.2. Ejemplo de imagen que incluye un mapa de imagen

Utilizando un círculo, dos rectángulos y un polígono se pueden definir fácilmente cuatro zonas
pinchables en la imagen mediante el siguiente código HTML:
<img src="imagen.gif" usemap="#mapa_zonas" />

<map name="mapa_zonas">
<area shape="rect" coords="20,25,84,113" href="rectangulo.html" />
<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24" href="triangulo.html"
/>
<area shape="circle" coords="130,114,29" href="circulo.html" />
<area shape="rect" coords="19,156,170,211" href="mailto:[email protected]" />
<area shape="default" nohref="nohref" />
</map>

6.3. Objetos
Además de las imágenes, HTML permite incluir en las páginas web otros elementos mucho más
complejos, como applets de Java y vídeos en formato QuickTime o Flash. La mayoría de este tipo
de contenidos no los interpreta el navegador directamente, sino que hace uso de pequeños
programas llamados plugins y que se encargan de tratar con este tipo de elementos complejos.

La etiqueta <object> es la que permite "embeber" o incluir en las páginas HTML cualquier tipo
de contenido complejo:

www.librosweb.es 78
Introducción a XHTML Capítulo 6. Imágenes y objetos

<object> Objeto

Atributos comunes básicos, i18n y eventos

▪ data = "url" - Indica la URL de los datos que utiliza el objeto

▪ classid, codebase, codetype - Información específica que depende del tipo
de objeto
Atributos ▪ type - Indica el tipo de contenido de los datos
específicos
▪ height = "unidad_de_medida" - Indica la altura con la que se debe mostrar el
objeto
▪ width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar el
objeto

Tipo de elemento Bloque y en línea

Descripción Se emplea para embeber objetos en los documentos

El atributo data se emplea para indicar la URL del recurso que se va a incluir. El atributo type
indica el tipo de contenido de los datos del objeto. Los posibles valores de type están
estandarizados y coinciden con los del atributo type de la etiqueta <a> que se explicó
anteriormente.

El propio estándar de HTML incluye ejemplos de uso de esta etiqueta. Incluir un vídeo en
formato MPEG:
<object data="PlanetaTierra.mpeg" type="application/mpeg" />

También se pueden incluir varias versiones alternativas de un mismo contenido. Así, si el

navegador no es capaz de interpretar el formato por defecto, puede optar por cualquiera de los
otros formatos alternativos:
<object title="La Tierra vista desde el espacio" classid="http://www.observer.mars/
TheEarth.py">
<!-- Formato alternativo en forma de vídeo -->
<object data="PlanetaTierra.mpeg" type="application/mpeg">
<!-- Otro formato alternativo mediante una imagen GIF -->
<object data="PlanetaTierra.gif" type="image/gif">
<!-- Si el navegador no soporta ningún formato, se muestra el siguiente texto -->
La <strong>Tierra</strong> vista desde el espacio.
</object>
</object>
</object>

A los objetos también se les puede pasar información adicional en forma de parámetros
mediante la etiqueta <param>:

www.librosweb.es 79
Introducción a XHTML Capítulo 6. Imágenes y objetos

<param> Parámetros de un objeto

Atributos comunes id

Atributos ▪ name = "texto" - Indica el nombre del parámetro

específicos ▪ value = "texto" - Indica el valor del parámetro

Tipo de elemento Etiqueta vacía

Descripción Se emplea para indicar el valor de los parámetros del objeto

Las etiquetas <param> siempre se incluyen en el interior de las etiquetas <object>:

<object data="..." type="...">
<param name="parametro1" value="40" />
<param name="parametro2" value="20" />
<param name="parametro3" value="texto de prueba" />
</object>

Uno de los principales inconvenientes de <object> es la forma de incluir vídeos en formato

Flash en las páginas HTML. Si se utiliza el siguiente código:
<object data="nombre_video.swf" type="application/x-shockwave-flash"></object>

El elemento anterior es correcto desde el punto de vista técnico, pero provoca que algunos
navegadores como Internet Explorer no visualicen el vídeo hasta que se ha descargado
completamente. Si se trata de un vídeo largo, esta solución no es válida para el usuario.

Por este motivo, se utiliza una solución alternativa para incluir vídeos Flash en las páginas
HTML: el uso de la etiqueta <embed>. Aunque esta solución funciona correctamente, no se trata
de una solución válida desde el punto de vista del estándar de XHTML, por lo que las páginas que
incluyan esta solución no pasarán correctamente el proceso de validación.

<embed> Embeber objetos

Atributos comunes básicos, i18n y eventos

▪ src = "url" - Indica la URL del archivo u objeto que se incluye en la página
▪ type = "tipo_de_contenido" - Indica el tipo de contenido del objeto (flash,
quicktime, java, etc.)
Atributos
específicos ▪ height = "unidad_de_medida" - Indica la altura con la que se debe mostrar el
objeto
▪ width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar el
objeto

Tipo de elemento Bloque

Descripción Se emplea para embeber objetos en los documentos

Este es el motivo por el que los sitios web más populares de vídeos en formato Flash
proporcionan un código similar al siguiente para incluir sus vídeos en las páginas HTML:

www.librosweb.es 80
Introducción a XHTML Capítulo 6. Imágenes y objetos

<object width="425" height="350">

<param name="movie" value="http://www.youtube.com/v/MsH0rBWCYjs"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/MsH0rBWCYjs" type="application/
x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>

Una vez más, se debe tener en cuenta que la solución anterior de utilizar la etiqueta <embed> es
correcta desde el punto de vista del usuario (no tiene que esperar a que el vídeo se descargue
completamente para poder verlo) pero no es una solución técnicamente válida, ya que la
etiqueta <embed> no es parte del estándar XHTML.

www.librosweb.es 81