HTML: Elementos Multimedia
El contenido multimedia en HTML se refiere a elementos que permiten incrustar audio, video, imágenes, y otros tipos de contenido enriquecido en una página web. HTML proporciona varias etiquetas específicas para manejar estos tipos de contenido.
Imágenes
La etiqueta <img> se utiliza para incrustar imágenes en una página web. Esta compuesta por src: el cual especifica la ruta de la imagen y alt: que proporciona un texto alternativo por si la imagen no se puede cargar.
<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">Videos
La etiqueta <video> se usa para incrustar videos. Puede incluir controles para reproducir, pausar y controlar el volumen. Esta compuesta por controls: Muestra controles de reproducción (play, pause, volumen, etc.) .width y height: Especifican las dimensiones del video. source: Especifica la ruta del archivo de video y su tipo.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de video.
</video>Figuras y leyendas
La etiqueta <figure> se utiliza para encapsular imágenes o gráficos junto con su descripción, mientras que <figcaption> proporciona una leyenda o descripción. Esta compuesta por <figure>: Agrupa contenido multimedia y su descripción. <figcaption>: Añade una leyenda o descripción al contenido multimedia.
<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Esta es la descripción de la imagen.</figcaption>
</figure>Audio
La etiqueta <audio> es similar a <video>, pero se utiliza para reproducir archivos de audio. Esta compuesta por controls: Muestra controles para la reproducción del audio. source: Especifica la ruta del archivo de audio y su tipo.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta la etiqueta de audio.
</audio>Integración de YouTube y otros iframes
La etiqueta <iframe> se utiliza para incrustar contenido de otros sitios web, como videos de YouTube o mapas de Google. Esta compuesta por src: Especifica la URL del contenido que deseas incrustar .allow: Define los permisos de la integración, como autoplay y fullscreen. frameborder: Define si hay borde alrededor del iframe.
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Contenido interactivo
Estas etiquetas se utilizan para incrustar contenido multimedia más avanzado, como documentos PDF. Las más conocidas son: <embed>, <object>, <param>. Estas etiquetas estan compuestas por: data: URL del objeto a incrustar. type: Tipo MIME del contenido (como application/pdf).
<object data="document.pdf" type="application/pdf" width="600" height="400">
<p>Tu navegador no soporta la visualización de PDFs. Puedes <a href="document.pdf">descargarlo aquí</a>.</p>
</object>