WEBVTT

00:00:00.633 --> 00:00:02.766
¿Sabes qué me encanta? Las listas.

00:00:02.766 --> 00:00:05.133
¿Alguna vez has hecho una lista de 
pendientes o una lista de super?

00:00:05.133 --> 00:00:07.342
¿Alguna vez has leído una lista en una 
página web como,

00:00:07.342 --> 00:00:10.401
"Las 10 caras de perro más ridículas" ?

00:00:10.401 --> 00:00:13.700
Apuesto a que lo has hecho, porque el
mundo está lleno de listas.

00:00:13.700 --> 00:00:16.100
HTML nos proporciona etiquetas para 
hacer listas,

00:00:16.100 --> 00:00:18.966
y vamos a practicar esto haciendo

00:00:18.966 --> 00:00:23.963
una lista de razones por las que los 
conejos son magníficas mascotas.

00:00:24.600 --> 00:00:27.133
Ahora, para empezar una lista con viñetas,

00:00:27.133 --> 00:00:30.486
debemos comenzar con la etiqueta < ul >.

00:00:30.502 --> 00:00:32.433
¿Para qué es la etiqueta < ul >?

00:00:32.433 --> 00:00:36.100
Apuesto a que puedes adivinar qué 
significa la "l", lista.

00:00:36.100 --> 00:00:39.933
La "u", es más complicado saber, 
es para listas que no están ordenadas,

00:00:39.933 --> 00:00:42.800
y significa que el navegador no va a
numerar los elementos.

00:00:42.800 --> 00:00:45.066
Sólo va a añadir pequeñas viñetas.

00:00:45.066 --> 00:00:48.367
Para que veas lo que quiero decir,
déjame añadir el primer elemento,

00:00:48.367 --> 00:00:50.200
"Son peludos".

00:00:50.200 --> 00:00:52.111
¿Ves el pequeño círculo que está 
a un lado?

00:00:52.111 --> 00:00:53.268
Esa es una viñeta.

00:00:53.268 --> 00:00:55.933
¿Para qué crees que es la etiqueta < li >?

00:00:55.933 --> 00:00:59.933
La "l" significa lista, y la "i" es elemento, 
elemento de la lista.

00:00:59.933 --> 00:01:01.700
Cada vez que queremos añadir un 
elemento nuevo,

00:01:01.700 --> 00:01:05.633
necesitamos agregar una nueva etiqueta
< li > debajo de < ul >.

00:01:05.633 --> 00:01:08.500
Cada etiqueta < ul > debe tener cuando 
menos una etiqueta < li > debajo,

00:01:08.500 --> 00:01:11.833
porque una lista sin elementos 
es muy aburrida.

00:01:11.833 --> 00:01:13.733
Ok, vamos a añadir más elementos,

00:01:13.733 --> 00:01:17.366
"Son grandes oyentes" y,

00:01:17.366 --> 00:01:21.535
"Se comen todas las zanahorias 
sobrantes"

00:01:22.146 --> 00:01:24.933
Está bien, esto debería ser una
lista bastante convincente.

00:01:24.933 --> 00:01:28.433
Yo no sé a quién no le gustaría tener un 
conejo después de leer esto.

00:01:28.433 --> 00:01:30.000
Ahora, yo no numeré esta lista

00:01:30.000 --> 00:01:31.767
porque no creo que alguna razón

00:01:31.767 --> 00:01:33.600
es más importante que otra,

00:01:33.600 --> 00:01:36.666
pero muchas veces queremos
listas numeradas.

00:01:36.666 --> 00:01:38.133
Como cuando queremos hacer 
una lista de

00:01:38.133 --> 00:01:43.133
"Los tres conejos más famosos".

00:01:44.866 --> 00:01:47.233
Así que para empezar nuestra 
lista numerada,

00:01:47.233 --> 00:01:51.166
vamos a usar una etiqueta < ol > en 
lugar de < ul >.

00:01:51.166 --> 00:01:54.633
¿Ya descubriste para qué es la etiqueta
< ol >?

00:01:54.633 --> 00:01:56.281
Aquí hay una pista, sólo revisa 
las primeras

00:01:56.281 --> 00:01:59.233
dos letras de < ul > para saber 
qué significa.

00:01:59.233 --> 00:02:02.633
Correcto, se usa para "listas ordenadas".

00:02:02.633 --> 00:02:04.566
Y esta etiqueta le dice al navegador que

00:02:04.566 --> 00:02:06.533
numere cada elemento nuevo 
automáticamente.

00:02:06.533 --> 00:02:09.500
Seguimos usando < li > para añadir 
elementos nuevos

00:02:09.500 --> 00:02:11.733
dentro de la lista.

00:02:11.733 --> 00:02:13.400
Así que pondremos "Bugs Bunny",

00:02:13.400 --> 00:02:15.866
tenemos a "Thumper",

00:02:15.866 --> 00:02:19.300
y por supuesto, no podemos olvidar el 
"Easter Bunny".

00:02:20.988 --> 00:02:22.533
Lo bueno de las listas numeradas es

00:02:22.533 --> 00:02:25.033
que el navegador se encarga de la 
numeración por nosotros.

00:02:25.033 --> 00:02:27.733
Así que si reordenamos los elementos, 
los borramos o añadimos otros,

00:02:27.733 --> 00:02:30.400
los números siempre se actualizarán 
correctamente.

00:02:30.400 --> 00:02:32.133
Como si todos ustedes me dijeran que

00:02:32.133 --> 00:02:33.800
no saben quién es "Thumper".

00:02:33.800 --> 00:02:35.933
Entonces, en primer lugar, les diría

00:02:35.933 --> 00:02:37.400
que deben ver la película de "Bambi".

00:02:37.400 --> 00:02:39.300
Pero luego de mala gana movería

00:02:39.300 --> 00:02:41.233
a "Thumper" al final de la lista.

00:02:41.233 --> 00:02:44.466
Y ahora, pobre "Thumper", es el 
número tres.

00:02:44.466 --> 00:02:47.133
Ahora tienes todo lo que necesitas para 
crear listas.

00:02:47.133 --> 00:02:50.329
Sigue adelante y haz listas de todo.