Un site, c’est trois langages qui travaillent ensemble. Ici, on ne lit pas : on manipule. Chaque section est une expérience pour comprendre un concept et retenir son vocabulaire.
Les murs, les pièces, les portes. HTML décrit ce qu’il y a : un titre, un paragraphe, une image, un bouton. Il n’a aucune apparence : juste du sens et de la structure.
« Il y a un titre, puis une liste de trois éléments, puis un bouton. »
Peinture, meubles, éclairage, plan de la maison. CSS décrit à quoi ça ressemble et où ça se place : couleurs, tailles, espaces, disposition, animations simples.
« Le titre est grand et violet, les cartes sont en 3 colonnes. »
L’électricité et les capteurs. JS décrit ce qui se passe quand on agit : clic, saisie, scroll, minuterie. Il peut modifier le HTML et le CSS en direct.
« Quand on clique sur le bouton, ouvre le menu. »
Faites avancer le curseur d’étage en étage et regardez la carte se transformer. Le code ci-dessous montre exactement ce qui a été ajouté.
HTML, CSS et JavaScript peuvent vivre ensemble dans une seule page, ou être répartis dans des fichiers séparés, rangés en dossiers, avec une page HTML par rubrique. Les deux marchent : c’est une question d’échelle. Basculez et cliquez sur les fichiers.
L’organisation en dossiers et fichiers du projet. « Propose une arborescence » = « montre-moi comment ranger les fichiers ».
L’adresse d’un fichier depuis celui où l’on est : css/style.css, ou ../index.html pour remonter d’un dossier.
Multi-pages : un fichier HTML par page, reliés par des liens <a>. One-page : une longue page (ou une appli) qui change son contenu en JS.
Ce site est lui-même un exemple multi-fichiers. Son arborescence :
webcabulaire/ ├─ index.html anatomie.html catalogue.html demo.html … ← une page HTML par rubrique └─ assets/ ├─ css/ site.css pages.css demos.css … ← styles partagés ├─ js/ site.js catalogue.js quiz.js … ← scripts partagés └─ js/data/ structure-navigation.js glossaire.js … ← données
Chaque page contient seulement son contenu propre, et appelle les mêmes site.css et site.js : changer une couleur dans un fichier la change partout.
« Sépare le code en fichiers : index.html, css/style.css et js/main.js, reliés avec des chemins relatifs. Puis crée une page par rubrique (index, a-propos, contact) qui partagent le même CSS et JS. »
Survolez ou touchez chaque zone du schéma : découvrez son nom, sa balise HTML et la façon de la demander à l’IA.
Le navigateur transforme le HTML en un arbre appelé DOM. Chaque élément a un parent, des enfants et des frères. Survolez à gauche ou à droite : les deux vues sont liées.
Un paragraphe avec un lien dedans.
Survolez un élément pour voir ses relations.
Chaque élément est une boîte. De l’intérieur vers l’extérieur : contenu, padding, border, margin. Déplacez les curseurs : c’est la clé de tous les problèmes d’espacement.
Padding = l’air à l’intérieur. Margin = la distance avec les voisins. Dire « plus d’espace » est ambigu : précisez lequel !
Deux outils CSS pour placer des éléments. Flexbox aligne sur un axe (une ligne ou une colonne). Grid dispose en lignes et colonnes. Testez les réglages et lisez le code produit.
Tout comportement suit le même schéma : un événement se produit (clic, survol, frappe, scroll), JS vérifie une condition, puis modifie la page. Interagissez avec la zone et regardez le journal.
Compteur de clics : 0 — c’est le DOM qui a changé !
Redimensionnez la fenêtre simulée. Aux points de rupture (breakpoints), le CSS change la mise en page grâce aux media queries : menu → burger, 3 colonnes → 2 → 1.
Voyez maintenant les composants assemblés dans un vrai site, puis explorez-les un par un.