Code

Page exemple

Lien hypertext ou hyperlien

Définition

Un hyperlien, ou lien hypertexte, ou lien web, ou simplement lien, est une référence dans une page web permettant de passer de cette page web consultée à une autre page web liée.

Syntaxe

• pour créer un lien, il faut utiliser la syntaxe suivante : <a href="lien.html">Lien</a>

• Il s'agit d'une balise de catégorie inline
• a vient du mot anglais anchor (ancre en français)
• + de détails dans la documentation officielle : a sur MDN
• + de détails dans la documentation officielle : a sur w3school

les différentes catégories de liens

En fonction de la valeur de l'attribut href , il y a deux distinctions possibles :

Explications des deux distinctions

Lien absolu / Lien relatif Catégorie Définition Exemple lien absolu lien définit par rapport au dossier root <a href="http://mondomaine.fr/lien.html" >Lien</a> lien relatif lien définit par rapport à la page web <a href="lien.html" >Page d'accueil Yahoo</a> Ce concept fait l'objet d'un article particulier plus de détail

Lien interne / Lien externe Catégorie Définition Exemple lien interne lien qui pointe vers une page et/ou une ressource interne au site <a href="http://mondomaine.fr/lien.html" >Lien</a> lien externe lien qui pointe vers une page et/ou une ressource externe au site <a href="http://fr.yahoo.com" >Page d'accueil Yahoo</a>

Exemple complet avec les deux distinctions

Code

Page exemple

Signet

Définition

Suite au clique sur un lien, une page va s'ouvrir dans le navigateur et cette page va être positionnée en haut dans le navigateur. Grâce au concept de signet, il est possible de préciser un endroit particulier lors de l'ouverture d'une page web

Syntaxe

• créer un lien et ajoutez #nom_cle à la fin de la valeur de l'attribut href , par exemple : <a href="lien.html#nom_cle">Signet</a>
• créer une balise avec un attribut id="mon_cle" <p id="nom_cle">

• exemple complet :

  <a href="lien.html#nom_cle">Signet</a>
  <p id="nom_cle">text text </p>

Cas d'utilisation

• sommaire pour une page longue
• lien dans une grande page
• Exemples tirés du web

Code

Page exemple

Mail

La valeur href des liens peuvent aussi stocker des adresses mail. Lorsque l'utilisateur va cliquer sur ce lien, la fenêtre de dialogue de son client mail (comme Outlook ou ThunderBird) va s'ouvrir au lieu d'une page

Syntaxe

• créer un lien et ajoutez mailto: au début de la valeur de l'attribut href suivi d'une adresse mail : <a href="mailto:pierre@domaine.fr">Envoyer un mail</a>
• le client mail installé sur l'ordinateur va s'ouvrir avec comme destinataire (A) pierre@domaine.fr
• Il est possible de préciser un destinataire en copie (CC), un destinataire en copie cachée (CCi), un sujet (Subject) et même du texte (Body) Post complet sur le sujet

Code

Page exemple

Téléchargement

La valeur href des liens peuvent enfin stocker l'adresse d'un fichier. Lorsque l'utilisateur va cliquer sur ce lien, une fenêtre de dialogue de Téléchargement va s'ouvrir au lieu d'une page

Syntaxe

• créer un lien qui pointe vers un document, par exemple : <a href="document.pdf" target="_blank" >Document à télécharger</a>
• L'attribut target n'est pas obligatoire mais il garantit que le navigateur va ouvrir un nouvel onglet pour afficher la boite de dialogue de Téléchargement et non lancer la boite de dialogue et passer sur une page blanche

Cas d'utilisation

• Fonctionne avec les documents word (.doc, docx), excel (.xls, .xlsx), adobe (.pdf), ...
• Fonctionne avec les fichiers d'archive : .zip ou .rar

• Deux exceptions :

  1. pour les fichiers .txt
  2. pour les images (.jpg,.png,.gif)

  Le comportement est différent pour ces types de document :

  • par défaut, le navigateurs va les afficher (et non lancer la boite de dialogue de Téléchargement)
  • sauf si vous ajoutez l'attribut download voir exemple