Listas HTML: Crear Listas Desordenadas y Ordenadas

Introducción

Las listas HTML son una parte fundamental del desarrollo web, utilizadas para agrupar y organizar elementos relacionados. Hacen que el contenido sea más legible y accesible. Hay dos tipos principales de listas:

Listas Desordenadas (<ul>): Se utilizan cuando el orden de los elementos no importa. Normalmente se muestran con viñetas.
Listas Ordenadas (<ol>): Se utilizan cuando el orden de los elementos es importante. Normalmente se muestran con números.

En este laboratorio, aprenderá a crear ambos tipos de listas, agregarles elementos e incluso crear sublistas anidadas para construir estructuras más complejas. Al final, tendrá una única página HTML que demuestra estos tipos de listas.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 93%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Crear la etiqueta ul para lista desordenada

En este paso, creará una lista desordenada. Las listas desordenadas se definen con la etiqueta <ul> y se utilizan para elementos donde la secuencia no es importante.

Primero, localice el archivo index.html en el explorador de archivos en el lado izquierdo del WebIDE. Haga clic en él para abrirlo en el editor.

Dentro del <body> de su archivo index.html, agregue una lista desordenada vacía colocando las etiquetas <ul> y </ul> justo después del encabezado <h1>.

Su archivo index.html debería verse ahora así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul></ul>
  </body>
</html>

Después de agregar el código, guarde el archivo. Puede previsualizar sus cambios cambiando a la pestaña Web 8080. En este punto, no verá ningún elemento de lista, ya que aún no hemos agregado ninguno.

Agregar etiquetas li dentro de ul para los elementos de la lista

En este paso, agregará elementos a la lista desordenada. Cada elemento de una lista se define con la etiqueta <li> (list item). Estas etiquetas <li> deben colocarse dentro de la etiqueta <ul> principal.

Agreguemos tres elementos a nuestra lista de compras. Modifique su archivo index.html para incluir "Milk", "Bread" y "Cheese" como elementos de lista.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </body>
</html>

Guarde el archivo y cambie a la pestaña Web 8080 para ver sus cambios. Ahora debería ver una lista con viñetas con los tres artículos de la compra.

Crear la etiqueta ol para lista ordenada

En este paso, creará una lista ordenada. Las listas ordenadas se definen con la etiqueta <ol> y se utilizan cuando el orden de los elementos es importante, como en una receta o una lista de tareas pendientes. El navegador numerará automáticamente los elementos.

Agreguemos una nueva sección para una lista de tareas pendientes. En su archivo index.html, agregue un nuevo encabezado <h2>To-Do List</h2> y una lista ordenada vacía <ol></ol> debajo de la lista desordenada existente.

Su archivo index.html ahora debería contener ambas estructuras de lista:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol></ol>
  </body>
</html>

Guarde el archivo y verifique la vista previa en la pestaña Web 8080. Verá el nuevo encabezado, pero la lista ordenada estará vacía por ahora.

Agregar etiquetas li dentro de ol para elementos numerados

En este paso, agregará elementos a su nueva lista ordenada. Al igual que con las listas desordenadas, utiliza la etiqueta <li> para definir cada elemento. El navegador se encargará de la numeración automáticamente.

Agreguemos tres tareas a nuestra lista de tareas pendientes. Edite el archivo index.html y coloque los siguientes elementos <li> dentro de sus etiquetas <ol>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>Go to the gym</li>
    </ol>
  </body>
</html>

Guarde el archivo y actualice la pestaña Web 8080. Ahora verá una lista numerada que muestra sus tres tareas.

Anidar ul dentro de ol para sublistas

En este paso, aprenderá a crear listas anidadas, también conocidas como sublistas. Esto es útil para desglosar un elemento de lista en puntos más pequeños y relacionados. Puede anidar una lista (<ul> o <ol>) dentro de un elemento <li>.

Agreguemos más detalles a la tarea "Go to the gym". Agregaremos una lista desordenada anidada para especificar las actividades de entrenamiento. Para hacer esto, coloque un nuevo bloque <ul> dentro del elemento <li>Go to the gym</li>.

Actualice su archivo index.html con el siguiente código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>
        Go to the gym
        <ul>
          <li>Treadmill</li>
          <li>Weights</li>
        </ul>
      </li>
    </ol>
  </body>
</html>

Guarde el archivo y visualícelo en la pestaña Web 8080. Verá una sublista con sangría y viñetas debajo del elemento "Go to the gym". Esto demuestra cómo puede crear estructuras de contenido más complejas y organizadas.

Resumen

¡Felicitaciones por completar el laboratorio!

En este laboratorio, ha aprendido los conceptos esenciales para crear listas en HTML. Ha logrado con éxito:

Crear una lista desordenada (<ul>) para elementos sin un orden específico.
Crear una lista ordenada (<ol>) para elementos donde la secuencia es importante.
Utilizar la etiqueta de elemento de lista (<li>) para agregar elementos a ambos tipos de listas.
Crear una lista anidada para construir una estructura jerárquica.

Las listas son una herramienta crucial para organizar el contenido y mejorar la legibilidad de sus páginas web. Ahora puede utilizarlas de manera efectiva en sus futuros proyectos web.