+
HTML
Capítulo 6
Lenguajes de Marcas y Sistemas de Gestión de Información
Curso 2025/2026
+ 2
Capítulo 6: IMÁGENES Y
OBJETOS
1. Imágenes
2. Mapas de Imágenes
3. Objetos
+ 3
1. IMÁGENES
Son uno de los elementos más importantes de las páginas web.
Prácticamente todas las páginas web contienen alguna imagen. Dentro
de las imágenes que se pueden incluir en una página HTML se deben
distinguir dos tipos:
◼ Imágenes de Contenido: proporcionan información y complementan
la información textual. Se incluyen directamente en el código HTML
mediante la etiqueta <img>.
◼ Imágenes de Adorno: se utilizan para hacer bordes redondeados,
para mostrar pequeños iconos en las listas de elementos, para mostrar
fondos de página, etc… No se deberían incluir en el código HTML, sino
que deberían emplearse hojas de estilos CSS para mostrarlas.
+ 4
1. IMÁGENES
Definición de la etiqueta <img>, utilizada para incluir las
imágenes en las páginas HTML:
+ 5
1. IMÁGENES
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.
<img src="[Link]" alt=”Mi Logotipo" />
+ 6
1. IMÁGENES
<img> es una etiqueta vacía→No tiene etiqueta de cierre. 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. 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.
+ 7
1. IMÁGENES
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, longdesc se emplea con
las imágenes complejas que necesitan mucha información para
ser descritas:
<img src=”carpeta/[Link]" alt="Imagen del Proyecto 1"
longdesc="/directorio/[Link]" />
<img src=“carpeta/[Link]" alt="Imagen del Proyecto 2"
longdesc=“[Link]" />
+ 8
1. IMÁGENES
Los atributos width y height se utilizan para indicar la anchura y altura
con la que se muestran las imágenes.
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 → La
anchura y la altura es parte del 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 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.
+ 9
1. IMÁGENES
<img src="/imagenes/[Link]" alt="Fotografía de
un paisaje" width="200" height="350" />
<img src="/imagenes/[Link]" alt="Fotografía de
un atardecer en la playa" width="330" height="220"
/>
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, se
muestra con una anchura de 200 píxel y una altura de 350
píxel.
+ 10
1. IMÁGENES
Es posible indicar la anchura y altura en forma de porcentaje que 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/[Link]" alt="Fotografía de un
paisaje" width="30%" height="350" />
</div>
Se mezclan 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.
+ 11
2. MAPAS DE IMÁGENES
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.
Aunque el uso de los mapas de imagen se ha reducido drásticamente en los últimos
años (se usa Flash), aún se utilizan en algunos sitios especializados. Muchos sitios
relacionados con mapas geográficos utilizan éstos para seleccionar el destino del
viaje. 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.
+ 12
2. MAPAS DE IMÁGENES
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, primero se
inserta la imagen original mediante la etiqueta <img> y después se utiliza la
etiqueta <map> para definir las zonas o regiones de la imagen. Cada zona se
define mediante la etiqueta <area>.
+ 13
2. MAPAS DE IMÁGENES
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>
+ 14
2. MAPAS DE IMÁGENES
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:
+ 2. MAPAS DE IMÁGENES 15
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="[Link]" usemap="#mapa_zonas" />
<map name="mapa_zonas">
<area shape="rect" coords="20,25,84,113"
href="[Link]" />
<area shape="polygon"
coords="90,25,162,26,163,96,89,25,90,24" href="[Link]"
/>
<area shape="circle" coords="130,114,29" href="[Link]"
/>
<area shape="rect" coords="19,156,170,211"
href="[Link] />
<area shape="default" nohref="nohref" />
</map>
+ 16
3. OBJETOS
HTML permite incluir en páginas elementos como applets de Java y vídeos en
formato QuickTime. Estos contenidos no los interpreta el navegador
directamente, sino que hace uso de 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:
+ 17
3. OBJETOS
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 valores de type
están estandarizados y coinciden con los del atributo type
de la etiqueta <a>.
El propio estándar de HTML incluye ejemplos de uso de
esta etiqueta. Incluir un vídeo en formato MPEG:
<object data=”video" type="application/mpeg" />
+ 3. OBJETOS 18
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="[Link]
<!-- Formato alternativo en forma de vídeo -->
<object data="[Link]" type="application/mpeg">
<!-- Otro formato alternativo mediante una imagen GIF -->
<object data="[Link]" 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>
+ 19
3. OBJETOS
A los objetos también se les puede pasar información
adicional en forma de parámetros mediante la etiqueta
<param>:
+ 20
3. OBJETOS
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>
+ 21
3. OBJETOS
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 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.
+ 22
3. OBJETOS
Una solución alternativa para incluir vídeos Flash en las páginas HTML
es el uso de las etiquetas <embed> e <iframe>. 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.
+ 23
3. OBJETOS
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:
<object width="425" height="350">
<param name="movie"
value="[Link]
<param name="wmode" value="transparent"></param>
<embed src="[Link]
type="application/x-shockwave-flash"
wmode="transparent" width="425" height="350"></embed>
</object>