Préparer le contenu et les fichiers du projet

Une page de présentation peut contenir des informations utiles, mais rester difficile à modifier si le contenu et les fichiers sont mal organisés. Vous allez préparer une structure simple pour l’atelier de jardinage : les visiteurs y trouveront une introduction, les horaires, des conseils pratiques et un moyen de contact.

Vous avez déjà appris à reconnaître les éléments d’un document HTML et à cibler ses éléments avec des sélecteurs CSS. Ici, vous allez vous concentrer sur l’organisation du projet et sur le rôle des grandes zones de la page, sans encore définir leur apparence finale.

Créer les fichiers du projet

Créez un dossier nommé atelier-jardinage. Placez à sa racine un fichier index.html pour le contenu et un fichier style.css pour les règles de présentation. Garder ces deux fichiers au même niveau permet d’utiliser un chemin court et évite d’avoir à gérer des dossiers supplémentaires à ce stade.

atelier-jardinage/
    index.html
    style.css

Le nom du fichier HTML n’est pas une obligation technique dans tous les contextes, mais index.html est couramment utilisé comme page d’entrée d’un site. Respectez exactement le nom style.css dans le dossier et dans le lien HTML : une différence de nom ou de chemin empêchera le navigateur de trouver la feuille de style.

Organiser le contenu avec des zones sémantiques

Les éléments sémantiques indiquent la fonction d’une partie de la page, au-delà de son apparence. <header> accueille l’en-tête, généralement le nom du site et son introduction ; <main> contient le contenu principal. Dans ce contenu, <section> regroupe un sujet cohérent, tandis que <footer> sert de pied de page, par exemple pour les coordonnées.

Pour ce projet, vous séparerez les informations en quatre parties : la présentation de l’atelier, les horaires, des conseils pratiques et le contact. Chaque section reçoit un titre descriptif. Cette organisation permet aux lecteurs de repérer les sujets et vous aidera à retrouver facilement chaque bloc lorsque vous ajouterez des styles.

Écrire la page HTML

Ouvrez index.html dans votre éditeur et copiez le document ci-dessous. L’élément <link>, placé dans <head>, associe la page à la feuille externe grâce à l’attribut href et au chemin style.css. Les descriptions et coordonnées sont fictives : remplacez-les par les informations de votre atelier si nécessaire.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atelier de jardinage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Les mains dans la terre</h1>
        <p>Un atelier de jardinage pour apprendre et cultiver ensemble.</p>
    </header>

    <main>
        <section>
            <h2>Horaires</h2>
            <p>Retrouvez-nous le samedi, de 9 h à 12 h, au jardin partagé.</p>
        </section>

        <section>
            <h2>Conseils pratiques</h2>
            <p>Prévoyez des gants et des chaussures adaptées. Les outils sont fournis sur place.</p>
        </section>

        <section>
            <h2>Contact</h2>
            <p>Écrivez-nous à <a href="mailto:[email protected]">[email protected]</a>.</p>
        </section>
    </main>

    <footer>
        <p>Atelier de jardinage — rendez-vous au jardin partagé.</p>
    </footer>
</body>
</html>

L’attribut lang="fr" indique la langue du document. La balise meta avec l’encodage utf-8 permet d’afficher correctement les caractères français, et celle qui définit la largeur d’affichage aide le navigateur mobile à adapter la page à l’écran. Le titre dans <head> apparaît notamment dans l’onglet du navigateur ; le titre <h1> présente, lui, le contenu visible.

Préparer la feuille de style et vérifier la page

Dans style.css, commencez par un commentaire qui identifie le fichier. Cette feuille est volontairement dépourvue de règles de présentation : elle sert à vérifier que le lien fonctionne et sera complétée dans la prochaine leçon. Les commentaires CSS entre /* et */ ne sont pas affichés sur la page.

/* Feuille de style de l’atelier de jardinage */

Enregistrez les deux fichiers, puis ouvrez index.html dans un navigateur. Vous devez voir le nom de l’atelier, les horaires, les conseils et l’adresse électronique sous forme de lien ; le navigateur applique encore sa présentation par défaut. Cliquez sur l’adresse pour vérifier que le lien de contact ouvre une nouvelle rédaction de courriel. Si une section manque, corrigez d’abord le HTML ; si le document s’affiche mais que la feuille ne se charge pas plus tard, vérifiez le nom du fichier et son emplacement.

À retenir

• Placez index.html et style.css dans le même dossier pour conserver un chemin simple.
• Reliez la feuille externe avec <link rel="stylesheet" href="style.css"> dans <head>.
• Utilisez <header>, <main>, <section> et <footer> selon la fonction de chaque zone.
• Vérifiez le contenu dans un navigateur et corrigez les noms ou chemins de fichiers en cas de problème.

Dans la prochaine leçon, vous appliquerez une apparence générale à cette page en définissant ses couleurs, ses titres et ses espacements.