Ta première page web locale

Cette leçon est encore en test : elle s'améliore avec les retours des apprenants. Si quelque chose n'est pas clair, c'est la leçon qu'il faut corriger, pas toi.

À la fin de cette leçon, tu sauras

faire construire une page web en un seul fichier ;
l’ouvrir dans ton navigateur, sans rien installer ni publier ;
demander une modification précise, et la voir après un rechargement ;
te faire expliquer les trois parties d’une page : le contenu, l’apparence, le comportement.

Pourquoi ça t’intéresse

Une page web, c’est d’abord un fichier, comme un document. Il s’ouvre dans ton navigateur, depuis ton ordinateur, sans hébergement ni compte. C’est le terrain d’essai idéal : tu vois tout de suite le résultat, rien ne sort de chez toi, et tu peux tout recommencer. Toutes les leçons suivantes partent de là.

Avant de commencer


Il te faut	Claude Code (appli ou terminal), en mode Manuel, ton dossier de projet (leçon 1), et un navigateur (Chrome, Firefox, Safari ou Edge)
Coût	L’abonnement de l’agent : Claude Pro au minimum, 18 € par mois hors taxes en facturation mensuelle, ou 15 € par mois hors taxes avec l’abonnement annuel de 180 € payé d’avance ; prix affichés sur claude.com/pricing au 24/10/2026
Durée	60 minutes
Rappel	La page reste sur ton ordinateur : rien n’est publié

Comprendre en 3 minutes

Une page web en un seul fichier se termine par .html. Elle contient trois parties, souvent dans le même fichier :

Partie	Ce qu’elle fait	Exemple
Le HTML	Le contenu et sa structure	Le titre, les paragraphes, une liste
Le CSS	L’apparence	Les couleurs, les tailles, la mise en page sur téléphone
Le JavaScript	Le comportement	Ce qui se passe quand on clique

Trois consignes pour une première page :

Un seul fichier, que tu peux copier, envoyer, sauvegarder.
Rien chargé depuis Internet : pas de police, d’image ni de script venus d’ailleurs. La page marche hors connexion, et rien ne part vers un service extérieur à chaque ouverture.
Lisible sur téléphone : la mise en page s’adapte aux petits écrans.

Recharger. Le navigateur affiche la version qu’il a chargée. Après chaque modification du fichier, recharge la page : d’après la documentation de Chrome, Cmd + R sur Mac, Ctrl + R sur Windows.

Faire ensemble

1Étape 1 : Faire construire la page

Dans Claude Code, sur ton dossier de projet, en mode Manuel :

Crée index.html : une page d'accueil simple pour [ton projet], à partir de [ta fiche ou tes notes].
Un seul fichier, sans rien charger depuis Internet (pas de police ni d'image externes), lisible sur téléphone.
N'invente aucune information : ce qui manque s'écrit [à compléter]. Ne crée aucun autre fichier.
Dis-moi ensuite comment l'ouvrir.

Lis la demande d’autorisation avant d’accepter : elle doit concerner index.html, dans ton dossier.

Lors de notre essai du 24/10/2026, pour la page d’accueil du club de lecture, la réponse a précisé que la page « ne charge rien depuis Internet » et a listé les informations restées [à compléter].

2Étape 2 : L’ouvrir

Sur Mac

Dans le Finder, ouvre ton dossier de projet et double-clique sur index.html. Elle s’ouvre dans ton navigateur habituel. Pour choisir un autre navigateur : clic droit, Ouvrir avec.

Sur Windows

Dans l’Explorateur de fichiers, ouvre ton dossier de projet et double-clique sur index.html. Elle s’ouvre dans ton navigateur habituel. Pour choisir un autre navigateur : clic droit, Ouvrir avec.

Regarder sur un petit écran

Rends la fenêtre du navigateur très étroite, comme un téléphone : le texte doit rester lisible, sans défilement de côté.

3Étape 3 : Une modification précise

Demande une seule chose à la fois, et vérifie-la :

Dans index.html, mets le titre en bleu foncé et ajoute sous le titre une phrase d'accueil : « [ta phrase] ». Ne change rien d'autre.

Recharge la page (Cmd + R ou Ctrl + R). Vérifie la modification, et que rien d’autre n’a bougé.

4Étape 4 : Comprendre ce qu’il y a dedans

Explique-moi index.html en 5 lignes, sans jargon : où est le contenu, où est l'apparence, et y a-t-il du JavaScript ? Ne modifie rien.

Faire toi-même

Fais construire la page de ton projet, avec les trois consignes.
Ouvre-la, regarde-la en fenêtre étroite.
Fais trois modifications, une à la fois, en rechargeant après chacune.
Note dans ton journal ce que tu as appris sur le fichier.

Vérifier

C’est réussi si :

index.html s’ouvre par un double-clic, sans connexion ;
la page reste lisible en fenêtre étroite ;
chaque modification a été vérifiée après un rechargement ;
tu sais dire où sont le contenu et l’apparence dans le fichier.

Erreurs fréquentes :

demander cinq modifications d’un coup, et ne plus savoir laquelle a cassé quoi ;
oublier de recharger la page ;
accepter une écriture hors du dossier de projet ;
une page qui charge une police ou une image depuis Internet, sans l’avoir voulu.

Conserver et reprendre

Garde la page dans le dossier du projet, à côté de la spécification.
Après une modification réussie, enregistre une version (leçon 5).

Pour aller plus loin

facultatif

D’après la documentation de Chrome, un clic droit sur un élément de la page, puis Inspecter, montre son code et ses règles d’apparence.

Mots nouveaux

5 mots expliqués

Mot	Ce que ça veut dire
Page web locale	Un fichier .html ouvert depuis ton ordinateur, sans être en ligne
HTML	Le contenu et la structure d’une page
CSS	L’apparence d’une page : couleurs, tailles, mise en page
JavaScript	Le comportement d’une page : ce qui se passe quand on clique
Recharger	Faire relire le fichier par le navigateur, pour voir la dernière version

L’essai de l’étape 1 a été joué réellement avec Claude Code 2.1.310, dans un dossier d’essai isolé (rapport de tests, T53). Les séances d’essai avec Claude Code ont été jouées en mode non interactif (claude -p), une seule fois chacune : ce que tu verras peut différer (demandes d’autorisation, formulation, nombre de questions). À vérifier : l’ouverture par double-clic sur Windows n’a pas été jouée (pas de PC Windows).