Module 1 — Les bases du web : la scène du crime | Faites entrer HTML

Il est tard. L’écran éclaire la pièce comme un néon fatigué.
Bienvenue dans le web. Ici, rien n’est laissé au hasard.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous serez capable de :

Comprendre le rôle d’HTML dans le développement web
Identifier les acteurs de l’écosystème web : HTML, CSS, JavaScript
Configurer un environnement de travail propre, sans bavure
Créer et afficher votre première page HTML

🌐 Le web et son fonctionnement

Le web, ce n’est pas de la magie. C’est un réseau de conversations silencieuses entre des machines qui ne dorment jamais.

🕰️ Histoire d’HTML — Des débuts à aujourd’hui

HTML est un vieux flic. Il a vu passer des modes, des erreurs, et des révolutions.

HTML 1.0 : le strict minimum, des pages brutes
HTML 2 à 4 : structuration, tableaux, formulaires
XHTML : trop rigide, trop propre pour ce monde
HTML5 : le retour du pragmatisme
- Balises sémantiques (header, main, footer)
- Audio, vidéo
- APIs modernes

HTML ne fait pas joli.
Il structure.
Il décrit.
Il tient le squelette.

🔄 Comment fonctionne le web : client / serveur

Une histoire classique.

Le client (le navigateur) pose une question
Le serveur répond, parfois à contrecœur

Tout passe par des requêtes HTTP ou HTTPS.

— Donne-moi la page.
— Voilà ce que j’ai.

🌍 Le rôle du navigateur

Le navigateur, c’est l’interprète.

Il envoie les requêtes
Il reçoit le HTML
Il comprend le CSS
Il exécute le JavaScript

Chrome, Firefox, Edge…
Différents visages, même métier.

🧩 L’écosystème front-end

Un site web, c’est une équipe. Chacun a son rôle.

🦴 HTML — La structure (les os)

Définit le contenu
Organise l’information
Donne du sens aux éléments

Sans HTML, rien ne tient debout.

🎨 CSS — L’apparence (la peau)

Couleurs
Polices
Mise en page
Animations

CSS, c’est le costume.
Il peut faire illusion… mais sans structure, ça ne vaut rien.

⚡ JavaScript — Le comportement (les nerfs)

Réagit aux actions de l’utilisateur
Modifie le contenu
Crée de l’interactivité

C’est lui qui rend le site vivant.

🧠 Analogie avec le corps humain

HTML → squelette
CSS → peau et vêtements
JavaScript → système nerveux

Enlevez l’un, le corps ne fonctionne plus.

🛠️ Préparation de l’environnement

Un bon enquêteur prépare son matériel.

✍️ Éditeur de code

VS Code (recommandé)
- Léger
- Extensible
- Gratuit

C’est votre bureau. Gardez-le propre.

📁 Structure d’un projet web

Un projet simple commence toujours pareil :

mon-projet/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js

Pas de chaos. Chaque chose à sa place.

📄 Création du premier fichier HTML

Créez un fichier index.html :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Première scène</title>
  </head>
  <body>
    <h1>Bienvenue dans le web</h1>
    <p>Le dossier est ouvert.</p>
  </body>
</html>

🌐 Ouverture dans le navigateur

Double-cliquez sur le fichier
Ou clic droit → Ouvrir avec…
Ou glissez-le dans le navigateur

La page s’affiche. Le silence se brise. Vous venez d’entrer dans le métier.

Fin du module 1. La nuit est encore longue.