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 renvoit vers une source (page, document, …).
Voilà à quoi ça ressemble :
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> :
<a></a>
Ensuite, nous allons entrer entre ces balises le texte à rendre cliquable :
<a>Exemple de lien</a>
Enfin, nous allons ajouter une source via l'attribut href :
<a href="LIEN_VERS_MA_SOURCE">Exemple de lien</a>
Liens externes
Un lien externe est un lien qui renvoie vers une page d'une autre site internet, par exemple https://www.pushaune.com. La source doit donc être une url complète avec http:// :
<a href="https://www.pushaune.com">Exemple de lien</a>
Voilà le résultat :
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 :
<a href="https://www.pushaune.com" target="_blank">Exemple de lien</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.
Liens internes
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 arboresence de fichier.
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 valeur du fichier 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 valeur du dossier qui le contient :
<a href="dossier/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 :
<a href="../index.html">Lien vers la page</a>
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 :
<a href="#top">Ancre vers le haut de la page</a>
À propos des #id
Nous verrons plus en détail les #id dans le cours .class et #id
Voilà un exemple de lien qui renvoie vers le haut de ma page :
Les balises a 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 :
<p>
Exemple de phrase avec <a href="https://www.pushaune.com" target="_blank">un lien vers mon site internet</a>.
</p>
Exemple de phrase avec un lien vers mon site internet.