Curso IT Fundamentos HTML 014_Multimedia y contenido incrustado

Multimedia y contenido incrustado Uso de etiquetas de audio y video en HTML5 Aplicación de contenido incrustado, como mapas, páginas web incrustadas, etc.

Imágenes

Las imágenes son un tipo de medio muy importante que puede mejorar la experiencia del usuario y hacer que la transmisión de información sea más intuitiva y vívida. En HTML, usamos la etiqueta <img> para insertar imágenes. La etiqueta <img> es una etiqueta vacía de cierre automático, es decir, no tiene etiqueta de cierre. La dirección de la imagen se especifica mediante el atributo src (source) de la etiqueta <img>.

Ejemplo:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Descripción de la imagen">

Efecto:

Los elementos de imagen también pueden incluir los siguientes atributos:

• width: Especifica el ancho de la imagen.
• height: Especifica la altura de la imagen.
• align: Especifica la alineación de la imagen.
• border: Especifica el borde de la imagen.
• hspace: Especifica el espaciado horizontal entre la imagen y los elementos circundantes.
• vspace: Especifica el espaciado vertical entre la imagen y los elementos circundantes.
• ismap: Especifica si la imagen es una imagen de mapa.

Establecer el tamaño de la imagen

Podemos establecer el ancho y la altura de la imagen mediante los atributos width y height de la etiqueta <img>. Los valores de estos dos atributos pueden ser valores de píxeles específicos o porcentajes.

Ejemplo:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Descripción de la imagen" width="100" height="100" align="center" border="1">

Efecto:

Establecer texto alternativo

El texto alternativo (alt text) se utiliza para mostrar cuando la imagen no se puede cargar. También es utilizado por los lectores de pantalla para leer el contenido de la imagen y ayudar a las personas con discapacidad visual a entender la imagen. Establecemos el texto alternativo mediante el atributo alt de la etiqueta <img>.

Ejemplo:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="Este texto se muestra cuando no se encuentra la imagen">

Efecto:

Enlace de imagen

Las imágenes también se pueden usar como hipervínculos. Solo necesitamos colocar la etiqueta <img> dentro de la etiqueta <a> para crear un enlace de imagen.

Ejemplo:

1
<a href="https://www.zhaojian.net/">
2
  <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Descripción de la imagen" width="100" height="100" align="center" border="5">
3
</a>

Efecto:

[!Resumen]

• Los atributos width y height establecen el ancho y la altura de la imagen. Los valores de estos dos atributos pueden ser valores de píxeles específicos o porcentajes.
• Si se establecen tanto el ancho como la altura de la imagen, y la proporción de estos dos valores no es consistente con la proporción de la imagen en sí, la imagen puede estirarse o comprimirse, causando deformación.
• Si un enlace de imagen tiene un borde, el borde tiene por defecto el mismo color que el hipervínculo

Video

El elemento de video HTML se utiliza para incrustar videos en una página web. La etiqueta del elemento de video es <video>.

Ejemplo:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Efecto:

Los elementos de video también pueden incluir los siguientes atributos:

• width: Especifica el ancho del video.
• height: Especifica la altura del video.
• poster: Especifica el marco de póster del video.
• autoplay: Especifica si el video se reproduce automáticamente al cargar.
• loop: Especifica si el video se reproduce en bucle.
• muted: Especifica si el video está silenciado.
• preload: Especifica si el video se precarga al cargar.

Ejemplo:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto">
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Este ejemplo contiene un elemento de video. La URL del archivo de video está configurada en mp4.mp4, el ancho está configurado en 400 píxeles, la altura en 300 píxeles, el marco de póster en zhaojian-avatar.png, la reproducción automática en true, el bucle en true, el silencio en true y la precarga en auto.

Efecto:

Una solución de video HTML muy completa (no recomendada)

El siguiente ejemplo utiliza 4 formatos de video diferentes. El elemento <video> de HTML 5 intentará reproducir el video en uno de los formatos mp4, ogg o webm. Si todos fallan, recurrirá al elemento <embed>.

Ejemplo:

1
<video width="320" height="240" controls>
2
  <source src="video.mp4" type="video/mp4">
3
  <source src="video.ogg" type="video/ogg">
4
  <source src="video.webm" type="video/webm">
5
  <object data="video.mp4" width="320" height="240">
6
    <embed src="video.swf" width="320" height="240">
