Coder les liens en HTML et en CSS

Pour faire un lien, vous écrivez le texte sur lequel vous voulez cliquer, puis vous l’encadrez avec les balises de l’élément a. La lettre a, c'est pour le nom de l’élément qui sert à faire des liens.

Le principe du lien hypertexte est le suivant : lorsque le visiteur clique sur le texte du lien, le navigateur charge une nouvelle page. Il faut donc mettre l’adresse de cette nouvelle page quelque part.

Vous devez utiliser l'attribut href pour mettre l'adresse de cette page.

Ce que vous pouvez remarquer ici, c'est que je n'ai pas mis le nom de la page. Le principe, c'est d'aller vers une page, mais je ne mets pas le nom de la page ? 😨. Ça nécessite une petite explication. Et là, il faut le savoir, dans ce cas, c'est le serveur http qui va choisir le fichier. De notre côté, on lui donne seulement l'adresse d'un répertoire. Eh oui, le slash que l'on met à la fin de http://www.devenir-webmaster.com/ indique le répertoire /. Ce répertoire porte un nom particulier, c'est le répertoire racine. On l'appelle ainsi, car il est situé à la racine de l'arborescence du site.

Comment va se faire ce choix au niveau du serveur http ? Eh bien, le serveur va choisir en fonction de ce qu'il a dans le répertoire et en fonction de sa configuration. Il choisit entre deux fichiers : le fichier index.php ou le fichier index.html (il y a d'autres possibilités, mais c'est beaucoup moins courant).

Remarquez que le navigateur ne nous dit pas dans la barre d'adresse lequel des deux est choisi et c'est normal. Il ne le sait pas ! 😲. En fait, le navigateur prend ce qu'on lui donne. Et ce qu'on lui donne, c'est du HTML. Peu importe que le serveur utilise PHP, ou pas, pour produire ce code HTML. Si vous ne comprenez pas ce que je dis, je vous conseille le tutoriel A quoi servent PHP et MYSQL ?.

Si vous voulez que la nouvelle page soit chargée dans un nouvel onglet, vous devez utiliser l'attribut target. Cliquez ici et vous allez voir, que la nouvelle page va s'ouvrir dans un nouvel onglet.

Si vous voulez avoir une info bulle au survol, vous devez utiliser l'attribut title. Survolez le lien, et vous allez voir apparaître une infobulle (l'attribut title peut être utilisé sur d'autres éléments html).

Faire un lien vers un endroit précis d'une page, veut dire que, lorsque je clique sur mon lien, je veux que la fenêtre du navigateur ouvre la page, avec un curseur de positionné, à un endroit précis de cette page. Si je fais un lien traditionnel, la fenêtre du navigateur, va s'ouvrir avec un curseur de positionné, au début de cette page.

Un exemple, je veux faire un lien vers un endroit précis de cette page urlmapping.html. Pour l'instant, tel que j'ai fait le lien, la fenêtre du navigateur s'ouvre au début de cette page. Mais les informations vers lesquelles je veux directement vous renvoyer sont dans la partie "Racine des documents". Alors, je regarde le source (CTRL+U) puis (CTRL+F) pour rechercher les termes "Racine des documents" et je vois qu'il y a un identificateur #documentroot, sur lequel je peux en quelque sorte m'accrocher.

Je vais m'y accrocher, en mettant cet identificateur, à la fin de l'Url du lien que je vais mettre en place. Ci-dessous, je vous montre la façon d'écrire l'Url du lien. D'abord l'adresse de la page puis l'identificateur (avec le #) collé à la fin.

Et voilà, ce que ça va donner, pour l'Url complète de mon exemple https://httpd.apache.org/ docs/2.4/fr/urlmapping.html#documentroot. Vous constatez que lorsque la page s'ouvre, elle est positionnée à l'endroit précis où se trouve l'information que je veux vous montrer.

Pour proposer un téléchargement, il suffit de faire un lien interne vers le ou les fichiers, que vous souhaitez proposer. On appelle ça faire un lien de téléchargement. Dans ce cas, le mieux est d'encapsuler au préalable vos fichiers à télécharger dans un fichier compressé qui aura l'extension .zip. Vous devez faire ça, notamment, si vous voulez proposer un fichier html parce que là le clic sur le fichier provoquerait sa visualisation. Avec l'extension .zip, c'est le téléchargement qui va s'enclencher.

<a href='exe/telechargement.zip'>Télécharger</a> Tester le code

Si vous mettez un lien html, alors évidemment le navigateur va charger la page html.

<a href='exe/telechargement.html'>Télécharger</a> Tester le code

Déjà, on peut regarder comment se présentent les couleurs par défaut d'un lien, selon son état. Qu'est-ce que j'appelle l'état d'un lien ? Si le lien n'a jamais été visité, c'est un état. Si le lien a déjà été visité, c'est un autre état. Les couleurs par défaut selon l'état sont données ci-dessous :

1. Un lien qui n'a jamais été visité est bleu.
2. Un lien qui a déjà été visité est mauve. Il est présent dans l'historique du navigateur.
3. Si vous cliquez sur un lien et que vous gardez le bouton enfoncé, le lien devient rouge.
4. Tous les liens sont soulignés et restent soulignés.
5. Rien ne se passe si vous survolez le lien, mis à part le changement de l'aspect du curseur de la souris.

Tester le code

Maintenant, avec des règles CSS, je vais changer ces comportements par défaut. Je peux le faire pour tous les états avec une seule règle. Par exemple, la règle a.test { text-decoration:none; } s'applique à tous les états. Je peux le faire pour un état particulier, en utilisant une pseudo-classe. Par exemple, la règle a.test:link { color:green; } ne s'applique qu'aux liens qui n'ont pas été visités.

Je précise ci-dessous, les principaux états qui peuvent être gérés en CSS, avec des pseudos-classes. Je le fais dans un ordre précis. C'est un ordre que vous devez respecter, lorsque vous utilisez les pseudos-classes. Ca peut surprendre, mais c'est bel et bien le cas. Les mots LoVe HAte sont un bon moyen mnémotechnique pour se souvenir de cet ordre. L pour link, V pour visited, H pour hover, A pour active.

• :link lorsque le lien n'a pas été visité.
• :visited lorsque le lien a déjà été visité.
• :hover lorsque le lien est survolé.
• :active lorsque l'on clique et que l'on reste en position bouton enfoncé sur le lien.

<!DOCTYPE html> <html lang='fr'> <head> <meta charset="utf-8"> <style> /* Pas de soulignement quel que soit l'état */ a.test { text-decoration:none; } /* Les liens qui n'ont pas été visités sont vert */ a.test:link { color:green; } /* Les liens qui ont été visités sont orange */ a.test:visited { color:orange; } /* Les liens lorsqu'ils sont survolés sont soulignés */ a.test:hover { text-decoration:underline;} </style> </head> <body> <a class="test external" href='https://www.w3.org/TR/html52/' target='_blank'>Cliquez sur le lien</a> </body> </html> Tester le code

Vous pouvez voir ci-dessous, que si l'ordre n'est pas le "bon" ça ne fonctionne pas. Ci-dessous, la pseudo-classe hover n'est pas au bon endroit.

<!DOCTYPE html> <html lang='fr'> <head> <meta charset="utf-8"> <style> a.test { text-decoration:none;} /* La règle ci-dessous n'est pas au bon endroit */ a.test:hover { color:red;} a.test:link { color:green;} a.test:visited { color:orange;} /* Elle devrait être ici */ </style> </head> <body> <p><a class='test external' href='https://www.w3.org/TR/html52/' target='_blank'>Survolez le lien</a></p> </body> </html> Tester le code

Il peut être intéressant, d'agrandir la zone de clic, pour donner plus de confort à un utilisateur, notamment lorsque le site est visité sur smartphone.

Les liens sont des éléments HTML de type inline et ne peuvent pas être redimensionnés. Heureusement, vous pouvez changer de type pour modifier ce comportement. Une solution est d'utiliser le type inline-block. Vous avez un exemple dans ce tutoriel, Les éléments de type inline, block et inline-block.