-
Has aprendido mucho sobre las etiquetas HTML.
-
Pero, ¿ya sabes lo que HTML significa en realidad?
-
HTML significa HyperText Markup Language (Lenguaje de Marcas de Hipertexto).
-
Ahora sabes lo que es el Lenguaje de Marcas (o Lenguaje de Marcado), es una manera de usar etiquetas para marcar contenidos.
-
Pero, ¿qué significa hipertexto?
-
En realidad es una frase que fue inventada antes que existiera el Internet,
-
en la década de 1960, para referirse a un texto que está conectado con otro texto
-
al que el lector puede saltar inmediatamente.
-
Tim Berners-Lee inventó el HTML,
-
y otras cosas de Internet, como HTTP,
-
para conectar un texto con otro texto
-
localizado en cualquier otra parte del mundo.
-
¿Cómo conectamos páginas web con otras páginas web
-
en el Lenguaje de Marcas de Hipertexto?
-
Con un hipervínculo, por supuesto.
-
Que ahora llamamos simplemente un enlace.
-
¿Cómo hacemos un enlace en HTML?
-
Esto es lo raro.
-
Tal vez pienses que deberíamos usar una etiqueta de enlace...("link")
-
Pero en realidad, esa etiqueta se usa para otro tipo de enlace en HTML.
-
En lugar de eso usamos la etiqueta "a" que significa "ancla".
-
Esta etiqueta ancla el enlace en una cierta posición de la página
-
y conecta esa ancla a una página web diferente.
-
Para hacer un enlace, ya sabes, tenemos que escribir la etiqueta,
-
pero también tenemos que decidir el texto del enlace,
-
y después la dirección a la que el enlace se va a dirigir.
-
Déjenme hacer este enlace a una página con más información sobre el nacimiento de la web.
-
El texto del enlace debe ir dentro de las etiquetas de inicio y fin.
-
Así que voy a poner mi cursor aquí dentro y voy a escribir,
-
"Read more about the history of HTML" (Leer más sobre la historia de HTML).
-
Ahora podemos ver que el texto se ve como un enlace.
-
Pero todavía no nos lleva a ninguna parte. Tenemos que añadir una dirección.
-
En realidad no queremos que la dirección se muestre en la página,
-
pero es necesario que el navegador la conozca.
-
Así que la ponemos dentro de un atributo de la etiqueta.
-
En el atributo "href".
-
¿Qué significa "href"?
-
Les voy a dar una pista: Han visto esa "h" muchas veces.
-
¡Significa "hiper"! Hiper-referencia.
-
Ahora, voy a pegar la dirección, que también se le llama URL.
-
¿Te fijaste que la URL inicia con "http:"?
-
¿Adivina qué significa la "h"? ¡Hiper!
-
HTML se refiere a todo lo hiper.
-
Esta URL especifica todo lo que el navegador necesita saber para encontrar la página web:
-
El protocolo utilizado para encontrarlo,
-
el dominio,
-
y la ruta para encontrarla en el servidor.
-
Podemos decir que ésta es una URL absoluta porque lo especifica todo.
-
En algunas páginas web, podrías encontrar URLs que inicien con una diagonal y una ruta.
-
Eso le indica al navegador que se quede en el dominio actual,
-
y sólo busque una ruta diferente de ese dominio.
-
A eso se le llama URL relativa.
-
Nosotros los usamos todos en Khan Academy cuando hacemos enlaces entre nuestros contenidos.
-
Deberían poner URLs absolutas en las páginas web que hagan aquí,
-
para estar seguros.
-
También podemos decirle al navegador dónde abrir la página:
-
en la ventana actual, o en una nueva ventana.
-
Para decirle al navegador que abra el enlace en una nueva ventana,
-
debemos añadir otro atributo: "target".
-
'target ="_blank"'
-
Ahora, quiero que pausen el video y traten de hacer click en el enlace.
-
Adelante, esperaré.
-
¿Qué pasó?
-
Probablemente vieron una advertencia
-
sobre el enlace de una página web generada por el usuario.
-
Y luego si presionan "OK", el enlace se abre.
-
Eso se debe a que tratamos los enlaces de una manera especial
-
en las páginas web que hacemos aquí.
-
Porque no queremos que los usuarios piensen que los enlaces están respaldados
-
por Khan Academy y de pronto lleguen a un sitio web inesperado, de miedo.
-
Así que cada enlace que hagas aquí tendrá esa advertencia,
-
y cada enlace se abrirá en una ventana nueva.
-
Eso significa que en realidad puedo borrar este atributo "target",
-
porque se ejecuta de cualquier manera.
-
O, podría dejarlo,
-
en caso de que quiera mover un día este HTML de Khan Academy
-
y asegurarme de que el enlace se abrirá en una nueva ventana.
-
¿Cuándo deberías usar "target"?
-
Generalemente, si un enlace va a ir a otra página en el mismo dominio,
-
debería abrir en la misma ventana.
-
Y si va a una página en otro dominio, debería abrir en una ventana nueva.
-
Basta de tanto hablar,
-
déjenme mostrarles otra cosa interesante sobre los enlaces.
-
Podemos enlazar algo más que textos.
-
Podemos enlazar imágenes, ¡o texto con imágenes!
-
Aquí tenemos esta imagen, que es una fotografía de Tim Berners-Lee.
-
La voy a cortar...
-
y pegar para que quede aquí dentro de nuestro enlace.
-
¡Oh! Hermoso.
-
Ahora si paso el ratón sobre esta imagen,
-
veo que el cursor cambia a apuntador,
-
y si presiono en la imagen, me envía a la página web del CERN.
-
De hecho podrían hacer un enlace de su página entera
-
y que se convierta en una mancha azul, grande y subrayada.
-
Pero por favor, ¡no hagan eso!
Amigos, hagan enlaces con amor.
