Cours#

Le Web


Programme	Repères historiques du Web ; distinguer Web et Internet ; le modèle client/serveur et le protocole HTTP ; les URL et les hyperliens ; le couple HTML/CSS ; moteurs de recherche et indexation ; sécurité et traces (HTTPS, cookies).
Idée	Une page web est un simple fichier texte : du HTML pour le contenu, du CSS pour l’apparence. En comprenant ces deux langages, vous passez de consommateur à auteur du Web.
Objectifs	Situer l’invention du Web ; ne plus confondre Web et Internet ; lire une URL et un échange client/serveur ; écrire une page en HTML ; la mettre en forme en CSS ; comprendre comment un moteur de recherche classe ses réponses.

Situation de départ

Vous tapez l’adresse d’un site et la page s’affiche. Qui vous l’a envoyée, et sous quelle forme ? Et que veut dire « Erreur 404 » quand cela échoue ?
Pourquoi tel site arrive-t-il en tête de vos recherches, et pas un autre ?
Après avoir regardé une paire de baskets sur un site, vous la voyez en publicité partout ailleurs. Comment ces sites vous reconnaissent-ils ?

Pour les curieux (facultatif) — Un peu d’histoire

L’idée d’un texte « augmenté » de renvois — l’hypertexte — est imaginée dès 1965 par l’Américain Ted Nelson. Mais c’est en 1989 au CERN (près de Genève) que le Britannique Tim Berners-Lee, avec le Belge Robert Cailliau, invente le World Wide Web : relier des documents de machine à machine par des hyperliens. Il écrit le premier navigateur et met en ligne la première page web de l’histoire, dont le CERN a restauré une copie, consultable aujourd’hui. Fait remarquable : il choisit de ne rien breveter — le Web est libre et gratuit.

Le premier serveur web, un ordinateur NeXT

Tim Berners-Lee (2009)

\(\to\) frise chronologique

Rendu dans le navigateur — info.cern.ch/hypertext/WWW/TheProject.html

La toute première page web (1991), dans la copie restaurée par le CERN et consultable sur info.cern.ch : les hyperliens y sont déjà soulignés.

Règle 1 — Repères historiques (les grandes étapes)

1965 — Ted Nelson invente le concept d’hypertexte.
1989 — naissance du Web au CERN (Tim Berners-Lee).
1993 — le Web tombe dans le domaine public ; le navigateur Mosaic le rend populaire hors des laboratoires.
1994 — création du W3C, l’organisme qui normalise le Web.
1995 — des pages interactives (JavaScript) et dynamiques (PHP) deviennent possibles.
2001 — standardisation des pages grâce au DOM.
2010 — explosion du Web mobile (smartphones, applications).

Sources : ministère de l’Éducation nationale, programme de SNT de seconde, Bulletin officiel spécial n° 1 du 22 janvier 2019 (repères historiques du Web) ; CERN, « La naissance du Web » et première page web reconstituée, home.cern, info.cern.ch ; W3C, « About W3C » (création du consortium en 1994), w3.org.

Le Web n’est pas Internet#

C’est la confusion la plus fréquente. Il faut la lever tout de suite.

Définition 1

Internet est le réseau physique mondial : des millions d’ordinateurs reliés par des câbles, de la fibre et des ondes, qui échangent des données grâce au protocole IP.
Le Web (ou « toile ») est l’un des services qui circulent sur Internet : l’ensemble des pages reliées par des hyperliens, consultées avec un navigateur.

Autrement dit, le Web s’appuie sur Internet, mais ce n’est pas la même chose. Sur Internet circulent aussi les e-mails (protocole SMTP), les transferts de fichiers (FTP), les appels vidéo, les jeux en ligne… Le Web repose sur trois technologies inventées par Berners-Lee : le protocole HTTP, les adresses URL et le langage HTML.

Règle 2 — À retenir

Internet \(=\) le réseau (la route). Web \(=\) un service qui roule dessus (les pages). Une bonne image : Internet est le réseau routier, le Web est l’ensemble des magasins qu’on visite en l’empruntant.

