Listas: ordenadas y no ordenadas
Cree listas numeradas y con viñetas
Listas: ordenadas y no ordenadas es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 4 lecciones en total.
Listas ordenadas y desordenadas
¡Le damos la bienvenida a la próxima lección! Hoy aprenderemos a crear listas en HTML. Las listas ayudan a organizar la información y facilitan su lectura.
¿Qué son las listas?
Las listas son una excelente forma de agrupar elementos relacionados. HTML tiene dos tipos principales de listas:
- Listas ordenadas: Los elementos aparecen numerados (1, 2, 3...).
- Listas desordenadas: Los elementos aparecen con viñetas.
¡Aprendamos a crear ambos tipos!
Crear una lista ordenada
Una lista ordenada se crea utilizando la etiqueta <ol>. Cada elemento de la lista se añade utilizando la etiqueta <li> (elemento de lista).
Ejemplo:
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
Crear una lista desordenada
Una lista desordenada se crea utilizando la etiqueta <ul>. Cada elemento se añade utilizando la etiqueta <li>, igual que en las listas ordenadas.
Ejemplo:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
Listas anidadas
Puede crear una lista dentro de otra lista. Esto se denomina lista anidada. Puede anidar listas ordenadas y no ordenadas entre sí.
Ejemplo:
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Spinach</li>
</ul>
</li>
</ul>
Listas con descripciones
HTML también permite crear listas de descripciones mediante las etiquetas <dl>, <dt> y <dd>:
<dl>: Define la lista.<dt>: Define el término (título).<dd>: Define la descripción.
Ejemplo:
<dl>
<dt>HTML</dt>
<dd>The language used to create web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>Cómo aplicar estilos a las listas
Puede usar CSS para cambiar la apariencia de sus listas. Por ejemplo, puede cambiar el tipo de viñetas o números.
Ejemplo:
<style>
ul {
list-style-type: square; /* Changes bullets to squares */
}
ol {
list-style-type: upper-roman; /* Changes numbers to Roman numerals */
}
</style>
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
<ol>
<li>First Step</li>
<li>Second Step</li>
</ol>
Pruébelo usted mismo
Vamos a crear una página web sencilla con listas ordenadas y no ordenadas. Este es un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>My To-Do List</h1>
<h2>Morning Routine</h2>
<ol>
<li>Wake up</li>
<li>Brush my teeth</li>
<li>Have breakfast</li>
</ol>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
¡Excelente trabajo!
¡Felicidades! Ha aprendido a crear listas ordenadas y no ordenadas, listas anidadas y listas de descripciones. Estas son herramientas excelentes para organizar la información en sus páginas web. En la próxima lección, aprenderá a agregar enlaces para conectar distintas páginas y sitios web. ¡Prepárese para seguir aprendiendo!
Preguntas frecuentes
¿La lección «Listas: ordenadas y no ordenadas» es gratis?
Sí — el texto completo de «Listas: ordenadas y no ordenadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 4 lecciones en total.
¿Qué aprenderé en «Listas: ordenadas y no ordenadas»?
Cree listas numeradas y con viñetas Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Listas: ordenadas y no ordenadas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Encabezados y párrafos
- Listas: ordenadas y no ordenadas
- Enlaces: conectando la Web
- Imágenes: añada imágenes a su página