0:00:00.411,0:00:01.835
Bienvenido a mi página web.

0:00:01.835,0:00:04.059
Ya sé... no es una página web muy [br]emocionante.

0:00:04.059,0:00:07.477
Está completamente en blanco, [br]pero todas la páginas web empiezan así,

0:00:07.477,0:00:10.166
les mostraré cómo construir esta página.

0:00:10.275,0:00:11.681
En primer lugar, dame un minuto

0:00:11.681,0:00:14.860
para mostrarte cómo crear el esqueleto [br]de esta página web en blanco.

0:00:15.389,0:00:16.944
Cada página web comienza con

0:00:16.944,0:00:20.384
esta cosa divertida aquí arriba que [br]llamamos DOCTYPE.

0:00:20.562,0:00:21.961
Esta es una señal para el navegador

0:00:21.961,0:00:24.603
de que esta página web está escrita[br]en HTML moderno

0:00:24.603,0:00:27.530
y no en el viejo y raro HTML.

0:00:27.931,0:00:31.026
A continuación, sigue la primera [br]etiqueta de la página.

0:00:31.026,0:00:34.582
HTML es un lenguaje de marcado, [br]por lo que todo se refiere a etiquetas.

0:00:34.635,0:00:36.399
Una etiqueta es una de esas cosas

0:00:36.399,0:00:38.314
que empiezan con un paréntesis angular

0:00:38.314,0:00:40.684
y terminan con otro paréntesis angular.

0:00:40.745,0:00:42.346
O si te gustan las matemáticas,[br]tal vez pienses en ellos

0:00:42.346,0:00:45.383
como los signos de menor que y [br]mayor que.

0:00:46.474,0:00:48.356
La primera etiqueta de la página [br]siempre es

0:00:48.356,0:00:51.343
la etiqueta de HTML justo [br]debajo de DOCTYPE.

0:00:51.343,0:00:53.871
Ésta es la etiqueta de inicio de HTML,

0:00:53.871,0:00:57.055
y hasta abajo está la etiqueta de [br]fin de HTML,

0:00:57.055,0:00:59.729
que es igual excepto por esta [br]barra invertida,

0:00:59.729,0:01:01.747
que es realmente importante.

0:01:01.889,0:01:05.147
La etiqueta de HTML requiere cada [br]una de las otras etiquetas

0:01:05.147,0:01:07.354
para construir esta página web.

0:01:07.376,0:01:11.051
Es por eso que tenemos la etiqueta de fin de HTML hasta abajo.

0:01:11.119,0:01:13.351
Muchas de las etiquetas de HTML[br]se usan en pares como ésta,

0:01:13.351,0:01:15.099
pero no todas.

0:01:15.571,0:01:19.176
Debajo de HTML, siempre hay una [br]etiqueta de inicio del encabezado.

0:01:19.437,0:01:22.146
Ésta contiene etiquetas que ayudan al[br]navegador a reproducir la página,

0:01:22.146,0:01:25.162
pero no contienen nada que el usuario[br]realmente pueda ver.

0:01:25.435,0:01:27.885
Ésta es una etiqueta de tipo meta que le da [br]al navegador

0:01:27.885,0:01:30.017
más detalles acerca de cómo reproducir [br]la página.

0:01:30.204,0:01:31.885
Por ejemplo, si estás usando los [br]caracteres comunes

0:01:31.885,0:01:33.281
del idioma inglés

0:01:33.281,0:01:34.747
y no los caracteres difíciles [br]de reproducir

0:01:34.747,0:01:36.628
del idioma árabe,

0:01:36.628,0:01:40.048
entonces debes tener la etiqueta de tipo [br]meta charset igual a utf-8.

0:01:40.100,0:01:41.578
Después está esta etiqueta de título,

0:01:41.578,0:01:45.009
que el navegador usa para poner el [br]título de la página.

0:01:45.212,0:01:47.623
Esto es lo que se muestra en la pestaña[br]superior del navegador

0:01:47.623,0:01:49.558
en los marcadores y en los resultados [br]de las búsquedas.

0:01:50.583,0:01:53.430
Aquí en Khan Academy, el título se muestra [br]en la parte superior de nuestra página.

0:01:53.687,0:01:55.544
Déjame cambiar el título.

0:01:55.695,0:01:59.348
Voy a hacer una página de todo [br]sobre conejos.

0:01:59.348,0:02:01.914
Así que pondré: "Todo sobre conejos"

0:02:01.914,0:02:04.923
y probablemente puedas ver que el título[br]cambia arriba.

0:02:05.539,0:02:08.149
Bueno, hemos terminado con esos detalles,

0:02:08.149,0:02:11.946
terminamos con la etiqueta de encabezado [br]y pasamos a la siguiente etiqueta

0:02:11.946,0:02:14.809
donde está todo lo que va a suceder, es la[br]etiqueta .