▶ Exercices d'application : exercices 1 et 2 (le Web n’est pas Internet)

Le modèle client / serveur et le protocole HTTP#

Quand vous consultez un site, deux ordinateurs dialoguent.

Définition 2

Le client est votre navigateur (Firefox, Chrome…) : il demande une page.
Le serveur est un ordinateur, allumé en permanence, qui stocke le site et répond en envoyant la page. Ce dialogue suit des règles précises : le protocole HTTP (HyperText Transfer Protocol).

Le navigateur envoie une requête, le serveur renvoie une réponse (la page, une image…) accompagnée d’un code qui dit si la requête a réussi ou échoué :

Code	Signification
200	tout va bien, voici la page (réussite)
403	accès interdit (échec : non autorisé)
404	page non trouvée (échec : la ressource n’existe pas)
500	erreur du serveur (échec : le serveur a planté)

Règle 3 — HTTP et HTTPS

HTTPS est la version sécurisée de HTTP : les données échangées sont chiffrées. Le petit cadenas dans la barre d’adresse indique que la connexion est protégée — indispensable avant de saisir un mot de passe ou un numéro de carte.

Décomposer une requête HTTP#

Une requête HTTP est un petit message texte. Elle précise une méthode (l’action voulue) et la ressource demandée sur un hôte (le serveur) :

GET /snt/web.html HTTP/1.1        <- methode + ressource demandee
Host: www.lycee.mc                <- le serveur vise

La méthode GET veut dire « donne-moi cette ressource ». On peut passer des informations au serveur en les ajoutant à la fin de l’URL, après un point d’interrogation ? : ce sont les paramètres. Chaque paramètre s’écrit nom=valeur, et on les sépare par une esperluette & :

/recherche?ville=Monaco&jour=lundi

Ici, deux paramètres sont passés au serveur : ville vaut Monaco et jour vaut lundi. C’est ainsi qu’un formulaire de recherche transmet ce que vous avez tapé.

Règle 4 — Anatomie d’un échange

Requête (client \(\to\) serveur) : méthode + ressource + éventuels paramètres après ?. Réponse (serveur \(\to\) client) : un code (200, 404…) + le contenu (la page HTML).

Chez le client, chez le serveur#

Le serveur peut renvoyer une page toute prête, ou la fabriquer sur mesure en fonction des paramètres reçus (une page dynamique). La page reçue peut aussi contenir du code exécuté par le client — le plus souvent du JavaScript — qui anime la page directement dans votre navigateur (menus, animations, vérification d’un formulaire).

Règle 5 — Deux endroits où « ça calcule »

Côté serveur : la page est choisie ou construite avant l’envoi (souvent en PHP).
Côté client : le navigateur exécute le JavaScript contenu dans la page.
On peut voir le code d’une page reçue par un clic droit \(\to\) « Afficher le code source ».

▶ Exercices d'application : exercices 3 à 7 (client/serveur ; la requête HTTP)

L’adresse d’une page : l’URL#

Pour demander une page, le client doit connaître son adresse : son URL.

Définition 3

Une URL (Uniform Resource Locator) est l’adresse unique d’une ressource (page, image, fichier) sur le Web. Elle se lit de gauche à droite :

https://www.lycee.mc/cours/snt/web.html


\(\uparrow\) protocole	\(\uparrow\) nom du serveur (domaine)	\(\uparrow\) chemin du fichier

Les fichiers d’un site sont rangés dans des dossiers, comme sur votre ordinateur : c’est une structure en arborescence (un arbre à l’envers dont la racine est notée /).

Les dossiers sont encadrés, les fichiers sont les feuilles de l’arbre.

Règle 6 — Chemin absolu, chemin relatif

Un chemin absolu part de la racine / : /dossier2/dossier3/fichier3.jpg.
Un chemin relatif part du dossier courant, celui de la page qui fait le lien (pas de / au début) : depuis dossier2, on écrit dossier3/fichier3.jpg. On remonte d’un niveau avec .. : depuis dossier4, on écrit ../dossier3/fichier5.svg.

