Quand tu cliques sur un bouton ou que tu envoies un formulaire, deux programmes collaborent : le navigateur (le client), qui affiche la page et réagit à tes actions, et le serveur, qui reçoit des requêtes et renvoie des réponses. Ce chapitre montre qui fait quoi, et comment les informations circulent grâce au protocole HTTP.
Une question sur ce cours ?
ULU, le tuteur d’ULUMINE, t’aide à partir de ce cours.
Objectifs
- Rappeler le rôle de HTML, CSS et JavaScript dans une page Web
- Comprendre la notion d’événement et le code exécuté côté client
- Décrire une requête et une réponse HTTP et connaître les principaux codes de réponse
- Écrire un formulaire et distinguer les méthodes GET et POST
- Repérer les paramètres transmis dans une URL
1. Une page Web : HTML, CSS, JavaScript
- HTML décrit la structure et le contenu : titres h1, paragraphes p, liens a, images img, formulaires form…
- CSS décrit la mise en forme : couleurs, polices, disposition.
- JavaScript est un langage exécuté par le navigateur pour rendre la page interactive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ma page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bienvenue</h1>
<p>Voir le <a href="programme.html">programme</a>.</p>
</body>
</html>2. Événements et code côté client
Événement : Un événement est une action détectée par le navigateur : clic (click), survol (mouseover), touche pressée (keydown), saisie dans un champ… On peut associer à un événement une fonction JavaScript, exécutée sur la machine de l’utilisateur, sans contacter le serveur.
<p id="msg">Bonjour</p>
<button onclick="document.getElementById('msg').textContent = 'Merci !'">
Clique-moi
</button>3. Le protocole HTTP
Le client envoie une requête HTTP ; le serveur renvoie une réponse. Avec HTTPS, ces échanges sont chiffrés.
GET /programme.html HTTP/1.1
Host: www.exemple.fr
User-Agent: Mozilla/5.0
--- réponse ---
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<!DOCTYPE html> ...| Code | Signification |
|---|---|
| 200 | OK : la ressource est envoyée |
| 301 | la ressource a été déplacée définitivement (redirection) |
| 404 | ressource introuvable |
| 500 | erreur interne du serveur |
Une page peut être statique (fichier HTML envoyé tel quel) ou dynamique : un programme du serveur (en PHP, Python…) la fabrique à chaque requête. Dans les deux cas, le navigateur ne reçoit que du HTML, du CSS et du JavaScript.
4. Les formulaires : GET et POST
<form action="resultat.php" method="get">
<label>Ville : <input type="text" name="ville"></label>
<label>Jours : <input type="number" name="jours"></label>
<input type="submit" value="Voir">
</form>- action : l’adresse du programme qui traitera les données.
- method : get ou post.
- Chaque champ a un attribut name : c’est le nom du paramètre envoyé au serveur.
| GET | POST | |
|---|---|---|
| Où sont les données ? | dans l’URL, après un ? | dans le corps de la requête |
| Exemple | resultat.php?ville=Lyon&jours=3 | invisible dans l’URL |
| Usage | recherche, filtre : on peut copier ou mettre en favori l’URL | mot de passe, données personnelles, envoi de fichier, modification de données |
À retenir
- HTML : structure ; CSS : présentation ; JavaScript : interactivité, exécuté par le navigateur.
- Un événement (clic, saisie…) déclenche du code côté client ; le serveur doit toujours revérifier les données.
- HTTP : requête (méthode, ressource, en-têtes) → réponse (code, en-têtes, corps) ; 200 OK, 404 introuvable, 500 erreur serveur.
- Formulaire : action, method, attribut name des champs.
- GET : paramètres visibles dans l’URL (?nom=valeur&…) ; POST : dans le corps ; HTTPS chiffre.
Et maintenant, à toi !
Vérifie que tu as compris avec les exercices, puis révise avec la fiche.