1
00:00:00,620 --> 00:00:18,120
Bueno, ahora vamos a explicar cómo se hace la lista en HTML, ¿vale? Las listas son muy importantes porque sirven para ordenar contenido, para explicar cosas o para dar una numeración o una lista ordenada con números, con letras o simplemente una lista con viñetas que pueden ser un carácter, un símbolo, ¿vale?

2
00:00:18,120 --> 00:00:40,159
Entonces, nos vamos a ir a nuestro editor, al brackets, ¿vale? Vamos a seguir el procedimiento que seguimos siempre, que es crear la base del documento, que para eso hacíamos HTML 2.5, y le damos al tabulador, tecla de la izquierda de la Q, y nos aparece todo esto, ¿vale?

3
00:00:40,159 --> 00:00:56,659
Entonces cambiamos el idioma, lo ponemos en castellano y aquí pondremos listas en HTML, ¿vale? Ya veis que se cambia también aquí en la ventana del navegador y ahora en el body empezamos poniendo una etiqueta H1, ¿vale?

4
00:00:56,659 --> 00:01:04,560
Y va a ser creación y definición de listas en HTML, ¿vale?

5
00:01:05,140 --> 00:01:10,959
Entonces, vamos a imaginarnos que yo quiero hacer unas listas para una receta de un bizcocho, ¿vale?

6
00:01:10,980 --> 00:01:18,859
Entonces yo me pondría mi etiqueta H2 y diría, en primer lugar, ingredientes del bizcocho.

7
00:01:20,959 --> 00:01:22,799
Y empezaría a crear mi lista.

8
00:01:23,140 --> 00:01:24,120
¿Cómo creo mi lista?

9
00:01:24,359 --> 00:01:27,420
Pues en primer lugar, esto va a ser una lista no ordenada, ¿vale?

10
00:01:27,420 --> 00:01:47,379
Como va a ser una lista no ordenada, que simplemente va a tener puntos, lo ponemos con la tecla, con la etiqueta UL, de Unordered List, ¿vale? UL. Cierro, ¿vale? Y ahora dentro, cada elemento que yo quiera que pertenezca a esa lista, lo haremos con LI, ¿vale? Tal y como veis ahí.

11
00:01:47,379 --> 00:01:56,760
Nosotros pondremos tantos elementos LI como queramos que haya en nuestro trabajo, ¿vale?

12
00:01:57,379 --> 00:02:03,439
Entonces, yo por ejemplo, aquí pondría, pues primero pondría 3 huevos, ¿vale?

13
00:02:05,439 --> 00:02:10,219
Luego pondría 200 gramos de harina.

14
00:02:10,219 --> 00:02:18,020
Pondría 100 gramos de azúcar de caña

15
00:02:18,020 --> 00:02:23,270
Pondría un sobre de levadura

16
00:02:23,270 --> 00:02:32,479
3 ralladuras de limón

17
00:02:32,479 --> 00:02:47,680
Y 2 cucharadas de aceite de oliva

18
00:02:47,680 --> 00:02:50,000
¿Vale?

19
00:02:50,000 --> 00:03:12,680
¿Vale? Eso en cuanto a lo que estábamos hablando de, lo diré, de lista no ordenada, ¿vale? Lista unordered list, ¿vale? Nosotros dentro de estas listas siempre podremos hacer lo que se llaman listas anidadas, ¿vale?

20
00:03:12,680 --> 00:03:33,979
Es decir, que nosotros, por ejemplo, si yo quisiera decir que los 200 gramos de harina, 100 son de un tipo y 100 de otro, pues yo aquí me crearía otra lista no ordenada y dentro pondría elementos, por ejemplo, 100 gramos de harina de trigo y 100 gramos de harina de avena, ¿vale?

21
00:03:33,979 --> 00:03:43,340
Y entonces fijaros que él directamente me marca el margen y me cambia el tipo de símbolo que va a utilizar en este caso, ¿vale?

22
00:03:43,680 --> 00:03:50,419
Lo cual, pues, puede ser bastante útil porque nos permite a nosotros jugar con eso, ¿vale?

23
00:03:52,240 --> 00:04:02,360
Entonces, vamos a imaginarnos que ahora lo que queremos hacer es una lista numérica en la que se diga la receta, pasos de la receta, ¿vale?

24
00:04:02,360 --> 00:04:16,420
Y nos creamos una lista ordenada, para este caso va a ser la etiqueta OL de order list, ¿vale? Y ahora nos creamos los elementos y vamos a ver aquí una ventaja de la extensión

25
00:04:16,420 --> 00:04:21,360
que nos permite crear elementos de una forma más rápida, ¿vale?

26
00:04:21,540 --> 00:04:25,819
Si yo pongo li y pongo, por ejemplo, 5 y le doy al tabulador, ¿vale?

27
00:04:26,860 --> 00:04:30,399
Fijaros que él directamente me crea los 5 elementos, ¿vale?

28
00:04:30,720 --> 00:04:37,560
Y así, pues, quieras que no, pues vamos un poquito más rápido a lo que es la hora de escribir con el código, ¿vale?

29
00:04:37,560 --> 00:04:45,560
Entonces yo aquí pondría tamizar la harina, mezclar huevos con la harina,

30
00:04:46,420 --> 00:04:57,600
Añadir la levadura, añadir el aceite y el azúcar.

31
00:04:57,600 --> 00:05:08,040
Y por último, hornear a 200 grados durante 20 minutos.

32
00:05:08,399 --> 00:05:08,920
¿Vale?

33
00:05:10,079 --> 00:05:16,860
Ahora, más cosas importantes que tenemos que saber, sobre todo para la lista ordenada.

34
00:05:16,860 --> 00:05:19,620
yo me creo aquí una nueva lista ordenada

35
00:05:19,620 --> 00:05:21,720
y si yo me creo

36
00:05:21,720 --> 00:05:23,420
los elementos, me los voy a crear como antes

37
00:05:23,420 --> 00:05:25,759
li3 por ejemplo, 3 elementos

38
00:05:25,759 --> 00:05:27,779
perdón, si no se crea

39
00:05:27,779 --> 00:05:31,829
li por

40
00:05:31,829 --> 00:05:33,269
3, ahí, vale

41
00:05:33,269 --> 00:05:35,009
y pongo por ejemplo

42
00:05:35,009 --> 00:05:36,810
perro

43
00:05:36,810 --> 00:05:38,790
gato

44
00:05:38,790 --> 00:05:40,569
y pájaro

45
00:05:40,569 --> 00:05:42,050
vale

46
00:05:42,050 --> 00:05:45,670
fijaros que me aparece número 1, número 2

47
00:05:45,670 --> 00:05:47,850
y el 3, que sería el gato, el pájaro

48
00:05:47,850 --> 00:06:03,170
Entonces yo puedo cambiar el tipo de numeración, es decir, que en vez de utilizarme números me utilice letras. ¿Cómo hacemos eso? Pues ponemos el atributo type. Fijaros que cuando le doy al enter brackets ya me da las opciones que puedo seguir.

49
00:06:03,170 --> 00:06:10,870
O los números normales, o letras mayúsculas, o letras romanas mayúsculas, o letras minúsculas, o letras romanas minúsculas, ¿vale?

50
00:06:10,990 --> 00:06:13,629
Si yo elijo A, pues fijaros, me sale eso.

51
00:06:14,829 --> 00:06:25,209
Yo también puedo cambiar el punto desde el que comienzo. En vez de comenzar en el 1, que en letras sería el A, puedo decirle, por ejemplo, que me comience en el número 3, ¿vale?

52
00:06:25,629 --> 00:06:29,230
Entonces fijaros que ahora me empieza en la letra C, ¿vale?

53
00:06:29,230 --> 00:06:35,410
¿Vale? Eso en cuanto a listas ordenadas y listas no ordenadas.

54
00:06:35,490 --> 00:06:42,110
Luego tenemos otro tipo de listas especiales que son listas descriptivas, que son cuando nosotros queremos hacer una descripción de algo, ¿vale?

55
00:06:42,649 --> 00:06:49,310
Por ejemplo, vamos a imaginarnos que queremos hacer una descripción, ¿vale? Ponemos la etiqueta para poner listas descriptivas en la DL, ¿vale?

56
00:06:49,689 --> 00:06:56,189
Entonces, yo la pongo aquí y ahora pongo los diferentes elementos que quiero describir.

57
00:06:56,189 --> 00:07:07,189
En primer lugar, DT, ¿vale? Y aquí pondría, por ejemplo, pues yo qué sé, el perro, ¿vale?

58
00:07:07,769 --> 00:07:14,089
Y ahora, si yo quiero hablar de la descripción del perro, pondría, la descripción la haría con la etiqueta DD, ¿vale?

59
00:07:14,290 --> 00:07:22,490
Y pondría, animal de compañía, muy cariñoso y fiel, ¿vale?

60
00:07:22,490 --> 00:07:42,430
Ahora de la misma forma podría describir el gato, ¿vale? Gato, pongo etiqueta de T y pongo una etiqueta de D para hacer la descripción. Animal de compañía, poco cariñoso y poco fiel, ¿vale?

61
00:07:42,430 --> 00:08:05,220
Y por último, bueno, y ya así seguiríamos todos, ¿vale? Fijaros que lo que esto produce es que la descripción aparece con un poco de sangría, ¿vale? Entonces, tendríamos nuestro perro como elemento a describir, el gato como elemento a describir y luego las descripciones, ¿vale?

62
00:08:06,839 --> 00:08:14,620
Bueno, pues eso es todo en cuanto a lista, espero que haya sido útil, que os haya quedado claro y que la utilicéis, ¿vale? Seguimos.