Curso básico de HTML: Listas en HTML

Página 4: Listas en HTML

/es/curso-basico-de-html/textos-en-html/content/

Listas en HTML

Otro elemento HTML que te permite estructurar el contenido de la página es el elemento lista. Gracias a él puedes crear filas con información y marcarlas con viñetas o números, incluso, hay navegadores que admiten los números romanos.

Aunque no parezca, detrás de las listas que ves en los sitios web, siempre hay una etiqueta HTML indicando que sea una lista desordenada u ordenada. Aquí te explicamos su principal diferencia:

Listas desordenadas

Un elemento de lista desordenada se ve de la siguiente manera:

<ul></ul>

Pero, a diferencia de los elementos que has visto hasta ahora, estas etiquetas no hacen nada por sí solas. Para mostrar el contenido como una lista, necesitan dos elementos HTML que trabajen juntos: uno para indicar que vas a incluir una lista <ul>, y otro para hacer que cada elemento de la lista aparezca en una fila diferente<li>, así:

<ul>   
<li>Este es el primer ítem de la lista.</li>
<li>Este es el segundo ítem de la lista.</li>
<li>Y este el tercero.</li>
</ul>

Lo que hace el navegador es leer las etiquetas como instrucciones. Es claro que debe mostrar una lista, pero, al interpretar los elementos <ul> y </ul> entiende que debe poner una viñeta a cada elemento de la lista. Al cargar la página en tu navegador, aparecerá así:

Listas ordenadas

Un elemento de lista ordenada se ve de la siguiente manera:

<ol></ol>

Su estructura es muy parecida a la de una lista desordenada, pero aquí, el elemento que indica que vas a incluir una lista es <ol>, mientras que, la etiqueta <li>le asignará a cada elemento una fila diferente:

<ol>   
<li>Este es el primer ítem de la lista.</li>
<li>Este es el segundo ítem de la lista.</li>
</ol>

Al leer las etiquetas<ol>y </ol>el navegador interpreta que se trata de una lista ordenada, por lo tanto, añade automáticamente números, en lugar de viñetas. Si cargas este ejemplo en tu navegador, aparecerá lo siguiente:

¿Cómo se ven las listas ordenadas en HTML?

¡Momento de practicar!

Añade cada una de las listas que vimos anteriormente en la caja de abajo y selecciona el botón "Ver resultado".

También puedes activar la casilla "Agregar nuestros estilos (CSS)". Notarás que la apariencia de la lista cambia un poco porque se ajusta al estilo de nuestro sitio. Aquí, estamos usando CSS, lo que hace que todo se vea un poco diferente.

Hay páginas que utilizan el CSS para hacer que las listas vayan de lado, en lugar de arriba y abajo; para ocultar las viñetas o los números por completo; o para cambiarlos a formatos diferentes, como los números romanos.

No importa cuál sea el aspecto que tenga la lista, lo importante es que la estructura base es la misma en todos los casos.

¡Hazlo tú mismo!

Abre el archivo "index.html" de tu proyecto "Tutoriales Programación GCF" para añadir una lista.

Paso 1:

Ubica el segundo elemento <p> que añadiste en el ejercicio de la página anterior:

<p>De la directora <b>Vicki Fleming</b>, llega la conmovedora historia de un niño llamado Pete (Trent Dugson) y su perro Rover (el actor Brinson Lumblebrunt es el encargado de hacer su voz). Al principio, parece la típica historia en la que un niño y su perro aprenden el verdadero valor de la amistad, pero hay un giro que hace que esta película sea diferente: Rover juega al baloncesto, ¡y lo hace muy bien!</p>

Paso 2:

Justo debajo de ese elemento, añade una pequeña introducción para una lista:

<p>Esta película tiene todo lo que puedes pedir:</p>

Paso 3:

Debajo, añade una lista desordenada. Asegúrate de mantener los elementos <li> con sangría dentro del elemento <ul>, para facilitar la lectura:

<ul>      
     <li>Un deporte</li>
     <li>Un perro</li>
     <li>Suspenso para morderse las uñas</li>
</ul>

Paso 4:

Cuando hayas añadido la lista, tu código completo deberá verse así:

<html>
   <body>
    <h1>Clásicos del cine - Reseñas de películas</h1>     
    <h2>Reseña: El perro basquetbolista (2008)</h2>
        <p><i>4 de 5 estrellas<i></p>
        <p>De la directora <b>Vicki Fleming</b>, llega la conmovedora historia de un niño llamado Pete (Trent Dugson) y su perro Rover (el actor Brinson Lumblebrunt es el encargado de hacer su voz). Al principio, parece la típica historia en la que un niño y su perro aprenden el verdadero valor de la amistad, pero hay un giro que hace que esta película sea diferente: Rover juega al baloncesto, ¡y lo hace muy bien!</p>
        <p>Esta película tiene todo lo que puedes pedir:</p>
            <ul>
             <li>Un deporte</li>
             <li>Un perro</li>
             <li>Suspenso para morderse las uñas</li>
            </ul>
        <p>Aunque no se incluyen los 150 minutos de un partido de campeonato completo,"El perro basquetbolista" logra captar tu atención durante las 4 horas que dura el film. Al final, cualquier amante de los perros puede llorar. Si te gusta el baloncesto o las mascotas, esta es la película para ti.</p>
        <p>Encuentra el listado completo del reparto en la página web de "El perro basquetbolista".</p>
  </body>
</html>

Paso 5:

Guarda tu proyecto, tal como te lo explicamos en esta página.

Paso 6:

Busca la carpeta "Tutoriales Programación GCF" en los archivos de tu computador. Luego, haz doble clic sobre tu archivo "Index.html", para que el navegador abra tu página web. Deberá aparecer esto.

Felicitaciones, ¡tu página web ahora tiene una lista!

¿Quieres aprender sobre las imágenes y links en HTML? En la siguiente página te contamos todos los detalles.