Interactions Web : HTML, CSS et formulaires
Première · NSI · Interactions homme-machine sur le Web
Interactions homme-machine sur le Web
Structurer et mettre en forme : HTML et CSS
Une page web n'est pas une image : c'est un fichier texte que ton navigateur lit et interprète. Deux langages se partagent le travail, et il ne faut jamais les confondre : HTML décrit la structure et le sens du contenu, CSS décrit son apparence. On appelle cela la séparation du fond et de la forme.
L'anatomie d'un document HTML
Une balise s'écrit entre chevrons. La plupart vont par paire : une balise ouvrante et une balise fermante qui porte une barre oblique. L'ensemble balise ouvrante + contenu + balise fermante forme un élément.
<p>Voici un paragraphe.</p>
Quelques balises sont orphelines : elles n'ont pas de contenu, donc pas de fermeture, comme <br> (saut de ligne) ou <img> (image). Une balise peut porter des attributs, qui sont des couples nom-valeur placés dans la balise ouvrante :
<a href="https://eduscol.education.fr">Aller sur Éduscol</a>
| Balise | Rôle | Remarque |
|---|---|---|
| h1 à h6 | Titres, du plus important au plus secondaire | Un seul h1 par page ; on ne saute pas de niveau |
| p | Paragraphe de texte | Élément de bloc : il occupe toute la largeur |
| a | Lien hypertexte | Son attribut href donne l'adresse de destination |
| img | Image | Balise orpheline ; attributs src (source) et alt (texte alternatif) |
| ul et li | Liste à puces et ses éléments | ol donne une liste numérotée |
| div et span | Conteneurs neutres, sans signification propre | div est un bloc, span reste dans le fil du texte |
L'arborescence du document
Les éléments HTML sont emboîtés les uns dans les autres, jamais entrecroisés. Cette imbrication forme un arbre dont la racine est l'élément <html> : chaque élément a un parent et éventuellement des enfants. C'est cette structure d'arbre que le navigateur construit en mémoire, et c'est elle que JavaScript pourra parcourir et modifier.
CSS : sélectionner, puis déclarer
Une règle CSS se compose d'un sélecteur (quels éléments viser) et d'un bloc de déclarations (quelles propriétés leur appliquer) :
p { color: darkblue; font-size: 16px; }
Il existe trois façons d'associer du CSS à une page : une feuille externe reliée par <link> dans le head (la bonne pratique), une balise <style> dans le head, ou un attribut style directement sur la balise (à éviter, car il mélange fond et forme).
| Sélecteur | Ce qu'il vise | HTML correspondant |
|---|---|---|
| p | Tous les éléments de ce type | <p>…</p> |
| .important | Tous les éléments portant cette classe | <p class="important">…</p> |
| #menu | L'unique élément portant cet identifiant | <div id="menu">…</div> |
| div p | Les p situés à l'intérieur d'un div | <div><p>…</p></div> |
Interactions homme-machine sur le Web
Client, serveur, formulaires et requêtes HTTP
Le Web repose sur un dialogue très simple entre deux rôles. Le client (ton navigateur) demande, le serveur répond. Le serveur ne prend jamais l'initiative : sans requête, pas de réponse.
Ce qui se passe quand tu tapes une adresse
- Le navigateur interroge le DNS pour obtenir l'adresse IP correspondant au nom de domaine.
- Il ouvre une connexion vers le serveur et lui envoie une requête HTTP GET.
- Le serveur traite la demande et renvoie une réponse contenant le code HTML de la page.
- Le navigateur lit ce HTML, construit l'arbre du document, puis réclame les ressources associées : feuilles CSS, images, scripts.
- Il applique le CSS, exécute le JavaScript et affiche enfin la page.
| Code | Signification | Cas typique |
|---|---|---|
| 200 | OK, la ressource est renvoyée | La page demandée existe |
| 301 et 302 | Redirection | L'adresse a changé de place |
| 403 | Interdit | La ressource existe mais l'accès est refusé |
| 404 | Non trouvé | L'adresse ne correspond à aucune ressource |
| 500 | Erreur interne du serveur | Le programme du serveur a planté |
Les formulaires
Un formulaire est la façon standard d'envoyer des données du client vers le serveur. Il s'écrit entre les balises <form> et </form>, avec deux attributs essentiels : action, qui indique l'adresse à laquelle envoyer les données, et method, qui indique la méthode HTTP à employer.
Chaque champ de saisie est un élément <input> muni d'un attribut name. Ce name est capital : c'est le nom sous lequel la valeur arrivera au serveur. Un champ sans name n'est tout simplement pas transmis.
| GET | POST | |
|---|---|---|
| Où passent les données | Dans l'URL, après un point d'interrogation | Dans le corps de la requête |
| Visibilité | Visibles dans la barre d'adresse et dans l'historique | Non affichées dans la barre d'adresse |
| Volume | Limité par la longueur maximale d'une URL | Pratiquement sans limite (fichiers possibles) |
| Mise en favori et rechargement | L'adresse peut être copiée, partagée, mise en favori | Le rechargement redemande l'envoi du formulaire |
| Usage recommandé | Consulter, filtrer, rechercher (sans rien modifier) | Envoyer un mot de passe, créer ou modifier des données |
Où le traitement a-t-il lieu ?
C'est une question d'examen classique. Le JavaScript d'une page s'exécute chez le client, dans le navigateur : il réagit instantanément, sans échange réseau, mais l'utilisateur peut le lire, le modifier ou le désactiver. Le traitement côté serveur (en Python, PHP…) s'exécute sur la machine distante : il est plus lent car il exige un aller-retour, mais lui seul est hors de portée de l'utilisateur et peut accéder à la base de données.
JavaScript agit sur la page en réagissant à des événements : un clic, une frappe au clavier, un survol, l'envoi d'un formulaire. On associe une fonction de rappel à un événement, par exemple avec l'attribut HTML onclick ou, plus proprement, avec la méthode addEventListener en JavaScript. Tant qu'aucun événement ne survient, la fonction n'est pas exécutée.
Cookies et sécurisation
Puisque HTTP est sans état, comment un site se souvient-il que tu es connecté ? Grâce aux cookies : le serveur envoie une petite donnée que le navigateur stocke chez le client et renvoie automatiquement à chaque requête suivante vers le même domaine. C'est ce qui permet le panier d'achat ou la session ouverte — et aussi, quand ils sont déposés par des tiers, le suivi publicitaire, encadré par le RGPD.
Enfin, HTTPS est simplement HTTP transporté dans une couche de chiffrement TLS : les données échangées sont illisibles pour un intermédiaire, et le certificat du serveur permet de vérifier son identité. C'est indispensable dès qu'un mot de passe circule.
Exercices corrigés
En CSS, à quoi correspond le sélecteur #menu ?
- A.À tous les éléments de type menu
- B.À tous les éléments portant la classe menu
- C.À un commentaire, car le dièse annule la ligne
- D.À l'unique élément portant l'attribut id="menu"Bonne réponse
Réponse : D — À l'unique élément portant l'attribut id="menu"
Le dièse sélectionne un identifiant, et un identifiant doit être unique dans la page : #menu vise donc un seul élément, celui qui porte id="menu". Une classe s'écrirait .menu avec un point et pourrait viser plusieurs éléments. Il n'existe pas de balise menu au sens de la question. Enfin, un commentaire CSS s'écrit entre barre oblique-étoile et étoile-barre oblique, pas avec un dièse.
Que signifie le code de statut HTTP 404 renvoyé par un serveur ?
- A.Le serveur est en panne ou a rencontré une erreur interne
- B.L'accès à la ressource est interdit à cet utilisateur
- C.La ressource demandée est introuvable à cette adresseBonne réponse
- D.La requête a abouti et la page est renvoyée
Réponse : C — La ressource demandée est introuvable à cette adresse
Le code 404 signifie que le serveur fonctionne parfaitement mais qu'aucune ressource ne correspond à l'adresse demandée. Une erreur interne du serveur porterait le code 500. Un accès refusé serait un 403 : la ressource existe, mais tu n'as pas le droit de la consulter. Et une requête réussie renvoie un 200. Repère utile : les codes en 4 accusent le client, ceux en 5 accusent le serveur.
Quel attribut de la balise form indique la méthode HTTP utilisée pour envoyer les données ?
- A.methodBonne réponse
- B.action
- C.type
- D.submit
Réponse : A — method
L'attribut method vaut get ou post et détermine la méthode HTTP employée. Ne le confonds pas avec action, qui donne l'adresse à laquelle les données sont envoyées : les deux vont ensemble mais ne jouent pas le même rôle. L'attribut type appartient aux balises input (text, password, checkbox…), et submit est une valeur de ce type, pas un attribut de form.
Quelle est la différence entre HTTP et HTTPS ?
- A.HTTPS utilise POST alors que HTTP utilise GET
- B.HTTPS est un langage de description, HTTP un protocole
- C.HTTPS ajoute une couche de chiffrement TLS aux échanges HTTPBonne réponse
- D.HTTPS supprime les cookies pour protéger la vie privée
Réponse : C — HTTPS ajoute une couche de chiffrement TLS aux échanges HTTP
HTTPS, c'est exactement le même protocole HTTP, mais transporté à l'intérieur d'une couche de chiffrement TLS : un intermédiaire qui intercepterait les paquets ne pourrait pas les lire, et le certificat du serveur permet en plus de vérifier son identité. Les méthodes GET et POST existent dans les deux cas. HTTPS reste un protocole, pas un langage. Et il ne supprime pas les cookies : il protège leur transport.
Parmi ces traitements, lequel s'exécute sur la machine du CLIENT ?
- A.Une fonction JavaScript qui affiche un message quand on survole une imageBonne réponse
- B.La vérification d'un mot de passe dans la base de données du site
- C.L'enregistrement d'une commande passée sur un site marchand
- D.La génération d'une page personnalisée à partir des données d'un compte
Réponse : A — Une fonction JavaScript qui affiche un message quand on survole une image
Le JavaScript d'une page s'exécute dans le navigateur, donc chez le client : c'est pour cela qu'il réagit instantanément à un survol, sans aucun aller-retour réseau. Les trois autres traitements nécessitent d'accéder à des données que le client ne possède pas et ne doit pas posséder (mots de passe, commandes, contenu des comptes) : ils s'exécutent forcément côté serveur.
À quoi sert le langage HTML ?
- A.À programmer des calculs exécutés par le navigateur
- B.À interroger une base de données
- C.À structurer et donner du sens au contenu d'une page webBonne réponse
- D.À définir les couleurs et les polices d'une page web
Réponse : C — À structurer et donner du sens au contenu d'une page web
HTML est un langage de description : il indique la nature de chaque morceau de contenu (titre, paragraphe, lien, image). Définir couleurs et polices est le rôle du CSS. Programmer des calculs est celui de JavaScript. Interroger une base de données relève de SQL et se fait côté serveur. Retiens le partage des rôles : HTML structure, CSS habille, JavaScript anime.
Que permet de faire le langage CSS ?
- A.Décrire la mise en forme des éléments d'une pageBonne réponse
- B.Créer les balises de la page
- C.Envoyer les données d'un formulaire au serveur
- D.Vérifier qu'un mot de passe est correct
Réponse : A — Décrire la mise en forme des éléments d'une page
CSS (Cascading Style Sheets) décrit l'apparence : couleurs, tailles, polices, positions, marges. Les balises, elles, sont créées en HTML : CSS ne fait que les viser pour les styler. L'envoi des données d'un formulaire est assuré par le navigateur via HTTP. Et la vérification d'un mot de passe est un traitement, donc du code exécuté côté serveur.
Quelle balise HTML permet de créer un lien hypertexte ?
- A.link
- B.href
- C.url
- D.aBonne réponse
Réponse : D — a
La balise a (pour anchor, ancre) crée un lien hypertexte, et c'est son attribut href qui porte l'adresse de destination. Attention à ne pas confondre les deux : href est un attribut, pas une balise. La balise link existe bien mais sert à relier une feuille de style dans le head, et url n'est pas une balise HTML.
Dans quelle partie d'un document HTML place-t-on la balise title et le lien vers la feuille de style ?
- A.Dans body
- B.Dans headBonne réponse
- C.Dans html, avant head
- D.Dans une balise style placée en fin de page
Réponse : B — Dans head
Le head rassemble tout ce qui ne s'affiche pas dans la page elle-même : l'encodage (meta charset), le titre de l'onglet (title) et le lien vers la feuille de style (link). Le body contient uniquement ce que le visiteur voit. Et rien ne peut être placé dans html avant head : head est le premier enfant de html, il ne peut rien y avoir avant lui.
Dans le modèle client-serveur du Web, qui envoie la requête HTTP ?
- A.Le client, c'est-à-dire le navigateurBonne réponse
- B.Le serveur, qui transmet la page dès qu'elle est prête
- C.Le serveur DNS, qui relaie la demande
- D.Le routeur du réseau local
Réponse : A — Le client, c'est-à-dire le navigateur
C'est toujours le client (ton navigateur) qui prend l'initiative en envoyant une requête ; le serveur se contente de répondre. Un serveur ne peut jamais décider spontanément de t'envoyer une page. Le serveur DNS intervient juste avant, pour traduire le nom de domaine en adresse IP, mais il ne relaie pas la requête HTTP. Quant au routeur, il achemine les paquets sans jamais produire de requête.
Quel attribut de la balise a contient l'adresse vers laquelle pointe le lien ?
- A.src
- B.action
- C.hrefBonne réponse
- D.name
Réponse : C — href
C'est href (hypertext reference) qui indique la destination d'un lien. L'attribut src (source) désigne le fichier à charger pour une image ou un script, ce n'est donc pas le bon ici. L'attribut action appartient à la balise form et donne l'adresse de traitement des données. Et name sert à nommer un champ de formulaire.
Quel sélecteur CSS applique un style à tous les éléments écrits avec class="important" ?
- A.#important
- B..importantBonne réponse
- C.important
- D.class=important
Réponse : B — .important
En CSS, une classe se sélectionne en préfixant son nom d'un point : .important. Le dièse #important viserait un élément portant id="important", ce qui est différent. Écrire important sans préfixe ciblerait une balise nommée important, qui n'existe pas. Et class=important est la syntaxe du HTML, pas celle du CSS. Retiens la symétrie : dans le HTML on écrit class et id sans symbole, dans le CSS on ajoute le point ou le dièse.
S'entraîner sur ce chapitre
Ce chapitre compte 36 exercices corrigés dans l'application, avec le suivi de ta progression.
Commencer les exercices