Home Blog/ Transformación digital/
Transformación digital
Conoce todo sobre los hipervínculos y da tus primeros pasos como programadorConoce todo sobre los hipervínculos y da tus primeros pasos como programador

Conoce todo sobre los hipervínculos y da tus primeros pasos como programador

Lourdes Zambrano - 27 Feb 21

Articulo

7 min.

Estamos tan acostumbrados a navegar por la web, que muchas veces no nos damos cuenta de la importancia que tiene el hipervínculo para hacer que nuestra experiencia de navegación sea más agradable y, en general, la vida más fácil.

Quizás justo ahora te estés preguntando: Ok, pero ¿qué es un hipervínculo? La respuesta está más cerca de lo que crees. Pero antes de entrar en detalles, ¿te diste cuenta de esa frase en color azul que acabas de leer? ¡Eso es un hipervínculo! 👈

¿Ves lo normal que es encontrarnos con los hipervínculos al navegar por internet?

Puede parecer un concepto fácil de entender a simple vista: un clic en el texto azul y listo. Pero, la verdad es que el hipervínculo esconde algunos detalles que conviene aprender para entenderlo en su totalidad y poder emplearlo de manera correcta.

Ahora sí, ¡aprendamos juntos sobre los hipervínculos! 🙌

Índice:

  • ¿Qué es un hipervínculo?
  • ¿Para qué sirven los hipervínculos?
  • Tipos de hipervínculo
  • Hipervínculo en HTML
  • BONUS: Hipervínculo en Word y Power Point

 

¿Qué es un hipervínculo?

Un hipervínculo —también conocido como hiperenlace— es, en pocas palabras, una conexión entre dos sitios cualesquiera del mundo digital. Es un atributo que se puede otorgar a una palabra, un texto o una imagen, y que te permitirá ir de un punto A a un punto B con solo un clic. 👆

El punto A o punto de partida, generalmente lo encontramos de forma textual; y cuando esto es así, lo podremos identificar fácilmente, ya que suele tener un formato distinto al resto del texto (normalmente en color azul y subrayado).

En el hipervínculo, el punto B o punto de destino, en cambio, no se limita a un texto o a una imagen. De hecho, este punto de llegada puede ser casi cualquier cosa que imaginemos: un punto de la misma página, del mismo documento, o cualquier otro punto del internet o fuera de él.

¿Para qué sirven los hipervínculos?

Ahora que ya sabemos que es un hipervínculo, quizás nos estemos preguntando ¿para qué sirven? Aquí te lo contamos 🧐. 

Como ya lo vimos, la función del hipervínculo es la de conectar dos destinos digitales de la manera más sencilla posible - con  solo un click - y a una velocidad increíble. Estos destinos pueden encontrarse, fuera de la página, o como hipervínculos de referencia (dentro de la página). 

¿Dónde podemos utilizar los hipervínculos? La respuesta es sencilla, ¡donde queramos! Podemos usar hiperenlaces en nuestros blogs, en nuestras páginas web, en nuestras imágenes y hasta en nuestros videos, con la finalidad de redirigir a nuestros usuarios a una ventana con nueva información o a una sección específica dentro de nuestra web o documento.  

En conclusión, gracias al uso de hipervínculos, podremos:

  • Aumentar las visitas de nuestras webs.
  • Brindarle al usuario una mejor experiencia dentro de nuestras webs. 
  • Aumentar el tiempo que nuestro usuario permanece en la web.

Esto hace que los hipervínculos se conviertan en un recurso importante para la estrategia de posicionamiento online de una empresa. ¡Úsalos con sabiduría! 

Pero, no todo lo que brilla es oro 👀. Debemos tener especial cuidado con que los enlaces a los que redirigimos no estén vencidos. Esto cortaría la cadena de hipervínculos y pondría en tela de juicio la credibilidad de tu sitio web. ¡Mucho cuidado! 

Tipos de hipervínculo

