[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.58,Default,,0000,0000,0000,,Has aprendido mucho sobre las etiquetas HTML.
Dialogue: 0,0:00:02.58,0:00:05.27,Default,,0000,0000,0000,,Pero, ¿ya sabes lo que HTML significa en realidad?
Dialogue: 0,0:00:05.27,0:00:09.62,Default,,0000,0000,0000,,HTML significa HyperText Markup Language (Lenguaje de Marcas de Hipertexto).
Dialogue: 0,0:00:09.62,0:00:14.18,Default,,0000,0000,0000,,Ahora sabes lo que es el Lenguaje de Marcas (o Lenguaje de Marcado), es una manera de usar etiquetas para marcar contenidos.
Dialogue: 0,0:00:14.18,0:00:16.86,Default,,0000,0000,0000,,Pero, ¿qué significa hipertexto?
Dialogue: 0,0:00:16.87,0:00:20.49,Default,,0000,0000,0000,,En realidad es una frase que fue inventada antes que existiera el Internet,
Dialogue: 0,0:00:20.49,0:00:23.82,Default,,0000,0000,0000,,en la década de 1960, para referirse a un texto que está conectado con otro texto
Dialogue: 0,0:00:23.82,0:00:26.26,Default,,0000,0000,0000,,al que el lector puede saltar inmediatamente.
Dialogue: 0,0:00:26.27,0:00:29.72,Default,,0000,0000,0000,,Tim Berners-Lee inventó el HTML,
Dialogue: 0,0:00:29.72,0:00:32.58,Default,,0000,0000,0000,,y otras cosas de Internet, como HTTP,
Dialogue: 0,0:00:32.58,0:00:34.91,Default,,0000,0000,0000,,para conectar un texto con otro texto
Dialogue: 0,0:00:34.91,0:00:36.82,Default,,0000,0000,0000,,localizado en cualquier otra parte del mundo.
Dialogue: 0,0:00:36.82,0:00:39.19,Default,,0000,0000,0000,,¿Cómo conectamos páginas web con otras páginas web
Dialogue: 0,0:00:39.19,0:00:41.28,Default,,0000,0000,0000,,en el Lenguaje de Marcas de Hipertexto?
Dialogue: 0,0:00:41.28,0:00:43.45,Default,,0000,0000,0000,,Con un hipervínculo, por supuesto.
Dialogue: 0,0:00:43.45,0:00:46.28,Default,,0000,0000,0000,,Que ahora llamamos simplemente un enlace.
Dialogue: 0,0:00:46.28,0:00:48.60,Default,,0000,0000,0000,,¿Cómo hacemos un enlace en HTML?
Dialogue: 0,0:00:48.64,0:00:50.30,Default,,0000,0000,0000,,Esto es lo raro.
Dialogue: 0,0:00:50.30,0:00:52.95,Default,,0000,0000,0000,,Tal vez pienses que deberíamos usar una etiqueta de enlace...("link")
Dialogue: 0,0:00:52.95,0:00:57.63,Default,,0000,0000,0000,,Pero en realidad, esa etiqueta se usa para otro tipo de enlace en HTML.
Dialogue: 0,0:00:57.63,0:01:02.75,Default,,0000,0000,0000,,En lugar de eso usamos la etiqueta "a" que significa "ancla".
Dialogue: 0,0:01:02.75,0:01:06.45,Default,,0000,0000,0000,,Esta etiqueta ancla el enlace en una cierta posición de la página
Dialogue: 0,0:01:06.45,0:01:09.37,Default,,0000,0000,0000,,y conecta esa ancla a una página web diferente.
Dialogue: 0,0:01:09.37,0:01:11.99,Default,,0000,0000,0000,,Para hacer un enlace, ya sabes, tenemos que escribir la etiqueta,
Dialogue: 0,0:01:11.99,0:01:14.62,Default,,0000,0000,0000,,pero también tenemos que decidir el texto del enlace,
Dialogue: 0,0:01:14.62,0:01:17.22,Default,,0000,0000,0000,,y después la dirección a la que el enlace se va a dirigir.
Dialogue: 0,0:01:17.23,0:01:24.75,Default,,0000,0000,0000,,Déjenme hacer este enlace a una página con más información sobre el nacimiento de la web.
Dialogue: 0,0:01:24.75,0:01:29.47,Default,,0000,0000,0000,,El texto del enlace debe ir dentro de las etiquetas de inicio y fin.
Dialogue: 0,0:01:29.47,0:01:31.90,Default,,0000,0000,0000,,Así que voy a poner mi cursor aquí dentro y voy a escribir,
Dialogue: 0,0:01:31.90,0:01:36.61,Default,,0000,0000,0000,,"Read more about the history of HTML" (Leer más sobre la historia de HTML).
Dialogue: 0,0:01:36.61,0:01:41.10,Default,,0000,0000,0000,,Ahora podemos ver que el texto se ve como un enlace.
Dialogue: 0,0:01:41.10,0:01:44.40,Default,,0000,0000,0000,,Pero todavía no nos lleva a ninguna parte. Tenemos que añadir una dirección.
Dialogue: 0,0:01:44.40,0:01:47.48,Default,,0000,0000,0000,,En realidad no queremos que la dirección se muestre en la página,
Dialogue: 0,0:01:47.48,0:01:50.01,Default,,0000,0000,0000,,pero es necesario que el navegador la conozca.
Dialogue: 0,0:01:50.01,0:01:53.14,Default,,0000,0000,0000,,Así que la ponemos dentro de un atributo de la etiqueta.
Dialogue: 0,0:01:53.14,0:01:56.99,Default,,0000,0000,0000,,En el atributo "href".
Dialogue: 0,0:01:56.99,0:01:59.79,Default,,0000,0000,0000,,¿Qué significa "href"?
Dialogue: 0,0:01:59.79,0:02:03.26,Default,,0000,0000,0000,,Les voy a dar una pista: Han visto esa "h" muchas veces.
Dialogue: 0,0:02:03.28,0:02:06.12,Default,,0000,0000,0000,,¡Significa "hiper"! Hiper-referencia.
Dialogue: 0,0:02:06.12,0:02:11.96,Default,,0000,0000,0000,,Ahora, voy a pegar la dirección, que también se le llama URL.
Dialogue: 0,0:02:11.96,0:02:16.05,Default,,0000,0000,0000,,¿Te fijaste que la URL inicia con "http:"?
Dialogue: 0,0:02:16.05,0:02:19.11,Default,,0000,0000,0000,,¿Adivina qué significa la "h"? ¡Hiper!
Dialogue: 0,0:02:19.11,0:02:21.68,Default,,0000,0000,0000,,HTML se refiere a todo lo hiper.
Dialogue: 0,0:02:21.68,0:02:25.74,Default,,0000,0000,0000,,Esta URL especifica todo lo que el navegador necesita saber para encontrar la página web:
Dialogue: 0,0:02:25.74,0:02:28.04,Default,,0000,0000,0000,,El protocolo utilizado para encontrarlo,
Dialogue: 0,0:02:28.04,0:02:30.46,Default,,0000,0000,0000,,el dominio,
Dialogue: 0,0:02:30.46,0:02:34.30,Default,,0000,0000,0000,,y la ruta para encontrarla en el servidor.
Dialogue: 0,0:02:34.30,0:02:38.65,Default,,0000,0000,0000,,Podemos decir que ésta es una URL absoluta porque lo especifica todo.
Dialogue: 0,0:02:38.65,0:02:43.57,Default,,0000,0000,0000,,En algunas páginas web, podrías encontrar URLs que inicien con una diagonal y una ruta.
Dialogue: 0,0:02:43.57,0:02:46.18,Default,,0000,0000,0000,,Eso le indica al navegador que se quede en el dominio actual,
Dialogue: 0,0:02:46.18,0:02:48.63,Default,,0000,0000,0000,,y sólo busque una ruta diferente de ese dominio.
Dialogue: 0,0:02:48.64,0:02:50.73,Default,,0000,0000,0000,,A eso se le llama URL relativa.
Dialogue: 0,0:02:50.73,0:02:54.13,Default,,0000,0000,0000,,Nosotros los usamos todos en Khan Academy cuando hacemos enlaces entre nuestros contenidos.
Dialogue: 0,0:02:54.14,0:02:57.62,Default,,0000,0000,0000,,Deberían poner URLs absolutas en las páginas web que hagan aquí,
Dialogue: 0,0:02:57.62,0:02:59.34,Default,,0000,0000,0000,,para estar seguros.
Dialogue: 0,0:02:59.34,0:03:02.15,Default,,0000,0000,0000,,También podemos decirle al navegador dónde abrir la página:
Dialogue: 0,0:03:02.15,0:03:04.77,Default,,0000,0000,0000,,en la ventana actual, o en una nueva ventana.
Dialogue: 0,0:03:04.77,0:03:07.06,Default,,0000,0000,0000,,Para decirle al navegador que abra el enlace en una nueva ventana,
Dialogue: 0,0:03:07.06,0:03:10.80,Default,,0000,0000,0000,,debemos añadir otro atributo: "target".
Dialogue: 0,0:03:10.80,0:03:15.25,Default,,0000,0000,0000,,'target ="_blank"'
Dialogue: 0,0:03:15.25,0:03:19.47,Default,,0000,0000,0000,,Ahora, quiero que pausen el video y traten de hacer click en el enlace.
Dialogue: 0,0:03:19.47,0:03:23.20,Default,,0000,0000,0000,,Adelante, esperaré.
Dialogue: 0,0:03:23.20,0:03:24.46,Default,,0000,0000,0000,,¿Qué pasó?
Dialogue: 0,0:03:24.46,0:03:25.80,Default,,0000,0000,0000,,Probablemente vieron una advertencia
Dialogue: 0,0:03:25.80,0:03:28.24,Default,,0000,0000,0000,,sobre el enlace de una página web generada por el usuario.
Dialogue: 0,0:03:28.24,0:03:30.62,Default,,0000,0000,0000,,Y luego si presionan "OK", el enlace se abre.
Dialogue: 0,0:03:30.62,0:03:33.12,Default,,0000,0000,0000,,Eso se debe a que tratamos los enlaces de una manera especial
Dialogue: 0,0:03:33.12,0:03:34.42,Default,,0000,0000,0000,,en las páginas web que hacemos aquí.
Dialogue: 0,0:03:34.42,0:03:37.80,Default,,0000,0000,0000,,Porque no queremos que los usuarios piensen que los enlaces están respaldados
Dialogue: 0,0:03:37.80,0:03:41.08,Default,,0000,0000,0000,,por Khan Academy y de pronto lleguen a un sitio web inesperado, de miedo.
Dialogue: 0,0:03:41.08,0:03:43.99,Default,,0000,0000,0000,,Así que cada enlace que hagas aquí tendrá esa advertencia,
Dialogue: 0,0:03:43.99,0:03:46.32,Default,,0000,0000,0000,,y cada enlace se abrirá en una ventana nueva.
Dialogue: 0,0:03:46.32,0:03:50.22,Default,,0000,0000,0000,,Eso significa que en realidad puedo borrar este atributo "target",
Dialogue: 0,0:03:50.22,0:03:53.10,Default,,0000,0000,0000,,porque se ejecuta de cualquier manera.
Dialogue: 0,0:03:53.10,0:03:54.42,Default,,0000,0000,0000,,O, podría dejarlo,
Dialogue: 0,0:03:54.42,0:03:57.76,Default,,0000,0000,0000,,en caso de que quiera mover un día este HTML de Khan Academy
Dialogue: 0,0:03:57.76,0:04:00.88,Default,,0000,0000,0000,,y asegurarme de que el enlace se abrirá en una nueva ventana.
Dialogue: 0,0:04:00.88,0:04:02.79,Default,,0000,0000,0000,,¿Cuándo deberías usar "target"?
Dialogue: 0,0:04:02.79,0:04:06.30,Default,,0000,0000,0000,,Generalemente, si un enlace va a ir a otra página en el mismo dominio,
Dialogue: 0,0:04:06.30,0:04:08.02,Default,,0000,0000,0000,,debería abrir en la misma ventana.
Dialogue: 0,0:04:08.02,0:04:12.23,Default,,0000,0000,0000,,Y si va a una página en otro dominio, debería abrir en una ventana nueva.
Dialogue: 0,0:04:12.24,0:04:13.64,Default,,0000,0000,0000,,Basta de tanto hablar,
Dialogue: 0,0:04:13.64,0:04:16.70,Default,,0000,0000,0000,,déjenme mostrarles otra cosa interesante sobre los enlaces.
Dialogue: 0,0:04:16.70,0:04:18.65,Default,,0000,0000,0000,,Podemos enlazar algo más que textos.
Dialogue: 0,0:04:18.65,0:04:21.66,Default,,0000,0000,0000,,Podemos enlazar imágenes, ¡o texto con imágenes!
Dialogue: 0,0:04:21.66,0:04:26.88,Default,,0000,0000,0000,,Aquí tenemos esta imagen, que es una fotografía de Tim Berners-Lee.
Dialogue: 0,0:04:26.88,0:04:30.48,Default,,0000,0000,0000,,La voy a cortar...
Dialogue: 0,0:04:30.48,0:04:34.10,Default,,0000,0000,0000,,y pegar para que quede aquí dentro de nuestro enlace.
Dialogue: 0,0:04:34.10,0:04:36.07,Default,,0000,0000,0000,,¡Oh! Hermoso.
Dialogue: 0,0:04:36.07,0:04:38.96,Default,,0000,0000,0000,,Ahora si paso el ratón sobre esta imagen,
Dialogue: 0,0:04:38.96,0:04:41.31,Default,,0000,0000,0000,,veo que el cursor cambia a apuntador,
Dialogue: 0,0:04:41.31,0:04:44.38,Default,,0000,0000,0000,,y si presiono en la imagen, me envía a la página web del CERN.
Dialogue: 0,0:04:44.38,0:04:46.95,Default,,0000,0000,0000,,De hecho podrían hacer un enlace de su página entera
Dialogue: 0,0:04:46.95,0:04:49.87,Default,,0000,0000,0000,,y que se convierta en una mancha azul, grande y subrayada.
Dialogue: 0,0:04:49.87,0:04:55.83,Default,,0000,0000,0000,,Pero por favor, ¡no hagan eso!\NAmigos, hagan enlaces con amor.\N