Cómo incluir saltos de enlaces en una misma página

Los saltos de enlaces en una misma página son conocidos por «enlaces de anclaje». Son bastantes útiles sobre todo cuando estamos antes un texto denso y, al mismo tiempo, fáciles de implantar en tu sitio web. Seguramente ya sabes para qué se utilizan así que ¡saltamos a la práctica!

Cómo incluir saltos de anclaje

Parte 1: Esto es un enlace de anclaje
Parte 2: Así se crea el salto
Parte 3: Compruébalo


 

Parte 1: Esto es un enlace de anclaje

En esta ocasión no vamos a tener mucho texto pero lo importante es aprender a crear el salto. Como ya sabrás, en el editor de tu CMS (WordPress, Joomla…) puedes editar el contenido de dos formas, de forma Visual o HTML. Si no te manejas con HTML, puedes crear el texto como hasta ahora lo has hecho y cambiar las instrucciones que te daré a continuación en la forma HTML. No te agobies, es muy fácil :D.

Para crear estos enlaces, en la parte superior del documento crearemos los índices o títulos que queremos desarrollar posteriormente, más abajo. En este caso, vamos a desarrollar tres apartados que hemos enumerado.

captura

Una vez creado el índice, nos iremos al visor HTML y buscamos en el desarrollo la línea de código (da igual si no lo entiendes)  que queramos asociar con nuestro índice:

<h3> Parte 1: Esto es un enlace de anclaje</h3>




Parte 2: Así se crea el salto

Una vez que tengas localizado el código en el visor HTML, conviértelo de esta forma:

<h3 id="enlacedeanclaje">Parte 1: Esto es un enlace de anclaje</h3>

Colocaremos un identificador (ID) que posteriormente utilizaremos para asociarlo a la Parte 1. Añadiremos la etiqueta id=»nombrequelequeramosponer». En este caso hemos utilizado como identificador las palabras «enlacedeanclaje». Pues bien, haremos lo mismo para el índice 2 y 3. Por lo que quedaría así:

<h3 id="elsalto">Parte 2: Así se crea el salto</h3>

<h3 id="comprobar">Parte 3: Compruébalo</h3>

Ya tenemos identificadas nuestras tres partes. Ahora sólo tenemos que asociarlas al índice. Volvemos al visor (o si lo prefieres, crea un enlace en HTML) y nos colocamos en el índice. Ahora tenemos que enlazar cada índice con su respectivo desarrollo. ¿Cómo lo enlazamos? Muy fácil:

Colócate en el primer índice y e inserta un enlace. En esta ocasión no vamos a poner una dirección web puesto que no queremos ir a otra página sino que queremos dar un salto en la que nos encontramos. ¿Te acuerdas de los ID que definimos anteriormente? Pues ha llegado el momento de usarlos. En lugar de  una dirección web, colocaremos el id precedido por #. ¡Así de simple! Y lo haremos para cada índice. Por lo que quedaría de esta forma:

#enlacedeanclaje

#elsalto

#compruebalo




Parte 3: Compruébalo

Check it out! ¡Es momento de comprobar los enlaces! Seguro que todo te ha ido de maravilla. Si no te ha quedado claro, escríbeme un comentario y te ayudaré encantada :D

 

contador de visitas com

Periodista y SEO. Autora de éste blog donde comparto mis conocimientos y curiosidades sobre SEO y Márketing Digital. Actualmente, entrepeneur en The Conservas.



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *