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