Skip to content

IMAGENES Y OBJETOS

Imagenes

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

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

Etiqueta \<img>
Atributos comunes básicos, internacionalización y eventos
Atributos propios 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. 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:

<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.

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.

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>.

Etiqueta \<map>
Atributos comunes básicos, internacionalización y eventos
Atributos propios name = "texto" - Nombre que identifica de forma única al mapa definido (es obligatorio indicar un nombre único)
Tipo de elemento Bloque y en línea
Descripción Se emplea para definir mapas de imagen
Etiqueta \<area>
Atributos comunes básicos, internacionalización, eventos y foco
Atributos propios 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). coords = "lista de números" - Se trata de una lista de números separados 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>

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:rectangulo@direccion.com" />
  <area shape="default" nohref="nohref" />
</map>

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:

Etiqueta \<object>
Atributos comunes básicos, internacionalización y eventos
Atributos propios 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. type - Indica el tipo de contenido de los datos. 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 
<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>:

Etiqueta \<param>
Atributos comunes id
Atributos propios name = "texto" - Indica el nombre del parámetro. 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.

Etiqueta \<embed>
Atributos comunes básicos, internacionalización y eventos
Atributos propios 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.). 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:

<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.

Actividad

Realice una página web con una temática de su preferencia (Deportes, Cocina, Moda, Casas, Construcción, entre otros) y utilice todos los elementos estudiados en el módulo.

Nota: Recuerde integrar los elementos de los otros módulos.