Comment fonctionne le web, et ta première page

Découvre ce qui se passe quand tu tapes une adresse dans un navigateur, et construis les fondations de ton site web.

Ce qui se passe quand tu ouvres un site web

Quand tu tapes quelque chose comme www.myschool.com dans un navigateur, voici ce qui se passe :

Le navigateur envoie un message sur internet à un serveur – l’ordinateur où vit le site web : « Hé, envoie-moi la page ! »
Le serveur répond et renvoie des fichiers – texte, images, code.
Le navigateur dessine la page sur ton écran à partir de ces fichiers.

Les fichiers que le serveur envoie sont écrits dans un langage appelé HTML. Et c’est exactement ce que tu vas apprendre. Pour l’instant, ton site web ne sera pas sur un serveur – il vivra sur ton propre ordinateur, et on le mettra en ligne dans la toute dernière leçon.

Choisis ton projet

Avant d’écrire une seule ligne, décide quoi tu construis vraiment. Tu travailleras sur l’un de ces projets pendant tout le niveau :

🏫 Le site web de mon école – emploi du temps, menu de la cantine, événements, professeurs
🙋 Mon site web personnel – à propos de moi, ce que j’aime, mes créations
🌍 Un journal de voyage – voyages, photos, souvenirs
⚽ Le site web d’un club de sport – équipe, matchs, entraînements

Tu as choisi ? Super. Les tâches de chaque leçon couvrent les quatre projets – trouve simplement le tien.

Montre-moi : le squelette avec lequel chaque page sur Terre commence

Chaque page web – de la tienne à celle de YouTube – commence avec exactement le même squelette :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

Traduisons ça en français simple :

Code	Ce qu’il dit au navigateur
`<!doctype html>`	« Attention, une page HTML commence ! »
`<html lang="en">`	« Tout ce qui est à l’intérieur est une page, et c’est en anglais. »
`<head>` … `</head>`	« Voici des informations sur la page. » Les visiteurs ne les voient pas.
`<meta charset="UTF-8">`	« Il peut y avoir des caractères spéciaux ici, sois prêt. »
`<title>` … `</title>`	Le nom de la page – affiché dans l’onglet du navigateur.
`<body>` … `</body>`	« Tout ce que le visiteur voit vraiment commence ici. » Tout ton contenu va ici.

Remarque comment fonctionnent les balises : <h1> ouvre quelque chose et </h1> (avec le slash) le ferme. Ce qui est entre les deux appartient à cette balise. Comme des parenthèses.

À toi 💪

Ouvre ton dossier my-website (du Niveau Préparation) dans VS Code, et ouvre le fichier index.html à l’intérieur. Supprime ce qu’il y a et tape le squelette de page de l’exemple ci-dessus.
Change le <title> et le <h1> pour correspondre à ton projet, et ajoute un paragraphe <p> sous le titre avec une phrase sur ce qu’est ton site web.
Enregistre (Ctrl+S) et ouvre index.html dans ton navigateur (ou actualise la page avec F5).

Tu ne sais pas comment faire ? Voici des solutions pour chaque projet :

🏫 Solution : Le site web de mon école

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 Solution : Mon site web personnel

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 Solution : Journal de voyage

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ Solution : Site web d'un club de sport

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

Vérifie : L’onglet du navigateur affiche le nom de ton site web, et la page montre ton titre et ta phrase. Si c’est le cas – la pierre angulaire est posée !

Ce que tu retiens de cette leçon

Un site web = des fichiers qu’un serveur envoie à un navigateur. Le navigateur dessine une page à partir d’eux.
Chaque page a le même squelette : <head> (informations sur la page) et <body> (contenu visible).
Les balises s’ouvrent comme <this> et se ferment comme </this>.