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.rudless.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>

Les liens HTML vers les adresses e-mails

Pour permettre à vos visiteurs de vous envoyer un mais dans votre boîte éléctronique, le préfixe à utiliser est "mailto:" suivi de l'adresse mail.

  <a href="mailto:[email protected]">Text à afficher</a>

Mais il est possible d'aller bien plus loin en utilisant les paramètres suivants dans l'URL :

• subject : Objet du mail
• cc : Destinataires en copie carbone
• bcc : Destinataires en copie carbone invisible (blind carbon copy)
• body : Corp du mail

Voici un exemple de leurs utilisation :

  <a href="mailto:[email protected]?subject=Objet du mail&[email protected]&[email protected]&body=Le contenu du mail">Text à afficher</a>

Les liens HTML vers les numéros de téléphone

Pour les liens pointant vers un numéro de téléphone, le préfixe à utiliser est "tel:" suivi par le numéro de téléphone exprimé avec son indicatif. En RDC, l'indicatif à utiliser est +243. Pour les autres pays, voici la liste des indicatifs téléphoniques internationaux.

Pour ajouter l'indicatif à un numéro de téléphone national (composé de 10 chiffres), il suffit de remplacer le premier zéro ("0") de celui-ci par l'indicatif international approprié. Les liens pointant vers des numéros de téléphone sont très pratiques sur smartphones.

  <a href="tel:+243810000000">Appler moi</a>

Les liens HTML vers les numéros de fax

Le préfixe à utiliser est "fax:". Comme pour les liens pointant vers des numéros de téléphone, le numéro de fax utilisé doit commencer par l'indicatif international.

  <a href="fax:+243990000000">Fax texte</a>

Les liens HTML vers les comptes Skype

Le préfixe à utiliser pour faire un lien pointant vers un pseudo Skype est "callto:". Ces liens permettent de lancer Skype, le célèbre logiciel de messagerie instantané et d'appel vidéo, sur les ordinateurs et appareils mobiles sur lesquels l'application est installée.

  <a href="callto:skye_account">Appel Sype</a>