01
Un site peut avoir de nombreuses pages.
Une page simple peut fonctionner avec un seul fichier HTML, mais de nombreux projets doivent répartir le contenu.
Par exemple, un site professionnel pourrait avoir :
sobre.html
servicios.html
contacto.html
Chaque fichier représente une page différente au sein du même site.
02
Organisez votre projet.
Votre dossier pourrait se présenter ainsi :
├── index.html
├── sobre.html
├── servicios.html
├── contacto.html
├── styles.css
└── images/
└── proyecto.jpg
Tous les fichiers HTML peuvent utiliser le même styles.css.
03
Créez la page À propos.
Créez un nouveau fichier nommé :
Vous pouvez commencer par une structure comme celle-ci :
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>À propos | Mon projet</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>À propos du projet</h1>
<p>
Vous pouvez présenter votre projet ici.
</p>
</body>
</html>
04
Reliez l’Accueil à la page À propos.
Depuis `index.html`, nous pouvons créer :
En cliquant sur le lien, le navigateur recherchera `sobre.html` dans le même dossier.
Pour revenir à l’Accueil depuis `sobre.html` :
05
Réutilisez le même menu.
Chaque page doit permettre au visiteur de parcourir le site sans rester bloqué.
Nous pouvons réutiliser ce menu :
<a href="index.html">Accueil</a>
<a href="sobre.html">À propos</a>
<a href="servicios.html">Services</a>
<a href="contacto.html">Contact</a>
</nav>
06
Qu’est-ce qu’un chemin relatif ?
Un chemin indique où se trouve un fichier.
Lorsque vous écrivez :
vous utilisez un chemin relatif.
Cela signifie : cherchez `servicios.html` en prenant comme référence l’emplacement du document actuel.
07
Que se passe-t-il avec les sous-dossiers ?
Imaginez cette structure :
├── index.html
├── styles.css
└── paginas/
└── servicios.html
Depuis `index.html`, nous utiliserions ceci pour ouvrir Services :
Mais depuis `servicios.html`, nous devons remonter d’un niveau pour revenir à l’Accueil :
Les deux points :
signifient remonter au dossier précédent.
08
Pourquoi une erreur 404 apparaît-elle ?
Une erreur 404 signifie que le navigateur ou le serveur n’a pas trouvé la ressource demandée.
Cela peut avoir plusieurs causes :
Le fichier n’existe pas.
Le nom est mal écrit.
Le chemin pointe vers le mauvais dossier.
Les majuscules et les minuscules ne correspondent pas.
09
Les noms de fichiers doivent être cohérents.
Il est recommandé d’utiliser des noms simples et descriptifs.
Par exemple :
sobre-nosotros.html
contacto.html
Évitez les espaces :
Une meilleure solution serait :
10
Conservez l’identité visuelle entre les pages.
Même si chaque page a un contenu différent, le site doit constituer une expérience cohérente.
Utilisez la même navigation.
Conservez les mêmes polices.
Reprenez la palette de couleurs.
Gardez des styles de boutons cohérents.
Utilisez des espacements et des largeurs similaires.
En partageant `styles.css`, il est plus facile de conserver cette cohérence.
11
Créez une structure multipage simple.
Pour vous entraîner, créez quatre pages :
sobre.html
servicios.html
contacto.html
Dans chacune, ajoutez :
et le même menu de navigation.
Vous aurez ainsi un véritable petit site web et non une simple page isolée.
12
Vérifiez tous les liens.
Avant de publier, parcourez votre site comme si vous étiez un visiteur.
Accueil → À propos.
À propos → Services.
Services → Contact.
Contact → Accueil.
Vérifiez aussi les boutons, les images et les liens internes.
RÉSUMÉ
Ce que vous avez appris.
- Un site peut être composé de plusieurs fichiers HTML.
- index.html représente généralement la page principale.
- Les liens permettent de relier différentes pages.
- Les chemins relatifs dépendent de l’emplacement du fichier.
- ../ permet de remonter d’un niveau de dossier.
- Un chemin incorrect peut provoquer une erreur 404.
- Les noms de fichiers doivent être clairs et cohérents.
- Plusieurs pages peuvent partager le même styles.css.
- La navigation doit rester cohérente.
- Tous les liens doivent être testés avant publication.
MISE EN PRATIQUE
Transformez votre projet en site multipage.
Utilisez le projet construit durant ce parcours.
- Conservez `index.html` comme page d’Accueil.
- Créez `sobre.html`.
- Créez `servicios.html`.
- Créez `contacto.html`.
- Reliez `styles.css` aux quatre pages.
- Ajoutez le même menu partout.
- Vérifiez tous les chemins.
- Consultez toutes les pages dans le navigateur.