Module 1Les bases du HTML
Chapitre 1 sur 13
Le web et ton environnement de travail
Comprendre le fonctionnement du web, installer VS Code et créer sa première page.
- ≈ 150 min
- 6 leçons
- 7 vidéos
- 3 exercices
- TP
Objectifs
Avec ce chapitre, tu sauras…
- expliquer ce qui se passe entre le moment où tu tapes une adresse et l'affichage de la page ;
- distinguer le rôle de HTML, CSS et JavaScript ;
- différencier front-end, back-end et full-stack ;
- installer et configurer VS Code, Live Server et Prettier ;
- créer, enregistrer et afficher ta première page ;
- utiliser les outils de développement du navigateur (F12) ;
- nommer et ranger correctement tes fichiers.
Tu utilises le web tous les jours. Ce chapitre t'apprend à le regarder de l'autre côté de l'écran : comme un développeur. Tu n'écriras presque pas de code ici, mais tout ce que tu installes et comprends maintenant te servira dans chaque chapitre suivant.
Leçon 1
Comment fonctionne le web ?
Quand tu tapes https://www.exemple.com/contact.html dans la barre d'adresse, voici ce qui se passe :
Le trajet d'une page web
- 1Tu saisis une URLL'adresse indique le protocole (
https), le nom de domaine (www.exemple.com) et le fichier demandé (/contact.html). - 2Le DNS traduit le nom en adresse IPComme un annuaire :
www.exemple.comdevient par exemple93.184.216.34. - 3Le navigateur envoie une requête HTTP« Donne-moi le fichier
/contact.html». C'est le client qui demande. - 4Le serveur répondIl renvoie le fichier HTML (et un code :
200= OK,404= introuvable). - 5Le navigateur lit le HTML et affiche la pageIl télécharge aussi le CSS, les images et le JavaScript référencés dans le HTML, puis il dessine la page.
Tableau: Les morceaux d'une URL
| Partie | Exemple | Rôle |
|---|---|---|
| protocole | https:// | la façon de communiquer (le s = connexion chiffrée) |
| nom de domaine | www.exemple.com | l'adresse du site, traduite en IP par le DNS |
| chemin | /blog/article.html | le fichier demandé sur le serveur |
| paramètres | ?page=2 | des informations envoyées au serveur |
| ancre | #commentaires | un endroit précis dans la page |
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
La partie théorique de Melvynx sur le web et le HTML. Regarde les dix minutes en entier, puis vérifie que tu sais expliquer avec tes mots le trajet d'une page décrit dans cette section.
Leçon 2
HTML, CSS et JavaScript : trois langages, trois rôles
Une page web moderne combine trois langages. Chacun a une seule responsabilité. Mélanger les rôles (par exemple mettre de la couleur dans le HTML) est une mauvaise pratique.
Tableau: Les trois langages du front-end
| Langage | Rôle | Question à laquelle il répond | Exemple |
|---|---|---|---|
| HTML | structure et sens | qu'est-ce que c'est ? | « ceci est un titre », « ceci est un lien » |
| CSS | apparence | à quoi ça ressemble ? | « le titre est bleu, centré, en 32 px » |
| JavaScript | comportement | qu'est-ce que ça fait ? | « au clic, le menu s'ouvre » |
Tableau: Front-end, back-end et full-stack
| Métier | Où le code s'exécute | Langages typiques |
|---|---|---|
| front-end | dans le navigateur de l'utilisateur | HTML, CSS, JavaScript, React, Vue |
| back-end | sur le serveur | PHP, Python, Java, Node.js, SQL |
| full-stack | les deux | un peu de tout, avec une spécialité |
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Trois minutes sur la différence entre front-end, back-end et full-stack. À la fin, tu dois pouvoir dire en une phrase : le front-end, c'est tout ce que l'utilisateur voit et touche.
Leçon 3
Installer ton environnement de travail
Pour écrire du HTML, un simple bloc-notes suffit. Mais un éditeur de code te fait gagner un temps énorme : coloration syntaxique, complétion automatique, fermeture des balises, détection des erreurs.
Tableau: Les outils à installer
| Outil | Pourquoi | Où le trouver |
|---|---|---|
| Visual Studio Code | l'éditeur le plus utilisé au monde, gratuit | code.visualstudio.com |
| Live Server (extension) | recharge la page à chaque enregistrement | onglet Extensions de VS Code |
| Prettier (extension) | indente et met en forme ton code automatiquement | onglet Extensions de VS Code |
| Chrome ou Firefox | tester et inspecter tes pages | google.com/chrome · firefox.com |
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Les prérequis, puis l'installation des outils. Si tu as déjà VS Code, commence directement à 2:46, le début de l'installation des outils.
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
Version express : la mise en place de VS Code en deux minutes.
Leçon 4
Ta première page
Crée un dossier formation-html/chapitre-01, ouvre-le dans VS Code, puis crée un fichier nommé index.html. Tape ! puis la touche Tab : VS Code génère automatiquement le squelette d'une page (c'est un raccourci Emmet). Ajoute ensuite deux lignes dans le <body> :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le web !</h1>
<p>Je m'appelle Anas et voici ma première page HTML.</p>
</body>
</html>Fais un clic droit dans le fichier → Open with Live Server. Le navigateur s'ouvre sur l'adresse http://127.0.0.1:5500/index.html :
<h1>Bonjour le web !</h1>
<p>Je m'appelle Anas et voici ma première page HTML.</p>Tu comprendras chaque ligne de ce squelette au chapitre 2. Pour l'instant, retiens que ce qui s'affiche se trouve dans le <body>, et que le texte entre <title> et </title> apparaît dans l'onglet du navigateur.
Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
La première page HTML. Refais-la en même temps que la vidéo, puis ouvre-la dans ton navigateur.
Vidéo · À regarder
FR[TUTO] Les BASES du HTML
Bertrand . Tech · YouTube
Une deuxième explication de la première page web, par un autre auteur : utile pour revoir la même chose sous un autre angle.
Leçon 5
Les outils de développement du navigateur
Tous les navigateurs ont des outils de développement (DevTools). Ils te montrent le HTML tel que le navigateur l'a compris, et te permettent de le modifier en direct pour tester.
Tableau: Les raccourcis à connaître
| Action | Raccourci (Windows / Linux) | Mac |
|---|---|---|
| ouvrir les outils de développement | F12 ou Ctrl + Maj + I | Cmd + Option + I |
| inspecter un élément précis | clic droit → Inspecter | clic droit → Inspecter |
| afficher le code source brut | Ctrl + U | Cmd + Option + U |
| recharger sans le cache | Ctrl + Maj + R | Cmd + Maj + R |
| tester l'affichage mobile | Ctrl + Maj + M (dans les DevTools) | Cmd + Maj + M |
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
Le débogage avec les outils de Chrome. Refais chaque manipulation en même temps que la vidéo, sur ta propre page, puis teste les raccourcis du tableau ci-dessus.
Leçon 6
Nommer et ranger ses fichiers
Sur un serveur web (souvent sous Linux), Photo.jpg et photo.jpg sont deux fichiers différents, et les espaces deviennent %20 dans les adresses. Prends dès maintenant les bonnes habitudes.
Tableau: Bons et mauvais noms
| Mauvais nom | Problème | Bon nom |
|---|---|---|
Mon CV.html | majuscules et espace | mon-cv.html |
présentation.html | accent | presentation.html |
photo profil.JPG | espace, extension en majuscules | photo-profil.jpg |
page1 (copie).html | espace et parenthèses | page-contact.html |
Une organisation de projet classique
mon-site/
├── index.html ← page d'accueil
├── contact.html
├── a-propos.html
├── css/
│ └── style.css
├── images/
│ ├── logo.svg
│ └── photo-profil.jpg
└── js/
└── script.jsTableau: Le vocabulaire du chapitre
| Français | Anglais | Définition |
|---|---|---|
| navigateur | browser | programme qui affiche les pages web |
| serveur | server | ordinateur qui stocke et envoie les pages |
| requête | request | demande envoyée par le navigateur au serveur |
| nom de domaine | domain name | adresse lisible d'un site (exemple.com) |
| éditeur de code | code editor | logiciel pour écrire du code (VS Code) |
| outils de développement | DevTools | outils intégrés au navigateur pour inspecter une page |
| intégrateur | front-end developer | personne qui transforme une maquette en HTML et CSS |
Ton environnement
Installe VS Code, Live Server et Prettier. Crée chapitre-01/index.html avec un titre <h1> contenant ton prénom et un paragraphe qui présente ta formation. Ouvre la page avec Live Server, puis modifie le texte du titre directement dans l'onglet Elements des outils de développement. Que se passe-t-il quand tu recharges la page ? Pourquoi ?
Exercices
Choisis la bonne réponse
1Quel langage décrit la structure et le sens du contenu ?
2Quel langage gère l'apparence (couleurs, tailles) ?
3Le code
404renvoyé par un serveur signifie…4Le rôle du DNS est de…
5Quel raccourci ouvre les outils de développement ?
6Quel fichier un serveur affiche-t-il par défaut dans un dossier ?
Découpe l'URL
Pour l'adresse https://www.librairie-casa.ma/livres/romans.html?tri=prix#nouveautes, donne le protocole, le nom de domaine, le chemin, les paramètres et l'ancre.
Renomme les fichiers
Propose un nom correct pour chacun de ces fichiers : Accueil.HTML, nos services.html, Équipe & valeurs.html, IMG 2026.PNG.
L'essentiel du chapitre
À retenir
- Le navigateur (client) demande une page, le serveur la renvoie, le navigateur lit le HTML et l'affiche.
- HTML = structure et sens · CSS = apparence · JavaScript = comportement.
- HTML est un langage de balisage, pas un langage de programmation.
- Outils : VS Code + Live Server + Prettier, et les DevTools (
F12) du navigateur. - Noms de fichiers : minuscules, sans espaces, sans accents, page d'accueil =
index.html.