Llegados a este punto, ya nos hemos podido dar cuenta que existen diversos tipos de hipervínculo, de acuerdo a la ubicación de este, ya sea online u offline. Ahora revisaremos algunos de estos.

  • Hipervínculo de texto

Ya lo mencionamos más arriba en el artículo, pero nunca está de más repetirlo. El hipervínculo de texto es aquella palabra o conjunto de palabras que se destacan del resto del texto por tener un formato distinto a este; que generalmente es de color azul y subrayado.

Este tipo de hipervínculo es comúnmente usado para relacionar y conectar dos puntos que guardan estrecha relación entre sí, acerca de un mismo tema.

  • Hipervínculo de imagen

A diferencia del hipervínculo de texto, en el que el enlace se encuentra alojado en una palabra o conjunto de palabras; en el hipervínculo de imagen, el recurso que nos llevará a otra dirección es, como su nombre lo indica, una imagen. 🖼

En pocas palabras, al hacer clic en una imagen que funciona como hipervínculo, esta nos redireccionará a un nuevo destino, ya sea que nos encontremos en un entorno online u offline.

Un claro ejemplo de hipervínculo de imagen son las publicidades que podemos encontrar al navegar por prácticamente cualquier sitio web y que, al hacer clic en ellas, nos enviará a formularios, plataformas de suscripción, etc.

¿Quieres aprender a usar los hipervínculos de imagen en tu estrategia para lograr posicionamiento SEO? Te recomendamos este artículo sobre Imagebuilding

  • Hipervínculo de email

Seguramente ya te has topado con este tipo de hipervínculo. Una dirección de correo electrónico resaltada que, al momento de hacer clic en ella, nos lleva a la aplicación de correo electrónico que tengas definida como predeterminada, con la dirección de email ya incluida en la parte del destinatario, listo para que nosotros nos pongamos en contacto. 📧

¡La magia del hipervínculo! Esto nos facilita mantener comunicación con las personas que nos interesen, los cuales pueden ser colaboradores, clientes, etc.

  • Hipervínculos internos:

Usar hiperenlaces dentro de la misma página nos sirve para poder tener la redacción de una manera ordenada y permitirle a nuestros usuarios tener una mejor experiencia de navegación. 

En este mismo artículo te mostramos un claro ejemplo 🤭 

Haz click en la siguiente palabra 👉  índice, ¿te llevó al lugar que esperabas? ¿Si, verdad? Ahí podrás observar que cada punto tiene un hipervínculo que te redirigirá a nuestros subtítulos según los selecciones. ¿Lo viste? ¡La navegación que tengas dentro de esta página será más sencilla! 

  • Hipervínculos externos:

Ahora veamos el siguiente punto, ¿para qué usamos hipervínculos externos? El uso de hipervínculos que nos redirigen a páginas externas nos ayudan a generar mayor tráfico digital y ofrecerle al usuario una gran cantidad de información adicional. 

Por ejemplo, en este artículo te contamos todo sobre los hipervínculos; pero quizás te podría interesar saber también sobre los 20 trucos de Google Chrome que cambiarán tu vida

Gracias a los hiperenlaces externos, podemos dirigir tu atención a temas que quizás puedan ser relevantes para ti, con tan solo un click. Las cadenas de información que podemos lograr con este tipo de hipervínculo son increíbles e infinitas. 😱

Pero, como te mencionamos en el apartado anterior, es necesario tener mucho cuidado con los hipervínculos que escogemos, para no perder credibilidad ante nuestros usuarios 🧐

Hipervínculo en HTML

El HTML es un lenguaje de programación que usan muchas de las páginas web en la actualidad. Por eso es de vital importancia saber cómo crear un hipervínculo mediante este lenguaje. ¡No te preocupes! Aquí te daremos las pautas de cómo hacerlo. 

Para empezar, tenemos que tener en cuenta que para poder crear un hipervínculo con el lenguaje HTML debemos llevar utilizar un elemento principal (<a>) y 2 operaciones fundamentales: establecer los marcadores e introducir las direcciones de los enlaces. 

