[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.41,0:00:01.84,Default,,0000,0000,0000,,Bienvenido a mi página web.
Dialogue: 0,0:00:01.84,0:00:04.06,Default,,0000,0000,0000,,Ya sé... no es una página web muy \Nemocionante.
Dialogue: 0,0:00:04.06,0:00:07.48,Default,,0000,0000,0000,,Está completamente en blanco, \Npero todas la páginas web empiezan así,
Dialogue: 0,0:00:07.48,0:00:10.17,Default,,0000,0000,0000,,les mostraré cómo construir esta página.
Dialogue: 0,0:00:10.28,0:00:11.68,Default,,0000,0000,0000,,En primer lugar, dame un minuto
Dialogue: 0,0:00:11.68,0:00:14.86,Default,,0000,0000,0000,,para mostrarte cómo crear el esqueleto \Nde esta página web en blanco.
Dialogue: 0,0:00:15.39,0:00:16.94,Default,,0000,0000,0000,,Cada página web comienza con
Dialogue: 0,0:00:16.94,0:00:20.38,Default,,0000,0000,0000,,esta cosa divertida aquí arriba que \Nllamamos DOCTYPE.
Dialogue: 0,0:00:20.56,0:00:21.96,Default,,0000,0000,0000,,Esta es una señal para el navegador
Dialogue: 0,0:00:21.96,0:00:24.60,Default,,0000,0000,0000,,de que esta página web está escrita\Nen HTML moderno
Dialogue: 0,0:00:24.60,0:00:27.53,Default,,0000,0000,0000,,y no en el viejo y raro HTML.
Dialogue: 0,0:00:27.93,0:00:31.03,Default,,0000,0000,0000,,A continuación, sigue la primera \Netiqueta de la página.
Dialogue: 0,0:00:31.03,0:00:34.58,Default,,0000,0000,0000,,HTML es un lenguaje de marcado, \Npor lo que todo se refiere a etiquetas.
Dialogue: 0,0:00:34.64,0:00:36.40,Default,,0000,0000,0000,,Una etiqueta es una de esas cosas
Dialogue: 0,0:00:36.40,0:00:38.31,Default,,0000,0000,0000,,que empiezan con un paréntesis angular
Dialogue: 0,0:00:38.31,0:00:40.68,Default,,0000,0000,0000,,y terminan con otro paréntesis angular.
Dialogue: 0,0:00:40.74,0:00:42.35,Default,,0000,0000,0000,,O si te gustan las matemáticas,\Ntal vez pienses en ellos
Dialogue: 0,0:00:42.35,0:00:45.38,Default,,0000,0000,0000,,como los signos de menor que y \Nmayor que.
Dialogue: 0,0:00:46.47,0:00:48.36,Default,,0000,0000,0000,,La primera etiqueta de la página \Nsiempre es
Dialogue: 0,0:00:48.36,0:00:51.34,Default,,0000,0000,0000,,la etiqueta de HTML justo \Ndebajo de DOCTYPE.
Dialogue: 0,0:00:51.34,0:00:53.87,Default,,0000,0000,0000,,Ésta es la etiqueta de inicio de HTML,
Dialogue: 0,0:00:53.87,0:00:57.06,Default,,0000,0000,0000,,y hasta abajo está la etiqueta de \Nfin de HTML,
Dialogue: 0,0:00:57.06,0:00:59.73,Default,,0000,0000,0000,,que es igual excepto por esta \Nbarra invertida,
Dialogue: 0,0:00:59.73,0:01:01.75,Default,,0000,0000,0000,,que es realmente importante.
Dialogue: 0,0:01:01.89,0:01:05.15,Default,,0000,0000,0000,,La etiqueta de HTML requiere cada \Nuna de las otras etiquetas
Dialogue: 0,0:01:05.15,0:01:07.35,Default,,0000,0000,0000,,para construir esta página web.
Dialogue: 0,0:01:07.38,0:01:11.05,Default,,0000,0000,0000,,Es por eso que tenemos la etiqueta de fin de HTML hasta abajo.
Dialogue: 0,0:01:11.12,0:01:13.35,Default,,0000,0000,0000,,Muchas de las etiquetas de HTML\Nse usan en pares como ésta,
Dialogue: 0,0:01:13.35,0:01:15.10,Default,,0000,0000,0000,,pero no todas.
Dialogue: 0,0:01:15.57,0:01:19.18,Default,,0000,0000,0000,,Debajo de HTML, siempre hay una \Netiqueta de inicio del encabezado.
Dialogue: 0,0:01:19.44,0:01:22.15,Default,,0000,0000,0000,,Ésta contiene etiquetas que ayudan al\Nnavegador a reproducir la página,
Dialogue: 0,0:01:22.15,0:01:25.16,Default,,0000,0000,0000,,pero no contienen nada que el usuario\Nrealmente pueda ver.
Dialogue: 0,0:01:25.44,0:01:27.88,Default,,0000,0000,0000,,Ésta es una etiqueta de tipo meta que le da \Nal navegador
Dialogue: 0,0:01:27.88,0:01:30.02,Default,,0000,0000,0000,,más detalles acerca de cómo reproducir \Nla página.
Dialogue: 0,0:01:30.20,0:01:31.88,Default,,0000,0000,0000,,Por ejemplo, si estás usando los \Ncaracteres comunes
Dialogue: 0,0:01:31.88,0:01:33.28,Default,,0000,0000,0000,,del idioma inglés
Dialogue: 0,0:01:33.28,0:01:34.75,Default,,0000,0000,0000,,y no los caracteres difíciles \Nde reproducir
Dialogue: 0,0:01:34.75,0:01:36.63,Default,,0000,0000,0000,,del idioma árabe,
Dialogue: 0,0:01:36.63,0:01:40.05,Default,,0000,0000,0000,,entonces debes tener la etiqueta de tipo \Nmeta charset igual a utf-8.
Dialogue: 0,0:01:40.10,0:01:41.58,Default,,0000,0000,0000,,Después está esta etiqueta de título,
Dialogue: 0,0:01:41.58,0:01:45.01,Default,,0000,0000,0000,,que el navegador usa para poner el \Ntítulo de la página.
Dialogue: 0,0:01:45.21,0:01:47.62,Default,,0000,0000,0000,,Esto es lo que se muestra en la pestaña\Nsuperior del navegador
Dialogue: 0,0:01:47.62,0:01:49.56,Default,,0000,0000,0000,,en los marcadores y en los resultados \Nde las búsquedas.
Dialogue: 0,0:01:50.58,0:01:53.43,Default,,0000,0000,0000,,Aquí en Khan Academy, el título se muestra \Nen la parte superior de nuestra página.
Dialogue: 0,0:01:53.69,0:01:55.54,Default,,0000,0000,0000,,Déjame cambiar el título.
Dialogue: 0,0:01:55.70,0:01:59.35,Default,,0000,0000,0000,,Voy a hacer una página de todo \Nsobre conejos.
Dialogue: 0,0:01:59.35,0:02:01.91,Default,,0000,0000,0000,,Así que pondré: "Todo sobre conejos"
Dialogue: 0,0:02:01.91,0:02:04.92,Default,,0000,0000,0000,,y probablemente puedas ver que el título\Ncambia arriba.
Dialogue: 0,0:02:05.54,0:02:08.15,Default,,0000,0000,0000,,Bueno, hemos terminado con esos detalles,
Dialogue: 0,0:02:08.15,0:02:11.95,Default,,0000,0000,0000,,terminamos con la etiqueta de encabezado \Ny pasamos a la siguiente etiqueta
Dialogue: 0,0:02:11.95,0:02:14.81,Default,,0000,0000,0000,,donde está todo lo que va a suceder, es la\Netiqueta .
Dialogue: 0,0:02:15.03,0:02:17.80,Default,,0000,0000,0000,,Es un poco aburrido ahora, sólo tenemos\Nel principio y el fin.
Dialogue: 0,0:02:18.08,0:02:19.52,Default,,0000,0000,0000,,¿Qué debería poner aquí?
Dialogue: 0,0:02:19.52,0:02:21.92,Default,,0000,0000,0000,,Bueno, voy a hacer una página web sobre \Nconejos,
Dialogue: 0,0:02:21.92,0:02:23.16,Default,,0000,0000,0000,,así que aquí podría poner
Dialogue: 0,0:02:23.16,0:02:25.46,Default,,0000,0000,0000,,un título grande en la parte superior.
Dialogue: 0,0:02:25.56,0:02:28.66,Default,,0000,0000,0000,,Para añadir un título, usamos la etiqueta H1
Dialogue: 0,0:02:29.57,0:02:33.15,Default,,0000,0000,0000,,¡Todo sobre conejos!, muy bien.
Dialogue: 0,0:02:33.15,0:02:34.77,Default,,0000,0000,0000,,En realidad tenemos seis etiquetas que\Npodríamos usar
Dialogue: 0,0:02:34.77,0:02:38.44,Default,,0000,0000,0000,,para títulos: H1, H2, H3, H4, H5 y H6.
Dialogue: 0,0:02:38.46,0:02:41.15,Default,,0000,0000,0000,,La etiqueta H1 es para el título más \Nimportante de la página.
Dialogue: 0,0:02:41.15,0:02:43.36,Default,,0000,0000,0000,,y la etiqueta H6 es para el menos \Nimportante.
Dialogue: 0,0:02:43.49,0:02:45.68,Default,,0000,0000,0000,,Déjame añadir algunos títulos para \Notras secciones.
Dialogue: 0,0:02:45.70,0:02:49.04,Default,,0000,0000,0000,,Voy a usar una etiqueta H2 ya que \Néstas son
Dialogue: 0,0:02:49.04,0:02:51.20,Default,,0000,0000,0000,,secciones menos importantes.
Dialogue: 0,0:02:51.96,0:02:55.47,Default,,0000,0000,0000,,Algunas canciones, ok, muy bien.
Dialogue: 0,0:02:56.21,0:02:58.24,Default,,0000,0000,0000,,Ahora voy a añadir algo de información.
Dialogue: 0,0:02:58.40,0:03:00.44,Default,,0000,0000,0000,,Bueno, mi público objetivo para esta página
Dialogue: 0,0:03:00.44,0:03:03.93,Default,,0000,0000,0000,,son alienígenas que nunca han \Nvisto un conejo.
Dialogue: 0,0:03:03.93,0:03:06.94,Default,,0000,0000,0000,,Así que mejor les doy una buena \Ndescripción de los conejos.
Dialogue: 0,0:03:07.10,0:03:10.17,Default,,0000,0000,0000,,De hecho, creo que necesito un párrafo \Ncompleto de información.
Dialogue: 0,0:03:10.40,0:03:12.86,Default,,0000,0000,0000,,¿Cómo puedo marcar un párrafo en HTML?
Dialogue: 0,0:03:13.39,0:03:16.05,Default,,0000,0000,0000,,Con la etiqueta P, por supuesto.
Dialogue: 0,0:03:16.47,0:03:20.74,Default,,0000,0000,0000,,Ponemos la etiqueta P, seguimos adelante
Dialogue: 0,0:03:20.74,0:03:22.63,Default,,0000,0000,0000,,y pegamos la información
Dialogue: 0,0:03:22.63,0:03:25.57,Default,,0000,0000,0000,,para que no tengan que verme tecleando todo.
Dialogue: 0,0:03:25.86,0:03:27.12,Default,,0000,0000,0000,,Hermoso.
Dialogue: 0,0:03:27.70,0:03:30.90,Default,,0000,0000,0000,,Ahora, los alienígenas necesitarán una \Ncanción para saludar a los conejos,
Dialogue: 0,0:03:30.91,0:03:33.17,Default,,0000,0000,0000,,así que les daré la letra de una de \Nmis favoritas.
Dialogue: 0,0:03:33.17,0:03:38.17,Default,,0000,0000,0000,,Una vez más, usamos la etiqueta P y \Npegamos la canción
Dialogue: 0,0:03:39.52,0:03:43.42,Default,,0000,0000,0000,,"Pequeño conejito Foofoo", es una \Nbuena canción.
Dialogue: 0,0:03:43.57,0:03:47.67,Default,,0000,0000,0000,,Pero, oh, toda la canción se muestra en la \Nmisma línea.
Dialogue: 0,0:03:47.87,0:03:50.32,Default,,0000,0000,0000,,¿Cómo van a saber los alienígenas \Ndonde hacer pausa?
Dialogue: 0,0:03:50.42,0:03:51.66,Default,,0000,0000,0000,,¿Por qué el navegador no reproduce
Dialogue: 0,0:03:51.66,0:03:54.09,Default,,0000,0000,0000,,los saltos de línea que le puse?
Dialogue: 0,0:03:54.35,0:03:57.05,Default,,0000,0000,0000,,En realidad los navegadores ignoran\Nlos saltos de línea
Dialogue: 0,0:03:57.05,0:03:59.14,Default,,0000,0000,0000,,y los espacios en blanco de HTML.
Dialogue: 0,0:03:59.32,0:04:01.65,Default,,0000,0000,0000,,Si queremos que el navegador reproduzca un\Nsalto de línea,
Dialogue: 0,0:04:01.65,0:04:05.02,Default,,0000,0000,0000,,tenemos que indicarlo explícitamente \Nusando otra etiqueta,
Dialogue: 0,0:04:05.02,0:04:08.18,Default,,0000,0000,0000,,la etiqueta BR que es sinónimo \Nde pausa.
Dialogue: 0,0:04:08.40,0:04:12.51,Default,,0000,0000,0000,,Bueno, vamos a recorrer la canción y \Nañadir BR después de cada línea.
Dialogue: 0,0:04:12.78,0:04:14.88,Default,,0000,0000,0000,,Ahora sí se ve como letra de canción.
Dialogue: 0,0:04:15.44,0:04:18.89,Default,,0000,0000,0000,,¿Notas algo gracioso en la etiqueta BR?
Dialogue: 0,0:04:19.22,0:04:20.85,Default,,0000,0000,0000,,No tiene etiqueta final.
Dialogue: 0,0:04:20.97,0:04:21.94,Default,,0000,0000,0000,,Si lo piensas,
Dialogue: 0,0:04:21.94,0:04:23.49,Default,,0000,0000,0000,,un salto de línea no tiene ningún \Ncontenido,
Dialogue: 0,0:04:23.49,0:04:25.86,Default,,0000,0000,0000,,así que no hay nada que terminar.
Dialogue: 0,0:04:26.01,0:04:28.50,Default,,0000,0000,0000,,Todo lo que necesitamos es la etiqueta\Nde inicio.
Dialogue: 0,0:04:29.06,0:04:30.36,Default,,0000,0000,0000,,Y aquí lo tenemos.
Dialogue: 0,0:04:30.46,0:04:32.70,Default,,0000,0000,0000,,Los alienígenas podrán aprender lo \Nbásico sobre los conejos
Dialogue: 0,0:04:32.70,0:04:35.88,Default,,0000,0000,0000,,y tú has aprendido lo básico sobre HTML.
Dialogue: 0,0:04:36.04,0:04:37.16,Default,,0000,0000,0000,,Después de que haya terminado de hablar,
Dialogue: 0,0:04:37.16,0:04:39.92,Default,,0000,0000,0000,,practica con esto y trata de cambiar\Ncosas.
Dialogue: 0,0:04:39.98,0:04:43.66,Default,,0000,0000,0000,,Cuando estés listo, continúa con tu primer \Ndesafío de HTML.