Saltar al contenido
Curso de HTML
Todos los cursos
Curso de HTML › Lección 8 › Ejercicio

Ejercicio: Audio, video e imágenes adaptables

  • ⏱ 30 minutos
  • 📶 Nivel: principiante

Objetivo

Crear una página con audio, video con subtítulos, un contenido incrustado y imágenes adaptables, aplicando las prácticas de accesibilidad y rendimiento de la lección.

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

💡 Pista 1: el video no se ve

Revisa la ruta del src, que el archivo esté en la carpeta y que el type coincida con su formato (video/mp4). Si tienes <source>, no necesitas src en <video>.

💡 Pista 2: ¿qué valores uso en sizes?

Una opción sencilla: sizes="(max-width: 600px) 100vw, 50vw". Significa «en pantallas de hasta 600 px ocupa todo el ancho; en las demás, la mitad».

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

    ✅ Ver una solución de ejemplo

    Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

    multimedia.html (dentro de body)
    <h1>Mi galería multimedia</h1>

<h2>Audio</h2>
<audio controls>
  <source src="media/campanilla.wav" type="audio/wav">
  Tu navegador no admite audio.
</audio>

<h2>Video</h2>
<figure>
  <video controls width="320" height="180" poster="img/paisaje.svg">
    <source src="media/demo.mp4" type="video/mp4">
    <track kind="captions" src="media/demo.es.vtt" srclang="es" label="Español" default>
    Tu navegador no admite video. <a href="media/demo.mp4">Descárgalo aquí</a>.
  </video>
  <figcaption>Un video de ejemplo con subtítulos.</figcaption>
</figure>

<h2>Mapa</h2>
<iframe src="https://www.openstreetmap.org/export/embed.html" title="Mapa de mi ciudad" width="400" height="250" loading="lazy"></iframe>

<h2>Imágenes adaptables</h2>
<img src="img/foto-800.jpg"
     srcset="img/foto-400.jpg 400w, img/foto-800.jpg 800w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Mercado de frutas al amanecer" width="800" height="533">

<picture>
  <source media="(min-width: 600px)" srcset="img/paisaje.svg">
  <img src="img/paisaje-vertical.svg" alt="Montañas con un sol al atardecer" width="300" height="400">
</picture>

    💡 🏁 Reto extra (opcional)

    Escribe tu propio archivo de subtítulos .vtt de al menos 4 frases para un audio de unos 15 segundos que grabes tú, y añádelo con <track>.