1
00:00:00,240 --> 00:00:04,339
Bueno, vamos a continuar con nuestro pequeño curso de HTML.

2
00:00:05,280 --> 00:00:15,900
Acordaros que el otro día, o en el otro vídeo, habíamos visto cómo poner los textos en negrita, en itálicas, o sea, en cursivas, en negrita, e itálica, etcétera, etcétera, etcétera.

3
00:00:16,460 --> 00:00:17,760
Vamos a continuar con los apuntes.

4
00:00:18,679 --> 00:00:22,620
Bueno, esta etiqueta que viene a continuación, font, actualmente no se usa.

5
00:00:23,420 --> 00:00:25,800
Los navegadores la soportan, pero actualmente no se usan.

6
00:00:25,800 --> 00:00:30,039
Si hay que cambiar el tipo de letra, usamos el CSS, las hojas de estilo.

7
00:00:30,239 --> 00:00:50,719
Pero el navegador lo soporta. Para cambiar el tamaño de la letra o el tipo de letra se usa font, que está indicando que vas a cambiar el tipo de letra, el tamaño del tipo de letra, el color y por último, esto que pone face, el último atributo, este que pone face, este indica el tipo de letra.

8
00:00:50,719 --> 00:00:58,100
Si es TinyRomance, si es Arial, si es Courier, si es Calibri, hay un montón de tipos de letra, pues este indica el tipo de letra.

9
00:00:58,399 --> 00:01:03,060
Esto actualmente no se usa en HTML directamente, lo usamos a través del CSS.

10
00:01:04,200 --> 00:01:07,120
Y luego tenemos, y esto sí se usa en muchos, las listas.

11
00:01:07,500 --> 00:01:08,799
Tenemos dos tipos de listas.

12
00:01:08,920 --> 00:01:09,859
Vamos a hacer un ejemplillo.

13
00:01:10,700 --> 00:01:11,640
Vamos a ver si está funcionando esto.

14
00:01:11,879 --> 00:01:13,299
Vamos a hacer un ejemplillo.

15
00:01:14,159 --> 00:01:16,519
Vamos a crear aquí una página.

16
00:01:16,519 --> 00:01:33,909
Va a ser página 5. Voy a borrar todo, incluso la extensión. Página 5.html. Abro página 5. La abro con mi editor favorito. La abro con mi editor favorito.

17
00:01:34,469 --> 00:01:45,260
Eso son los ensayos. Eso que veis ahí son los ensayos. Me ha abierto una página que no quería. Esta no me interesa. Vamos a ver. Aquí. Vale.

18
00:01:45,260 --> 00:02:04,500
Bueno, vamos a crear la página web. Voy a usar una plantilla que tengo aquí preparada en este editor. Ya vimos que los editores, la gran mayoría, o prácticamente todos, pueden usar plantillas.

19
00:02:04,620 --> 00:02:14,139
Plantillas que tú te creas y manejas como quieras. Yo me he creado, por ejemplo, la plantilla HTML5, que lo que hace es meterme ya directamente el código que yo le pida.

20
00:02:14,139 --> 00:02:17,219
entonces le vamos a poner un título a la página que va a ser página 5

21
00:02:17,219 --> 00:02:22,840
¿de acuerdo? y ahora en esta página 5

22
00:02:22,840 --> 00:02:24,060
bueno voy a cambiar el título

23
00:02:24,060 --> 00:02:30,340
el título extra lo voy a llamar listas

24
00:02:30,340 --> 00:02:32,960
por curiosidad, para el que quiera conocerlo

25
00:02:32,960 --> 00:02:35,460
este editor es el B

26
00:02:35,460 --> 00:02:38,080
bueno el Neo B, pero que es lo mismo

27
00:02:38,080 --> 00:02:41,259
y por ejemplo puedo ver las plantillas

28
00:02:41,259 --> 00:02:44,539
aquí está las custom, me he creado yo una plantilla

29
00:02:44,539 --> 00:02:51,840
mía propia, me he creado una plantilla propia

30
00:02:51,840 --> 00:02:54,400
y esta plantilla por ejemplo

31
00:02:54,400 --> 00:02:56,120
esto lo he escrito yo

32
00:02:56,120 --> 00:02:57,900
se pueden meter plantillas

33
00:02:57,900 --> 00:03:00,719
y aquí por ejemplo le he dicho que cuando ponga HTML5

34
00:03:00,719 --> 00:03:02,479
pues me escriba todo esto

35
00:03:02,479 --> 00:03:04,300
fijaos estos parámetros dólar

36
00:03:04,300 --> 00:03:06,259
dólar es para meter

37
00:03:06,259 --> 00:03:07,840
tú cosas

38
00:03:07,840 --> 00:03:10,360
lo que yo escriba aquí va a aparecer automáticamente

39
00:03:10,360 --> 00:03:12,360
aquí, no sé si os habéis fijado

40
00:03:12,360 --> 00:03:15,360
no sé si os habéis fijado

41
00:03:15,360 --> 00:03:18,539
que cuando yo he puesto HTML5

42
00:03:18,539 --> 00:03:20,120
yo he puesto tabulador

43
00:03:20,120 --> 00:03:23,620
lo que escribí aquí sale abajo, ¿lo veis?

44
00:03:24,840 --> 00:03:26,000
¿Lo veis lo que sucede ahí?

45
00:03:26,400 --> 00:03:29,740
Cuando yo escribo o borro, lo que escribo en un lado aparece en el otro.

46
00:03:30,340 --> 00:03:32,300
Eso es porque en mi plantilla

47
00:03:32,300 --> 00:03:35,939
le he dicho que lo que escriba aquí, en este sitio,

48
00:03:36,560 --> 00:03:40,419
lo veis aquí, aparezca también aquí.

49
00:03:40,800 --> 00:03:45,280
Y luego esto que pone $0 es donde quiero que quede la posición final del cursor.

50
00:03:45,759 --> 00:03:46,879
Yo lo que hago es que escribo aquí,

51
00:03:46,879 --> 00:03:49,639
cuando acabo

52
00:03:49,639 --> 00:03:51,960
pulso tabulador, me salta al siguiente

53
00:03:51,960 --> 00:03:53,719
dólar que haya, si hay dólar 2 salta

54
00:03:53,719 --> 00:03:55,979
al dólar 2, si hay dólar 3 salta al dólar 3

55
00:03:55,979 --> 00:03:58,560
ya sucesivamente

56
00:03:58,560 --> 00:04:00,080
y luego cuando pongo dólar 0

57
00:04:00,080 --> 00:04:01,840
está la posición final del cursor

58
00:04:01,840 --> 00:04:03,659
también le he puesto otro que es el Loren Ixson

59
00:04:03,659 --> 00:04:06,020
la plantilla, es el Loren Ixson, el típico

60
00:04:06,020 --> 00:04:09,979
Loren Ixson, que esa es para

61
00:04:09,979 --> 00:04:10,860
meter texto al azar

62
00:04:10,860 --> 00:04:12,620
si pongo Loren

63
00:04:12,620 --> 00:04:17,009
y pulso tabulador

64
00:04:17,009 --> 00:04:19,189
pues me mete

65
00:04:19,189 --> 00:04:23,290
de Loren Nixon. Bueno, voy a deshacer los cambios, o mejor dicho, voy a cepillarme

66
00:04:23,290 --> 00:04:28,930
todo esto de aquí, que no me interesa, y vamos aquí

67
00:04:28,930 --> 00:04:33,149
a nuestra página. Sigamos. Las listas.

68
00:04:33,509 --> 00:04:36,790
Bueno, sigamos. Estábamos viendo las listas. Tenemos listas no ordenadas.

69
00:04:36,870 --> 00:04:40,209
Las listas no ordenadas, pongo ul

