PhpBB Lab Académie

Créer plusieurs fichiers HTML dans un même dossier, comprendre la différence entre une adresse absolue et un chemin relatif, puis utiliser des liens relatifs pour naviguer correctement entre la page d’accueil, une page À propos et une page Contact.

Nous allons passer d’une page isolée à un véritable petit site

Jusqu’à présent, vous avez surtout travaillé dans un seul fichier :

index.html

Vous savez maintenant y ajouter :

- des titres ;
- des paragraphes ;
- des listes ;
- des liens ;
- des images.

Mais un site web ne se limite généralement pas à une seule page.

Il peut contenir par exemple :

une page d’accueil
une page À propos
une page Contact

Dans cette leçon, nous allons créer ces trois pages et les relier entre elles.

Nous allons réutiliser l’élément

a

et l’attribut

href

que vous connaissez déjà.

La nouvelle notion sera le chemin relatif.

1. Repartir de notre dossier mon-premier-site

Votre dossier principal est toujours :

mon-premier-site

Il contient déjà :

index.html

et éventuellement l’image utilisée dans la leçon précédente.

Nous allons y ajouter deux nouveaux fichiers :

apropos.html
contact.html

À la fin, votre dossier pourra contenir :

mon-premier-site

index.html
apropos.html
contact.html
ordinateur.jpg

Les trois fichiers HTML seront placés dans le même dossier.

C’est volontaire : nous allons d’abord apprendre les liens relatifs les plus simples avant de travailler un jour avec des sous-dossiers.

2. Pourquoi créer plusieurs pages ?

Chaque page peut avoir un rôle précis.

Par exemple :

index.html = page d’accueil
apropos.html = présentation du site
contact.html = informations de contact

Séparer le contenu en plusieurs pages permet d’éviter de tout entasser dans un seul document.

Cela permet aussi à l’utilisateur de naviguer vers l’information qui l’intéresse.

3. Créer apropos.html

Dans le même dossier que

index.html

, créez un nouveau fichier :

apropos.html

Nous allons utiliser la structure HTML complète que vous connaissez déjà :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>À propos - Mon premier site HTML</title>
</head>
<body>
    <h1>À propos</h1>
    <p>Ce site me permet de pratiquer progressivement les bases de HTML.</p>
</body>
</html>

Enregistrez ce fichier.

Vous venez de créer une deuxième page HTML complète.

4. Créer contact.html

Créez maintenant, toujours dans le même dossier :

contact.html

Écrivez :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Contact - Mon premier site HTML</title>
</head>
<body>
    <h1>Contact</h1>
    <p>Cette page servira plus tard à présenter différentes façons de me contacter.</p>
</body>
</html>

Enregistrez.

Votre site possède maintenant trois documents HTML distincts.

5. Revenir au lien que nous connaissons

Dans une leçon précédente, vous avez créé un lien comme :

<a href="https://example.com">Découvrir le site Example</a>

La valeur de

href

était une adresse complète :

https://example.com

Nous avons appelé cela une adresse absolue.

Elle indique une destination complète sur le Web.

Pour relier deux fichiers situés dans notre propre dossier, nous n’avons pas besoin d’écrire une adresse web complète.

Nous pouvons simplement indiquer le nom du fichier cible.

6. Le chemin relatif

Depuis

index.html

, notre fichier :

apropos.html

se trouve dans le même dossier.

Nous pouvons donc écrire :

<a href="apropos.html">À propos</a>

La valeur :

apropos.html

est ici un chemin relatif.

Elle signifie, en pratique :

cherche le fichier apropos.html à partir de l’emplacement de la page actuelle

Comme les deux fichiers sont côte à côte dans le même dossier, le simple nom du fichier suffit.

7. Comparer adresse absolue et chemin relatif

Lien externe :

<a href="https://example.com">Découvrir le site Example</a>

Lien vers une page de notre dossier :

<a href="apropos.html">À propos</a>

Dans le premier cas,

href

contient une adresse complète.

Dans le deuxième,

href

contient un chemin relatif vers un fichier local à notre site.

Retenez :

https://example.com = adresse absolue
apropos.html = chemin relatif

8. Ajouter un lien vers À propos dans index.html

Ouvrez :

index.html

Ajoutez par exemple :

<p><a href="apropos.html">À propos de ce site</a></p>

Enregistrez puis actualisez

index.html

dans le navigateur.

Activez le lien.

Le navigateur doit maintenant ouvrir :

apropos.html

Vous venez de naviguer entre deux fichiers de votre propre site.

9. Ajouter un lien vers Contact

Toujours dans

index.html

, ajoutez :

<p><a href="contact.html">Me contacter</a></p>

Vous avez maintenant deux liens internes :

<p><a href="apropos.html">À propos de ce site</a></p>
<p><a href="contact.html">Me contacter</a></p>

