1
00:00:00,411 --> 00:00:01,835
Bienvenido a mi página web.

2
00:00:01,835 --> 00:00:04,059
Ya sé... no es una página web muy 
emocionante.

3
00:00:04,059 --> 00:00:07,477
Está completamente en blanco, 
pero todas la páginas web empiezan así,

4
00:00:07,477 --> 00:00:10,166
les mostraré cómo construir esta página.

5
00:00:10,275 --> 00:00:11,681
En primer lugar, dame un minuto

6
00:00:11,681 --> 00:00:14,860
para mostrarte cómo crear el esqueleto 
de esta página web en blanco.

7
00:00:15,389 --> 00:00:16,944
Cada página web comienza con

8
00:00:16,944 --> 00:00:20,384
esta cosa divertida aquí arriba que 
llamamos DOCTYPE.

9
00:00:20,562 --> 00:00:21,961
Esta es una señal para el navegador

10
00:00:21,961 --> 00:00:24,603
de que esta página web está escrita
en HTML moderno

11
00:00:24,603 --> 00:00:27,530
y no en el viejo y raro HTML.

12
00:00:27,931 --> 00:00:31,026
A continuación, sigue la primera 
etiqueta de la página.

13
00:00:31,026 --> 00:00:34,582
HTML es un lenguaje de marcado, 
por lo que todo se refiere a etiquetas.

14
00:00:34,635 --> 00:00:36,399
Una etiqueta es una de esas cosas

15
00:00:36,399 --> 00:00:38,314
que empiezan con un paréntesis angular

16
00:00:38,314 --> 00:00:40,684
y terminan con otro paréntesis angular.

17
00:00:40,745 --> 00:00:42,346
O si te gustan las matemáticas,
tal vez pienses en ellos

18
00:00:42,346 --> 00:00:45,383
como los signos de menor que y 
mayor que.

19
00:00:46,474 --> 00:00:48,356
La primera etiqueta de la página 
siempre es

20
00:00:48,356 --> 00:00:51,343
la etiqueta de HTML justo 
debajo de DOCTYPE.

21
00:00:51,343 --> 00:00:53,871
Ésta es la etiqueta de inicio de HTML,

22
00:00:53,871 --> 00:00:57,055
y hasta abajo está la etiqueta de 
fin de HTML,

23
00:00:57,055 --> 00:00:59,729
que es igual excepto por esta 
barra invertida,

24
00:00:59,729 --> 00:01:01,747
que es realmente importante.

25
00:01:01,889 --> 00:01:05,147
La etiqueta de HTML requiere cada 
una de las otras etiquetas

26
00:01:05,147 --> 00:01:07,354
para construir esta página web.

27
00:01:07,376 --> 00:01:11,051
Es por eso que tenemos la etiqueta de fin de HTML hasta abajo.

28
00:01:11,119 --> 00:01:13,351
Muchas de las etiquetas de HTML
se usan en pares como ésta,

29
00:01:13,351 --> 00:01:15,099
pero no todas.

30
00:01:15,571 --> 00:01:19,176
Debajo de HTML, siempre hay una 
etiqueta de inicio del encabezado.

31
00:01:19,437 --> 00:01:22,146
Ésta contiene etiquetas que ayudan al
navegador a reproducir la página,

32
00:01:22,146 --> 00:01:25,162
pero no contienen nada que el usuario
realmente pueda ver.

33
00:01:25,435 --> 00:01:27,885
Ésta es una etiqueta de tipo meta que le da 
al navegador

34
00:01:27,885 --> 00:01:30,017
más detalles acerca de cómo reproducir 
la página.

35
00:01:30,204 --> 00:01:31,885
Por ejemplo, si estás usando los 
caracteres comunes

36
00:01:31,885 --> 00:01:33,281
del idioma inglés

37
00:01:33,281 --> 00:01:34,747
y no los caracteres difíciles 
de reproducir

38
00:01:34,747 --> 00:01:36,628
del idioma árabe,

39
00:01:36,628 --> 00:01:40,048
entonces debes tener la etiqueta de tipo 
meta charset igual a utf-8.

40
00:01:40,100 --> 00:01:41,578
Después está esta etiqueta de título,

41
00:01:41,578 --> 00:01:45,009
que el navegador usa para poner el 
título de la página.

42
00:01:45,212 --> 00:01:47,623
Esto es lo que se muestra en la pestaña
superior del navegador

43
00:01:47,623 --> 00:01:49,558
en los marcadores y en los resultados 
de las búsquedas.

44
00:01:50,583 --> 00:01:53,430
Aquí en Khan Academy, el título se muestra 
en la parte superior de nuestra página.

45
00:01:53,687 --> 00:01:55,544
Déjame cambiar el título.

46
00:01:55,695 --> 00:01:59,348
Voy a hacer una página de todo 
sobre conejos.

47
00:01:59,348 --> 00:02:01,914
Así que pondré: "Todo sobre conejos"

48
00:02:01,914 --> 00:02:04,923
y probablemente puedas ver que el título
cambia arriba.

49
00:02:05,539 --> 00:02:08,149
Bueno, hemos terminado con esos detalles,

50
00:02:08,149 --> 00:02:11,946
terminamos con la etiqueta de encabezado 
y pasamos a la siguiente etiqueta

51
00:02:11,946 --> 00:02:14,809
donde está todo lo que va a suceder, es la
etiqueta .

