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

8a. Liens Vers Des Fichiers Locaux

Un document peut-il parler à mon document ? Euh, ils peuvent au moins être liés !

Objectifs

Après cette leçon, vous pourrez :

Créer un lien vers un document HTML dans le même répertoire/dossier que le document principal.
Créer un lien pour afficher une image.
Créer un lien vers un fichier dans un répertoire/dossier différent de celui où se trouve votre document principal.
Réorganiser la structure de votre site web.

Leçon

Maintenant, vous allez faire votre premier essai "d'ancrage" en créant un lien hypertexte vers une autre page web. Ces liens sont appelés "locaux" car ils pointent vers des documents dans le même ordinateur que le document principal (ils ne se trouvent pas sur Internet). Vous devrez également déplacer les différentes parties de votre site grandissant (vous voyez comment ça devient bien plus qu'une simple "page d'accueil" ?).

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

Liens vers des Fichiers Locaux

Le lien ancre le plus simple ouvre un autre fichier HTML dans le même répertoire que celui de la page web affichée. Le format HTML en est le suivant :


     <a href="nom_de_fichier.html">texte correspondant au lien</a>

Pensez à "a" pour ancre et "href" pour "hypertexte reférence".

Le nom de fichier doit être un autre fichier HTML. Le texte qui apparait après le premier > et avant les symboles </a> de fin de tag sera "l'hypertexte" souligné et "hyper".

Maintenant, suivez ces étapes pour construire une ancre dans votre document HTML vers un fichier local :

Ouvrez votre document HTML, volc.html, dans l'éditeur de texte.
Tout d'abord, sous le titre Endroits Volcaniques aux USA, entrez le texte suivant qui présente les deux volcans des sections suivantes.
```
     Ci-dessous, deux endroits des Etats-Unis considérés comme des zones volcaniques "actives".
```

Sous le titre "Mont St. Helens", tapez :


     Le 18 Mai 1980, après une longue période de repos, 
     cette montagne calme de l'état de Washington nous a fourni 
     <a href="msh.html"> des observations détaillées
     </a> sur les mécanismes d'éruptions hautement explosives.

Le texte "observations détaillées" amènera l'internaute vers un second document HTML appelé msh.html. Ce second fichier HTML n'existe pas encore ; nous le construirons dans les étapes (5) et (6).

Sauvegardez et fermez votre document HTML
Maintenant, avec votre éditeur de texte, ouvrez une fenêtre pour un Nouveau document.

Entrez le texte suivant dans la nouvelle fenêtre :


     <html>
     <head>
     <title>Le Mont St Helens</title>
     </head>
     <body>
     <h1>Le Mont St Helens</h1>
     Les immenses pins de cette montagne jadis tranquille 
     ressemblaient à des cure-dents.
     </body>
     </html>

Sauvegardez ce fichier sous msh.html dans le même répertoire/dossier que votre premier fichier HTML (volc.html).
Rechargez volc.html dans votre navigateur web.
Testez le lien hypertexte des mots "observations détaillées". Quand vous cliquez dessus, il doit vous connecter à la nouvelle page sur le Mont St Helens.

Ancre Vers Une Image

Dans la leçon 7a, nous avons appris comment afficher une image "incluse" qui apparaîtra dans votre page web. Avec le tag ancre, vous pouvez aussi créer un lien pour afficher un fichier image. Quand le lien est sélectionné, il télécharge le fichier image et affiche l'image dans une page vide.

L'ancre la plus simple pointe vers un fichier dans le même répertoire/dossier que le document original. Le code pour créer un lien hypertexte vers une image est le méme que pour pointer vers un autre document HTML :


  <a href="nom_de_fichier.gif">texte correspondant au lien</a>

où nom_de_fichier.gif est le nom d'un fichier image au format GIF.

Maintenant, suivez ces indications pour ajouter un lien vers un fichier image dans votre document HTML :

Téléchargez une copie d'une image GIF depuis le Studio d'Images de la Leçon 8a.
Ouvrez le fichier msh.html dans l'éditeur de texte.

Modifiez le texte pour inclure un lien vers l'image du Mont St Helens.


     Les immenses pins de cette montagne jadis tranquille 
     <a href="msh.gif">ressemblaient à des cure-dents</a>.

Sauvegardez le fichier msh.html et Rechargez-le dans votre navigateur web.
Maintenant, cliquez sur le lien que vous venez de créer dans l'étape (3).
Une photo d'arbres déracinés doit apparaître.

Liens vers d'autres Répertoires

Les tags ancre peuvent également pointer vers un document HTML ou un fichier image dans un autre répertoire/dossier en relation avec le document qui contient l'ancre. Par exemple, dans notre leçon, on pourrait vouloir stocker tous les graphiques dans un répertoire/dossier séparé appelé pictures. Au fur et à mesure que vous créerez de plus en plus de fichiers HTML, le fait de garder les fichiers images dans leur propre répertoire organisera un peu mieux les choses pour vous. Réalisons cela maintenant :

Depuis le système d'exploitation de votre ordinateur (le "bureau"), créez un sous-répertoire/dossier appelé pictures à l'endroit où votre fichier volc.html est stocké.
Déplacez le fichier msh.gif vers ce nouveau sous-répertoire/dossier.
Ouvrez le fichier msh.html dans votre éditeur de texte.
Modifiez le tag ancre du graphique :
```
     Les immenses pins de cette montagne jadis tranquille 
     <a href="pictures/msh.gif">ressemblaient à 
     des cure-dents</a>.
```
NOTE: Avec le HTML, vous pouvez indiquer à votre navigateur web d'ouvrir un(e) document/image à un niveau de répertoire inférieur (i.e. un sous-répertoire ou dossier dans le répertoire/dossier contenant le fichier HTML original) en utilisant le caractère "/" pour indiquer le passage vers un sous-répertoire appelé "pictures."
Enregistrez le document HTML et Rechargez dans votre navigateur web.

Si tout s'est bien passé, le lien dans la phrase décrivant les arbres déracinés devrait maintenant appeler le fichier image stocké dans le sous-répertoire/dossier pictures.

Ancre vers un Répertoire Supérieur

Les types de liens que nous avons construits ici sont appelés liens "relatifs", ce qui veut dire qu'un navigateur web peut construire l'URL complet à partir de l'endroit actuel de la page HTML et de l'information contenue dans les tags <a href=...>. Ceci est très important car vous pouvez créer toutes vos pages web sur un ordinateur, les tester et ensuite les déplacer sur un autre ordinateur -- tous les liens relatifs resteront intacts.

Dans cette leçon, nous avons vu comment construire un hyperlien vers un document d'un répertoire inférieur par rapport à votre page HTML. Notez que vous pouvez également créer un lien connectant vers un niveau supérieur de répertoire avec ce code HTML :

  <a href="../../accueil.html">retour à l'accueil</a>

A chaque "../", l'URL d'une ancre indique au navigateur web de remonter à un niveau supérieur de répertoire/dossier par rapport à la page actuelle ; dans ce cas, de remonter de deux niveaux de répertoires/dossiers et de chercher un fichier appelé accueil.html.

Dans notre exemple, supposons que notre sous-répertoire pictures ne soit pas dans le même répertoire/dossier que le fichier volc.html, mais à un niveau plus haut.

directory diagram Dans la section précédente, nous avons construit un lien depuis le fichier volc.html vers le fichier msh.gif dans un sous-répertoire :

  <img src="pictures/msh.gif">

Maintenant, nous voulons réorganiser la structure de notre site afin que le dossier/répertoire pictures soit à un niveau supérieur. Le lien devient alors :

  <img src="../pictures/msh.gif">

Le navigateur web cherchera alors un dossier appelé "pictures" se trouvant un niveau au-dessus de notre fichier volc.html.

Un des avantages de cette structure est qu'il serait plus facile de stocker un grand nombre d'images dans ce dossier/répertoire supérieur pouvant être partagées par d'autres pages web. Nous pourrions faire une autre leçon sur les type de paysages en utilisant les fichiers de ce dossier/répertoire.

Il est maintenant temps de faire un peu de rangement dans nos fichiers HTML. Cela implique que vous soyez habitués à déplacer les fichiers et les répertoires dans votre ordinateur. Lisez attentivement ce qui suit ! Cela peut vous sembler compliqué, mais ça sera bientôt très clair !

D'abord, créez un nouveau dossier/répertoire et appelez-le volcano (il est recommandé d'entrer les noms de fichiers en minuscules).
Maintenant, déplacez les deux fichiers HTML, volc.html et msh.html dans ce nouveau dossier/répertoire.
Déplacez le dossier/répertoire pictures (avec le fichier msh.gif à l'intérieur) afin qu'il soit au même niveau que le nouveau dossier/répertoire volcano. Déplacez également le fichier lava.gif que nous avons ajouté dans la leçon 7a dans le dossier des images.
Votre répertoire espacedetravail devrait maintenant contenir deux sous-répertoires -- un contenant vos fichiers HTML (volcano) et un autre contenant les images (pictures) :
Nous avons déplacé plusieurs choses, il va donc nous falloir mettre à jour les ancres dans nos fichiers HTML. D'abord, regardez le premier lien local que nous avons créé dans le fichier volc.html :
```
  <h3>Le Mont St Helens</h3>
  Le 18 Mai 1980, après une longue période de repos, cette
  montagne calme de l'état de Washington nous a fourni des
  <a href="msh.html">observations détaillées</a>
  sur les mécanismes d'éruptions hautement explosives.
```
NOTE : comme le fichier msh.html est dans le même répertoire relatif que volc.html, nous n'avons pas besoin de changer le HTML ! Vous comprenez combien la notion de liens relatifs est une fonction importante du HTML ?
Regardons maintenant le lien vers la photo du Mont St Helens que nous avons créé dans le fichier msh.html :
```
  Les immenses pins de cette montagne jadis tranquille 
  <a href="pictures/msh.gif">ressemblaient à des
  cure-dents</a>.
```
Ouvrez ce fichier dans votre éditeur de texte et modifiez le lien :
```
  Les immenses pins de cette montagne jadis tranquille 
  <a href="../pictures/msh.gif">ressemblaient à des 
  cure-dents</a>.
```
Ce lien relatif indique au navigateur web de remonter d'un niveau depuis le dossier/répertoire actuel (volcano) et de chercher un autre dossier/répertoire appelé pictures qui contient une image GIF appelée msh.gif.
Il faut aussi modifier le tag <img...> qui affiche l'image de titre. Ouvrez le fichier volc.html dans votre éditeur de texte et modifiez la ligne juste au-dessous du tag <body> :
```
  <img alt="Une leçon sur le :" src="../pictures/lava.gif" width=300 height=259>
```
Sauvegardez votre fichier. Ouvrez maintenant le fichier volc.html dans votre navigateur web et testez le lien vers le fichier msh.html et celui vers la photo du Mont St Helens.

Encore un Petit Changement

Ce dernier petit changement n'est peut-être pas évident, mais nous allons l'expliquer rapidement. La dernière chose à faire dans cette leçon est de renommer votre fichier volc.html en index.html. Vous devez le faire depuis votre bureau (sur Macintosh, cliquez sur le nom du fichier ; sous Windows, cliquez avec le bouton droit de la souris sur l'icône et sélectionnez l'option Renommer). Notez également que, pour les utilisateurs de Windows qui utilisent un éditeur de texte spécial pour créer les fichiers HTML, vous ne verrez pas l'extension ".html" du nom de fichier sur le bureau. Dans ce cas, changez le nom de fichier de volc en index car "sous le capot", l'ordinateur sait qu'il y a un ".html" à la fin.

Pourquoi faisons-nous cela ? Supposons que nous avons fini cette leçon et que nous sommes prêts à stocker notre site sur un serveur World Wide Web pour le montrer au monde entier. Et supposons que l'adresse Internet de ce serveur à Big University est :

    http://www.bigu.edu/

et que votre fichier sera enregistré dans une série de répertoires :


--= Niveau supérieur du serveur: www.bigu.edu
   /courses
        /science
            /geology
                /volcano
                    /volc.html

de sorte que l'URL du Web Volcan pourrait être :

    http://www.bigu.edu/courses/science/geology/volcano/volc.html

Très long, hein ? Maintenant, voici l'explication promise -- sur la majorité des serveurs WWW, vous pouvez indiquer un nom standard qui sera la page web "par défaut" pour ce répertoire et sur la plupart des systèmes, ce nom est.... index.html. Ce qui veut dire que l'adresse Internet :

    http://www.bigu.edu/courses/science/geology/volcano/

est équivalente à

    http://www.bigu.edu/courses/science/geology/volcano/index.html

Vous allez penser que c'est beaucoup d'énergie dépensée pour gagner 20 lettres dans un URL ! Mais ça tend à rendre votre URL un peu plus professionnel -- si vous deviez créer la page d'accueil de Longhorn Cheese,

    http://www.cheese.com/longhorn/

paraît moins redondant que

    http://www.cheese.com/longhorn/longhorn.html

Cela devient important quand des internautes lisent votre URL et essaient de s'y connecter en tapant le nom dans leur navigateur.

Notez aussi que ce nom de fichier spécial index.html est utilisé sur la plupart des serveurs web mais certains serveurs utilisent le nom de fichier default.htm -- vérifiez avec les gens qui hébergent votre site.

Vérifiez Votre Travail

Comparez votre page web avec un exemple pour cette section. Vous verrez d'abord votre page Web Volcan. Quand vous cliquez sur le lien hypertexte pour observations détaillées, votre navigateur doit afficher une nouvelle page. Enfin, quand vous cliquez sur ressemblaient à des cure-dents, votre navigateur doit afficher dans une autre fenêtre un fichier stocké dans un sous-dossier/répertoire.

Utilisez deux fois de suite le bouton Précédent de votre navigateur pour revenir à cette page. Si votre page web est différente de l'exemple, vérifiez le texte que vous avez tapé dans l'éditeur de texte.

Révision

Quelles étapes avez-vous réalisées pour créer un lien vers un fichier local dans votre document ?
Quelle est la procédure pour créer un lien affichant une image dans une fenêtre externe ?
Comment avez-vous créé un lien vers un fichier dans un répertoire/dossier inférieur par rapport à votre document ? un répertoire supérieur ?
Quelle est l'utilité d'un fichier appelé index.html sur un serveur WWW ?

Travail Indépendant

Créez un second document HTML utilisant le code HTML que vous venez de voir. Retournez à votre premier document et créez une ancre vers le nouveau document.

A Suivre....

Ouah ! C'était beaucoup de travail ! Dans la prochaine leçon, vous apprendrez comment utiliser le HTML pour créer des liens vers des ressources "là-bas" sur Internet.

ALLER A.... | Index des Leçons | précédent : "Ancres" | suivant : "URLs" |

Ecrire le HTML : Leçon 8a : Liens vers des fichiers Locaux
©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/tut8a.html