Leçon 1 : Rappels sur les généralités en HTML
et JavaScript
AZAO DOGO DAVID
Enseignant d’informatique
Septembre 2025
1 Introduction
Ce document présente une leçon introductive sur les bases de HTML
et JavaScript, deux langages essentiels pour le développement web. HTML
structure le contenu des pages web, tandis que JavaScript ajoute de linte-
ractivité. Cette leçon vise à fournir une compréhension claire des concepts
fondamentaux tout en clarifiant les zones dombre souvent mal comprises par
les apprenants.
2 Objectifs
À la fin de cette leçon, lapprenant sera capable de :
— Structurer une page web simple avec des balises HTML.
— Ajouter des fonctionnalités interactives avec JavaScript.
— Identifier et corriger les erreurs courantes liées à lutilisation de HTML
et JavaScript.
3 Prérequis
— Connaissance de base en informatique (édition de texte, navigation
web).
— Aucune expérience préalable en programmation nest nécessaire.
1
4 Durée
2 heures (1 heure de théorie, 1 heure de pratique).
5 Contenu de la leçon
Généralités sur HTML
HTML (HyperText Markup Language) est le langage de balisage utilisé
pour structurer le contenu web. Il organise le texte, les images et les liens,
tandis que CSS gère la présentation et JavaScript linteractivité.
Structure de base dun document HTML
Un document HTML commence par une déclaration <!DOCTYPE html>,
suivie de la balise racine <html>. Voici un exemple :
1 <! DOCTYPE html >
2 < html lang = " fr " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Ma première page </ title >
6 </ head >
7 < body >
8 < h1 > Bienvenue </ h1 >
9 <p > Ceci est une page web simple . </ p >
10 </ body >
11 </ html >
Zone dombre : Importance de <!DOCTYPE html> Sans <!DOCTYPE
html>, le navigateur peut passer en mode "quirks", provoquant des incohé-
rences dans laffichage. En HTML4, les déclarations étaient complexes, mais
HTML5 simplifie avec une déclaration unique. Une erreur courante est do-
mettre lattribut lang dans <html>, qui améliore laccessibilité.
Balises essentielles
— Titres : <h1> à <h6> pour hiérarchiser le contenu.
— Paragraphes : <p> pour le texte.
— Liens : <a href="[Link]
— Images : <img src="[Link]" alt="Description">, où alt est
crucial pour laccessibilité.
— Listes : <ul> (non ordonnée), <ol> (ordonnée), avec <li>.
2
Zone dombre : Balises sémantiques HTML5 introduit des balises
comme <header>, <footer>, <article>, et <section> pour une structure
sémantique. Une confusion fréquente concerne lusage de <div> au lieu de
balises sémantiques, ce qui nuit au référencement et à laccessibilité.
Généralités sur JavaScript
JavaScript est un langage de programmation qui permet dajouter de lin-
teractivité (e.g., alertes, modifications dynamiques) aux pages web.
Intégration de JavaScript
JavaScript peut être inclus :
— Dans une balise <script> : <script>[Link](’Test’);</script>.
— Via un fichier externe : <script src="[Link]"></script>.
Zone dombre : async vs defer Lattribut async charge le script en
parallèle, mais lexécute dès quil est prêt, ce qui peut perturber lordre dexécu-
tion. defer attend que le DOM soit complètement chargé, préservant lordre.
Une erreur courante est de placer <script> dans <head> sans defer, ce qui
ralentit le chargement.
Concepts fondamentaux
— Variables : let et const sont préférés à var pour éviter les problèmes
de portée.
— Fonctions : Définies avec function nom() { } ou const nom = ()
=> { }.
— Événements : e.g., onclick="maFonction()" pour réagir à un clic.
Exemple :
1 < script >
2 function afficherMessage () {
3 document . getElementById ( " texte " ) . innerHTML = " Clic
détecté ! " ;
4 }
5 </ script >
6 <p id = " texte " > Texte initial </ p >
7 < button onclick = " afficherMessage () " > Cliquer </ button >
Zone dombre : Hoisting et comparaisons Le "hoisting" fait remonter
les déclarations (pas les initialisations), causant des erreurs comme undefined.
Par exemple, [Link](x); var x = 5; affiche undefined. De plus, ==
3
(comparaison avec conversion de type) vs === (comparaison stricte) peut
créer des bugs, e.g., "5" == 5 est vrai, mais "5" === 5 est faux.
6 Activités pratiques
— Créer une page HTML avec un en-tête, un paragraphe, une liste et
un lien.
— Ajouter un script JavaScript qui affiche une alerte au clic dun bouton.
— Modifier le texte dun paragraphe via JavaScript en utilisant getElementById.
7 Évaluation
— Quiz : 5 questions sur les balises HTML et les concepts JavaScript.
— Pratique : Soumettre une page web fonctionnelle démontrant lusage
de HTML et JavaScript.
8 Conclusion
Cette leçon pose les bases du développement web, avec un focus sur la
pratique et la clarification des zones dombre pour une compréhension appro-
fondie.