Les liens HTML
Les liens sont une partie importante du document HTML. Ils lient des pages Web, ce qui permet aux utilisateurs de naviguer rapidement dans les liens et d’obtenir les informations dont ils ont besoin.
Les liens dans les documents HTML sont appelés hyperliens. Pour les insérer, on utilise l'élément <a>. En tant que lien, vous pouvez utiliser le texte et l’image.
Par défaut, les liens HTML apparaissent sous forme de texte bleu souligné. Lorsque vous passez votre souris sur un lien, il devient rouge. Les liens qui ont déjà été cliqués (liens visités) deviennent violets.
On peut changer le couleur des liens et effacer le soulignement à l’aide des styles CSS.
Les attributs de l’élément <a>
L’attribut href
Pour indiquer au navigateur que cette partie du texte est un lien, on doit le placer dans le tag <a> </a>. L'adresse du document à transférer est indiquée à l'aide de l'attribut href.
Cela ressemble à ceci :
<a href="url">texte du lien</a>.Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la fenêtre de la page Web</title>
</head>
<body>
<h2>Exemple de lien</h2>
<a href="https://fr.w3docs.com/">W3Docs.com</a>
</body>
</html>Résultat
Dans le navigateur cela ressemblera à ceci :
L’attribut target
Pour que le lien s'ouvre dans une nouvelle fenêtre, on doit ajouter l'attribut target, dont la valeur est "_blank".
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la fenêtre de la page Web</title>
</head>
<body>
<h2>Exemple de lien</h2>
<a href="https://www.w3docs.com/" target="_blank">W3Docs.com</a>
</body>
</html>Résultat
L’attribut ID
L’attribut id est utilisé pour créer un identifiant unique pour la partie du document afin de pouvoir y accéder. Pour rediriger un utilisateur vers une partie spécifique du texte sur la même page Web, on doit :
- Créez un identifiant unique pour cette partie du texte. L’identifiant peut être un mot ou une phrase (si vous utilisez une phrase, on ne doit pas mettre un espace entre les mots, on peut utiliser le soulignement en bas).
Exemple. <a id="exemple"> Voici la partie du texte avec l'identifiant unique "exemple", où l'utilisateur sera redirigé après avoir cliqué sur le lien. </a> - Créez un hyperlien avec un identifiant, précédé d'un #.
Exemple. <a href="#exemple"> En cliquant sur ce lien, nous serons redirigés vers la partie du texte avec l'identifiant unique "exemple" </a>
Maintenant voyons, comment ça se passe dans le code HTML.
<!DOCTYPE html>
<html>
<head>
<title>Titre de la fenêtre de la page Web</title>
</head>
<body>
<h2>Exemple de lien avec l’attribut id</h2>
<a id="exemple">Voici la partie du texte avec l’identifiant “exemple”, où l’utilisateur sera redirigé après avoir cliqué sur le lien </a>
<a href="#exemple">En cliquant sur le lien, nous serons redirigés vers la partie du texte avec l’identifiant unique “exemple”</a>
</body>
</html>Résultat
Comment ajouter un hyperlien à l’image
Pour pouvoir faire un clic sur une image, on doit ajouter une image au tag <a>. Faites cela avec le tag <img>, qui utilise les attributs suivants :
- src - la source de l’image
- alt - un texte alternatif
- width - la largeur de l’image
- height - la hauteur de l’image
Exemple
<a href="https://www.w3docs.com/">
<img src="/uploads/media/default/0001/01/910a300bcc9d9885ea035805ac6cac5d719bc43e.jpeg" alt="logo" width="200" height="150"/>
</a>Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la fenêtre de la page Web</title>
</head>
<body>
<a href="https://fr.w3docs.com/">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>Résultat
Cliquez sur l'image ci-dessous et vous serez redirigé vers la page d'accueil de notre site Web.
Sur Les images HTML nous parlerons plus en détail dans le chapitre suivant.
Pratiquez vos connaissances