Dans une page HTML (§ IV), ces chemins s’écrivent dans deux attributs : src pour le fichier d’une image, href pour la destination d’un lien. Par exemple, dans une page rangée dans dossier4, <img src="../dossier3/fichier3.jpg" alt="photo" /> affiche l’image fichier3.jpg, et <a href="fichier6.html">Suite</a> crée un lien vers la page fichier6.html, rangée dans le même dossier.

▶ Exercices d'application : exercices 8 à 10 (l’URL et les chemins)

HTML : le contenu de la page#

Nous arrivons au cœur du chapitre : le couple HTML + CSS.

Définition 4

HTML (HyperText Markup Language) est le langage qui décrit le contenu et la structure d’une page : titres, paragraphes, images, liens… Ce n’est pas un langage de programmation (pas de boucles ni de conditions) : c’est un langage de balisage.

En HTML, on entoure le contenu de balises. Une balise ouvrante <p> et une balise fermante </p> délimitent un élément :

<h1>Hello World ! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

Rendu dans le navigateur

Hello World ! Ceci est un titre

Ceci est un paragraphe. Avez-vous bien compris ?

Chaque balise a un sens (on parle de sémantique) : <h1> est un titre important (<h2>, <h3>… des sous-titres), <p> un paragraphe, <strong> un mot important, <img> une image, <a> un lien. Voici les balises à connaître :

Balise	Rôle	Exemple
`<h1>` à `<h6>`	titres, du plus important au moins important	`<h2>Horaires</h2>`
`<p>`	un paragraphe	`<p>Bonjour</p>`
`<strong>`, `<em>`	mot important (gras), mise en valeur (italique)	`<em>vraiment</em>`
`<br />`	un retour à la ligne (se ferme seule)	`ligne 1<br />ligne 2`
`<ul>`, `<ol>`, `<li>`	liste à puces, liste numérotée, un élément de la liste	`<ul><li>pain</li></ul>`
`<img />`	une image (se ferme seule) : `src` donne le fichier, `alt` un texte qui la décrit	`<img src="chat.jpg" alt="un chat" />`
`<a>`	un lien : `href` donne la destination	`<a href="page2.html">Suite</a>`
`<table>`, `<tr>`, `<th>`, `<td>`	un tableau, une ligne, une case d’en-tête, une case	voir l’exemple ci-dessous
`<div>`	un bloc qui regroupe des éléments (pour les mettre en forme ensemble)	`<div>…</div>`

Le texte de l’attribut alt s’affiche si l’image ne se charge pas, et il est lu à voix haute aux personnes aveugles : on ne l’oublie jamais. Voici ces balises à l’œuvre :

<h2>Le club</h2>
<img src="images/logo.png" alt="Logo du club" />
<ol>
  <li>Echauffement</li>
  <li>Match</li>
</ol>
<table>
  <tr> <th>Jour</th> <th>Heure</th> </tr>
  <tr> <td>Mercredi</td> <td>14 h</td> </tr>
</table>
<a href="contact.html">Nous contacter</a>

Rendu dans le navigateur

Le club

logo du club

1. Échauffement

2. Match


Jour	Heure
Mercredi	14 h

Nous contacter

Règle 7 — Les deux règles d’or des balises

Toute balise ouverte doit être refermée.
Les balises s’imbriquent proprement (« premier ouvert, dernier fermé »).
<p><strong>…</strong></p> est correct ; <p><strong>…</p></strong> est interdit.

Une balise peut porter des attributs, dans la balise ouvrante. Les deux plus utiles sont id (un identifiant unique dans la page) et class (une catégorie, partageable) :

<h2 class="chapitre">Un sous-titre</h2>
<p id="intro">Le paragraphe d'introduction.</p>

La structure complète d’une page HTML#

Une vraie page web suit toujours le même squelette :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ma premiere page</title>
  </head>
  <body>
    <h1>Bienvenue</h1>
    <p>Ceci est ma page web.</p>
  </body>
</html>

