Curso completo de HTML - Anclas (I)

¿Qué es un ancla?

Un enlace normal tiene la estructura que podemos ver en la figura 2.13.

Desde una página cualquiera y en cualquier lugar de ella se escribe el código para crear un enlace. Cuando se pulsa sobre el texto activo se salta al comienzo de otra página, tal y como indica la flecha. Usando enlaces a anclas se puede cambiar este comportamiento.

Un ancla es una marca que se sitúa en un punto determinado de una página. Posteriormente se podrá crear un enlace a ese ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra página se salta al lugar donde esté el ancla, es decir, ya no se va al comienzo de la página como con los enlaces vistos hasta ahora. Dicho de otra forma usando anclas es posible que un enlace apunte al lugar concreto de una página que se desee.

Creando anclas

Para crear anclas usamos, al igual que para crear enlaces, la etiqueta <a>, sin embargo no debe confundirse el lector porque aunque ambos elementos estén relacionados y se use la misma etiqueta para crearlos las funciones de cada uno son radicalmente diferentes. Las anclas sólo son marcas y son invisibles cuando visualizamos la página con el navegador. Por esta razón las anclas no definen ningún texto activo.

A pesar de ello es habitual encontrar texto entre las instrucciones de inicio y de fin como en el siguiente ejemplo:

 <a name="nombreAncla">Comienzo</a>
       

Este texto no tiene ningún significado especial y será interpretado por los navegadores de igual forma que el texto de alrededor.

Como se ha adelantado en el ejemplo anterior, al crear anclas no se emplea el atributo 'href'. En su lugar se usa otro llamado 'name'. Con este atributo se da un nombre al ancla que luego nos servirá para referirse a ella.

Un ejemplo donde la utilidad de las anclas se hace evidente es en aquellas páginas en las que nos encontramos una lista ordenada alfabéticamente. Si la lista es muy larga moverse hasta la letra S, por ejemplo puede hacerse molesto. Pero usando anclas el autor de la página puede incluir todas las letras al principio de manera que si se pulsa sobre una letra se salta al lugar de la lista donde empiecen las entradas de la letra S. En la figura 2.14 podemos ver un ejemplo real capturado de la página del buscador español OZÚ .

En este caso se detallan todas las secciones del Web ordenadas alfabéticamente. Al principio de la página hay un listado con todas las letras del abecedario de manera que al pulsar sobre una letra vas al lugar de la página donde están las secciones que empiezan con esa letra. ¿Cómo se hace esto? Es muy sencillo, el proceso consta de dos pasos:

1. Primero hay que insertar el ancla en el lugar de la página donde se quiere poder saltar. Tomando como ejemplo una una página web que contiene un diccionario se emplearía el siguiente código:

   ... <a name="S"> </a> Salud Santa Claus Seguridad ...

2. En segundo lugar se crea un enlace al principio de la página un que apunte al ancla. En este ejemplo el código usado es:

   <a href="#S">S </a>

En este ejemplo al pulsar sobre la letra S se salta directamente al lugar de la página donde se encuentra la palabra salud, que es la primera de las que comienzan con "S", que es el efecto deseado. Para especificar que el enlace apunta a un ancla se ha incluido un signo # seguido del nombre del ancla.

La estructura de un enlace a un ancla que se encuentre en la misma página como el de este ejemplo es la que puede verse en la figura 2.15.

En ella hemos usado un dibujo de un ancla para señalar donde existe un ancla, en un documento real en realidad no existe ningún elemento visual que la identifique, tal y como hemos visto en el ejemplo de OZÚ.

Enlaces a anclas de otras páginas

También es posible crear un enlace a un ancla de otra página. Para ello hay que incluir la página, bien sea mediante su dirección URL o mediante su ruta de directorios, y posteriormente poner el símbolo "#" seguido del nombre del ancla. En este caso es obligatorio poner el nombre del archivo, aunque sea index.html. Siguiendo con el ejemplo anterior para crear un enlace a los términos que empiezan por 'S' de la página donde se situó el ancla puede emplearse el siguiente código:

 <a href="http://www.ozu.es/a-z.html#S">Letra S</a> 
       

Suponiendo que el diccionario estaba en un archivo llamado a-z.html en el servidor de nombre www.ozu.es.

La estructura de los enlaces es ligeramente más complicada que los anteriores. Para crearlos hay que seguir los siguientes pasos:

1. Se parte de un ancla existente en otra página o se crea uno

2. Se crea un enlace a esa página

3. Se añade a la dirección del enlace el símbolo '#' seguido del nombre del ancla

En primer lugar deberemos crear un ancla en la página objetivo. Después deberemos escribir el enlace con la sintaxis explicada anteriormente indicando el nombre de la página y el nombre del ancla. La flecha de la figura 2.16 nos indica el salto que se producirá al pulsar sobre el enlace. Ya no iremos al comienzo de la página como pasaba con los enlaces normales sino que iremos al lugar concreto que hemos elegido (y donde hay un ancla).