Infoforall

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.

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 :

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 :

<p>Le texte contenu entre la balise d'ouverture <strong>&lt;a&gt;</strong> et de fermeture <strong>&lt;/a&gt;</strong> définit ce qui sera affiché comme texte-lien : <a href="http://infoforall.fr/index.html">Ici pour retourner à l'accueil</a></p>

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:

<a href="http://infoforall.fr/index.html">Ici pour retourner à l'accueil</a>

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

<a href="http://infoforall.fr/index.html">Ici pour retourner à l'accueil</a>

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

<a href="http://infoforall.fr/index.html">Ici pour retourner à l'accueil</a>

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>TEST DES LIENS</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>

    <body>

    </body>

</html>

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

test_liens

pages_test

page_1.html

page_2.html

page_3.html

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 :

test_liens

pages_test

page_1.html

page_2.html

page_3.html

page_3.html

encore_plus_loin

page_4.html

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 :

contenu_du_dossier

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.

<a href="page_4.html">Vers la page 4</a>

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 :

<a href="encore_plus_loin/page_4.html">Vers la page 4</a>

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 :

<a href="../page_1.html">Vers la page 1</a>

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.

menu 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 :

<a href="file:///G:/informatique/html/documents_ICN/test_liens/pages_test/page_3.html">Vers la page 3</a>

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.

<a href="http://www.w3schools.com/css/">Vers le site w3schools.com</a>

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.

Pourquoi les adresses sont-elles bizarres parfois ?

A faire : demandez moi à l'oral pour l'instant. Il s'agit d'une histoire de langage serveur qui génère du code pour le navigateur plutôt qu'un code html fixe stocké sur le serveur.

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

<a href="http://www.w3schools.com/css/" target="_blank">Vers le site w3schools.com</a>

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.

<a href="http://www.w3schools.com/css/" target="_blank" title="Attention, on ouvre un nouvel onglet !">Vers le site w3schools.com</a>

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 :

<h2>1 - Créer des liens externes à la page</h2>

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

<h2 id="partie_01">1 - Créer des liens externes à la page</h2>

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 #.

<a href="#partie_01">Vers la partie 1</a>

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.

<a href="web-act035.html#creation_menu">Haut</a>

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

<nav>

    <p class="essai_bouton6">ACCUEIL</p>

    <p class="essai_bouton6">OUI</p>

    <p class="essai_bouton6">NON</p>

    <p class="essai_bouton6">M'ENFIN !</p>

</nav>

Pour le CSS

nav

{

    width : 600px;

    height : 600px;

    margin:auto;

    background-color:#4a829f;

}


.essai_bouton6

{

    margin-left: 40px;

    margin-right: 40px;

    background-color:#91a0e1;

    margin-top : 5px;

    margin-bottom : 5px;

    padding: 20px;

    border-radius: 12px;

}


.essai_bouton6:hover

{

    background-color:#FFF168;

}

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 :

<nav>

    <a href="page_1.html">ACCUEIL</a>

    <a href="page_2.html">OUI</a>

    <a href="page_3.html">NON</a>

    <a href="encore_plus_loin/page_4.html">M'ENFIN !</a>

</nav>

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.

nav

{

    width :600px;

    height : 600px;

    margin:auto;

    background-color:#4a829f;

}


nav a

{

    margin-left: 40px;

    margin-right: 40px;

    background-color:#91a0e1;

    margin-top : 5px;

    margin-bottom : 5px;

    padding: 20px;

    border-radius: 12px;

}


nav a:hover

{

    background-color:#FFF168;

}

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).

nav

{

    width : 600px;

    height : 600px;

    margin:auto;

    background-color:#4a829f;

}


nav a

{

    display: block;

    margin-left: 40px;

    margin-right: 40px;

    background-color:#91a0e1;

    margin-top : 5px;

    margin-bottom : 5px;

    padding: 20px;

    border-radius: 12px;

}


nav a:hover

{

    background-color:#FFF168;

}

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.

...CORRECTION...

nav a

{

    display: block;

    margin-left: 40px;

    margin-right: 40px;

    background-color:#91a0e1;

    margin-top : 5px;

    margin-bottom : 5px;

    padding: 20px;

    border-radius: 12px;

    color: black;

    text-decoration: none;

}

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 

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ù :

nav

{

    width : 600px;

    height : 600px;

    margin:auto;

    background-color:#4a829f;

}


nav a

{

    display: block;

    margin-left: 40px;

    margin-right: 40px;

    background-color:#91a0e1;

    margin-top : 5px;

    margin-bottom : 5px;

    padding: 20px;

    border-radius: 12px;

    color: black;

    text-decoration: none;

}


nav a:hover

{

    background-color:#FFF168;

}

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 :

<a href="mailto:votrenom@provider.com">Envoyez-moi un e-mail !</a>

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 :

<a href="monfichier.zip">Télécharger le fichier</a>

Télécharger le fichier

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