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.
Le client envoie une requête (ici GET) ; le serveur renvoie une réponse avec un code (200 = OK).
- É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
S'entraîner
Articles utiles
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.