Ouvrir la page dans un navigateur

Un document correctement préparé ne vous est utile que si vous pouvez le retrouver et l’ouvrir dans un navigateur. Dans cette étape, vous allez enregistrer le fichier de départ du programme du Festival des Rives, puis contrôler que le navigateur interprète bien son contenu.

Enregistrer le fichier du projet

Dans votre éditeur de texte, créez ou ouvrez le fichier index.html à l’emplacement principal du projet. L’extension doit être .html : elle permet au système et aux applications de reconnaître un document HTML. Vérifiez que votre éditeur n’a pas ajouté une seconde extension, comme .txt, au nom du fichier.

Enregistrez le document dans le dossier du projet, au même niveau que style.css. Le dossier assets et le fichier image prévu par le projet pourront également s’y trouver. Gardez exactement le nom index.html : vous saurez ainsi quel fichier ouvrir pour afficher la page principale du festival.

Ouvrir la page dans le navigateur

Après l’enregistrement, ouvrez le dossier du projet dans le gestionnaire de fichiers, puis ouvrez index.html avec un navigateur récent. Vous pouvez généralement double-cliquer sur le fichier ou le faire glisser dans une fenêtre du navigateur. Le navigateur lit alors le document directement depuis votre ordinateur : cette consultation locale ne publie pas le site sur Internet.

À ce stade du parcours, le corps de la page est volontairement vide. Il est donc normal que la zone principale du navigateur paraisse blanche : cela ne signifie pas que le fichier est illisible. Regardez l’onglet du navigateur, qui doit afficher le titre défini pour le projet, Festival des Rives — Programme.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Festival des Rives — Programme</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="festival-page">
</body>
</html>

Le lien vers style.css figure déjà dans le document, conformément au projet. Pour cette vérification, le point essentiel est que la page s’ouvre sans erreur et que son titre apparaît dans l’onglet ; vous n’avez pas besoin de modifier la feuille de style pour voir ce résultat.

Vérifier et corriger l’affichage

Si le navigateur affiche le code comme du texte ou propose de télécharger le fichier, vérifiez d’abord son extension et son emplacement. Confirmez qu’il s’agit bien de index.html, puis rouvrez-le dans le navigateur. Si l’onglet conserve un ancien titre après une modification, enregistrez le fichier dans l’éditeur et actualisez la page.

L’adresse affichée par le navigateur peut commencer par file:// ou montrer un chemin vers votre dossier : c’est attendu pour une ouverture locale. Ce repère vous aide à ne pas confondre votre copie de travail avec une page accessible au public. Vous pourrez continuer à modifier le même fichier et à vérifier chaque résultat de cette façon.

À retenir

• Enregistrez le fichier principal sous le nom exact index.html, dans le dossier du projet.
• Ouvrez ce fichier dans un navigateur récent pour contrôler le document localement.
• À cette étape, une zone de page vide est normale ; vérifiez notamment le titre de l’onglet.
• Après chaque modification, enregistrez le fichier puis actualisez la page si le résultat ne se met pas à jour.

Dans la prochaine leçon, vous commencerez à remplir la page en organisant le programme avec des titres de différents niveaux.