HTML - Liens textuels

Balise ancre

La balise ancre, représentée par <a>, est le principal élément HTML utilisé pour créer des liens textuels. Pour créer un lien textuel, vous devez entourer le texte ou le contenu que vous souhaitez rendre cliquable avec la balise <a>. Voici le format de base de la balise ancre :

<a href="url-de-destination">Texte du lien</a>

La balise <a> possède plusieurs attributs que vous pouvez utiliser pour modifier le comportement et l'apparence du lien. L'attribut le plus important est href, qui définit l'URL de destination du lien.

Pour créer un lien textuel pointant vers la page d'accueil d'un site web, vous utiliseriez le code suivant :

<a href="https://www.exemple.com">Visiter Exemple.com</a>

Lorsqu'un utilisateur clique sur le texte du lien "Visiter Exemple.com", il sera dirigé vers l'URL définie, dans ce cas, "https://www.exemple.com".

Attribut Href

L'attribut href est utilisé pour définir l'URL de destination d'un lien textuel. La valeur de l'attribut href peut être soit une URL absolue, soit une URL relative.

Une URL absolue est une adresse web complète qui inclut le protocole (par exemple, "https://"), le nom de domaine et le chemin vers la page ou la ressource spécifique. Les URL absolues sont utilisées pour créer des liens vers des sites web externes ou des pages en dehors de votre propre site web.

En revanche, une URL relative est un chemin relatif à la page ou au site web actuel. Les URL relatives sont utilisées pour créer des liens vers des pages ou des ressources au sein de votre propre site web. Elles n'incluent pas le protocole ni le nom de domaine.

Exemples d'URL absolues et relatives :

Lors de l'utilisation d'URL relatives, le navigateur trouve l'URL complète en combinant le chemin relatif avec l'URL de la page actuelle.

L'attribut href peut également être utilisé pour créer des liens vers des adresses e-mail en utilisant le protocole mailto:, ou pour lancer des appels téléphoniques en utilisant le protocole tel:.

En utilisant la balise ancre et l'attribut href, vous pouvez créer des liens textuels cliquables qui permettent aux utilisateurs d'accéder à différentes pages, sections ou ressources au sein de votre site web ou de sites web externes.

Ouvrir des liens dans une nouvelle fenêtre ou un nouvel onglet

Par défaut, lorsqu'un utilisateur clique sur un lien texte, la page liée s'ouvre dans la même fenêtre ou le même onglet du navigateur, remplaçant la page actuelle. Mais il peut y avoir des moments où vous souhaitez que la page liée s'ouvre dans une nouvelle fenêtre ou un nouvel onglet, permettant à l'utilisateur de garder la page actuelle ouverte.

Pour ce faire, vous pouvez utiliser l'attribut target dans la balise d'ancrage. L'attribut target indique où ouvrir le document lié. Pour ouvrir un lien dans une nouvelle fenêtre ou un nouvel onglet, définissez la valeur de l'attribut target sur "_blank".

<a href="https://www.example.com" target="_blank">Visiter Example.com</a>

Dans ce cas, lorsqu'un utilisateur clique sur le lien "Visiter Example.com", la page liée s'ouvrira dans une nouvelle fenêtre ou un nouvel onglet du navigateur, selon les paramètres du navigateur de l'utilisateur.

Il est important de noter que l'ouverture de liens dans de nouvelles fenêtres ou de nouveaux onglets doit être utilisée avec parcimonie et uniquement lorsque c'est nécessaire, car cela peut perturber l'expérience de navigation de l'utilisateur si elle est utilisée excessivement.

Créer un lien vers une partie spécifique de la même page

Parfois, vous pouvez vouloir créer un lien vers une section ou une partie spécifique de la même page, permettant aux utilisateurs de sauter rapidement vers cette section sans avoir à faire défiler manuellement. Cela est très utile pour les longues pages avec de nombreuses sections ou pour créer une table des matières.

Pour créer un lien vers une partie spécifique de la même page, vous devez utiliser l'attribut id pour créer des ancres, puis créer des liens vers ces ancres en utilisant le symbole # suivi de la valeur de l'id.

Tout d'abord, donnez un attribut id unique à l'élément vers lequel vous voulez créer un lien. Par exemple, si vous avez un titre vers lequel vous voulez créer un lien, vous pouvez lui donner un attribut id comme ceci :

<h2 id="section1">Section 1</h2>

Ensuite, créez un lien texte qui pointe vers l'ancre en utilisant le symbole # suivi de la valeur de l'id dans l'attribut href :

<a href="#section1">Aller à la Section 1</a>

Lorsqu'un utilisateur clique sur le lien "Aller à la Section 1", la page défilera jusqu'à l'élément ayant l'id "section1".

Vous pouvez créer plusieurs ancres sur la même page et créer des liens vers elles en utilisant leurs valeurs id. Cela permet aux utilisateurs de naviguer facilement vers différentes sections de la page en utilisant des liens texte.

En utilisant l'attribut target et en créant des liens vers des parties spécifiques de la même page à l'aide d'ancres et de l'attribut id, vous pouvez créer un système de navigation de site web plus convivial.

États des liens

Les liens en HTML peuvent exister dans quatre états différents :

1. Par défaut : L'état par défaut d'un lien est son apparence lorsqu'il n'y a pas d'interaction avec l'utilisateur.

2. Survol : L'état de survol est déclenché lorsque l'utilisateur déplace son curseur de souris sur le lien sans cliquer dessus.

3. Actif : L'état actif est déclenché lorsque l'utilisateur clique sur le lien et maintient le bouton de la souris enfoncé.

4. Visité : L'état visité s'applique aux liens sur lesquels l'utilisateur a déjà cliqué et qu'il a visités.

Pour styliser ces différents états de lien, vous pouvez utiliser des pseudo-classes CSS. Les pseudo-classes sont des mots-clés que vous pouvez ajouter à un sélecteur pour spécifier un état particulier de l'élément sélectionné. Les pseudo-classes pour les états de lien sont :

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: green;
}

Styliser les liens avec CSS

En plus de styliser les états des liens, vous pouvez utiliser CSS pour modifier l'apparence des liens afin qu'ils correspondent au design de votre site web. Voici quelques propriétés CSS couramment utilisées pour styliser les liens :

a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  background-color: #f0f0f0;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

a:hover {
  background-color: #333;
  color: #fff;
}

En combinant la stylisation des états des liens et l'utilisation des propriétés CSS pour personnaliser l'apparence des liens, vous pouvez créer des liens textuels attrayants et conviviaux qui améliorent l'expérience de navigation sur votre site web.