70
00:04:40,209 --> 00:04:45,069
y ya estoy diciéndole al navegador que voy a meter una lista no ordenada. Cuando pongo

71
00:04:45,069 --> 00:04:48,649
li, le estoy diciendo que estoy introduciendo un elemento de la lista.

72
00:04:48,649 --> 00:05:16,509
Por ejemplo, voy a hacer la lista de la compra, voy a comprar pan, leche, pescado, ¿de acuerdo? Aquí le he metido una lista. Si yo voy y abro mi página web, no habéis caso de eso, que eran los ensayos, bueno, pues tengo aquí mi lista de la compra.

73
00:05:16,509 --> 00:05:17,930
pan, leche, pescado

74
00:05:17,930 --> 00:05:21,050
¿puedo meter una lista dentro de la lista?

75
00:05:21,189 --> 00:05:22,870
por supuesto que puedo meter una lista

76
00:05:22,870 --> 00:05:23,649
dentro de una lista

77
00:05:23,649 --> 00:05:26,009
pongo aquí dos puntos

78
00:05:26,009 --> 00:05:27,750
QL

79
00:05:27,750 --> 00:05:31,110
Li, pescado, pues tengo las sardinas

80
00:05:31,110 --> 00:05:35,939
tengo

81
00:05:35,939 --> 00:05:38,240
truchas

82
00:05:38,240 --> 00:05:42,550
ahí se me ha olvidado el marisco

83
00:05:42,550 --> 00:05:44,350
que es importante el marisco

84
00:05:44,350 --> 00:05:48,930
¿de acuerdo? pues voy haciendo como mi lista de la compra

85
00:05:48,930 --> 00:05:51,629
si voy al navegador

86
00:05:51,629 --> 00:05:54,269
veis que dentro del pescado

87
00:05:54,269 --> 00:05:56,290
he metido una lista dentro de la lista.

88
00:05:57,110 --> 00:05:58,529
Fijaos que ha cambiado el simbolito, ¿no?

89
00:05:58,670 --> 00:05:59,470
Que aquí pone un...

90
00:05:59,470 --> 00:06:01,089
Ha cambiado el simbolito.

91
00:06:01,149 --> 00:06:04,410
Aquí pone un círculo negrito

92
00:06:04,410 --> 00:06:06,949
y aquí pone un círculo así en blanco, ¿no?

93
00:06:07,889 --> 00:06:10,709
Que sepáis que se pueden meter listas dentro de listas.

94
00:06:11,170 --> 00:06:13,610
O sea, no hay problema ninguno en meter una lista dentro de una lista.

95
00:06:14,350 --> 00:06:15,110
Por ejemplo,

96
00:06:16,829 --> 00:06:17,970
aquí el marisco.

97
00:06:18,569 --> 00:06:21,629
Pues puedo meter otra lista más, perdón,

98
00:06:21,709 --> 00:06:23,449
puedo meter otra lista más dentro de una lista.

99
00:06:23,449 --> 00:06:27,250
O sea, puedo meter tantas listas como quiera, unas dentro de otras.

100
00:06:28,550 --> 00:06:33,870
ul, li, y dentro del marisco pues tengo las gambas, ¿no?

101
00:06:37,259 --> 00:06:48,470
¿Qué más? Pues los mejillones, ¿de acuerdo? Pues hay todo el marisco que quieras meter.

102
00:06:50,670 --> 00:06:58,750
Si os fijáis, cuando me vaya mi ejemplo de página web, veis que dentro del marisco me ha metido otra lista.

103
00:06:58,750 --> 00:07:01,110
O sea, puedo meter una lista dentro de una lista dentro de una lista.

104
00:07:01,290 --> 00:07:02,870
Podría continuar con mi lista original.

105
00:07:03,009 --> 00:07:08,959
Fijaros que mi lista original empieza aquí arriba y acaba aquí.

106
00:07:10,579 --> 00:07:13,420
Y esta lista va de aquí hasta aquí.

107
00:07:13,779 --> 00:07:14,019
¿De acuerdo?

108
00:07:14,379 --> 00:07:18,300
Mi lista original, este sería el último elemento que he metido.

109
00:07:18,600 --> 00:07:19,779
Pues puedo meter más elementos.

110
00:07:20,519 --> 00:07:21,319
Voy a buscar carne.

111
00:07:22,860 --> 00:07:25,180
Es la lista de la compra que estoy haciendo.

112
00:07:25,740 --> 00:07:27,600
Cuando recargo, veis que ha añadido la carne.

113
00:07:28,199 --> 00:07:29,839
Esto es una lista no ordenada.

114
00:07:30,240 --> 00:07:31,620
¿Existen más tipos de lista?

115
00:07:32,579 --> 00:07:33,279
Pues sí.

116
00:07:33,579 --> 00:07:36,899
Aparte de la lista ordenada, tengo la lista que se llama no ordenada.

117
00:07:37,579 --> 00:07:38,500
Perdón, la lista.

118
00:07:38,680 --> 00:07:40,839
He hecho la lista no ordenada, la que acabo de hacer.

119
00:07:41,139 --> 00:07:42,660
Tengo la lista ordenada.

120
00:07:42,819 --> 00:07:46,899
En la lista ordenada puedo enumerar los elementos de la lista.

121
00:07:47,259 --> 00:07:50,519
O sea, en lugar de poner puntitos, voy a poner 1, 2, 3, 4.

122
00:07:51,699 --> 00:07:52,740
Nos vamos aquí.

123
00:07:54,300 --> 00:07:56,879
Pongo 1, o L.

124
00:07:58,660 --> 00:08:00,160
O L es para lista ordenada.

125
00:08:00,160 --> 00:08:04,100
ul para lista no ordenada, ul para lista ordenada

126
00:08:04,100 --> 00:08:08,439
order list, y esto es un order list

127
00:08:08,439 --> 00:08:11,379
un order list, order list, ¿de acuerdo?

128
00:08:11,740 --> 00:08:15,060
order list, un order list, sería el memo técnico de esto

129
00:08:15,060 --> 00:08:18,959
bueno, pues meto el elemento de la lista, pues puede ser primer elemento

130
00:08:18,959 --> 00:08:25,060
segundo elemento

131
00:08:25,060 --> 00:08:34,110
y puedo meter el tercer elemento

132
00:08:34,110 --> 00:08:38,940
ahí lo tengo

133
00:08:38,940 --> 00:08:42,559
tengo mi lista ordenada

134
00:08:42,559 --> 00:08:44,580
donde he puesto los elementos

135
00:08:44,580 --> 00:08:46,639
primer elemento, segundo elemento, tercer elemento

136
00:08:46,639 --> 00:08:48,779
fijaos que voy como intentando

137
00:08:48,779 --> 00:08:50,659
esto se llama intentar, o sangrar el código

138
00:08:50,659 --> 00:08:52,620
fijaos que aquí he dejado unos espacios

139
00:08:52,620 --> 00:08:53,080
en blanco

140
00:08:53,080 --> 00:08:56,679
para indicar que este li va dentro

141
00:08:56,679 --> 00:08:58,820
del ol, he dejado más espacios en blanco

142
00:08:58,820 --> 00:08:59,240
¿lo veis?

143
00:09:00,700 --> 00:09:02,500
muchos editores te lo hacen automáticamente

144
00:09:02,500 --> 00:09:03,879
pero si no lo hace automáticamente

145
00:09:03,879 --> 00:09:05,779
se lo tienes que poner tú

146
00:09:05,779 --> 00:09:07,960
¿veis que ha metido como espacios en blanco?

147
00:09:07,960 --> 00:09:11,460
se puede meter como espacios en blanco

148
00:09:11,460 --> 00:09:14,899
para indicar que un elemento está metido

