path: root/content/wp-content/uploads/article/subtitles/2019/03/0003-sintaxis-html5-es.vtt

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