¿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.