Ton premier fichier et dossier pour le web

On va créer le dossier où vivra ton site web, et vérifier que tout fonctionne.

Un site web vit dans un dossier

Chaque site web au monde n’est en réalité qu’un tas de fichiers dans un dossier. Créons le tien.

Crée un dossier appelé my-website. Sur ton bureau, clic droit → Nouveau dossier (sur Mac c’est aussi Nouveau dossier, sur Windows c’est Nouveau → Dossier) et nomme-le my-website.
Ouvre le dossier dans VS Code. Lance VS Code et dans le menu choisis File → Open Folder… et trouve ton dossier my-website. Si VS Code te demande si tu fais confiance aux auteurs de ce dossier, clique sur Yes, I trust the authors – tu es l’auteur, après tout !
Crée un fichier appelé index.html. Dans le panneau de gauche, passe la souris sur le nom du dossier et clique sur l’icône New File (une page avec un signe plus). Tape exactement : index.html et appuie sur Entrée.

💡

Pourquoi index.html précisément ? C’est le nom convenu pour la page principale d’un site web. Quand un navigateur arrive dans un dossier, il cherche d’abord un fichier appelé index.html – comme entrer à l’école et aller directement dans ta propre classe.

Écris ton premier code

Dans le fichier index.html, tape ceci (ou copie-le avec le bouton en haut à droite) :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My website</title>
  </head>
  <body>
    <h1>It works!</h1>
    <p>This is my very first file. From here I'll build a whole website.</p>
  </body>
</html>

Enregistre le fichier : Ctrl+S (sur Mac, Cmd+S). Enregistre souvent – un fichier non enregistré a un petit point à côté de son nom dans VS Code.

Ouvre ta page dans le navigateur

Trouve le fichier index.html dans ton dossier (sur le bureau → my-website) et double-clique pour l’ouvrir. Un navigateur s’ouvrira et affichera ta page avec les mots « It works! ».

✅

Vérifie : Tu vois un grand titre qui dit « It works! » dans le navigateur. Si c’est le cas – tu as maintenant un atelier web qui fonctionne, et tu peux foncer vers le Niveau 1 !

💡

Un truc pratique : garde VS Code et ton navigateur ouverts côte à côte. Chaque fois que tu changes quelque chose dans le code, enregistre (Ctrl+S) et appuie sur F5 dans le navigateur pour actualiser. Ton changement apparaît tout de suite.

Ce que tu retiens de ce chapitre

Un site web est un dossier plein de fichiers. Le tien s’appelle my-website.
La page principale d’un site web s’appelle toujours index.html.
La boucle de travail : écrire du code → enregistrer (Ctrl+S) → actualiser le navigateur (F5). Tu vas faire ça encore et encore.