Curso completo de HTML - Anclas (II)

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.

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:

• En un margen de la pantalla o mediante una caja de texto (en ocasiones llamadas bocadillos) que aparezca cuando se sitúen el ratón encima de la zona activa del link. Este es el método usado por Explorer .

• Cuando el link ya ha sido pulsado y se esté esperando recibir la página puede mostrarse como texto de espera o anticipo a lo que va a llegar.

• Leyendo el texto (con un sintetizador de voz) cuando se selecciona o se pasa por encima

• etc.

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

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.