Dans cette version 01, nous commençons par créer un site web simple avec un seul article. Ce site est organisé de manière claire et structurée pour qu’il soit facile à gérer. Nous allons ensuite le modifier jusqu’à une version 3.
Version 01
Arborescence du projet
Contexte
Imaginons que vous voulez créer une page web bien organisée, qui contient un en-tête, un article, et un pied de page. Mais, au lieu de tout écrire dans un seul fichier, nous avons décidé de découper la page en plusieurs parties. Pourquoi ?
- Facilité d’organisation : Chaque partie est écrite dans un fichier séparé. Par exemple, l’en-tête est dans
_header.html, l’article est dansarticle01.html, et le pied de page est dans_footer.html. - Gain de temps pour les modifications : Si vous voulez changer quelque chose dans l’en-tête ou le pied de page (comme ajouter un lien ou changer un texte), vous n’avez à le faire qu’une seule fois. La modification sera automatiquement prise en compte dans toutes les pages qui incluent ces fichiers.
- Préparation pour le futur : Plus tard, nous pourrons facilement ajouter d’autres articles dans la page ou même créer de nouvelles pages tout en réutilisant les parties communes (l’en-tête et le pied de page).
Comment fonctionne l’inclusion avec include ?
Dans cette version 01, nous avons un fichier principal appelé index.php. Ce fichier agit comme un chef d’orchestre : il va chercher les différentes parties de la page et les assemble pour les afficher ensemble.
Les bénéfices de cette approche
Grâce à cette méthode, si un jour vous voulez :
- Modifier le style de l’en-tête : vous n’aurez qu’à changer
_header.html, et toutes les pages du site seront mises à jour. - Ajouter un autre article : il suffira d’ajouter son fichier (par exemple,
article02.html) et de l’inclure dansindex.php.
Cette méthode est plus propre et plus rapide que de tout écrire dans un seul fichier. Elle vous fait gagner du temps, surtout pour les sites avec plusieurs pages ou articles.
Explications simples pour chaque partie
_head.html
Ce fichier contient tout ce qu’il faut pour que la page fonctionne correctement, comme :
- Le charset (pour afficher les caractères spéciaux).
- La connexion au fichier CSS pour styliser la page.
_header.html
Ce fichier contient :
- Le titre de la page : « Mon Site Web ».
- Un menu simple avec un lien vers l’accueil.
article01.html
Ce fichier contient le contenu principal :
- Un titre : « Article 01 ».
- Une image.
- Un texte descriptif.
_footer.html
Ce fichier contient le pied de page avec un message de copyright.
Pourquoi commencer par cette version simple ?
Pour les débutants, cette version est idéale car elle montre :
- Comment inclure des parties dans une page.
- Les avantages d’une structure modulaire : chaque partie est séparée et facile à gérer.
Et surtout, elle prépare le terrain pour les prochaines étapes, où nous ajouterons plusieurs articles et plus de dynamisme.