NSI (Spé) — Interactions homme-machine sur le Web
Interactions sur le Web : HTML, CSS, JavaScript
Pages web, formulaires, événements et interactions client-serveur
Résumé synthétiqueFiche en 4 sectionsQuiz de 10 questionsGratuit, sans pub
Résumé
Une page web repose sur **trois langages complémentaires** : **HTML** pour la **structure** (titres, paragraphes, liens, images), **CSS** pour la **mise en forme** (couleurs, tailles, positions) et **JavaScript** pour l'**interactivité** (réactions aux clics, modifications dynamiques). HTML s'écrit avec des **balises** comme <h1>, <p>, <a href="..."> et <img>. Les **formulaires** (<form>, <input>, <button>) envoient des données au serveur. Le **modèle client-serveur** organise les échanges : le navigateur (**client**) envoie une **requête HTTP** et le serveur renvoie une **réponse**. JavaScript réagit aux **événements** (clic, survol, saisie) grâce aux écouteurs (addEventListener).
**HTML** est le **squelette** d'une page web : il décrit le contenu et son organisation à l'aide de **balises**. Il ne s'occupe ni de l'apparence (rôle du CSS), ni des réactions (rôle du JavaScript) : seulement de **quoi** est faite la page.
- **Définition :** HTML = HyperText Markup Language, un langage de **balisage**.
- **Balises de structure :** <html>, <head>, <body>, <h1> à <h6>, <p>, <div>, <span>.
- **Liens et images :** <a href="page.html">texte</a> et <img src="photo.jpg" alt="description">.
- **Formulaires :** <form>, <input type="text">, <button> pour saisir et envoyer des données.
- **Identification :** l'attribut id désigne un élément **unique**, class regroupe plusieurs éléments.
Exemple
<a href="https://meschapitres.fr">Réviser</a> crée un lien cliquable ; <img src="schema.png" alt="schéma"> insère une image avec un texte alternatif lu par les lecteurs d'écran.
Piège à éviter
L'attribut alt d'une image n'est pas optionnel : sans lui, l'image est invisible pour l'accessibilité et le référencement. Et n'oublie pas de **fermer** les balises (</p>, </div>).
**CSS** habille la structure HTML : couleurs, polices, marges, positions. On y **sélectionne** des éléments (par balise, classe ou id) puis on leur applique des **propriétés**. Séparer le fond (HTML) de la forme (CSS) rend les sites plus faciles à maintenir.
- **Définition :** CSS = Cascading Style Sheets, il décrit l'**apparence** des éléments.
- **Trois façons :** inline (style="..."), interne (<style>) ou externe (fichier .css via <link>).
- **Sélecteurs :** p cible une balise, .classe une classe, #identifiant un id.
- **Propriétés courantes :** color, background-color, font-size, margin, padding, border.
- **Spécificité :** en cas de conflit, l'ordre de priorité est inline > id > classe > balise.
Exemple
.important { color: red; font-size: 20px; } met en rouge et en grand tous les éléments portant class="important". Le sélecteur #titre ne viserait qu'un seul élément, celui d'id "titre".
Piège à éviter
Ne confonds pas les sélecteurs : le **point** .nom cible une **classe**, le **dièse** #nom cible un **id**. Un id doit être unique dans la page, une classe peut être réutilisée.
**JavaScript** s'exécute **dans le navigateur** et rend la page vivante : il réagit aux actions de l'utilisateur, modifie le contenu et l'apparence à la volée. C'est lui qui transforme une page figée en application interactive.
- **Côté client :** JavaScript tourne dans le **navigateur**, pas sur le serveur.
- **Sélection :** document.getElementById('monId') ou document.querySelector('.maClasse').
- **Modification :** element.innerHTML = 'texte' change le contenu ; element.style.color = 'red' le style.
- **Événements :** click, mouseover, keydown, submit, change.
- **Écouteur :** element.addEventListener('click', fonction) déclenche une action au clic.
Exemple
document.getElementById('bouton').addEventListener('click', function() { alert('Bonjour !'); }) affiche un message dès que l'utilisateur clique sur l'élément d'id "bouton".
Piège à éviter
addEventListener('click', maFonction) attend la **fonction** (sans parenthèses) : écrire maFonction() l'exécute immédiatement au lieu de l'attacher à l'événement.
Quand on consulte un site, deux machines dialoguent : le **client** (navigateur) **demande**, le **serveur** **répond**. Ce dialogue suit le protocole **HTTP**, avec des méthodes (GET, POST) et des codes de réponse qui indiquent le résultat.
- **Échange :** le client envoie une **requête HTTP**, le serveur renvoie une **réponse**.
- **GET :** demande une ressource ; les données passent dans l'**URL** (donc visibles).
- **POST :** envoie des données dans le **corps** de la requête (non visibles dans l'URL).
- **Codes de réponse :** 200 (OK), 404 (page introuvable), 500 (erreur serveur).
- **Sécurité :** on préfère POST pour les données sensibles comme un mot de passe.
Exemple
Un formulaire <form method="GET"> envoie page?nom=Dupont&age=16 dans l'URL, visible de tous. Avec method="POST", ces mêmes données passent dans le corps de la requête, hors de l'URL.
Piège à éviter
Une requête **GET** affiche les données dans l'URL : ne l'utilise jamais pour un mot de passe. POST n'est pas du chiffrement pour autant — seul HTTPS protège réellement le contenu.
Quiz - Interactions sur le Web
10 questions
Questions fréquentes
Les points clés à retenir sur Interactions sur le Web : HTML, CSS, JavaScript, extraits du quiz de révision.
Quel langage définit la structure d'une page web ?
Réponse :
HTML
HTML (HyperText Markup Language) structure le contenu : titres, paragraphes, liens, images.
Quel langage rend une page web interactive ?
Réponse :
JavaScript
JavaScript s'exécute dans le navigateur et réagit aux actions de l'utilisateur (clics, saisie).
Quelle balise HTML crée un lien hypertexte ?
Réponse :
<a>
La balise <a href="...">texte</a> crée un lien. <link> sert à inclure une feuille de style.
Quelle méthode HTTP est préférable pour envoyer un mot de passe ?
Réponse :
POST
POST place les données dans le corps de la requête, hors de l'URL, contrairement à GET qui les affiche.