Développement web module 1 : comment marche le web, et le HTML

Jour 1 — Comment le web fonctionne

Objectif : expliquer avec vos mots ce qui se passe entre le moment où vous tapez une adresse et celui où la page s'affiche.

Théorie (20 min)

Le web repose sur un dialogue entre deux programmes. Le navigateur (browser en anglais : Firefox, Chrome, Safari…) est le programme qui tourne sur votre machine et affiche les pages. Le serveur est un ordinateur allumé en permanence, quelque part sur Internet, dont le travail est de répondre aux demandes de pages. Quand vous tapez une adresse, le navigateur envoie une requête (une demande) au serveur, et le serveur renvoie une réponse : le contenu de la page. Ce couple requête/réponse est le cœur du web — vous le retrouverez jusqu'au dernier jour du parcours.

Une adresse web, qu'on appelle une URL (Uniform Resource Locator), se découpe en morceaux. Prenons https://developer.mozilla.org/fr/docs/Learn :

• https est le protocole : la langue convenue du dialogue. HTTP veut dire HyperText Transfer Protocol ; le S ajoute le chiffrement — personne ne peut lire la conversation sur le chemin.
• developer.mozilla.org est le nom de domaine : il désigne le serveur. Un service mondial appelé DNS (Domain Name System) le traduit en adresse IP, le vrai numéro de la machine sur le réseau.
• /fr/docs/Learn est le chemin : quelle page, sur ce serveur.

La réponse du serveur contient le plus souvent trois sortes de fichiers, les trois langages de ce parcours : HTML décrit le contenu et sa structure (les titres, les paragraphes, les images) ; CSS décrit l'apparence (les couleurs, les polices, la mise en page) ; JavaScript décrit le comportement (ce qui se passe quand on clique). L'analogie classique : HTML est le corps, CSS les vêtements, JavaScript les gestes.

Dernier point : ouvrir un fichier HTML enregistré sur votre disque (double-clic) fonctionne aussi, sans serveur ni Internet — le navigateur lit le fichier local. C'est comme ça que vous travaillerez pendant trois modules. Le serveur ne deviendra nécessaire qu'au moment de publier, au module 4.

Pratique (30 min)

1. Ouvrez votre navigateur et allez sur https://developer.mozilla.org/fr/docs/Learn. Repérez dans la barre d'adresse le protocole, le domaine et le chemin.
2. Ouvrez les outils de développement avec la touche F12 (ou clic droit sur la page → « Inspecter »). Un panneau s'ouvre : c'est le laboratoire intégré au navigateur, vous y reviendrez chaque jour.
3. Cliquez sur l'onglet Réseau (Network) de ces outils, puis rechargez la page (F5). Vous voyez défiler toutes les requêtes : le HTML, les CSS, les images. Cliquez sur la première ligne, regardez l'onglet « En-têtes » : l'URL demandée, la méthode GET, le code de statut 200 (qui veut dire « OK »).
4. Critère de réussite : vous savez montrer dans l'onglet Réseau la requête principale de la page et lire son code de statut.
5. Essayez une adresse qui n'existe pas (ajoutez des lettres au hasard au chemin) et rechargez : le statut devient 404, « non trouvé ». Vous venez de voir les deux réponses les plus célèbres du web.

Tips agent : demandez à un agent « explique-moi ce que contient l'onglet Réseau quand je charge cette page » en lui collant la liste des requêtes. Piège : il ne voit pas votre écran — collez les vraies lignes, pas un résumé. Preuve à demander : qu'il nomme le code de statut exact que VOUS lisez dans l'onglet.

Synthèse (10 min)

Trois lignes : ce que sont le navigateur et le serveur, les trois morceaux d'une URL, le rôle de HTML, CSS et JavaScript. Puis, sans notes : racontez à voix haute le voyage d'une requête, comme à un ami.

Jour 2 — Installer VSCodium et créer sa première page

Objectif : installer l'éditeur, créer un dossier de travail, y écrire un premier fichier HTML et l'ouvrir dans le navigateur.

Théorie (20 min)

Un éditeur de code est un programme pour écrire du texte brut : pas de gras, pas de couleurs enregistrées dans le fichier, juste des caractères. C'est l'inverse d'un traitement de texte comme Word, qui mélange le texte et sa mise en forme. Le HTML, le CSS et le JavaScript sont du texte brut : le navigateur les lit tels quels. Nous utilisons VSCodium, la version entièrement libre de Visual Studio Code, gratuite pour Windows, macOS et Linux.

Un fichier HTML est un fichier texte dont le nom finit par .html. L'extension est une convention que les systèmes utilisent pour choisir le programme d'ouverture : double-cliquer sur un .html ouvre le navigateur.