Enregistrez puis testez les deux.

10. Le texte du lien reste important

Les règles apprises dans la leçon sur les liens s’appliquent toujours.

Comparez :

<a href="contact.html">Cliquez ici</a>

et :

<a href="contact.html">Me contacter</a>

Le deuxième texte indique clairement la destination.

Un utilisateur qui parcourt uniquement les liens peut comprendre :

Me contacter

sans avoir besoin d’entendre toute la phrase autour.

11. Ajouter un lien de retour vers l’accueil

Lorsque vous arrivez sur

apropos.html

, vous devez pouvoir revenir à la page d’accueil.

La page d’accueil est :

index.html

Comme

apropos.html

et

index.html

se trouvent dans le même dossier, ajoutez dans

apropos.html

:

<p><a href="index.html">Retour à l’accueil</a></p>

Faites la même chose dans

contact.html

:

<p><a href="index.html">Retour à l’accueil</a></p>

Enregistrez les deux fichiers.

Vous pouvez maintenant aller de l’accueil vers une autre page puis revenir.

12. Relier aussi À propos et Contact

Nous pouvons aller plus loin et permettre la navigation entre les trois pages.

Dans

apropos.html

, vous pouvez ajouter :

<p><a href="contact.html">Me contacter</a></p>

Dans

contact.html

, vous pouvez ajouter :

<p><a href="apropos.html">À propos de ce site</a></p>

Chaque page peut ainsi proposer des liens vers les autres pages utiles.

Nous n’utilisons pas encore l’élément sémantique

nav

.

Nous l’étudierons plus tard, lorsque nous aborderons la structure sémantique d’une page.

13. Comprendre depuis quelle page le chemin est interprété

Un chemin relatif est interprété à partir du fichier dans lequel le lien est écrit.

Dans notre situation, c’est simple parce que :

index.html
apropos.html
contact.html

sont tous dans le même dossier.

Ainsi, depuis n’importe lequel de ces fichiers :

href="contact.html"

permet d’atteindre

contact.html

.

Plus tard, si nous plaçons des fichiers dans des sous-dossiers, les chemins demanderont davantage d’attention.

Nous ne compliquons pas encore la structure.

14. Attention au nom exact du fichier

Si le fichier s’appelle :

apropos.html

et que vous écrivez :

<a href="a-propos.html">À propos</a>

le navigateur cherchera un fichier nommé :

a-propos.html

Il ne trouvera pas automatiquement

apropos.html

.

Même problème avec :

contact.htm

au lieu de :

contact.html

Le chemin doit correspondre au nom réel du fichier.

15. Les majuscules peuvent poser problème

Sur certains systèmes, ces deux noms peuvent être considérés comme différents :

Contact.html
contact.html

Pour éviter des erreurs lorsque le site sera un jour placé sur un serveur, nous prendrons une habitude simple :

noms de fichiers en minuscules

Par exemple :

index.html
apropos.html
contact.html

C’est cohérent avec les bonnes pratiques de nommage déjà utilisées dans ce cours.

16. Tester chaque sens de navigation

Ne testez pas uniquement :

Accueil -> À propos

Testez également :

À propos -> Accueil
Accueil -> Contact
Contact -> Accueil
À propos -> Contact
Contact -> À propos

Pourquoi ?

Parce qu’un lien peut être correct dans un fichier et incorrect dans un autre.

Un petit site devient rapidement plus facile à vérifier lorsqu’on prend l’habitude de tester chaque parcours.

17. Une petite navigation cohérente sur les trois pages

Pour notre exercice, nous pouvons utiliser le même groupe de liens dans chaque page :

<p>
    <a href="index.html">Accueil</a>
    <a href="apropos.html">À propos</a>
    <a href="contact.html">Contact</a>
</p>

Techniquement, ces trois liens permettent de naviguer partout.

Mais remarquez un détail :

sur

index.html

, le lien

Accueil

pointe vers la page déjà ouverte.

Ce n’est pas une erreur grave, mais plus tard nous apprendrons à construire une navigation plus structurée et plus riche sémantiquement.

Pour l’instant, notre objectif est uniquement de maîtriser les chemins relatifs.

18. Ce qu’un chemin relatif ne contient pas forcément

Un chemin relatif vers un fichier du même dossier n’a pas besoin de commencer par :

https://

Nous écrivons simplement :

href="contact.html"

et non :

href="https://contact.html"

Le navigateur comprend que

contact.html

est une ressource à chercher relativement à la page actuelle.

19. Construire la version finale des trois pages

Votre

index.html

peut contenir, entre autres :

<h1>Mon premier site HTML</h1>
<p>J’apprends à créer et structurer des pages web avec HTML.</p>

