Laboratorio de lista no ordenada en HTML

Introducción

La etiqueta ul en HTML se utiliza para crear una lista no ordenada donde los elementos generalmente se representan como una lista con viñetas. Esta práctica te guiará sobre cómo crear una lista no ordenada utilizando HTML y proporcionará ejemplos de sintaxis y uso de la etiqueta ul.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

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 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Configurar la estructura del documento HTML

Crea un archivo index.html en una carpeta de proyecto nueva y abre el archivo en un editor de código.

Crea la estructura básica de un documento HTML agregando las etiquetas html, head y body. Dentro de la etiqueta head, agrega la etiqueta title y establece el título del documento como "HTML Unordered List Lab".

<!doctype html>
<html>
  <head>
    <title>HTML Unordered List Lab</title>
  </head>
  <body>
    <!-- Agrega contenido aquí -->
  </body>
</html>

Crear una lista no ordenada usando la etiqueta ul

Dentro de la etiqueta body, crea una lista no ordenada usando la etiqueta ul. Para agregar elementos de lista, utiliza la etiqueta li dentro de la etiqueta ul.

<ul>
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Agregar atributos a la etiqueta ul

La etiqueta ul no tiene atributos específicos, pero admite atributos globales y de eventos. Aquí hay un ejemplo de cómo agregar el atributo class a la etiqueta ul.

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Aplicar estilo CSS a la etiqueta ul

Para dar estilo a la etiqueta ul, puedes usar CSS. En el siguiente ejemplo, estamos estableciendo el tipo de viñeta en 'cuadrado' y agregando márgenes.

<style>
  ul {
    list-style-type: square;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
  }
</style>

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Anidar listas no ordenadas

Puedes anidar una lista no ordenada dentro de otra lista no ordenada colocando otra etiqueta <ul> dentro de una etiqueta <li>. Aquí hay un ejemplo de una lista no ordenada anidada.

<ul>
  <li>This is the first item in the parent list</li>
  <li>
    This is the second item in the parent list
    <ul>
      <li>This is a nested item</li>
      <li>This is another nested item</li>
    </ul>
  </li>
  <li>This is the third item in the parent list</li>
</ul>

Resumen

En este laboratorio, has aprendido cómo crear una lista no ordenada usando la etiqueta ul en HTML. También has aprendido cómo agregar atributos y estilos CSS a la etiqueta ul. Recuerda que la etiqueta ul se utiliza para crear una lista de viñetas de elementos. La etiqueta ul requiere de la etiqueta de inicio y fin, y los elementos de lista deben agregarse usando la etiqueta li dentro de la etiqueta ul. Puedes anidar una lista no ordenada dentro de otra lista no ordenada colocando otra etiqueta ul dentro de una etiqueta li.

Lista no ordenada en HTML