Etiquetas Relacionadas con Medios

Este artículo explica las etiquetas relacionadas con los medios.

Explica cómo describir imágenes, videos, audio, etc. en HTML, así como elementos colapsables y marcos en línea.

YouTube Video

Etiquetas Relacionadas con Medios

Etiqueta <img>

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• La etiqueta <img> se utiliza para incrustar imágenes. El atributo src especifica la ruta de la imagen, y el atributo alt proporciona una descripción cuando la imagen no puede mostrarse.

Etiquetas <figure> y <figcaption>

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• La etiqueta <figure> agrupa contenido multimedia como imágenes o ilustraciones junto con un subtítulo usando la etiqueta <figcaption>.

Etiqueta <picture>

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• La etiqueta <picture> se utiliza para soportar imágenes responsivas, permitiendo seleccionar la imagen adecuada según diferentes condiciones de visualización.

• El atributo media especifica condiciones en el mismo formato que las consultas de medios CSS.

  • Puede especificar condiciones como el ancho mínimo (min-width), el ancho máximo (max-width) o la orientación de la pantalla (orientation).

• En este ejemplo, las siguientes imágenes se muestran dependiendo del ancho de la pantalla.

  • Si el ancho de la pantalla es de 800px o más, se muestra large.jpg.
  • Si el ancho de la pantalla es de 400px o más pero menos de 800px, se muestra medium.jpg.
  • Si el ancho de la pantalla es menor de 400px, se muestra small.jpg (la imagen en la etiqueta <img>).

Etiqueta <canvas>

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• La etiqueta <canvas> proporciona una región donde se pueden dibujar gráficos dinámicos usando JavaScript.

Etiqueta <map>

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• La etiqueta <map> se usa para definir un mapa de imagen. Las áreas clicables dentro del mapa se definen usando la etiqueta <area>. Esto permite que partes específicas de una imagen sean clicables, llevando a un enlace.
• Especifique el nombre del elemento del mapa asociado (etiqueta <map>) en el atributo usemap de la etiqueta <img>, precedido por #.
• Al especificar adecuadamente el atributo alt de la etiqueta <area>, puede mejorar la accesibilidad para usuarios con discapacidades visuales.

Etiqueta <embed>

1<embed src="movie.mp4" width="300" height="200">

• La etiqueta <embed> se utiliza para incrustar contenido externo como PDFs, videos o audio.

Etiqueta <video>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• La etiqueta <video> se utiliza para incrustar contenido de video. Puedes especificar múltiples formatos usando la etiqueta <source>.

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• El atributo preload permite especificar cuánto de un video debe cargarse en el navegador antes de que comience la reproducción.
  • auto indica al navegador que cargue todo el medio. Puede reducir el retraso al inicio de la reproducción, pero los datos podrían descargarse incluso si el usuario no reproduce el medio.
  • metadata solo carga los metadatos del medio (por ejemplo, duración, información de pistas). Los datos del medio en sí no se cargan hasta que el usuario inicie la reproducción. Esto es adecuado cuando se necesita información resumida sobre el medio.
  • none no precarga el archivo multimedia. El medio no descarga recursos hasta que comienza la reproducción. Esto es adecuado cuando se desea minimizar el uso de datos.

Etiqueta <audio>

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• La etiqueta <audio> se utiliza para incrustar contenido de audio. La etiqueta <source> admite múltiples formatos.
• Al igual que la etiqueta <video>, el atributo preload puede usarse para especificar cuánto audio debe cargarse antes de que comience la reproducción.

Etiqueta <track>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• La etiqueta <track> se utiliza para especificar pistas de texto como subtítulos y leyendas. Se puede usar dentro de las etiquetas <audio> o <video>.
• El atributo kind permite especificar el propósito de la pista (por ejemplo, subtítulos, leyendas, capítulos, etc.). Puedes especificar los siguientes valores.
  • subtitles proporciona subtítulos que traducen el contenido del video o audio o lo hacen más comprensible para los espectadores. Su propósito principal es la traducción directa del audio.
  • captions ofrece información adicional como música y efectos de sonido para personas sordas o con dificultades auditivas, además del audio.
  • descriptions son pistas que describen el contenido visual de un video, como acciones y escenarios, para personas con discapacidad visual.
  • chapters proporciona marcadores de capítulos (títulos de capítulos) para indicar puntos específicos dentro del video.
  • metadata proporciona información adicional para analizar o procesar el medio, pero no se muestra a los usuarios.

Etiqueta <iframe>

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• La etiqueta <iframe> se usa para incrustar otras páginas HTML o contenido externo (como sitios web, videos o documentos) en la página actual. A menudo se usa para incrustar videos de YouTube en una página.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video