Comme vous le savez, un site web est composé de plusieurs pages.
Nous allons justement apprendre à créer des liens entre nos pages.
Je suppose que chacun d'entre vous sait ce qu'est un lien : il s'agit d'un texte sur lequel on peut cliquer pour se rendre sur une autre page.
On peut faire un lien d'une page a.html vers une page b.html, mais on peut aussi faire un lien vers un autre site.
Dans les deux cas, nous allons voir que le fonctionnement est le même.
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 et soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus.
Je vous propose d'essayer de coder le lien qui amène vers le Site du Zéro, comme ci dessous:
Lien vers le Site du Zéro
Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a> et </a>.
Il faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire, adresse en http://, https:// ou ftp://, etc.
Par exemple, le code ci-dessous est un lien qui amène vers le Site du Zéro:
<a href="http://fr.openclassrooms.com/informatique/site-du-zero/cours">Site du Zéro</a>
Par défaut, le lien s'affiche en bleu souligné. Nous verrons comment changer cette apparence lorsque nous étudierons le CSS.
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 & suivi de amp; dans votre lien.
Vous ne verrez pas la différence, mais cela est nécessaire pour avoir une page web correctement construite en HTML5.
Comment faire un lien de la page 1 vers la page 2, c'est facile si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme cible du lien le nom du fichier vers lequel on veut amener.
Par exemple : <a href="page2.html"> Ma Page </a>
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.
Dans ce cas de figure, le lien doit être rédigé comme ceci :
<a href="contenu/page2.html"> Ma Page </a>
S'il y avait plusieurs sous-dossiers, on écrirait ceci :
<a href="contenu/autredossier/page2.html"> Ma Page </a>
Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence,
il faut écrire deux points comme ceci :
<a href="../page2.html"> Ma Page </a>
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues.
En effet, il peut alors ê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 :
<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut contiendra un dièse # suivi du nom de l'ancre. Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>
Normalement, si vous cliquez sur le lien, cela vous amènera à l’endroit désiré de votre page.
(à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).
L'attribut id sert à donner un nom « unique » à une balise, pour s'en servir de repère.
Ici, on s'en sert pour faire un lien vers une ancre mais, en CSS, il nous sera très utile pour « repérer » une balise précise.
L'idée, c'est de faire un lien qui ouvre une autre 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 pour aller sur la page précédente au niveau du sous-titre "Deux pages situées dans des dossiers différents":
<a href="La page précédente.html#Mon_Ancre">Aller vers l'ancre</a>
vous amènera sur la page précédente.html, directement au niveau de l'ancre appelée "Mon_Ancre".
<h2 id="mon_ancre">Titre</h2>
Vous pouvez utiliser l'attribut <title> qui affiche une bulle d'aide lorsqu'on pointe sur le lien.
Cet attribut est facultatif.
La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien.
<a href="http://monubuntu.com/" title="Une Aide à Ubuntu">Mon Ubuntu.com</a>
Il est possible de "forcer" l'ouverture d'un lien dans une nouvelle fenêtre.
Pour cela, on rajoutera onclick="window.open(this.href);return false" à la balise <a> :
<a href="http://monubuntu.com/topic/index.html" title="Une Aide à Ubuntu" onclick="window.open(this.href);return false" > Mon Ubuntu </a>
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.
Si vous voulez que vos visiteurs puissent vous envoyer un e-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 :
<a href="mailto:votrenom@fai.com">Envoyez-moi un e-mail !</a>
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.
Il faut procéder 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 un sous-dossier créé précédemment et faites un lien vers ce fichier :
<a href="monfichier.zip">Télécharger le fichier</a>
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.