Sommaire

Lire cette page et à la fin faire le QCM et l'exercice. L'objectif est de comprendre et de connaître les balises permettant de réaliser des ancres et des liens

Un lien vers un autre site

Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente (par défaut en bleu souligné) et un curseur en forme de main apparaît lorsqu'on pointe dessus.


Lien vers le Site du Zéro


Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a>. Il faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page on souhaite amener.

Voici un lien qui amène vers le Site du Zéro, situé à l'adresse http://www.siteduzero.com :

Code : HTML - Sélectionner
1
<a href="http://www.siteduzero.com">Site du Zéro</a>


Nous allons placer ce lien au sein d'un paragraphe. Voici donc comment reproduire l'exemple de l'image précédente :

Code : HTML - Sélectionner
1
2
<p>Bonjour. Souhaitez-vous visiter le <a href="http://www.siteduzero.com">Site du Zéro</a> ?<br />
C'est un bon site ! ;-)</p>


Essayer !


Par défaut, le lien s'affiche en bleu souligné. Si vous avez déjà visité la page, le lien s'affiche en violet.
Nous verrons comment changer cette apparence lorsque nous étudierons le CSS.


Si vous voulez faire un lien vers un autre site, il suffit donc de copier son adresse (on parle d'URL) en http://. Notez que certains liens commencent parfois par https:// (sites sécurisés) ou d'autres préfixes (ftp://...).

Si vous faites un lien vers un site qui comporte une adresse un peu bizarre avec des &, comme :
http://www.site.com/?data=15&name=mateo21
... Vous devrez remplacer tous les & par &amp; dans votre lien comme ceci :
http://www.site.com/?data=15&amp;name=mateo21
Vous ne verrez pas la différence, mais cela est nécessaire pour avoir une page web correctement construite en HTML5.


Les liens que nous venons de voir sont appelés liens absolus, car on indique l'adresse complète. Nous allons maintenant voir que l'on peut écrire les liens d'une façon un peu différente, ce qui va nous être utile pour faire des liens entre les pages de notre site.

Un lien vers une autre page de son site


Pour le moment vous êtes en train de créer votre site sur votre ordinateur. Vous êtes le seul à pouvoir le voir, et il n'a pas encore "d'adresse web" qui commence en http:// comme la plupart des sites. Heureusement, cela ne va pas nous empêcher de travailler.

Deux pages situées dans un même dossier



Pour commencer, prenons 2 fichiers correspondant à 2 pages HTML différentes. Comme je suis très inspiré, je vous propose de les appeler page1.html et page2.html. Nous aurons donc ces 2 fichiers sur notre disque dans le même dossier :

Plusieurs fichiers HTML


Si les deux fichiers sont situés dans le même dossier, il suffit d'écrire simplement le nom du fichier vers lequel on veut amener. Par exemple : <a href="page2.html">. On dit que c'est un lien relatif.

Voici le code que nous allons utiliser dans nos fichiers page1.html et page2.html.

page1.html



Code : HTML - Sélectionner
1
<p>Bonjour. Souhaitez-vous visiter <a href="page2.html">la page 2</a> ?</p>


page2.html



La page 2 (page d'arrivée) affichera simplement un message pour indiquer que l'on est bien arrivé sur la page 2 :

Code : HTML - Sélectionner
1
<h1>Bienvenue sur la page 2 !</h1>


Essayer !



Le lien ci-dessous ouvre page1.html :
Essayer !


Deux pages situées dans des dossiers différents



Les choses se corsent un petit peu si les pages sont situées dans des dossiers différents. Idéalement, elles ne devraient pas être trop loin l'une de l'autre (dans un sous-dossier par exemple).

Imaginons que page2.html se trouve dans un sous-dossier appelé contenu :

Liens entre fichiers dans des dossiers différents
Le fichier page2.html se trouve à l'intérieur du dossier contenu


Dans ce cas de figure, il va falloir faire un lien comme ceci :

Code : HTML - Sélectionner
1
<a href="contenu/page2.html">


S'il y avait plusieurs sous-dossiers, on écrirait ceci :

Code : HTML - Sélectionner
1
<a href="contenu/autredossier/page2.html">


Et si le fichier ne se trouve pas dans un sous-dossier mais dans un dossier "parent", on fait comment ?


Si votre fichier cible est placé dans un dossier qui se trouve "avant" dans l’arborescence, il faut écrire deux points comme ceci :

Code : HTML - Sélectionner
1
<a href="../page2.html">


Résumé en images



Les liens relatifs ne sont pas bien compliqués à utiliser une fois qu'on a compris le principe. Il suffit de regarder dans quel "niveau de dossier" se trouve votre fichier cible pour savoir comment écrire votre lien :

Liens relatifs

Sommaire

Un lien vers une ancre

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos grosses pages HTML.
En effet, si votre page est très grande il peut être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :

Code : HTML - Sélectionner
1
<h2 id="mon_ancre">Titre</h2>


Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :

Code : HTML - Sélectionner
1
<a href="#mon_ancre">Aller vers l'ancre</a>


Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).
Voici un exemple de page comportant beaucoup de texte et utilisant les ancres (j'ai mis n'importe quoi dans le texte pour remplir ) :

Code : HTML - Sélectionner
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<h1>Ma grande page</h1>

<p>
   Aller directement à la partie traitant de :<br />
   <a href="#cuisine">La cuisine</a><br />
   <a href="#rollers">Les rollers</a><br />
   <a href="#arc">Le tir à l'arc</a><br />
</p>
<h2 id="cuisine">La cuisine</h2>

<p>... (beaucoup de texte) ...</p>

<h2 id="rollers">Les rollers</h2>

<p>... (beaucoup de texte) ...</p>

<h2 id="arc">Le tir à l'arc</h2>

<p>... (beaucoup de texte) ...</p>

Essayer !


S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte.

L'attribut id sert à donner un nom "unique" à une balise, pour s'en servir de repère. Et, croyez-moi, vous n'avez pas fini d'entendre parler de cet attribut. Ici, on s'en sert pour faire un lien vers une ancre, mais en CSS cela nous sera très utile pour "repérer" une balise précise, vous verrez.
Evitez cependant de créer des id avec des espaces ou des caractères spéciaux, utilisez simplement des lettres et chiffres dans la mesure du possible pour que cela soit reconnu par tous les navigateurs.


Lien vers une ancre située dans une autre page


L'idée, c'est de faire un lien qui ouvre une nouvelle page ET qui amène directement à une ancre située plus bas sur cette page.
En pratique c'est assez simple à faire : il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.

Par exemple : <a href="ancres.html#rollers">

... vous amènera sur la page ancres.html, directement au niveau de l'ancre appelée "rollers".

Voici une page qui contient 3 liens, chacun amenant vers une des ancres de la page de l'exemple précédent :

Code : HTML - Sélectionner
1
2
3
4
5
6
7
<h1>Le Mégamix</h1>
<p>
   Rendez-vous quelque part sur une autre page :<br />
   <a href="ancres.html#cuisine">La cuisine</a><br />
   <a href="ancres.html#rollers">Les rollers</a><br />
   <a href="ancres.html#arc">Le tir à l'arc</a><br />
</p>

Essayer !

Sommaire

Cas pratiques d'utilisation des liens

Je vais essayer de vous montrer ici quelques cas pratiques d'utilisation des liens. Par exemple, saviez-vous qu'il est très facile de faire des liens qui lancent un téléchargement ? Qui créent un nouvel e-mail ? Qui ouvrent une nouvelle fenêtre ?


Un lien qui affiche une infobulle au survol



Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet attribut est facultatif.

Vous aurez un résultat ressemblant à ceci :

Une infobulle


La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien.
Voici comment reproduire ce résultat :

Code : HTML - Sélectionner
1
<p>Bonjour. Souhaitez-vous visiter le <a href="http://www.siteduzero.com" title="Réservé aux débutants">Site du Zéro</a> ?</p>


Essayer !


Un lien qui ouvre une nouvelle fenêtre



Il est possible de "forcer" l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" à la balise <a> :

Code : HTML - Sélectionner
1
2
<p>Bonjour. Souhaitez-vous visiter le <a href="http://www.siteduzero.com" target="_blank">Site du Zéro</a> ?<br />
Le site s'affichera dans une autre fenêtre.</p>


Essayer !


Selon la configuration du navigateur, la page s'affichera dans une nouvelle fenêtre ou un nouvel onglet. Vous ne pouvez pas choisir entre l'ouverture d'une nouvelle fenêtre ou d'un nouvel onglet.


Notez cependant qu'il est déconseillé d'abuser de cette technique car elle perturbe la navigation. Le visiteur lui-même peut décider s'il veut ouvrir le lien dans une nouvelle fenêtre. Il fera Maj + Clic sur le lien pour ouvrir dans une nouvelle fenêtre, ou Ctrl + Clic pour ouvrir dans un nouvel onglet.


Un lien pour envoyer un e-mail



Si vous voulez que vos visiteurs puissent vous envoyer un mail, vous pouvez utiliser des liens de type "mailto". Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci :

Code : HTML - Sélectionner
1
<p><a href="mailto:votrenom@bidule.com">Envoyez-moi un e-mail !</a></p>


Essayer !


Il suffit donc de faire commencer le lien par "mailto:" et d'écrire l'adresse e-mail où on peut vous contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre adresse e-mail. :)

Un lien pour télécharger un fichier



Beaucoup d'entre vous se demandent comment ça se passe pour le téléchargement d'un fichier... En fait, il faut faire exactement comme si vous faisiez un lien vers une page web, mais en indiquant cette fois le nom du fichier à télécharger.

Par exemple, supposez que vous vouliez faire télécharger monfichier.zip. Placez simplement ce fichier dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce fichier :

Code : HTML - Sélectionner
1
<p><a href="monfichier.zip">Télécharger le fichier</a></p>



C'est tout ! Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure de téléchargement lorsqu'on cliquera sur le lien.

Sommaire