créer et personnaliser des liens hypertextes

Créer et personnaliser des liens hypertextes : html / css

Publié le 30 janvier 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 :

<a href="destination.html">destination dans le même répertoire</a>

– 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 :

<a href="repertoire_destination/destination.html">destination dans un sous-répertoire</a>

– Si la destination se trouve dans le répertoire parent du répertoire actuel, il faut « remonter » à l’aide de deux points « .. ».

<a href="../destination.html">destination dans un répertoire parent</a>

– 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 « .. ».

<a href="../../destination.html">destination dans un répertoire parent</a>

 

Les différents types de liens hypertextes

Les liens hypertextes se trouvent toujours dans une balise <a> 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.

<a href="destination.html" title="destination">destination dans le même répertoire</a>

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.

<a href="http://www.site-externe.com" title="site externe">destination site externe</a>

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.

<a href="http://www.site-externe.com" target="_blank">site externe nouvel onglet</a>

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 :
Liens hypertextes : 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 :

<a name="couleurs" title="Couleurs">Titre : couleurs</a>

– puis dans le sommaire, écrivez le lien suivant :

<a href="#couleurs" title="Couleurs">lien du sommaire vers le paragraphe Couleurs</a>

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

<a href="destination.htm:/#couleurs">lien du sommaire vers le paragraphe Couleurs</a>

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 :

<a href="mailto:adresse@adresse.com">adresse@adresse.com</a>

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

<a href="mailto:adresse@adresse.com?subject=Demande de devis">Contact</a>

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

<a href="mailto:adresse@adresse.com?body=Bonjour,">Contact</a>

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

<a href="mailto:adresse@adresse.com?subject=Devis&body=Bonjour,">Contact</a>

 

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.

a {
text-decoration: none;
color: green;
}

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.

a:hover {
color: red;
}

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 :

a:visited {
color: pink;
}

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 :

a:active {
color: grey;
}

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.

a:focus {
color: yellow;
}

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

a:hover, a:visited, a:active {
color: red;
}

 

Conclusion

Voilà, les différents type de liens et leur présentation n’ont plus de secrets pour vous !
Nous espérons que cet article vous aura été utile. S’il vous a plu, vous pouvez le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. N’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

0 Avis

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*