6 - Gestion des liens entre les pages

Vous savez maintenant faire beaucoup de choses. Mais reste encore beaucoup à faire pour réaliser un site capable d'afficher des informations.

• Les liens vers les autres pages
• Les liens sur la page elle-même

1 - Créer des liens externes à la page

Pour créer un lien hypertexte (un texte sur lequel on peut cliquer pour activer le lien), on utilise la balise <a>. Néanmoins, elle est plus délicate à manipuler que la plupart des autres balises : il faut renseigner la destination, le texte à afficher, la façon d'ouvrir le lien...

Un lien est un moyen d’accéder à un autre endroit :

• Soit une autre page sur le même site (lien externe à la page).
• Soit une autre page ailleurs sur le web (lien externe à la page).
• Soit un autre paragraphe sur la même page (lien interne à la page).
• Soit un envoi email (lien vers un autre logiciel de traitement).

Commençons par décrire la façon de créer un lien externe.

La balise <a> possède plusieurs attributs et ne s'écrit jamais juste <a> !. On doit lui spécifier au moins l'adresse du lien avec l'attribut href.

L'attribut href="je_place_ici_adresse_de_destination" permet de définir l’adresse du lien.

Le texte contenu entre la balise d'ouverture <a> et de fermeture </a> définit ce qui sera affiché comme texte-lien : Ici pour retourner à l'accueil

Voilà le code utilisé pour la ligne ci-dessus :

On remarque première que la balise a n'est pas une balise block : on ne passe pas à la ligne. Il s'agit d'une balise inline contenue ici dans un paragraphe qui est lui une balise block.

Focalisons l'étude du code sur la balise a elle-même:

On constate bien que la balise d'entrée possède un attribut href.

Cet attribut possède en valeur l'adresse de destination indiquée entre les double guillemets "_".

Le texte qui sera affiché est à placer entre la balise d'ouverture et la balise de fermeture.

Passons à l'exercice pratique : voici la structure d'une page basique

Vous allez devoir créer plus bas trois pages qu'on va placer dans des dossiers ayant des noms bien précis :

