Yes You Web !

— Publié le 12 août 2017 —

Un lien est un texte sur lequel on peut cliquer pour se rendre vers une destination. Il existe plusieurs destinations : une page interne, une page externe, un endroit dans la même page, une adresse email, en relatif, en absolu… Nous allons voir en détail ces différentes notions, apprendre comment les créer en HTML puis comment les personnaliser en CSS.

Liens relatifs et liens absolus

Un petit rappel pour débuter cet article sur la différence entre les liens absolus et les liens relatifs :

Lien absolu : un lien absolu indique l’adresse complète de la page de destination avec le protocole utilisé (http ou https), par exemple, http://www.site-externe.com. Il est généralement utilisé pour afficher une page d’un autre site.

Lien relatif : un lien relatif indique l’adresse de destination par rapport à la page actuelle. Il est vivement conseillé de l’utiliser le plus souvent pour les liens internes au site. En effet, cela vous évitera de changer tous les liens à la main si vous changez de nom de domaine par exemple. Il existe cependant quelques règles à respecter pour l’écrire. Nous distinguons plusieurs cas :

  • Si la destination se trouve dans le même répertoire que la page courante, il suffit d’indiquer son nom :
    Copier
  • Si la destination se trouve dans un sous-répertoire du répertoire contenant la page courante, il faut indiquer le nom du répertoire, suivi d’une barre oblique « / » puis son nom :
    Copier
  • Si la destination se trouve dans le répertoire parent du répertoire actuel, il faut « remonter » à l’aide de deux points « .. »
    Copier
  • Si la destination se trouve dans un répertoire qui se trouve 2 niveaux au-dessus du répertoire courant, il faut « remonter » 2 fois à l’aide de deux points « .. »
    Copier

Les différents types de liens hypertextes

Les liens hypertextes se trouvent toujours dans une balise qui signifie Ancre. Cette balise a 4 attributs :

  • href : indique la destination du lien
  • name : permet de définir une ancre
  • target : permet de définir la cible du lien
  • title : permet de mettre un titre au lien – sous forme d’infobulle -, utile pour le référencement naturel

Lien interne

Un lien interne est un lien vers une autre page / un autre élément de votre site (image, pdf…). Comme nous l’avons eu plus haut, on utilise souvent un lien relatif pour exprimer ce lien.

Copier

Lien externe

Un lien externe pointe vers un site extérieur. Dans ce cas, on utilise un lien absolu. Si l’on ne spécifie pas la cible, par défaut, le site s’ouvrira dans l’onglet courant de votre navigateur et donc le site extérieur remplacera votre site.

Copier

Lien externe dans un nouvel onglet

Pour que le site externe ne remplace pas votre site dans le navigateur, il faut spécifier la cible en disant : ouvre le nouveau site dans un nouvel onglet / nouvelle fenêtre.

Copier

Si vous avez besoin d’ouvrir un lien de menu de navigation WordPress dans un nouvel onglet, nous vous invitons à lire notre article sur le sujet : Menu WordPress : ouvrir un lien dans un nouvel onglet.

Lien ancre

Une ancre est un lien interne à la page, cela vous permet de faire un petit sommaire dans une page un peu longue. Cliquer sur l’un des liens vous emmène plus page dans la page. Voici un exemple de Sommaire :

Yes You Web !

Un lien ancre s’écrit en 2 fois :

  • tout d’abord, descendez dans votre page à l’endroit où vous voulez que le lien pointe. Par exemple, la destination de mon lien « Couleurs » pointera vers un paragraphe intitulé Couleurs.
    Au niveau du titre du paragraphe, écrivez le code suivant :
    Copier
  • puis dans le sommaire, écrivez le lien suivant :
    Copier

Si vous souhaitez faire pointer votre lien vers une ancre d’une autre page, il faudra noter son adresse en relatif :

Copier

Lien email

Un lien de type email est un lien de messagerie qui fait apparaître le client de messagerie de l’utilisateur quand il clique dessus (gmail, outlook…). Voici le code à copier :

Copier

Petit plus, vous pouvez même pré-remplir le sujet de l’email :

Copier

Et même le début de l’email :

Copier

Si vous voulez combiner les 2, il faut utiliser & :

Copier

Comment styler un lien

Par défaut en html, les liens apparaissent en bleu souligné. Ce n’est peut être pas le rendu que vous voulez donner. Il est possible de modifier cela en CSS. Dans l’exemple suivant, on retire le soulignement et on signale les liens en vert.

Copier

Nous venons de changer la couleur d’un lien écrit dans un texte, mais vous pouvez personnaliser 4 autres fonctions :

  • a:hover : permet de changer la couleur d’un lien quand on le survole avec sa souris. Dans cet exemple, nous le mettons en rouge.
    Copier
  • a:visited : permet de changer la couleur d’un lien déjà visité. Dans notre exemple, le lien était vert. Quand on l’a déjà cliqué, on peut le signaler en rose :
    Copier
  • a:active : permet de modifier l’apparence du lien au moment du clic. Dans un menu, il permet de visualiser la page sur laquelle on se trouve :
    Copier
  • a-focus : permet de cibler un lien lorsque celui-ci reçoit le focus : soit il est sélectionné à l’aide du clavier, soit il est activé avec la souris comme par exemple le champ d’un formulaire.
    Copier

Vous n’êtes pas obligé d’attribuer des styles différents aux liens dans leurs différents états, vous pouvez les regrouper. Par exemple :

Copier

Conclusion

Voilà, les différents types de liens et leur présentation n’ont plus de secrets pour vous ! Nous espérons que cet article vous aura été utile.
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !