¿Sabes qué me encanta? Las listas.
¿Alguna vez has hecho una lista de pendientes o una lista de super?
¿Alguna vez has leído una lista en una página web como,
"Las 10 caras de perro más ridículas" ?
Apuesto a que lo has hecho, porque el mundo está lleno de listas.
HTML nos proporciona etiquetas para hacer listas,
y vamos a practicar esto haciendo
una lista de razones por las que los conejos son magníficas mascotas.
Ahora, para empezar una lista con viñetas,
debemos comenzar con la etiqueta < ul >.
¿Para qué es la etiqueta < ul >?
Apuesto a que puedes adivinar qué significa la "l", lista.
La "u", es más complicado saber, es para listas que no están ordenadas,
y significa que el navegador no va a numerar los elementos.
Sólo va a añadir pequeñas viñetas.
Para que veas lo que quiero decir, déjame añadir el primer elemento,
"Son peludos".
¿Ves el pequeño círculo que está a un lado?
Esa es una viñeta.
¿Para qué crees que es la etiqueta < li >?
La "l" significa lista, y la "i" es elemento, elemento de la lista.
Cada vez que queremos añadir un elemento nuevo,
necesitamos agregar una nueva etiqueta < li > debajo de < ul >.
Cada etiqueta < ul > debe tener cuando menos una etiqueta < li > debajo,
porque una lista sin elementos es muy aburrida.
Ok, vamos a añadir más elementos,
"Son grandes oyentes" y,
"Se comen todas las zanahorias sobrantes"
Está bien, esto debería ser una lista bastante convincente.
Yo no sé a quién no le gustaría tener un conejo después de leer esto.
Ahora, yo no numeré esta lista
porque no creo que alguna razón
es más importante que otra,
pero muchas veces queremos listas numeradas.
Como cuando queremos hacer una lista de
"Los tres conejos más famosos".
Así que para empezar nuestra lista numerada,
vamos a usar una etiqueta < ol > en lugar de < ul >.
¿Ya descubriste para qué es la etiqueta < ol >?
Aquí hay una pista, sólo revisa las primeras
dos letras de < ul > para saber qué significa.
Correcto, se usa para "listas ordenadas".
Y esta etiqueta le dice al navegador que
numere cada elemento nuevo automáticamente.
Seguimos usando < li > para añadir elementos nuevos
dentro de la lista.
Así que pondremos "Bugs Bunny",
tenemos a "Thumper",
y por supuesto, no podemos olvidar el "Easter Bunny".
Lo bueno de las listas numeradas es
que el navegador se encarga de la numeración por nosotros.
Así que si reordenamos los elementos, los borramos o añadimos otros,
los números siempre se actualizarán correctamente.
Como si todos ustedes me dijeran que
no saben quién es "Thumper".
Entonces, en primer lugar, les diría
que deben ver la película de "Bambi".
Pero luego de mala gana movería
a "Thumper" al final de la lista.
Y ahora, pobre "Thumper", es el número tres.
Ahora tienes todo lo que necesitas para crear listas.
Sigue adelante y haz listas de todo.