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, a c’est 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. Et 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 ? Et 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 aller 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).

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

Un exemple concret, 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.

Ensuite vous proposez le lien tel quel et un téléchargement s'enclenchera au moment du clic de l'utilisateur sur ce lien.

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

Si vous mettez un lien html alors évidemment vous allez vers 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. 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.