Este artículo forma parte del Curso HTML5 desde cero.
Haz click aquí para ver el índice.

Ahora que ya tienes un buen conocimiento sobre un gran número de etiquetas de HTML5, en este módulo vamos a ver cómo podemos enriquecer nuestro documento HTML5 mostrando imágenes, vídeos y demás elementos «media».

Etiqueta <img>

Se utiliza para mostrar una imagen (archivo jpg, png, etc.) y es una de las pocas etiquetas que no tienen etiqueta de apertura y etiqueta de cierre, dado que no encierra ningún contenido.

Su sintaxis sería la siguiente:

El único atributo obligatorio es src, donde indicaremos la ruta de la imagen. Veámoslos uno a uno.

• alt
  Permite especificar un texto alternativo para la imagen, que es mostrado cuando la imagen no puede ser mostrada al usuario (por cualquier tipo de error). Acorde al estándar actual, se recomienda incluir siempre este atributo.
• height
  Permite especificar el alto de la imagen en píxeles. Si no se especifica este tamaño, el navegador colocará la imagen en su tamaño original, o bien en el 100% del espacio del que disponga en el documento.
• width
  Permite especificar el ancho de la imagen en píxeles. Ocurre como en el atributo anterior, de omitir este atributo el navegador mostrará la imagen con su anchura original o reservando un 100% del espacio dispoinible en el documento.
• src
  Es el único atributo obligatorio de esta etiqueta y se utiliza para indicar la ruta donde donde se encuentra la imagen. Esta ruta puede ser absoluta o relativa.
• ismap
  Cuando se añade este atributo indicamos al navegador que se está cargando una imagen considerada mapa de servidor; Una imagen que puede tener zonas seleccionables que sirven como enlaces.
  • Explicación práctica: Imagínate una imagen que ocupa toda la pantalla, enlazada a otra página web. Al hacer clic en cualquier zona de la página web el navegador te envía a la página indicada en la etiqueta <a> … </a> con la peculiaidad de que además, el navedor le dice a la página de destino en qué punto exacto has echo click en la imagen. Puedes ver un ejemplo aquí: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_ismap
  • Importante: Sólo podemos indicar este atributo si encerramos la etiqueta <img> dentro de una etiqueta de enlace <a> … </a>.
• usemap
  Este atributo se usa para especificar que la imagen sea utilizada como un mapa de imagen con zonas seleccionables. Es decir, podemos mostrar la imagen que queramos y, mediante diferentes atributos y coordenadas, indicar ciertas zonas de la imagen para que éstas funcionen como enlaces (como si usasemos la etiqueta <a> solo para una zona en concreto de la imagen).
  • Al contrario que con la etiqueta ismap, el atributo usemap no puede utilizarse si la etiqueta <img> ya está encerrada dentro de un enlace<a> … </a> o dentro de un botón <button> … </button> (que aún no la hemos visto, pero la veremos en este mismo módulo).

Cómo utilizar el atributo usemap

Para utilizar la etiqueta <img> con el atributo usemap tenemos que definir la zona o zonas enlazadas de la imagen mediante coordenadas, y ésto se hace utilizando otras etiquetas. Veamos una sintaxis completa como ejemplo:

Como puedes ver, en primer lugar tenemos que utilizar la etiqueta <img> y en ella especificar el nombre del mapa de coordenadas dentro del atributo usemap. Después creamos el mapa de coordenadas usando la etiqueta <map> … </map> y especificando dentro de ella las zonas que querramos tengan enlace.

En el ejemplo puedes ver que además de indicar la zona mediante coordenadas también se debe especificar el tipo de zona seleccionada, que puede ser rect (rectángulo), circle (círculo) o polygon (para cualquier forma poligonal).

Para saber qué coordenadas poner, dado que están en píxeles y a mano puede resultar una tarea más que complicada, puedes utilizar herramientas gratuitas en las que subes  la imagen a utilizar como mapa y, sobre ésta, seleccionas con el ratón. La herramienta se encarga de indicarte el código HTML con las coordenadas correspondientes a la zona o zonas que has marcado.

Ejemplo de herramienta online para crear mapa de coordenadas en HTML: http://www.kolchose.org/simon/ajaximagemapcreator/

Etiqueta <audio> … </audio>

Permite reproducir un archivo de audio desde el navegador. Actualmente, los archivos de audio soportados son mp3, wav y ogg, aunque depende del navegador y su versión.

La sintaxis es la siguiente:

Repasemos sus atributos:

• src
  Es el atributo donde debemos indicar la ruta o enlace de nuestro archivo de audio.
• autoplay
  Si se añade, indicamos al navegador que reproduzca el archivo de audio de forma automática al cargar el documento HTML.
• controls
  Es un atributo booleano, por lo que al añadirlo en la etiqueta estamos indicando que se muestren los controles de reproducción al usuario.
