Enlace

La etiqueta Anchor nos permite crear enlaces a otras páginas, documentos, recursos, etc. Recordemos que la etiqueta de apertura es <a> y la etiqueta de cierre es </a>. La etiqueta anchor nos genera un enlace de hipertexto y utiliza el atributo href para definir el destino de ese enlace. A modo de ejemplo:

Anchor puede aplicarse a imágenes también. Más adelante veremos la etiqueta para trabajar con imágenes.

Veremos que en los sitios web o en las aplicaciones continuamente estamos seleccionando elementos que nos llevan o muestran otra cosa. Por ejemplo, a continuación se muestra en header de Renault Argentina, el cual todo lo visible contiene un enlace que dirige al usuario las opciones que tiene dentro del sitio web.

Atributo href

Tendrás que decirle al navegador a qué documento vincular, href significa “referencia de hipertexto” y proporciona la dirección de la página o recurso (su URL) al navegador. La URL siempre debe aparecer entre comillas. La mayoría de las veces apuntará a otros documentos HTML pero también podés apuntarlo a otros recursos web, como imágenes, archivos de audio y video.

👉 ¿Qué es una URL?. Uniform Resource Locator (URL) es una cadena de texto que especifica dónde puede encontrarse un recurso (página, imagen, video, sonido, etc.) en Internet. Es también conocido como dirección WEB o enlace.

Es necesario que el vínculo se realice de modo correcto, sino el resultado será un error 404. La URL puede ser absoluta o relativa.

URLs Absolutas

