L'élément a (pour anchor, c'est à dire ancre) est l'élément qui permet de créer un lien sur une autre page.
Le code ci-dessus apparaît comme suit dans la page :
Un lien sur la page google.
Un clic gauche sur le lien remplace la page en cours par la page ciblée.
L'adresse indiquée dans cet exemple est qualifiée d'absolue (on parle aussi de "lien absolu") :
le lien indique directement l'adresse web
(on parle plus techniquement d'URL) de la page ciblée.
Ce terme de "lien absolu" est à mettre en parallèle à la notion de
"lien relatif" illustrée plus bas dans cette page.
target
_blank
L'élément target permet notamment de faire en sorte que la page ciblée s'ouvre
dans un nouvel onglet au lieu de remplacer la page parent.
Pour cela, on donne la valeur _blank à cet attribut target.
Testez en cliquant sur le lien : la page google s'ouvre dans un nouvel onglet.
Choisir systématiquement cet attribut pour vos liens peut être agaçant pour le visiteur de votre site. Un choix fréquent est de ne pas indiquer target="_blank" pour tous les liens internes à votre site et d'indiquer target="_blank" pour les liens externes.
Un nom explicite
Vous pouvez aussi choisir un nom explicite pour vos nouveaux onglets.
Si vous avez par exemple plusieurs liens dans la page qui ouvrent sur des pages d'article wikipedia,
vous pouvez donner la valeur "wikipedia"
à l'attribut target comme suit :
L'intérêt de ce choix : tous les liens target="wikipedia" s'ouvriront dans un même onglet, cela évite que votre lecteur
se retrouve rapidement submergé par une dizaine d'onglets ouverts.
Essayez : cliquez sur le premier lien dans l'affichage du code ci-dessus. Consultez rapidement la page ouverte. Puis cliquez sur le
second lien : l'ouverture se fait sous le même onglet que la page précédente.
Lien relatif
Lorsqu'on cible une page comme la page de recherche de google,
c'est à dire une page extérieure à son site, on donne l'adresse absolue (ou url absolue).
Lorsqu'on cible une page de son propre site,
on donne une adresse relative (ou url relative).
Pour clarifier les exemples qui suivent, on suppose que
la structure de notre site est la suivante :
Le terme "répertoire" utilisé ci-dessus peut-être considéré comme
un équivalent du terme "dossier" dont vous avez peut-être plus l'habitude.
Une flèche d'un répertoire vers un fichier
signifie que le répertoire contient le fichier.
De même une flèche d'un répertoire X vers un répertoire Y signifie que X contient Y
(on dit alors que X est un sur-répertoire de Y ou que Y est un sous-répertoire de X).
D'un fichier html vers un fichier html de même répertoire
Si j'écris dans le fichier f4 et que je veux faire un lien vers le fichier f5,
comme ils se situent dans le même répertoire de mon site,
il suffit d'écrire le nom du fichier ciblé comme valeur de l'attribut href :
D'un fichier html vers un fichier contenu
dans un sous-répertoire du répertoire de mon fichier.
Supposons maintenant que l'on écrive dans le fichier f3.html
et que l'on veuille faire un lien vers le fichier f2.html,
il faut indiquer le nom du dossier contenant f2 et le nom du fichier :
Pour un lien de f6.html vers f2.html :
D'un fichier html vers un fichier contenu dans un sur-répertoire du répertoire de mon fichier.
Supposons maintenant que l'on écrive dans le fichier f2.html et que l'on veuille faire un lien vers le fichier f3.html, il faut indiquer le fait que l'on doit sortir du répertoire contenant f2.html :
De façon analogue, pour un lien de f2.html vers f1.html, on doit d'abord sortir de F puis de E puis rentrer dans D :
Lien interne à une page
On peut également faire un lien sur un élément html de la même page.
On commence par ajouter un attribut id (identifiant) à l'élément html que l'on veut cibler.
Par exemple, sur la partie intitulée "l'élément a",
on a ajouté l'identifiant id="ancre" à la balise article contenant l'ensemble du paragraphe
(vérifiez le en consultant le code source de cette page), ce qui donne :
Si l'on veut maintenant ajouter ici un lien vers cette partie, on donne la valeur #ancre à l'attribut href de notre lien :
Ce qui donne : lien vers l'article sur ancre.
Essayez en cliquant sur ce lien.
En reprenant l'arborescence de site donnée ci-dessus, si dans le fichier f4.html un paragraphe p possède un attribut id de valeur coucou :
on pourra faire un lien directement sur ce paragraphe depuis n'importe quel autre fichier.
Par exemple, depuis le fichier f2 :