0:02:15.033,0:02:17.805
Es un poco aburrido ahora, sólo tenemos[br]el principio y el fin.

0:02:18.081,0:02:19.521
¿Qué debería poner aquí?

0:02:19.521,0:02:21.921
Bueno, voy a hacer una página web sobre [br]conejos,

0:02:21.921,0:02:23.155
así que aquí podría poner

0:02:23.155,0:02:25.455
un título grande en la parte superior.

0:02:25.559,0:02:28.656
Para añadir un título, usamos la etiqueta H1

0:02:29.574,0:02:33.154
¡Todo sobre conejos!, muy bien.

0:02:33.154,0:02:34.772
En realidad tenemos seis etiquetas que[br]podríamos usar

0:02:34.772,0:02:38.441
para títulos: H1, H2, H3, H4, H5 y H6.

0:02:38.461,0:02:41.153
La etiqueta H1 es para el título más [br]importante de la página.

0:02:41.153,0:02:43.358
y la etiqueta H6 es para el menos [br]importante.

0:02:43.491,0:02:45.682
Déjame añadir algunos títulos para [br]otras secciones.

0:02:45.696,0:02:49.035
Voy a usar una etiqueta H2 ya que [br]éstas son

0:02:49.035,0:02:51.197
secciones menos importantes.

0:02:51.957,0:02:55.469
Algunas canciones, ok, muy bien.

0:02:56.214,0:02:58.240
Ahora voy a añadir algo de información.

0:02:58.402,0:03:00.435
Bueno, mi público objetivo para esta página

0:03:00.435,0:03:03.934
son alienígenas que nunca han [br]visto un conejo.

0:03:03.934,0:03:06.943
Así que mejor les doy una buena [br]descripción de los conejos.

0:03:07.100,0:03:10.174
De hecho, creo que necesito un párrafo [br]completo de información.

0:03:10.396,0:03:12.856
¿Cómo puedo marcar un párrafo en HTML?

0:03:13.391,0:03:16.049
Con la etiqueta P, por supuesto.

0:03:16.470,0:03:20.736
Ponemos la etiqueta P, seguimos adelante

0:03:20.736,0:03:22.633
y pegamos la información

0:03:22.633,0:03:25.568
para que no tengan que verme tecleando todo.

0:03:25.856,0:03:27.116
Hermoso.

0:03:27.699,0:03:30.901
Ahora, los alienígenas necesitarán una [br]canción para saludar a los conejos,

0:03:30.912,0:03:33.170
así que les daré la letra de una de [br]mis favoritas.

0:03:33.170,0:03:38.170
Una vez más, usamos la etiqueta P y [br]pegamos la canción

0:03:39.521,0:03:43.419
"Pequeño conejito Foofoo", es una [br]buena canción.

0:03:43.572,0:03:47.672
Pero, oh, toda la canción se muestra en la [br]misma línea.

0:03:47.868,0:03:50.315
¿Cómo van a saber los alienígenas [br]donde hacer pausa?

0:03:50.418,0:03:51.660
¿Por qué el navegador no reproduce

0:03:51.660,0:03:54.092
los saltos de línea que le puse?

0:03:54.350,0:03:57.052
En realidad los navegadores ignoran[br]los saltos de línea

0:03:57.052,0:03:59.139
y los espacios en blanco de HTML.

0:03:59.318,0:04:01.647
Si queremos que el navegador reproduzca un[br]salto de línea,

0:04:01.647,0:04:05.022
tenemos que indicarlo explícitamente [br]usando otra etiqueta,

0:04:05.022,0:04:08.176
la etiqueta BR que es sinónimo [br]de pausa.

0:04:08.398,0:04:12.513
Bueno, vamos a recorrer la canción y [br]añadir BR después de cada línea.

0:04:12.777,0:04:14.885
Ahora sí se ve como letra de canción.

0:04:15.440,0:04:18.890
¿Notas algo gracioso en la etiqueta BR?

0:04:19.221,0:04:20.851
No tiene etiqueta final.

0:04:20.966,0:04:21.938
Si lo piensas,

0:04:21.938,0:04:23.492
un salto de línea no tiene ningún [br]contenido,

0:04:23.492,0:04:25.861
así que no hay nada que terminar.

0:04:26.006,0:04:28.496
Todo lo que necesitamos es la etiqueta[br]de inicio.

0:04:29.062,0:04:30.361
Y aquí lo tenemos.

0:04:30.456,0:04:32.704
Los alienígenas podrán aprender lo [br]básico sobre los conejos

0:04:32.704,0:04:35.883
y tú has aprendido lo básico sobre HTML.

0:04:36.044,0:04:37.158
Después de que haya terminado de hablar,

0:04:37.158,0:04:39.915
practica con esto y trata de cambiar[br]cosas.

0:04:39.976,0:04:43.658
Cuando estés listo, continúa con tu primer [br]desafío de HTML.