52
00:02:15,033 --> 00:02:17,805
Es un poco aburrido ahora, sólo tenemos
el principio y el fin.

53
00:02:18,081 --> 00:02:19,521
¿Qué debería poner aquí?

54
00:02:19,521 --> 00:02:21,921
Bueno, voy a hacer una página web sobre 
conejos,

55
00:02:21,921 --> 00:02:23,155
así que aquí podría poner

56
00:02:23,155 --> 00:02:25,455
un título grande en la parte superior.

57
00:02:25,559 --> 00:02:28,656
Para añadir un título, usamos la etiqueta H1

58
00:02:29,574 --> 00:02:33,154
¡Todo sobre conejos!, muy bien.

59
00:02:33,154 --> 00:02:34,772
En realidad tenemos seis etiquetas que
podríamos usar

60
00:02:34,772 --> 00:02:38,441
para títulos: H1, H2, H3, H4, H5 y H6.

61
00:02:38,461 --> 00:02:41,153
La etiqueta H1 es para el título más 
importante de la página.

62
00:02:41,153 --> 00:02:43,358
y la etiqueta H6 es para el menos 
importante.

63
00:02:43,491 --> 00:02:45,682
Déjame añadir algunos títulos para 
otras secciones.

64
00:02:45,696 --> 00:02:49,035
Voy a usar una etiqueta H2 ya que 
éstas son

65
00:02:49,035 --> 00:02:51,197
secciones menos importantes.

66
00:02:51,957 --> 00:02:55,469
Algunas canciones, ok, muy bien.

67
00:02:56,214 --> 00:02:58,240
Ahora voy a añadir algo de información.

68
00:02:58,402 --> 00:03:00,435
Bueno, mi público objetivo para esta página

69
00:03:00,435 --> 00:03:03,934
son alienígenas que nunca han 
visto un conejo.

70
00:03:03,934 --> 00:03:06,943
Así que mejor les doy una buena 
descripción de los conejos.

71
00:03:07,100 --> 00:03:10,174
De hecho, creo que necesito un párrafo 
completo de información.

72
00:03:10,396 --> 00:03:12,856
¿Cómo puedo marcar un párrafo en HTML?

73
00:03:13,391 --> 00:03:16,049
Con la etiqueta P, por supuesto.

74
00:03:16,470 --> 00:03:20,736
Ponemos la etiqueta P, seguimos adelante

75
00:03:20,736 --> 00:03:22,633
y pegamos la información

76
00:03:22,633 --> 00:03:25,568
para que no tengan que verme tecleando todo.

77
00:03:25,856 --> 00:03:27,116
Hermoso.

78
00:03:27,699 --> 00:03:30,901
Ahora, los alienígenas necesitarán una 
canción para saludar a los conejos,

79
00:03:30,912 --> 00:03:33,170
así que les daré la letra de una de 
mis favoritas.

80
00:03:33,170 --> 00:03:38,170
Una vez más, usamos la etiqueta P y 
pegamos la canción

81
00:03:39,521 --> 00:03:43,419
"Pequeño conejito Foofoo", es una 
buena canción.

82
00:03:43,572 --> 00:03:47,672
Pero, oh, toda la canción se muestra en la 
misma línea.

83
00:03:47,868 --> 00:03:50,315
¿Cómo van a saber los alienígenas 
donde hacer pausa?

84
00:03:50,418 --> 00:03:51,660
¿Por qué el navegador no reproduce

85
00:03:51,660 --> 00:03:54,092
los saltos de línea que le puse?

86
00:03:54,350 --> 00:03:57,052
En realidad los navegadores ignoran
los saltos de línea

87
00:03:57,052 --> 00:03:59,139
y los espacios en blanco de HTML.

88
00:03:59,318 --> 00:04:01,647
Si queremos que el navegador reproduzca un
salto de línea,

89
00:04:01,647 --> 00:04:05,022
tenemos que indicarlo explícitamente 
usando otra etiqueta,

90
00:04:05,022 --> 00:04:08,176
la etiqueta BR que es sinónimo 
de pausa.

91
00:04:08,398 --> 00:04:12,513
Bueno, vamos a recorrer la canción y 
añadir BR después de cada línea.

92
00:04:12,777 --> 00:04:14,885
Ahora sí se ve como letra de canción.

93
00:04:15,440 --> 00:04:18,890
¿Notas algo gracioso en la etiqueta BR?

94
00:04:19,221 --> 00:04:20,851
No tiene etiqueta final.

95
00:04:20,966 --> 00:04:21,938
Si lo piensas,

96
00:04:21,938 --> 00:04:23,492
un salto de línea no tiene ningún 
contenido,

97
00:04:23,492 --> 00:04:25,861
así que no hay nada que terminar.

98
00:04:26,006 --> 00:04:28,496
Todo lo que necesitamos es la etiqueta
de inicio.

99
00:04:29,062 --> 00:04:30,361
Y aquí lo tenemos.

100
00:04:30,456 --> 00:04:32,704
Los alienígenas podrán aprender lo 
básico sobre los conejos

101
00:04:32,704 --> 00:04:35,883
y tú has aprendido lo básico sobre HTML.

102
00:04:36,044 --> 00:04:37,158
Después de que haya terminado de hablar,

103
00:04:37,158 --> 00:04:39,915
practica con esto y trata de cambiar
cosas.

104
00:04:39,976 --> 00:04:43,658
Cuando estés listo, continúa con tu primer 
desafío de HTML.