Html 5 – Capítulo 03 – listas y contenido multimedia

HTML5 no solo se trata de texto, sino también de presentar contenido visual y organizado de manera efectiva. En este capítulo, exploraremos etiquetas como <ul>, <ol>, <li> para crear listas, y <img>, <video>, <audio> para incorporar contenido multimedia. Comprenderás cómo estructurar y presentar información de manera atractiva y dinámica.

Etiqueta <ul> – Lista Desordenada

La etiqueta <ul> se utiliza para crear listas desordenadas, donde los elementos no tienen un orden específico.

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

• Cada elemento de lista se define utilizando <li>.
• No hay un orden particular para los elementos de la lista.

Etiqueta <ol> – Lista Ordenada

La etiqueta <ol> se utiliza para crear listas ordenadas, donde los elementos siguen un orden numérico.

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ol>

• Cada elemento de lista se define utilizando <li>.
• Los elementos se enumeran automáticamente.

Etiqueta <li> – Elemento de Lista

La etiqueta <li> se utiliza dentro de las etiquetas <ul> y <ol> para definir elementos de lista.

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
</ul>

• Se utiliza para cada punto en la lista, ya sea desordenada u ordenada.

Etiqueta <img> – Imágenes

La etiqueta <img> se utiliza para incrustar imágenes en una página web.

<img src="imagen.jpg" alt="Descripción de la imagen">

• src especifica la URL de la imagen.
• alt proporciona una descripción para la imagen (importante para accesibilidad).

Etiqueta <video> – Videos

La etiqueta <video> se utiliza para incrustar videos en una página web.

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    Tu navegador no soporta el elemento de video.
</video>

• width y height establecen las dimensiones del reproductor de video.
• controls muestra controles de reproducción.
• <source> define la fuente del video y su tipo MIME.

Etiqueta <audio> – Audio

La etiqueta <audio> se utiliza para incrustar contenido de audio en una página web.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Tu navegador no soporta el elemento de audio.
</audio>

• controls muestra controles de reproducción de audio.
• <source> define la fuente del archivo de audio y su tipo MIME.

Ejercicios Resueltos

Ejercicio 1: Crear una Lista Desordenada

<ul>
    <li>Manzanas</li>
    <li>Plátanos</li>
    <li>Naranjas</li>
</ul>

Ejercicio 2: Lista de Tareas Pendientes

<ol>
    <li>Lavar los platos</li>
    <li>Ir al supermercado</li>
    <li>Hacer ejercicio</li>
</ol>

Ejercicio 3: Incrustar una Imagen

<img src="paisaje.jpg" alt="Hermoso paisaje natural">

Ejercicio 4: Reproducir un Video

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    Tu navegador no soporta el elemento de video.
</video>

Conclusión

Las etiquetas de HTML5 para listas y contenido multimedia son herramientas esenciales para crear páginas web ricas en información visual. Al aprender a usar <ul>, <ol>, <li>, <img>, <video> y <audio>, has adquirido la habilidad de presentar contenido organizado y dinámico.