CSS : on reprend tout à zéro ! (épisode 6)
Par Joe Gillespie
Cet article est le sixième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.
Sixième étape : établir des liens
L'important, dans le mot « HTML », c'est la partie « HT », c'est-à-dire Hyper Texte. Sur une page, des liens qu'on ajoute à des mots, des phrases ou des images, peuvent être cliqués pour vous transporter à un autre endroit. Ces autres endroits s'appellent des « ancres ». Imaginez des bateaux immobiles sur la grande mer du Web, avec une chaîne constituée de liens qui descend jusqu'à une ancre posée au fond de la mer. Les bateaux sont ancrés à des emplacements bien précis, ce qui les rend plus faciles à repérer que s'ils dérivaient sur la mer.
Chaque page contient au moins une ancre. Celle par défaut est tout en haut de la page, mais vous pouvez ajouter d'autres ancres à n'importe quel point d'une page auquel vous souhaitez pouvoir accéder d'un simple clic.
<a href="http://www.wpdfd.com/index.htm"> Ceci est un lien vers le haut de ma page d'accueil </a>
Vous voyez là une paire de balises <a>...</a>, avec en plus une partie href="..." dans la première balise. Il s'agit de l'adresse hypertexte de référence où vous souhaitez vous rendre.
Si vous placez une ancre à un emplacement bien précis dans une page (en fait, il faudrait la placer juste au-dessus de l'endroit où on veut atterrir), cela donne :
<a name="mon_ancre"></a>
Il s'agit donc d'une paire de balises <a></a> avec, dans notre exemple,
name="mon_ancre" placé dans la balise ouvrante. Il n'y a rien entre les deux balises.
Pour accéder à cet emplacement, il faut ajouter un petit bout de code à l'extrémité du lien :
<a href="http://www.wpdfd.com/index.htm#mon_ancre"> Ceci est un lien vers une ancre de ma page d'accueil</a>
Comme vous le savez, les liens sur une page sont indiqués en les rendant visuellement différents du texte environnant. Par défaut, on souligne le texte du lien, et on le colorie en bleu. Quand vous cliquez sur un lien, il réagit visuellement en passant à la couleur rouge. Quand vous revenez ensuite à ce lien, il est passé à une autre couleur encore, le violet, pour montrer qu'il a déjà été visité.
Quiconque a déjà utilisé une page Web comprend le principe de ces conventions très rapidement.
La présentation par défaut des liens hypertextes en HTML se compose de trois états distincts.
Remarquez que le curseur change, lui aussi. Le pointeur qui était par défaut une flèche se transforme en main qui montre de l'index lorsque le curseur survole un lien.
Bien sûr, en tant que « designers », l'aspect par défaut des liens ne nous satisfait pas. Le texte souligné, cela peut être pratique mais aussi parfois très laid. Ce qu'il faut en priorité, c'est qu'un lien soit d'un aspect suffisamment différent de son environnement pour que l'on voie qu'il y a là quelque chose de particulier. Le contexte est également un facteur important. Tel ou tel texte constitue de toute évidence un « menu » de choix, qu'il soit souligné ou non. Sa mise en valeur, sa position dans la page, le fait que les mots vous invitent à vous rendre à d'autres endroits sont autant d'indices quant à sa fonction.
De la même façon, quand un mot ou un groupe de mots au sein d'un bloc de texte a un aspect différent, c'est sans doute pour une bonne raison. Cette raison pourrait être que l'on veut insister sur l'importance de cette partie, mais là encore, c'est le contexte qui donne l'indice, et aussi le fait que d'autres mots ou groupes de mots similaires présentent partout le même aspect. Tout cela ne fonctionnerait pas si chaque lien était d'une couleur différente.
Les CSS nous permettent de jouer un peu avec l'aspect des liens. Non, les liens ne sont pas obligatoirement soulignés et bleus. Tout ce qu'il y a à faire, c'est d'indiquer une définition pour « a » (les ancres).
a:link { color: #696; text-decoration: none }
Comme cette page (la page originale de J.Gillespie, NdT) présente un style de couleurs qui sort un peu du blanc et noir, j'ai changé les couleurs des liens en autre chose que le bleu/violet par défaut. De plus, text-decoration:none nous débarrasse du soulignage.
Pour qu'un lien déjà visité soit d'une couleur différente, tapez ceci :
a:visited { color: #699; text-decoration: none }
En CSS, il existe aussi un état supplémentaire appelé « hover ». Il permet de changer la couleur du texte au moment où le pointeur de la souris le survole, ce qui donne très utilement un indice supplémentaire qu'il s'agit d'un lien hypertexte.
a:hover { color: #c93; text-decoration: underline }
Vous voyez ainsi apparaître le soulignement traditionnel si vous le souhaitez, mais seulement de manière temporaire, lorsque le pointeur survole le texte.
L'état « actif » d'un lien, c'est ce que l'on voit à l'instant où on clique sur un lien. Il change généralement de couleur, et certains navigateurs font aussi apparaître une boîte autour du texte.
Pour définir des liens qui s'appliquent à toute la page, il faut placer quelque chose comme ceci dans les définitions de style dans la partie « head » de la page :
a:link
{color: #696;
text-decoration: none;
background-color: transparent }
a:visited
{ color: #699;
text-decoration: none;
background-color: transparent }
a:hover
{ color: #c93;
text-decoration: underline;
background-color: transparent }
a:active
{ color: #900;
text-decoration: underline;
background-color: transparent }
L'ordre des définitions de style est important ici. D'habitude, l'ordre n'a aucune importance en définitions
CSS, mais ici c'est très important de placer les définitions a:hover et
a:active en dernier, sinon elles risquent de ne pas fonctionner.
Voici maintenant un autre état, pas officialisé en CSS.
C'est un lien mort. Il ne fait rien de particulier. Si vous avez un lien sur une page qui ramène à cette même page, ma foi, ça ne rime pas à grand-chose de pouvoir y cliquer pour revenir au point de départ. Ce serait comme un panneau indicateur retourné sur lui-même et indiquant sa propre direction.
Il y a deux façons de gérer cela. Vous pouvez transformer le lien en titre, en le mettant davantage en valeur que le reste, ou bien vous pouvez le rendre pratiquement invisible, montrant ainsi que ce n'est pas un choix possible. On appelle cela le « grisage », et vous en reconnaîtrez le principe pour l'avoir vu en usage sur d'autres programmes de votre ordinateur.
Mais, direz-vous, pourquoi le placer là si on ne souhaite pas que les gens le choisissent ?
Eh bien, l'un des principes les plus importants dans le design d'une interface est que l'on essaie de garder pour tous les éléments la plus grande cohérence possible. Si on retire un élément d'un menu, par exemple, certains autres vont changer de place. Ce sera moins gênant pour l'utilisateur si l'interface reste clouée en place.
Enfin, l'autre élément dont nous disposons ici est la couleur de fond (background-color) derrière le texte. Les designers changent parfois la couleur de fond pour donner un effet proche du surlignage pour les états
hover ou active.
Il ya encore beaucoup d'autres choses à faire avec les liens CSS, nous n'avons fait qu'effleurer la question, mais cela devrait suffire à vous permettre de démarrer. Cette page d'exemple met en application les principes que vous venez d'apprendre.
http://www.wpdfd.com/editorial/basics/cssbasics6.html