01° Créer le dossier et le sous-dossier puis les trois pages (légérement différentes pour qu'on puisse les reconnaitre les unes des autres) nommées page_1.html, page_2.html, et page_3.html. Sauvegardez les toutes dans le même dossier pages_test. C'est important pour la localisation.

Si vous avez le courage, vous pouvez reprendre le menu que nous avons créer la fois dernière : nous allons aujourd'hui pouvoir lui donner le pouvoir d'agir comme un menu de navigation. Si vous le faites, placez le dans une balise nav, cela fera plus propre.

02° Créer maintenant des liens permettant d'atteindre les trois autres pages depuis chacune des pages.

Normalement, cela marche sans aucun problème en donnant juste le nom du fichier de la page à atteindre. Pourquoi ? Tout simplement car on donne un chemin relatif à la postion de la page qui contient le lien : si vous êtes sur la page page_1.html et que le lien indique page_2.html sans plus d'indication, il va chercher dans le dossier où se trouve déjà page_1.html. Et forcément, il trouvera page_2.html.

Compliquons les choses : nous voudrions créer une page 4 nommée page_4.html qui se trouvera dans un sous-sous dossier qu'on nommera encore_plus_loin. Voilà la structure des enregistrements :

03° Créer la page_4 au bon endroit (c'est à dire dans le dossier encore_plus_loin) en la rendant différentes des trois autres.

04° Rajouter les liens entre les quatre pages.

Normalement (c'est à dire si vous n'avez fait que donner le nom du fichier html), cela ne fonctionne pas. Pourquoi ?

Simplement parce que le fichier page_4.html ne se situe pas au même endroit que les trois autres :

Ainsi dans page_1 ou page_2 ou page_3, le lien ci-dessous ne peut pas aboutir car page_4.html ne se trouve pas dans le même dossier.

Il faut falloir indiquer le chemin à suivre pour retrouver page_4.html, à savoir aller dans le sous-répertoire encore_plus_loin.

Il faut écire le lien en rajoutant l'accès relatif :

Comme vous précisez dans quel répertoire aller trouver le fichier, cela pourra maintenant fonctionner.

Et pour les liens qui sont donnés dans page_4.html ? C'est pareil, mais il va falloir cette fois lui dire de remonter d'un cran (de sortir du dossier encore_plus_loin) à l'aide de .. qui veut dire justement de remonter l'arborescence d'un cran.

Dans page_4.html, il faudra donc utiliser des liens du type :

Vous devriez avec cela retrouver les pages 1-2-3 depuis la page 4.

05° Finaliser les quatre pages pour que les liens fonctionnent.

Et si on décide de changer le nom d'un fichier html, il faut changer son nom dans toutes les pages ? Oui. Et ça peut être long. Pour l'instant, vous n'avez pas la possibilité de créer un menu générique dont on donnerait le code à un endroit. Ce serait plus simple : il suffirait de modifier ce code pour modifier toutes les pages (un peu comme avec le CSS). Il faut pour cela utiliser un langage de progammation générant automatiquement la page html à envoyer à l'utilisateur. Or, pour l'instant, vous savez coder vous même la page, pas le faire écrire par un autre programme. Comment faire alors ?

C'est là qu'intervient Notepad++ (ou tout autre environnement digne de ce nom). Imaginons qu'on désire rebatiser page_4.html en page_nouveau_nom.html. Pour cela :

Aller dans le menu RECHERCHE puis REMPLACER.

En choisissant l'onglet Rechercher dans les fichiers d'un dossier ET en choisissant correctement le dossier à traiter et en sélectionnant sous-dossier, vous pouvez alors modifier (dans tous les fichiers du répertoire sélectionné) automatiquement une chaîne de caractères pour la remplacer pour une autre.

Puissant mais dangereux parfois. Pensez toujours à vous demander si d'autres choses ne risquent pas d'être modifiées au passage avant d'appuyer sur OK...

06° Modifier le nom de page_4.html dans tous les fichiers. Modifier manuellement le nom du fichier .html pour qu'il ai le bon nom. Relancer vos pages et, normalement, tout devrait encore fonctionner.

Voilà. Nous avons vu l'adresse relative d'un fichier.

Il existe également une adresse absolue : cela revient à donner l'adresse exacte de la position d'un fichier sur le disque dur.

J'aurais pu créer un lien vers la page 3 à l'aide de :

On remarquera la présence de file:/// devant l'adresse absolue pour que le navigateur puisse comprendre ce qu'on lui demande.

Je ne place cet exemple que pour la forme : en HTML, on ne donne jamais les adresses internes en adresse absolue car vous ne pouvez pas savoir où et comment seront stockées vos pages HTML sur le serveur qui va distribuer vos pages. L'adresse absolue sera donc fausse une fois la page en place sur le serveur.

Attention au sens du slash et de l'antislash : la codification windows ne correspond pas à la codification html.

Par contre, on peut donner des liens vers des sites exterieurs au votre à l'aide d'adresse absolue qui correspondent à leur adresse internet.

Ce qui donne : Vers le site w3schools.com

Attention aux & : si l’URL (adresse) contient des &, il faudra les remplacer par &amp; de façon à rendre l’adresse utilisable et compréhensible par le navigateur.

07° Créer un ou deux liens vers d'autres sites pour l'exemple.

Pour ouvrir un nouvel onglet dans le navigateur : il suffit de rajouter l'attribut target="_blank" dans la balise a à côté du href.

Ce qui donne : Vers le site w3schools.com

Pour rajouter un descriptif du lien lorsqu'on le survole : il suffit de rajouter l'attribut title="Attention, on ouvre un nouvel onglet !" dans la balise a à côté du href.

Ce qui donne : Vers le site w3schools.com

2 - Créer des liens internes à la page

Vous l'avez bien vu,les pages sont parfois longues, longues. Retrouvez la bonne partie n'est pas très facile. Il a un moyen de permettre à l'utilisateur de passer de partie en partie ou de remonter en haut : le lien interne.

On utilise encore une fois la balise a mais un peu différemment.

Premièrement, il faut créer un identificateur id dans la balise sur laquelle vous désirez faire pointer le lien.

Nous allons reprendre votre essai de site de la partie précédente pour avoir du contenu (ou aller chercher le code source d'une page de ce site, la plupart des pages sont longues).

Pour l'exemple, je prends la balise du premier titre de la page ici présente dont le code est :

Je rajoute un identificateur avec l'attribut id, la valeur étant un nom explicite pour la personne qui va relire votre code 

On peut maintenant créer des liens qui vont pointer vers cette balise en utilisant la bonne valeur d'identificateur précédé d'un dièse #.

Ce qui donne : Vers la partie 1

Si on identifie le header avec id="en_haut", on pourra repartir en haut de page avec <a href="#en_haut">Haut</a>.

Ce qui donne : Haut

08° Rajouter un lien en bas de page pour remonter en haut et l'inverse.

Nous verrons comment faire cela avec une image ensuite, j'entends votre question d'ici.

Cela fonctionne même vers une autre page : imaginons que je désire pointer vers la partie qui traite de la creation d'un menu de navigation.

Ce qui donne : Retour vers la création graphique d'un menu de navigation

3 - Gestion des liens en CSS et menu de navigation

Tentons maintenant de finaliser les menus de navigation. Nous avions réussi à le rendre joli, mais il ne fonctionnait pas...

Pour le code HTML, nous avions

Pour le CSS

Nous allons maintenant remplacer les balises p par des balises a avec les liens vers les pages 1,2,3 et 4.

Pour le code HTML, nous allons donc utiliser :

J'ai supprimé la class essai_bouton6 des balises a car, en fait, nous désirons modifier toutes les balises a contenues dans nav, non ?

Il suffit donc de créer un code CSS modifiant toutes les balises a contenues dans nav, avec simplement nav a.

09° Effectuez les modifications sur la page 1 de nos pages de test et observer le résultat.

Si nous testons ici, nous obtenons :

Original mais pas très pratique vous en conviendrez...

Pourquoi tant de haine ? Simplement à cause de la différence de nature entre de la balise a (c'est une balise inline : pas de passage à la ligne à la fermeture), et la balise p (qui est une balise block : passage automatique à la ligne à la fermeture).

Le plus simple, c'est donc de lui dire de devenir une balise block. Et ça tombe bien, CSS sait faire ça à l'aide de la propriété display qui peut avoir comme valeur block (valeur par défaut des balises p ou h) ou inline (valeur par défaut des balises a).

10° Nouveau test avec cette (importante) modification.

Et on obtient :

C'est beaucoup mieux non ?

Il reste à gérer le problème (éventuel, à vous de voir) du surlignage automatique du texte dans les balises a et le changement de couleur lorsque le lien est visité.

Je vous laisse trouver la propriété CSS pour forcer la couleur et celle pour revenir à un texte non souligné.

11° Effecuter les deux dernières modifications pour obtenir le visuel ci-dessous.

Etats du lien : Il existe 4 états pour un lien en balise a. Vous connaissez déjà le premier, c'est l'état hover, qu'on peut définir en CSS avec a:hover.

Mais il existe également 

• Un état lien non visité : a:link
• Un état lien visité : a:visited
• Un état lien sur lequel on clique : a:active

Si vous désirez changer la couleur du texte du lien en fonction des conditions vous savez comment faire maintenant. Normalement, nous avons utilisé le CSS avec une sélection de type nav a {..} et donc vous avez modifié tous les cas à la fois.

Voici la correction au cas où :

4 - Les autres types de lien

Nous irons vite ici, c'est purement utilitaire.

Pour envoyer un email, il suffit d’adapter la valeur de href :

Ca donne : Envoyez-moi un e-mail !

Attention néanmoins à cette façon de se faire contacter : ne laissez pas trainer votre adresse : les robots en ramassent beaucoup et on finit par se faire spammer de façon assez massive.

Attention, l'icone est à rajouter en plus, ça ne se fait pas automatiquement.

Dernier point : pour créer un lien vers un fichier à télécharger, il suffit de préciser dans href l’adresse du fichier à télécharger.

Au niveau du code :

Télécharger le fichier

Dans l'activité suivante, nous verrons comment insérer des images, des tableaux, des vidéos et des sons.