Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

8d. Liens vers des Sections d'une Page

Vous avez vu comment relier d'autres pages web, que ce soit celles que vous avez créées ou que vous les ayez trouvées autre part sur Internet. Et si vous vouliez connecter vers une section particulière à l'intérieur d'un document ? VOUS LE POUVEZ !

Objectifs

Après cette leçon, vous pourrez :

Créer une marque de référence cachée pour une section particulière dans un fichier HTML.
Construire un lien hypertexte qui connectera vers une section particulière dans un fichier HTML.
Construire un lien hypertexte qui connectera vers une section particulière dans un autre fichier HTML.
Créer une table des matières hypertexte pour une page web.

Leçon

Note : Si vous n'avez pas le document de la leçon précédente, téléchargez une copie maintenant.

L'Ancre Nommée

Une ancre nommée est une marque de référence cachée pour une section particulière de votre fichier HTML. Elle peut être utilisée pour lier une section différente de la même page si cette page est trop longue, ou vers une section d'une autre page. Par exemple, dans la page que vous êtes en train de regarder, je pourrais créer une marque cachée appelée "Vérifiez" qui marquerait le titre "Vérifiez votre travail" en bas de la page. Il me suffirait ensuite de créer une ancre qui connecterait à cette section du document. Quand on cliquerait sur le lien de cette ancre, votre navigateur web positionnerait ce titre en haut de l'écran.

Voici un exemple que vous pouvez essayer tout de suite. Allez à Vérifiez votre travail. Quand vous arriverez là-bas, cherchez un lien qui vous ramène ici.

Le code HTML pour créer une ancre nommée est :


     <a name="NOM">Texte à relier</a>

ou, pour le lien que vous venez d'essayer :


     <a name="check">Vérifiez votre travail</a>

Notez la subtile différence avec le lien ancre simple <a href=... que nous avons appris dans la leçon 8a.

Ecrire un Lien vers une Ancre Nommée

Si vous voulez créer un lien hypertexte (pour une "ancre", consultez la leçon 8a) vers une ancre nommée, utilisez le code HTML suivant :


     <a href="#xxxxx">Texte du lien hypertexte</a>

ou, pour le lien que vous venez d'essayer et qui vous a envoyé à la section en bas de la page :


     Allez à  <a href="#check">Vérifiez votre Travail</a>

Le symbole "#" indique à votre navigateur web de chercher dans le document HTML une ancre nommée appelée "xxxxxx" ou, dans notre exemple, "check". Quand vous sélectionnez ou cliquez sur l'hypertexte, votre navigateur affiche la partie du document contenant l'ancre nommée en haut de l'écran.

Ajouter des Ancres Nommées à la leçon Web Volcan

Maintenant, nous allons construire une table des matières pour notre leçon, qui apparaîtra en haut de la page de notre Web Volcan. Les entrées de cette table sont les titres que nous avons déjà créés. Chacun se comportera comme un lien hypertexte vers une section particulière de notre leçon.

La première chose à faire est de créer une ancre nommée pour chacune des sections de notre leçon Web Volcan :

Ouvrez votre fichier index.html dans l'éditeur de texte
Cherchez le titre de la section Introduction. Changez-le de :
```
<h2>Introduction</h2>
```
pour qu'il ressemble à :
```
<h2><a name="intro">Introduction</a></h2>
```
NOTE : Vous venez de signaler la ligne contenant le titre "Introduction" avec une marque de référence cachée, l'ancre nommée "intro".

De la même manière, changez tous les tags de titre <h2> des autres sections :


  <h2><A NAME="term">Terminologie des Volcans</A></h2>
  
  <h2><A NAME="usa">Endroits Volcaniques aux USA</A></h2>
  
  <h2><A NAME="mars">Endroits Volcaniques sur Mars</A></h2>
  
  <h2><A NAME="project">Projet de Recherche</A></h2>

Si vous Rechargez maintenant dans votre navigateur web, vous ne noterez aucune différence visible. Les tags d'ancres nommées que nous venons d'ajouter sont cachés à la vue de l'internaute.

Ajouter des Liens vers une Ancre Nommée dans le Même Document

Maintenant, nous allons créer la table des matières qui apparaîtra en haut de l'écran. Nous allons utiliser une liste Non Ordonnée (consultez la leçon 6 pour plus d'informations sur les listes) pour créer cette partie du document :

Si ce n'est pas déjà fait, ouvrez votre fichier index.html dans l'éditeur de texte.
Sous la première phrase en-dessous du titre Web Volcan, tapez le texte suivant :
```
<hr>
<B>Dans cette Leçon...</B>
<ul><i>
<li>Introduction
<li>Terminologie des Volcans
<li>Endroits Volcaniques aux USA
<li>Endroits Volcaniques sur Mars
<li>Projet de Recherche</i>
</ul>
<hr>
```
NOTE : Cet index est entouré au-dessus et en-dessous par une barre horizontale en utilisant le tag <hr>. Le style Italique est utilisé pour les entrées de texte. Jusqu'ici, nous avons seulement tapé le texte des entrées de l'index. Nous allons ajouter ci-dessous le HTML pour rendre ces liens actifs.
Sauvegardez et Rechargez dans votre navigateur web.

