Interactions sur le Web
Modèle client-serveur, URL et protocole HTTP (requêtes GET et POST, codes de réponse), pages HTML et feuilles CSS, formulaires, événements et JavaScript côté client, notions de sécurité (HTTPS).
1. Client et serveur
Définition
Une URL (https://www.exemple.fr/cours/page.html) indique le protocole, le nom du serveur et le chemin de la ressource. Le client envoie une requête HTTP ; le serveur renvoie une réponse avec un code : $200$ (OK), $301$ (déplacé), $404$ (introuvable), $500$ (erreur du serveur).
2. HTML et CSS
Propriété · Structure et style
HTML décrit la structure par des balises : <h1> (titre), <p> (paragraphe), <a href="..."> (lien), <img src="..." alt="...">. CSS décrit la mise en forme : p { color: navy; font-size: 18px; }. On sépare le fond (HTML) de la forme (CSS).
3. Formulaires : GET et POST
Propriété · Envoyer des données
Un formulaire <form action="/recherche" method="get"> envoie ses champs au serveur. Avec GET, les données apparaissent dans l'URL (/recherche?mot=python) : adapté aux recherches. Avec POST, elles sont dans le corps de la requête : adapté aux mots de passe et aux données volumineuses. Dans les deux cas, sans HTTPS, elles circulent en clair.
4. JavaScript et événements
Exemple · Réagir à un clic
<button id="b">Cliquer</button>
<script>
document.getElementById("b").addEventListener("click", function () {
document.body.style.background = "lightyellow";
});
</script>Le code JavaScript s'exécute dans le navigateur (côté client) ; le code PHP ou Python d'un site s'exécute sur le serveur.
Activité · Observer les requêtes
Attention · Sécurité
Ne jamais faire confiance aux données envoyées par un client : le serveur doit les vérifier. HTTPS chiffre les échanges et authentifie le serveur.
S'entraîner
Exercices corrigés
🎓 20 exercices corrigés et un quiz vous attendent dans ce chapitre.
Créez votre compte gratuit pour voir les corrections, faire les quiz et suivre votre progression.
Décomposer une URL
★☆☆Dans https://www.lycee.fr/nsi/tp1.html, identifier le protocole, le serveur et le chemin.
Codes HTTP
★☆☆Que signifient les codes $200$ et $404$ ?
Rôle du client
★☆☆Quel logiciel joue le rôle de client sur le Web ?
Balises
★☆☆Écrire le code HTML d'un titre principal « Mon site » suivi d'un paragraphe « Bienvenue ».
Lien
★☆☆Écrire un lien vers https://www.python.org de texte « Python ».
Image accessible
★★☆À quoi sert l'attribut alt d'une image ?
Règle CSS
★☆☆Écrire une règle CSS qui affiche tous les titres h2 en rouge.
Séparer fond et forme
★★☆Pourquoi placer le style dans une feuille CSS séparée ?
GET ou POST
★★☆Quelle méthode choisir pour un formulaire de connexion ? pour un moteur de recherche ?
URL d'une requête GET
★★☆Un formulaire GET vers /meteo a deux champs ville=Lyon et jours=3. Quelle URL est demandée ?
POST et sécurité
★★☆Un mot de passe envoyé en POST sur HTTP est-il protégé ?
Client ou serveur
★★☆Où s'exécutent : a) un script JavaScript d'animation ; b) un script PHP qui interroge une base de données ?
Événement
★★☆Que fait le script du cours ?
Modifier un texte
★★★Écrire un script qui affiche « Merci ! » dans le paragraphe d'identifiant msg au clic sur le bouton b.
Vérification côté serveur
★★★Un formulaire limite l'âge saisi à $0$–$120$ en JavaScript. Pourquoi le serveur doit-il quand même vérifier ?
HTTPS
★☆☆Que garantit le cadenas HTTPS ?
Nombre de requêtes
★★☆Une page HTML utilise $2$ fichiers CSS, $3$ scripts et $10$ images. Combien de requêtes au minimum ?
Page dynamique
★★☆Quelle différence entre une page statique et une page dynamique ?
Code 500
★☆☆Que signifie le code $500$ ?
Vrai ou faux
★★☆a) HTML sert à mettre en forme. b) Avec GET, les données sont visibles dans l'URL. c) JavaScript s'exécute dans le navigateur.
Vérifier
Avez-vous bien compris ?
Répondez au quiz : la correction s'affiche immédiatement.