Crear listas HTML con diferentes estilos

Introducción

En este laboratorio (lab), los participantes explorarán la creación y el estilo de listas HTML, centrándose en diferentes tipos de listas y sus atributos. El laboratorio guía a los aprendices a través de la construcción de diversas estructuras de listas, incluyendo listas ordenadas con numeración numérica y alfabética, listas no ordenadas con estilos de marcadores personalizados y listas de descripción con múltiples entradas.

Los participantes comenzarán configurando una estructura de documento HTML5 estándar y construirán progresivamente ejemplos de listas complejas, aprendiendo cómo usar etiquetas como <ol>, <ul>, <li> y <dl> para crear diseños de listas semánticos y visualmente atractivos. Al experimentar con atributos de listas y estructuras de listas anidadas, los estudiantes adquirirán habilidades prácticas en el diseño de listas HTML y entenderán cómo mejorar la organización del contenido de las páginas web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451035{{"Crear listas HTML con diferentes estilos"}} html/head_elems -.-> lab-451035{{"Crear listas HTML con diferentes estilos"}} html/lang_decl -.-> lab-451035{{"Crear listas HTML con diferentes estilos"}} html/lists_desc -.-> lab-451035{{"Crear listas HTML con diferentes estilos"}} html/doc_flow -.-> lab-451035{{"Crear listas HTML con diferentes estilos"}} html/inter_elems -.-> lab-451035{{"Crear listas HTML con diferentes estilos"}} end

Configurar la estructura del documento HTML

En este paso, aprenderás cómo crear la estructura básica de un documento HTML para tu demostración de listas. Los documentos HTML tienen una estructura estándar que proporciona la base para el contenido web.

Abre el WebIDE y navega hasta el directorio ~/project. Crea un nuevo archivo llamado lists.html haciendo clic derecho en el explorador de archivos y seleccionando "Nuevo archivo".

Ahora, creemos la estructura básica de un documento HTML5. Escribe el siguiente código en el archivo lists.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lists Example</title>
  </head>
  <body>
    <!-- Agregaremos nuestras listas aquí en los siguientes pasos -->
  </body>
</html>

Desglosemos los componentes clave de esta estructura HTML:

<!DOCTYPE html> declara que este es un documento HTML5
<html lang="en"> es el elemento raíz con especificación de idioma
<head> contiene metadatos sobre el documento
<meta charset="UTF-8"> asegura una codificación de caracteres adecuada
<meta name="viewport"> ayuda con el diseño responsivo
<title> establece el título de la página que se muestra en la pestaña del navegador
<body> es donde se colocará el contenido principal

La salida de ejemplo en un navegador web mostraría una página en blanco con el título "HTML Lists Example" en la pestaña del navegador.

Notas: Aprende más sobre Cómo previsualizar archivos HTML en el WebIDE.

Crear listas ordenadas con tipos numéricos y alfabéticos

En este paso, aprenderás cómo crear listas ordenadas en HTML utilizando las etiquetas <ol> (lista ordenada) y <li> (elemento de lista). Las listas ordenadas numeran automáticamente sus elementos y se pueden personalizar con diferentes estilos de numeración.

Abre el archivo lists.html que creaste en el paso anterior. Dentro de la etiqueta <body>, agrega el siguiente código para crear diferentes tipos de listas ordenadas:

<h2>Numeric Ordered List (Default)</h2>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<h2>Alphabetic Ordered List</h2>
<ol type="a">
  <li>First alphabetic item</li>
  <li>Second alphabetic item</li>
  <li>Third alphabetic item</li>
</ol>

<h2>Uppercase Alphabetic Ordered List</h2>
<ol type="A">
  <li>First uppercase item</li>
  <li>Second uppercase item</li>
  <li>Third uppercase item</li>
</ol>

<h2>Roman Numeral Ordered List</h2>
<ol type="i">
  <li>First roman numeral item</li>
  <li>Second roman numeral item</li>
  <li>Third roman numeral item</li>
</ol>

Desglosemos los diferentes tipos de listas:

La lista ordenada por defecto utiliza numeración numérica (1, 2, 3)
type="a" crea numeración alfabética en minúsculas (a, b, c)
type="A" crea numeración alfabética en mayúsculas (A, B, C)
type="i" crea numeración en números romanos en minúsculas (i, ii, iii)

La salida de ejemplo en un navegador web mostraría cuatro listas ordenadas diferentes con sus respectivos estilos de numeración.

Implementar listas no ordenadas con diferentes estilos de marcadores

En este paso, aprenderás cómo crear listas no ordenadas en HTML utilizando las etiquetas <ul> (lista no ordenada) y <li> (elemento de lista). Las listas no ordenadas utilizan diferentes estilos de marcadores para mostrar elementos de lista sin orden numérico o alfabético.

Abre el archivo lists.html y agrega el siguiente código después de las listas ordenadas anteriores:

<h2>Default Unordered List (Bullet Points)</h2>
<ul>
  <li>First bullet point</li>
  <li>Second bullet point</li>
  <li>Third bullet point</li>
