← NSI — premiere spe

NSI · premiere spe

Chapitre 4 — Interactions sur le web

L'essentiel en 30 secondes

Le web repose sur le modèle client-serveur et le protocole HTTP. Une page web est structurée en HTML, stylée en CSS, et rendue interactive par JavaScript. Les formulaires envoient des données au serveur via GET (dans l'URL) ou POST (dans le corps de la requête). Connaître la structure d'une URL et le rôle de chaque technologie est essentiel.

Notions clés

HTML
Langage de balisage qui structure le contenu d'une page web : titres, paragraphes, liens, images, formulaires.
CSS
Langage de style qui définit l'apparence visuelle (couleurs, polices, mise en page) d'une page HTML.
JavaScript
Langage de programmation exécuté côté client (navigateur) qui rend les pages interactives.
Protocole HTTP / HTTPS
Protocole de communication client-serveur. HTTPS = HTTP + chiffrement TLS pour la sécurité.
Requête GET vs POST
GET : paramètres visibles dans l'URL (lecture). POST : paramètres dans le corps de la requête (envoi de données sensibles).
URL
Adresse d'une ressource web : protocole://domaine:port/chemin?paramètres#ancre

Formules

Structure HTML minimale

‘<!DOCTYPEhtml>\n<html>\n<head><title>Titre</title></head>\n<body><p>Contenu</p></body>\n</html>‘`<!DOCTYPE html>\n<html>\n<head><title>Titre</title></head>\n<body><p>Contenu</p></body>\n</html>`

Condition : Tout document HTML valide commence par

Formulaire HTML (méthode GET)

‘<formaction=′/traitement′method=′GET′>\n<inputtype=′text′name=′nom′>\n<buttontype=′submit′>Envoyer</button>\n</form>‘`<form action='/traitement' method='GET'>\n <input type='text' name='nom'>\n <button type='submit'>Envoyer</button>\n</form>`

Condition : Les données sont envoyées dans l'URL : /traitement?nom=valeur

Événement JavaScript

‘document.getElementById(′btn′).addEventListener(′click′,function()alert(′Clic!′););‘`document.getElementById('btn').addEventListener('click', function() { alert('Clic !'); });`

Condition : JavaScript réagit aux événements utilisateur (click, submit, keydown…)

A retenir

  • HTML = structure, CSS = style, JavaScript = interaction. Ces trois langages sont complémentaires et ont des rôles distincts.
  • GET envoie les données dans l'URL (visible) ; POST les envoie dans le corps (non visible dans la barre d'adresse). Pour des mots de passe →\to POST.
  • HTTP est sans état (stateless) : le serveur ne se souvient pas des requêtes précédentes sans mécanisme supplémentaire (cookies, sessions).

Erreurs classiques

Erreur : Confondre HTML et CSS : mettre du style directement dans les balises HTML

Correction : Le style va dans un fichier CSS ou dans une balise