Prérequis : savoir créer un fichier texte. Chaque correction est un document complet : enregistrez-le sous exercice.html puis ouvrez-le dans un navigateur. Aucun serveur ni bibliothèque n’est nécessaire. Les formulaires GET servent seulement à observer la validation et les paramètres ; ils n’enregistrent aucune inscription. Utilisez des données fictives. Les exercices privilégient la structure, les libellés et l’utilisation au clavier.
Méthode : répondez à la question de cours, réalisez l’exercice, puis ouvrez le corrigé et vérifiez les cas proposés. Comptez 10 à 25 minutes par exercice et 45 à 60 minutes pour le mini-projet.
20 exercices · 20 questions de cours · 20 corrigés
Les bases du document
1
Le document HTML
Question de cours. À quoi servent le doctype, lang et le titre du document ?
À réaliser. Créer la page d’accueil NKILItech avec un titre de page et un titre principal.
Voir le corrigé 1Masquer le corrigé 1
Réponse et raisonnement. Le doctype active le mode standard. lang indique la langue aux outils de lecture. title nomme l’onglet ; h1 présente le sujet dans la page. Ils ont des rôles différents.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le document HTML : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Le document HTML.">
</head>
<body>
<h1>Bienvenue chez NKILItech</h1>
<p>Des formations pour apprendre en pratiquant.</p>
</body>
</html>
Résultat attendu et vérification.
L’onglet porte un titre, la page affiche un seul titre principal.
2
Organiser les titres
Question de cours. Pourquoi choisir un niveau de titre selon la structure plutôt que sa taille ?
À réaliser. Présenter une formation HTML avec deux sections : objectifs et programme, puis un sous-thème formulaires.
Voir le corrigé 2Masquer le corrigé 2
Réponse et raisonnement. Les titres constituent le plan du document. h2 désigne une section de h1 ; h3 détaille un h2. La taille visuelle se règle en CSS.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Organiser les titres : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Organiser les titres.">
</head>
<body>
<h1>Formation HTML</h1>
<h2>Objectifs</h2><p>Construire une page accessible.</p>
<h2>Programme</h2><h3>Formulaires</h3><p>Recueillir une demande.</p>
</body>
</html>
Résultat attendu et vérification.
Le plan contient h1, deux h2 et un h3 rattaché au programme.
3
Donner du sens au texte
Question de cours. Quelle différence entre strong et em ?
À réaliser. Rédiger une consigne avec une information importante et un mot accentué dans la phrase.
Voir le corrigé 3Masquer le corrigé 3
Réponse et raisonnement. strong marque une importance ; em une emphase qui peut modifier le sens de la phrase. Aucun ne doit servir seulement à obtenir un style visuel.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Donner du sens au texte : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Donner du sens au texte.">
</head>
<body>
<h1>Consigne de remise</h1>
<p><strong>La remise se termine vendredi.</strong> Envoyez votre <em>propre</em> solution.</p>
</body>
</html>
Résultat attendu et vérification.
Le texte reste intelligible si tous les styles sont désactivés.
4
Créer une navigation interne
Question de cours. Quelle relation unit un fragment de lien et un identifiant ?
À réaliser. Créer un lien vers la section programme de la même page et un lien vers la documentation HTML.
Voir le corrigé 4Masquer le corrigé 4
Réponse et raisonnement. Le fragment doit correspondre exactement à un id unique. Un texte de lien explicite reste compréhensible hors de la phrase.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Créer une navigation interne : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Créer une navigation interne.">
</head>
<body>
<h1>Atelier NKILItech</h1>
<nav aria-label="Dans cette page"><a href="#programme">Consulter le programme</a></nav>
<h2 id="programme">Programme</h2><p>Structure et formulaires.</p>
<a href="https://developer.mozilla.org/fr/docs/Web/HTML">Documentation HTML de MDN</a>
</body>
</html>
Résultat attendu et vérification.
Le clic sur Programme ajoute #programme à l’adresse et atteint le bon titre.
5
Choisir une liste
Question de cours. Quand employer ul, ol et dl ?
À réaliser. Afficher trois étapes d’inscription, deux prérequis et une définition de HTML.
Voir le corrigé 5Masquer le corrigé 5
Réponse et raisonnement. ol encode un ordre significatif ; ul regroupe des éléments sans ordre imposé ; dl associe termes et descriptions. Des paragraphes séparés par des tirets ne portent pas ces relations.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Choisir une liste : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Choisir une liste.">
</head>
<body>
<h1>Préparer son inscription</h1>
<ol><li>Choisir une formation</li><li>Remplir le formulaire</li><li>Vérifier les informations</li></ol>
<ul><li>Un navigateur</li><li>Un éditeur de texte</li></ul>
<dl><dt>HTML</dt><dd>Langage de balisage structurant les documents du Web.</dd></dl>
</body>
</html>
Résultat attendu et vérification.
Les étapes sont numérotées automatiquement ; HTML est associé à sa définition.
Structure et données
6
Structurer une page sémantique
Question de cours. Quels rôles jouent header, nav, main et footer ?
À réaliser. Composer une page institutionnelle avec une navigation et une section de présentation.
Voir le corrigé 6Masquer le corrigé 6
Réponse et raisonnement. Ces éléments décrivent les zones de la page. main contient son contenu dominant ; ici un seul main est nécessaire. header et footer ne remplacent pas les titres.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Structurer une page sémantique : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Structurer une page sémantique.">
</head>
<body>
<header><p>NKILItech</p><nav aria-label="Principale"><a href="#presentation">Présentation</a></nav></header>
<main><h1>Notre centre de formation</h1><section id="presentation"><h2>Présentation</h2><p>Des ateliers accompagnés.</p></section></main>
<footer><p>NKILItech : Formation et accompagnement</p></footer>
</body>
</html>
Résultat attendu et vérification.
La navigation vise une section existante et le contenu principal est délimité.
7
Décrire une image
Question de cours. Quand un texte alternatif vide est-il adapté ?
À réaliser. Afficher une illustration informative et expliquer le cas d’une décoration.
Voir le corrigé 7Masquer le corrigé 7
Réponse et raisonnement. Une image informative reçoit un alt équivalent à son information utile. Une décoration redondante reçoit alt="". Ici le SVG est intégré dans une URL de données : aucun fichier externe n’est nécessaire.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Décrire une image : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Décrire une image.">
</head>
<body>
<h1>Les étapes de notre atelier</h1>
<figure><img width="300" height="80" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='80'%3E%3Ctext x='10' y='45'%3EObserver → coder → tester%3C/text%3E%3C/svg%3E" alt="Trois étapes : observer, coder, puis tester."><figcaption>Une démarche de travail progressive.</figcaption></figure>
</body>
</html>
Résultat attendu et vérification.
L’information reste disponible si l’image ne s’affiche pas ; les dimensions sont réservées.
8
Rendre un tableau compréhensible
Question de cours. À quoi servent caption et scope ?
À réaliser. Présenter les durées de HTML (6 h) et Angular (12 h) dans un tableau de données.
Voir le corrigé 8Masquer le corrigé 8
Réponse et raisonnement. caption nomme le tableau ; les cellules th avec scope décrivent les relations entre en-têtes et données. Un tableau sert aux données, pas à disposer les blocs de la page.
Chaque durée est reliée à son atelier et à l’en-tête Durée.
9
Associer une étiquette
Question de cours. Pourquoi un placeholder ne remplace-t-il pas un label ?
À réaliser. Créer un formulaire d’adresse électronique obligatoire avec un libellé visible.
Voir le corrigé 9Masquer le corrigé 9
Réponse et raisonnement. Le placeholder disparaît pendant la saisie. Le label reste visible et son for correspond à l’id du champ. name définit la clé envoyée ; id identifie l’élément dans la page.
Un courriel invalide empêche la validation native. Un courriel valide apparaît dans l’URL après soumission.
10
Différencier les boutons
Question de cours. Quel est le type par défaut d’un button associé à un formulaire ?
À réaliser. Ajouter un bouton de soumission et un bouton ordinaire sans déclencher deux soumissions.
Voir le corrigé 10Masquer le corrigé 10
Réponse et raisonnement. Le type par défaut est submit dans ce contexte. Déclarer type="button" évite une soumission accidentelle. Ce bouton ordinaire n’a aucune action sans logique associée.
Seul Valider soumet le formulaire ; le second bouton ne recharge pas la page.
Formulaires
11
Regrouper des choix
Question de cours. Pourquoi employer fieldset et legend pour un groupe de radios ?
À réaliser. Proposer deux modes de formation exclusifs : à distance ou en salle.
Voir le corrigé 11Masquer le corrigé 11
Réponse et raisonnement. legend nomme le groupe. Des radios de même name sont exclusives ; chaque value distingue le choix envoyé. Les id restent distincts pour les labels.
Choisir En salle décoche À distance ; l’URL contient mode=salle.
12
Valider une quantité
Question de cours. La validation HTML garantit-elle la validité côté serveur ?
À réaliser. Demander entre 1 et 5 places entières, avec une valeur obligatoire.
Voir le corrigé 12Masquer le corrigé 12
Réponse et raisonnement. min, max et step encadrent la saisie côté navigateur. Ils peuvent être contournés : le serveur doit refaire ces contrôles avant tout enregistrement.
0, 6 et 1,5 sont invalides ; 1 et 5 sont acceptés.
13
Sélection et texte libre
Question de cours. Pourquoi donner une valeur vide à l’option d’invite ?
À réaliser. Demander une formation obligatoire puis un objectif de 300 caractères maximum.
Voir le corrigé 13Masquer le corrigé 13
Réponse et raisonnement. Une option initiale vide impose un vrai choix avec required. maxlength limite la longueur saisie ; une limite côté serveur reste nécessaire. textarea conserve les retours à la ligne.
Sans formation, la soumission est bloquée. Un objectif vide est autorisé.
14
Expliquer GET et POST
Question de cours. POST chiffre-t-il les données ? Quand choisir GET ?
À réaliser. Réaliser une recherche de formation sans modification de données.
Voir le corrigé 14Masquer le corrigé 14
Réponse et raisonnement. GET convient à une consultation partageable ; les paramètres figurent dans l’URL. POST transmet normalement des données dans le corps, mais ne les chiffre pas : le chiffrement du transport dépend de HTTPS. Un traitement réel nécessite un serveur.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expliquer GET et POST : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Expliquer GET et POST.">
</head>
<body>
<h1>Rechercher un atelier</h1><form method="get"><label for="q">Mot-clé</label><input id="q" name="q" type="search"><button type="submit">Construire la requête</button></form><p>Exercice : observer l’URL ; aucun moteur de recherche n’est raccordé.</p>
</body>
</html>
Résultat attendu et vérification.
Saisir kotlin donne un paramètre q=kotlin dans l’adresse.
15
Afficher du code
Question de cours. Pourquoi échapper les chevrons dans un exemple HTML ?
À réaliser. Afficher littéralement une balise de paragraphe sans qu’elle soit interprétée.
Voir le corrigé 15Masquer le corrigé 15
Réponse et raisonnement. pre préserve l’espacement ; code identifie du code. Les entités < et > représentent des caractères visibles. Sans échappement, le navigateur créerait de vrais éléments.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Afficher du code : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Afficher du code.">
</head>
<body>
<h1>Lire un exemple HTML</h1>
<pre><code><p>Bonjour NKILItech</p></code></pre>
</body>
</html>
Résultat attendu et vérification.
La page affiche les caractères <p> et </p> autour du texte.
Accessibilité et mini-projet
16
Construire une FAQ native
Question de cours. Quel élément donne son nom à un details ?
À réaliser. Créer une question dont la réponse peut être ouverte au clavier sans JavaScript.
Voir le corrigé 16Masquer le corrigé 16
Réponse et raisonnement. summary est le libellé interactif de details. Sans attribut open, la réponse est initialement repliée ; le navigateur assure le comportement de base.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Construire une FAQ native : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Construire une FAQ native.">
</head>
<body>
<h1>Questions fréquentes</h1><details><summary>Faut-il déjà savoir programmer ?</summary><p>Le parcours HTML commence par les bases.</p></details>
</body>
</html>
Résultat attendu et vérification.
Tab atteint la question ; Entrée ou Espace ouvre et ferme la réponse.
17
Préparer les métadonnées
Question de cours. Quelle différence entre description et canonical ?
À réaliser. Ajouter une description précise à une fiche de formation et expliquer le canonical.
Voir le corrigé 17Masquer le corrigé 17
Réponse et raisonnement. La description résume le contenu et peut servir d’extrait de recherche, sans garantie. Le canonical désigne une URL préférée pour des contenus équivalents ; il ne doit pas pointer arbitrairement vers l’accueil. Pour ce fichier local, aucun canonical de production n’est inventé.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Préparer les métadonnées : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Préparer les métadonnées.">
</head>
<body>
<h1>Atelier HTML accessible</h1><p>Construire une page structurée et un formulaire correctement étiqueté.</p>
</body>
</html>
Résultat attendu et vérification.
Inspecter le head : encodage UTF-8, viewport, title et description sont présents.
18
Utiliser des dates lisibles par machine
Question de cours. Pourquoi distinguer la date affichée de datetime ?
À réaliser. Annoncer un atelier le 15 novembre 2026 à 10 h, heure de Paris en hiver.
Voir le corrigé 18Masquer le corrigé 18
Réponse et raisonnement. Le texte est adapté au lecteur ; datetime utilise une représentation normalisée avec son décalage horaire. Le décalage +01:00 correspond ici à l’heure d’hiver de Paris.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Utiliser des dates lisibles par machine : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Utiliser des dates lisibles par machine.">
</head>
<body>
<h1>Prochain atelier</h1><p>Rendez-vous le <time datetime="2026-11-15T10:00:00+01:00">15 novembre 2026 à 10 h (Paris)</time>.</p>
</body>
</html>
Résultat attendu et vérification.
La date visible est française ; l’attribut comprend année, mois, jour, heure et fuseau.
19
Réparer un formulaire inaccessible
Question de cours. Pourquoi cliquer sur un div ne remplace-t-il pas un vrai bouton ?
À réaliser. Remplacer un champ sans étiquette et un faux bouton par des éléments natifs.
Voir le corrigé 19Masquer le corrigé 19
Réponse et raisonnement. Un bouton natif est activable au clavier et possède un rôle reconnu. Le champ a un label explicite ; aria-describedby relie l’aide complémentaire sans remplacer le libellé.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Réparer un formulaire inaccessible : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Réparer un formulaire inaccessible.">
</head>
<body>
<h1>Contacter NKILItech</h1><form method="get"><label for="message">Message</label><p id="aide">Ne saisissez aucune donnée confidentielle dans cette démonstration.</p><textarea id="message" name="message" aria-describedby="aide" required></textarea><button type="submit">Vérifier le message</button></form>
</body>
</html>
Résultat attendu et vérification.
Au clavier, le champ puis le bouton sont atteignables ; l’aide est liée au champ.
20
Mini-projet : fiche de formation
Question de cours. Quelles vérifications faire avant de publier une page HTML ?
À réaliser. Assembler une fiche Kotlin avec objectifs, durée, prérequis et formulaire de demande locale. Fournir un plan cohérent et tous les labels.
Voir le corrigé 20Masquer le corrigé 20
Réponse et raisonnement. La solution regroupe les acquis sans ajouter de dépendance. Vérifier les titres, les liens, les labels, les champs obligatoires et la langue. Ce prototype ne réalise ni paiement ni inscription : il faut ensuite un service serveur adapté.
Programme complet
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini-projet : fiche de formation : NKILItech</title>
<meta name="description" content="Exercice pratique NKILItech : Mini-projet : fiche de formation.">
</head>
<body>
<header><p>NKILItech</p><nav aria-label="Dans la fiche"><a href="#demande">Demander le programme</a></nav></header><main><h1>Atelier Kotlin</h1><section><h2>Objectifs</h2><ul><li>Manipuler les collections</li><li>Gérer les valeurs nulles</li></ul><h2>Informations pratiques</h2><dl><dt>Durée</dt><dd>12 heures</dd><dt>Prérequis</dt><dd>Bases de programmation</dd></dl></section><section id="demande"><h2>Demande de programme</h2><form method="get"><label for="contact">Courriel</label><input id="contact" name="contact" type="email" required autocomplete="email"><button type="submit">Vérifier la demande</button></form><p>Prototype local, sans enregistrement.</p></section></main><footer><p>NKILItech : Apprendre par la pratique</p></footer>
</body>
</html>
Résultat attendu et vérification.
Tester une adresse invalide puis valide, le lien de navigation et le parcours complet au clavier.