Viernes, 18 Diciembre 2020 20:33

¿Cómo hacer un enlace ancla?

Escrito por
Valora este artículo
(1 Voto)

Cómo hacer un enlaces ancla 

 

¿Para qué sirve un enlace ancla? ¿Cómo se hace?

 

Un enlace ancla nos permitirá desplazarnos a una zona concreta de un artículo haciendo clic sobre una fotografía, un botón o un fragmento de texto. En esta publicación veremos diferentes formas de hacerlo.

 

Generalmente se utiliza para ir a un determinado punto dentro del artículo en el que nos encontramos, pero también podríamos ir a un punto específico de otra publicación.

 

Las funciones son muchas, es algo muy útil que además crea movimiento dentro de nuestro sitio web reduciendo la tasa de rebote, eso sí, si nuestro contenido es muy breve, es posible que facilitando tanto las cosas, lo que hagamos sea reducir el tiempo de permanencia del usuario en nuestro sitio web.

 

¿Sabéis las típicas páginas que utilizan índice de contenidos? Wikipedia por ejemplo. Esas tablas no son más que un conjunto de enlaces ancla.

Se pueden hacer de forma manual mediante código HTML (como explicaremos aquí) o bien mediante un plugin (que si te lo ahorras pues mejor).

 

¿Quieres crear un enlace ancla en Wordpress? o quizás, ¿Quieres crear un enlace ancla en Joomla? ¡Da igual el CMS! Utiliza el editor de código para crear tu enlace ancla o tu índice de contenidos.

 

 

 

Composición de un enlace ancla:

 

La composición es muy simple, para crear el hipervínculo, bastará con añadir #nombredelenlace en el apartado URL, si es dentro de una misma publicación solo deberíamos poner esa fracción, si es dentro de otra publicación, deberíamos poner el enlace completo.

 

Para que veáis una prueba trataremos dos ejemplos (más abajo veremos los códigos)

 

· Ejemplo 1: haz clic aquí para ver el código de los ejemplos. (un enlace ancla dentro de esta misma publicación)

 

· Ejemplo 2: ¿Conoces el diccionario de conceptos básicos? explicamos conceptos como ¿Qué es un enlace ancla? 👈🏻 ¡Pásate!. (Ejemplo de un enlace ancla que nos lleva a un punto concreto de otra publicación)

 

 

 

Código a incluir para crear un enlace ancla

 

El código es muy simple, como os comentaba, por un lado debemos crear el hipervínculo:

 

Cómo crear un enlace ancla

 

Veamos, en el ejemplo 2 como se trata de un enlace que iría a una zona concreta de una publicación externa, deberíamos poner el enlace entero, en el ejemplo 1 bastaría con poner la "#" seguida del nombre con el que hayamos definido ese enlace.

 

¡Recordad una cosa! si habéis partido una publicación en varias páginas, acordaros que cada página tendrá una URL distinta.

 

 

 

Código HTML enlace ancla

 

Acabamos de ver cómo crear el hipervínculo del enlace ancla, veamos ahora qué código debemos insertar:

 

Os pongo dos formas: definir un id a una etiqueta de encabezado, o dentro de un párrafo:

 

Imaginaos que queremos que nuestro enlace vaya a parar a una etiqueta <H3> bastaría con incluir un id en esta etiqueta (bautizarla)

 

<h3 id="ejemplos-enlace-ancla">EJEMPLOS ENLACE ANCLA</H3>

 

 

Y digo H3 como podría haber dicho H2 o cualquier otra etiqueta de encabezado.

 

 

¿Y si queremos ir a cualquier otro punto que no sea un encabezado?

 

Pues podemos hacerlo de diferentes formas, utilizando el código del enlace anterior, bastaría con definir un ID dentro de un párrafo (en este ejemplo nuestro ID será "prueba" os mostramos el código y os dejamos el enlace para que lo podáis probar), generalmente dentro de una etiqueta <SPAN> si no la ves en tu código es que aún no les has dado formato (elige la fuente que quieres usar)

 

<span id="prueba">palabra o párrafo dónde nos llevará el enlace</span>

 

Con el ID le definimos el nombre que utilizaremos para el enlace ancla (recordad: #prueba, lógicamente deberéis cambiar ese texto por lo que queráis)

 

Si le hemos dado ya formato a nuestro código solo tendremos que insertar id="nombrequequeramos"

 

Ejemplo enlace ancla 

 

prueba enlace

👆🏻👆🏻 Pulsa pulsa ¡Verás que funciona! (luego recuerda que estabas en la prueba 1)

 

 

 

 

Otra manera es incluir la siguiente etiqueta dentro de un párrafo:

 

<a name="prueba2"></a>

 

En este caso name hace la misma función que ID, entre <a> y </a> podemos incluir un texto o dejarlo en blanco.

 

 

Ejemplo 2 enlace ancla

 

prueba 2 enlace

👆🏻 👆🏻 Pulsa pulsa ¡Verás que funciona! (recuerda que estabas en la prueba 2)

 

 

 

 ¿Sencillo verdad? ¡Hasta aquí la publicación de hoy!

Si estás empezando te recomendamos echar un vistazo a las secciones Conceptos y ¿Cómo crear una página web?

 

¡Si te ha sido de utilidad comparte!

Te invitamos a seguirnos en Facebook. 👌🏻

 

 

 

 

 

 

Visto 74 veces Modificado por última vez en Lunes, 11 Enero 2021 00:53
Oscar García

“El ingrediente más importante es levantarte y hacer algo. Así de simple. Muchas personas tienen ideas, pero solo algunas deciden hacer algo hoy. No mañana. No la siguiente semana. Sino hoy. El verdadero emprendedor actúa en lugar de soñar” - Nolan Bushnell

Inicia sesión para enviar comentarios