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
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
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
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