Ligas o hipervínculos en HTML

Ligas o hipervínculos en HTML

Ligas o hipervínculos en HTML

Las ligas o hipervínculos en HTML son los elementos que le dan vida a Internet, nos dan la posibilidad de ir de un sitio o de un documento a otro. A eso se refiere el HyperText, de las siglas HTML.

Se le conoce como Navegación al ir dando clic de un documento a otro en Internet.

La instrucción que forma una liga es a.

Por omisión, el Navegador muestra la liga en color azul y subrayada en caso de ser texto, o con un marco en caso de ser imagen.

Ancla (Anchor)
<a></a>

elementoLinea Elemento en línea

Su principal atributo es href, que indica hacia donde se debe dirigir al seleccionar el ancla, el valor de este atributo debe ir entre comillas y antecedido por un signo de igual.

Entre la apertura y cierre de la etiqueta <a></a> se debe poner la palabra, frase, imagen o elemento que servirá de ancla, es decir, el elemento al que se le dará clic para llevarnos a otro lugar.

 

Ligas

Existen varios tipos de ligas o hipervínculos en HTML:

  • Ligas externas.
  • Ligas internas.
  • Ligas a identificadores del mismo documento.
  • Ligas a correo electrónico.
  • Ligas a números de teléfono.

Ligas externas

Se conoce como liga externa al tipo de liga que nos lleva a un sitio ajeno al que estamos, es decir, a un documento o página fuera del conjunto de documentos que forman el sitio web donde se encuentra el ancla.

Como valor del atributo href (entre comillas), debemos poner la URL o dirección a la que nos llevará la liga.

Sin excepción, debemos anteponer a la dirección las siglas:

http://

(Hypertext Transfer Protocol o Protocolo de Transferencia de Hipertexto, es el protocolo que permite la transferencia de información en la Web).

De lo contrario no se reconoce como un enlace externo y al dar click seguramente obtendremos un error 404 (de página no encontrada)

See the Pen ligaExterna by Miguel Méndez (@codigo-web) on CodePen.0

Ligas internas

Las ligas internas son el tipo de liga que nos lleva a otra página o documento dentro del conjunto de archivos que conforman el sitio web donde nos encontremos.

<h1>Liga interna</h1>
<a href="nosotros.html">Liga a una página llamada nosotros (ubicada en el mismo nivel del árbol del documentos)</a>

Es muy importante comprender el llamado Arbol de documentos, para saber como componer las ligas internas.

Arbol de documentos

Como mencionaba en el artículo de Introducción a HTML, todos los archivos que componen el sitio web deben estar contenidos en una Carpeta de trabajo, también conocida como Carpeta raíz. En esta carpeta también pueden existir subcarpetas, para una mejor organización de los archivos. Este conjunto de elementos conforman el llamado Arbol de documentos.

Arbol de documentos
Arbol de documentos

Ligas entre distintos niveles del árbol de documentos

Ligas en el mismo nivel

En el ejemplo, los archivos index.html, nosotros.html y contacto.html, comparten el mismo nivel en el árbol (se encuentran directamente en raíz). No existe ninguna subcarpeta que los separe.

mismoNivel
Ligas al mismo nivel

En este caso, la ruta para ligar entre si estos archivos, es simple:

<a href="index.html">Liga a index</a>
<a href="nosotros.html">Liga a nosotros</a>
<a href="contacto.html">Liga a contacto</a>
Ligas entre diferentes niveles

El primer nivel en el árbol de documentos es el nivel de raíz. Los documentos que se encuentren en una subcarpeta que se encuentra en raíz, estarán en un segundo nivel y así sucesivamente.

Niveles

Si los documentos que deseamos ligar se encuentran en diferentes niveles, es decir, tienen una o varias subcarpetas de por medio, no podemos utilizar solamente el nombre del archivo, por que no se encuentra en el mismo nivel.

Liga a un documento en un nivel inferior

Se dice que la liga es descendiente si para llegar al archivo es necesario “bajar de nivel”, por ejemplo:

  • Pasar de un nivel de raíz a un segundo, tercer, cuarto, … nivel.
  • Pasar de un segundo nivel a un tercero, cuarto, quinto, … nivel.

En este caso, incluimos el nombre de cada subcarpeta seguida por una diagonal (/) antes del nombre del archivo a ligar.

Bajar nivel

En el ejemplo, desde index.html se desea ligar el archivo servicio.html que se encuentra en la subcarpeta Servicios:

<a href="Servicios/servicio.html">Liga a archivo servicio desde index</a>
Liga a un documento en un nivel superior

