5. Anclas

Después de realizar nuestra primera práctica continuamos los enlaces hipertexto con unos elementos muy relacionados con ellos: las anclas, que nos permitirán crear enlaces especificando a que lugar concreto de una página queremos saltar.

5.1. ¿Qué es un ancla?

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

Figura 2.13. Estructura de los enlaces normales. Al pulsar sobre el texto activo no podemos elegir el lugar de la página al que saltamos, iremos siempre al comienzo.

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.

5.2. 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Ú .

Figura 2.14. En la sección superior puede verse ver una serie de enlaces (las letras mayúsculas) a anclas. En la sección superior se muestra el lugar al que se ha saltado al pulsar sobre la letra S. Podemos deducir que antes de la palabra Salud hay un ancla.

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.

Figura 2.15. Estructura de un enlace a un ancla de la misma página. Cuando pulsamos sobre el enlace el navegador nos transporta hasta el lugar de la página donde está el ancla.

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Ú.

5.3. 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 http://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).

Figura 2.16. Estructura de un enlace a un ancla de otra página. Cuando pulsamos sobre el enlace vamos hasta otra página, pero no al comienzo sino al lugar concreto donde está el ancla.

Sugerencia

Aunque pueden crearse enlaces a anclas que se encuentren en páginas creadas por otros, no es posible modificar las anclas existentes o añadir anclas nuevas con lo que debemos confiar que el autor haya puesto una donde interese. Para averiguar si es así se puede revisar el código de dicha página buscando una cadena de la forma <a name="...">. Hay que tener cuidado con este tipo de enlaces porque el autor de la otra página puede decidir quitar el ancla y todos los enlaces que hagan referencia a ella quedarán inutilizados.

5.4. Uso de enlace y ancla en la misma etiqueta

Hasta ahora hemos visto el uso de la etiqueta <a ...>..</a%gt; de dos maneras diferentes: para crear enlaces hipertexto o para crear anclas. En el primero de los casos se usaba el atributo 'href' para especificar la página que se querías enlazar. En el segundo caso, al crear el ancla, se usaba el atributo 'name' para darle un nombre con el que poder identificarle. Pero ¿qué ocurre si usamos los dos atributos a la vez?, ¿Está permitido? La respuesta es SÍ. En ese caso se estará creando ambas cosas a la vez un enlace o un ancla. Por ejemplo:

	<a href="http://es.gnome.org" name="enlace_gnome_hispano">
	GNOME Hispano
	</a> 
      

En este caso al pulsar sobre la palabra 'GNOME Hispano' se salta a la página de GNOME Hispano. Y por otro lado se puede acceder al lugar de la página donde está este enlace creando una referencia al ancla denominada 'enlace_gnome_hispano'. Es decir, la línea anterior es equivalente a poner las dos siguientes:

	<a name="enlace_gnome_hispano">
	<a href="http://es.gnome.org">
	GNOME Hispano
	/a>
      

Todavía puede plantearse otra pregunta: ¿para que puede servir un enlace-ancla? Esta pregunta tiene mucha lógica porque para lo único que sirve un ancla es para crear un enlace a ella. En el ejemplo anterior se podrías escribir en algún otro lugar de la página:

	<a href="#enlace_gnome_hispano">
	página de GNOME Hispano</a>
	
      

Pero ¿por qué no poner directamente?:

	<a href="http://es.gnome.org">
	página de GNOME Hispano
	</a>
      

Parece más lógico y así no se forza al visitante de la página a dar dos pasos en vez de uno. Sin embargo puede encontrar casos en que el enlace-ancla puede ser conveniente. Por ejemplo, puede ocurrir que se desee poner un enlace a la página de GNOME Hispano desde una página principal. Pero también se quiere hacer caso al consejo de ciertos diseñadores web experimentados de no poner enlaces externos en ella. ¿Cómo solucionarlo? Seguramente el lector ya lo sabrá: se puede tener una página especial con todos los enlaces externos llamada por ejemplo links.html donde estuviese el enlace-ancla anterior. Entonces desde la página principal se escribiría:

	<a href="links.html#enlace_gnome_hispano">
	GNOME Hispano</a>
      

