Your first web page · Votre première page web
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
English
Welcome to the web
- A web page is made with HTML.
- HTML is just text with tags around it.
- You write HTML here and watch it appear — nothing to install.
Français
Bienvenue sur le web
- Une page web est créée avec HTML.
- HTML n'est que du texte entouré de balises.
- Vous écrivez de l'HTML ici et le voyez apparaître — rien à installer.
English
How this page works
- Type in the box, then press ▶ to see your page.
- Press ✓ Check to see if your task is correct.
- Stuck? Press 💡 for a hint. Press ↻ to start over.
- Read each step, then press Continue.
Français
Comment fonctionne cette page
- Tapez dans la zone, puis appuyez sur ▶ pour voir votre page.
- Appuyez sur ✓ Vérifier pour voir si votre tâche est correcte.
- Bloqué ? Appuyez sur 💡 pour un indice. Appuyez sur ↻ pour recommencer.
- Lisez chaque étape, puis appuyez sur Continuer.
English
Tags wrap your words
- A tag is a word inside angle brackets, like
<p>. - Most tags come as a pair: an opening
<p>and a closing</p>. - A
<p>makes a paragraph — a block of text.
Français
Les balises entourent vos mots
- Une balise est un mot entre crochets angulaires, comme
<p>. - La plupart des balises viennent par paire : une ouverture
<p>et une fermeture</p>. - Une balise
<p>crée un paragraphe — un bloc de texte.
<p>Hello! This is my first web page.</p>
English
More than one paragraph
- Put each paragraph in its own pair of
<p>tags. - The browser shows them one after another, top to bottom.
Français
Plus d'un paragraphe
- Placez chaque paragraphe dans sa propre paire de balises
<p>. - Le navigateur les affiche les uns après les autres, de haut en bas.
<p>I am learning HTML.</p>
<p>This is fun.</p>
English
Common mistakes
- Tags go in angle brackets; the text you see goes between them.
- Most tags come in pairs, like
<p>...</p>.
Français
Erreurs courantes
- Les balises vont entre des crochets angulaires ; le texte que vous voyez va entre elles.
- La plupart des balises viennent par paires, comme
<p>...</p>.
English
Now you try
- Below are two small tasks. Type your HTML and press ▶ to see it.
- Press ✓ Check when you think it is right. You can try as many times as you like.
Français
À vous maintenant
- Voici deux petites tâches ci-dessous. Tapez votre HTML et appuyez sur ▶ pour le voir.
- Appuyez sur ✓ Vérifier quand vous pensez que c'est bon. Vous pouvez essayer autant de fois que vous voulez.
Explore · Explorer
HTML is a tree of nodes · HTML est un arbre de nœuds
Tags nest inside tags — the browser builds a tree (the DOM). · Les balises s'enchaînent dans des balises — le navigateur construit un arbre (le DOM).
Write a paragraph that says Hello, world! — type your text between the <p> and · et </p> tags. · Écrivez un paragraphe disant Hello, world! — tapez votre texte entre les balises <p> et </p>.
Add a second paragraph below the first one. Make it say I made this. (Use a new pair of <p> … </p> tags.) · Ajoutez un deuxième paragraphe sous le premier. Faites-le dire I made this. (Utilisez une nouvelle paire de balises <p> … </p>.)