7
  </object>
8
</video>

[!Resumen]

• El elemento <source> proporciona una opción de respaldo. Si el navegador no admite ese formato, intentará reproducir el archivo de video especificado en el segundo elemento <source>.

Audio

El elemento <audio> en HTML se utiliza para incrustar contenido de audio en una página web.

Ejemplo:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls>
2
</audio>

Efecto:

Los elementos de audio también pueden incluir los siguientes atributos:

• controls: Especifica si se muestran los controles de audio. El valor predeterminado es true.
• autoplay: Especifica si el audio se reproduce automáticamente al cargar.
• loop: Especifica si el audio se reproduce en bucle.
• muted: Especifica si el audio está silenciado.
• preload: Especifica si el audio se precarga al cargar.

Ejemplo:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto">
2
</audio>

Este ejemplo contiene un elemento <audio>. La URL del archivo de audio está configurada en mp3.mp3, los controles están configurados en true, la reproducción automática en true, el bucle en true, el silencio en true y la precarga en auto.

Efecto:

Elemento embed

El elemento embed es un elemento introducido en HTML 4.01. Puede incrustar cualquier tipo de recurso, incluidos video, audio, imágenes, Flash, etc. El elemento embed requiere que el navegador admita un complemento específico para mostrarlo.

Ejemplo:

1
<embed src="URL del recurso" type="Tipo de recurso">

[!Resumen]

• HTML5 introdujo los elementos <video> y <audio> para reemplazar el elemento <embed>.
• El elemento embed puede incrustar cualquier tipo de recurso, mientras que los elementos <video> y <audio> solo pueden incrustar recursos de video y audio.
• El elemento embed requiere que el navegador admita un complemento específico para mostrarlo, mientras que los elementos <video> y <audio> no lo necesitan.
• El elemento <embed> aún se puede usar, pero ya no se recomienda.

Elemento object

El elemento object es un elemento introducido en HTML 4.01. Puede incrustar cualquier tipo de recurso, incluidos video, audio, imágenes, Flash, etc. El elemento object utiliza elementos <param> para especificar las propiedades del recurso, como el ancho, la altura, el color de fondo, etc. del recurso.

Ejemplo:

1
<object data="URL del recurso" type="Tipo de recurso">
2
  <param name="Nombre del atributo" value="Valor del atributo">
3
  ...
4
</object>

Diferencias específicas entre los elementos object y embed:

[!Resumen]

• Si necesita incrustar cualquier tipo de recurso y el navegador admite un complemento específico, puede usar el elemento object.
• Si solo necesita incrustar un tipo específico de recurso y no necesita que el navegador admita un complemento específico, puede usar el elemento embed.
• Si solo necesita incrustar recursos de video o audio, se recomienda usar los elementos <video> o <audio>.
• Los elementos <video> y <audio> no requieren que el navegador admita complementos específicos y proporcionan funciones más ricas.

Marcos

El elemento <iframe> es una etiqueta HTML utilizada para incrustar un documento dentro de otro documento. Permite incrustar un documento en otro documento y mostrar el contenido del documento incrustado en él. Esto se usa comúnmente para incrustar otras páginas web, videos, mapas, etc.

El elemento <iframe> tiene los siguientes atributos:

• El atributo src define la URL de la página web o documento a incrustar.
• El atributo width define el ancho del elemento <iframe>.
• El atributo height define la altura del elemento <iframe>.
• El atributo frameborder define si el borde del elemento <iframe> es visible.
• El atributo border define el ancho del borde del elemento <iframe>.
• El atributo framespacing define el espaciado entre el elemento <iframe> y su contenido circundante.
• El atributo marginwidth define el margen izquierdo y derecho del elemento <iframe>.
• El atributo marginheight define el margen superior e inferior del elemento <iframe>.
• El atributo scrolling define si el elemento <iframe> permite el desplazamiento.
• El atributo name define el nombre del elemento <iframe>.
• El atributo id define el ID del elemento <iframe>.
• El atributo class define la clase del elemento <iframe>.

Ejemplo:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <title>Elemento iframe de HTML</title>
5
</head>
6
<body>
7
  <iframe src="https://www.zhaojian.net">
8
    <p>Este es un iframe que muestra el contenido del sitio web zhaojian.net.</p>
9
  </iframe>
10
</body>
11
</html>

Efecto: