libretube/content/wp-content/uploads/article/subtitles/2019/03/introduccion-es.vtt

WEBVTT

1
00:00:00.880 --> 00:00:05.040
Hola que tal bienvenidos aquí a Cybersy, a Conocimientos Libres

2
00:00:06.080 --> 00:00:07.040
Vamos a iniciar

3
00:00:07.040 --> 00:00:07.980
con el

4
00:00:07.980 --> 00:00:10.840
pequeño curso de HTML

5
00:00:10.840 --> 00:00:13.300
vamos a ver los fundamentos de HTML

6
00:00:15.280 --> 00:00:18.580
HTML5 es un lenguaje

7
00:00:18.580 --> 00:00:20.580
de Marcado

8
00:00:20.580 --> 00:00:21.780
que permite

9
00:00:21.780 --> 00:00:24.040
estructurar la página web

10
00:00:25.320 --> 00:00:26.620
de manera sencilla

11
00:00:27.580 --> 00:00:29.500
para poder así luego

12
00:00:30.520 --> 00:00:31.500
mantener

13
00:00:32.460 --> 00:00:34.840
un posicionamiento adecuado

14
00:00:35.720 --> 00:00:38.300
sobre la página web

15
00:00:39.060 --> 00:00:41.000
ya se para temas de SEO

16
00:00:42.420 --> 00:00:43.040
para...

17
00:00:45.140 --> 00:00:46.360
Entregar

18
00:00:46.360 --> 00:00:49.160
una buena información al usuario

19
00:00:49.160 --> 00:00:50.460
cuando visite

20
00:00:50.460 --> 00:00:52.460
cualquier sitio web

21
00:00:53.100 --> 00:00:55.920
la versión actual de HTML es:

22
00:00:55.920 --> 00:00:57.920
5.2

23
00:01:00.200 --> 00:01:03.240
que tiene que ver con HTML

24
00:01:03.240 --> 00:01:05.240
viene de las siglas en inglés

25
00:01:05.680 --> 00:01:08.160
HyperText Markup Lenguage = HTML

26
00:01:08.880 --> 00:01:11.880
Lenguaje de Marcado de HyperTexto

27
00:01:12.060 --> 00:01:13.480
¿qué quiere decir esto?, pues...

28
00:01:13.480 --> 00:01:15.480
que es un lenguaje de marcado

29
00:01:15.480 --> 00:01:17.300
no es un lenguaje de programación

30
00:01:17.360 --> 00:01:18.780
es un lenguaje de marcado

31
00:01:21.540 --> 00:01:24.860
¿qué tiene la versión 5?

32
00:01:25.080 --> 00:01:27.760
nos dice que debemos de...

33
00:01:29.020 --> 00:01:30.820
utilizar etiquetas

34
00:01:31.500 --> 00:01:32.740
etiquetas

35
00:01:34.000 --> 00:01:35.440
semánticas

36
00:01:35.820 --> 00:01:40.440
que le den sentido a la información que se publica dentro de la web

37
00:01:44.920 --> 00:01:45.860
primero

38
00:01:46.400 --> 00:01:50.100
por ejemplo tenemos aquí cargada la página de conocimientos Libres

39
00:01:51.160 --> 00:01:53.700
vamos a ver su código fuente

40
00:01:54.440 --> 00:01:57.020
que este caso sería el HTML

41
00:01:57.740 --> 00:01:59.560
para que apareza todo eso

42
00:01:59.760 --> 00:02:00.700
vamos a ver...

43
00:02:01.180 --> 00:02:02.620
su código fuente

44
00:02:03.720 --> 00:02:06.320
simplemente bastaría con dar click derecho

45
00:02:07.960 --> 00:02:11.720
ver código fuente, en este caso está en inglés dice: view page source

46
00:02:19.120 --> 00:02:20.520
si observáis bien

47
00:02:21.800 --> 00:02:24.200
podéis ver que para poder declarar

48
00:02:24.200 --> 00:02:25.780
un archivo...

49
00:02:25.780 --> 00:02:27.780
HTML, un documento HTML

50
00:02:27.780 --> 00:02:32.000
la primera etiqueta obligatoria es ponerle el tipo de documento

51
00:02:32.000 --> 00:02:34.000
HTML

52
00:02:36.320 --> 00:02:38.240
luego vemos...

53
00:02:39.520 --> 00:02:42.080
a esto se le llama etiqueta

54
00:02:43.900 --> 00:02:46.600
hay etiquetas que se cierran solas

55
00:02:47.080 --> 00:02:48.760
como las etiquetas <meta>

56
00:02:49.220 --> 00:02:50.640
es decir

57
00:02:51.900 --> 00:02:53.920
se puede escribir en una sola línea

58
00:02:54.780 --> 00:02:57.000
por ejemplo aquí etiqueta <meta>

59
00:02:57.720 --> 00:03:00.240
y aquí tiene una pequeña barra que indica

60
00:03:00.400 --> 00:03:02.700
que esta etiquete se cierra

61
00:03:02.840 --> 00:03:05.200
en la misma etiqueta

62
00:03:08.180 --> 00:03:09.760
aquí

63
00:03:11.540 --> 00:03:12.660
la barra

64
00:03:13.580 --> 00:03:14.780
que puedes observar ahí

65
00:03:17.660 --> 00:03:20.820
si trabajarmos con XML es obligatoria

66
00:03:21.520 --> 00:03:22.500
pero

67
00:03:22.500 --> 00:03:25.660
cuando estamos trabajando con HTML5

68
00:03:25.940 --> 00:03:27.200
esa barra

69
00:03:27.440 --> 00:03:32.040
podría haberla obviado

70
00:03:32.040 --> 00:03:34.040
y no pasaría nada

71
00:03:38.400 --> 00:03:40.040
si deseáis podéis colocarla

72
00:03:40.360 --> 00:03:43.520
lo recomendable es colocarla aquí yo no lo he puesto

73
00:03:43.680 --> 00:03:47.240
pero como os dije no es necesario colocarla

74
00:03:47.640 --> 00:03:50.220
hay algunos desarrolladores que no la colocan

75
00:03:50.220 --> 00:03:52.220
para ahorrar bits

76
00:03:52.900 --> 00:03:54.160
al momento de escribir

77
00:03:55.180 --> 00:03:57.400
luego tenemos las etiquetas...

78
00:03:57.680 --> 00:04:00.360
que tienen su contraparte

79
00:04:00.540 --> 00:04:01.520
es decir

80
00:04:01.920 --> 00:04:04.000
la etiqute <title>

81
00:04:04.480 --> 00:04:06.680
como podéis observar ahí en la pantalla

82
00:04:06.680 --> 00:04:10.220
tiene su contraparte, su etiqueta contraparte

83
00:04:10.220 --> 00:04:12.220
donde esa etiqueta

84
00:04:12.820 --> 00:04:15.060
tiene una barra

85
00:04:15.060 --> 00:04:17.060
tiene un slash: /

86
00:04:17.060 --> 00:04:20.320
donde indica pues que la etiqueta termina allí

87
00:04:21.160 --> 00:04:25.300
en este caso tenemos el título que sería Conocimientos Libres

88
00:04:26.400 --> 00:04:28.220
ahí lo puedéis observar

89
00:04:28.620 --> 00:04:32.200
luego ya tenemos un sin número de etiquetas y propiedades

90
00:04:37.200 --> 00:04:39.020
aquí hay bastante código

91
00:04:39.020 --> 00:04:42.380
como puedes observar todo este código es para que...

92
00:04:42.380 --> 00:04:45.740
pueda pintarse toda la página web

93
00:04:46.320 --> 00:04:48.320
ya para que pueda estructurase

94
00:04:48.320 --> 00:04:50.320
la parte del diseño

95
00:04:50.500 --> 00:04:52.900
ya se encarga de eso...

96
00:04:52.900 --> 00:04:54.680
HTML

97
00:04:54.680 --> 00:04:57.140
junto a CSS

98
00:04:59.020 --> 00:05:03.160
las imágenes son guardadas dentro de etiquetas también

99
00:05:10.820 --> 00:05:12.780
por ejemplo, si queremos

100
00:05:14.240 --> 00:05:15.860
saber dónde esta

101
00:05:16.140 --> 00:05:17.680
esta imagen

102
00:05:18.180 --> 00:05:19.960
nos vamos al código fuente

103
00:05:20.920 --> 00:05:23.140
vamos a la parte que dice

104
00:05:25.480 --> 00:05:26.980
contenido de la página

105
00:05:27.940 --> 00:05:29.540
y como podéis observar

106
00:05:29.660 --> 00:05:33.560
aquí hay una etiqueta llamada figura o <figure>

107
00:05:35.140 --> 00:05:39.160
que también tiene su contraparte aquí puedéis observar