149
00:09:14,899 --> 00:09:18,940
dentro de otro. De hecho hay lenguajes de programación como el Python que es obligatorio

150
00:09:18,940 --> 00:09:23,080
meter los espacios en blanco. Esto se llama

151
00:09:23,080 --> 00:09:26,559
intentar. Y es muy importante intentar bien el código para que sea legible.

152
00:09:27,240 --> 00:09:30,980
Luego puede ser que en algún sitio te machaquen

153
00:09:30,980 --> 00:09:33,220
mucho porque no intentas bien el código.

154
00:09:34,519 --> 00:09:37,299
Bien, pues ya tenemos nuestra lista.

155
00:09:37,960 --> 00:09:43,360
Si la recargamos, vais a ver que aparece primero, segundo, tercero.

156
00:09:44,379 --> 00:09:47,080
Hay más cosas. Puedo cambiar el tipo de la lista.

157
00:09:47,240 --> 00:09:49,039
Vamos a volver aquí a los apuntes.

158
00:09:49,299 --> 00:09:50,639
¿Veis que pone aquí el atributo type?

159
00:09:51,080 --> 00:09:54,340
Bueno, tengo el atributo circle, this y square.

160
00:09:55,279 --> 00:09:57,059
Para las listas sin ordenar.

161
00:09:57,120 --> 00:09:58,200
Voy a una lista sin ordenar.

162
00:09:58,919 --> 00:10:00,159
Por ejemplo, la primera.

163
00:10:04,350 --> 00:10:04,610
Aquí.

164
00:10:05,169 --> 00:10:05,970
Y pongo type.

165
00:10:07,450 --> 00:10:08,629
Vamos a poner square.

166
00:10:09,029 --> 00:10:13,259
¿De acuerdo? Type square.

167
00:10:15,480 --> 00:10:19,360
Fijaos que en la lista eran circulitos y la he cambiado.

168
00:10:19,500 --> 00:10:20,620
¿Veis que ha cambiado cuadraditos?

169
00:10:21,519 --> 00:10:21,879
¿Lo veis?

170
00:10:22,299 --> 00:10:23,320
Que ha cambiado cuadraditos.

171
00:10:24,440 --> 00:10:24,580
¿Vale?

172
00:10:25,080 --> 00:10:26,779
Con type cambio el tipo de la lista.

173
00:10:26,919 --> 00:10:28,940
Tengo circle, dix y square.

174
00:10:29,259 --> 00:10:30,919
En las numeradas también puedo cambiar el tipo.

175
00:10:31,080 --> 00:10:31,940
Y aquí es más divertido.

176
00:10:32,600 --> 00:10:33,179
Tengo el type.

177
00:10:33,679 --> 00:10:34,259
Se pone type.

178
00:10:35,340 --> 00:10:36,320
Me voy a mi lista ordenada.

179
00:10:36,779 --> 00:10:37,440
Pongo aquí type.

180
00:10:38,240 --> 00:10:40,059
Bueno, por defecto habéis visto que ha puesto 1, 2, 3.

181
00:10:40,259 --> 00:10:42,559
Si pongo una a,

182
00:10:45,029 --> 00:10:45,809
si pongo una a,

183
00:10:45,809 --> 00:10:49,929
Fijaos, pone 1, 2, 3. Si le doy a recargar, ponéis A, B, C.

184
00:10:51,470 --> 00:10:55,330
Aquí pone lo que podéis poner. Si ponéis un 1, va a poner 1, 2, 3, 4.

185
00:10:55,450 --> 00:10:59,990
Si ponéis una mayúscula, A, B, C, D, E en mayúsculas.

186
00:11:00,070 --> 00:11:05,429
Si ponéis una A minúscula, A, B, C, D con minúsculas.

187
00:11:06,289 --> 00:11:11,210
Y si ponéis una I minúscula o una I mayúscula, lo pone en números romanos.

188
00:11:11,269 --> 00:11:16,850
Voy a poner una I minúscula y vais a ver que lo pone en números romanos.

