Dossier complet — Technologies Web

L1 · S2 · Outils numériques

Dossier pédagogique original Matrice MI. Contenu d’entraînement non officiel; il ne remplace pas le support ou la maquette d’un établissement.

Objectifs d’apprentissage

• Structurer une page avec HTML sémantique, des titres hiérarchisés, des liens et des formulaires compréhensibles.

• Mettre en forme une interface avec CSS, en mobilisant le modèle de boîte, Flexbox, Grid et les media queries.

• Écrire un JavaScript lisible qui sélectionne des éléments, réagit aux événements et met à jour le DOM sans régression.

• Décrire une interaction navigateur-serveur avec HTTP, ses méthodes, ses statuts, ses en-têtes et les enjeux de sécurité de base.

• Concevoir et évaluer un mini-site responsive, accessible et testable en justifiant ses choix techniques.

Prérequis

• Savoir manipuler des fichiers et des dossiers, un éditeur de texte et une ligne de commande élémentaire.

• Connaître les variables, conditions, fonctions et tableaux dans un langage de programmation débutant.

• Comprendre la notion de navigateur, d’URL et de fichier, sans supposer une expérience préalable du développement web.

Cours

1. HTML sémantique

Définition et méthode

HTML décrit la structure et le sens d’un document. Une balise sémantique annonce le rôle de son contenu : header, nav, main, article, section et footer sont préférables à une suite de div. Un seul h1 présente normalement la page ; les niveaux suivants suivent la hiérarchie, sans choisir un titre pour sa taille visuelle. Les liens servent à naviguer vers une ressource, les boutons à déclencher une action.

Exemple guidé résolu

Pour une page de présentation, on écrit :

<header><h1>Portfolio de Lina</h1></header>
<nav aria-label="Navigation principale"><a href="#projets">Projets</a></nav>
<main><section id="projets"><h2>Projets</h2><article><h3>Site vitrine</h3><p>...</p></article></section></main>

Le lien possède une destination identifiable et l’article a son propre titre. Un contrôle clavier vérifie que Tab atteint le lien et qu’Entrée l’active.

Limites et contrôle

Un div cliquable, un titre sauté ou un lien « cliquez ici » dégradent compréhension et accessibilité. Point de contrôle : chaque zone a-t-elle un rôle, chaque titre est-il ordonné, ?

Points-clés

• Les balises sémantiques portent le sens et facilitent la navigation.
• Les titres suivent une hiérarchie logique et les liens ne remplacent pas les boutons.
• Le test sans CSS et le parcours à Tab révèlent rapidement des défauts structurels.

2. CSS responsive

Modèle et stratégie

CSS associe des sélecteurs à des déclarations. Le modèle de boîte additionne contenu, padding, bordure et marge ; box-sizing: border-box rend la largeur annoncée plus prévisible. On commence par une mise en page fluide, puis on ajoute des contraintes avec Flexbox pour un axe principal et Grid pour des zones en lignes et colonnes.

Exemple guidé résolu

On veut deux cartes sur écran large et une seule colonne sous 48 rem :

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 48rem) { .cards { grid-template-columns: 1fr; } }

minmax(0, 1fr) évite qu’un contenu long force la colonne à déborder ; gap garde un espacement constant.

Erreurs et contrôle

Une largeur fixe excessive, des marges négatives ou un texte sans retour à la ligne causent un défilement horizontal. Le point de contrôle est mesurable : aucune barre horizontale à 320 px, contraste lisible, zoom à 200 % encore utilisable,.

Points-clés

• Le modèle de boîte et box-sizing déterminent les dimensions réellement rendues.
• Flexbox convient à un axe ; Grid convient à une grille de zones.
• Le responsive se vérifie avec petites largeurs, zoom et contenu long, pas seulement avec une maquette.

3. JavaScript et HTTP

Principe

JavaScript ajoute un comportement au document. Le DOM est l’arbre d’objets représentant le HTML ; querySelector sélectionne un nœud et addEventListener relie un événement à une fonction. Une interface prévisible sépare l’état (par exemple un compteur), son calcul et son rendu. Il faut attendre que les éléments existent, valider les entrées et éviter de construire du HTML avec des données non fiables.

Exemple guidé résolu

Pour incrémenter un compteur :

<button id="plus" type="button">Ajouter</button><output id="total">0</output>
<script>
let total = 0;
const output = document.querySelector('#total');
document.querySelector('#plus').addEventListener('click', () => {
  total += 1;
  output.value = String(total);
});
</script>

Un clic transforme l’état 0 en 1 puis rend la nouvelle valeur. type="button" évite une soumission involontaire dans un formulaire.

Limites et contrôle

Écouter un clic sur un div sans clavier, supposer qu’un sélecteur existe, ou utiliser innerHTML avec une saisie utilisateur sont des erreurs fréquentes. Point de contrôle : tester clic, touche Entrée, valeur vide et rechargement ; la console ne doit afficher aucune exception.

Points-clés

• Le DOM relie le code JavaScript aux éléments HTML visibles.
• Un état explicite et un rendu unique rendent les comportements testables.
• Les contrôles natifs, le clavier et la prudence avec innerHTML réduisent les erreurs et risques.

4. HTTP : comprendre la requête et la réponse

Échange client-serveur

HTTP est un protocole requête-réponse. Une requête contient une méthode, une cible, une version, des en-têtes et parfois un corps ; la réponse contient un statut, des en-têtes et un corps. GET demande une représentation sans modifier la ressource, POST transmet généralement une création ou une action. Un statut 200 indique une réussite, 201 une création, 404 une cible absente et 500 une erreur côté serveur.

Exemple guidé résolu

Pour charger /api/projets, le navigateur envoie GET /api/projets HTTP/1.1. Le serveur répond 200 OK avec Content-Type: application/json et [{"titre":"Portfolio"}]. Le code client peut alors parser ce corps ; si le statut vaut 404, il affiche un message de ressource introuvable plutôt que de traiter la réponse comme valide.

Limites et contrôle

HTTP ne garantit ni l’authentification ni la confidentialité : HTTPS, validation serveur et droits restent nécessaires. Point de contrôle : pour une requête donnée, identifier méthode, URL, statut, type de contenu et comportement prévu en cas d’échec.

Points-clés

• Une requête et une réponse HTTP ont des lignes, en-têtes et parfois un corps.
• Les méthodes et statuts expriment l’intention et le résultat, sans remplacer la sécurité.
• Le client doit tester les statuts avant de parser ou d’afficher les données.

5. Intégrer : accessibilité, performance et qualité

Méthode d’intégration

Un mini-site fiable combine structure, style et comportement sous forme de contrats vérifiables. On part des contenus et du parcours clavier, puis on ajoute une mise en page responsive et enfin les interactions non essentielles. L’accessibilité inclut des textes alternatifs pertinents, un focus visible, des labels associés aux champs et un contraste suffisant.

Exemple guidé résolu

Pour une image de portrait, alt="Lina Martin, développeuse front-end" informe si l’image apporte une information ; une image décorative reçoit alt="". Pour un formulaire, <label for="email">Adresse e-mail</label><input id="email" name="email" type="email" required> associe le nom, le type et une contrainte native.

Limites et contrôle

Un audit automatique ne détecte pas toute ambiguïté de texte,tout problème de clavier. Un correctif visuel qui cache le focus est une régression. Point de contrôle : journaliser trois tests reproductibles, vérifier les erreurs du formulaire et expliquer toute exception plutôt que de déclarer « accessible » sans preuve.

Points-clés

• L’intégration commence par les contenus et le clavier, puis ajoute style et comportement.
• Images, labels, focus et contraintes natives forment des critères observables.
• Les outils automatiques aident mais ne remplacent pas des tests humains et multi-écrans.

