Au programme de ce chapitre
- I. Structurer une page avec HTML
- II. Mettre en forme avec CSS
- III. Rendre la page interactive avec JavaScript
- Savoir-faire
- Exercices types corrigés
- Teste-toi — vrai ou faux ?
- Pièges fréquents et astuces
- À retenir
La définition à retenir
Définition Le HTML (HyperText Markup Language) décrit la structure d'une page web à l'aide de balises imbriquées, qui forment un arbre appelé DOM (Document Object Model). Chaque balise a un rôle sémantique :
<h1> pour un titre principal, <p> pour un paragraphe, <button> pour un bouton.
🔒 Illustration du chapitre completIncluse dans le cours complet, avec la méthode et les exercices corrigés.La voir gratuitement pendant 7 jours
🔒 Infographie récapitulative du chapitreIncluse dans le cours complet, avec la méthode et les exercices corrigés.La voir gratuitement pendant 7 jours
Un exemple corrigé
Exemple En reliant ce script à la page précédente :
const bouton = document.getElementById("btn-saluer");
const message = document.getElementById("message");
let compteur = 0;
bouton.addEventListener("click", function () {
compteur = compteur + 1;
message.textContent = "Bonjour ! (clic n° " + compteur + ")";
});document.getElementById() récupère un élément du DOM à partir de son id ; addEventListener("click", ...) associe une fonction à exécuter à chaque clic sur le bouton ; textContent modifie le texte affiché dans la page, sans recharger celle-ci.Les erreurs fréquentes à éviter
Piège. Trois rôles distincts : HTML (structure), CSS (style), JavaScript (interactivité). Ne les confonds pas.
L'astuce du prof
Astuce Le sélecteur
#message cible l'élément dont l'attribut id vaut message : un id doit être unique dans la page. Le sélecteur #btn-saluer:hover ne s'applique que lorsque la souris survole le bouton.Exercices corrigés
Cherche d'abord seul, puis ouvre la correction.
Exercice 1
Quel est le rôle respectif de HTML, CSS et JavaScript ?
Voir la correction
HTML structure, CSS met en forme, JavaScript rend la page interactive.
Exercice 2
À quoi sert JavaScript dans une page Web ?
Voir la correction
À réagir aux actions de l'utilisateur (clics, saisies) et modifier la page dynamiquement.