HTML: Listas
Las listas son una forma de representar contenido en una página. Con ellas, es fácil agrupar fragmentos pequeños relacionados, como una lista de compras:
- Leche
- Pan
- Agua
Se puede hacer esta lista con tres párrafos, pero a primera vista parecerá que son tres frases diferentes sin un sentido común.
Leche
Pan
Agua
Para vincular esta información correctamente, se utilizan las listas. Para crearlas en HTML, se utilizan varios tags anidados:
<ul>o<ol>para definir el tipo de lista<li>para crear un elemento de lista
El esquema general de marcado se ve así:
<tipo_de_lista>
<elemento_de_lista>Texto</elemento_de_lista>
</tipo_de_lista>
Lista con viñetas
Para crear una lista con viñetas se utiliza el tag <ul>.
Las listas con viñetas se utilizan cuando la información no requiere un orden específico. Por ejemplo, la lista de productos del ejemplo anterior. No importa si se compra primero la leche o el pan, lo importante es comprar todos los productos.
<ul>
<li>Leche</li>
<li>Pan</li>
<li>Agua</li>
</ul>
- Leche
- Pan
- Agua
Lista numerada
Para agrupar información secuencial se utilizan las listas numeradas, que tienen la característica importante de tener un número de orden para cada elemento.
Estas listas son útiles cuando se indica una secuencia de acciones que se deben realizar. Una lista numerada se crea con el tag <ol>, dentro del cual también se encuentran los elementos en los tags <li>.
Lista de tareas para el día
- Comprar comida para mascotas
- Ir a la casa de Alex
- Preparar la cena
en el marcado HTML se ve así:
<ol>
<li>Comprar comida para mascotas</li>
<li>Ir a la casa de Alex</li>
<li>Preparar la cena</li>
</ol>
Tarea
Crea una lista numerada con 5 elementos.
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.