Le HTML marque le contenu avec des balises (tags) : des mots entre chevrons qui vont par paires, une ouvrante et une fermante (la même avec une barre oblique). Entre les deux, le contenu :

<h1>Bonjour le monde</h1>

<h1> dit « ici commence le titre principal », </h1> dit « ici il finit ». L'ensemble balise ouvrante + contenu + balise fermante s'appelle un élément.

Pratique (30 min)

1. Téléchargez VSCodium depuis vscodium.com et installez-le.
2. Créez un dossier devweb dans vos Documents : tout le parcours vivra dedans.
3. Ouvrez VSCodium, puis Fichier → Ouvrir le dossier → choisissez devweb. Créez un nouveau fichier et enregistrez-le sous le nom index.html. Le nom index.html est une convention : c'est le fichier qu'un serveur sert par défaut pour un dossier.
4. Tapez exactement (à la main, sans copier-coller) :

<h1>Bonjour le monde</h1>
<p>Ceci est ma première page web.</p>

5. Enregistrez (Ctrl+S ou Cmd+S), puis double-cliquez sur index.html dans l'explorateur de fichiers : le navigateur s'ouvre et affiche votre titre et votre paragraphe.
6. Critère de réussite : le navigateur affiche « Bonjour le monde » en gros et votre phrase en dessous, et la barre d'adresse commence par file:// — la preuve que la page vient de votre disque, pas d'un serveur.
7. Modifiez le texte dans VSCodium, enregistrez, rechargez le navigateur (F5) : le changement apparaît. Ce cycle écrire → enregistrer → recharger, vous le ferez des centaines de fois.

Tips agent : « crée un fichier index.html qui affiche un titre et un paragraphe » est un ordre qu'un agent exécute en une seconde. Piège : il peut l'écrire dans un autre dossier que le vôtre. Preuve à demander : le chemin complet du fichier créé, puis ouvrez-le vous-même dans le navigateur.

Synthèse (10 min)

Trois lignes : ce qu'est un éditeur de code, ce qu'est une balise, pourquoi index.html a un nom spécial. Puis, sans notes : supprimez le fichier et recréez-le de mémoire, jusqu'à l'afficher dans le navigateur.

Jour 3 — Le squelette d'une page HTML

Objectif : écrire de mémoire le squelette complet d'une page HTML et comprendre le rôle de chaque ligne.

Théorie (20 min)

Hier, deux balises isolées suffisaient — le navigateur est tolérant. Mais une vraie page a un squelette fixe, le même pour toutes les pages du monde :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Ma page</title>
</head>
<body>
  <h1>Bonjour</h1>
</body>
</html>

Ligne par ligne :

• <!DOCTYPE html> n'est pas une balise mais une déclaration : « ce document est du HTML moderne ». Sans elle, le navigateur passe dans un mode de compatibilité historique aux comportements bizarres.
• <html lang="fr"> est la racine : tout le document vit dedans. lang="fr" est un attribut : une information collée à la balise ouvrante, sous la forme nom="valeur". Ici il annonce la langue de la page — les lecteurs d'écran s'en servent pour choisir l'accent, les moteurs de recherche pour classer.
• <head> contient les informations sur la page, invisibles dans la fenêtre : <meta charset="utf-8"> déclare l'encodage des caractères (utf-8 permet les accents et tous les alphabets), <title> donne le titre de l'onglet et le titre dans les résultats de recherche.
• <body> contient tout ce qui s'affiche dans la fenêtre.

Remarquez l'imbrication : les éléments se contiennent comme des poupées russes — title dans head, head dans html. On ferme toujours dans l'ordre inverse de l'ouverture, et on indente (décale avec des espaces) chaque niveau pour le lire d'un coup d'œil.

Pratique (30 min)

1. Dans VSCodium, remplacez le contenu de index.html par le squelette ci-dessus, tapé à la main, avec votre propre titre et votre propre <h1>.
2. Enregistrez, rechargez le navigateur. Critère de réussite : le titre de l'onglet affiche votre texte (plus « index.html » ni l'adresse du fichier), et la page montre votre titre.
3. Écrivez dans le <body> une phrase avec des accents (« élève », « ça », « à bientôt »), enregistrez, rechargez : les accents s'affichent correctement grâce au charset="utf-8".
4. Changez lang="fr" en lang="en", rechargez : rien ne change visuellement. C'est normal : cet attribut parle aux machines (lecteurs d'écran, moteurs), pas aux yeux. Remettez fr.
5. Fermez VSCodium, rouvrez-le, et réécrivez le squelette sur un fichier neuf squelette.html sans regarder vos notes. Comparez, corrigez, recommencez jusqu'à un squelette juste du premier coup.

Tips agent : « vérifie que mon squelette HTML est correct » en collant le fichier entier est une relecture fiable. Piège : le modèle peut « corriger » un détail juste pour faire quelque chose. Preuve à demander : la liste des erreurs réelles, chacune citée, et zéro modification gratuite.

Synthèse (10 min)

Trois lignes : le rôle de head vs body, ce qu'est un attribut, pourquoi utf-8. Puis récitez le squelette ligne par ligne, sans regarder.

Jour 4 — Titres, paragraphes et commentaires

Objectif : structurer un texte long avec six niveaux de titres, des paragraphes, et laisser des notes invisibles dans le code.

Théorie (20 min)

HTML offre six niveaux de titres, de <h1> (le plus important) à <h6> (le moins important). Ils expriment une hiérarchie de sens, pas des tailles : <h1> est le sujet de la page (un seul par page, par convention), les <h2> ses grandes parties, les <h3> leurs sous-parties. On ne saute pas de niveau : un <h3> ne suit pas directement un <h1>. Cette hiérarchie est la table des matières que lisent les moteurs de recherche et les lecteurs d'écran.

Le texte courant va dans <p> (paragraphe). Détail qui surprend : le navigateur ignore les retours à la ligne et les espaces multiples dans votre fichier — il les écrase en un seul espace. Pour séparer du texte en paragraphes, il faut une balise <p> par paragraphe.

Enfin, le commentaire : du texte dans le code que le navigateur ignore complètement, pour vous ou vos relecteurs :

<!-- ceci est un commentaire, invisible sur la page -->

Il commence par <!-- et finit par -->. Il sert à expliquer un choix, à repérer une section, ou à masquer temporairement un morceau de page sans le supprimer.

Pratique (30 min)

1. Créez article.html avec le squelette appris hier. En <h1> : « Mon animal préféré » (ou un sujet qui vous plaît).
2. Écrivez un article court : deux sections en <h2> (« Son habitat », « Son alimentation »), une sous-section en <h3>, et trois paragraphes <p> répartis dedans.
3. Dans le premier paragraphe, appuyez sur Entrée au milieu d'une phrase. Critère de réussite : après rechargement, le retour à la ligne n'apparaît PAS — preuve que le navigateur ignore les sauts de ligne du fichier. Séparez alors la phrase en deux <p> et voyez la coupure apparaître.
4. Ajoutez un commentaire <!-- à compléter : une photo --> avant une section. Vérifiez qu'il est invisible sur la page, puis faites un clic droit → « Code source de la page » : il est là. Le code source est public par nature — n'y mettez jamais de secret.
5. Validez la page : collez son code dans validator.w3.org (onglet « Validate by Direct Input »). Critère de réussite : « no errors ».

Tips agent : « relis ce HTML et dis-moi si la hiérarchie des titres est correcte » fonctionne bien. Piège : le modèle peut inventer une règle (« il faut un h2 avant chaque p ») qui n'existe pas. Preuve : faites-lui citer la règle, puis vérifiez-la sur MDN.

Synthèse (10 min)

Trois lignes : la hiérarchie h1→h6, pourquoi les retours à la ligne ne suffisent pas, à quoi sert un commentaire. Puis récrivez article.html sans notes.

Jour 5 — Listes et texte important

Objectif : écrire des listes à puces et numérotées, et marquer l'importance du texte avec strong et em.

Théorie (20 min)

Deux sortes de listes : la liste non ordonnée <ul> (unordered list) affiche des puces — l'ordre ne compte pas (des courses, des qualités) ; la liste ordonnée <ol> (ordered list) numérote — l'ordre compte (une recette, un classement). Dans les deux cas, chaque élément va dans un <li> (list item) :

<ul>
  <li>Pommes</li>
  <li>Pain</li>
</ul>
<ol>
  <li>Préchauffer le four</li>
  <li>Mélanger la pâte</li>
</ol>

Les listes s'imbriquent : un <ul> peut vivre dans un <li>, pour faire des sous-listes (un plan, un menu).

Pour le texte, deux balises de sens, pas d'apparence : <strong> marque un contenu important (un avertissement, un mot-clé) — le navigateur l'affiche en gras, mais le sens premier est l'importance ; <em> (emphasis) marque une insistance, comme quand on appuie sur un mot en parlant — affiché en italique. Vous croiserez aussi <b> et <i>, qui ne veulent rien dire d'autre que « gras » et « italique » : préférez strong et em, qui survivent aux lecteurs d'écran.

Pratique (30 min)

