by Tomas Gonzalez

on junio 26, 2024

COMPARTE ESTE ARTÍCULO

Enunciado del Ejercicio

El objetivo de este ejercicio es construir una página HTML que contenga los siguientes elementos:

Audio: Incorpora un archivo de audio que los usuarios puedan reproducir.
Video: Añade un video relacionado con el contenido de tu elección.
Listas ordenadas y desordenadas: Utiliza ambas para organizar información relevante.

Instrucciones Detalladas:

Audio: Deberás incluir un archivo de audio sobre un tema educativo.
Video: Inserta un video que complemente el audio, puede ser una explicación o un tutorial.
Listas:
Ordenada: Enumera los pasos para insertar un video en HTML.
Desordenada: Haz una lista de consejos para optimizar la accesibilidad de los elementos multimedia en una página web.

Solución del Ejercicio

A continuación, se muestra un ejemplo de cómo podría ser el código HTML que cumple con las especificaciones del ejercicio:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio Multimedia HTML</title>
</head>
<body>
    <h1>Ejercicio con Audio y Video en HTML</h1>

    <section>
        <h2>Audio Educativo</h2>
        <audio controls>
            <source src="audioeducativo.mp3" type="audio/mp3">
            Tu navegador no soporta el elemento de audio.
        </audio>
    </section>

    <section>
        <h2>Video Tutorial</h2>
        <video controls>
            <source src="videotutorial.mp4" type="video/mp4">
            Tu navegador no soporta el elemento de video.
        </video>
    </section>

    <section>
        <h2>Listas en HTML</h2>
        <h3>Pasos para insertar un video:</h3>
        <ol>
            <li>Utiliza la etiqueta <code>&lt;video&gt;</code> para iniciar el elemento.</li>
            <li>Añade la etiqueta <code>&lt;source&gt;</code> dentro del video.</li>
            <li>Define el atributo src para indicar la ubicación del archivo de video.</li>
            <li>Establece el tipo de archivo con el atributo type.</li>
            <li>Incluye controles con el atributo controls para permitir la reproducción.</li>
        </ol>

        <h3>Consejos para la accesibilidad multimedia:</h3>
        <ul>
            <li>Asegúrate de proporcionar subtítulos para los videos.</li>
            <li>Incluye descripciones de texto para todos los archivos de audio y video.</li>
            <li>Utiliza etiquetas semánticas para mejorar la estructuración del contenido.</li>
        </ul>
    </section>

</body>
</html>

Este código HTML incluye la estructura básica para incorporar elementos multimedia como audio y video, además de presentar la información en listas ordenadas y desordenadas para organizar el contenido de manera clara y accesible.

Photo by Pavel Danilyuk on Pexels.com
Photo by RealToughCandy.com on Pexels.com
Photo by Andrea Piacquadio on Pexels.com

¿QUÉ TE HA PARECIDO EL ARTÍCULO? Danos tu opinión al final de la página.
Deja tu comentario y ayúdanos a crecer.

¡SÍGUENOS EN TUS REDES FAVORITAS!
AYUDANOS A CRECER Y QUE LLEGUEMOS A TODAS LAS PERSONAS QUE NOS NECESITANA. SÍGUENOS EN TUS REDES.
Entra AQUÍ y elíge donde seguirnos.