Liens HTML

Dans ce tutoriel, vous apprendrez à créer des liens vers d’autres pages en HTML.

Création de liens en HTML

Un lien ou un hyperlien est une connexion d’une ressource Web à une autre. Les liens permettent aux utilisateurs de se déplacer de manière transparente d’une page à l’autre, sur n’importe quel serveur, n’importe où dans le monde.

Un lien a deux extrémités, appelées ancres. Le lien commence à l’ancre source et pointe vers l’ancre de destination, qui peut être n’importe quelle ressource Web, par exemple une image, un clip audio ou vidéo, un fichier PDF, un document HTML ou un élément du document lui-même, etc.

Par défaut, les liens apparaissent comme suit dans la plupart des navigateurs:

• Un lien non visité est souligné et bleu.
• Un lien visité est souligné et violet.
• Un lien actif est souligné et rouge.

Cependant, vous pouvez écraser cela en utilisant CSS. En savoir plus sur les liens de style.

Syntaxe des liens HTML

Les liens sont spécifiés en HTML à l’aide de la balise <a>.

Un lien ou un hyperlien peut être un mot, un groupe de mots ou une image.

Tout ce qui se situe entre la balise d’ouverture <a> et la balise de fermeture </a> devient la partie du lien que l’utilisateur voit et clique dans un navigateur. Voici quelques exemples de liens:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

L’attribut href spécifie la cible du lien. Sa valeur peut être une URL absolue ou relative.

Une URL absolue est l’URL qui inclut chaque partie du format d’URL, telle que le protocole, le nom d’hôte et le chemin d’accès du document, par exemple, https://www.google.com/, https://www.example.com/form.php, etc. Alors que, les URL relatives sont des chemins relatifs à la page, par exemple, contact.html, images/smiley.png, etc. Une URL relative n’inclut jamais le préfixe http:// ou https://.

Définition des cibles pour les liens

L’attribut target indique au navigateur où ouvrir le document lié. Il y a quatre cibles définies, et chaque nom de cible commence par un caractère de soulignement (_):

• _blank — Ouvre le document lié dans une nouvelle fenêtre ou un nouvel onglet.
• _parent — Ouvre le document lié dans la fenêtre parent.
• _self — Ouvre le document lié dans la même fenêtre ou dans le même onglet que le document source. C’est la valeur par défaut, il n’est donc pas nécessaire de spécifier explicitement cette valeur.
• _top — Ouvre le document lié dans la fenêtre complète du navigateur.

Essayez l’exemple suivant pour comprendre comment fonctionne la cible du lien:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

Création d’ancres de signets

Vous pouvez également créer des ancres de signets pour permettre aux utilisateurs d’accéder à une section spécifique d’une page Web. Les signets sont particulièrement utiles si vous avez une très longue page Web.

La création de signets est un processus en deux étapes: ajoutez d’abord l’attribut id sur l’élément où vous souhaitez sauter, puis utilisez cette valeur d’attribut id précédée du signe de hachage (#) comme valeur de l’attribut href de la balise <a>, comme indiqué dans l’exemple suivant:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Création de liens de téléchargement

Vous pouvez également créer le lien de téléchargement de fichier exactement de la même manière que le placement de liens texte. Pointez simplement l’URL de destination vers le fichier que vous souhaitez télécharger.

Dans l’exemple suivant, nous avons créé les liens de téléchargement pour les fichiers ZIP, PDF et JPG.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>