Objectifs de la leçon
- Comprendre le rôle du navigateur et du serveur ;
- Distinguer HTML, CSS et JavaScript ;
- Installer son environnement de travail.
Du clic à l'affichage
Quand vous tapez une adresse (une URL) dans votre navigateur :
- Le navigateur demande la page à un serveur (un ordinateur connecté en permanence à Internet) ;
- Le serveur renvoie des fichiers : HTML, CSS, JavaScript, images ;
- Le navigateur interprète ces fichiers et affiche la page.
Les trois langages du navigateur
| Langage | Rôle | Analogie avec une maison |
|---|---|---|
| HTML | Structure et contenu | Les murs et les pièces |
| CSS | Apparence et mise en page | La peinture et la décoration |
| JavaScript | Interactivité | L'électricité et les équipements |
Ce cours porte sur HTML et CSS ; JavaScript fait l'objet d'une formation dédiée.
Installer son environnement
- Un navigateur récent (Chrome, Firefox, Edge) ;
- Un éditeur de code : Visual Studio Code est gratuit et très utilisé. Installez l'extension « Live Server » pour voir vos modifications en direct ;
- Un dossier de projet, par exemple
mon-site, contenantindex.htmlet un dossiercss.
Les outils de développement
Dans le navigateur, faites un clic droit sur une page puis « Inspecter » : vous voyez le HTML et le CSS de n'importe quel site. C'est un excellent outil pour apprendre et corriger vos erreurs.
À retenir
HTML structure, CSS met en forme, JavaScript anime. Le navigateur assemble le tout.
Mise en pratique
Installez VS Code et Live Server, créez votre dossier de projet, puis inspectez la page d'accueil d'un site que vous aimez.