Enlaces en HTML (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.

La etiqueta Anchor- Propiedades (II).-

Seguimos con las propiedades de la etiqueta <A>:

* NAME="nombre"

Que fija un nombre identificador único para el enlace.

Es ésta una propiedad muy importante, ya que por un lado va a ser la referencia de llamada en el caso de que usemos anclajes en una página, y por otro es el identificador mediante el cual podremos acceder dinámicamente a las propiedades del enlace mediante lenguajes como JavaScript.

La única limitación que tendremos a la hora de elegir un nombre será la propia del lenguaje de script que usemos. Así, si vamos a acceder luego al link mediante JavaScript, que será lo más normal, el nombre no puede empezar por un caracter numérico, por un símbolo extraño ni por un caracter que no pertenezca al conjunto de caracteres anglosajón (una ñ, por ejemplo).

Como ejemplo, y aunque sea meternos un poco en JavaScript, vamos a ver cómo podemos acceder mediante el nombre a un link y leer su propiedad href:

<script language="JavaScript">
    function nombre()
   {
     var referencia=document.links('miEnlace').href;
     alert(referencia);
   }
</script>
<a name="miEnlace" href="enlaces_1.html" onClick="nombre();return false">página 1</a>

que nos da:

página 1

Por cierto, adelantando más cosas, notad cómo he anulado el efecto propio de un enlace añadiendo al código del evento onClick la instrucción "return false". De esta forma no iremos a la página 1.

* ID="nombre"

Propiedad análoga a la anterior en cuanto a su utilidad, pero diferente en el planteamiento. Y me explico:

En un principio, cuando se implementó la etiqueta Anchor, fué necesario establecer la propiedad NAME para fijar los anclajes en una página, y posteriormente, cuando se desarrolló el lenguaje JavaScript, se creó en este lenguaje un objeto links y otro anchors que contenían los enlaces de una página y que permitía acceder a sus propiedades mediante el nombre asignado con la propiedad NAME.

Posteriormente se desarrolló la tecnología DHTML (HTML Dinámico), combinando JavaScript con CSS (Hojas de Estilos en Cascada). Los navegadores más importantes implementaros diferentes objetos en sus motores de JavaScript para poder referirse a los diferentes elementos de una página suceptibles de acceso; Nestcape Navigator introdujo el objeto layers para referirse a las capas presentes en un documento, Internet Explorer introdujo el objeto all, que contiene todos los objetos de una página, y últimamente Nestcape 6x e Internet Explorer 5.5 y 6 han introducido el objeto getElementById, con análogo fin.

Pués bien, para acceder mediante estos objetos a cualquier elemento de una página es preciso que éste tenga un nombre identificador único, y es ahí donde entra la propiedad ID, siendo el nombre asignado mediante ella el que disponemos para acceder a un enlace y leer y/o modificar sus propiedades.

El hecho de que esta etiqueta poséa o pueda poseer dos nombres diferentes no entra en contradicción mutua. Podemos acceder a las propiedades de un enlace considerandolo como pertenecienta al objeto links de JavaScript por su nombre asignado mediante NAME, y podemos acceder a esas mismas propiedades si lo consideramos un objeto de la colección all o getElementById mediante su nombre asignado con ID.

Podemos asociar a un enlace, usando CSS, un estilo propio de fuente, color, tamaño, etc., mediante la asignación de los estilos al nombre definido en ID precedido de una símbolo almohadilla:

#nombre{font-size:12px; color:red;.....}

Además, si hemos asignado una clase de estilos a un enlace mediante CSS y necesitamos cambiar alguna de sus características o la clase entera, deberemos acceder al enlace mediante su nombre definido por la propiedad ID.

No vamos a ver ningún código de ejemplo de esta propiedad, ya que su utilidad fundamental va a estar en el campo del HTML Dinámico, y este manual es fundamentalmente de HTML. Pero sí su resultado, por lo que si pasas el ratón por encima del siguiente enlace verás como cambia de color (y no es mediante los atributos de color de un enlace, que veremos más adelante):

página 1

* CLASS="clase"

El atributo CLASS sirve para asignar una clase de estilos CSS al texto contenido dentro del enlace. La diferencia fundamental entre este atributo e ID es que mediante CLASS podemos asignar al enlace una clase de estilos compartida con otros elementos de la página, no siendo necesario pués que el nombre de la clase sea único. Ejemplo:

<STYLE type=text/css>
  .azul{font-size:18px;font-family:Comic Sans MS;color:#000080;}
</STYLE>
<a class="azul" href="enlaces_1.html">página 1</a>

que nos da:

Mi enlace

* STYLE="propiedad:valor;propiedad:valor;...."

Esta propiedad permite establecer un estilo en línea para un enlace, mediante las parejas propiedad-valor características de CSS. Podemos así fijar la familia de fuente en que va a aparecer el texto del enlace, el tamaño de la fuente, el color, etc.

Tiene una utillidad parecida a la de la propiedad CLASS, diferenciándose de ésta en que mediante STYLE deberemos establecer las propiedades CSS cada vez que la usemos.

Ejemplo:

<a href="pagina.html" style="font-size:18px;color:#993300;">enlace</a>

que nos da:

enlace