1
00:00:00,110 --> 00:00:11,089
Venga, pues vamos entonces a empezar a conocer nuestro código HTML. Lo único que he hecho ha sido abrir una página web, cualquiera, por ver un poco de qué va esto.

2
00:00:11,089 --> 00:00:22,269
Con el botoncito derecho lo que voy a hacer es ver el código fuente de la página. Sí que es verdad que hay una combinación de teclas, un control, no sé qué, que no me lo sé de memoria, que me lleva un poco a lo mismo.

3
00:00:22,269 --> 00:00:42,289
¿Vale? Si os fijáis bien, cualquier página web tiene una serie de instrucciones que están entre los signos menor que y mayor que. Esto, ¿lo veis bien? ¿Os se ve bien? Esto es lo que se conoce como etiqueta.

4
00:00:42,289 --> 00:01:04,030
Y una página web está creada a partir de etiquetas. Y cada etiqueta tiene una función determinada. Todas las páginas web siempre van a comenzar con la etiqueta admiración doctype HTML. Esto realmente no hace nada al código.

5
00:01:04,030 --> 00:01:13,730
Sencillamente es una etiqueta informativa. Es una etiqueta informativa diciendo que el tipo de documento es un código HTML. ¿Vale? Ni más ni menos.

6
00:01:13,730 --> 00:01:30,849
Veis que comienza con una etiqueta que viene HTML y si yo me voy al final, terminará en esa etiqueta con una barrita, ¿vale?

7
00:01:30,849 --> 00:01:48,049
Entre los signos, no sé si lo veis bien, no lo veis bien, no me decís nada chicos, ahí, bueno, ¿vale? Ahí sí que se ve

8
00:01:48,049 --> 00:02:02,849
Veis que al final siempre me viene la misma etiqueta con la barra. Esta es la forma que tiene de trabajar este código HTML. ¿Qué os decía que necesito? Necesito un editor de textos plano.

9
00:02:02,849 --> 00:02:26,009
Yo aquí no sé cuál hay, voy a abrirlo, me voy a oficina, no. Accesorios, anotaciones, no sé cuál. Aquí el editor de texto pluma. Igual que en Windows tenemos el blog de notas, aquí en Linux en el aula tenemos el editor de texto pluma.

10
00:02:26,009 --> 00:02:47,590
¿Vale? Es un editor de texto que no da formato. Os decía, vamos a empezar a crear nuestra primera página web. ¿Qué es lo que necesito? Primero voy a crear la etiqueta diciendo que esto es un documento de tipo HTML, ¿vale?

11
00:02:47,590 --> 00:03:11,810
Que insisto que no me hace nada, solo es informativo. Y todas las páginas web, os decía, comienzan con HTML, ¿vale? Y terminan, voy a copiar y pegar porque tardo menos, control C, control V y le pongo la barrita delante, ¿vale?

12
00:03:11,810 --> 00:03:32,069
¿Vale? Toda la página web la tengo que meter entre esas dos etiquetas, siempre, ¿vale? Siempre. Una página web, ¿qué es lo que tiene? Voy a cerrar esto de aquí, veis que tiene un título o un encabezado, ¿vale? Tiene un encabezado y luego tiene un contenido.

13
00:03:32,069 --> 00:04:03,740
El encabezado es lo que yo veo en la parte superior, en la barra superior de mi ventana. Eso también lo voy a configurar. Siempre, os repito, una página web tiene su cabecera, lo he puesto mal, etiqueta de inicio de cabecera, etiqueta de control C.

14
00:04:03,740 --> 00:04:16,579
la voy a poner por aquí, control V y etiqueta de fin de cabecera. La cabecera lo voy a tener que poner aquí entre medias. ¿Qué es lo que tiene el contenido?

15
00:04:17,000 --> 00:04:29,040
Fuera de la cabecera yo voy a poner mi contenido. El contenido es en una etiqueta que yo llamo body. El body es el cuerpo del control C, lo voy a poner por aquí,

16
00:04:29,040 --> 00:04:39,689
Control-V y le pongo la etiquetita. Todos los contenidos los tengo que meter en esta etiqueta. No se ve... Ay, perdonadme, de verdad.

17
00:04:44,810 --> 00:04:53,949
Chicos, avisadme antes porque es que no estoy de fondo ahí. Vale. ¿Lo veis ahora mejor? Sí, perdonadme, ¿vale?

18
00:04:54,689 --> 00:05:04,370
Os decía, ¿vale? Inicio de mi código, fin de mi código. Inicio de la cabecera, fin de la cabecera. Inicio del cuerpo, fin del cuerpo.

19
00:05:04,670 --> 00:05:16,199
Claro, exactamente las mismas.

20
00:05:16,199 --> 00:05:35,779
Lo que pasa es que muchas veces cuando tú visualizas el código de una página web, yo voy a ver ese código fuente, muchas veces hace referencia a imágenes, a archivos, a elementos que están alojados en el servidor.

21
00:05:35,779 --> 00:06:03,819
Entonces, muchas veces tú no vas a poder copiar íntegramente todos los contenidos porque utiliza hojas de estilo de cascada que no siempre están disponibles y utiliza etiquetas tipo meta, ¿vale? Que son metadatos y esto no siempre lo voy a tener disponible, no siempre, ¿vale? Pero en principio sí, si tú copias y pegas el código, tú lo vas a tener disponible para ti, sí, se puede hacer.

