Los Anclajes o enlaces tipo Ancla en Html5

Ya hemos aprendido a enviar a las visitas a una página u otra de nuestra web. Pero en ocasiones, tenemos páginas con un contenido tan grande que nos interesa enviar a estas visitas no a una página sino a una "parte" concreta de una página de nuestra web. Para que sepas de qué te hablo, me refiero con esto al tipo de enlace que tienes en la parte inferior de las páginas de ComoCrearTuWeb, la flecha de en medio que te dirige hacia la parte superior de la página (Ir arriba). Para estos casos Html ha definido un enlace especial que denomina Ancla o Anclaje. Vamos a ver cómo podemos colocarlos en nuestro sitio.

Usando las anclas o anclajes puedes hacer que cuando las visitas pulsen sobre ese enlace, la ventana del navegador corra hacia esa parte concreta de la misma página o bien, pase a otra página distinta, pero no a su comienzo, sino a la parte media o a la parte que tú desees de esa otra página.

Para verlo más claro aún. Imagina que en una misma página de tu web hablas de películas de acción, y luego, debajo, de películas de humor, y bajo ésta parte, de películas de ciencia ficción. Si defines un ancla o un anclaje en cada uno de sus títulos puedes luego colocar vínculos de modo que al pulsarlos se dirija justo a esa parte de la página. Si defines un ancla al principio del contenido y colocas un enlace en la parte inferior indicando "Ir al principio de la página", al pulsarlo se dirigirá automáticamente a la parte superior, aún siendo la misma página. Lo pillas ahora? Bien, pues vamos a ver cómo se hace esto.

Para empezar hay que definir esa parte a la que quieres enviar a las visitas cuando hagan clic sobre ese enlace que pondremos después. Por ejemplo, veamos cómo se define un ancla en la parte superior.

Basta con colocar esta línea de código en la parte correspondiente:

Con esto definimos un lugar al que podemos enviar a las visitas si pulsan el enlace que luego veremos cómo colocar. Si ahora en la parte inferior colocamos otra línea como esta:

tendremos la posibilidad de poder enviarlas también a la parte baja de esa página web.

Ahora falta colocar el propio enlace. Si queremos enviar a las visitas a la parte superior, lo normal es colocar el enlace en la parte inferior (si el usuario está arriba, para que darle la opción de ir arriba si ya está allí, verdad?). Esto se puede hacer con por ejemplo esta línea de Html:

<a href="#arriba" title="Ir Arriba">Ir arriba</a>

Del mismo modo, podríamos colocar arriba de la página otro enlace que permitiera a las visitas ir al parte inferior (a modo de ejemplo, pues no es una opción que sirva de mucho al lector, no?):

<a href="#abajo" title="Ir Abajo">Ir abajo</a>

Si en una página de tu web escribes mucho texto y tiene digamos 3 partes diferenciadas (3 títulos por ejemplo) podrías definir un ancla en cada uno de esos títulos, y luego colocar un menú en la parte inferior, o en la parte superior, o en ambas, dando la opción a las visitas a dirigirse, dentro de esa misma página, a la sección que deseen.

En ese caso colocarías al principio (o al final) ese menú, de este modo por ejemplo:

<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>

Y ahora solo te faltaría colocar esas 3 anclas justo al lado de esos títulos, líneas de código como ásta:

<h1>Título Uno</h1><a name="titulouno"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que se note el efecto.</p>
<h1>Título Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>
<h1>Título Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>

Si en lugar de querer enviar a las visitas a una parte concreta de esa misma página, quieres enviarlas a una parte concreta de otra página de tu web, has de definir ese ancla en la página y lugar que quieres elegir de destino, como en este ejemplo, pero en el enlace has de colocar además del ancla, la ruta de esa otra página, tal y como aparece aquí abajo:

<a href="pagina-de-destino.html#nombre-del-ancla">Enlace hacia el ancla</a>

Es decir, si en una página de tu web quieres colocar un enlace hacia el título dos que hemos visto en el ejemplo de antes, si esa página que contiene los tres títulos se llama titulares.html, entonces en la otra página tendrías que poner esta línea:

<a href="titulares.html#titulodos">Ir al título dos de la página titulares</a>

Si no ha quedado lo suficientemente claro o te surge alguna duda pregúntanos lo que quieras en el Foro CCTW, oki?