Listas en HTML

-

Guía Interactiva de Listas en HTML para Estudiantes de 9no 4

Recurso didáctico diseñado por Andrés Franchi Ugartemendía de servicioti.com.uy para el grupo 9no 4. Permite aprender la estructuración de contenidos web mediante listas no ordenadas (<ul>), ordenadas (<ol>), ítems (<li>) y listas anidadas. Presenta cuadro comparativo y retos prácticos que se conectan con la plataforma Educode para optimizar el aprendizaje semántico escolar.

Informática • 9no 4 • Web Semántica

Estructurando Contenido: Listas en HTML

¡Hola, chiquilines descubran cómo ordenar información en la web usando <ul>, <ol> y <li>, y superen los 3 niveles de desafío directamente en Educode.

Concepto A

<li> (List Item) – El Bloque Fundamental

Define cada ítem o renglón individual. Regla de oro: la etiqueta <li> nunca se escribe suelta; siempre debe encontrarse adentro de un contenedor <ul> o <ol>.

Código Correcto: <li>Elemento individual</li>
Concepto B

<ul> (Unordered List)

Se aplica cuando la secuencia no cambia el significado (ingredientes de una torta, lista de compras, útiles de estudio). Genera viñetas circulares por defecto.

HTML: Lista con Viñetas
<ul>
  <li>Manzanas</li>
  <li>Leche</li>
  <li>Pan</li>
</ul>
Resultado en Pantalla:
  • Manzanas
  • Leche
  • Pan
Concepto C

<ol> (Ordered List)

Se utiliza cuando el orden secuencial o cronológico es indispensable (instrucciones, clasificaciones o tutoriales). El navegador numera automáticamente.

HTML: Lista Numérica
<ol>
  <li>Encender la computadora</li>
  <li>Abrir el navegador web</li>
  <li>Ingresar a la plataforma</li>
</ol>
Resultado en Pantalla:
  1. Encender la computadora
  2. Abrir el navegador web
  3. Ingresar a la plataforma
Concepto D – Nivel Pro

Listas Anidadas (Listas dentro de Listas)

¿Cómo armamos subcategorías o menús desplegables? Metemos una lista entera adentro de un ítem <li> antes de que éste cierre su etiqueta.

Estructura de Anidamiento Correcta
<ul>
  <li>Bebidas
    <ul>
      <li>Agua mineral sin gas</li>
      <li>Jugo natural de naranja</li>
    </ul>
  </li> <!-- ¡Ojo! El li padre cierra DESPUÉS de la lista anidada -->
</ul>

Cuadro Comparativo de Referencia Rápida

Utilicen esta síntesis para repasar antes de encarar las prácticas calificadas de la clase:

Etiqueta Nombre Completo Propósito Principal Marcador por Defecto
<ul> Unordered List Agrupar elementos donde el orden no altera el mensaje. Viñetas / Puntos (•)
<ol> Ordered List Organizar secuencias lógicas, pasos y clasificaciones. Números (1, 2, 3...)
<li> List Item Representar cada elemento o línea individual. Hereda según el contenedor
Consejo para 9no: Jamás inserten un texto suelto adentro de un <ul> o <ol>. Los únicos hijos directos válidos de una lista deben ser etiquetas <li>.
Nivel 1: Inicial

Actividad 1: Mi Lista de Objetivos

Consigna de clase: Crea un archivo HTML llamado objetivos.html. Escribe un título principal <h1> que diga "Mis Objetivos del Año" y construye una lista no ordenada (<ul>) con 5 cosas que quieras aprender o lograr en este año lectivo.

Criterio de éxito: Usar adecuadamente <ul> y exactamente 5 etiquetas <li>.
Programar en Educode
Nivel 2: Intermedio

Actividad 2: Ficha de Receta Favorita

Consigna de clase: Crea un archivo HTML llamado receta.html para tu comida uruguaya o mundial preferida. Debe incluir:

  • Un título <h2> con el nombre del plato.
  • Un subtítulo <h3>Ingredientes</h3> seguido de una lista no ordenada (<ul>).
  • Un subtítulo <h3>Preparación Paso a Paso</h3> seguido de una lista ordenada (<ol>).
Criterio de éxito: Demostrar con precisión cuándo usar viñetas (ingredientes sin orden estricto) versus números (pasos secuenciales).
Programar en Educode
Nivel 3: Desafío Supremo

Actividad 3: El Menú del Restaurante (Listas Anidadas)

Consigna de clase: Diseña una página web con la carta completa de un restaurante temático. Debes usar una lista principal de 3 categorías (Entradas, Platos Principales, Postres) y, adentro de cada una, anidar una segunda lista con al menos 2 opciones de comida.

Criterio de éxito: Colocar correctamente cada lista secundaria dentro del <li> padre correspondiente antes de cerrarlo.
Programar en Educode

Entradas populares de este blog