• loop
  Si añadimos este atributo el archivo se reproducira en bucle (cuando termine volverá a comenzar automáticamente).
• muted
  Si añadimos este atributo, el archivo será cargado pero se activará de forma automática la opción de silenciar el audio.
• preload
  Este atributo tiene tres valores: none, auto y metadata, y permite definir si se realiza una precarga inicial del archivo de audio o no.
  • none: no se realiza ningún tipo de precarga.
  • auto: se realiza la precarga completa del archivo de audio.
  • metadata: se realiza como precarga sólo la información del archivo (duración, dimensión, etc).

Subetiqueta <source>

Podemos cargar un archivo de audio en diferentes formatos para aumentar la compatibilidad de nuestro archivo en los navegadores. La sintaxis sería la siguiente:

Y el siguiente código muestra un ejemplo práctico de cómo utilizar este conjunto de etiquetas, usando el atributo src para indicar la ruta del archivo y el atributo type para especificar el formato del archivo:

Etiqueta <video> … </video>

Permite reproducir un archivo de vídeo, y actualmente están soportados los siguientes formatos: mp4, WebM y ogg, aunque depende también del navegador y de la versión que se esté utilizando del mismo.

Su sintaxis es la siguiente:

Veamos sus atributos:

• src, autoplay, controls, loop, muted y preload
  Funcionan de la misma forma que en la etiqueta anterior.
• height y width
  Se utilizan para indicar la altura y la anchura del vídeo, respectivamente.

Al igual que en la etiqueta <audio>, la etiqueta <video> también permite cargar diferentes formatos usando la subetiqueta <source>, y la sintaxis es la misma:

Etiqueta <track>

Esta etiqueta permite especificar archivos especiales que contienen el texto que se ha de visualizar mientras se reproducen los archivos multimedia, como subtítulos, letras de canción, etc.

Su sintaxis es la siguiente:

No tiene etiqueta de cierre, y sus atributos son los siguientes:

• src
  Atributo para indicar el archivo o recurso al que queremos acceder (la RUTA del mismo). El formato de archivo que se suele cargar es *.vtt (video track text).
• default
  Permite especificar cuál es el archivo de subtítulos por defecto (en caso de existir varios archivos).
• label
  Permite especificar, entre comillas, el título para la pista de texto que se está cargando.
• kind
  Permite indicar diferentes opciones posibles para las pistas de texto. Valores que podemos añadir:
  • captions: Traducción de diálogos y efectos de sonido.
  • chapters: Títulos de capítulos.
  • descriptions: Descripción textual del vídeo o audio que se está reproduciendo.
  • metadata: Contenido usado por scripts.
  • subtitles: Subtítulos.
• srclang
  Utilizando los códigos de lenguaje definimos el idioma del archivo cargado.

Etiqueta <embed> 

Usamos esta etiqueta para insertar una aplicación externo o contenido interactivo. No tiene etiqueta de cierre, y su sintaxis es la siguiente:

Los atributos funcionan como en las etiquetas anteriores siendo el atributo src el único imprescindible para que el código funcione correctamente.

Etiqueta <objetct> … </object>

Con esta podemos insertar un objeto incrustado dentro del documento web. Normalmente se utiliza para elementos multimedia como applets de java, activex, pdf ó flash.

También es posible insertar el contenido de otra página web dentro de nuestro documento html usando esta etiqueta, aunque para ello se recomienda usar la etiqueta <iframe>, que veremos más adelante.

También, podemos pasar parámetros a los objetos que incrustemos con esta etiqueta, y para ello utilizaríamos la etiqueta <param>.

Su sintaxis es la siguiente:

Ya hemos visto anteriormente sus atributos:

• data:
  Para especificar  la dirección URL dle recurso al que se quiere acceder.
• width y height:
  Para definir u anchura y altura, respectivamente.
• name:
  Permite especificar el nombre que se quiere aplicar al objeto insertado.
• type:
  Para indicar el tipo MIME del documento con el que estamos enlazando. Aquí los tipos de mime: http://www.iana.org/assignments/media-types

¡A practicar!

Ahora que ya sabes cómo insertar imágenes, vídeos y demás objetos, utiliza el código de la práctica 2 del módulo anterior e inserta lo siguiente:

• 1 imagen como logotipo
• 1 imagen como imagen destacada del artículo (justo debajo del título).
• 1 archivo de audio MP3 con los siguientes parámetros:
  • Autoplay desactivado
  • Controles activados
  • Reproducción en loop activado.
• Extra! Si te atreves, inserta un vídeo de youtube en tu documento HTML5, ¡seguro que puedes hacerlo!

Summary

Article Name

Etiquetas de medios en HTML5

Description

En este artículo vamos a ver las Etiquetas de Medios en HTML5 para enriquecer nuestro documento HTML5 mostrando imágenes, vídeos y demás elementos "media".

Author

Nicolau Roca

Publisher Name

Let's Webbing

Publisher Logo