189
00:11:19,639 --> 00:11:21,159
Ahí lo tenéis, en números romanos. ¿Lo veis?

190
00:11:21,539 --> 00:11:25,320
Si ponéis en I mayúscula, pues lo ponéis en romanos en mayúscula.

191
00:11:25,600 --> 00:11:28,480
Hay otro atributo que es interesante, que es estar.

192
00:11:29,279 --> 00:11:33,580
El atributo estar te dice hasta dónde, por qué elemento quieres que empiece la lista.

193
00:11:33,919 --> 00:11:34,720
Aquí ha empezado por 1.

194
00:11:35,120 --> 00:11:36,639
Véis que empieza por el 1 en números romanos.

195
00:11:37,159 --> 00:11:43,240
Pero si le pongo estar y le digo que empiece por el 3,

196
00:11:46,539 --> 00:11:49,899
atención, voy a recargar, fijaos que este es el 1,

197
00:11:49,899 --> 00:11:55,740
pues cuando doy a recargar, se ha convertido en 3, 4, 5 en números romanos.

198
00:11:56,460 --> 00:11:56,899
¿Vale?

199
00:11:57,100 --> 00:12:02,019
O sea, el start sirve para donde, a partir de qué número, puedo empezar la lista.

200
00:12:02,440 --> 00:12:03,240
O quiero empezar la lista.

201
00:12:03,620 --> 00:12:04,960
Y luego también tengo el orden.

202
00:12:05,299 --> 00:12:07,080
Este que pone...

203
00:12:07,080 --> 00:12:12,580
Si pones reverse set, se añade esta cosa aquí, reverse set, cambia el orden.

204
00:12:13,139 --> 00:12:14,360
3, 2, 1.

205
00:12:15,179 --> 00:12:15,580
¿De acuerdo?

206
00:12:16,539 --> 00:12:20,980
Hay otra lista que no se suele usar mucho, porque actualmente lo usamos todos con div,

207
00:12:21,759 --> 00:12:22,440
que es menú.

208
00:12:22,440 --> 00:12:32,039
que menú cuando pones menú es una lista igual y en css le puedes convertir en un menú habitualmente

209
00:12:32,039 --> 00:12:38,000
vamos a usar un 10 y un link no nos vamos a complicar tanto si veis la mayoría de páginas

210
00:12:38,000 --> 00:12:43,139
web esto no lo suelen usar otra cosa que tenéis que conocer aunque tampoco se usa mucho la lista

211
00:12:43,139 --> 00:12:49,860
de definir de definiciones que se mete con dl es para meter definiciones de palabras por ejemplo

212
00:12:49,860 --> 00:12:57,279
Quieres definir patata y cebolla, ¿no? Pues pones DL, DL, entre DT, entre DT.

213
00:12:58,299 --> 00:13:01,899
Pones aquí, bueno, donde pone término 1 pondrías la palabra que quieres definir, cebolla.

214
00:13:02,200 --> 00:13:06,620
Y pondrías aquí DD, pues hortaliza, que crece, etcétera, etcétera, etcétera.

215
00:13:06,799 --> 00:13:07,700
Lo pones aquí en el DD.

216
00:13:09,480 --> 00:13:14,139
Patata, quieres definir patata, por donde pone término 2 pones aquí patata, los DT,

217
00:13:14,500 --> 00:13:19,679
y aquí viene la definición de patata, pues es un tubérculo que crece, etcétera, etcétera, etcétera.

218
00:13:20,740 --> 00:13:21,340
¿De acuerdo?

219
00:13:21,899 --> 00:13:24,480
Vais a ver que no se usa mucho, pero que sepáis que existe.

220
00:13:27,019 --> 00:13:29,139
Bueno, los hiperlaces ya lo hemos visto.

221
00:13:29,740 --> 00:13:32,659
Voy a cortar aquí el vídeo y vamos a continuar con las imágenes.