1. Ouvrez votre article.html d'hier. Dans la section « alimentation », remplacez le paragraphe par une liste <ul> de ce que mange votre animal.
2. Ajoutez une section « Un jour avec lui » avec une liste <ol> de trois moments de sa journée, dans l'ordre.
3. Dans un des <li>, ajoutez une sous-liste <ul> imbriquée de deux éléments. Rechargez : la sous-liste apparaît décalée.
4. Passez en <strong> le mot le plus important d'un paragraphe, et en <em> un mot sur lequel vous appuieriez à l'oral. Critère de réussite : sur la page, le premier est en gras, le second en italique, et votre code source montre bien strong et em, pas b ni i.
5. Revalidez avec le validateur du W3C : zéro erreur.

Tips agent : « transforme ce paragraphe en liste à puces » est une refonte parfaite pour un agent. Piège : il peut reformuler votre texte au passage. Preuve : comparez le texte avant/après, il ne doit bouger que dans sa forme, pas dans ses mots.

Synthèse (10 min)

Trois lignes : ul vs ol, le rôle de li, la différence de sens entre strong et b. Puis recréez une liste imbriquée de mémoire.

Jour 6 — Les liens

Objectif : relier vos pages entre elles et vers l'extérieur, et créer des renvois à l'intérieur d'une page.

Théorie (20 min)

Le lien est l'invention qui a donné son nom au web : l'hypertexte — du texte qui renvoie à d'autre texte. La balise est <a> (anchor, ancre), et sa destination vit dans l'attribut href :

<a href="https://developer.mozilla.org/fr/">La doc MDN</a>

Le texte entre les balises est ce qu'on voit et ce qu'on clique ; l'attribut href est où ça mène. Choisissez un texte de lien qui dit la destination (« la documentation MDN »), jamais « cliquez ici » : un lecteur d'écran peut lister tous les liens d'une page, et une liste de « cliquez ici » ne veut rien dire.

Trois sortes de destinations :

• Lien externe : une URL complète, avec le https://. Sans le protocole, le navigateur croit que c'est un fichier local.
• Lien relatif : vers un fichier à côté du vôtre : <a href="article.html">Mon article</a>. Le chemin part de l'endroit où se trouve la page. C'est ainsi que les pages d'un site se relient entre elles.
• Ancre : vers un endroit dans la page. On marque la cible avec un attribut id — <h2 id="recette"> — et le lien pointe dessus avec un dièse : <a href="#recette">Voir la recette</a>. C'est le principe des sommaires en haut des longues pages.

Pratique (30 min)

1. Dans index.html, ajoutez un paragraphe avec un lien externe vers votre site préféré, avec un texte de lien explicite.
2. Ajoutez un lien relatif vers article.html. Cliquez dessus : votre article s'ouvre. Ajoutez dans article.html un lien de retour vers index.html. Critère de réussite : vous pouvez naviguer entre vos deux pages en ne cliquant que sur des liens, sans toucher à la barre d'adresse.
3. Dans article.html, donnez un id à chaque <h2>, puis ajoutez en haut de page une liste « Sommaire » dont chaque <a href="#..."> pointe vers une section. Rechargez et testez chaque lien du sommaire : la page doit glisser jusqu'à la section.
4. Écrivez volontairement un lien externe sans le https:// (href="developer.mozilla.org"), cliquez : le navigateur cherche un fichier local et échoue. Corrigez. Vous venez de voir la panne de lien la plus fréquente chez les débutants.

Tips agent : « vérifie les liens de ce fichier et liste ceux qui sont cassés ou mal écrits » — collez le fichier. Piège : il ne peut pas tester les liens externes (il ne les ouvre pas), il ne fait que lire. Preuve à demander : la liste avec la ligne exacte de chaque lien suspect, puis testez-les au clic vous-même.

Synthèse (10 min)

Trois lignes : les trois sortes de liens, le rôle de href, pourquoi « cliquez ici » est un mauvais texte de lien. Puis refaites le sommaire à ancres sans notes.

Jour 7 — Les images

Objectif : insérer une image avec un texte alternatif correct, et la légender.

Théorie (20 min)