Pour finir, nous voulons que chaque élément de la liste se comporte comme un lien hypertexte vers une autre section du document. Pour réaliser cela, nous allons utiliser une variation de l'ancre de base étudiée lors de la leçon 8a. Plutôt que de relier vers un autre fichier, nous connectons à une des ancres nommées (les marques cachées que nous avons créées au-dessus) à l'intérieur du même fichier HTML. Nous précisons que c'est une ancre nommée en précédant la marque de référence par le symbole "#" :

Ouvrez votre fichier index.html dans l'éditeur de texte
Allez au premier élément de la liste de la section index. Changez-le de :
```
    <li>Introduction
```
pour qu'il apparaisse comme :
```
    <li><A HREF="#intro">Introduction</A>
```

Vous devriez maintenant être capable de modifier les autres liens vers les ancres nommées pour que la section ressemble à :


<hr>
<B>Dans cette Leçon...</B>
<ul><i>
<li><A HREF="#intro">Introduction</A>
<li><A HREF="#term">Terminologie des Volcans</A>
<li><A HREF="#usa">Endroits Volcaniques aux USA</A>
<li><A HREF="#mars">Endroits Volcaniques sur Mars</A>
<li><A HREF="#project">Projet de Recherche</A></i>
</ul>

Sauvegardez et Rechargez dans votre navigateur web. Quand vous cliquez sur un élément de l'index, le navigateur doit afficher la section correspondante en haut de l'écran.

Ajouter des Liens vers une Ancre Nommée dans un Autre Document

Vous pouvez créer un lien qui connecte à une section d'un autre document HTML marquée avec une ancre nommée. Le HTML pour construire un lien vers une ancre nommée dans un autre document HTML local est :


     <a href="fichier.html#NOM">Texte du lien</a>

et si le document est présent sur un autre site web :

    <a href="http://www.cheese.org/pub/recipe.html#colby">Le Fromage Colby</a>

Dans la leçon 8a, nous avons créé un lien hypertexte partant d'une section de notre leçon sur le Mont St. Helens vers msh.html, un autre fichier HTML. Maintenant, nous allons ajouter un lien dans ce second document qui nous ramènera à la section originale de notre page Volcan principale.

Ouvrez votre fichier msh.html dans l'éditeur de texte
Près du bas du code HTML (mais au-dessus du tag </body>), tapez le texte suivant :
```
<hr>
<a href="index.html#usa">Retour au <i>Web Volcan</i></a>
```
NOTE : Nous avons inclus le tag de style Italique <i>...</i> dans le texte marqué par l'ancre nommée "usa".
Sauvegardez et Rechargez dans votre navigateur web. Quand vous cliquez sur le lien hypertexte au bas de la page msh.html, vous devriez retourner à la section "Endroits Volcaniques aux USA" de la leçon Web Volcan.

Dans ce cas, le lien est juste le nom d'un autre fichier HTML, msh.html, dans le même répertoire que le fichier index.html. Pourtant, vous pouvez utiliser un URL complet (voir la leçon 7) pour relier à une ancre nommée dans un fichier HTML sur un autre ordinateur. Par exemple, pour créer un lien vers la section "Introduction" d'un fichier HTML stocké sur le serveur WWW du MCLI, la syntaxe serait :


   <a href="http://www.mcli.dist.maricopa.edu/tut/final/index.html#intro">
      Introduction au Web Volcan</a>

La marque de référence "#nom_de_l'ancre" est collée à la fin de l'URL.

Vérifiez Votre Travail

Comparez votre page web avec un exemple du document-type. Si votre page web est différente de l'exemple ou que les ancres nommées ne marchent pas, vérifiez le texte que vous avez tapé dans l'éditeur de texte.

Exemple de lien pour retourner à la section décrivant l'ancre nommée...

Révision

Comment créer une ancre nommée ?
Quelles sont les étapes pour créer un lien vers une section différente à l'intérieur d'un document ?
Comment modifier une ancre pour connecter à une ancre nommée d'un autre document HTML ?
Comment créer une table des matières dans une page web ?
Quelle est la différence entre les tags <a href="...> et <a name="...> ?

Travail Indépendant

Créez des ancres nommées pour les titres de votre propre page web et construisez un index reliant à ces sous-sections.

A Suivre....

Dans la prochaine leçon, vous apprendrez comment faire qu'une image se comporte comme un lien hypertexte.

ALLER A.... | Index des Leçons | précédent : "Liens vers Internet" | suivant : "HyperGraphiques" |

Ecrire le HTML : Leçon 8d : Liens vers des Sections d'une Page
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut8d.html