HTMLWeb,Manual de enlaces en HTML (IX)

manuales - recursos - gráficos - programación...

Home - HTML - Enlaces en HTML - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10

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

Colores de los enlaces.-

Hemos dicho anteriormente que cuando establecemos un enlace, y si no le indicamos lo contrario al navegador, éste lo presentará de color azul y subrayado, si es un texto, y con un borde azul, si es una imagen. Una vez activado el enlace, el color azul del texto o del borde de la imagen pasará a ser un morado claro. Estos son los colores por defecto de los enlaces. También hemos visto que en el caso de una imagen podemos evitar el borde fácilmente con tan sólo añadir a la etiqueta IMG su propiedad BORDER igualada a cero:

El caso en que el contenido del enlace sea un texto merece un estudio más profundo, ya que disponemos de herramientas para cambiar esta presentación por defecto del mismo, pudiendo conseguir que el texto aparezca como nosotros deseemos, y ésto podemos conseguirlo mediante HTML, mediante CSS y mediante JavaScript.

Antes de entrar en más detalles debemos saber que un enlace puede tener 4 estados diferentes, que son:

- enlace sin visitar: corresponde a un enlace que aún no ha sido pulsado ninguna vez en nuestra visita a la página.

- enlace sobrepasado: corresponde al enlace sobre el que estamos en ese momento pasando el puntero del ratón sobre él.

- enlace activo: corresponde al enlace que ha acaba de ser pulsado.

- enlace visitado: corresponde al enlace que ya ha sido activado con anterioridad en nuestra visita.

Cada uno de estos estados puede tener asociado un color y unas características de estilo diferentes, que teóricamente se deberían poner a cero cada vez que entremos de nuevo en la página, aunque esto no ocurre así del todo porque muchas veces el navegador mantiene en su memoria caché las páginas que hemos visitado con anterioridad, por lo que los enlaces que en una visita anterior hayamos visitado pueden aparecer como tales cuando entremos de nuevo en esa página. La forma de evitar esto es borrar la caché del navegador, con lo que el sistema volverá a su estado inicial.

Vamos a ver las diferentes tácnicas que podemos usar para controlar los estilos de los enlaces.

* Controlando los enlaces con HTML:

El lenguaje HTML nos proporciona tres propiedades de la etiqueta BODY que nos permiten establecer el color de los enlaces:

- link= "color", que asigna color a los enlces normales, los que aún no han sido visitados.

- alink= "color" , que lo asigna al enlace queestá activo

- vlink= "color", que define el color de los enlaces queya hayansido visitados.

Estas propiedades del BODY se complementan con otra que asigna el color al texto normal de la página (el que no es un enlace), que es la propiedad text= "color". En todas ellas el valor "color" debe ser un color válido expresado bien por su nombre compatible web en inglés, bien por su valor hexadecimal.

Vamos a ver un ejemplo de aplicación práctica de estas propiedades del BODY, y luego comentamos algún detalle. Una posible asignación de los colores del texto en nuestrapágina sería la siguiente:

<body alink="green" link="red" vlink="#fa8072" text="blue" bgcolor="#ffff99">
    Este es un texto normal
    <br><br>
    <a href="#" onClick="return false">enlace 1</a><br>
    <a href="#" onClick="return false">enlace 2</a><br>
    <a href="#" onClick="return false">enlace 3</a><br>
</body>

que vamos a abrir en una ventana flotante, para que no se vea afectada por los etilos de esta página.

Si queréis probar los colores adecuadamente, os aconsejo que cada vez que una vez pulsados todos borréis la caché del navegador (Herramientas > Opciones de Internet > Archivos temporales > Borrar archivos), para reinicializar el sistema.

Como podéis apreciar en el ejemplo, una vez que se activan los enlaces van quedando con el color definido en la propiedad vlink ( en Internet Explorer). Y tambien véis que los enlaces siempre aparecen subrayados; esto es así porque mediante propiedades HTML no es posible eliminar este subrayado.

Internet Explorer maneja bien todas estas propiedades, pero Nestcape 4x ignora el estado HOVER, por lo que no muestra el cambio de color al pasar el cursor por el enlace. En cuanto a VISITED, no es bien soportado por ninguna de las versiones de Nestcape Navigator.

* Controlando los enlaces con CSS:

Hasta la aparición de las Hojas de Estilos en Cascada (CSS), el aspecto de los enlaces sólo se podía controlar con HTML. La introducción de esta tecnología supuso un cambio radical en la concepción de una página web, ya que se ésta dividió en dos facetas diferentes: por un lado el contenido a mostrar en la misma, y por otro el aspecto con que va a aparecres ese contenido. Es decir, mediante CSS separamos el contenido de una página de su formato de presentación.

