1
00:00:01,260 --> 00:00:07,000
Bueno, pues ahora vamos a ver cómo hacer una web con elementos semánticos estructurales.

2
00:00:07,059 --> 00:00:16,399
Que esto ya he dicho que es muy importante porque en HTML5 ayuda a los navegadores a saber qué contenido tiene cada una de las secciones.

3
00:00:17,019 --> 00:00:25,399
Lo que antiguamente se hacía con div, pero la evolución de HTML permite ayudar en ese procesamiento a los navegadores.

4
00:00:25,399 --> 00:00:36,240
¿Vale? Entonces, lo que voy a hacer es habilitaros aquí, esto sería el bracket, le voy a poner el navegador, ¿vale?

5
00:00:37,520 --> 00:00:43,219
Y vamos a partir un poco de la imagen que explicábamos en la lección anterior, ¿vale?

6
00:00:43,259 --> 00:00:49,320
Donde veíamos que antiguamente una estructura como la que veis se hacía con etiquetas div, ¿vale?

7
00:00:49,320 --> 00:00:54,640
donde a cada uno se le daba un ID diferente, pues tendríamos ID de cabecera, ID de barra de navegación,

8
00:00:54,780 --> 00:00:57,280
ID de contenedor, ID del pie, del lateral, ¿vale?

9
00:00:57,799 --> 00:01:06,439
Lo que pasa es que esa etiqueta TIC no está diciendo qué tipo de contenido es el que tiene realmente esa sección, ¿vale?

10
00:01:07,019 --> 00:01:09,659
Por lo tanto, eso dificultaba el procesamiento.

11
00:01:10,620 --> 00:01:12,519
¿Qué consigue HTML5?

12
00:01:12,519 --> 00:01:18,540
Pues consigue añadir algo como lo que veis en esta imagen, ¿vale?

13
00:01:18,540 --> 00:01:26,379
Es decir, etiquetas que identifican cada una de las zonas de forma independiente, ¿vale?

14
00:01:26,920 --> 00:01:36,260
Y eso, pues al final, no es más que una mejoría en cuanto al procesamiento de esa web, ¿vale?

15
00:01:37,260 --> 00:01:41,439
Entonces, es importante que eso lo entendamos, ¿vale?

16
00:01:42,040 --> 00:01:44,079
Es decir, es importante que utilizamos esta sección.

17
00:01:44,680 --> 00:01:48,799
No necesariamente una web tiene que seguir una estructura como la que estáis viendo aquí, ¿vale?

18
00:01:48,900 --> 00:01:55,640
Es decir, el pie no tiene por qué ir abajo y la cabeza arriba, todo puede ir en el mismo lado,

19
00:01:56,079 --> 00:01:59,459
la barra de navegación no tiene por qué estar arriba, sino que puede estar en un lado, ¿vale?

20
00:01:59,459 --> 00:02:08,780
Es decir, no tiene por qué ser tal y como lo veáis, pero sí que esos elementos estructurales van a definir el tipo de contenido que hay dentro, ¿vale?

21
00:02:10,400 --> 00:02:13,680
Bueno, pues vamos a hacer un pequeño ejemplo sobre esto.

22
00:02:14,080 --> 00:02:19,500
Ese ejemplo va a ser un blog, por ejemplo, de información sobre perros.

23
00:02:20,060 --> 00:02:29,099
Entonces lo que yo he hecho es que miro a Pixabay y dentro de Pixabay me he descargado imágenes de perros.

24
00:02:30,219 --> 00:02:37,800
Ya recuerdo como simplemente ponemos aquí dogs y os descargáis las imágenes de perros que os gusten.

25
00:02:37,800 --> 00:02:43,919
Yo ya las he descargado y al descargarlas las he guardado dentro de mi carpeta Images.

26
00:02:44,080 --> 00:02:47,599
¿Vale? Recuerdo que tiene que estar dentro de la carpeta IMAGEN, ¿vale?

27
00:02:47,919 --> 00:02:52,319
Así que darle al pausa al vídeo, descargaros las imágenes y luego continuamos, ¿vale?

28
00:02:54,319 --> 00:03:01,400
Entiendo que ya habéis descargado esas imágenes, entonces abro el navegador como el que veis aquí, me he creado un fichero

29
00:03:01,400 --> 00:03:06,819
y ojo que esto ya es importante porque vamos a empezar a nombrar los ficheros como se tienen que nombrar.

30
00:03:06,819 --> 00:03:16,919
El nombre de nuestra página web de inicio, de cualquier sitio web, se tiene que llamar index.html, ¿vale?

31
00:03:17,120 --> 00:03:20,740
Entonces, creáis una página web y la llamáis index.html.

32
00:03:21,259 --> 00:03:25,560
Y ahora nos vamos a nuestro navegador, ¿vale?

33
00:03:25,919 --> 00:03:33,580
Bueno, nuestro navegador, perdón, al brackets y ponemos html 2.5 y le damos al tabulador, ¿vale?

34
00:03:33,580 --> 00:03:37,740
Y nos aparece la estructura de esta página de la web, como siempre.

35
00:03:38,620 --> 00:03:41,860
En el idioma ponemos español, ¿vale?

36
00:03:42,120 --> 00:03:55,039
Y en el título, pues vamos a poner elementos semánticos estructurales en HTML, ¿vale?

37
00:03:55,500 --> 00:04:03,620
Y ahora, en el body, vamos a empezar poniendo la cabecera de nuestro sitio web, ¿vale?

38
00:04:03,620 --> 00:04:15,659
Entonces, para poner la cabecera, bueno, primero voy a indicar que aquí voy a poner la cabecera, voy a poner una etiqueta donde pongo cabecera en nuestro sitio web, ¿vale?

39
00:04:16,000 --> 00:04:24,800
Y ahora, para poner la cabecera, voy a poner la etiqueta header, ¿vale? Que identifica la cabecera, ¿vale?

40
00:04:25,120 --> 00:04:33,920
Esta etiqueta header puede estar también en otras zonas, se puede repetir varias veces, tanto para la barra de navegación como para el contenido, etcétera, etcétera.

41
00:04:33,920 --> 00:04:37,439
De hecho, durante este ejemplo la vamos a repetir varias veces, ¿vale?

42
00:04:37,800 --> 00:04:44,019
En este caso aquí, lo que voy a poner va a ser el logotipo de la web, que puede ser una imagen, o puede ser un texto, lo que sea, ¿vale?

43
00:04:44,319 --> 00:04:46,819
Y lo voy a poner con un enlace, con una etiqueta.

44
00:04:47,139 --> 00:04:50,019
Recuerden, para poner el enlace, la etiqueta A, ¿vale?

45
00:04:50,399 --> 00:04:55,699
Entonces pongo la A y voy a poner HB, ¿vale?

46
00:04:57,500 --> 00:05:01,180
Como argumento del enlace, voy a poner la almohadilla, ¿vale?

47
00:05:01,180 --> 00:05:02,759
Para que vuelva al inicio de la web.

48
00:05:02,759 --> 00:05:07,839
y cierro, voy a poner el nombre logotipo, ¿vale?

49
00:05:08,740 --> 00:05:15,180
Por lo tanto aquí sería donde aparecería ese logotipo de nuestra web, ¿vale?

50
00:05:18,009 --> 00:05:18,649
Continuamos.

51
00:05:18,730 --> 00:05:22,230
Lo siguiente que vamos a poner ahora es una barra de navegación, ¿vale?

52
00:05:23,410 --> 00:05:29,009
Insisto, esto que estoy haciendo ahora mismo lo estoy haciendo únicamente en contenido HTML.

53
00:05:29,009 --> 00:05:39,649
Cuando nosotros empezamos a añadir hojas de estilo es cuando todo esto va a tomar forma, color y estéticamente va a quedar mucho más moderno y avanzado, ¿vale?

54
00:05:40,149 --> 00:05:43,629
No penséis que esto va a ser el resultado final de una página web, ¿vale?

55
00:05:44,810 --> 00:05:49,490
Entonces, ponemos comentarios y le vamos a poner barra de navegación.

56
00:05:49,970 --> 00:05:56,660
Y la barra de navegación se pone con la etiqueta nav, ¿vale?

57
00:05:56,660 --> 00:06:13,899
Y dentro de esa etiqueta nav lo que voy a hacer es poner una lista, ¿vale? Una lista no ordenada, ¿vale? Es decir, una lista con viñetas, con símbolos, ¿vale? Recuerdo que para eso lo hacíamos con la etiqueta ul, ¿vale?

58
00:06:13,899 --> 00:06:29,100
Y ahora dentro ponemos li. Voy a poner 4 categorías, o li, 4, tabulador. No, perdón, esto era, así no era. Era li por 4 y ahora tabulador. Ahí lo veis, ¿vale?

59
00:06:29,100 --> 00:06:31,680
¿Y qué voy a poner dentro?

60
00:06:32,019 --> 00:06:32,899
Pues voy a poner

61
00:06:32,899 --> 00:06:37,120
Enlaces, ¿vale?

62
00:06:37,160 --> 00:06:39,759
Porque como esto es una barra de navegación, pues pondría enlaces

63
00:06:39,759 --> 00:06:41,480
Y lo mismo, lo que me voy a poner

64
00:06:41,480 --> 00:06:42,540
Pongo mi etiqueta A

65
00:06:42,540 --> 00:06:45,759
HR, como ahora mismo no tengo

66
00:06:45,759 --> 00:06:47,360
A dónde hacer el enlace, pues voy a poner

67
00:06:47,360 --> 00:06:50,199
La almohadilla

68
00:06:50,199 --> 00:06:52,100
¿Vale? Y dentro, pues pondría

69
00:06:52,100 --> 00:06:52,759
Inicio

70
00:06:52,759 --> 00:06:55,339
Me voy a copiar todo esto

71
00:06:55,339 --> 00:06:59,790
Pongo todo en la etiqueta A

72
00:06:59,790 --> 00:07:15,060
y me lo llevo aquí, a cada uno de los elementos, y voy a poner inicio, categorías, acerca de, y contacto, ¿vale?

73
00:07:16,899 --> 00:07:25,220
Ya, si os vais fijando, en mi página web tendría el logotipo, luego tendría mis botones de mi barra de navegación, ¿vale?

74
00:07:25,220 --> 00:07:35,980
Es decir, que ya estaríamos comparando con la estructura que estamos haciendo, ya tendríamos los dos primeros elementos, la cabecera y la barra de navegación, ¿vale?

75
00:07:37,120 --> 00:07:43,439
Ahora vamos a continuar y lo que vamos a añadir va a ser el contenido principal.

76
00:07:43,579 --> 00:07:45,540
Vamos a empezar a añadir contenido principal.

77
00:07:45,740 --> 00:07:48,100
Entonces ponemos mi comentario, ¿vale?

78
00:07:49,060 --> 00:07:50,399
Contenido principal.

79
00:07:50,399 --> 00:07:56,759
Y lo primero que vamos a poner es una cabecera, una etiqueta de cabecera, H1, ¿vale?

80
00:07:57,000 --> 00:08:03,939
Que va a ser el nombre de la web, Portal Canino, ¿vale?

81
00:08:05,680 --> 00:08:13,259
Y lo primero que vamos a hacer es añadir una sección, ¿vale?

82
00:08:13,959 --> 00:08:20,160
Dentro de esa sección vamos a tener un primer grupo de contenido, ¿vale?

83
00:08:20,160 --> 00:08:29,000
O vamos a poner, dentro de esa sección va a tener un título propio, ¿vale?

84
00:08:29,259 --> 00:08:31,079
¿Cómo ponemos ese título propio?

85
00:08:31,620 --> 00:08:35,000
Pues ponemos primero un header dentro de esa sección, ¿vale?

86
00:08:35,580 --> 00:08:38,220
Ya le hicimos que la etiqueta header se puede utilizar varias veces.

87
00:08:38,980 --> 00:08:41,340
Y ahora pondríamos una nueva etiqueta H1.

88
00:08:42,480 --> 00:08:48,620
Recuerda que podemos poner varias etiquetas H1 porque estamos poniendo secciones dentro, ¿vale?

89
00:08:48,620 --> 00:08:56,419
Entonces aquí pondríamos una etiqueta de adiestramiento, ¿vale?

90
00:08:57,480 --> 00:09:04,879
Y ahora, dentro de esa sección que es donde está el adiestramiento, vamos a poner, por ejemplo, artículos, ¿vale?

91
00:09:05,139 --> 00:09:09,519
Vamos a poner un primer artículo, ¿vale?

92
00:09:10,039 --> 00:09:16,379
Que yo pondría ahora mismo un artículo de clase vacío, ya veremos esto en la parte baja de estilo, ¿vale?

93
00:09:16,379 --> 00:09:32,620
Y el título de este artículo, que ahora sí lo pondría con una etiqueta H2, porque está dentro del adiestramiento, pondría técnicas para adiestrar a tu perro, ¿vale?

94
00:09:32,620 --> 00:09:36,480
Justo debajo me pongo un párrafo

95
00:09:36,480 --> 00:09:38,139
Donde pongo, por ejemplo

96
00:09:38,139 --> 00:09:40,580
30

97
00:09:40,580 --> 00:09:42,440
Noviembre

98
00:09:42,440 --> 00:09:43,899
2020

99
00:09:43,899 --> 00:09:46,100
Por

100
00:09:46,100 --> 00:09:48,559
Y voy a poner el nombre del autor

101
00:09:48,559 --> 00:09:49,639
Como si fuera un enlace

102
00:09:49,639 --> 00:09:54,830
De nuevo pongo almohadillas porque no estoy poniendo

103
00:09:54,830 --> 00:09:57,129
El enlace a ningún sitio ahora mismo

104
00:09:57,129 --> 00:09:58,090
Y pondría

105
00:09:58,090 --> 00:10:00,590
Fernando Martínez

106
00:10:00,590 --> 00:10:01,690
¿Vale?

107
00:10:01,690 --> 00:10:03,309
lo pondría

108
00:10:03,309 --> 00:10:05,789
y es el 1

109
00:10:05,789 --> 00:10:07,850
¿vale?

110
00:10:09,190 --> 00:10:10,169
y debajo

111
00:10:10,169 --> 00:10:11,610
me voy a poner una imagen

112
00:10:11,610 --> 00:10:13,929
para poner una imagen, recuerdo, etiqueta

113
00:10:13,929 --> 00:10:16,090
img, luego ponemos el src

114
00:10:16,090 --> 00:10:17,889
que es donde estaría ubicada

115
00:10:17,889 --> 00:10:19,690
la imagen y entre comillas

116
00:10:19,690 --> 00:10:21,889
nos vamos a la imagen

117
00:10:21,889 --> 00:10:24,009
en este caso, dentro de imágenes voy a poner

118
00:10:24,009 --> 00:10:24,850
el perro 1

119
00:10:24,850 --> 00:10:27,549
¿vale? la imagen que he descargado del perro 1

120
00:10:27,549 --> 00:10:29,809
ponemos el atributo

121
00:10:29,809 --> 00:10:31,509
alt y voy a poner

122
00:10:31,509 --> 00:10:39,559
imagen de un perro y vamos a ponerle un estilo para fijarle el tamaño, ¿vale?

123
00:10:40,460 --> 00:10:46,000
Y lo vamos a fijar el tamaño al 30%, ¿vale?

124
00:10:47,740 --> 00:10:55,440
Y justo debajo ponemos una etiqueta P con un texto Loren, un párrafo y ponemos un segundo

125
00:10:55,440 --> 00:11:02,679
párrafo también con un texto, ¿vale? De tal forma que lo que veis el resultado sería

126
00:11:02,679 --> 00:11:11,200
esto, ¿vale? Que me ha salido una imagen más enorme porque aquí no va Widows, va

127
00:11:11,200 --> 00:11:23,000
Wid, ¿vale? Ahora, ¿vale? Para fijaros que sale mi perrito, ahí chiquito, ¿vale? Ahora

128
00:11:23,000 --> 00:11:25,000
vamos a añadir otro artículo más

129
00:11:25,000 --> 00:11:27,039
¿vale? dentro de esta sección, pues ponemos

130
00:11:27,039 --> 00:11:28,080
otra etiqueta article

131
00:11:28,080 --> 00:11:31,080
¿vale? de nuevo

132
00:11:31,080 --> 00:11:32,919
dejamos la clase vacía

133
00:11:32,919 --> 00:11:35,399
¿vale?

134
00:11:36,360 --> 00:11:38,419
y ponemos una nueva etiqueta

135
00:11:38,419 --> 00:11:39,220
h2

136
00:11:39,220 --> 00:11:42,200
y ahora ponemos por ejemplo el título

137
00:11:42,200 --> 00:11:44,460
¿cuál es la mejor edad

138
00:11:44,460 --> 00:11:45,620
para adiestrar

139
00:11:45,620 --> 00:11:47,700
un perro?

140
00:11:49,220 --> 00:11:50,019
y

141
00:11:50,019 --> 00:11:51,379
de nuevo ponemos

142
00:11:51,379 --> 00:11:53,879
fecha, pues por ejemplo

143
00:11:53,879 --> 00:11:55,539
29 de noviembre

144
00:11:55,539 --> 00:11:58,820
2020

145
00:11:58,820 --> 00:12:05,649
por Fernando

146
00:12:05,649 --> 00:12:07,509
M.

147
00:12:07,889 --> 00:12:09,570
Y aquí ponemos

148
00:12:09,570 --> 00:12:10,289
hb

149
00:12:10,289 --> 00:12:13,690
para no indicar ningún enlace.

150
00:12:13,970 --> 00:12:14,129
¿Vale?

151
00:12:15,470 --> 00:12:17,009
Ponemos una nueva imagen.

152
00:12:17,690 --> 00:12:19,429
¿Vale? En este caso

153
00:12:19,429 --> 00:12:21,610
va a ser el perro 2.

154
00:12:22,529 --> 00:12:23,690
Ponemos la etiqueta

155
00:12:23,690 --> 00:12:24,549
al y ponemos

156
00:12:24,549 --> 00:12:26,509
este es otro perro.

157
00:12:27,190 --> 00:12:27,809
¿Vale?

158
00:12:29,509 --> 00:12:41,250
Recuerda que esto era en caso de que no cargara bien la imagen o para aquella gente que utiliza dispositivos que te describen las páginas web porque son invidentes, ¿vale?

159
00:12:41,750 --> 00:12:51,590
Y luego metemos el atributo style con el parámetro width al 30%, ¿vale? Para que quede la imagen chiquitita.

160
00:12:51,590 --> 00:12:58,830
Y por último hacemos lo mismo, añadimos dos párrafos, ¿vale? Contexto aleatorio.

161
00:12:59,509 --> 00:13:13,190
Y en ambos casos, como suele ocurrir en la mayoría de los blogs, vamos a añadir una última zona, que no tiene por qué estar dentro de un párrafo, ¿vale?

162
00:13:13,190 --> 00:13:19,029
Que va a ser un enlace, ahora mismo sin ningún lugar, ¿vale?

163
00:13:19,549 --> 00:13:24,250
Para leer más acerca de este artículo, ¿vale?

164
00:13:24,830 --> 00:13:28,750
Y esto, tal y como está, me lo copio al siguiente artículo.

165
00:13:32,789 --> 00:13:34,070
Así, ¿vale?

166
00:13:34,309 --> 00:13:46,990
Y veis que lo que tenemos son mito de imágenes, mito de entradas de blog, donde vemos el contenido de técnicas para adiestrar a tu perro y cuál es la mejor adictividad para adiestrar a tu perro.

167
00:13:49,509 --> 00:13:54,009
Continuamos añadiendo contenido. Vamos a añadir una sección nueva.

168
00:13:54,929 --> 00:13:56,970
Secciones podemos hacer tantas como queramos.

169
00:13:57,629 --> 00:13:58,990
Entonces le dimos una nueva sección.

170
00:14:01,809 --> 00:14:04,090
Y esta sección va a tener su propia cabecera.

171
00:14:04,090 --> 00:14:09,750
esa cabecera va a tener

172
00:14:09,750 --> 00:14:13,690
un encabezado

173
00:14:13,690 --> 00:14:15,009
de nivel 1, H1

174
00:14:15,009 --> 00:14:16,870
y lo vamos a llamar alimentación

175
00:14:16,870 --> 00:14:21,580
y dentro pues hacemos el mismo proceso

176
00:14:21,580 --> 00:14:22,679
vamos a definir

177
00:14:22,679 --> 00:14:24,000
un artículo

178
00:14:24,000 --> 00:14:27,340
artículo de clase

179
00:14:27,340 --> 00:14:28,519
vacía ahora mismo

180
00:14:28,519 --> 00:14:30,820
vale

181
00:14:30,820 --> 00:14:33,779
y dentro pues metemos una etiqueta H2

182
00:14:33,779 --> 00:14:36,080
que va a ser la importancia

183
00:14:36,080 --> 00:14:37,840
de una buena alimentación

184
00:14:37,840 --> 00:14:57,860
Vamos a poner una etiqueta P para poner la fecha, por ejemplo, 20 de noviembre de 2020, por, si volvemos a hacer el mismo protocolo, esto lo podéis copiar de las entradas anteriores si queréis, ¿vale?

185
00:14:57,860 --> 00:15:08,879
y añadimos una imagen

186
00:15:08,879 --> 00:15:11,179
el tercer perrito que habíamos descargado

187
00:15:11,179 --> 00:15:12,379
src

188
00:15:12,379 --> 00:15:14,539
centro de imágenes

189
00:15:14,539 --> 00:15:15,799
perro3

190
00:15:15,799 --> 00:15:22,970
este es el último perro

191
00:15:22,970 --> 00:15:25,929
último perrito

192
00:15:25,929 --> 00:15:28,450
y como estilo pues lo mismo

193
00:15:28,450 --> 00:15:29,350
tenemos

194
00:15:29,350 --> 00:15:32,409
al 30%

195
00:15:32,409 --> 00:15:39,450
y de nuevo

196
00:15:39,450 --> 00:15:41,529
añadimos dos párrafos

197
00:15:41,529 --> 00:15:42,850
de texto aleatorio

198
00:15:42,850 --> 00:15:45,450
que lo que podemos hacer aquí es copiarlo

199
00:15:45,450 --> 00:15:47,269
de arriba y así tardamos menos

200
00:15:47,269 --> 00:15:48,649
copiar y pegar

201
00:15:48,649 --> 00:15:50,350
sacarlo

202
00:15:50,350 --> 00:15:52,269
¿vale?

203
00:15:53,169 --> 00:15:55,490
y veis que el resultado que nos queda

204
00:15:55,490 --> 00:15:59,690
es una tercera zona

205
00:15:59,690 --> 00:16:00,149
¿vale?

206
00:16:05,639 --> 00:16:07,080
vale, ¿por qué sale?

207
00:16:07,379 --> 00:16:09,419
fijaros que alimentación sale de un tamaño diferente

208
00:16:09,419 --> 00:16:11,759
¿por qué? pues porque he metido una sección

209
00:16:11,759 --> 00:16:13,720
dentro de una sección. Eso es un error mío, ¿vale?

210
00:16:13,720 --> 00:16:15,419
Entonces me voy a llevar esta etiqueta sección

211
00:16:15,419 --> 00:16:17,700
que era de la sección anterior

212
00:16:17,700 --> 00:16:19,700
y la voy a poner después de ártico.

213
00:16:20,120 --> 00:16:20,679
¿Vale? Ahí.

214
00:16:21,620 --> 00:16:23,440
Fijaros ahora que la alimentación ha crecido

215
00:16:23,440 --> 00:16:25,279
al mismo tamaño que ahí también, ¿vale?

216
00:16:26,019 --> 00:16:27,120
Eso sí es un error también.

217
00:16:29,610 --> 00:16:29,830
Vale.

218
00:16:31,710 --> 00:16:33,169
Pues con eso, por ejemplo, ya tendríamos

219
00:16:33,169 --> 00:16:35,230
ya habríamos contemplado

220
00:16:35,230 --> 00:16:37,649
¿dónde estoy?

221
00:16:37,809 --> 00:16:39,669
Aquí. Ya habríamos contemplado

222
00:16:39,669 --> 00:16:41,570
toda esta parte, ¿vale?

223
00:16:42,009 --> 00:16:44,129
Ahora vamos a hacer la barra lateral.

224
00:16:44,549 --> 00:16:48,110
Que, insisto, esta barra lateral ahora mismo va a aparecer justo debajo, ¿vale?

225
00:16:48,129 --> 00:16:52,090
Porque no estamos personalizando nada de la ubicación de las zonas, ¿vale?

226
00:16:53,029 --> 00:16:55,789
Esto lo haremos, eso como digo, lo haremos con las hojas de estilo.

227
00:16:56,610 --> 00:17:01,570
Entonces, nos venimos y justo después de la sección, de la última etiqueta section, ¿vale?

228
00:17:02,230 --> 00:17:07,569
Vamos a poner un comentario para decir que esto va a ser la barra lateral, ¿vale?

229
00:17:07,569 --> 00:17:11,390
Y ponemos la etiqueta aside.

230
00:17:11,569 --> 00:17:32,329
¿Vale? Vamos a poner una clase vacía. Por esto ya lo completamos. ¿Vale? Y aquí, pues por ejemplo, podemos ahora poner una etiqueta de, ¿vale? Que ponga artículos recientes. ¿Vale?

231
00:17:32,329 --> 00:17:50,289
Y dentro de esos artículos recientes, pues ponemos una lista no ordenada con varios elementos, ¿vale? Por ejemplo, con 5 elementos, ¿vale? Que al final van a ser enlaces a artículos recientes que nosotros tengamos en la web, ¿vale?

232
00:17:50,289 --> 00:17:54,039
y ponemos

233
00:17:54,039 --> 00:18:01,720
y esto ahora lo copiamos y lo pegamos

234
00:18:01,720 --> 00:18:03,079
en todas las entradas

235
00:18:03,079 --> 00:18:08,910
¿vale? ok

236
00:18:08,910 --> 00:18:13,319
y por último nos quedaría

237
00:18:13,319 --> 00:18:14,960
el pie de página ¿vale?

238
00:18:15,559 --> 00:18:16,859
pues entonces ponemos aquí

239
00:18:16,859 --> 00:18:18,920
pie de página

240
00:18:18,920 --> 00:18:20,819
de la web

241
00:18:20,819 --> 00:18:23,339
añadimos

242
00:18:23,339 --> 00:18:25,099
el pie con la etiqueta

243
00:18:25,099 --> 00:18:26,599
puter ¿vale?

244
00:18:27,119 --> 00:18:28,980
y ponemos un párrafo nuevo

245
00:18:28,980 --> 00:18:30,660
vamos a poner en tamaño pequeño

246
00:18:30,660 --> 00:18:33,960
¿vale?

247
00:18:34,400 --> 00:18:42,940
Y ponemos aspersand copy, que es para que aparezca el símbolo de copyright 2020, ¿vale?

248
00:18:46,599 --> 00:18:50,220
Todos los derechos reservados, ¿vale?

249
00:18:50,759 --> 00:18:56,609
Y fijaros que no aparece abajo del todo ese, ¿vale?

250
00:18:57,990 --> 00:18:58,589
¿Ok?

251
00:18:59,309 --> 00:19:03,069
Esto sería la estructura básica de una página web.

252
00:19:03,190 --> 00:19:09,190
Y con esto daríamos por fin quitado todo lo que es la parte de HTML.

253
00:19:09,190 --> 00:19:17,069
y a partir de aquí entraremos con contenido más avanzado con contenido de hojas de estilo es decir

254
00:19:17,069 --> 00:19:23,289
cogeremos estos elementos de esta web e iremos haciendo modificaciones avanzadas sobre su estilo

255
00:19:23,289 --> 00:19:31,210
iremos añadiendo algunos efectos algunas animaciones etcétera etcétera vale bueno pues espero que

256
00:19:31,210 --> 00:19:38,509
os haya quedado claro más o menos cómo hacer contenido con páginas web y repaséis todos los videos

257
00:19:38,509 --> 00:19:39,769
que hemos ido viendo hasta ahora, ¿vale?

258
00:19:41,190 --> 00:19:42,670
Un saludo, chicos, chicas.