Module 2 : Les briques d'un site web (HTML, CSS, JavaScript)

Objectif du module

Comprendre de quoi est faite une page web — les trois "ingrédients" qui la composent — sans avoir besoin d'écrire du code.

Explication simple

Chaque page web que vous consultez est construite avec trois briques fondamentales. Chacune a un rôle bien précis :

1. HTML — La structure

HTML (HyperText Markup Language) est le squelette de la page. Il définit ce qu'il y a sur la page : un titre, un paragraphe, une image, un bouton, un formulaire...

HTML ne s'occupe pas de l'apparence. Il dit simplement : "Ici il y a un titre. Là il y a une image. En dessous, un paragraphe de texte."

2. CSS — L'apparence

CSS (Cascading Style Sheets) est le décorateur. Il décide de à quoi ça ressemble : les couleurs, les tailles, les espacements, les polices d'écriture, la disposition des éléments sur la page...

C'est grâce au CSS que deux sites peuvent avoir le même contenu mais un aspect complètement différent.

3. JavaScript — Le comportement

JavaScript (souvent abrégé en JS) est le mécanicien. Il gère ce qui bouge et ce qui réagit : un menu qui s'ouvre quand on clique, un formulaire qui vérifie votre email avant l'envoi, une animation, un panier d'achat qui se met à jour en temps réel...

Sans JavaScript, les pages seraient statiques — comme un document imprimé. Avec JavaScript, elles deviennent interactives.

Les trois briques ensemble

graph TD
    subgraph Page["Une page web"]
        H["HTML — Structure"]
        C["CSS — Apparence"]
        J["JavaScript — Comportement"]
    end
    H -->|"Ce qu'il y a sur la page"| Page
    C -->|"À quoi ça ressemble"| Page
    J -->|"Ce qui bouge et réagit"| Page

Brique	Rôle	Question à laquelle elle répond
HTML	Structure	"Qu'est-ce qu'il y a sur cette page ?"
CSS	Apparence	"À quoi ça ressemble ?"
JavaScript	Comportement	"Qu'est-ce qui se passe quand je clique ?"

Exemple concret

Prenons la page d'accueil d'un site de commerce en ligne :

HTML dit : "Il y a un logo en haut, une barre de recherche, une liste de produits avec chacun un nom, un prix et un bouton 'Ajouter au panier'."
CSS dit : "Le logo est à gauche, en bleu. Les produits sont disposés en grille de 4 colonnes. Le bouton est orange avec du texte blanc et des coins arrondis."
JavaScript dit : "Quand on clique sur 'Ajouter au panier', le compteur du panier en haut à droite passe de 0 à 1, et une petite animation confirme l'ajout."

Métaphore

Imaginez que vous construisez une maison :

HTML, c'est le plan de l'architecte et les murs : il définit les pièces, où se trouvent les portes et les fenêtres, la disposition générale
CSS, c'est la décoration intérieure : la couleur des murs, le type de carrelage, les rideaux, le style des meubles
JavaScript, c'est l'électricité et la plomberie : quand vous appuyez sur l'interrupteur, la lumière s'allume ; quand vous ouvrez le robinet, l'eau coule

Sans les murs (HTML), il n'y a rien à décorer. Sans la déco (CSS), la maison est habitable mais triste. Sans l'électricité (JavaScript), tout fonctionne mais rien ne réagit.

Est-ce que chaque brique est indispensable ?

HTML : oui, toujours. Pas de page sans structure.
CSS : techniquement non, mais sans lui, la page est illisible et moche. Dans la pratique, il est toujours présent.
JavaScript : pas toujours. Une page qui affiche simplement du texte et des images n'en a pas besoin. Mais dès qu'il y a de l'interactivité, il devient indispensable.

Résumé en 3 points clés

HTML = la structure (ce qu'il y a), CSS = l'apparence (comment c'est présenté), JavaScript = le comportement (ce qui réagit)
Ces trois briques travaillent ensemble pour créer chaque page que vous consultez
On n'a pas besoin de savoir coder pour comprendre ce découpage — il suffit de retenir que chaque brique a son rôle