Code Cats Studio

Actividad Práctica - Multimedia en HTML

Actividad Práctica: Multimedia en HTML

Descripción de la actividad

Crear un documento HTML que contenga:

  1. Una imagen con pie de foto
    • Utilizar la etiqueta <figure> para contener la imagen.
    • La imagen debe incluir el atributo alt con una descripción.
    • Añadir un <figcaption> con el pie de foto que describa la imagen.
  2. Un recurso multimedia (audio o video) con controles
    • Insertar un archivo de <audio> o <video>.
    • Debe incluir el atributo controls para permitir reproducir, pausar y ajustar el volumen.
    • Se pueden agregar fuentes alternativas con <source> y subtítulos opcionales con <track> (en caso de video).

Ejemplo de código

<!-- Imagen con pie de foto -->
<figure>
  <img src="paisaje.jpg" alt="Paisaje natural" width="400">
  <figcaption>Vista panorámica de un paisaje montañoso</figcaption>
</figure>

<!-- Recurso multimedia: audio -->
<audio controls>
  <source src="cancion.mp3" type="audio/mpeg">
  Su navegador no soporta audio HTML5.
</audio>

<!-- Recurso multimedia: video -->
<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
  Su navegador no soporta video HTML5.
</video>

Instrucciones

  1. Abrir un editor de texto y crear un archivo HTML nuevo (por ejemplo, multimedia.html).
  2. Escribir la estructura básica de HTML (<!DOCTYPE html>, <html>, <head>, <title>, <body>).
  3. Insertar una imagen con pie de foto usando <figure> y <figcaption>.
  4. Insertar un recurso multimedia (audio o video) usando <audio> o <video> con controles visibles.
  5. Abrir el archivo en un navegador para verificar que la imagen, el pie de foto y el multimedia se muestran y funcionan correctamente.