Exercices - Interactions homme-machine sur le Web¶
HTML et CSS¶
Exercice 1 - Analyse d'une page HTML¶
Soit le code HTML suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Mon site</title>
</head>
<body>
<h1 id="principal">Accueil</h1>
<p class="intro">Bienvenue sur <strong>mon site</strong>.</p>
<ul>
<li><a href="cours.html">Cours</a></li>
<li><a href="exercices.html">Exercices</a></li>
</ul>
<img src="logo.png" alt="Logo du site">
</body>
</html>
a. Combien de balises différentes sont utilisées dans le <body> ? Les lister.
b. Quel est le rôle de l'attribut alt dans la balise <img> ?
c. Quelle est la différence entre id="principal" et class="intro" ?
d. Dessiner l'arbre DOM simplifié de cette page (à partir de <body>).
Solution
a. 7 balises différentes dans le body : <h1>, <p>, <strong>, <ul>, <li>, <a>, <img>.
b. L'attribut alt fournit un texte alternatif qui décrit l'image. Il est affiché si l'image ne se charge pas et est lu par les lecteurs d'écran pour les personnes malvoyantes. Il est obligatoire.
c. id est un identifiant unique dans la page (un seul élément peut l'avoir), tandis que class peut être attribuée à plusieurs éléments. En CSS, on cible un id avec #principal et une classe avec .intro.
d.
Exercice 2 - Écrire du HTML¶
a. Écrire le code HTML d'une page contenant :
- un titre principal « Mon CV »
- un sous-titre « Formation »
- une liste ordonnée de 3 diplômes
- un lien vers « https://www.example.com » avec le texte « Mon portfolio »
b. Ajouter un tableau à deux colonnes (Compétence / Niveau) avec 3 lignes de données.
Solution
a.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Mon CV</title>
</head>
<body>
<h1>Mon CV</h1>
<h2>Formation</h2>
<ol>
<li>Baccalauréat général - Spécialité NSI</li>
<li>BTS Informatique</li>
<li>Licence Informatique</li>
</ol>
<a href="https://www.example.com">Mon portfolio</a>
</body>
</html>
b.
Exercice 3 - Sélecteurs CSS¶
Soit le code HTML :
<body>
<h1>Titre</h1>
<p class="important">Premier paragraphe.</p>
<p>Deuxième paragraphe.</p>
<div id="section1">
<p class="important">Troisième paragraphe.</p>
<p>Quatrième paragraphe.</p>
</div>
</body>
Pour chacune des règles CSS suivantes, indiquer quels éléments sont ciblés :
a. p { color: blue; }
b. .important { font-weight: bold; }
c. #section1 { background: yellow; }
d. #section1 p { font-style: italic; }
e. #section1 .important { text-decoration: underline; }
Solution
a. Tous les paragraphes (1er, 2e, 3e et 4e) sont en bleu.
b. Le 1er et le 3e paragraphes (ceux qui ont class="important") sont en gras.
c. Le <div> avec id="section1" a un fond jaune.
d. Le 3e et le 4e paragraphes (les <p> situés à l'intérieur du <div id="section1">) sont en italique.
e. Le 3e paragraphe uniquement (le <p class="important"> situé dans #section1) est souligné.
JavaScript et événements¶
Exercice 4 - Variables et types JavaScript¶
a. Traduire le code Python suivant en JavaScript :
nom = "Alice"
age = 17
moyenne = 14.5
est_admis = True
print(f"{nom} a {age} ans, moyenne : {moyenne}")
b. Quelle est la différence entre let et const en JavaScript ?
c. Pourquoi faut-il utiliser === plutôt que == en JavaScript ?
Solution
a.
let nom = "Alice";
let age = 17;
let moyenne = 14.5;
let estAdmis = true;
console.log(nom + " a " + age + " ans, moyenne : " + moyenne);
b. let déclare une variable dont la valeur peut être modifiée après la déclaration. const déclare une constante dont la valeur ne peut pas être réassignée après la déclaration.
c. L'opérateur == effectue une conversion de types avant la comparaison, ce qui peut donner des résultats surprenants : 0 == "" vaut true, null == undefined vaut true. L'opérateur === compare la valeur et le type sans conversion, ce qui est plus fiable : 0 === "" vaut false.
Exercice 5 - Manipulation du DOM¶
On dispose du code HTML suivant :
<h1 id="titre">Bienvenue</h1>
<p id="description">Ceci est une page de test.</p>
<button id="btnChanger">Changer</button>
a. Écrire le code JavaScript qui, au clic sur le bouton, remplace le texte du titre par « Page modifiée » et change sa couleur en rouge.
b. Modifier le code pour qu'un second clic remette le titre à son état initial (texte « Bienvenue », couleur noire).
Solution
a.
let bouton = document.getElementById("btnChanger");
let titre = document.getElementById("titre");
bouton.addEventListener("click", function() {
titre.textContent = "Page modifiée";
titre.style.color = "red";
});
b.
let bouton = document.getElementById("btnChanger");
let titre = document.getElementById("titre");
let modifie = false;
bouton.addEventListener("click", function() {
if (modifie) {
titre.textContent = "Bienvenue";
titre.style.color = "black";
} else {
titre.textContent = "Page modifiée";
titre.style.color = "red";
}
modifie = !modifie;
});
Exercice 6 - Événements¶
a. Écrire le code HTML et JavaScript d'une page contenant un paragraphe qui affiche les coordonnées de la souris (position X, Y) en temps réel quand la souris se déplace sur la page.
b. Ajouter un compteur qui affiche le nombre total de clics effectués sur la page.
Solution
a.
let affichage = document.getElementById("coords");
document.addEventListener("mousemove", function(e) {
affichage.textContent = "Position : X=" + e.clientX + ", Y=" + e.clientY;
});
b.
let affichage = document.getElementById("coords");
let affClics = document.getElementById("nbClics");
let clics = 0;
document.addEventListener("mousemove", function(e) {
affichage.textContent = "Position : X=" + e.clientX + ", Y=" + e.clientY;
});
document.addEventListener("click", function() {
clics++;
affClics.textContent = clics;
});
Exercice 7 - Liste dynamique¶
On souhaite créer une page avec un champ de saisie et un bouton « Ajouter ». À chaque clic sur le bouton, le texte saisi est ajouté comme nouvel élément d'une liste <ul>.
a. Écrire le code HTML (champ, bouton, liste vide).
b. Écrire le code JavaScript correspondant. La liste vide au départ se remplit à chaque ajout.
c. Ajouter une vérification : le champ ne doit pas être vide pour pouvoir ajouter un élément.
Solution
a.
<input type="text" id="saisie" placeholder="Nouvel élément">
<button id="btnAjouter">Ajouter</button>
<ul id="maListe"></ul>
b.
let champ = document.getElementById("saisie");
let bouton = document.getElementById("btnAjouter");
let liste = document.getElementById("maListe");
bouton.addEventListener("click", function() {
let texte = champ.value;
let li = document.createElement("li");
li.textContent = texte;
liste.appendChild(li);
champ.value = "";
});
c.
let champ = document.getElementById("saisie");
let bouton = document.getElementById("btnAjouter");
let liste = document.getElementById("maListe");
bouton.addEventListener("click", function() {
let texte = champ.value.trim();
if (texte === "") {
return;
}
let li = document.createElement("li");
li.textContent = texte;
liste.appendChild(li);
champ.value = "";
});
Formulaires et requêtes HTTP¶
Exercice 8 - Analyse de formulaire¶
Soit le formulaire HTML suivant :
<form action="/recherche" method="get">
<input type="text" name="q" value="Python">
<input type="number" name="page" value="2">
<button type="submit">Rechercher</button>
</form>
a. Quelle URL sera demandée par le navigateur quand l'utilisateur clique sur « Rechercher » ?
b. Quelle serait la différence si method="post" était utilisé ?
c. Que se passe-t-il si on retire l'attribut name du premier champ ?
Solution
a. L'URL sera : /recherche?q=Python&page=2
Les paramètres sont transmis dans l'URL avec la méthode GET, sous la forme nom=valeur séparés par &.
b. Avec method="post", l'URL serait simplement /recherche (sans paramètres). Les données q=Python&page=2 seraient transmises dans le corps de la requête HTTP, invisibles dans la barre d'adresse.
c. La valeur du premier champ (« Python ») ne serait pas transmise au serveur. L'URL serait /recherche?page=2. L'attribut name est indispensable pour identifier chaque donnée dans la requête.
Exercice 9 - Requêtes HTTP¶
a. Écrire la requête HTTP complète envoyée par le navigateur lorsqu'on accède à la page https://www.lycee.fr/notes?eleve=dupont&classe=1NSI.
b. Le serveur répond avec une page HTML contenant les notes de l'élève. Écrire une réponse HTTP simplifiée avec le code de statut approprié.
c. Si la page demandée n'existe pas, quel code de statut le serveur renvoie-t-il ?
Solution
a.
GET /notes?eleve=dupont&classe=1NSI HTTP/1.1
Host: www.lycee.fr
Accept: text/html
Accept-Language: fr
b.
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>
<html>
<body>
<h1>Notes de Dupont - 1NSI</h1>
...
</body>
</html>
c. Le serveur renvoie le code 404 Not Found, indiquant que la ressource demandée n'a pas été trouvée.
Exercice 10 - GET ou POST ?¶
Pour chacune des situations suivantes, indiquer si la méthode GET ou POST est la plus appropriée. Justifier.
a. Un moteur de recherche (barre de recherche).
b. Un formulaire de connexion (identifiant + mot de passe).
c. Un formulaire d'envoi de fichier (upload de photo).
d. Un lien vers la page 3 d'une liste de résultats.
e. Un formulaire d'inscription (nom, email, mot de passe).
Solution
a. GET : la recherche est une lecture de données. Les paramètres dans l'URL permettent de partager le lien de recherche ou de le mettre en favori (?q=python).
b. POST : le mot de passe ne doit pas apparaître dans l'URL (historique du navigateur, journaux du serveur). Les données sensibles doivent être transmises dans le corps de la requête.
c. POST : les fichiers sont volumineux et ne peuvent pas passer dans l'URL (limitée à ~2 000 caractères). POST n'a pas de limite de taille dans le corps.
d. GET : la pagination est une lecture. L'URL ?page=3 permet de mettre en favori ou partager la page.
e. POST : le mot de passe ne doit pas apparaître dans l'URL, et l'inscription est une modification (création de compte sur le serveur).
Activités¶
🧪 Activité 1 - Ma première page interactive¶
Objectif
Créer une page HTML interactive avec JavaScript en partant de zéro.
Étapes¶
a. Créer un fichier quiz.html contenant :
- Un titre « Quiz NSI »
- Une question : « En quelle année a été créé le World Wide Web ? »
- 4 boutons de réponse : 1985, 1989, 1991, 1995
- Un paragraphe vide avec l'id
resultat
b. Créer un fichier quiz.js qui :
- Associe un événement
clickà chaque bouton - Affiche « Bonne réponse ! » en vert si le bouton 1989 est cliqué
- Affiche « Mauvaise réponse, essayez encore. » en rouge sinon
c. Ajouter un compteur de tentatives et afficher le nombre d'essais à la fin.
Correction
quiz.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Quiz NSI</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; text-align: center; }
button { padding: 10px 20px; margin: 5px; font-size: 16px; cursor: pointer; }
#resultat { font-size: 20px; margin-top: 20px; font-weight: bold; }
</style>
</head>
<body>
<h1>Quiz NSI</h1>
<p>En quelle année a été créé le World Wide Web ?</p>
<button class="reponse" data-valeur="1985">1985</button>
<button class="reponse" data-valeur="1989">1989</button>
<button class="reponse" data-valeur="1991">1991</button>
<button class="reponse" data-valeur="1995">1995</button>
<p id="resultat"></p>
<p id="tentatives"></p>
<script src="quiz.js"></script>
</body>
</html>
quiz.js :
let boutons = document.querySelectorAll(".reponse");
let resultat = document.getElementById("resultat");
let affTentatives = document.getElementById("tentatives");
let tentatives = 0;
for (let i = 0; i < boutons.length; i++) {
boutons[i].addEventListener("click", function() {
tentatives++;
let valeur = this.getAttribute("data-valeur");
if (valeur === "1989") {
resultat.textContent = "Bonne réponse !";
resultat.style.color = "green";
affTentatives.textContent = "Trouvé en " + tentatives + " essai(s).";
} else {
resultat.textContent = "Mauvaise réponse, essayez encore.";
resultat.style.color = "red";
}
});
}
🧪 Activité 2 - Formulaire de sondage interactif¶
Objectif
Créer un formulaire de sondage qui affiche les résultats en temps réel sans recharger la page.
Étapes¶
a. Créer un formulaire avec :
- Un champ « Prénom » (texte, obligatoire)
- La question « Quel est votre langage préféré ? » avec des boutons radio (Python, JavaScript, Java, C)
- Un bouton « Voter »
b. En JavaScript, intercepter la soumission du formulaire et empêcher le rechargement de la page.
c. Stocker les votes dans un objet JavaScript et afficher le décompte mis à jour après chaque vote.
d. Afficher le langage en tête avec le nombre de votes.
Correction
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Sondage</title>
<style>
body { font-family: Arial, sans-serif; max-width: 500px; margin: 50px auto; }
.resultats { margin-top: 20px; padding: 15px; background: #f0f0f0; border-radius: 8px; }
</style>
</head>
<body>
<h1>Sondage - Langage préféré</h1>
<form id="sondage">
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom" required>
<br><br>
<p>Votre langage préféré :</p>
<input type="radio" name="langage" value="Python" required> Python<br>
<input type="radio" name="langage" value="JavaScript"> JavaScript<br>
<input type="radio" name="langage" value="Java"> Java<br>
<input type="radio" name="langage" value="C"> C<br>
<br>
<button type="submit">Voter</button>
</form>
<div id="resultats" class="resultats" style="display: none;"></div>
<script>
let votes = {"Python": 0, "JavaScript": 0, "Java": 0, "C": 0};
let totalVotes = 0;
let formulaire = document.getElementById("sondage");
let divResultats = document.getElementById("resultats");
formulaire.addEventListener("submit", function(e) {
e.preventDefault();
let prenom = document.getElementById("prenom").value.trim();
let langageChoisi = document.querySelector('input[name="langage"]:checked');
if (!langageChoisi) {
return;
}
votes[langageChoisi.value]++;
totalVotes++;
// Trouver le leader
let leader = "";
let maxVotes = 0;
for (let lang in votes) {
if (votes[lang] > maxVotes) {
maxVotes = votes[lang];
leader = lang;
}
}
// Afficher les résultats
let html = "<h3>Résultats (" + totalVotes + " vote(s))</h3>";
html += "<p>Merci " + prenom + " pour votre vote !</p>";
for (let lang in votes) {
html += "<p>" + lang + " : " + votes[lang] + " vote(s)</p>";
}
html += "<p><strong>En tête : " + leader + " (" + maxVotes + " vote(s))</strong></p>";
divResultats.innerHTML = html;
divResultats.style.display = "block";
formulaire.reset();
});
</script>
</body>
</html>
🧪 Activité 3 - Analyser les requêtes HTTP avec l'inspecteur¶
Objectif
Utiliser les outils de développement du navigateur pour observer les requêtes HTTP en action.
Étapes¶
a. Ouvrir le navigateur et accéder à un site quelconque. Ouvrir les outils de développement (F12) et aller dans l'onglet Réseau (Network).
b. Recharger la page. Observer les requêtes listées : identifier pour chacune la méthode (GET/POST), l'URL, le code de statut et le type de contenu (HTML, CSS, JS, image...).
c. Identifier la première requête (le document HTML). Cliquer dessus et observer :
- Les en-têtes de la requête (Request Headers)
- Les en-têtes de la réponse (Response Headers)
- Le corps de la réponse (Response)
d. Chercher un formulaire sur un site (par exemple une barre de recherche). Soumettre le formulaire et observer la nouvelle requête dans l'onglet Réseau. Identifier la méthode utilisée et les paramètres transmis.
e. Rédiger un compte-rendu de 10 lignes résumant vos observations.
Correction
Cette activité est une exploration pratique. Voici les éléments que l'élève devrait observer :
- La page HTML est chargée en premier (requête GET, code 200).
- Le navigateur effectue ensuite des requêtes GET supplémentaires pour charger les ressources liées : fichiers CSS, JavaScript, images, polices.
- Chaque requête a un code de statut (200 OK, 304 Not Modified, 301 Redirect...).
- Les en-têtes de requête contiennent
Host,User-Agent,Accept,Accept-Language... - Les en-têtes de réponse contiennent
Content-Type,Content-Length,Server... - Les barres de recherche utilisent généralement la méthode GET avec les paramètres visibles dans l'URL (ex :
?q=recherche). - Les formulaires de connexion utilisent POST : les données apparaissent dans le corps de la requête dans l'onglet « Payload » ou « Form Data ».
🎯 Projet final - Site Web interactif de quiz¶
Objectif
Créer un site Web complet de quiz interactif sur le thème de la NSI, avec plusieurs questions, un score, et un formulaire de résultats.
Partie A - Structure HTML/CSS¶
a. Créer un fichier index.html avec :
- Un en-tête contenant le titre du quiz et une barre de progression
- Une zone principale pour afficher les questions
- Un pied de page avec un compteur de score
b. Créer un fichier style.css avec un design soigné (couleurs, marges, police, boutons avec effets au survol).
Partie B - Questions et logique JavaScript¶
c. Stocker au moins 5 questions dans un tableau JavaScript. Chaque question est un objet contenant :
question: le texte de la questionreponses: un tableau de 4 réponses possiblesbonne: l'indice de la bonne réponse (0 à 3)
d. Écrire une fonction afficherQuestion(numero) qui affiche la question et crée dynamiquement les 4 boutons de réponse.
e. Au clic sur une réponse, indiquer si elle est correcte (vert) ou incorrecte (rouge), mettre à jour le score et passer à la question suivante après 1 seconde.
Partie C - Résultats et formulaire¶
f. À la fin du quiz, afficher le score final (ex : « 4/5 ») et un message adapté.
g. Ajouter un formulaire (méthode POST) permettant à l'élève d'enregistrer son score avec son prénom.
h. Ajouter un bouton « Recommencer » qui remet le quiz à zéro.
Correction
index.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Quiz NSI</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Quiz NSI - Première</h1>
<div id="progression">
<div id="barre"></div>
</div>
</header>
<main id="contenu">
<div id="question"></div>
<div id="reponses"></div>
<p id="feedback"></p>
</main>
<footer>
<p>Score : <span id="score">0</span> / <span id="total">5</span></p>
</footer>
<script src="quiz.js"></script>
</body>
</html>
style.css :
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
color: #333;
}
header { text-align: center; }
#progression {
width: 100%;
height: 10px;
background: #ddd;
border-radius: 5px;
margin: 10px 0 30px;
}
#barre {
width: 0%;
height: 100%;
background: #3498db;
border-radius: 5px;
transition: width 0.3s;
}
#question {
font-size: 20px;
margin-bottom: 20px;
font-weight: bold;
}
.btn-reponse {
display: block;
width: 100%;
padding: 12px;
margin: 8px 0;
font-size: 16px;
border: 2px solid #3498db;
background: white;
border-radius: 8px;
cursor: pointer;
}
.btn-reponse:hover { background: #ebf5fb; }
.correct { background: #2ecc71; color: white; border-color: #2ecc71; }
.incorrect { background: #e74c3c; color: white; border-color: #e74c3c; }
#feedback { font-size: 18px; font-weight: bold; text-align: center; }
footer { text-align: center; margin-top: 30px; font-size: 18px; }
#resultatFinal { text-align: center; }
#resultatFinal button {
padding: 10px 30px;
font-size: 16px;
margin-top: 15px;
cursor: pointer;
background: #3498db;
color: white;
border: none;
border-radius: 8px;
}
quiz.js :
let questions = [
{
question: "Combien de bits comporte un octet ?",
reponses: ["4", "8", "16", "32"],
bonne: 1
},
{
question: "Quel langage est utilisé pour structurer une page Web ?",
reponses: ["Python", "CSS", "HTML", "JavaScript"],
bonne: 2
},
{
question: "Que signifie HTTP ?",
reponses: ["HyperText Transfer Protocol", "High Tech Transfer Protocol",
"HyperText Transmission Protocol", "Home Tool Transfer Protocol"],
bonne: 0
},
{
question: "Quelle méthode HTTP transmet les données dans l'URL ?",
reponses: ["POST", "PUT", "GET", "DELETE"],
bonne: 2
},
{
question: "Quel code HTTP signifie 'Page non trouvée' ?",
reponses: ["200", "301", "403", "404"],
bonne: 3
}
];
let score = 0;
let actuelle = 0;
let total = questions.length;
document.getElementById("total").textContent = total;
function afficherQuestion(numero) {
if (numero >= total) {
afficherResultats();
return;
}
let q = questions[numero];
document.getElementById("question").textContent =
"Question " + (numero + 1) + "/" + total + " : " + q.question;
let divReponses = document.getElementById("reponses");
divReponses.innerHTML = "";
for (let i = 0; i < q.reponses.length; i++) {
let btn = document.createElement("button");
btn.textContent = q.reponses[i];
btn.className = "btn-reponse";
btn.addEventListener("click", function() {
verifier(i, q.bonne, btn);
});
divReponses.appendChild(btn);
}
document.getElementById("feedback").textContent = "";
let pourcentage = (numero / total) * 100;
document.getElementById("barre").style.width = pourcentage + "%";
}
function verifier(choix, bonne, bouton) {
let boutons = document.querySelectorAll(".btn-reponse");
for (let b of boutons) {
b.disabled = true;
}
if (choix === bonne) {
bouton.classList.add("correct");
document.getElementById("feedback").textContent = "Correct !";
document.getElementById("feedback").style.color = "green";
score++;
document.getElementById("score").textContent = score;
} else {
bouton.classList.add("incorrect");
boutons[bonne].classList.add("correct");
document.getElementById("feedback").textContent = "Incorrect !";
document.getElementById("feedback").style.color = "red";
}
actuelle++;
setTimeout(function() {
afficherQuestion(actuelle);
}, 1000);
}
function afficherResultats() {
document.getElementById("barre").style.width = "100%";
document.getElementById("question").textContent = "";
document.getElementById("reponses").innerHTML = "";
let message = "";
if (score === total) {
message = "Parfait !";
} else if (score >= total * 0.6) {
message = "Bien joué !";
} else {
message = "Continuez à réviser !";
}
let html = "<div id='resultatFinal'>";
html += "<h2>Quiz terminé !</h2>";
html += "<p>Score : " + score + " / " + total + "</p>";
html += "<p>" + message + "</p>";
html += "<form action='/resultats' method='post'>";
html += "<input type='text' name='prenom' placeholder='Votre prénom' required>";
html += "<input type='hidden' name='score' value='" + score + "'>";
html += "<input type='hidden' name='total' value='" + total + "'>";
html += "</form>";
html += "<button onclick='recommencer()'>Recommencer</button>";
html += "</div>";
document.getElementById("feedback").innerHTML = html;
}
function recommencer() {
score = 0;
actuelle = 0;
document.getElementById("score").textContent = 0;
afficherQuestion(0);
}
afficherQuestion(0);