22
00:06:03,819 --> 00:06:30,459
Os quería decir, hay algo muy frecuente y es intercambiar el orden de las etiquetas. Fijaos lo que he hecho, he abierto una etiqueta HID, he abierto una etiqueta BODY, antes de abrir una etiqueta BODY tengo que haber cerrado la etiqueta HID.

23
00:06:30,459 --> 00:06:44,620
¿Me entendéis lo que os quiero decir? Son dos cosas diferentes. Una cosa es la cabecera y otra es el contenido. Con lo cual, lo que aparezca en la cabecera tengo que definirlo.

24
00:06:44,620 --> 00:07:05,300
Aquí voy a definir mi cabecera. Yo no puedo abrir una etiqueta body sin haber cerrado antes la hit. Igual que cuando creo mi código HTML o cojo la etiqueta HTML, todo el contenido tiene que estar entre esas dos etiquetas.

25
00:07:05,300 --> 00:07:13,860
¿Me explico? ¿Sí? Venga, pues esta la voy a quitar de aquí, control X, control V

26
00:07:13,860 --> 00:07:19,500
Ahora mismo no tengo nada, ¿vale? Solo he puesto etiquetas de que aquí voy a poner una cabecera

27
00:07:19,500 --> 00:07:22,300
Y aquí voy a poner un cuerpo, ¿vale? Un contenido

28
00:07:22,300 --> 00:07:25,600
¿Qué voy a poner en la cabecera? Pues voy a poner un título

29
00:07:25,600 --> 00:07:34,120
Y para eso utilizamos una etiqueta que se llama title, ¿vale? De título

30
00:07:34,120 --> 00:07:54,180
Cojo mi etiqueta de título, control-C, la voy a poner aquí, control-V y le pongo la barrita final. Esto lo hago yo porque soy un poco vago y tardo mucho en escribir. ¿Qué título voy a escribir? No sé, voy a crear una página que sea monos.

31
00:07:54,180 --> 00:07:56,360
Vale, pues monos

32
00:07:56,360 --> 00:07:58,339
¿Vale? Mi título va a ser monos

33
00:07:58,339 --> 00:08:02,180
¿Qué voy a poner en el cuerpo?

34
00:08:02,600 --> 00:08:05,319
Pues voy a ir poniendo, por ejemplo, un encabezado

35
00:08:05,319 --> 00:08:09,139
¿Vale? Un encabezado es una etiqueta H

36
00:08:09,139 --> 00:08:14,420
Que puede ser H1, H2, H3, basta el H7

37
00:08:14,420 --> 00:08:16,439
¿Qué me indica el número?

38
00:08:16,620 --> 00:08:18,839
Me indica el tamaño de ese encabezado

39
00:08:18,839 --> 00:08:22,339
El 1 es el más grande, el 7 es el más pequeño

40
00:08:22,339 --> 00:08:50,230
Voy a empezar por poner el H1 y voy a poner, yo qué sé, página principal de monos. Porque es aquí donde voy a ir creando mi página. Os decía que he empezado con la etiqueta H1, que es el que me va a dar el encabezado.

41
00:08:50,230 --> 00:09:04,470
tengo que finalizar mi etiqueta. ¿Estoy entendiendo bien cómo funciona? Creo que sí, ¿verdad? Bueno, he puesto el encabezado. Voy a crear un párrafo.

42
00:09:04,470 --> 00:09:34,629
El párrafo lo utilizamos una etiqueta que es etiqueta P. Y como voy a meter luego alguna imagen y algún hipervínculo, vamos a poner aquí visita los diferentes monos. Pues poneros algo. ¿Vale? Esto es lo que voy a escribir. Empieza mi párrafo y etiqueta de finalización de párrafo.

43
00:09:34,629 --> 00:09:58,679
Me perdonéis un segundito, hacemos esto para el próximo día, ya sé que ha tocado, dos minutitos que no voy a tardar nada más. ¿Qué es lo que tengo que hacer con este archivo? Lo voy a guardar, ya lo tengo creada la estructura básica, lo voy a guardar. Archivo, guardar como, lo tengo que guardar siempre con el código HTML.

44
00:09:58,679 --> 00:10:05,759
Bueno, vale, veo que directamente este me da el código HTML

45
00:10:05,759 --> 00:10:14,840
Si utilizarais el blog de notas, tenéis que ponerle la extensión .html

46
00:10:14,840 --> 00:10:20,600
Yo lo voy a guardar como página principal, como home, por ejemplo

47
00:10:20,600 --> 00:10:26,759
Lo voy a dejar en el escritorio y le voy a guardar

48
00:10:26,759 --> 00:10:29,700
Un segundito chicos, no os escapéis

49
00:10:29,700 --> 00:10:32,580
Esa página home.html

50
00:10:32,580 --> 00:10:34,240
Si yo le hago el doble clic

51
00:10:34,240 --> 00:10:36,399
Voy a ir viendo, como veis, primero

52
00:10:36,399 --> 00:10:39,539
Que me pone el título monos

53
00:10:39,539 --> 00:10:40,440
¿Vale?

54
00:10:40,620 --> 00:10:42,840
Me aparece el encabezado

55
00:10:42,840 --> 00:10:44,860
Y me aparece el contenido

56
00:10:44,860 --> 00:10:45,879
¿Sí?

57
00:10:46,720 --> 00:10:48,820
Probad en casa esta, a ver si os funciona bien

58
00:10:48,820 --> 00:10:49,620
¿Vale?

59
00:10:50,320 --> 00:10:51,200
Sería lo primero

60
00:10:51,200 --> 00:10:52,659
Venga, chicos