Ahora sí, el elemento <a> nos ayude a definir la posición que tendrá un hipervínculo dentro del cuerpo de un documento HTML. Las etiquetas HTML que se crean al usar este elemento se llaman ancla. Este es lo primero que tienes que saber para crear hipervínculos en HTML. 

El siguiente paso para crear hipervínculos con el lenguaje HTML es definir los descriptores que se usarán en el enlace. En caso sea un hipervínculo interno, usaremos los descriptores “name” o “id”.  Aquí te mostramos cómo usarlo. 👀

Fuente: conceptode.com   

Una vez que ya hemos definido las secciones en las cuales se realizará el “salto” mediante el hipervínculo, emplearemos el comando “herf” dentro del texto de origen para permitir la acción. 

fuente: conceptode.com

Ya hablamos de los hipervínculos internos, pero ¿cúal es el procedimiento para un hipervínculo externo? ¡Mucho más fácil! En este caso no utilizamos descriptores. Luego del elemento <a> va directamente el comando “herf” seguido del URL externo que se quiera hipervincular. 

Fuente: conceptode.com

¡Un momento! ¿No sabes lo que es el lenguaje HTML pero quieres conocer más sobre el mundo de la programación? Este artículo sobre HTML es para ti 🤩.

Bonus: Hipervínculos en Word 

¡Así es! Los hipervínculos no solo se pueden utilizar en sitios web. Programas de la suite de Office, como Word, también nos permiten crear hipervínculos dentro de sus plataformas. 

La función que tienen los hiperlinks dentro de Word son básicamente los mismos que la web. Podemos crear links que nos redirigen a partes específicas de nuestros documentos o fuera de ellos. 

Hoy te enseñaremos el paso a paso para crear un Hipervínculo en Word 

  1. Una vez que tengamos abierto el documento, identificamos el elemento sobre el cual crearemos el hipervínculo. Del mismo modo que en una web, el elemento a seleccionar puede ser una imagen, un texto, o hasta un correo electrónico. 

  1. Mantenemos el clic derecho presionado hasta que se nos muestre el menú contextual y seleccionamos la opción de hipervínculo. 

  1. Se nos abrirá un cuadro en el cual podremos configurar el destino del hipervínculo. En este caso, nosotros pegamos la página web de Crehana como destino. 

Pero no es la única opción. Observemos la barra lateral izquierda, tenemos 4 opciones que podemos usar para hipervincular nuestro texto o imagen. Te comentamos un poco para que nos sirve cada una. 

  • Archivo o página web existente: Esta es la opción más utilizada. Nos permite insertar el hipervínculo de una página web existente. 

 

  • Lugar dentro del documento: Esta opción vendría a ser el hipervínculo interno de Word. Nos permitirá conectar distintas partes dentro de nuestro documento. Es muy usado en los índices. 

  • Crear nuevo documento: Con esta opción podremos, además de crear un nuevo documento, vincularlo a nuestro documento actual, permitiéndonos así realizar dos acciones a la misma vez. 

  • Dirección de correo electrónico: Como su mismo nombre lo indica, con esta opción podremos enlazar cualquier objeto de nuestro documento a un correo electrónico. 

  1. Una vez que escojamos la opción que mejor nos convenga para realizar el hipervínculo a nuestro documento, solo nos queda dar clic en “aceptar” e, inmediatamente, nuestro texto cambiará de apariencia al clásico color azul subrayado. 

¡Ya sabes lo esencial! 

Esperamos que este artículo te haya ayudado a comprender mejor sobre la naturaleza de los hipervínculos y sus funcionalidades dentro de las páginas web o documentos offline. 

Si te interesó este tema, te invitamos a conocer más sobre el desarrollo web y el lenguaje HTML  en nuestro curso de Introducción al desarrollo web

¡Exitos! ✌