Y los enlaces, como elementos de una página, no iban a escapar a esta nueva concepción. Así, CSS permite definir un estilo determinado para cada uno de los 4 estados que tiene un enlace, realizando esta asignación en la cabecera de la página, de la siguiente manera:

- a{font-family:familia;font-size:tamaño;color:color;....} que define el aspecto de los enlaces inicialmente.

- a:hover{font-family:familia;font-size:tamaño;color:color;....} que define el aspecto del enlace sobre el que se está pasando el cursor.

- a:active{font-family:familia;font-size:tamaño;color:color;....} que define el aspecto del enlace activo en cada momento.

- a:visited{font-family:familia;font-size:tamaño;color:color;....} que define el aspecto de los enlaces ya visitados.

En todos ellos podemos definir la familia de la fuente (Arial, Verdana, Helvetica, Serif, etc), el tamaño (en pixels, en puntos, en picas, en milimetros, etc.), el color, si aparece con algún tipo de rayado (ninguno (none), subrayado por abajo (underline), por arriba, etc.), el color de fondo, etc. En general, podemos asignar al texto de un enlace, y a cualquiera de sus estados, todas y cada una de las propiedades que CSS permite.

Vamos a ver un ejemplo de aplicación, en el que hemos incluido en la sección HEAD de la página el siguiente código:

cuyo resultado podemos ver en esta ventana flotante.

Si cacharreáis un poco con los enlaces de esta ventana usando Internet Explorer podéis ver que una vez que han sido visitados ya no responden al estilo marcado por HOVER ni por ACTIVE. Tened en cuenta que pare este navegador su verdadero estado es VISITED, pués ya han sido visitados. Es decir, ese estado predomina sobre los demás, es como el estado final. Para volver al sistema inicial deberéis borrar los archivos temporales de Internet.

En el cado de Nestcape 4x se verán siempre con el color definido para los enlaces normales, y al pinchar sobre uno de ellos tendrá un destello rojo, que se quita sólo rápidamente. Si se pasa el cursor por el enlace, éste no cambia, ya que Nestcape 4x no soporta el estilo HOVER.

Y en el caso de Nestcape 6x, funciona todo menos el estado VISITED.

- La definición de estilos para los enlaces mediante CSS no queda limitada a la posibilidad de establecer una presentación única para cada estado de los enlaces de una página, si no que es posible definir cuantas clases de estilos diferentes necesitemos. Supongamos que deseamos tener en nuestra página dos clases diferentes de enlaces (o 500), una para los que van a formar un menú principal superior y otra para los de un menú lateral secundario. Podemos definir en CSS dos clases diferentes para los estilos mediante al sintaxis general:

es decir, podemos definir cuantas clases diferentes deseemos, con la única condición de que su nombre debe ser diferente (clase1, clase2, pepe, paco, etc). Y teniendo en cuenta que si definimos unos estilos generales para los enlaces, las clases particulares heredan de ellos, por lo que si no especificamos en cada clase una propiedad de estilo, se tomará por defecto la definida para el enlace general.

Como ejemplo de las dos clases que hemos propuesto para dos menús tenemos el siguiente código:

Y luego, en el código de la página establecemos los enlaces del menú superior mediante:

<a class="clase1" href="a.html">enlace 1</a>

y los del menú lateral con:

<a class="clase2" href="a.html">enlace 1</a>

El resultado lo tenéis en esta ventana flotante.

* Controlando los enlaces con JavaScript:

Bueno. amigos. Lo que sigue se va un poco del simple HTML, pero no quiero finalizar el tema de los colores en los enlaces sin comentar un aspecto importante del mismo, ya que puede afectar al diseño de la página en sí.

El manejo de los estilos mediante JavaScript lo vamos a basar en lo siguiente: una vez definida una clase general para el enlace, que va a definir su aspecto inicial, podemos cambiar dinámicamente esta clase asociada mediante la instrucción className, que define la clase de estilos asociada a un elemento. Para poder cambiarla necesitaremos asignar un ID al enlace.

Supongamos entondes que tenemos las siguientes clases de estilo:

en la que normal será la clase de estilos por defecto del enlace, cursor va a ser la que va a tomar cuando se pase el cursor sobre il y activa será la que le vamos a asociar cuando se haga click sobre el mismo. Ya sólo nos queda establecer el enlace, en al que los cambios de clase vamos a controlarlos mediante los eventos MOUSEOVER y CLICK:

<a class="normal" href= "a.html"onmouseOver="this.className= 'cursor'"onClick="this.className='activa';return false">enlace 1</a>

donde vemos que para cambiar la clase basta usar this, que hace referencia al propio objeto en el que se encuentra el evento, es decir, el enlace.

El resultado lo tenéis en esta ventana.

Como podréis apreciar, este acceso a la clase no lo soporta Nestcape Navigator 4x.

Home - HTML - Enlaces en HTML - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10