Comment avoir des liens de couleurs différentes sur ma page ?

Pour avoir des liens de couleurs différents à l'intérieur d'une même page, il existe trois solutions :
— une solution en HTML classique, mais que certains éditeurs de site (notamment Claris Home Page) refusent d'appliquer,
— une technique passant par des styles (CSS) ;
— on peut enfin remplacer les liens par des images.

HTML classique

Il faut définir la couleur des liens à l'intérieur de la balise <a>...</a>, ce qui donne :
<a href="..."><FONT COLOR="#FF3333">lien en rouge</FONT></A>
<a href="..."><FONT COLOR="#00dd33">lien en vert</FONT></A>
etc...
ce qui va donner :   un  lien en rouge,   un  lien en vert  etc...
L'inconvénient est que certains éditeurs (Claris Home Page, par exemple) modifient le code de la page et remettent d'eux-même le code de couleur à l'extérieur de la balise <a>...</a> :
<FONT COLOR="#FF3333"><a href="...">lien en rouge</A></FONT>
<FONT COLOR="#00dd33"><a href="...">lien en vert</A></FONT>
Cela annule les effets de couleurs et on retrouve la couleur des liens définie dans le <BODY> ou la couleur par défaut définie dans les préférences du navigateur.

Un autre inconvénient potentiel est que le lien reste dans la couleur qu'on lui a imposée, même après qu'on ait cliqué dessus (essayez avec les liens ci-dessus à droite). Selon les cas, on pourra trouver que cet inconvénient est négligeable... ou insupportable.

Emploi de styles (CSS)

C'est la méthode à privilégier. Elle fonctionne à partir de NN4 et IE4. Elle n'est pas reconnue avec les anciens navigateurs (une minorité en voie de disparition) mais seul l'effet de couleur est perdu ; le lien demeure fonctionnel et la page reste donc exploitable. Par exemple, on code
<a href="..." style="color:#FF3333">lien en rouge</A>
pour un lien en rouge, et
<a href="..." style="color:#0000FF">lien en bleu</A>
pour un lien en bleu

On note à nouveau que la couleur ne change pas après que le lien ait été visité.

La technique des classes de liens, plus élaborée, permet de remédier à ce défaut, et même de rétablir les changements de couleur habituels pour les liens survolés (Explorer 4+ seulement). Pour cela, dans une feuille de style entre les balises <HEAD> et </HEAD>, on commence par placer des instructions comme suit :
   <style type="text/css">
   <!--
   .Rouge:link{color: #ff3333;}
   .Rouge:visited{color: #330000;}
   .Rouge:active{color: #ff0000;}
   .Rouge:hover{color: #ffaa00;}

   .Bleu:link{color: #0000ff;}
   .Bleu:visited{color: #000044;}
   .Bleu:active{color: #6600ff;}
   .Bleu:hover{color: #0088ff;}

   // etc...-->
   </style>
On on définit ainsi une classe "Rouge" et une classe "Bleu". On associera ensuite la classe concernée à chaque lien par le codage suivant :
<a href="..." class="Rouge">lien de classe "Rouge"</a>
<a href="..." class="Bleu">lien de classe "Bleu"</a>
respectivement pour un lien de classe "Rouge" et pour un lien de classe "Bleu".
Remarques :
— Si vous souhaitez que le lien ne change jamais de couleur, ne mettez qu'une seule ligne pour définir les couleurs dans la classe :    .Rouge {color: #ff3333;}
— Vous pouvez aussi ajouter des lignes ad hoc si vous souhaitez d'autres effets de styles (suppression du soulignement, changement de police, passage en italiques etc...). Par exemple, pour supprimer le soulignement, ajoutez une ligne    .Rouge {text-decoration:none}. Si vous ne voulez ne le supprimer que pour les liens visités, ajoutez « text-decoration:none; » entre les accolades sur la ligne « visited », etc...

L'avantage de cette méthode est qu'elle regroupe des styles qui peuvent être passablement complexes en une feuille de style unique pour toute la page. Si on reprend les mêmes types de liens dans plusieurs pages, on peut même en faire un fichier externe unique, mais c'est une autre histoire.

Emploi d'images

C'est la seule méthode qui garantira la même vision sur tous les navigateurs, mais c'est aussi la plus lourde à mettre en oeuvre puisqu'elle consiste à remplacer le texte qui sert de lien par des images fabriquées à partir de ce texte, mis dans la couleur désirée. Bref, un travail long et des temps de chargement rallongés. En revanche, on a la possibilité d'utiliser des polices spéciales plus élégantes, et on peut remplacer les effets "hover" restreints aux seuls IE4+ par des rollovers qui fonctionneront aussi sur NN3+... moyennant encore plus de travail.

Des 3 méthodes, nous conseillons celle des CSS.

Patrice — (TOM) — Charles