Con lo que además hemos conseguido que el usuario visite otra de nuestras páginas, que en definitiva es uno de los objetivos de todo programador Web: que sus páginas sean vistas.

5.5. El atributo 'title'

El lenguaje HTML define, además de los vistos, otro atributo interesante para la etiqueta <a>..</a>: 'title'. Con este atributo puede escribirse un título o una descripción breve del link. Los navegadores pueden mostrar esta información al usuario de varias maneras:

Nota

No es habitual encontrar el atributo 'title' en muchas páginas, quizá porque Netscape ha decidido ignorarlo y sus usuarios no verán la información que introduzcamos en él de ninguna manera.

Para ver un ejemplo de su uso se utilizá la página titulada "La chistera - Humor y magia" realizada en la primera práctica. En ella se cambia la línea de código:

	<p><a 
	  href="http://www.ciudadfutura.com/areirse">
	¡A Reírse Toca, ¡Ja, ja, ja!</a> 
	</p>
      

Por esta otra con el atributo 'title':

	<p><a
	  href="http://www.ciudadfutura.com/areirse" 
	  title="Yo me reí mucho">¡A Reírse Toca, ¡Ja,
	ja, ja! </a></p>.
      

El resultado puede verse en la figura 2.17. Al pasar el cursor por encima del texto activo nos aparece un bocadillo con el texto del atributo 'title'.

Figura 2.17. Con el atributo 'title' podemos incluir información adicional sobre el Link. Explorer mostrará esta información con un bocadillo.

Sugerencia

Es aconsejable usar 'title' siempre. De esta manera aquellos usuarios (que visiten la página) con navegadores que entiendan este atributo (como Explorer) disfrutarán de una información extra y los que usen otros navegadores que no lo entiendan (como Netscape) se quedarán como si no hubiéramos incluido dicha información, pero en ningún caso saldrán perjudicados.

5.6. Los atributos 'rel' y 'rev'

Antes de terminar con la etiqueta <a> ...</a> es conveniente comentar algunos atributos más que completan su repertorio y que no han sido mencionados hasta ahora porque no son muy usados.

Entre estos destacan 'rel' y 'rev' porque en los últimos estándares de HTML en los que han trabajado conjuntamente Microsoft, Netscape y muchas otras compañías y organizaciones, se les ha dado mayor importancia de la que tienen actualmente.

Estos atributos fueron creados para establecer relaciones entre las páginas enlazadas entre sí. Sin embargo no se ha especificado todavía para que pueden servir estas relaciones. 'rel' y 'rev' sólo existen con vistas a que en un futuro se les dé algún uso. El nombre 'rel' proviene de la palabra inglesa relation (relación) mientras que 'rev' proviene de REVerse relation (relación inversa).

Un ejemplo podría consistir en un libro publicado en Internet donde cada capítulo se ha escrito en una página (capitulo1.html, capitulo2.html, etc.) Puede ser interesante establecer una relación entre cada una de las páginas. Así en el capítulo 4 se podría emplear lo siguiente:

	<a href="capitulo3.html"
	  rel="anterior">Capítulo 3
	</a>
	<a href="capitulo5.html" rel="siguiente">
	Capítulo 5</a>
      

Es decir el capítulo 3 se relaciona con el actual (el cuarto) en que es el anterior y el 5 en que es el siguiente. Un posible uso (futuro) que podría darse a este tipo de relaciones podría ser con vistas a imprimir el libro completo.

El atributo 'rev' establece la misma relación que 'rel' pero a la inversa. En el ejemplo anterior hubiese sido equivalente escribir:

	<a href="capitulo3.html" rev="anterior">
	Capítulo 3 
	</a>
	<a href="capitulo5.html" rev="siguiente">
	Capítulo 5</a>
      

El capítulo actual es el siguiente al tercero y el anterior al quinto.

Por último, para terminar por completo la etiqueta < a>...</a>, sólo nos queda comentar dos atributos: 'urn' y 'methods'. Estos dos atributos existían en los orígenes del lenguaje HTML pero fueron eliminados por su poca utilidad. Los mencionamos únicamente para que el lector no se extrañe si los ve en alguna página, pero no recomendamos su uso.