LIENS
<a href=”...”> MON LIEN </a>
Il existe plusieurs types de liens :
• 1°) liens externes
• 2°) liens internes
• 3°) ancres nommées
• 4°) vers un fichier
• 5°) vers un e-mail
1. Lien externe
= lien vers une page d'un autre site
• => protocole HTTP :
Exemple : [Link]
• => préciser l’attribut hreflang si le site ciblé est dans une autre langue
• => préciser l’attribut rel avec la valeur external
• Exemple :
<a href="[Link]
hreflang="en"
rel="external">
Google
</a>
1
2. Lien interne
= lien vers une autre page de notre site
• Chemins absolus :
/ : indique la racine du site
• Chemins relatifs :
./ : « on reste où on est »
../ : « on remonte d’un niveau »
Voir livre p. 102-103
Voir exemple (à refaire à domicile)
2. Lien interne
• Chemins absolus :
/ : indique la racine du site
⇒ Exemples :
- Lien absolu vers une page hébergée à la racine du site :
<a href="/[Link]">Mentions légales</a>
- Lien absolu vers la racine du site :
<a href="/">Accueil du site</a>
⇒ N.B. À éviter
2
2. Lien interne
Arborescence type d’un dossier Web :
Pourquoi ?
Page index obligatoirement
à la racine du site
Doit obligatoirement s’appeler
index (avec un i minuscule)
2. Lien interne
Arborescence type d’un dossier Web :
Un dossier css pour placer
les fuilles de style
Un dossier html pour regrouper
les autres pages du site
Un dossier img pour regrouper
les images du site
3
2. Lien interne
• Chemins relatifs :
Principes :
ü On part du ficher
dans lequel on travaille
ü ./ :
« on reste où on est »
(qu’on peut omettre)
ü ../ :
« on remonte d’un niveau »
(obligé de l’écrire)
2. Lien interne
• Chemins relatifs :
Exemple 1 :
ü Je suis dans index et je veux faire
un lien vers le fichier p1
4
2. Lien interne
• Chemins relatifs :
Exemple 1 :
ü Je suis dans index et je veux faire
un lien vers le fichier p1
ü index est dans le dossier
monSite
ü Quand je suis dans le dossier
monSite, je vois le sous-dossier
html
ü => j’écris pour commencer :
./ (« je reste dans le dossier où je suis »)
ü => le chemin est :
./html/[Link]
OU html/[Link]
2. Lien interne
• Chemins relatifs :
Exemple 2 :
ü Je suis dans p1 et je veux faire
un lien vers le fichier index
5
2. Lien interne
• Chemins relatifs :
Exemple 2 :
ü Je suis dans p1 et je veux faire
un lien vers le fichier index
ü p1 est dans le dossier html
ü Qd je suis dans le dossier html,
je ne vois pas index
ü => j’écris pour commencer :
../ (« je remonte d’un niveau »)
ü => je me retrouve dans le dossier
monSite, dans lequel je vois
maintenant index
ü => le chemin est :
../[Link]
2. Lien interne
• Chemins relatifs : Exemple 3 :
ü Je suis dans p1 et je veux faire
un lien vers le fichier [Link]
6
2. Lien interne
• Chemins relatifs : Exemple 3 :
ü Je suis dans p1 et je veux faire
un lien vers le fichier [Link]
ü p1 est dans le dossier html
ü img2 est dans le sous-dossier
img qui est dans le dossier
monSite
ü Qd je suis dans le dossier html,
je ne vois pas ce dossier img
ü => j’écris pour commencer :
../ (« je remonte d’un niveau »)
ü => je me retrouve dans le dossier
monSite, dans lequel je vois
maintenant le dossier img
ü => le chemin est :
../img/[Link]
2. Lien interne
• Chemins relatifs : Exemple 4 :
ü Je suis dans p1 et je veux faire
un lien vers le fichier [Link]
7
2. Lien interne
• Chemins relatifs : Exemple 4 :
ü Je suis dans p1 et je veux faire
un lien vers le fichier [Link]
ü p1 est dans le dossier html
ü p2 est lui aussi dans le dossier
html
ü Qd je suis dans le dossier html,
vois directment p2
ü => j’écris pour commencer :
./ (« je reste où je suis »)
ü => le chemin est :
./[Link]
OU [Link]
2. Lien interne
• Chemins relatifs : Exemple 5 :
ü Je suis dans nv et je veux faire
un lien vers le fichier index
8
2. Lien interne
• Chemins relatifs : Exemple 5 :
ü Je suis dans nv et je veux faire
un lien vers le fichier index
ü nv est dans le dossier nouveau
ü => j’écris pour commencer :
../ (« je remonte d’un niveau »)
ü => je me retrouve dans le dossier
html, dans lequel je ne vois pas
encore index
ü j’écris encore :
../ (« je remonte d’un niveau »)
ü => je me retrouve dans le dossier
monSite, dans lequel je vois à
présent index
ü => le chemin est :
../../[Link]
3. Ancre nommée
= lien vers un autre endroit de la même page
(par ex. lien d’évitement ou lien d’accès direct)
• Comment ? On utilise
1. # (ancre) et
2. id
• Une ancre (#) s’écrit dans une URL
pour cibler directement une portion de document
désignée par un id
• Exemple :
Écrire un lien pour accéder directement
à un formulaire de contact qui se trouve
tout en bas d’une page
9
3. Ancre nommée
• Exemple
3. Ancre nommée
Lien d’accès direct au formulaire de contact :
• Exemple <a href="#contact">
Accéder directement au formulaire de contact
</a>
ancre
nommée
10
3. Ancre nommée
• Exemple
4. Lien vers une adresse e-mail
= lien qui lance le logiciel de messagerie par défaut
de l’ordinateur de l’internaute
• => protocole « mailto » :
mailto:
• => préciser l’attribut title :
« envoyer un e-mail à … »
• Exemple :
<a href="[Link]
title="envoyer un e-mail à James Bond">
James Bond
</a>
11