Aller au contenu

8. Les Liens

Maintenant que vous savez créer une page avec du contenu, texte ou image, nous allons voir comment créer des liens entre différentes pages.

Principes des liens

Un lien est un texte cliquable qui renvoi vers une source (page, document, …). Aussi appeler hyperlien, c'est lui qui à permit de révolutionner l'Internet.

Voilà à quoi ça ressemble :

Exemple de lien

Un lien est donc composé :

  • d'un texte qui est cliquable,
  • d'une source.

Pour créer un lien, il nous faut une balise <a> :

HTML
<a></a>

Ensuite, nous allons entrer entre ces balises le texte à rendre cliquable :

HTML
<a>Exemple de lien</a>

Enfin, nous allons ajouter une source via l'attribut href :

HTML
<a href="LIEN_VERS_MA_SOURCE">Exemple de lien</a>

Liens externes (absolut)

Un lien externe est un lien qui renvoie vers une page d'une autre site internet, par exemple https://www.etml.ch. La source doit donc être une url complète avec https:// :

HTML
<a href="https://www.etml.ch">Site de l'ETML</a>

Voilà le résultat :

Site de l'ETML

On peut contrôler où va s'ouvrir le lien au clic. Par défaut, il s'ouvre dans l'onglet que l'on consulte. Ça n'est pas pratique, et l'internaute risque de ne pas retourner sur votre site. C'est pour cela que l'attribut target existe :

HTML
<a class="demo-inline" href="https://www.etml.ch" target="_blank">Site de l'ETML</a>

Cet attribut peut avoir plusieurs valeurs :

  • _self : la lien s'ouvre dans l'onglet actuel. il s'agit du comportement par défaut.
  • _blank : le lien s'ouvre dans un nouvel onglet.

Notez

D'un point de vue de l'expérience utilisateur, il n'est pas recommandé d'utilisé l'attribut _blank. Donc à utiliser uniquement où cela est nécessaire.

Liens internes (relatif)

Un lien interne permet de faire un lien vers une page html interne à notre site. Prenons par exemple une site qui aurait 3 pages :

  • index.html : notre page d'accueil
  • page.html : une page placée dans le même dossier que index.html
  • sous_page.html : une page placée dans un dossier nommé exemple

Notre arborescence de fichier.

Text Only
source/
  index.html
  page.html
  exemple/sous_page.html

Lorsque nous sommes dans la page d'index, pour créer un lien vers la page page.html, nous allons entrer dans le href la nom du fichier html :

HTML
<a href="page.html">Lien vers la page</a>

Pour faire un lien vers sous_page.html, nous allons devoir ajouter au href la nom du dossier qui le contient :

HTML
<a href="exemple/sous_page.html">Lien vers la page</a>

Enfin, si vous êtes sur la page sous_page.html et que vous voulez faire un lien vers une page dans un dossier précédent, il faudra ajouter ../ dans le href :

HTML
<a href="../index.html">Lien vers la page</a>

Notez

L'attribut 'href' ne doit pas être laissé vide. Dans ce cas ajouter le comme ceci: 'href="#"'

Les autres usages

Les ancres

Une ancre est un lien vers un élément d'une même page. Ça peut être par exemple une bouton Retour en haut de page ou bien un sommaire.

Pour cela, une balise html doit être nommé avec une #id, et la source du lien doit prendre cette #id :

HTML
<a href="#top">Ancre vers le haut de la page</a>

Notez

Nous verrons plus en détail les #id dans le cours CSS sur les .class et #id.

Voilà un exemple de lien qui renvoie vers le haut de ma page :

Ancre vers le haut de la page

Infobulle

L'attribut title="" est facultatif mais ô combien utile et utilisé. Il permet d'afficher une infobulle au survol du lien. Il s'utilise de la manière suivante :

HTML
<a href="https://www.google.fr/" title="Moteur de recherche">Google</a>

Envoyer un e-mail

La balise <a> permet également de déclencher l'ouverture de l'application de messagerie de l'utilisateur pour lui permettre d'envoyer un nouvel e-mail au destinataire précisé. Pour ce faire, il n'y a pas d'attribut particulier mais simplement une syntaxe précise à respecter dans l'attribut href="" dont nous avons déjà parlé. Un exemple ci-dessous :

HTML
<a href="mailto:support@eduvaud.ch">Envoyer un e-mail</a>

Appeler un numéro de téléphone

Semblable à la fonctionnalité qui permet de déclencher l'envoi d'un e-mail, la balise <a> propose également de composer un numéro de téléphone. Avant que le HTML5 voit le jour, les numéros de téléphone étaient ajoutés en texte standard, dans un <p> par exemple. Grâce à cette fonctionnalité, un simple clic sur ce type de lien compose directement le numéro. C'est notamment très pratique depuis un smartphone. La syntaxe est similaire à celle de mailto.

HTML
<a href="tel:+41213167777">Appeler le secrétariat de l'ETML</a>

Télécharger

L'attribut download="" est bien évidemment aussi facultatif et s'utilise dans des cas précis. En effet, il permet de forcer le téléchargement d'une ressource au lieu de la faire afficher par le navigateur web. Il est préférable d'utiliser cet attribut uniquement dans le cas précis du téléchargement d'une ressource pour ne pas trop contraindre l'utilisateur. Il s'utilise comme ceci :

HTML
<a href="monfichier.txt" download="superfichier.txt">Télécharger mon fichier</a>

Dans le cas de cette utilisation, la valeur de l'attribut download="" sera utilisée pour nommer le fichier téléchargé. Vous pouvez également ne rien préciser et dans ce cas, le fichier téléchargé portera le même nom que celui du serveur, à savoir dans le cas de l'exemple, monfichier.txt.

Notez

Il est bon de préciser que comme pour l'attribut "target", l'attribut "download" contraint l'utilisateur dans sa navigation. Il est bon de ne pas abuser de ces techniques et de les utiliser à bon escient.

La balise <a> est de type inline

La balise <a> est de type inline. C'est à dire qu'elle réagit comme les balises <strong> ou <em> en suivant le flux du texte :

HTML
<p>
    Trouve ton métier à l’<a href="https://www.etml.ch" title="Site de l'ETML" target="_blank">ETML</a> et développe tes talents.
</p>
Exemple qui s'ouvre dans un nouveau onglet :

Trouve ton métier à l’ETML et développe tes talents.