591 lines
9.9 KiB
WebVTT
591 lines
9.9 KiB
WebVTT
WEBVTT
|
|
|
|
1
|
|
00:00:05.580 --> 00:00:06.880
|
|
En el vídeo anterior
|
|
|
|
2
|
|
00:00:07.660 --> 00:00:08.820
|
|
logramos entender
|
|
|
|
3
|
|
00:00:08.940 --> 00:00:14.880
|
|
como funcionan la etiquetas de HTML5, las etiquetas obsoletas, las nuevas etiquetas
|
|
|
|
4
|
|
00:00:16.500 --> 00:00:18.380
|
|
y ahora pues vamos a
|
|
|
|
5
|
|
00:00:18.380 --> 00:00:20.380
|
|
escribir el código
|
|
|
|
6
|
|
00:00:21.120 --> 00:00:22.700
|
|
para poder generar
|
|
|
|
7
|
|
00:00:22.820 --> 00:00:24.060
|
|
cualquier página web
|
|
|
|
8
|
|
00:00:25.400 --> 00:00:27.780
|
|
vamos abrir el editor de código
|
|
|
|
9
|
|
00:00:27.780 --> 00:00:29.780
|
|
voy a...
|
|
|
|
10
|
|
00:00:30.080 --> 00:00:32.620
|
|
colocar aquí el localhost
|
|
|
|
11
|
|
00:00:33.420 --> 00:00:37.840
|
|
localhost
|
|
|
|
12
|
|
00:00:43.280 --> 00:00:46.100
|
|
y voy a entrar dentro del directorio course
|
|
|
|
13
|
|
00:00:46.560 --> 00:00:51.540
|
|
todavía no hay nada, porque todavía no he escrito nada
|
|
|
|
14
|
|
00:00:52.700 --> 00:00:54.300
|
|
vamos a ir...
|
|
|
|
15
|
|
00:00:54.300 --> 00:00:58.600
|
|
al editor de código, yo utilizaré Emacs
|
|
|
|
16
|
|
00:01:01.300 --> 00:01:02.480
|
|
ahí está
|
|
|
|
17
|
|
00:01:05.520 --> 00:01:08.500
|
|
voy a borrar, esta parte
|
|
|
|
18
|
|
00:01:10.280 --> 00:01:15.820
|
|
voy a minimizar también esto, ahí está!, voy a agrandar el texto
|
|
|
|
19
|
|
00:01:16.980 --> 00:01:18.120
|
|
ahí está
|
|
|
|
20
|
|
00:01:20.980 --> 00:01:24.860
|
|
bien primero podríamos...
|
|
|
|
21
|
|
00:01:27.460 --> 00:01:30.400
|
|
escribir la etiqueta <!doctype>
|
|
|
|
22
|
|
00:01:32.840 --> 00:01:36.340
|
|
ahora también se acostumbra también a escribir en minúscula
|
|
|
|
23
|
|
00:01:40.320 --> 00:01:41.860
|
|
que sería de esa forma
|
|
|
|
24
|
|
00:01:42.340 --> 00:01:45.740
|
|
<!doctype html> etiqueta <html>
|
|
|
|
25
|
|
00:01:46.540 --> 00:01:49.360
|
|
y etiqueta </html> que cierra
|
|
|
|
26
|
|
00:01:49.360 --> 00:01:51.360
|
|
de esta forma
|
|
|
|
27
|
|
00:01:52.500 --> 00:01:53.340
|
|
como véis
|
|
|
|
28
|
|
00:01:54.020 --> 00:01:56.380
|
|
Emacs no me ha coloreado
|
|
|
|
29
|
|
00:01:56.560 --> 00:02:00.460
|
|
No me ha coloreado la parte de la sintaxis
|
|
|
|
30
|
|
00:02:00.460 --> 00:02:02.460
|
|
eso es porque estoy en mode-lisp
|
|
|
|
31
|
|
00:02:03.240 --> 00:02:05.180
|
|
los que usáis Emacs ya me entenderéis
|
|
|
|
32
|
|
00:02:05.860 --> 00:02:08.940
|
|
Si utilizáis otro editor pues automaticamente
|
|
|
|
33
|
|
00:02:10.320 --> 00:02:13.080
|
|
les va a detectar la sintaxis
|
|
|
|
34
|
|
00:02:13.360 --> 00:02:14.800
|
|
voy a utilizar el web-mode
|
|
|
|
35
|
|
00:02:15.720 --> 00:02:17.760
|
|
y aquí como podéis observar
|
|
|
|
36
|
|
00:02:17.760 --> 00:02:19.760
|
|
tenemos
|
|
|
|
37
|
|
00:02:20.560 --> 00:02:22.100
|
|
ya la estructura básica
|
|
|
|
38
|
|
00:02:22.780 --> 00:02:24.740
|
|
<!doctype html>
|
|
|
|
39
|
|
00:02:25.060 --> 00:02:27.880
|
|
etiqueta <html>
|
|
|
|
40
|
|
00:02:27.880 --> 00:02:29.880
|
|
siempre tiene que llevar
|
|
|
|
41
|
|
00:02:30.040 --> 00:02:36.680
|
|
un atributo que es el artributo lenguaje, y dentro pues colocar
|
|
|
|
42
|
|
00:02:36.920 --> 00:02:40.300
|
|
el idioma, en esta caso Español-España (es-es)
|
|
|
|
43
|
|
00:02:40.680 --> 00:02:43.800
|
|
también podría ser inglés: en
|
|
|
|
44
|
|
00:02:44.860 --> 00:02:47.200
|
|
podría ser portugués: pt_BR
|
|
|
|
45
|
|
00:02:48.780 --> 00:02:51.440
|
|
cualquier tipo de idioma: zxy
|
|
|
|
46
|
|
00:02:53.220 --> 00:02:59.060
|
|
En este caso voy a poner español-españa, y dentro de la etiqueta <html>
|
|
|
|
47
|
|
00:02:59.780 --> 00:03:03.640
|
|
siempre va un <head>
|
|
|
|
48
|
|
00:03:04.460 --> 00:03:07.840
|
|
un <head> que abre un </head> que cierra
|
|
|
|
49
|
|
00:03:09.500 --> 00:03:17.480
|
|
aquí van todas las etiquetas que describen a la página, el título, los metadata, todo eso va ahí
|
|
|
|
50
|
|
00:03:17.780 --> 00:03:20.980
|
|
y luego tenemos la etiqueta
|
|
|
|
51
|
|
00:03:21.540 --> 00:03:23.580
|
|
<body>
|
|
|
|
52
|
|
00:03:25.760 --> 00:03:28.420
|
|
que también tiene su contraparte
|
|
|
|
53
|
|
00:03:30.160 --> 00:03:34.320
|
|
¿qué va dentro de la etiqueta <head>?
|
|
|
|
54
|
|
00:03:35.660 --> 00:03:37.300
|
|
ahí vamos a colocar
|
|
|
|
55
|
|
00:03:38.160 --> 00:03:43.820
|
|
toda la información, el titulo, la información, toda esa información se va a colocar allí
|
|
|
|
56
|
|
00:03:44.460 --> 00:03:46.740
|
|
y aquí en la etiqueta <body>
|
|
|
|
57
|
|
00:03:46.840 --> 00:03:50.120
|
|
se va a colocar la información
|
|
|
|
58
|
|
00:03:50.120 --> 00:03:52.120
|
|
que se le va a mostrar al usuario
|
|
|
|
59
|
|
00:03:52.120 --> 00:03:54.120
|
|
por ejemplo
|
|
|
|
60
|
|
00:03:54.500 --> 00:03:57.140
|
|
vamos a regresar a conocimientos libres
|
|
|
|
61
|
|
00:03:59.280 --> 00:04:00.720
|
|
ah... vamos a ver...
|
|
|
|
62
|
|
00:04:01.280 --> 00:04:02.940
|
|
la parte interna
|
|
|
|
63
|
|
00:04:02.940 --> 00:04:04.940
|
|
aquí lo tenemos
|
|
|
|
64
|
|
00:04:05.020 --> 00:04:07.620
|
|
en body, en <body>
|
|
|
|
65
|
|
00:04:08.100 --> 00:04:12.040
|
|
tenemos que colocar todo lo que se le va a mostrar al usuario
|
|
|
|
66
|
|
00:04:12.280 --> 00:04:15.200
|
|
la cabecera, el área de navegación
|
|
|
|
67
|
|
00:04:15.920 --> 00:04:19.220
|
|
parte de los artículos, la figuritas
|
|
|
|
68
|
|
00:04:19.500 --> 00:04:27.140
|
|
toda esa información, va dentro de la etiqueta <body>, todo va dentro de la etiqueta <body>
|
|
|
|
69
|
|
00:04:27.300 --> 00:04:31.480
|
|
todo esto que véis aquí esta dentro de la etiqueta <body>
|
|
|
|
70
|
|
00:04:31.660 --> 00:04:41.040
|
|
lo que esta dentro de la etiqueta <head>, es esta parte, lo que se encuentra arriba, donde dice conocimientos libres y hay un logito
|
|
|
|
71
|
|
00:04:41.760 --> 00:04:47.200
|
|
eso va dentro de la etiqueta <head>, ahí va
|
|
|
|
72
|
|
00:04:48.400 --> 00:04:55.300
|
|
no confundáis <head> con esta otra etiqueta que es <header>
|
|
|
|
73
|
|
00:04:59.520 --> 00:05:02.700
|
|
son palabras similares pero diferentes
|
|
|
|
74
|
|
00:05:04.840 --> 00:05:06.780
|
|
pueden ser dos
|
|
|
|
75
|
|
00:05:06.780 --> 00:05:08.780
|
|
pueden haber dos etiquetas <header>
|
|
|
|
76
|
|
00:05:09.080 --> 00:05:13.980
|
|
he visto sitios donde tienen más de un cabecera
|
|
|
|
77
|
|
00:05:15.820 --> 00:05:22.420
|
|
bien primero vamos a completar la parte del <head>
|
|
|
|
78
|
|
00:05:22.600 --> 00:05:25.480
|
|
en donde esta la información, esto vamos a ponerlo debajo
|
|
|
|
79
|
|
00:05:25.480 --> 00:05:27.480
|
|
y aquí vamos a colocar
|
|
|
|
80
|
|
00:05:27.800 --> 00:05:29.780
|
|
al igual como
|
|
|
|
81
|
|
00:05:29.780 --> 00:05:31.780
|
|
aquí en conocimientos libres
|
|
|
|
82
|
|
00:05:31.980 --> 00:05:36.480
|
|
vamos a poner una etiqueta bastante sencilla que...
|
|
|
|
83
|
|
00:05:37.300 --> 00:05:42.700
|
|
...que es la etiqueta <title> vamos a colocar allí la etiqueta <title>
|
|
|
|
84
|
|
00:05:44.540 --> 00:05:48.600
|
|
ahí esta la etiquet <title>!, dentro de la etiqueta <title>
|
|
|
|
85
|
|
00:05:48.600 --> 00:05:50.320
|
|
vamos a...
|
|
|
|
86
|
|
00:05:50.320 --> 00:05:52.320
|
|
poner el título
|
|
|
|
87
|
|
00:05:52.620 --> 00:06:03.040
|
|
En este caso vamos a poner aquí: mi primera web en HTML5
|
|
|
|
88
|
|
00:06:03.040 --> 00:06:05.040
|
|
correcto!
|
|
|
|
89
|
|
00:06:06.700 --> 00:06:09.440
|
|
bien, aún...
|
|
|
|
90
|
|
00:06:09.720 --> 00:06:12.840
|
|
parece algo simple esto
|
|
|
|
91
|
|
00:06:12.840 --> 00:06:15.320
|
|
vamos a guardarlo para ver si funciona.
|
|
|
|
92
|
|
00:06:15.320 --> 00:06:17.320
|
|
voy a guardarlo
|
|
|
|
93
|
|
00:06:18.420 --> 00:06:27.720
|
|
aquí, ya es cuestión de qué editor utilizáis yo aquí utilizó Emacs, simplemente hice C-x C-s
|
|
|
|
94
|
|
00:06:28.140 --> 00:06:31.000
|
|
y ahora voy a guardarlo dentro del directorio "srv"
|
|
|
|
95
|
|
00:06:31.000 --> 00:06:33.000
|
|
.../http/...
|
|
|
|
96
|
|
00:06:33.480 --> 00:06:38.180
|
|
y voy a entrar a course, y lo voy a guardar con el nombre
|
|
|
|
97
|
|
00:06:39.240 --> 00:06:41.300
|
|
para esta parte
|
|
|
|
98
|
|
00:06:41.740 --> 00:06:43.920
|
|
de manera predeterminada
|
|
|
|
99
|
|
00:06:44.120 --> 00:06:47.840
|
|
el nombre que va llevar el archivo HTML
|
|
|
|
100
|
|
00:06:47.840 --> 00:06:50.960
|
|
por defecto debería de ser index
|
|
|
|
101
|
|
00:06:50.960 --> 00:06:55.400
|
|
debería ser index.html
|
|
|
|
102
|
|
00:06:56.460 --> 00:06:58.000
|
|
¿por qué index?
|
|
|
|
103
|
|
00:06:58.260 --> 00:06:59.260
|
|
porque...
|
|
|
|
104
|
|
00:06:59.260 --> 00:07:00.720
|
|
este nombre
|
|
|
|
105
|
|
00:07:00.720 --> 00:07:02.220
|
|
el nombre index
|
|
|
|
106
|
|
00:07:02.220 --> 00:07:05.340
|
|
es el que los servidores web
|
|
|
|
107
|
|
00:07:06.020 --> 00:07:09.340
|
|
como por ejemplo: el apache, el nginx
|
|
|
|
108
|
|
00:07:09.560 --> 00:07:12.160
|
|
va a buscar en cada directorio
|
|
|
|
109
|
|
00:07:12.400 --> 00:07:18.180
|
|
sino encuentra el archivo llamado index.html o index.php
|
|
|
|
110
|
|
00:07:19.100 --> 00:07:20.600
|
|
sino los encuentra
|
|
|
|
111
|
|
00:07:21.300 --> 00:07:23.880
|
|
pues lo que va hacer es...
|
|
|
|
112
|
|
00:07:24.240 --> 00:07:27.980
|
|
mostrar la jerarquía de los archivos que están dentro
|
|
|
|
113
|
|
00:07:28.600 --> 00:07:31.400
|
|
por ejemplo vamos a colocar ahora.
|
|
|
|
114
|
|
00:07:33.220 --> 00:07:35.660
|
|
vamos hacer esto
|
|
|
|
115
|
|
00:07:35.660 --> 00:07:37.660
|
|
demo.html
|
|
|
|
116
|
|
00:07:37.660 --> 00:07:39.660
|
|
supongamos que es así
|
|
|
|
117
|
|
00:07:40.720 --> 00:07:44.720
|
|
que no le pusimos index y le pusimos demo.html
|
|
|
|
118
|
|
00:07:46.520 --> 00:07:49.440
|
|
aparentemente no pasó nada, simplemente se guardó
|
|
|
|
119
|
|
00:07:50.100 --> 00:07:52.260
|
|
y ahora vamos a ir al navegador
|
|
|
|
120
|
|
00:07:53.440 --> 00:07:54.740
|
|
al localhost
|
|
|
|
121
|
|
00:07:54.740 --> 00:07:56.440
|
|
actualizamos
|
|
|
|
122
|
|
00:07:56.440 --> 00:08:00.000
|
|
y vemos el archivo demo.html
|
|
|
|
123
|
|
00:08:00.000 --> 00:08:01.280
|
|
vamos a
|
|
|
|
124
|
|
00:08:01.280 --> 00:08:02.540
|
|
colocar ahí
|
|
|
|
125
|
|
00:08:02.540 --> 00:08:04.540
|
|
no se ve nada
|
|
|
|
126
|
|
00:08:04.540 --> 00:08:08.160
|
|
porque no hemos escrito nada en el <body>, solamente en el <head>
|
|
|
|
127
|
|
00:08:08.160 --> 00:08:10.160
|
|
y si os fijáis
|
|
|
|
128
|
|
00:08:23.140 --> 00:08:25.320
|
|
en esta parte
|
|
|
|
129
|
|
00:08:25.320 --> 00:08:30.780
|
|
pueden ver que dice «Mi primera web en HTML5» es bastante genial esto
|
|
|
|
130
|
|
00:08:30.780 --> 00:08:32.780
|
|
ahora
|
|
|
|
131
|
|
00:08:34.420 --> 00:08:44.100
|
|
para que veáis ese problema, hemos tenido que entrar dentro del archivo demo.html, no se ha mostrado automáticamente
|
|
|
|
132
|
|
00:08:44.400 --> 00:08:46.540
|
|
es decir no hemos recargado esto
|
|
|
|
133
|
|
00:08:47.520 --> 00:08:53.900
|
|
aparecido automáticamente la página, sino que hemos tenido que entrar dentro del archivo demo.html
|
|
|
|
134
|
|
00:08:54.780 --> 00:09:00.200
|
|
que pasaría si a este archivo demo.html le cambio de nombre
|
|
|
|
135
|
|
00:09:01.760 --> 00:09:02.920
|
|
por ejemplo
|
|
|
|
136
|
|
00:09:04.220 --> 00:09:06.900
|
|
ahora ya no se va llamar así, sino se va a llamar
|
|
|
|
137
|
|
00:09:10.580 --> 00:09:13.180
|
|
se va a llamar ahora pues...
|
|
|
|
138
|
|
00:09:14.220 --> 00:09:17.080
|
|
index.html ¿cómo hago eso?
|
|
|
|
139
|
|
00:09:17.300 --> 00:09:18.460
|
|
muy sencillo
|
|
|
|
140
|
|
00:09:18.900 --> 00:09:20.400
|
|
yo por acá tengo
|
|
|
|
141
|
|
00:09:20.840 --> 00:09:22.660
|
|
el directorio de course
|
|
|
|
142
|
|
00:09:22.980 --> 00:09:23.880
|
|
aquí está!
|
|
|
|
143
|
|
00:09:24.460 --> 00:09:26.680
|
|
he voy a cambiarle de nombre
|
|
|
|
144
|
|
00:09:26.680 --> 00:09:29.180
|
|
a index.html
|
|
|
|
145
|
|
00:09:30.260 --> 00:09:33.520
|
|
y automáticamente al actualizar me va ha cargar
|
|
|
|
146
|
|
00:09:33.880 --> 00:09:37.800
|
|
me va ha cargar el archivo index.html
|
|
|
|
147
|
|
00:09:40.040 --> 00:09:44.180
|
|
bien!, nos vemos en el siguiente vídeo para continuar avanzando
|
|
|