Le <head> contient les informations invisibles (titre de l’onglet, encodage) ; le <body> contient tout ce qui s’affiche dans la page.

▶ Exercices d'application : exercices 11 à 14 (lire et écrire du HTML)

CSS : l’apparence de la page#

Le HTML dit ce qu’il y a ; le CSS dit à quoi ça ressemble.

Définition 5

CSS (Cascading Style Sheets, « feuilles de style en cascade ») est le langage qui gère l’apparence : couleurs, polices, tailles, alignements, marges, dispositions…

Une règle CSS cible des éléments (le sélecteur) et leur applique des propriétés :

h1 {
  text-align: center;
  color: white;
  background-color: crimson;
}
h2 {
  font-family: Verdana;
  font-style: italic;
  color: green;
}

Rendu dans le navigateur

Ceci est un titre

Ceci est un sous-titre

Les propriétés les plus utiles sont les suivantes :

Propriété	Effet	Exemple
`color`	couleur du texte	`color: red;`
`background-color`	couleur du fond	`background-color: black;`
`font-family`	police de caractères	`font-family: Verdana;`
`font-size`	taille du texte	`font-size: 20px;`
`font-style`	texte normal ou en italique	`font-style: italic;`
`text-align`	alignement : `left`, `center`, `right`	`text-align: center;`
`border`	bordure (épaisseur, style, couleur)	`border: 2px solid blue;`
`margin`	marge autour de l’élément	`margin: 10px;`
`padding`	marge à l’intérieur de l’élément	`padding: 8px;`
`width`	largeur (par exemple d’une image)	`width: 300px;`

