Comment créer des liens en HTML - Letecode
NON ! à la guerre à l'Est de la RDC rdc ! non à la guerre et En Ukraine ukraine

Les liens HTML

Dans ce tutoriel, vous apprendrez à créer des différents types de liens en HTML.

Créer des 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 à une autre, sur n'importe quel serveur partout 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 dans le document lui-même, etc..

Par défaut, les liens apparaîtront 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 le style des liens .

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.

<a href =" lien "> Texte du lien </a>

Tout ce qui se trouve 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/">Recherche Google</a>
<a href="https://www.letecode.com/">Letecode</a>
<a href="images/profil.jpg">
  <img src="profil-thumb.jpg" alt="profil">
</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 de l'URL, comme le protocole, le nom d'hôte et le chemin du document, par exemple, https://www.google.com/, https://www.example.com/page.php, etc. Alors que les URL relatives sont des chemins relatifs à la page, par exemple, contact.html, images/logo.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 parente.
  • _self — Ouvre le document lié dans la même fenêtre ou le même onglet que le document source. Il s'agit de 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 le fonctionnement de la cible du lien :

<a href="/contact.html" target="_top">Nous contacter</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
  <img src="sky-thumb.jpg" alt="ciel">
</a>

Si votre page Web est placée dans une iframe, vous pouvez utiliser les liens target="_top" pour sortir de l'iframe et afficher la page cible dans la fenêtre complète du navigateur.

 

Création d'ancres de signets

Vous pouvez également créer des ancres de signet 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 dièse ( #) comme valeur de l'attribut href de la balise <a>, comme illustré dans l'exemple suivant :

<a href="#sectionA">Sauter à la section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Conseil : Vous pouvez même accéder à une section d'une autre page Web en spécifiant l'URL de cette page avec l'ancre (c'est-à-dire #elementId) dans l'attribut href, par exemple, <a href="mypage.html#topicA">Aller à TopicA</a>.

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 vous placez des liens de texte. Pointez simplement l'URL de destination vers le fichier que vous souhaitez rendre disponible au téléchargement.

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">Télécharger le fichier Zip</a>
<a href="downloads/cours-html.pdf">Télécharger le fichier PDF</a>
<a href="downloads/photo.jpg">Télécharger le fichier Image</a>

Remarque : lorsque vous cliquez sur un lien pointant vers un fichier PDF ou image, le fichier n'est pas téléchargé directement sur votre disque dur. Il n'ouvrira le fichier que dans votre navigateur Web. De plus, vous pouvez l'enregistrer ou le télécharger sur votre disque dur de manière permanente.

Pour que le téléchargement s'effectue directement sans visualiser dans le navigateur, vous devez ajouter l'attribut download, qui peut prendre une valeur définissant un nouveau nom du fichier au téléchargement.

Essayez avec cet exemple :

<a href="downloads/test.zip" download>Télécharger le fichier Zip</a>
<a href="downloads/cours-html.pdf" download="Livre du cours HTML">Télécharger le fichier PDF</a>
<a href="downloads/photo.jpg" download="Image">Télécharger le fichier Image</a>