Hola, hoy vamos a hablar
de hiperenlaces, o enlaces, como se les llama
habitualmente. Y de cómo se pueden utilizar para
vincular tu documento con otros. Los enlaces son los que
hacen de la red una red. Es la idea de que los distintos
enlaces creados juntos crean el conocimiento que los
motores de búsqueda o tú mismo puedes ganar yendo de página a página,
y esperemos con el material relacionado. Vamos a ir a cómo crear
un enlace en tu página. Los enlaces se llaman enlaces de anclaje
y ahí es donde obtendremos la etiqueta a. Cuando usas
una etiqueta a, la etiqueta a, vas a necesitar estar
seguro de que tienes dos partes diferentes. Necesitas una hiper referencia
y necesitas un contenido. La hiper referencia es
la referencia a la ubicación del nuevo contenido. En este caso he usado
http://www.umich.edu. Eso le dice al
navegador que, si alguien hace clic en este enlace, este
es de donde quiero pedir la nueva página. También necesitamos
tener contenido. El contenido es lo que
llamamos la parte clicable. En este caso
es texto. De hecho, hago clic en un texto subrayado
que dice, Universidad de Michigan. Pero en algunos casos, en
su lugar podría ser una imagen. ¿Qué tipos de enlaces
podemos tener? Los más comunes son
los llamados enlaces absolutos. También tenemos
los enlaces relativos. Enlaces internos y enlaces gráficos y voy a mostrarte
ejemplos de cada uno de ellos. En una referencia absoluta en la sección href
de una etiqueta a ponemos una url completa. Es necesario poner
la dirección http o https y un nombre de documento
extra que desees. Si recuerdas que en
una URL hay tres partes, tienes el protocolo,
el host y el documento. Es necesario incluirlas todas
si es una referencia absoluta. Todo lo demás sigue siendo
más o menos lo mismo. Para una referencia relativa,
cambiamos un poco lo que pasa en href. En lugar de enlazar
a algo exterior o incluso a la página web interna, sólo vamos
a poner, en este caso, el nombre del archivo. En este caso vamos a
enlazar con la página 2.html. Puedes ir un poco
más a fondo que eso, también puedes incluir
el nombre de la carpeta. En este caso vamos a
enlazar con page2.html. que está en una carpeta
diferente llamada docs, la tercera manera en que podemos usar una
referencia relativa es utilizando la etiqueta ID. Cuando tienes
href = "#history", estamos diciendo que hay otra ubicación dentro
del mismo archivo y se llama history. Enlaces absolutos
frente a relativos. ¿Cuándo utilizar los enlaces absolutos
frente a los enlaces relativos? Con los enlaces absolutos, dices,
no estoy a cargo de esta página, otro lo está. Si estás enlazando
a la página de otro, utiliza el enlace absoluto
con la referencia completa. Con los relativos es cuando
estás desarrollando tu propio sitio. Y es realmente útil usar enlaces
relativos en lugar de absolutos, de esa manera si mueves tu
página a un servidor diferente, o si la mueves a otra carpeta,
no es necesario cambiarlo todo. Y estos son algunos de los
beneficios de usar enlaces locales, la idea es que no es necesario
actualizar tantas cosas. Una cosa de la que necesitas
asegurarte de no hacer nunca es tener un enlace que incluya algún
tipo de estructura de archivo, lo llamaremos. Revisa tus enlaces. Asegúrate de que nunca dice,
C:page or MyDocumentsPage o cualquier cosa que sea muy
específica de tu computadora. La razón por la que
no debes hacer eso es. Si colocas tu
página en la web. Si lo has hecho, la has puesto
en un servidor o un host y deseas que otras
personas hagan clic. No tiene sentido que sean capaces
de acceder a las páginas que están en tu computadora. Nunca debes tener una referencia
que incluya algo local a tu computadora. Una de las otras cosas
que puedes hacer es que puedes utilizar imágenes
como enlace. El componente clicable
no tiene que ser texto. Lo has visto mucho. Pueden ser
iconos, imágenes, diferentes cosas
en esta línea. En este caso, he entrado
y usado la href normal y lo que estamos cambiando
ahora, no es la href, sino el contenido que va entre la
etiqueta de apertura y la de cierre. Y he puesto una
imagen en su lugar. Asegúrate de que utilizas el texto
alternativo que va junto con la imagen. Y en este caso he
hecho algo muy similar, la única diferencia es que, en
lugar de usar una referencia local para la imagen, he utilizado
una referencia absoluta. He puesto
la URL completa. Hablemos de problemas de
usabilidad y de accesibilidad. Si vas a utilizar un componente
en el que se puede hacer clic, Debes asegurarse de que
tiene un nombre informativo. Hay software que puede enumerar
todos los enlaces de una página para la gente que busca cosas,
que no pueden usar los típicos, los medios típicos
de acceso a la página. No es muy útil para ellos si todos los
enlaces están etiquetados, haga clic aquí, haga clic aquí,
haga clic aquí. Debes darles algún
nombre informativo. También debes asegurarte de
que si estás utilizando una imagen para la parte clicable
de tu enlace. Esa imagen necesita tener
algún tipo de texto alternativo u otra información disponible para
aquellos que no pueden ver la imagen. Déjame mostrarte un ejemplo
codificado de esos tipos de enlaces. ¿Correcto? Como puedes ver aquí, tengo
una referencia a referencias absolutas, referencias relativas, imágenes como
enlaces, y enlaces incrustados, también. Si hiciera clic en Washtenaw Dairy
o en Rosie's Coffee Bar and Bakery, Dexter's Bakery, etcétera, en
realidad, me llevaría a sus páginas. Adelante. Uno de los trucos que quiero
señalar según lo hago es que, según muevo el cursor sobre cada
uno de estos enlaces, si nos fijamos, en la parte inferior de mi navegador,
no puedo mostrarlo al mismo tiempo, pero al resaltarlo, te muestra
la URL a la que vas a ir. Y creo que esto
es muy valioso para saber, porque si alguna
vez estás sobre un enlace, la información que ves en la parte inferior
de la página no coincide con lo que has dicho. Las referencias absolutas
te alejan de tu sitio. Las referencias relativas pueden llevarte
a algo que está dentro de tu carpeta. Esta es una imagen
de unos donuts, he seguido y están en mi carpeta
en mi archivo. Pude enlazar con ellos sólo
con el nombre de la imagen. ¿Correcto? También podemos usar imágenes
como enlaces también. En vez de escribir Doughnuts
from the Squire Shop, sigo y lo hago para que puedas hacer clic en
la imagen para tener una vista más grande. Esta última idea de enlaces
incrustados es interesante. Déjame llevarte al código
por un segundo y mostrarte. Escribo aquí, tengo lo que se llama referencias
relativas con un id = "relative". He incrustado enlaces con una id
que dice "embedded" y aquí, en el mismo principio se
puede ver que tengo div id = "absolute". Con los enlaces incrustados, puedo hacer clic en
cualquiera de ellos y navegar dentro de la misma página. No voy a ir a una
página diferente. No voy a abrir
una pestaña nueva. En su lugar voy a saltar a diferentes
lugares dentro de la página. He ido a absolute. He ido a relative, si trato de
hacer referencias incrustadas no parece que se haya
movido, pero sí lo hizo. Es que ya
estamos allí. Es la forma en que este tipo de
enlaces incrustados o internos funciona. Si en cualquier momento te confunde
cómo esta funcionando el código. Quiero recordarte que
siempre puedes ir a View. Developer y view source
para tener una mejor idea de cómo la gente están
creando sus páginas y sus enlaces. A continuación, vamos
a hablar de objetivos. Las anclas pueden tomar un
atributo target diferente. Iremos a Source y vamos
a agregar un anchor. Es target. Lo que podrías tener como
target es igual a _self. Esta es la acción
predeterminada. Esto va a suceder si no
pones nada en absoluto. Si no incluyes un objetivo, significa
que cuando se hace clic en un enlace, se abrirá en la misma pestaña o ventana
en donde estás buscando en ese momento. Si pones
target =_blank. Vas a dejar la página actual en
la que estás exactamente igual, y abres una nueva pestaña o ventana
donde deseas que se abra la nueva página. Esto tiene su lado positivo
y su lado negativo. La ventaja es que tu sitio
se abrirá en una nueva ventana. El inconveniente es que a mucha gente
no le gusta cuando se siguen añadiendo y añadiendo, y a medida que progresan por tu página,
haces que se abran más y más pestañas. Hay otras dos opciones de las que
no vamos a hablar aquí, pero puedes verlas en las lecturas,
que son top y parent, que se ocupan de si estás captando
la idea de tener múltiples ventanas, marcos, etcétera. Vamos a seguir y asegurarnos
de que comprendes que los enlaces son de vital importancia para tu éxito en este
curso o incluso para la comprensión del HTML. Lo primero que hay que saber es que
una página sin enlaces es extremadamente rara. Y para ser honesta, ni
siquiera es una página web. Solo es un documento. Los enlaces pueden ser
absolutos, relativos e internos. E internos, de nuevo, son el tipo que
tienen el símbolo de almohadilla. Creo que puedo referirme
a ellos como relativos, pero quiero asegurarme que queda claro que el
signo de almohadilla hace que sean internos. Debes tener cuidado al
usar imágenes en enlaces. No es que no sea una gran cosa, y
no estoy diciendo que no debas hacerlo. Solo digo que te asegures de que lo haces
con cuidado para que todos los que ven tu página puedan obtener el mismo contenido
y la misma experiencia que los demás.