Une couleur s’écrit par son nom anglais (red, crimson, teal) ou par son code RVB en hexadécimal (#e63946), le même codage RVB que pour les pixels d’une photo. Chaque propriété se termine par un point-virgule.

Règle 8 — Les trois sélecteurs à connaître

On peut cibler les éléments d’une page de trois façons différentes :

On cible…	En HTML	En CSS
toutes les balises d’un type	`<p>`	`p { …}`
un élément par son id (unique)	`id="intro"`	`#intro { …}`
tous les éléments d’une classe	`class="alerte"`	`.alerte { …}`

En CSS, l’id se cible avec un dièse #, la class avec un point . . C’est ainsi qu’on met en forme un paragraphe précis sans toucher aux autres.

Règle 9 — Où écrire le CSS ? Une feuille de style reliée à la page

On écrit les règles CSS dans un fichier à part, par exemple style.css, rangé à côté des pages. Chaque page HTML le relie par une balise <link> placée dans le <head> :

<head>
  <meta charset="utf-8" />
  <title>Mon site</title>
  <link rel="stylesheet" href="style.css" />
</head>

Une seule feuille de style peut ainsi habiller toutes les pages d’un site : on change une couleur dans style.css, et tout le site change. (Sur un éditeur en ligne comme jsfiddle.net, la zone « CSS » joue le rôle de ce fichier.)

Activité — Ma première page

Sur un éditeur en ligne (par exemple jsfiddle.net ou codepen.io) :

Recopier le squelette HTML complet, avec un <h1>, deux <p> et une image.
Ajouter du CSS pour centrer le titre, le colorer, et changer la police des paragraphes.
Donner à un seul paragraphe l’id="important" et le colorer en rouge via #important.

▶ Exercices d'application : exercices 15 à 17 (mettre en forme avec CSS)

Les hyperliens : la « toile »#

Ce qui fait la toile, ce sont les liens d’une page vers une autre. On les crée avec la balise <a> et son attribut href (l’URL de destination) :

<a href="https://www.gouv.mc">Visiter le site du gouvernement</a>

Entre les pages d’un même site, on utilise des chemins relatifs (§ III) : un menu de navigation n’est qu’une liste de liens, recopiée sur chaque page.

<ul>
  <li><a href="index.html">Accueil</a></li>
  <li><a href="pages/contact.html">Contact</a></li>
</ul>

En suivant les liens de page en page, on « navigue » : c’est la navigation hypertexte, l’idée fondatrice de Berners-Lee.

À qui appartient une page ? Notions juridiques#

Publier n’est pas voler : sur le Web comme ailleurs, ce que l’on trouve appartient à quelqu’un.

Définition 6

Le droit d’auteur protège automatiquement toute création (texte, photo, musique, code) : son auteur décide qui peut l’utiliser. Une licence est l’autorisation qui accompagne une œuvre et fixe le droit d’usage : ce qu’on a le droit d’en faire (copier, modifier, diffuser, vendre…).

Règle 10 — Copier n’est pas toujours permis

Récupérer une image ou un texte trouvé sur le Web pour le republier sans autorisation peut être illégal. Pour réutiliser sereinement, on cherche des œuvres sous licence libre (par exemple Creative Commons, ou les logiciels libres) qui autorisent d’avance certains usages — souvent à condition de citer l’auteur.

Un fichier numérique se copie à l’infini pour presque rien : cela ne veut pas dire qu’il est sans valeur. Un logiciel, une base de données, une photo ont une valeur (de travail, d’usage, commerciale). C’est pourquoi le Web a fait naître à la fois un immense commerce en ligne et un mouvement de partage (Wikipédia, logiciels libres) fondé, lui aussi, sur des licences précises.

▶ Exercices d'application : exercice 18 (droit d’auteur : ai-je le droit ?)

Trouver une page : les moteurs de recherche#

Il existe des milliards de pages. Pour s’y retrouver, on utilise un moteur de recherche (Google, Bing, Qwant…).

Définition 7

Un moteur de recherche explore le Web en permanence grâce à des robots (les crawlers) qui suivent les liens, et range les pages trouvées dans un immense index (comme l’index d’un livre). Quand vous tapez une requête, le moteur ne cherche pas « dans le Web » mais dans son index, déjà prêt.

Règle 11 — L’ordre des résultats n’est pas neutre

Le moteur classe les pages par pertinence, à l’aide d’un algorithme. Un critère historique (le PageRank de Google) : une page est jugée importante si beaucoup d’autres pages importantes pointent vers elle. S’ajoutent la présence des mots-clés, la langue, la localisation… Les premiers résultats peuvent aussi être des publicités (signalées par la mention « Sponsorisé »).

Activité — Aiguiser son esprit critique

Faire une même recherche sur deux moteurs différents et comparer les premiers résultats.
Repérer, sur une page de résultats, ce qui est une publicité et ce qui ne l’est pas.
Expliquer pourquoi « être en première page » est un enjeu commercial énorme.

▶ Exercices d'application : exercices 19 et 20 (les moteurs de recherche)

Sécurité et confidentialité : régler son navigateur#

Naviguer n’est jamais tout à fait anonyme, et laisser un site exécuter du code sur sa machine comporte des risques. Heureusement, le navigateur se règle.

Règle 12 — Cookies et traces

Un cookie est un petit fichier qu’un site dépose dans votre navigateur pour vous reconnaître (rester connecté, retenir un panier…) — mais aussi pour vous suivre d’un site à l’autre à des fins publicitaires. Chaque visite laisse des traces : historique, adresse IP (l’adresse de votre appareil sur le réseau, qu’on étudiera au chapitre Internet), cookies.

Règle 13 — Les réglages importants du navigateur

Dans les paramètres de son navigateur, on peut :

gérer les cookies : les refuser (surtout les cookies « tiers », qui pistent) ;
effacer l’historique de navigation, ou activer la navigation privée pour ne rien enregistrer ;
contrôler les autorisations d’un site (caméra, micro, position) et interdire l’exécution de certains programmes ;
préférer les sites en HTTPS (cadenas) et bloquer les traceurs.

Règle 14 — Attention à l’hameçonnage (phishing)

De fausses pages, imitant une vraie (banque, réseau social), cherchent à voler vos identifiants : c’est l’hameçonnage. Un lien peut cacher une adresse différente de son texte : avant de cliquer, survolez le lien pour lire la vraie URL, et vérifiez le nom de domaine. En cas de doute, on ne clique pas et on ne saisit aucune information personnelle.

▶ Exercices d'application : exercice 21 (régler et sécuriser son navigateur), exercice 22 (critiquer une réponse d’IA), exercice 23 (Python au service du thème)

Pour les curieux (facultatif) — Liens avec d’autres chapitres

Déjà vu : les hyperliens forment un graphe, comme les amitiés d’un réseau social (c’est sur ce graphe que travaille le PageRank) ; en CSS, une couleur se code en RVB, comme un pixel (chapitre Photographie numérique).
À venir : au chapitre Internet, on verra comment le navigateur trouve l’adresse du serveur et comment la page voyage en petits morceaux, les paquets.
Plus loin : en spécialité NSI de Première, on étudie de plus près les formulaires et le JavaScript.

Bilan — la carte mémoire#

Les mots importants du thème sont définis dans le lexique.

Notion	À retenir
Web \(\neq\) Internet	Internet \(=\) le réseau ; Web \(=\) un service (les pages) qui roule dessus.
Inventeur	Tim Berners-Lee, au CERN, 1989–1991 ; W3C en 1994.
Client / serveur	le navigateur demande (requête HTTP), le serveur répond (la page).
HTTP / HTTPS	protocole du Web ; HTTPS \(=\) version chiffrée (cadenas).
Requête HTTP	méthode (`GET`) + ressource ; paramètres après `?` : `nom=valeur&…`.
Codes de réponse	200 (ok), 403 (interdit), 404 (introuvable), 500 (erreur serveur).
Client / serveur (2)	serveur : PHP (dynamique) ; client : JavaScript ; clic droit \(\to\) code source.
URL	adresse d’une page : protocole + domaine + chemin ; absolu (`/`) ou relatif (`..`).
HTML	le contenu : langage de balises (`<h1>`, `<p>`, `<a>`…).
Règles des balises	toute balise ouverte est refermée ; imbrication propre.
CSS	l’apparence : sélecteur + propriétés (couleur, police, alignement…).
Sélecteurs	`p` (balise), `#id` (unique), `.classe` (partagée).
Hyperlien	`<a href="...">` ; c’est ce qui fait la « toile ».
Droit d’auteur	toute création a un auteur ; une licence fixe le droit d’usage (ex. Creative Commons).
Moteur de recherche	robots + index ; résultats classés (PageRank), pubs incluses.
Sécurité navigateur	régler cookies/historique/navigation privée ; se méfier de l’hameçonnage.

Retour à la situation de départ

Un serveur, qui répond à la requête HTTP de votre navigateur, le client (§ II) : il envoie un simple fichier texte écrit en HTML (§ IV), mis en forme par du CSS (§ V). Le code 404 signifie « page non trouvée » (§ II).
Le moteur de recherche cherche dans son index et classe les pages avec un algorithme : une page est jugée importante si beaucoup de pages importantes pointent vers elle (PageRank). Les premiers résultats peuvent aussi être des publicités (§ VIII).
Grâce aux cookies déposés dans votre navigateur, en particulier les cookies « tiers », qui vous suivent d’un site à l’autre ; on peut les refuser dans les réglages du navigateur (§ IX).

Débat argumenté

Un débat, proposé en fin de chapitre, accompagne ce thème : « Un moteur de recherche doit-il rester libre de classer ses résultats comme il le veut ? » (documents, rôles, tableau d’arguments et trace écrite, environ 50 min).

Savoir-faire à maîtriser#

À la fin du chapitre, je sais…

Savoir-faire : je me positionne

distinguer le Web d’Internet ;
décrire l’échange client / serveur et le rôle du protocole HTTP ;
décomposer une URL (protocole, nom de domaine, chemin) ;
écrire une page simple en HTML (balises de structure) et la mettre en forme avec CSS ;
créer un hyperlien d’une page vers une autre ;
expliquer le fonctionnement d’un moteur de recherche (indexation puis classement) ;
régler mon navigateur pour préserver ma sécurité et ma vie privée (HTTPS, cookies).