1
00:00:00,620 --> 00:00:05,080
Bueno, teníamos el objetivo de crear una barra de navegación.

2
00:00:06,480 --> 00:00:13,240
Lo primero que tenemos que conocer antes de hacer esto son cómo se hacen enlaces de una página web a otra.

3
00:00:13,359 --> 00:00:16,199
Para eso necesitamos una segunda página web.

4
00:00:17,100 --> 00:00:21,559
Pues nada, me voy aquí a mi página y voy a crear una segunda página web.

5
00:00:22,980 --> 00:00:27,160
Vamos a llamarla página2.html.

6
00:00:27,160 --> 00:00:30,260
Y le quito esto de la extensión txt

7
00:00:30,260 --> 00:00:32,420
Porque si no, se va a liar

8
00:00:32,420 --> 00:00:34,100
Y ahora la abrimos

9
00:00:34,100 --> 00:00:37,380
Podéis abrir con el editor que preferáis

10
00:00:37,380 --> 00:00:38,799
De Visual Studio Code

11
00:00:38,799 --> 00:00:40,039
Aquí lo estoy abriendo con el Kate

12
00:00:40,039 --> 00:00:41,039
Porque lo tengo a mano

13
00:00:41,039 --> 00:00:44,039
Me he equivocado de botón

14
00:00:44,039 --> 00:00:45,719
Aquí, bueno, pues aquí lo tenemos

15
00:00:45,719 --> 00:00:47,859
De momento, la página está vacía

16
00:00:47,859 --> 00:00:49,179
Vamos a volver a escribirla

17
00:00:49,179 --> 00:00:51,719
Acordaros que todo documento tiene que empezar por esto

18
00:00:51,719 --> 00:00:54,179
.type html

19
00:00:54,179 --> 00:00:57,619
todo documento empieza por HTML

20
00:00:57,619 --> 00:00:59,000
y acaba

21
00:00:59,000 --> 00:01:01,600
en HTML, o sea, tengo que abrir

22
00:01:01,600 --> 00:01:02,719
y cerrar la etiqueta

23
00:01:02,719 --> 00:01:05,579
todo documento tiene que tener

24
00:01:05,579 --> 00:01:06,540
una cabecera

25
00:01:06,540 --> 00:01:09,180
que se indica con el head

26
00:01:09,180 --> 00:01:11,760
dentro del head tendré que tener

27
00:01:11,760 --> 00:01:13,760
al menos la codificación

28
00:01:13,760 --> 00:01:19,459
el charset

29
00:01:19,459 --> 00:01:25,180
le voy a poner un título

30
00:01:25,180 --> 00:01:30,219
le vamos a poner

31
00:01:30,219 --> 00:01:31,599
de título

32
00:01:31,599 --> 00:01:35,239
página 2, ya tengo la página 2

33
00:01:35,239 --> 00:01:42,450
toda página web tiene que tener un cuerpo, ahí lo tenemos

34
00:01:42,450 --> 00:01:45,109
el cuerpo creado, ¿vale? y voy a decir

35
00:01:45,109 --> 00:01:52,189
o voy a crear una simple página que va a ser, bueno este

36
00:01:52,189 --> 00:01:56,430
el p servía para poner párrafos, aquí voy a poner, esto es la página 2

37
00:01:56,430 --> 00:02:05,670
y lo guardo, ¿de acuerdo? entonces quiero enlazar

38
00:02:05,670 --> 00:02:10,090
desde la página 1 a la página 2, ¿cómo lo voy a hacer?

39
00:02:10,490 --> 00:02:15,080
pues muy fácil, aquí en lo que va a ser mi futura

40
00:02:15,080 --> 00:02:21,159
barra de navegación, o que pueden poner los enlaces donde quiera, tengo que usar la etiqueta A,

41
00:02:21,879 --> 00:02:34,849
que se usa de una forma muy curiosa. De momento voy a poner esto. Bueno, tiene que empezar por A

42
00:02:34,849 --> 00:02:43,969
y tengo que cerrar la etiqueta, como veis aquí. Bueno, este es el texto que me va a aparecer para

43
00:02:43,969 --> 00:02:49,770
que yo pueda hacer clic en él y aquí tengo que poner la dirección a donde quiero yo enlazar,

44
00:02:49,770 --> 00:03:17,520
Como quiero enlazar a la página 2.html y el archivo está en el mismo sitio, aquí tengo el archivo página 2, pues pongo página 2.html, lo guardo y voy a abrir mi página 1, voy a abrir mi página 1, abro página 1, ahí está y veis aquí el enlace, aquí pone el enlace a página 2.

45
00:03:18,280 --> 00:03:23,979
Si le hago clic, bueno, veis que cuando pongo el enlace, la parte de abajo de la página web me dice hacia dónde voy a enlazar.

46
00:03:24,460 --> 00:03:27,039
Y cuando hago clic, voy a la página 2.

47
00:03:28,719 --> 00:03:32,539
¿Podría meter un enlace desde la página 2 a la página 1? También.

48
00:03:32,539 --> 00:03:46,639
Muy fácil. Me voy a la página 2 y esto sería a href página1.html barra, aquí pongo el nombre del enlace,

49
00:03:46,639 --> 00:03:52,439
Pues volver a la página 1

50
00:03:52,439 --> 00:03:56,000
Cierro la etiqueta

51
00:03:56,000 --> 00:03:59,000
Y ya estaría, me voy aquí a la página 2

52
00:03:59,000 --> 00:04:02,530
Aquí tengo la página 2 ya

53
00:04:02,530 --> 00:04:06,069
Tengo ya el enlace de volver a la página 1

54
00:04:06,069 --> 00:04:08,349
Cuando le doy, pues vuelvo a la página 1

55
00:04:08,349 --> 00:04:11,430
Puedo meter aquí más enlaces

56
00:04:11,430 --> 00:04:13,710
Fijaros, puedo ir aquí a la carpeta

57
00:04:13,710 --> 00:04:14,449
Y crear

58
00:04:14,449 --> 00:04:18,329
que está la carpeta donde tengo las páginas,

59
00:04:18,449 --> 00:04:19,750
puedo crear una nueva carpeta.

60
00:04:19,870 --> 00:04:21,269
Carpeta que voy a llamar

61
00:04:21,269 --> 00:04:24,069
Páginas.

62
00:04:24,269 --> 00:04:25,769
La carpeta Páginas.

63
00:04:26,470 --> 00:04:27,629
Ya vi que voy a crear

64
00:04:27,629 --> 00:04:30,629
mejor dicho, voy a copiar

65
00:04:30,629 --> 00:04:32,629
espera, esto se me ha abierto aquí una cosa que yo no quería.

66
00:04:33,629 --> 00:04:33,769
Bueno.

67
00:04:34,790 --> 00:04:36,870
Voy a copiar este Página 2

68
00:04:36,870 --> 00:04:39,290
y lo voy a meter aquí dentro.

69
00:04:41,240 --> 00:04:42,139
Voy a cambiarle el nombre.

70
00:04:44,439 --> 00:04:45,740
Le voy a llamar Página 3.

71
00:04:45,740 --> 00:04:59,939
y ahora lo voy a editar, lo voy a editar, va a ser página 3, esto es la página 3 y ahora empieza la fiesta.

72
00:05:00,519 --> 00:05:09,399
El enlace este, fijaros, yo quiero un enlace que vuelva a la página 1, si lo dejo tal cual lo tengo aquí, esto va a fallar.

73
00:05:09,399 --> 00:05:24,860
Si abro aquí, si abro aquí esta página, la página 3, la abro, veis que aquí está la página 3 que está dentro de la carpeta páginas, fijaros que está en una carpeta distinta.

74
00:05:26,339 --> 00:05:36,579
Vamos a ver si lo veis, aquí se ve muy bien la estructura, veis, tengo la carpeta páginas y aquí la página 3 y luego fuera de la carpeta páginas está página 1 y página 2.

75
00:05:37,199 --> 00:05:43,339
Fijaros que yo quiero hacer referencia desde esta página de aquí a esta página de aquí, ¿de acuerdo?

76
00:05:43,420 --> 00:05:46,220
Quiero hacer referencia desde página 3 a página 1.

77
00:05:46,540 --> 00:05:49,399
Si lo dejo como está, ¿de acuerdo?

78
00:05:49,579 --> 00:05:53,579
Si lo dejo como está, vais a ver que se produce un error.

79
00:05:54,259 --> 00:05:58,759
Está la página 3 y cuando le doy clic me dice que archivo no he encontrado.

80
00:05:58,879 --> 00:05:59,120
¿Por qué?

81
00:05:59,120 --> 00:06:02,779
Porque estoy buscando página 1 dentro de la carpeta páginas.

82
00:06:03,399 --> 00:06:03,920
¿Ves?

83
00:06:03,920 --> 00:06:10,680
Está buscando página 1 aquí dentro y aquí no hay ningún archivo que se llame página 1, ¿de acuerdo?

84
00:06:10,819 --> 00:06:13,000
Página 1 está un nivel por encima.

85
00:06:13,560 --> 00:06:24,269
Entonces, para indicar un nivel por encima se usa punto, punto, punto, punto, página 1, punto, punto, barra, página 1.

86
00:06:24,370 --> 00:06:29,670
Esto quiere decir que voy a buscar, voy a bajar, punto, punto, significa bajar una carpeta hacia abajo,

87
00:06:29,670 --> 00:06:36,649
bajar una carpeta hacia abajo y dentro de esa carpeta buscar página 1.

88
00:06:36,649 --> 00:06:55,089
Con lo cual ya sé que lo voy a encontrar. Si estoy en páginas, este es página 3, va a bajar una carpeta hacia abajo y va a buscar páginas. O sea, va a localizar este. Si pruebo ahora a cargar página 3, le doy para atrás, cargo página 3 de nuevo, le doy aquí a recargar, doy volver a la página 1 y ya vuelve a la página 1.

89
00:06:55,089 --> 00:07:00,970
Vamos a meter un enlace a la página 3 aquí, en esta página principal que estamos haciendo.

90
00:07:01,829 --> 00:07:08,370
Vuelvo aquí a mi página 1, de acuerdo, aquí en la barra de navegación voy a meter otro enlace.

91
00:07:08,370 --> 00:07:21,769
Voy a poner a href igual página 3.html. Esto va a fallar.

92
00:07:21,769 --> 00:07:43,560
Esto, si lo pongo así, si lo pongo tal como lo he puesto así, va a fallar. Vamos a ver por qué. Lo guardo, me voy al navegador, recargo la página, me sale el enlace a página 3 y si le pincho, ¿veis que falla? ¿Por qué ha fallado?

93
00:07:43,560 --> 00:07:45,360
porque está buscando

94
00:07:45,360 --> 00:07:47,740
mira, dice que busca

95
00:07:47,740 --> 00:07:49,259
a página 3

96
00:07:49,259 --> 00:07:51,620
como no le he puesto yo referencia a ningún sitio

97
00:07:51,620 --> 00:07:53,620
a ninguna carpeta, lo intenta buscar

98
00:07:53,620 --> 00:07:54,540
aquí dentro

99
00:07:54,540 --> 00:07:57,560
aquí, en la misma carpeta que está

100
00:07:57,560 --> 00:07:59,939
página 1, en la misma carpeta

101
00:07:59,939 --> 00:08:01,579
que está página 1 hay algún archivo

102
00:08:01,579 --> 00:08:03,600
que se llama página 3, pues no

103
00:08:03,600 --> 00:08:05,680
por eso el navegador me dice que no lo encuentra

104
00:08:05,680 --> 00:08:07,639
me dice archivo

105
00:08:07,639 --> 00:08:09,779
no he encontrado, pero yo quiero acceder

106
00:08:09,779 --> 00:08:11,480
a página 3

107
00:08:11,480 --> 00:08:18,259
quiero acceder aquí a página 3 ¿cómo lo hago? pues como está dentro de la carpeta páginas tendré que

108
00:08:18,259 --> 00:08:36,139
poner páginas barra página 3 si voy ahora al navegador recargo y le doy pues ya vemos que

109
00:08:36,139 --> 00:08:46,559
funcionan los enlaces correctamente voy a convertir esto en un comentario para convertirlo en un

110
00:08:46,559 --> 00:08:47,879
comentario, recordad que había que poner

111
00:08:47,879 --> 00:08:50,200
estos simbolitos tan curiosos.

112
00:08:53,149 --> 00:08:54,830
¿De acuerdo? Había que poner esos dos

113
00:08:54,830 --> 00:08:56,929
simbolitos tan curiosos. Con lo cual,

114
00:08:57,230 --> 00:08:58,330
ahora, cuando recarga la página,

115
00:08:59,049 --> 00:09:00,289
¿veis este texto de aquí?

116
00:09:01,350 --> 00:09:02,769
Ese texto de ahí va a

117
00:09:02,769 --> 00:09:04,230
desaparecer.

118
00:09:05,529 --> 00:09:06,309
Bueno, yo quiero

119
00:09:06,309 --> 00:09:08,570
hacer una barra de navegación bonita,

120
00:09:08,649 --> 00:09:10,730
porque esto no es bonito ni nada por el estilo.

121
00:09:11,309 --> 00:09:12,429
Entonces, me voy a la

122
00:09:12,429 --> 00:09:14,429
W3Schools, o sea,

123
00:09:14,629 --> 00:09:16,629
a la W3CSS,

124
00:09:16,629 --> 00:09:18,149
eso pongo en mi navegador

125
00:09:18,769 --> 00:09:46,750
Favorito, w3.css, y lo visito, sale el buscador, cuando le apetezca, ahí está el buscador, va un poquito lento, vamos tú puedes, ahí está, entro en el w3.css, y ahora busca aquí, barras de navegación,

126
00:09:47,450 --> 00:09:48,049
Estará por aquí.

127
00:09:48,769 --> 00:09:52,049
¿Veis que pone aquí W3CSS Navigation?

128
00:09:52,429 --> 00:09:52,909
Pues le damos.

129
00:09:53,129 --> 00:09:59,240
Está un poquito lento.

130
00:10:00,059 --> 00:10:00,860
Venga, tú puedes.

131
00:10:01,179 --> 00:10:01,620
Ahí lo tenemos.

132
00:10:01,960 --> 00:10:04,519
Quiero crear una barra de navegación de este porte.

133
00:10:05,620 --> 00:10:05,960
¿De acuerdo?

134
00:10:06,559 --> 00:10:09,039
Entonces, para crear la barra de navegación,

135
00:10:09,419 --> 00:10:12,080
fijaos, tengo que meter todo en un div

136
00:10:12,080 --> 00:10:15,820
y poner la clase W3Bar.

137
00:10:16,279 --> 00:10:16,919
Bueno, y el color.

138
00:10:17,159 --> 00:10:18,379
Ya lo he puesto color negro.

139
00:10:18,500 --> 00:10:21,379
O sea, está poniendo una de este porte.

140
00:10:21,899 --> 00:10:22,620
Vamos a probar.

141
00:10:26,000 --> 00:10:27,379
Bueno, realmente ya tengo el nav.

142
00:10:28,500 --> 00:10:30,940
El nav es exactamente igual que el div.

143
00:10:31,220 --> 00:10:31,940
Es un contenedor.

144
00:10:32,299 --> 00:10:35,980
Lo que pasa es que nav está orientado, si nos vamos aquí a los apuntes,

145
00:10:36,460 --> 00:10:40,279
tenemos que usar nav cuando queremos indicar que es una barra de navegación.

146
00:10:40,679 --> 00:10:42,980
Vais a ver que la mayoría de las páginas web no usan nav.

147
00:10:43,460 --> 00:10:44,039
Usan div.

148
00:10:44,379 --> 00:10:45,399
Y lo ponen un div, ¿vale?

149
00:10:45,399 --> 00:10:47,299
Pero que no pasa nada usar un nav.

150
00:10:47,580 --> 00:10:49,399
Pongo aquí nav class.

151
00:10:49,399 --> 00:10:52,100
y hemos dicho que esto tiene que ser una

152
00:10:52,100 --> 00:10:53,480
W3

153
00:10:53,480 --> 00:10:55,899
y vamos a respetar el color

154
00:10:55,899 --> 00:10:57,860
W3

155
00:10:57,860 --> 00:10:59,320
vamos a poner brillo

156
00:10:59,320 --> 00:11:00,779
a ver como queda

157
00:11:00,779 --> 00:11:08,879
le he puesto de, bueno, a ver

158
00:11:08,879 --> 00:11:10,600
aquí está, le doy cargo

159
00:11:10,600 --> 00:11:12,580
y ahí tengo mi barra de navegación

160
00:11:12,580 --> 00:11:14,919
¿de acuerdo? bueno, fijaros

161
00:11:14,919 --> 00:11:16,740
que no me activa cuando

162
00:11:16,740 --> 00:11:18,559
lo visitos, no me hace esto

163
00:11:18,559 --> 00:11:23,460
este efecto, no me hace el efecto este

164
00:11:23,460 --> 00:11:25,379
de cuando visitas, cambia de color

165
00:11:25,379 --> 00:11:27,200
¿por qué? porque también le tengo que poner

166
00:11:27,240 --> 00:11:32,720
que es un www.bar.item y que es un botón.

167
00:11:32,899 --> 00:11:37,340
O sea, tengo que añadirle a los enlaces estas clases, que es un ítem y un botón.

168
00:11:38,179 --> 00:11:49,230
Vale, pues como estoy vaguete, lo copio y lo pego, me vengo aquí y ahora en cada uno de estos

169
00:11:49,230 --> 00:11:55,330
lo añado a la clase que indica que es un ítem y un botón.

170
00:11:55,330 --> 00:11:58,289
O sea, está indicando que es un ítem de la barra de navegación,

171
00:11:58,289 --> 00:12:03,289
está esto de aquí, un ítem de la barra de navegación

172
00:12:03,289 --> 00:12:07,570
y un botón, que tiene características

173
00:12:07,570 --> 00:12:10,389
de botón. Vale, pues guardamos,

174
00:12:12,899 --> 00:12:16,240
recargamos, y ahora ya tiene

175
00:12:16,240 --> 00:12:20,720
un aspecto más de barra de navegación. Lo he dicho yo, para los colores

176
00:12:20,720 --> 00:12:23,980
soy terrible, pero vamos a dejarlo en negro, que queda más bonito.

177
00:12:23,980 --> 00:12:26,279
Para ponerlo en negro, habrá que poner aquí

178
00:12:26,279 --> 00:12:28,220
black

179
00:12:28,220 --> 00:12:31,220
recargamos otra vez

180
00:12:31,220 --> 00:12:33,500
bueno, pues ya va quedando

181
00:12:33,500 --> 00:12:35,440
nuestra barra de navegación

182
00:12:35,440 --> 00:12:38,039
a veces

183
00:12:38,039 --> 00:12:39,559
bueno, ahí puedo meter imágenes

184
00:12:39,559 --> 00:12:41,940
e iconos, puedo coger cualquier

185
00:12:41,940 --> 00:12:44,440
símbolo

186
00:12:44,440 --> 00:12:45,820
unicode y plantarlo

187
00:12:45,820 --> 00:12:46,779
aquí, de hecho

188
00:12:46,779 --> 00:12:49,639
se usa mucho, bueno aquí he puesto

189
00:12:49,639 --> 00:12:51,519
home, creo que hay mucho simbolito

190
00:12:51,519 --> 00:12:52,879
unicode que se puede usar ahí

191
00:12:52,879 --> 00:12:55,620
veis

192
00:12:55,620 --> 00:12:57,320
esta lupita

193
00:12:57,320 --> 00:12:59,519
lo podemos buscar en los símbolos unicode

194
00:12:59,519 --> 00:13:00,019
y poner.

195
00:13:01,519 --> 00:13:02,480
Más cosas.

196
00:13:03,360 --> 00:13:04,899
Voy a lanzar un pequeño servidor web.

197
00:13:05,840 --> 00:13:07,019
En Linux es bastante fácil

198
00:13:07,019 --> 00:13:09,419
lanzar un servidor web. Simplemente tengo

199
00:13:09,419 --> 00:13:13,720
que abrir un terminal y escribo

200
00:13:13,720 --> 00:13:14,740
esta magia negra.

201
00:13:15,799 --> 00:13:16,840
Este comando magia negra.

202
00:13:17,940 --> 00:13:18,360
python

203
00:13:18,360 --> 00:13:21,220
3-m http

204
00:13:21,220 --> 00:13:24,720
.server

205
00:13:24,720 --> 00:13:27,460
Y lo que hace es que lanza

206
00:13:27,700 --> 00:13:33,059
Un pequeño servidor web. O sea, donde ejecute el comando, me lanza un servidor web.

207
00:13:33,740 --> 00:13:37,379
Bueno, vamos a visitar este servidor web que ha lanzado.

208
00:13:37,379 --> 00:13:43,039
Para visitarlo, fijaros que me está diciendo aquí 0000 2.8000.

209
00:13:44,019 --> 00:13:48,879
0000 en redes significa o todas las direcciones o ninguna.

210
00:13:49,399 --> 00:13:56,320
En este caso está significando que está mandando la información, este servidor web que hemos abierto,

211
00:13:56,320 --> 00:14:00,019
en cualquier IP que tenga el ordenador, en cualquier dirección que tenga.

212
00:14:01,279 --> 00:14:04,059
Y lo está mandando a través del puerto 8000.

213
00:14:04,559 --> 00:14:07,940
Los programas se colocan en unos numeritos que llamamos puertos.

214
00:14:10,100 --> 00:14:13,539
Cada programa se tiene que poner a escuchar en un puerto diferente.

215
00:14:13,700 --> 00:14:15,759
Pues aquí se apuesta a escuchar en el puerto 8000.

216
00:14:16,220 --> 00:14:20,299
Para entrar en mi pequeño servidor web, me voy aquí, por ejemplo,

217
00:14:20,299 --> 00:14:27,980
y pongo localhost 2.8000.

218
00:14:28,639 --> 00:14:31,240
Localhost se refiere, cuando pongamos siempre localhost,

219
00:14:31,360 --> 00:14:33,620
va a ser la máquina en la que estáis trabajando.

220
00:14:33,840 --> 00:14:35,740
O sea, se refiere a vuestra propia máquina.

221
00:14:36,480 --> 00:14:37,100
Le estoy diciendo,

222
00:14:37,519 --> 00:14:38,720
le estoy diciendo,

223
00:14:39,320 --> 00:14:42,379
conéctate a la máquina localhost en el puerto 8000.

224
00:14:42,580 --> 00:14:42,960
Le damos.

225
00:14:43,799 --> 00:14:44,700
Bueno, veis que sale esto.

226
00:14:46,340 --> 00:14:48,139
Tengo ahí mis páginas, ¿de acuerdo?

227
00:14:48,799 --> 00:14:49,720
Tengo ahí mis páginas.

228
00:14:49,720 --> 00:15:13,460
Y si pincho en página 1, la puedo visitar, ¿vale? Lo estoy sirviendo a través de un servidor web. Si pudiese ver las IPs de mi máquina, esto probadlo en casa, cogeis el ordenador de casa, le veis la IP y te conectas desde el móvil. Vais a ver que funciona. Aquí me estará diciendo las visitas que estoy recibiendo, ¿vale? Bueno, esto está haciendo peticiones, que veremos que esto es importante.

229
00:15:13,460 --> 00:15:35,159
También vemos que el navegador ha pedido esto, que esto veremos también lo que es, que esto simplemente le está pidiendo el favicon, es algunas páginas web, veis aquí este simbolito, esto es un icono que se puede poner ahí, pues simplemente le está pidiendo el icono que efectivamente no tenemos.

230
00:15:35,159 --> 00:15:53,440
El servidor le está diciendo mensaje 404 de página no encontrada. El mensaje 200 es que la página se ha encontrado y de hecho se la ha devuelto. Fijaros que nada más entrar me ha mostrado la lista de archivos que había.

231
00:15:53,440 --> 00:16:14,389
¿Vale? Vamos a hacer un pequeño cambio. Vamos a irnos a página 1, bueno, no, a página 1 no, perdón, vamos a ir aquí a esta carpeta donde está página 1, me he expresado mal, y vamos a crear un archivo que se va a llamar index.html.

232
00:16:14,389 --> 00:16:16,769
Importante quitarle esto de la extensión txt.

233
00:16:16,769 --> 00:16:20,769
Cuidado que Windows es muy propicio a poner esto de la extensión txt y te vuelves loco.

234
00:16:21,230 --> 00:16:21,889
Index txt.

235
00:16:23,049 --> 00:16:23,649
¿Vale?

236
00:16:24,049 --> 00:16:25,669
Pues que sea index.html.

237
00:16:25,870 --> 00:16:27,070
La abrimos con el editor.

238
00:16:29,519 --> 00:16:30,700
La abrimos con el editor.

239
00:16:31,860 --> 00:16:33,840
Me creo una página web rápida.

240
00:16:34,220 --> 00:16:34,820
Acordaros.

241
00:16:35,500 --> 00:16:36,360
Voy a ser pesado.

242
00:16:36,620 --> 00:16:40,639
Toda página web tiene que tener el dot type, el tipo documento.

243
00:16:41,259 --> 00:16:44,259
Abrirse y cerrarse por html.

244
00:16:44,259 --> 00:16:47,000
esto hay que saberlo de memoria

245
00:16:47,000 --> 00:16:49,799
tener una cabecera

246
00:16:49,799 --> 00:16:53,990
tener un body

247
00:16:53,990 --> 00:17:01,100
vale, abro y cierro la etiqueta

248
00:17:01,100 --> 00:17:02,840
y dentro de la cabecera tengo que tener

249
00:17:02,840 --> 00:17:05,599
un meta con la codificación

250
00:17:05,599 --> 00:17:09,910
que es la UTF-8

251
00:17:09,910 --> 00:17:11,089
la único de 8

252
00:17:11,089 --> 00:17:13,009
y bueno, voy a ponerle el título

253
00:17:13,009 --> 00:17:20,680
al que voy a llamar página de inicio

254
00:17:20,680 --> 00:17:25,670
vale

255
00:17:25,670 --> 00:17:29,130
en esta página de inicio voy a ponerle aquí un enlace

256
00:17:29,130 --> 00:17:37,019
voy a meter un enlace

257
00:17:37,019 --> 00:17:38,420
a página 1

258
00:17:44,180 --> 00:17:47,000
Aquí voy a poner ir al sitio.

259
00:17:48,279 --> 00:17:48,579
¿De acuerdo?

260
00:17:49,339 --> 00:17:54,000
Bueno, pues ya he creado mi página index, he guardado mi página index, ahí está creada.

261
00:17:54,400 --> 00:18:00,359
Si voy al navegador y ahora pulso recargar, fijaros, estoy en localhost 2.8000.

262
00:18:00,819 --> 00:18:01,920
¿De acuerdo? Estoy en esta dirección.

263
00:18:02,440 --> 00:18:04,480
Si la visito ahora, pulso intro.

264
00:18:04,779 --> 00:18:09,480
Uy, veis que directamente me ha mostrado la página index.html.

265
00:18:10,200 --> 00:18:11,119
Esto no es un casual.

266
00:18:11,119 --> 00:18:28,460
Si el navegador, o mejor dicho, el servidor encuentra una página index.html, la veis aquí, la index.html, si el servidor encuentra una página index.html, por defecto te tiende a servir esa página.

267
00:18:29,720 --> 00:18:30,059
¿De acuerdo?

268
00:18:30,619 --> 00:18:35,880
No te muestra este directorio, ese listado de archivos que estaba mostrando.

269
00:18:35,880 --> 00:18:53,500
Si ahora a este index.html le cambio el nombre, le cambio el nombre y pongo, yo que sé, unos cuantos ceros delante, para que ya no sea index, y recargo el sitio, vais a ver que ahora me vuelvo a mostrar el listado de archivos.

270
00:18:54,039 --> 00:19:10,420
Pero si le quito los ceros y lo vuelvo a llamar index.html, ¿veis? Me muestra la página index.html. Esto lo hacen todos los servidores web.

271
00:19:10,420 --> 00:19:21,079
Este comportamiento se puede cambiar. Incluso quitarle el comportamiento este de que me enseñe los archivos. Es muy raro que te metas a un servidor web y te enseñe los archivos directamente. Se puede desactivar.

272
00:19:21,660 --> 00:19:32,140
Más cositas. Ahora que tenemos un servidor web funcionando, vais a ver que también las referencias se trabajan de una forma distinta.

273
00:19:32,140 --> 00:19:37,500
Bueno, me está diciendo que se han hecho cambios en el archivo y demás

274
00:19:37,500 --> 00:19:42,059
Voy a página 3

275
00:19:42,059 --> 00:19:45,440
¿De acuerdo? Estoy en página 3

276
00:19:45,440 --> 00:19:46,759
Fijaos lo que se puede hacer ahora

277
00:19:46,759 --> 00:19:48,599
Se pueden hacer cosas tan divertidas como esta

278
00:19:48,599 --> 00:19:49,779
Voy a copiar este enlace

279
00:19:49,779 --> 00:19:53,259
Lo vuelvo aquí, vuelvo a la página 1

280
00:19:53,259 --> 00:19:55,539
Directamente

281
00:19:55,539 --> 00:20:00,079
Y voy a quitarle estos dos puntitos

282
00:20:00,079 --> 00:20:03,900
Vais a ver que esto no solamente funciona cuando estoy en un servidor

283
00:20:03,900 --> 00:20:13,799
Puedo referenciar directamente los archivos cuando estoy en un servidor

284
00:20:13,799 --> 00:20:17,319
Cuando estoy en el servidor puedo hacer cosas como esto

285
00:20:17,319 --> 00:20:28,200
Puedo poner aquí, barra, página, página 3

286
00:20:28,200 --> 00:20:31,359
Bueno, aquí se está referenciando a sí mismo el archivo

287
00:20:31,359 --> 00:20:43,450
¿Qué es lo que está pasando aquí con estos dos enlaces?

288
00:20:44,009 --> 00:20:45,690
Nuevos que he metido

289
00:20:45,690 --> 00:21:06,730
Bueno, la raíz del servidor, bueno voy a volver a llamar esta página para que se vea bien el efecto, le quito el index, ¿de acuerdo? Fijaros, cuando visito esta página, la raíz, veis que ha puesto aquí listing for barra, barra va a ser la raíz, ¿de acuerdo?

290
00:21:06,730 --> 00:21:13,009
Entonces, si pongo barra página 1, accedo directamente.

291
00:21:13,349 --> 00:21:15,869
O sea, esto dentro del navegador web va a funcionar.

292
00:21:16,170 --> 00:21:26,450
Si yo me voy aquí, en mi navegador, a página 3, y pincho en volver a página 1 directamente, vais a ver que funciona.

293
00:21:27,750 --> 00:21:28,150
¿De acuerdo?

294
00:21:28,789 --> 00:21:31,410
Me manda directamente a barra página 1.

295
00:21:32,049 --> 00:21:36,450
Si pincho aquí en me referencia a mí mismo, vais a ver que funciona perfectamente.

296
00:21:36,450 --> 00:21:59,410
Espera, no ha funcionado. Uy, qué raro. Uy, qué raro. Final font barra página. Página 3. Me da un 404. Algo he escrito mal. Ah, que es páginas, perdón. Que la carpeta se llama páginas. Páginas. Vale, lo he escrito mal. Páginas. Vale, pues lo corrijo. Páginas. Vale, páginas.

297
00:21:59,410 --> 00:22:24,859
Pues me referencia aquí a mí mismo. A ver, recargo la página, me referencia a mí mismo y ahora funciona. ¿Vale? Ves que cada mínima cosa influye. Lo que estoy haciendo es navegar por el sistema de ficheros. O sea, cuando pongo aquí en la URL una dirección, lo que estoy diciendo es que aquí dentro de la carpeta que hay aquí me das este archivo.

298
00:22:24,859 --> 00:22:38,279
Y puedo meter carpetas unas dentro de otras y referenciarlas. Cuando navegáis, de hecho, lo veis. Barra no sé qué, barra no sé cuánto, barra no sé cuánto. Lo que está haciendo es meterse dentro de una carpeta, dentro de una carpeta, dentro de una carpeta y devolviéndote un archivo.

299
00:22:38,279 --> 00:22:47,839
vamos a visitar página 3 directamente, o sea, sin usar nuestro servidor.

300
00:22:48,019 --> 00:22:48,920
Voy a parar el servidor.

301
00:22:49,200 --> 00:22:53,240
Para pararlo, vengo aquí o cierro la ventana, pongo un control-C.

302
00:22:53,980 --> 00:22:56,420
¿Ves? Control-C y se para.

303
00:22:56,519 --> 00:22:57,380
Ya está parado el servidor.

304
00:22:57,779 --> 00:23:02,140
Ahora, si me voy aquí a localhost, aquí está este servidor que tengo aquí,

305
00:23:03,099 --> 00:23:04,519
me dice que no se puede conectar.

306
00:23:04,779 --> 00:23:06,900
Ahora tengo que acceder directamente.

307
00:23:06,900 --> 00:23:18,680
Bueno, pues si accedo directamente y digo aquí, abrir la página 3, vais a ver que estos dos enlaces ahora no funcionan.

308
00:23:19,519 --> 00:23:24,960
El de volver a la página 1 directamente, le damos y me dice que archivo no he encontrado. ¿Por qué?

309
00:23:25,380 --> 00:23:28,819
Porque se está yendo a la raíz del disco duro, ¿vale?

310
00:23:28,819 --> 00:23:37,259
al no estar el servidor funcionando, se va a la raíz del disco duro y busca ahí en la raíz del disco duro

311
00:23:37,259 --> 00:23:43,019
dónde está el archivo. Y ese archivo efectivamente no lo va a encontrar. Se está yendo, ni más ni menos,

312
00:23:48,049 --> 00:23:52,549
se está yendo al disco duro aquí. Claro, ahí no está ni de casualidad el archivo.

313
00:23:55,960 --> 00:24:01,099
Y con el otro enlace igual, cuando me pongo aquí y me referencio a mí mismo, vais a ver que tampoco funciona

314
00:24:01,099 --> 00:24:02,880
cuando está el servidor parado.

315
00:24:03,319 --> 00:24:03,619
¿Por qué?

316
00:24:03,980 --> 00:24:06,599
Porque está yendo a páginas,

317
00:24:07,539 --> 00:24:08,740
está buscando páginas,

318
00:24:09,700 --> 00:24:10,259
página 3.

319
00:24:10,420 --> 00:24:12,440
O sea, se está yendo a la raíz del disco duro,

320
00:24:13,259 --> 00:24:14,660
a la raíz del disco duro,

321
00:24:14,779 --> 00:24:15,539
aquí lo tenemos,

322
00:24:16,140 --> 00:24:18,140
y está buscando aquí una carpeta que se llama páginas,

323
00:24:18,519 --> 00:24:18,940
página 3,

324
00:24:19,000 --> 00:24:21,619
que esa carpeta evidentemente no existe

325
00:24:21,619 --> 00:24:22,960
en la raíz del disco duro, ¿vale?

326
00:24:22,960 --> 00:24:25,019
Se ha ido aquí a barra la raíz del disco duro,

327
00:24:25,099 --> 00:24:27,380
cuando yo realmente estoy en otra carpeta

328
00:24:27,380 --> 00:24:28,660
por ahí perdido,

329
00:24:29,700 --> 00:24:30,220
trabajando.

330
00:24:31,099 --> 00:24:47,759
¿De acuerdo? Bueno, pues si vuelvo para atrás, si vuelvo para atrás, aquí está el medio donde estoy trabajando ahora, tengo el servidor parado, también puedo referenciar a otras páginas web.

331
00:24:47,759 --> 00:24:50,099
no tengo por qué

332
00:24:50,099 --> 00:24:52,359
referenciar la página web de mi servidor

333
00:24:52,359 --> 00:24:54,039
¿de acuerdo? estoy en página 3

334
00:24:54,039 --> 00:24:55,799
puedo meter una referencia a Google

335
00:24:55,799 --> 00:24:57,880
que se hace exactamente igual, pongo a

336
00:24:57,880 --> 00:25:00,460
href

337
00:25:00,460 --> 00:25:01,539
igual

338
00:25:01,539 --> 00:25:06,240
barra a

339
00:25:06,240 --> 00:25:08,940
y pongo aquí Google

340
00:25:08,940 --> 00:25:11,180
por ejemplo, y pongo la dirección de Google

341
00:25:11,180 --> 00:25:12,319
tengo que ponerla completa

342
00:25:12,319 --> 00:25:15,180
https dos puntos barra barra

343
00:25:15,180 --> 00:25:17,140
google.es

344
00:25:17,140 --> 00:25:19,079
¿de acuerdo?

345
00:25:19,079 --> 00:25:38,490
Si me voy a visitar página 3 ahora, la buena no está, voy a cerrar, quito este batiburrillo que tengo, voy a cerrar el batiburrillo y voy a abrir página 3. La abro con el navegador porque ahora el servidor web lo tengo parado.

346
00:25:38,490 --> 00:25:56,690
Vale, pues si pincho aquí en Google vais a ver que me referencia directamente. Me puedo referenciar a recursos que tenga en otros sitios, en otros ordenadores. De acuerdo, pues hasta aquí han llegado los enlaces.