El caso contrario es cuando deseamos ligar un documento que se encuentra en un nivel al cual hay que “subir”, pasando por una o varias subcarpetas.

En este caso, es necesario incluir dos putos seguido por una diagonal (../) por cada subcarpeta por la que haya que ascender, antes del nombre del archivo a ligar.

Subir nivel

En este ejemplo, desde servicio.html se desea ligar el archivo index.html, que se encuentra en un nivel superior (en este caso raíz):

<a href="../index.html">Liga a archivo index desde servicio</a>
Liga a un documento “subiendo” y “bajando”

Un escenario mas complicado, pero en la práctica bastante común, es cuando para llegar al documento a ligar hay que “subir” uno o varios niveles para después “bajar” uno o varios niveles.

Subir bajar

En el ejemplo, desde el archivo servicio.html (que se encuentra en la subcarpeta Servicios) deseamos ligar el archivo producto.html (que se encuentra en la subcarpeta Productos).

Primero debemos “subir” de la subcarpeta Servicios a Raíz, para posteriormente “bajar” a la subcarpeta Productos y acceder al archivo producto.html.

<a href="../Productos/producto.html">Liga a producto desde servicio</a>

Si deseamos que la liga, sea externa o interna se muestre en una pestaña nueva, empleamos el atributo target, con valor _blank:

See the Pen ligaExternaPestania by Miguel Méndez (@codigo-web) on CodePen.0

Ligas a identificadores del mismo documento

Si nuestro documento es muy largo, es posible identificar diferentes secciones de este mediante el atributo id en algunas instrucciones, para posteriormente poder ligar a esa sección del documento y llegar a ella sin necesidad de utilizar el scroll del Navegador.

Anclas

See the Pen anclas by Miguel Méndez (@codigo-web) on CodePen.0

En cada una de las ligas, el valor del atributo href debe ser el nombre que se le puso al identificador de la sección correspondiente, antecedido por el símbolo de número (#). En el ejemplo, la liga que lleva a la sección de inicio es:

<a href="#inicio">Inicio</a>

El atributo id (identificador) se puede colocar a cualquier instrucción de HTML, su función es proporcionarle al elemento un valor único en la página, por lo que NO se le debe asignar a ningún otro elemento de la página un id con el mismo valor.

El valor del atributo id debe ser sin espacios, acentos ni caracteres especiales.

Liga a un correo electrónico

Si se desea, podemos hacer que al dar clic sobre una liga se abra el programa de correo electrónico y genere un nuevo correo con el campo Para: con la dirección de correo que especifiquemos.

Como valor del atributo href, debemos ingresar la palabra mailto seguido por dos puntos y la dirección de correo electrónico (sin espacios):

See the Pen ligaCorreo by Miguel Méndez (@codigo-web) on CodePen.0

Liga a un número telefónico

La navegación desde un teléfono celular es algo común en estos días, por lo que se ha agregado una liga para marcar al número que especifiquemos:

Como valor del atributo href, debemos ingresar la palabra tel seguido por dos puntos y el número telefónico (sin espacios):

See the Pen ligaTel by Miguel Méndez (@codigo-web) on CodePen.0

Al dar clic sobre la liga desde un teléfono celular, nos permite enlazar la llamada:

Liga a número de teléfono

Como una alternativa, se puede ligar a un número de teléfono para llamar a través de Skype.

Para ello, como valor del atributo href, debemos ingresar la palabra callto seguido por dos puntos y el número telefónico (sin espacios):

See the Pen ligaSkype by Miguel Méndez (@codigo-web) on CodePen.0

Conclusión

Como te podrás haber dado cuenta, la instrucción a de HTML es bastante poderosa, nos permite generar hipervínculos incluso a un número de teléfono.

En la práctica, la parte mas complicada y que vale la pena dominar, debido a que se utiliza para cualquier tipo de llamado a la página, es movernos a través del árbol de documentos. Te invito a practicar generando estructuras mas complejas y ligando los documentos entre sí.

La mayor parte de editores de código modernos cuentan con ayuda para localizar los archivos, en el momento que detectan que escribimos el atributo href=”” se abre una ventana con una vista de selección de archivos, que facilita la localización del archivo deseado.

autocompletar
La ventana de autocompletar en el editor Brackets
Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

1 Comentario en "Ligas o hipervínculos en HTML"

avatar
Ordenar por:   más recientes | más antiguos | más votados
trackback

[…] necesario seguir las mismas consideraciones que se mencionan en el artículo Ligas o hipervínculos en HTML para seguir la ruta a la imagen de forma […]

wpDiscuz