Les liens

Introduction

Dans les cours précédents, nous avons vu comment créer l’architecture et la structure de notre site Web. Aujourd’hui, nous allons voir un des éléments les plus utilisés en html, les liens. En effet, le lien est indispensable, que ce soit pour envoyer vos lecteurs vers d’autres pages de votre site ou même sur d’autres sites, le lien est au cœur de la navigation Web. Il est donc très important de bien maîtriser cet élément.
Si vous ne connaissez pas les termes de valeur et d’attribut en html, cliquez ici pour les découvrir et mieux comprendre le cours.

1-Les liens vers un autre site

Je vous propose ici d’essayer de faire vous-même le lien qui mènera à la page d’accueil de mon site. Votre navigateur devra afficher ceci :

En premier nous allons créer le lien, pour cela on utilise la balise de tag a. Pour indiquer la cible du lien, il faut lui donner un attribut, ici l’attribut href= » » avec l’URL du site qui commence par http ou https dans la plupart des cas. Entre les balises d’ouverture et de fermeture de notre élément, nous écrirons le texte sur lequel le lecteur doit cliquer. Cependant, vous pouvez mettre autre chose que du texte comme une image ou un logo…
Dans notre exemple, nous aurons donc dans notre éditeur :

Voilà le lien est fait. Maintenant, il nous reste à créer le petit paragraphe au sein duquel il est implanté. Pour cela, nous allons créer un élément p et écrire le texte à l’intérieur. Attention, on voit qu’à la fin de la première phrase il y a un retour à la ligne, pensez à utiliser la balise de tag br ! Ainsi, le codage final de ce simple paragraphe sera :

Petit plus, si le lien que vous venez de créer renvoie votre lecteur sur un autre site vous perdez votre visiteur. Pour remédier à cela, vous pouvez ajouter l’attribut target à votre lien. Le lien ouvrira donc un nouvel onglet au lieu de rester sur la même page et de quitter la vôtre. Pour ce faire, après avoir inséré votre lien avec href, vous allez ajouter target= »_blank ».
Les types de liens que nous venons de voir sont des liens absolus, car on y écrit l’adresse complète de la page de destination.

2-Les liens vers une page de son site

Si votre site est en construction, vous n’avez pour le moment pas d’adresse Web pour vos pages. En toute logique, vous avez donc créé un dossier, par exemple monsite qui contient les fichiers de votre site. Si vous avez alors besoin de renvoyer le lecteur à une autre de vos pages il y a donc une autre manière de faire votre lien que nous allons décliner en trois cas:

• Deux pages situées dans un même dossier
  Lorsque vos deux pages sont dans le même répertoire, c’est tout simple, il suffit d’écrire comme cible du lien le nom du fichier de la page de destination avec son extension .html. Si le nom de votre page de destination est page deux, votre lien sera donc comme ceci :
  « <a href= »page 2.html »>cliquez ici</a> pour accéder à la page 2. »
• Lien vers une page dans un sous-dossier
  Si votre page 2 est par exemple dans le sous-dossier nommé dossier2. Il suffira de rajouter le nom de ce sous-répertoire avant le nom du fichier, en les séparant d’un slash, le lien aurait donc la forme :
  « <a href= »dossier2/page 2.html »>cliquez ici</a> pour accéder à la page 2. »
• Lien vers une page dans un dossier parent
  Ici, on se retrouve dans le cas inverse du cas précédent. La page 2 se trouve dans le dossier parent de celui de la page sur laquelle vous travaillez, de nom dossierP il faudra juste ajouter ../ avant le nom de la page. Ainsi, le lien sera de la forme :
  « <a href= »../page 2.html »>cliquez ici</a> pour accéder à la page 2. »

 

3-Les liens interne à une page

On l’appelle aussi lien vers une ancre, ce lien est utilisé surtout lorsque vous avez une page très très grande. Il renverra directement le visiteur vers la partie qui l’intéresse sans qu’il ait à faire défiler la page. L’exemple le plus concret est lorsque vous avez un article important avec beaucoup de parties. Vous allez alors créer un sommaire et le lecteur n’aura qu’à cliquer sur la partie qui l’intéresse pour y être aussitôt renvoyé. Pour ce type de lien, on procède donc en deux parties

1. Création de l’ancre :
   L’ancre est le point de repère de votre lien interne, pour la créer, il faut rajouter l’attribut id au titre de la partie ciblée. Un id est unique, vous pouvez lui donner la valeur que vous voulez, mais ne l’utilisez qu’une seule fois. Je vous conseille de lui donner un nom en rapport avec ce à quoi il réfère. Par exemple, si vous avez une partie sur les kangourous, vous pouvez créer votre ancre sur le titre de la partie de cette manière :
   « <h3 id= »kangourou »>Les kangourous</h3>« 
2. Création du lien :
   Toujours en utilisant le tag a pour la création du lien, nous allons donc mettre en cible cette fois-ci l’id et pas une adresse ou un chemin d’accès comme cible. Ainsi votre lien aura la forme :
   « <a href= »#kangourou »>Les kangourous</a>« 

Dans la page, le visiteur n’a plus qu’à cliquer sur Les kangourous pour être renvoyé au passage sur ce sujet.

 

Conclusion

Pour changer de page et relier un site à un autre les liens sont indispensables. Pour les insérer on utilise la balise <a> avec l’attribut href pour indiquer l’URL, ce sont des liens absolus. Autrement, si on écrit le répertoire et le nom du fichier il s’agit de liens relatifs. On peut aussi créer des liens internes à une page en créant des ancres sous la forme d’attribut id.
Par défaut, le texte d’un lien s’affiche en bleu et souligné, puis en violet quand vous avez cliqué dessus. Nous verrons en CSS comment modifier ces paramètres.

J’espère que ce cours vous à plus, n’hésitez pas à émettre des commentaires ou à poser des questions si vous avez besoin, à bientôt, JB.