<h2>Découvrir le site</h2>
<p><a href="apropos.html">À propos de ce site</a></p>
<p><a href="contact.html">Me contacter</a></p>

Votre

apropos.html

:

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>À propos - Mon premier site HTML</title>
</head>
<body>
    <h1>À propos</h1>
    <p>Ce site me permet de pratiquer progressivement les bases de HTML.</p>
    <p><a href="index.html">Retour à l’accueil</a></p>
    <p><a href="contact.html">Me contacter</a></p>
</body>
</html>

Et votre

contact.html

:

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Contact - Mon premier site HTML</title>
</head>
<body>
    <h1>Contact</h1>
    <p>Cette page servira plus tard à présenter différentes façons de me contacter.</p>
    <p><a href="index.html">Retour à l’accueil</a></p>
    <p><a href="apropos.html">À propos de ce site</a></p>
</body>
</html>

20. Ce que vous venez réellement de construire

Vous n’avez plus une page HTML isolée.

Vous avez maintenant un petit site composé de :

3 documents HTML
+
des liens entre ces documents

La relation entre les fichiers est créée grâce à :

href="nom-du-fichier.html"

lorsque les fichiers sont placés dans le même dossier.

Avant de passer à la suite

Vous devez maintenant savoir expliquer :

- pourquoi un site peut être composé de plusieurs fichiers HTML ;
- ce qu’est un chemin relatif ;
- pourquoi

href="apropos.html"

fonctionne lorsque le fichier se trouve dans le même dossier ;
- la différence entre une adresse absolue et un chemin relatif ;
- pourquoi le nom du fichier doit correspondre exactement à la valeur de

href

;
- pourquoi il faut tester la navigation dans plusieurs directions.

Dans la prochaine leçon, nous commencerons à structurer une vraie page avec des éléments sémantiques comme

header

,

main

et

footer

.

Imaginons ce dossier :

mon-premier-site

index.html
services.html
contact.html

Depuis

index.html

, un lien vers la page des services peut être :

<a href="services.html">Découvrir nos services</a>

Et dans

services.html

, un lien de retour peut être :

<a href="index.html">Retour à l’accueil</a>

Les deux fichiers sont dans le même dossier.

Le navigateur peut donc utiliser directement leur nom comme chemin relatif.

En revanche, pour aller vers un site extérieur, nous utiliserions une adresse complète, par exemple :

<a href="https://example.com">Visiter le site Example</a>

Nous avons donc :

services.html = chemin relatif
https://example.com = adresse absolue

Reprenez votre dossier :

mon-premier-site

Vous devez y avoir au minimum :

index.html

1. Créez deux nouveaux fichiers dans le même dossier :

apropos.html
contact.html

2. Dans

apropos.html

, créez un document HTML complet avec :

- un

title

adapté ;
- un

h1

intitulé

À propos

;
- un paragraphe de présentation.

3. Dans

contact.html

, créez un document HTML complet avec :

- un

title

adapté ;
- un

h1

intitulé

Contact

;
- un paragraphe.

4. Dans

index.html

, ajoutez un lien vers :

apropos.html

avec le texte :

À propos de ce site

5. Ajoutez également un lien vers :

contact.html

avec le texte :

Me contacter

6. Dans

apropos.html

, ajoutez un lien vers

index.html

.

7. Dans

contact.html

, ajoutez un lien vers

index.html

.

8. Ajoutez ensuite un lien direct entre

apropos.html

et

contact.html

dans les deux sens.

9. Enregistrez tous les fichiers.

10. Ouvrez

index.html

et testez chaque trajet :

Accueil -> À propos
À propos -> Accueil
Accueil -> Contact
Contact -> Accueil
À propos -> Contact
Contact -> À propos

Pour terminer, expliquez avec vos propres mots pourquoi :

href="contact.html"

peut fonctionner sans écrire une adresse complète commençant par

https://

.

Un site web peut être composé de plusieurs fichiers HTML reliés entre eux.

Dans cette leçon, nous avons utilisé :

index.html
apropos.html
contact.html

Les trois fichiers sont placés dans le même dossier.

Pour créer un lien vers un fichier voisin, nous pouvons utiliser un chemin relatif :

<a href="apropos.html">À propos de ce site</a>

Le navigateur cherche alors

apropos.html

relativement à la page actuelle.

Une adresse comme :

https://example.com

est une adresse absolue.

Une valeur comme :

contact.html

est ici un chemin relatif.

Le nom du fichier doit correspondre exactement à ce qui est écrit dans

href

.

Il est également important de tester les liens dans plusieurs directions afin de vérifier toute la navigation.

Vous avez maintenant construit un véritable petit site de plusieurs pages HTML.

Dans la prochaine leçon, nous commencerons à structurer une page avec des éléments sémantiques comme

header

,

main

et

footer

.