Las URL absolutas proporcionan la URL completa del documento, incluido el protocolo (http: // o https: //), el nombre de dominio y la ruta como necesario. Debe usar una URL absoluta cuando apunta a un documento en la web (es decir, no en su propio servidor):

href = "http://www.cet30.edu.ar/audio.mp3"

Analisemos de que se trata cada elemento que constituye la URL:

Http

Lo primero que hace la URL es definir el protocolo que se utilizará para esa transacción en particular. Las letras "HTTP" permiten que el servidor sepa utilizar el Protocolo de transferencia de hipertexto o ingrese en el "modo web". También puede ver una URL que comience con https: //, lo que significa que "HTTPS, el protocolo de web seguro".

www.cet30.edu.ar

La siguiente porción de la URL identifica el sitio web por su nombre de dominio. En este ejemplo, el nombre de dominio es "cet30.edu.ar". La parte de "www" al principio es el nombre de host particular en ese dominio. El nombre de host "www" se ha convertido en una convención, pero no es una regla. De hecho, a veces el nombre de host puede omitirse. Puede haber más de un sitio web en un dominio (llamados subdominios). Por ejemplo, también puede haber "alumnos.cet30.edu.ar", "docentes.cet30.edu.ar" o lo que necesitemos.

/2019/fotos/texto.htm

Esta es la ruta absoluta a través de los directorios en el servidor al documento HTML solicitando el documento texto.htm. Las palabras separadas por barras son los nombres de los directorios, comenzando con el directorio raíz del host (como lo indica la inicial /). Debido a que Internet originalmente incluía computadoras que ejecutan el sistema operativo Unix, nuestra forma actual de hacer las cosas aún sigue las reglas y convenciones de Unix, por lo tanto, los nombres de directorio usan / como separadores.

texto.htm

Las páginas gráficamente ricas e interactivas que vemos en la web están generadas por documentos simples de solo texto. El archivo de texto detrás de escena se conoce como el documento de origen. En este caso texto.htm es el documento fuente de la página web que se visualiza en el Browser.

URLs Relativas

Las URL relativas describen la ruta a un archivo relativo al actual documento. Las URL relativas se pueden usar cuando se vincula a otro documento en su propio sitio (es decir, en el mismo servidor). No requiere el protocolo o nombre de dominio, solo el nombre de ruta:

Creando enlaces dentro del mismo sitio

Pensemos al sitio web o a la aplicación que estemos desarrollando como una estructura de directorios (equivalentes a carpetas) que tiene una raíz, es decir, un directorio donde se despliega el proyecto. Supongamos que tenemos un proyecto al que llamaremos “web”, en nuestra computadora vamos a crear un directorio (carpeta) llamado “web”. Esta carpeta será nuestra raíz:

Dentro del directorio “web” se crean el resto de los directorios que dependen de “web” tal como se visualiza en la imagen. Supongamos que dentro del directorio “logos” tengo un archivo llamado logo-cet30.png y quiero acceder a él desde el archivo index.html

¿cómo puedo armar un enlace o hipervínculo a ese archivo?

Primeramente me tengo que ubicar desde donde estoy llamando al recurso, en este caso desde la raíz del proyecto (vuelve a mirar la imagen y sigue la línea que vincula index.html con web) si está al mismo nivel que el nombre del proyecto, significa que index.html está en el raíz. Ahora bien, ¿se encuentra la carpeta logos en el raíz?... No.

El resultado del enlace será:

<a href="/logos/logo-cet30.png">Enlace al logo del CET Nº 30</a>

Veamos el siguiente ejemplo:

Si queremos enlazar la página acerca.html con index.html tendríamos que hacer: Desde acerca.html a index.html

<a href="index.html">Enlace a INDEX</a>

Desde index.html a acerca.html

<a href="acerca.html">Enlace a ACERCA</a>

Veamos otro ejemplo:

Imaginemos ahora que queremos enlazar la página acerca.html con notas.html. Se observa aquí que acerca.html está en el raíz pero notas.html no está en el raíz, se encuentra dentro del directorio páginas.

Desde acerca.html a notas.html

<a href="paginas/notas.html">Enlace a Notas</a>

Desde notas.html a acerca.html

<a href="../acerca.html">Enlace a Acerca</a>

👓 Observa en este caso, el uso de los ../ su utilización sirva para bajar al directorio anterior, en este caso será el raíz.

Último ejemplo

Para finalizar, analicemos el siguiente ejemplo:

Supongamos que queremos enlazar la página index.html que se encuentra en el directorio “paginas” directorio “estudiantes” con la página index.html del raíz.

<a href="../../index.html">Enlace a INDEX</a>

Desde index.html a paginas/estudiantes/index.html

<a href="paginas/estudiantes/index.html">Enlace a Index de Estudiantes</a>

Atributo target

Especifica en donde mostrar la URL enlazada. Esto dependerá del contexto del navegador, siendo posible: pestaña, ventana, iframe. Algunos valores para target son:

• self: carga la URL en el contexto actual
• _blank: carga la URL en un nuevo contexto de navegación. Usualmente es una pestaña, sin embargo, los usuarios pueden configurar los navegadores para utilizar una ventana nueva en lugar de la pestaña.

<a href="paginas/estudiantes/index.html" target="_blank">
    Enlace a Index de Estudiantes
</a>

En el ejemplo anterior el valor de target es _blank, eso significa que la URL relativa que se encuentra en el atributo href será abierta en el contexto de una nueva pestaña.

Creando enlaces dentro de la misma página utilizando el atributo ID

Si deseamos enlazar contenido que está dentro de la misma página, tendremos que utilizar un identificador único por medio de la utilización del atributo id.

El id es un atributo global común a todos los elementos HTML. Define un identificador (ID) único que debe ser único en todo el documento. Su propósito es identificar el elemento al vincularlo ya sea desde un enlace, un css o un código de javascript.

Al utilizar id en un elemento HTML podemos darle solo a ese elemento características especiales. En nuestro caso, un nombre para enlazarlo. Veamos el ejemplo:

<a href="#historia">
    Enlace a Historia
</a>

<h2 id="historia">
    Historia
</h2>

La etiqueta h2 tiene el atributo id con el valor "historia", es decir, que dentro del documento HTML solo ese elemento puede llamarse "historia".

La etiqueta a tiene un hipervínculo a #historia. El signo # significa que se referencia a un id y luego el nombre del id tal cual fue escrito. De esta forma nos vinculamos al elemento h2.

Los nombres a elegir para id no deben contener espacios, tildes, ñ, u otro signo como #,!,@,$,%,&,/,*