La balise <img> a deux attributs obligatoires : src (source : le chemin vers le fichier image, relatif comme pour un lien) et alt (alternative : le texte qui remplace l'image). Particularité : <img> est une balise orpheline — pas de balise fermante, pas de contenu : <img src="photo.jpg" alt="Un chat roux endormi sur un clavier">.

Le alt est l'attribut le plus important de la journée. Il sert dans trois cas : l'image ne charge pas (connexion lente, fichier manquant), le visiteur utilise un lecteur d'écran, un moteur de recherche indexe la page. La règle d'écriture : décrivez ce que l'image apporte, comme si vous la décriviez au téléphone. Une image purement décorative prend un alt="" vide — le lecteur d'écran la saute au lieu de lire « image ».

Pour légender une image, le couple <figure> / <figcaption> enveloppe l'image et sa légende :

<figure>
  <img src="chat.jpg" alt="Un chat roux endormi sur un clavier">
  <figcaption>Pixel, interrompu en pleine saisie.</figcaption>
</figure>

Enfin : le poids compte. Une photo sortie d'appareil pèse souvent 5 Mo ou plus, une éternité à charger. Pour le web, on redimensionne et on compresse — vous verrez ça au module 4.

Pratique (30 min)

1. Trouvez une photo à vous (ou téléchargez une image libre depuis Wikimedia Commons), copiez-la dans votre dossier devweb sous un nom simple, sans espaces ni accents : photo.jpg. Les espaces et accents dans les noms de fichiers sont une source classique d'images cassées.
2. Dans article.html, insérez l'image dans une <figure> avec sa <figcaption> et un alt qui la décrit vraiment. Rechargez. Critère de réussite : l'image s'affiche avec sa légende.
3. Renommez le fichier image sur le disque (sans toucher au HTML) et rechargez : l'image est cassée, et c'est votre texte alt qui s'affiche à la place. Vous venez de voir à quoi il sert. Réparez le nom.
4. Ajoutez une image purement décorative (un séparateur, un motif) avec alt="".
5. Relisez vos deux alt à voix haute, les yeux fermés : entend-on ce que chaque image apporte ?

Tips agent : « propose trois textes alt pour cette image : [décrivez l'image] » est un bon usage. Piège : il ne voit pas l'image si vous ne la lui montrez pas — sans description, il invente. Preuve : relisez chaque alt les yeux fermés, c'est vous qui validez.

Synthèse (10 min)

Trois lignes : les deux attributs de img, les trois cas où alt sauve la mise, à quoi sert figure. Puis réinsérez la figure complète sans notes.

Jour 8 — Block, inline, div et span

Objectif : distinguer les éléments block et inline, et utiliser div et span comme boîtes neutres.

Théorie (20 min)

Chaque élément HTML a un comportement d'affichage par défaut. Les éléments block (bloc) occupent toute la largeur disponible et poussent le suivant à la ligne : p, h1…h6, ul, figure, table. Les éléments inline (en ligne) ne prennent que la place de leur contenu et restent dans le flux du texte : a, strong, em, img. C'est pour ça qu'un <strong> ne casse pas son paragraphe alors qu'un <p> dans un <p> est interdit.

Règle d'imbrication qui découle de là : un inline peut vivre dans un block ; un block ne devrait pas vivre dans un inline.

Il arrive qu'aucune balise ne convienne au sens : on veut juste regrouper des éléments pour les mettre en forme ensemble (module 2) ou les manipuler ensemble (module 3). Deux balises neutres servent à ça, sans aucun sens propre : <div>, la boîte block générique, et <span>, la boîte inline générique. Elles prennent tout leur intérêt avec des attributs class ou id, que vous apprendrez avec le CSS :

<div class="encart">
  <p>Un groupe d'éléments à styliser ensemble.</p>
</div>
<p>Un mot <span class="surligne">surligné</span> dans la phrase.</p>

La tentation est grande de tout faire en div. Résistez : si une balise a le bon sens (une liste est une ul, pas trois div), elle travaille pour vous — le module 4 montrera combien les lecteurs d'écran en dépendent.

Pratique (30 min)

1. Dans article.html, ouvrez les outils de développement (F12), onglet « Inspecteur ». Survolez vos éléments : le navigateur surligne leur emprise. Critère de réussite : vous voyez qu'un <p> occupe toute la largeur alors qu'un <strong> n'occupe que son mot.
2. Regroupez un titre et son paragraphe dans un <div class="carte">. Rien ne change visuellement : c'est normal, la boîte est neutre en attendant le CSS.
3. Entourez un mot d'un paragraphe avec un <span class="important">.
4. Essayez d'imbriquer un <p> dans un <strong>, rechargez, inspectez : le navigateur réorganise votre code tout seul. Regardez l'inspecteur, pas votre fichier : c'est lui qui dit la vérité de ce que le navigateur a compris.
5. Revalidez avec le W3C : zéro erreur.

Tips agent : « voici mon HTML et ce que l'inspecteur montre de différent — pourquoi ? » colle les DEUX versions (votre fichier + ce que l'inspecteur affiche). Piège : sans la version inspectée, il répond à côté. Preuve : son explication doit correspondre à ce que vous observez en rechargeant.

Synthèse (10 min)

Trois lignes : block vs inline, la règle d'imbrication, quand utiliser div et span. Puis listez de mémoire cinq balises block et cinq inline.

Jour 9 — Formulaires 1/2 : saisir du texte

Objectif : construire un premier formulaire avec un champ texte, une étiquette et un bouton.

Théorie (20 min)

Le formulaire est le premier élément interactif du parcours : l'utilisateur y écrit, et la page reçoit sa saisie. La balise <form> enveloppe les champs. Le champ le plus courant est <input type="text"> — une balise orpheline dont l'attribut type décide de la forme du champ.

Chaque champ a besoin d'une étiquette <label> : le texte visible qui dit ce qu'on attend (« Votre prénom »). On la relie au champ en donnant au champ un id et à l'étiquette un attribut for de la même valeur :

<form>
  <label for="prenom">Votre prénom</label>
  <input type="text" id="prenom" name="prenom">
  <button type="submit">Envoyer</button>
</form>

Ce lien for/id n'est pas du raffinement : cliquer sur l'étiquette place le curseur dans le champ (confort sur mobile), et le lecteur d'écran annonce « Votre prénom, champ de saisie » au lieu d'un champ muet. Un formulaire sans label est un formulaire muet.

L'attribut name est le nom sous lequel la saisie sera envoyée. Et que se passe-t-il au clic sur « Envoyer » ? Sans attribut action, le formulaire recharge la page en ajoutant la saisie à l'URL, visible dans la barre d'adresse : ?prenom=Alice. C'est peu spectaculaire, mais c'est la preuve que la donnée circule — au module 3, JavaScript l'intercepte avant le rechargement.

Pratique (30 min)

1. Créez contact.html avec le squelette, et copiez le formulaire ci-dessus en le tapant à la main.
2. Ouvrez la page, cliquez sur les mots « Votre prénom » : le curseur saute dans le champ. Critère de réussite n°1 : ce saut fonctionne — preuve que le lien for/id est bon.
3. Tapez un prénom, cliquez « Envoyer ». Critère de réussite n°2 : la page se recharge et la barre d'adresse affiche ?prenom=... avec votre saisie.
4. Ajoutez un champ « Votre email » de type email : le navigateur refusera une saisie sans @ à l'envoi. Testez avec « bonjour » puis avec une vraie adresse (avec @ et un point) : le type du champ est une première validation gratuite.
5. Enlevez le for d'un label, rechargez, cliquez sur l'étiquette : plus rien ne se passe. Remettez-le. Vous savez maintenant diagnostiquer un label muet.

Tips agent : « ajoute un champ email avec son label à ce formulaire » est sûr. Piège : il peut choisir un id différent entre le for et le champ. Preuve : le clic sur l'étiquette doit placer le curseur dans le champ — testez-le au doigt.

Synthèse (10 min)

Trois lignes : le rôle de form, le couple for/id, ce que fait le bouton submit sans action. Puis réécrivez le formulaire de mémoire.

Jour 10 — Formulaires 2/2 : cases, boutons radio, listes déroulantes

Objectif : utiliser les autres types de champs : case à cocher, bouton radio, liste déroulante et zone de texte longue.

Théorie (20 min)

L'attribut type de <input> est une boîte à outils. Aujourd'hui, quatre outils :

• type="checkbox" : une case à cocher, pour un oui/non indépendant (« J'accepte la charte »). On peut en cocher plusieurs dans un même formulaire.
• type="radio" : un choix unique parmi plusieurs (« petite / moyenne / grande »). Les boutons radio d'un même groupe partagent le même name : c'est ce nom commun qui les lie et garantit qu'on n'en coche qu'un. Chacun a sa propre value, la valeur envoyée.
• <select> : la liste déroulante, qui contient des <option>. Économe en place quand les choix sont nombreux.
• <textarea> : une zone de texte sur plusieurs lignes, pour les messages. Contrairement à input, elle a une balise fermante.

<fieldset>
  <legend>Taille</legend>
  <label><input type="radio" name="taille" value="s"> Petite</label>
  <label><input type="radio" name="taille" value="m"> Moyenne</label>
</fieldset>

<fieldset> regroupe des champs liés et <legend> donne le titre du groupe — le lecteur d'écran annonce « Taille, groupe » puis chaque option. Astuce de la balise : un <input> écrit dans son <label> est lié sans avoir besoin de for/id.

Pratique (30 min)

1. Dans contact.html, ajoutez un fieldset « Motif » avec trois boutons radio (« Question », « Idée », « Autre ») partageant name="motif".
2. Ajoutez une case à cocher « Je veux une réponse par email » avec son label.
3. Ajoutez une liste déroulante « Comment m'avez-vous connu ? » avec trois option, et une textarea « Votre message ».
4. Critère de réussite : vous ne pouvez cocher qu'un seul motif à la fois (essayez d'en cocher deux : le premier se décoche), la case se coche et se décoche librement, et à l'envoi l'URL contient toutes vos saisies avec leurs noms.
5. Changez le name d'un des radios pour qu'il soit différent des autres : vous pouvez maintenant en cocher deux — la preuve que c'est bien le name commun qui fait le groupe. Réparez.

Tips agent : « ajoute un groupe de trois radios name="motif" à ce formulaire » — l'agent connaît la syntaxe par cœur. Piège : il peut donner trois name différents, et le groupe est mort. Preuve : essayez de cocher deux options, une seule doit rester.

Synthèse (10 min)

Trois lignes : checkbox vs radio, le rôle du name commun, quand préférer select. Puis réécrivez le fieldset de mémoire.

Jour 11 — Les tableaux

Objectif : présenter des données tabulaires avec table, caption, th et td — et savoir quand NE PAS utiliser un tableau.

Théorie (20 min)

Un tableau HTML sert à présenter des données tabulaires : des lignes qui partagent les mêmes colonnes (un horaire, un classement, un relevé). Pas à faire de la mise en page — c'était la pratique des années 1990, elle est morte et le CSS du module 2 fait ça mieux.

L'anatomie : <table> enveloppe tout ; chaque ligne est une <tr> (table row) ; dans une ligne, chaque cellule est un <td> (table data) — ou un <th> (table header) si c'est une cellule d'en-tête, que le navigateur met en gras et que le lecteur d'écran annonce avant chaque cellule de sa colonne. Une <caption> en premier enfant donne le titre du tableau :

<table>
  <caption>Horaires du club</caption>
  <tr>
    <th>Jour</th>
    <th>Heure</th>
  </tr>
  <tr>
    <td>Mardi</td>
    <td>18 h</td>
  </tr>
</table>

Pour les tableaux plus longs, on regroupe : <thead> pour la ligne d'en-têtes, <tbody> pour les données, <tfoot> pour un éventuel total. Les en-têtes peuvent préciser leur portée avec scope="col" (en-tête de colonne) ou scope="row" (en-tête de ligne) — un coup de pouce de plus pour les lecteurs d'écran.

Pratique (30 min)

1. Créez horaires.html et tapez le tableau ci-dessus, puis complétez-le jusqu'à cinq lignes de données avec vos propres horaires (cours, sport, travail).
2. Ajoutez scope="col" aux deux <th>, puis séparez le tableau en <thead> et <tbody>.
3. Critère de réussite : le tableau s'affiche avec sa légende, ses en-têtes en gras, et le validateur W3C ne signale aucune erreur.
4. Ajoutez une troisième colonne « Lieu » : un <th> dans l'en-tête et un <td> dans CHAQUE ligne — oubliez-en un et regardez la ligne se tasser à gauche. C'est la panne classique du tableau : une ligne plus courte que les autres.
5. Inspectez le tableau dans les outils de développement pour voir comment le navigateur a rangé vos lignes.

Tips agent : « transforme cette liste d'horaires en tableau HTML avec caption et th » est un bon ordre — collez les données brutes. Piège : il peut oublier un td sur une ligne. Preuve : comptez les cellules par ligne dans le code rendu, ou vérifiez au validateur.

Synthèse (10 min)

Trois lignes : l'anatomie table/tr/th/td, à quoi servent caption et scope, quand un tableau est le mauvais outil. Puis refaites le tableau sans notes.

Jour 12 — Le HTML sémantique

Objectif : structurer une page avec les balises de région : header, nav, main, section, article, footer.

Théorie (20 min)

Depuis HTML5 (2008), le langage propose des balises qui nomment les régions d'une page au lieu de laisser tout dans des div anonymes :

• <header> : l'en-tête de la page (logo, titre du site) ou d'une section ;
• <nav> : un bloc de navigation (le menu) ;
• <main> : le contenu principal de la page — un seul par page ;
• <section> : une partie thématique du contenu, en général avec son titre ;
• <article> : un contenu autoportant, qui aurait du sens seul (un billet de blog, une fiche produit) ;
• <aside> : un contenu annexe (encadré, liens liés) ;
• <footer> : le pied de page (mentions, contact).

Ces balises ne changent rien à l'affichage — ce sont des div qui parlent. Leur valeur est ailleurs : les lecteurs d'écran offrent un raccourci « aller au contenu principal » qui saute la navigation (ces régions s'appellent des repères, landmarks en anglais), les moteurs de recherche comprennent ce qui est le contenu et ce qui est le décor, et votre code se relit comme un plan. Sémantique veut simplement dire « qui porte un sens ».

Structure type d'une page :

<body>
  <header><h1>Mon site</h1></header>
  <nav><a href="index.html">Accueil</a></nav>
  <main>
    <section>
      <h2>Actualités</h2>
      <article>...</article>
    </section>
  </main>
  <footer><p>© 2026</p></footer>
</body>

Pratique (30 min)

1. Reprenez index.html et restructurez-le : un <header> avec le h1, une <nav> avec les liens vers vos autres pages, un <main> avec le contenu, un <footer> avec votre nom.
2. Dans le main, enveloppez chaque sujet dans une <section> avec son <h2>.
3. Critère de réussite : l'inspecteur montre la structure header / nav / main / footer, et la page s'affiche exactement comme avant — la preuve que la sémantique n'est pas de la décoration.
4. Appliquez la même structure à article.html, où le contenu principal sera un <article>.
5. Comptez vos <main> par page : il ne doit y en avoir qu'un.

Tips agent : « restructure cette page avec les balises sémantiques, sans toucher au contenu » est une refonte sûre. Piège : il peut mettre deux main ou déplacer un paragraphe. Preuve : un seul <main> dans le rendu, et comparez le texte affiché avant/après — identique au mot près.

Synthèse (10 min)

Trois lignes : ce que « sémantique » veut dire, le rôle des landmarks, la règle du main unique. Puis listez de mémoire les sept balises de région.

Jour 13 — Mini-projet : votre page personnelle

Objectif : assembler tout le module dans une page personnelle complète, sans suivre de pas à pas.

Théorie (20 min)

Aujourd'hui, pas de notion nouvelle : vous consolidez. Une page personnelle présente qui vous êtes, ce que vous faites, comment vous contacter. Le cahier des charges :

• squelette complet avec lang, charset et title ;
• structure sémantique : header, nav, main, footer ;
• un seul <h1>, des sections avec des <h2> ;
• au moins une liste (à puces ou numérotée) ;
• au moins une image avec un alt soigné ;
• des liens : vers vos autres pages du parcours, et un externe ;
• un petit formulaire de contact avec labels reliés ;
• un commentaire HTML qui date la page.

Méthode de travail, la même que les professionnels : écrivez d'abord le plan au brouillon (quelles sections ?), puis le squelette, puis remplissez section par section en rechargeant souvent. On n'écrit jamais une page entière avant de la regarder.

Pratique (30 min)

1. Au brouillon, dessinez le plan de votre page : quelles sections, dans quel ordre.
2. Créez moi.html et construisez-la seul, sans pas à pas. Bloquez plus de cinq minutes ? Relisez la séance du point qui coince, puis revenez.
3. Critère de réussite : chaque point du cahier des charges est présent, et le validateur W3C dit « no errors ».
4. Montrez la page à quelqu'un (ou relisez-la à voix haute) : chaque lien marche, chaque image s'affiche, le formulaire accepte une saisie.

Tips agent : résistez à « écris-moi ma page perso » : c'est précisément l'exercice. Le bon ordre, à la fin : « relis cette page comme un relecteur HTML et liste les problèmes, sans la corriger ». Preuve : chaque problème cité avec sa ligne, et c'est vous qui corrigez.

Synthèse (10 min)

Trois lignes : ce qui vous a pris le plus de temps, l'erreur que vous avez cherchée le plus longtemps, ce dont vous êtes content. Cette page deviendra la page d'accueil de votre site au module 4.

Jour 14 — Bilan du module 1

Objectif : vérifier que tout le module est acquis, et combler les trous avant le CSS.

Théorie (20 min)

Relisez vos carnets des treize jours. Puis testez-vous, sans notes :

1. Racontez le voyage d'une requête web, de l'URL à l'affichage.
2. Écrivez le squelette HTML complet sur une feuille blanche.
3. Citez les trois sortes de liens et leur syntaxe.
4. Expliquez la différence entre <strong> et <b>.
5. Expliquez comment un label est relié à son champ, et pourquoi ça compte.
6. Citez cinq balises sémantiques et leur rôle.
7. Dessinez l'anatomie d'un tableau : table, caption, tr, th, td.

Chaque question qui résiste désigne une séance à refaire — refaire la séance coûte une heure, traîner le doute coûte un module.

Pratique (30 min)

1. Faites le test des sept questions ci-dessus, à écrit, sans notes.
2. Pour chaque question ratée : refaites la pratique de la séance correspondante.
3. Critère de réussite : sept bonnes réponses, ou les séances manquantes refaites. Les deux sont des réussites.
4. Rangez votre dossier devweb : un dossier module1 qui contient index.html, article.html, contact.html, horaires.html, moi.html et vos images. Un dossier propre par module, vous vous y retrouverez au module 4.

Tips agent : « interroge-moi sur le HTML, une question à la fois, des balises de base aux formulaires ; attends ma réponse avant de corriger, et garde mes erreurs pour me les reposer à la fin » est un examinateur parfait. Piège : il note gentiment si vous ne le forcez pas à comparer avec le cours. Preuve : ses corrections doivent citer la règle exacte.

Synthèse (10 min)

Trois lignes : vos trois acquis les plus solides, et la notion que vous surveillerez au module 2. Demain : le CSS, et vos pages prennent des couleurs.