</ul>

<h2>Disc Marker Style</h2>
<ul type="disc">
  <li>Disc marker item</li>
  <li>Another disc marker item</li>
  <li>Third disc marker item</li>
</ul>

<h2>Circle Marker Style</h2>
<ul type="circle">
  <li>Circle marker item</li>
  <li>Another circle marker item</li>
  <li>Third circle marker item</li>
</ul>

<h2>Square Marker Style</h2>
<ul type="square">
  <li>Square marker item</li>
  <li>Another square marker item</li>
  <li>Third square marker item</li>
</ul>

Exploremos los diferentes estilos de marcadores de listas no ordenadas:

La lista no ordenada por defecto utiliza viñetas sólidas
type="disc" crea marcadores circulares sólidos (por defecto)
type="circle" crea marcadores circulares huecos
type="square" crea marcadores cuadrados sólidos

La salida de ejemplo en un navegador web mostraría cuatro listas no ordenadas diferentes con sus respectivos estilos de marcadores.

Diseñar una lista de descripción personalizada con múltiples entradas

En este paso, aprenderás cómo crear listas de descripción en HTML utilizando las etiquetas <dl> (lista de descripción), <dt> (término de descripción) y <dd> (detalles de descripción). Las listas de descripción son perfectas para mostrar pares clave - valor o términos con sus explicaciones.

Abre el archivo lists.html y agrega el siguiente código después de los ejemplos de listas anteriores:

<h2>Programming Languages Description List</h2>
<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages</dd>

  <dt>CSS</dt>
  <dd>A styling language used to design web page appearance</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages</dd>
</dl>

<h2>Contact Information Description List</h2>
<dl>
  <dt>Name</dt>
  <dd>John Doe</dd>

  <dt>Email</dt>
  <dd>[email protected]</dd>

  <dt>Phone</dt>
  <dd>+1 (555) 123-4567</dd>
</dl>

Puntos clave sobre las listas de descripción:

<dl> define la lista de descripción completa
<dt> representa el término o nombre
<dd> proporciona la descripción o los detalles
Se pueden utilizar múltiples etiquetas <dd> para un solo <dt>
Útil para glosarios, metadatos y presentaciones de pares clave - valor

La salida de ejemplo en un navegador web mostraría dos listas de descripción con términos y sus descripciones correspondientes.

Experimentar con atributos de lista y estructuras de listas anidadas

En este paso, explorarás técnicas avanzadas de listas creando listas anidadas y utilizando atributos adicionales de lista. Las listas anidadas te permiten crear contenido jerárquico, mientras que los atributos pueden ayudarte a personalizar la apariencia y el comportamiento de las listas.

Abre el archivo lists.html y agrega el siguiente código después de los ejemplos de listas anteriores:

<h2>Nested Unordered List</h2>
<ul>
  <li>
    Main Category 1
    <ul>
      <li>Subcategory 1.1</li>
      <li>Subcategory 1.2</li>
    </ul>
  </li>
  <li>
    Main Category 2
    <ul>
      <li>Subcategory 2.1</li>
      <li>Subcategory 2.2</li>
    </ul>
  </li>
</ul>

<h2>Nested Ordered List with Start Attribute</h2>
<ol start="5">
  <li>
    First main item
    <ol type="a">
      <li>First nested item</li>
      <li>Second nested item</li>
    </ol>
  </li>
  <li>
    Second main item
    <ol type="a">
      <li>Third nested item</li>
      <li>Fourth nested item</li>
    </ol>
  </li>
</ol>

<h2>Mixed Nested List</h2>
<ul>
  <li>
    Web Development
    <ol>
      <li>HTML</li>
      <li>
        CSS
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ol>
  </li>
</ul>

Conceptos clave demostrados:

Las listas anidadas se pueden crear colocando una nueva lista dentro de un elemento de lista
Las listas se pueden mezclar (no ordenadas dentro de ordenadas o viceversa)
El atributo start permite cambiar el número inicial de una lista ordenada
El atributo type se puede utilizar para cambiar los estilos de numeración o marcadores en listas anidadas

La salida de ejemplo en un navegador web mostraría tres estructuras de listas anidadas diferentes con varios estilos y jerarquías.

Resumen

En este laboratorio, los participantes aprendieron cómo crear y dar estilo a listas HTML utilizando diversas técnicas. El laboratorio comenzó estableciendo una estructura estándar de documento HTML5, demostrando elementos esenciales como las etiquetas DOCTYPE, html, head y body, con un enfoque en los metadatos adecuados y la codificación de caracteres.

Los ejercicios prácticos cubrieron la creación de diferentes tipos de listas ordenadas y no ordenadas, incluyendo estilos de listas numéricas y alfabéticas. Los participantes exploraron atributos de lista y estructuras de listas anidadas, ganando experiencia práctica en el diseño de contenido HTML estructurado con marcado semántico. El laboratorio proporcionó una introducción integral a los elementos de lista HTML, lo que permitió a los aprendices organizar y presentar información de manera efectiva en documentos web.