Exercices corrigés

Exercice 1 · Fondamental

Réécrire cette structure pour une page « Mes projets » : <div class="titre">Mes projets</div><div onclick="ouvrir()">Voir le projet</div>. Il faut un titre principal et un contrôle activable au clavier qui mène à projet.html.

Correction détaillée

1. Le premier div porte le contenu principal : on le remplace par <h1>Mes projets</h1>. 2. Le second élément navigue vers une ressource : on choisit un lien, pas un div cliquable. 3. La solution est <h1>Mes projets</h1><a href="projet.html">Voir le projet</a>. 4. Un lien natif reçoit le focus et répond à Entrée ; aucune gestion JavaScript du clic n’est nécessaire.

Exercice 2 · Fondamental

Écrire le CSS de .cartes pour obtenir trois colonnes égales avec un espace de 1 rem, puis une seule colonne à 600 px et moins. Les cartes ne doivent pas créer de débordement horizontal à cause d’un mot long.

Correction détaillée

1. On active Grid : .cartes { display: grid; }. 2. On répartit trois fractions avec grid-template-columns: repeat(3, minmax(0, 1fr));. 3. On ajoute gap: 1rem. 4. On prévoit le petit écran : @media (max-width: 600px) { .cartes { grid-template-columns: 1fr; } }. 5. minmax(0, 1fr) autorise la colonne à rétrécir ; on peut compléter par overflow-wrap: anywhere sur le texte si un identifiant sans espaces reste trop long.

Exercice 3 · Intermédiaire

Un formulaire contient #nom, #message et #retour. Écrire le JavaScript qui intercepte sa soumission, refuse un nom vide après suppression des espaces, puis affiche « Bonjour NOM » dans #retour sans injecter de HTML interprétable.

Correction détaillée

1. On récupère le formulaire et les éléments : const form = document.querySelector("#contact"); const nom = document.querySelector("#nom"); const retour = document.querySelector("#retour");. 2. On écoute submit et on bloque l’envoi : form.addEventListener("submit", event => { event.preventDefault(); ... });. 3. On normalise : const valeur = nom.value.trim();. 4. Si !valeur, on écrit retour.textContent = "Nom requis" et on arrête avec return. 5. Sinon, retour.textContent = Bonjour ${valeur};. textContent empêche que des balises saisies soient interprétées.

Exercice 4 · Intermédiaire

Écrire une fonction asynchrone chargerProjets() qui appelle /api/projets en GET, vérifie le statut HTTP, convertit le JSON et retourne le tableau. Elle doit lever une erreur explicite si le statut n’est pas dans la famille 200.

Correction détaillée

1. Déclarer async function chargerProjets() {. 2. Faire const reponse = await fetch("/api/projets", { method: "GET", headers: { Accept: "application/json" } });. 3. Tester if (!reponse.ok) throw new Error(HTTP ${reponse.status}); avant tout parsing. 4. Convertir avec const donnees = await reponse.json();. 5. Vérifier éventuellement if (!Array.isArray(donnees)) throw new Error("Format inattendu");. 6. Retourner donnees. Le code appelant utilise try/catch pour afficher un état d’erreur ; l’absence de réseau n’est pas confondue avec un tableau vide.

Exercice 5 · Avancé

Proposer un plan de correction priorisé pour une page qui contient : navigation en div cliquables, images sans alt, grille fixe de 1200 px, formulaire sans labels, script qui fait innerHTML avec un commentaire utilisateur et appel API sans contrôle de statut. Donner la correction, le test et la justification pour chaque défaut.

Correction détaillée

1. Navigation : remplacer les div par nav et des a href, puis tester Tab/Entrée ; cela rétablit le parcours clavier et le sens HTML. 2. Images : fournir un alt descriptif, ou alt="" si décoratives ; vérifier avec un lecteur d’écran ou sans images. 3. Grille : passer à Grid fluide avec minmax(0, 1fr) et une media query ; tester 320, 768 et 1440 px sans défilement horizontal. 4. Formulaire : associer chaque label for à un id, utiliser type et required, puis tester erreur et succès. 5. Injection : remplacer innerHTML par textContent pour le commentaire ; essayer <img onerror=...> et constater qu’il reste du texte. 6. API : vérifier response.ok, gérer catch et afficher un état d’erreur ; simuler 404 et panne réseau. Cette priorité traite d’abord clavier, injection et données, puis adaptation visuelle.

Quiz d’autoévaluation

Question 1

Quel élément est le plus adapté pour une navigation principale ?

✓ nav contenant des liens • div contenant des paragraphes • span avec un gestionnaire de clic • footer sans lien

Explication : nav exprime le rôle de navigation et des liens natifs offrent un parcours clavier et une destination explicite.

Question 2

Quelle propriété CSS transforme un conteneur en grille ?

• position: grid ✓ display: grid • grid: true • layout: columns

Explication : display: grid active le modèle Grid ; les colonnes et les lignes sont ensuite définies par des propriétés dédiées.

Question 3

Pourquoi utiliser textContent pour afficher une saisie utilisateur ?

• Pour exécuter les balises saisies • Pour convertir automatiquement en JSON ✓ Pour insérer du texte sans l’interpréter comme HTML • Pour envoyer la saisie au serveur

Explication : textContent crée un nœud textuel et n’interprète pas le contenu comme des balises, ce qui réduit le risque d’injection HTML.

Question 4

Quel statut indique généralement qu’une ressource demandée est absente ?

• 200 • 201 ✓ 404 • 500

Explication : 404 Not Found signale que le serveur ne trouve pas la représentation correspondant à la cible demandée.

Question 5

Quel est le premier test pertinent d’une interface accessible ?

• Désactiver JavaScript uniquement ✓ Parcourir tous les contrôles avec Tab • Changer la police en italique • Supprimer les titres

Explication : Le parcours à Tab révèle les contrôles inatteignables, l’ordre du focus et un focus éventuellement invisible.

Question 6

Dans une media query max-width: 48rem, quand la règle s’applique-t-elle ?

• À une largeur supérieure ou égale à 48 rem • Uniquement à 48 pixels ✓ À une largeur inférieure ou égale à 48 rem • Seulement en impression

Explication : max-width fixe une borne supérieure : la condition est vraie lorsque la largeur de la zone d’affichage ne dépasse pas 48 rem.

Question 7

Que faut-il faire avant de parser en JSON la réponse d’un fetch ?

✓ Vérifier response.ok ou le statut • Appeler deux fois response.json() • Remplacer la réponse par une chaîne vide • Forcer le statut à 200

Explication : Une réponse HTTP en erreur peut avoir un corps différent ; le contrôle du statut permet de choisir un traitement explicite avant le parsing.

Question 8

Quel attribut associe correctement un label à un champ ?

✓ Le for du label égal à l’id du champ • Le name du label égal au class du champ • Le title du formulaire égal au for • Un alt placé sur le label

Explication : label for="email" associé à input id="email" donne un nom accessible et agrandit la zone activable du champ.

Glossaire

• Accessibilité web — Conception permettant à des personnes, quelles que soient leurs capacités ou leurs outils, de percevoir, comprendre et utiliser une interface.
• DOM — Arbre d’objets construit par le navigateur à partir du document HTML et manipulable par JavaScript.
• Flexbox — Modèle CSS de disposition principalement unidimensionnel, organisé autour d’un axe principal et d’un axe secondaire.
• Grid CSS — Modèle CSS qui place des éléments dans des lignes et colonnes, avec des pistes explicites ou générées.
• HTTP — Protocole applicatif d’échange de requêtes et de réponses entre un client et un serveur web.
• Media query — Condition CSS permettant d’appliquer des règles selon des caractéristiques d’affichage comme la largeur ou le mode d’impression.
• Sémantique HTML — Choix de balises dont le nom exprime le rôle et la structure du contenu, au-delà de son apparence.
• Responsive design — Approche qui adapte contenu, dimensions et disposition à plusieurs écrans et contextes d’utilisation.

TP · Mini-cas : portfolio responsive d’une étudiante

Lina veut publier un portfolio statique présentant trois projets, ses compétences et un moyen de contact. Le site doit rester lisible sur mobile, être parcourable au clavier et signaler proprement une erreur de formulaire simulée.

Objectifs

• Structurer trois pages ou sections avec HTML sémantique et navigation cohérente.

• Construire une grille responsive qui ne déborde pas entre 320 px et 1440 px.

• Ajouter un formulaire avec labels, validation native et message rendu par JavaScript.

• Documenter des tests d’accessibilité, de comportement et de réponse HTTP simulée.

Étapes

1. Créer l’arborescence HTML avec header, nav, main, sections titrées, articles et footer.

2. Écrire le CSS mobile-first : largeur fluide, Grid ou Flexbox, focus visible, contraste et media query.

3. Ajouter le formulaire puis son script : validation, preventDefault, textContent et messages distincts.

4. Simuler une récupération de projets avec fetch ou un fichier JSON ; gérer succès, 404 et absence de réseau.

5. Tester 320/768/1440 px, Tab/Entrée, zoom 200 %, champs invalides et console, puis corriger les défauts.

Livrables attendus

• Un dossier contenant HTML, CSS, JavaScript et données JSON lisibles.

• Un README de 1 à 2 pages avec choix, commandes de lancement et tableau de tests.

• Trois captures ou relevés de tests : mobile, clavier et erreur réseau/formulaire.

Critères d’évaluation

• Structure et navigation : 25 %, titres, liens, labels et ordre du DOM vérifiables.

• Responsive et lisibilité : 25 %, absence de débordement, grille adaptée, contraste et focus.

• Comportement : 25 %, validation, rendu sûr, états de chargement et erreurs HTTP traités.

• Qualité : 25 %, code factorisé, messages clairs, README reproductible et tests effectivement réalisés.

Piste de résolution

Commencer par un HTML sémantique fonctionnel sans CSS, puis ajouter une grille à une colonne par défaut et deux ou trois colonnes au large. Utiliser des liens et boutons natifs, un label par champ, textContent pour les messages et response.ok avant json(). Prévoir un état de chargement, un état vide et un état d’erreur. Le README consigne les largeurs testées, les touches utilisées et les résultats observés ; il ne suffit pas d’affirmer que le site est accessible.

Sujets originaux d’entraînement (non officiels)

Sujet original de préparation — session normale

Sujet original non officiel, créé pour l’entraînement ; il ne reproduit ni ne prétend reproduire une épreuve d’années passées.

Exercice 1

Construire le squelette HTML d’une fiche de projet avec un titre, une image, une description, un lien de retour et une zone de navigation. Justifier les balises choisies.

Correction : On place un header avec h1, un nav contenant un lien, puis main avec article, h2, img et p, enfin footer. L’image reçoit un alt descriptif si elle apporte une information. Le lien de retour est un a href, donc atteignable au clavier. On vérifie l’unicité de h1, l’ordre h1-h2, la présence de main et l’absence de div utilisé comme bouton.

Exercice 2

Écrire une mise en page CSS pour une liste de cartes en trois colonnes, puis une colonne sous 48 rem. Expliquer comment vérifier le résultat.

Correction : On écrit .liste { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }, puis @media (max-width:48rem){ .liste { grid-template-columns:1fr; } }. La racine peut utiliser box-sizing:border-box. On redimensionne à 1200, 768 et 320 px, on ajoute un texte long et on constate l’absence de défilement horizontal. On contrôle aussi le focus et le contraste.

Exercice 3

Analyser ce flux : le navigateur demande /api/projets, reçoit 404, puis le script appelle quand même response.json() et affiche la liste vide. Corriger la logique.

Correction : Un 404 n’est pas une liste vide. Après const response = await fetch("/api/projets"), on teste if (!response.ok) { throw new Error(HTTP ${response.status}); }, puis seulement const projets = await response.json(). Un try/catch affiche « projets indisponibles » dans un élément textuel sûr. Le test utilise une URL absente et vérifie le message, la console et l’absence de carte fictive.

Sujet original de préparation — session de rattrapage

Sujet original non officiel, créé pour l’entraînement ; il ne reproduit ni ne prétend reproduire une épreuve d’années passées.

Exercice 1

Un formulaire contient un champ e-mail sans label et un bouton de type submit placé dans une carte. Proposer le HTML corrigé et deux tests clavier.

Correction : On écrit <label for="courriel">Courriel</label><input id="courriel" name="courriel" type="email" required><button type="submit">Envoyer</button>. Le label est relié par for/id, type=email et required fournissent une première validation. Test 1 : Tab atteint le champ puis le bouton dans un ordre logique. Test 2 : Entrée avec champ vide déclenche le message natif, puis une adresse valide permet la soumission interceptée.

Exercice 2

Expliquer la différence entre un lien et un bouton dans une interface, puis convertir un contrôle div onclick="filtrer()" en solution robuste.

Correction : Un lien change de ressource ou de position et porte un href; un bouton déclenche une action dans la page. Si filtrer modifie l’affichage sans navigation, on utilise <button type="button" id="filtrer">Filtrer</button>, puis document.querySelector("#filtrer").addEventListener("click", filtrer). Le bouton est naturellement accessible au clavier ; on teste Tab et Entrée, et on vérifie que le filtre met à jour un texte d’état.

Exercice 3

Décrire un diagnostic complet d’un site dont la page mobile déborde, le focus est invisible et le commentaire utilisateur est injecté avec innerHTML.

Correction : D’abord reproduire à 320 px et inspecter l’élément dépassant ; remplacer les largeurs fixes par une grille fluide et utiliser overflow-wrap si nécessaire. Ensuite rétablir un style :focus-visible contrasté et tester Tab à 200 % de zoom. Enfin remplacer innerHTML par textContent, puis essayer une chaîne contenant une balise et vérifier qu’elle est affichée comme texte. On consigne avant/après, les dimensions et les résultats, sans confondre correctif visuel et preuve de sécurité.

Parcours de révision sur quatre semaines

Semaine 1 · HTML sémantique et accessibilité de base

Reprendre une page en div, la structurer avec titres, landmarks, liens et formulaire ; la tester sans CSS puis entièrement au clavier. Avant de terminer, reformule les notions sans tes notes, vérifie les résultats dans le cours et note une difficulté précise à reprendre la semaine suivante.

Semaine 2 · CSS responsive et modèle de boîte

Construire une grille de cartes mobile-first et la vérifier à 320, 768 et 1440 px avec contenu long, zoom et focus visible. Avant de terminer, reformule les notions sans tes notes, vérifie les résultats dans le cours et note une difficulté précise à reprendre la semaine suivante.

Semaine 3 · JavaScript, DOM et HTTP

Coder un formulaire et un chargement JSON ; simuler succès, 404 et panne réseau en contrôlant les statuts et en évitant innerHTML. Avant de terminer, reformule les notions sans tes notes, vérifie les résultats dans le cours et note une difficulté précise à reprendre la semaine suivante.

Semaine 4 · Intégration et entraînement

Réaliser le mini-portfolio, exécuter la grille de tests, corriger les défauts puis résoudre un sujet original en temps limité. Avant de terminer, reformule les notions sans tes notes, vérifie les résultats dans le cours et note une difficulté précise à reprendre la semaine suivante.