108
00:05:41.260 --> 00:05:43.360
esta etiqueta tiene propiedades

109
00:05:45.020 --> 00:05:49.380
lo que más se maneja dentro de las etiquetas son las clases y los id's

110
00:05:50.040 --> 00:05:51.560
mayormente es eso

111
00:05:55.000 --> 00:05:59.160
donde agregamos atributos en la etiqueta <link>

112
00:06:00.580 --> 00:06:03.420
donde agregamos el atributo "rel", "href"

113
00:06:03.420 --> 00:06:05.420
de lenguaje

114
00:06:06.040 --> 00:06:10.000
en la mayoría de etiquetas siempre utilizamos las clases

115
00:06:10.000 --> 00:06:12.000
que es para trabajar con CSS

116
00:06:12.760 --> 00:06:14.220
mediante las clases

117
00:06:14.400 --> 00:06:17.380
nosotros agregamos el tipo

118
00:06:17.680 --> 00:06:22.120
de diseño que se va mostrar en la etiqueta, cómo se va a mostrar

119
00:06:22.460 --> 00:06:24.560
he las dimensiones que va a tener

120
00:06:25.240 --> 00:06:27.960
las cosas con respecto al diseño

121
00:06:30.060 --> 00:06:31.580
he la etiqueta <img>

122
00:06:31.760 --> 00:06:35.520
tiene un atributo que se llama "SRC"

123
00:06:36.620 --> 00:06:38.340
allí puedes observar

124
00:06:42.880 --> 00:06:46.640
y tiene un enlace hacia la imagen, si yo pico aquí

125
00:06:46.640 --> 00:06:48.640
me va a mostrar la imagen

126
00:06:49.720 --> 00:06:51.660
y alternativamente

127
00:06:52.340 --> 00:06:53.240
tiene

128
00:06:53.400 --> 00:06:56.780
un atributo "alt" que todas las imágenes deben de tener

129
00:06:56.780 --> 00:06:57.580
que es

130
00:06:58.560 --> 00:07:01.220
su texto alternativo

131
00:07:02.900 --> 00:07:05.280
es impresindible

132
00:07:05.280 --> 00:07:07.280
para una imagen

133
00:07:07.280 --> 00:07:08.440
¿por qué?

134
00:07:08.860 --> 00:07:13.280
porque cuando la imagen por ejemplo desaparece del servidor

135
00:07:16.280 --> 00:07:20.060
en vez de que no se muestre la imagen

136
00:07:20.220 --> 00:07:23.960
cuando la imagen no existe muestra...

137
00:07:24.520 --> 00:07:31.460
un ícono roto indicando que la imagen no está disponible

138
00:07:33.060 --> 00:07:40.160
entonces al colocarle el "alt" el texto alternativo en vez de mostrarse ese ícono

139
00:07:40.940 --> 00:07:47.880
roto, se reemplaza por el texto que se agregó en el atributo "alt"

140
00:07:51.560 --> 00:07:57.620
bien, qué voy a utilizar aquí para escribir código

141
00:07:58.540 --> 00:08:03.920
ya para escribir el código HTML la parte de etiqueta

142
00:08:05.100 --> 00:08:13.400
voy a utilizar EMACS podéis utilizar cualquier otro editor de código

143
00:08:15.060 --> 00:08:20.060
ya es cuestión de preferencias podéis utilizar geany

144
00:08:20.540 --> 00:08:26.380
cualquier tipo editor de código que os parezca bien nano, no sé quizás VIM

145
00:08:29.200 --> 00:08:34.640
para la parte de práctica vamos a ir bastante a fondo, cómo funciona esto

146
00:08:35.060 --> 00:08:39.320
solamente este video es una pequeña introducción, es un pequeño paso

147
00:08:39.620 --> 00:08:46.820
recapitulando HTML no es un lengiuaje de programación es un lenguaje de marcado de etiquetas

148
00:08:47.400 --> 00:08:52.020
que permite pues posicionar la página web si esta bien escrito

149
00:08:53.680 --> 00:09:00.760
y a lo último pues de este curso veremos cómo validar HTML, sin embargo vamos hacerlo también

150
00:09:01.380 --> 00:09:09.840
cada vez de escribarmos algo al finalizar lo validaremos para comprobar si hemos escrito correctamente las etiquetas

151
00:09:10.320 --> 00:09:13.300
bien! nos vemos en el siguiente vídeo