1
00:00:00,560 --> 00:00:06,240
Bueno, pues vamos a empezar haciendo el primer documento HTML, ¿vale?

2
00:00:06,919 --> 00:00:15,839
Para hacer este documento nos vamos a ir a nuestro editor, que en este caso es el Brackets, ¿vale?

3
00:00:16,420 --> 00:00:17,120
Como veis aquí.

4
00:00:17,719 --> 00:00:22,980
Entonces, lo primero que vamos a hacer es crear un documento nuevo, para eso le damos a Archivos y a Nuevo, ¿vale?

5
00:00:23,079 --> 00:00:26,820
O simplemente podemos pulsar la tecla Control-N, ¿vale?

6
00:00:26,820 --> 00:00:30,559
Y se nos crea, como veis, un archivito aquí.

7
00:00:32,740 --> 00:00:34,560
Entonces, lo primero que vamos a hacer es guardarlo.

8
00:00:34,679 --> 00:00:38,359
Para eso seguimos el mismo proceso, archivo, guardar o control S.

9
00:00:39,659 --> 00:00:42,560
Se nos abrirá una carpeta y lo guardamos donde queramos.

10
00:00:42,659 --> 00:00:47,000
Yo en este caso lo voy a grabar en una carpeta con todos los códigos.

11
00:00:47,539 --> 00:00:51,840
Y lo importante es que tenemos que acordarnos de grabarlo como el nombre del archivo.

12
00:00:51,960 --> 00:00:55,140
En mi caso va a ser prueba.html.

13
00:00:55,140 --> 00:01:08,439
¿Vale? Fijaros que ya lo he guardado y aquí en la parte izquierda, ¿veis? Aparece que dentro de la carpeta que yo he llamado código, ¿vale? Aparece prueba.html, ¿vale?

14
00:01:09,439 --> 00:01:18,159
Entonces, ¿qué es lo primero que vamos a hacer? Lo primero que vamos a hacer es poner una etiqueta para indicar que este documento que estamos haciendo es un documento HTML, ¿vale?

15
00:01:18,159 --> 00:01:34,099
Porque no vale componer la extensión únicamente. Entonces, ponemos el símbolo de menor que y ponemos una exclamación, ¿vale? El símbolo de abrir exclamación. Perdón, de cerrar exclamación.

16
00:01:34,099 --> 00:01:44,420
y ponemos doc type vale y ponemos html y cerramos la mayuta vale

17
00:01:44,420 --> 00:01:51,739
entonces una vez que hemos hecho eso le damos a la tecla enter

18
00:01:51,739 --> 00:01:57,859
y ahora lo que vamos a hacer es poner la etiqueta html

19
00:01:57,859 --> 00:02:02,819
ponemos la etiqueta html y fijaros que ya automáticamente el

20
00:02:02,819 --> 00:02:10,680
editor me la cierra, ¿vale? Ahora, cosa importante. Dentro de esta etiqueta HTML tenemos que establecer

21
00:02:10,680 --> 00:02:18,159
dos parámetros, ¿vale? Lo que vamos a llamar parámetros en este caso, que son, o atributos,

22
00:02:18,240 --> 00:02:21,840
más que parámetros, atributos. El primero es el idioma, ¿vale? Le vamos a decir que

23
00:02:21,840 --> 00:02:25,280
la página está escrita en castellano. Para eso ponemos una primera etiqueta que se llama

24
00:02:25,280 --> 00:02:31,699
lang. Le damos a igual y entre comillas vamos a poner el idioma. En este caso, como es castellano,

25
00:02:31,699 --> 00:02:40,759
español, pues ponemos es, ¿vale? Y a continuación vamos a poner, bueno, con eso en principio

26
00:02:40,759 --> 00:02:47,860
sería más que suficiente, ¿vale? Ahora lo que vamos a hacer es poner el contenido de

27
00:02:47,860 --> 00:02:54,120
la web. En este caso vamos a poner tanto una cabecera como el cuerpo de la web, ¿vale?

28
00:02:54,120 --> 00:03:02,810
Para poner la cabecera ponemos una etiqueta que se llama head, ¿vale? ¿Ok? Y luego pondríamos

29
00:03:02,810 --> 00:03:05,909
la etiqueta body, ¿vale? Que sería el cuerpo de la web.

30
00:03:08,240 --> 00:03:13,919
Cosas importantes que hay que añadir. Pues dentro de la etiqueta head vamos a meter una etiqueta meta,

31
00:03:14,300 --> 00:03:17,780
que es para meter lo que se llaman los metadatos de la web.

32
00:03:17,960 --> 00:03:22,340
En este caso vamos a poner una etiqueta muy importante, que es la etiqueta meta,

33
00:03:23,099 --> 00:03:31,280
con el charset, que es un conjunto de caracteres, ¿vale? Que se llama UTF-8, ¿vale?

34
00:03:31,280 --> 00:03:45,240
¿Para qué sirve meter esta etiqueta? Esta etiqueta sirve para que cuando nosotros pongamos en nuestra página web, por ejemplo, acento o la ñ, ¿vale? Es decir, esos caracteres raros, pues el navegador sea capaz de reconocerlo, ¿vale?

35
00:03:45,240 --> 00:04:02,659
Y por último, vamos a poner una etiqueta muy importante, que es la etiqueta title, ¿vale? Que es para poner un título de la página web, ¿vale? En este caso, pues voy a poner mi primera página web, ¿vale?

36
00:04:02,659 --> 00:04:20,959
Y luego nos vamos a ir al body y vamos a poner una etiqueta que ya explicaremos más adelante, que es la etiqueta de cabecera, ¿vale? La H1, ¿vale? Y ponemos la página web de Pico2, ¿vale?

37
00:04:20,959 --> 00:04:38,100
Y otra etiqueta para poner párrafo, que es la etiqueta P, ¿vale? Y ponemos el contenido de mi primera página web, ¿vale? Y le damos a guardar, ¿vale?

38
00:04:38,100 --> 00:04:58,399
Y si nosotros ahora abrimos esta página, ¿vale? Es decir, la visualizamos, para ello podremos darle aquí a Opening Browser, ¿vale? Botón derecho, Opening Browser. Esto nos abrirá un archivo en nuestro navegador, el que nosotros estamos utilizando, ¿vale?

39
00:04:58,399 --> 00:05:51,310
En mi caso yo utilizo el Firefox y a ver si se me abre y os lo puedo enseñar. Si no, lo abro yo directamente. Voy a probar a abrirlo. Vale, entonces, fijaros, esto sería lo que se vería al crear la página web, ¿vale?

40
00:05:51,310 --> 00:06:04,449
Lo que veis es lo que hablábamos de la cabecera, la etiqueta H1, ¿vale? Esto sería la etiqueta P y el title que está dentro de la cabecera, pues si os dais cuenta, se ve justo aquí, ¿vale?

41
00:06:04,470 --> 00:06:17,529
Donde pone mi primera página web, ¿vale? Ahí lo podréis ver. ¿Ok? Bueno, pues con esto ya podríamos hacer una primera página web.

42
00:06:17,529 --> 00:06:24,230
Vamos a seguir viendo etiquetas y diferentes contenidos sobre los que podemos trabajar para desarrollar nuestra web.