Le Web — SNT

1🕰️

Histoire du Web

À la fin de cette section · Tu connaîtras la naissance du Web (Tim Berners-Lee, CERN, 1989) et sa différence avec Internet.

⚡ Rappel fondamental

Le Web ≠ Internet. Internet est le réseau physique (câbles, routeurs, protocoles). Le Web est un service qui fonctionne sur Internet — comme l’email ou la VoIP. Le Web utilise le protocole HTTP pour échanger des pages HTML.

1989–1991 — Invention au CERN

Tim Berners-Lee, chercheur britannique au CERN (Genève), propose en 1989 un système de gestion de l’information basé sur les hyperliens. En 1991, il publie le premier site Web au monde : http://info.cern.ch. Il invente simultanément HTML, HTTP et le concept d’URL.

1993 — Mosaic, le premier navigateur graphique

Le navigateur Mosaic (NCSA) permet d’afficher images et texte dans la même page. Le Web devient accessible au grand public. 10 000 sites en 1993.

1994 — Fondation du W3C

Tim Berners-Lee fonde le W3C (World Wide Web Consortium), organisation internationale qui définit et maintient les standards du Web (HTML, CSS, XML…). Il refuse de breveter ses inventions — le Web reste ouvert et gratuit.

1998 — Google

Larry Page et Sergey Brin fondent Google, basé sur l’algorithme PageRank qui classe les pages selon le nombre et la qualité des liens entrants. Révolution dans la recherche Web.

2004–2010 — Web 2.0

Le Web devient participatif : Wikipedia (2001), Facebook (2004), YouTube (2005), Twitter (2006). Les utilisateurs ne sont plus seulement lecteurs mais aussi auteurs.

Aujourd’hui

Plus de 1,9 milliard de sites Web. HTTPS domine (80% du trafic). L’IA générative (ChatGPT, Gemini…) transforme à nouveau les usages. Le Web mobile dépasse le Web desktop depuis 2016.

Le Web est un service d'Internet (≠ Internet) inventé en 1989 par Tim Berners-Lee au CERN. Il repose sur les hyperliens (HTTP/HTML).

2🔗

Les URLs — adresses du Web

À la fin de cette section · Tu sauras décortiquer une URL et identifier ses 3 parties : protocole, domaine, chemin.

Définition

Une URL (Uniform Resource Locator) est l’adresse unique d’une ressource sur le Web. Elle permet de localiser n’importe quelle page, image, fichier ou API sur Internet.

Anatomie d’une URL

https://cours.mathamine.fr/seconde/exercices_ch5.html?theme=probabilites#exercice3

Protocole Nom d’hôte (domaine) Chemin (path) Paramètres de requête Ancre (fragment)

Partie	Rôle	Exemple
Protocole	Méthode de communication	`https://`, `http://`, `ftp://`
Nom d’hôte	Serveur à contacter (résolu par DNS)	`cours.mathamine.fr`
Port (optionnel)	Port TCP du service	`:443` (HTTPS), `:80` (HTTP)
Chemin	Localisation de la ressource sur le serveur	`/seconde/cours_ch5.html`
Paramètres	Données envoyées au serveur (après `?`)	`?q=python&page=2`
Fragment	Ancre dans la page (après `#`)	`#section3`

Lien avec mathamine.fr

https://cours.mathamine.fr/premiere/cours_ch2.html#produit-scalaire
• Protocole : https (connexion chiffrée TLS — Caddy gère le certificat)
• Hôte : cours.mathamine.fr → résolu par Cloudflare → 92.145.252.80
• Chemin : /premiere/cours_ch2.html → fichier servi depuis /srv/site/cours/premiere/
• Fragment : #produit-scalaire → le navigateur scrolle vers cet ancre

URLs absolues et relatives

Une URL absolue contient tous les éléments (protocole + hôte + chemin). Une URL relative est définie par rapport à la page courante :

<!-- URL absolue -->
<a href="https://cours.mathamine.fr/premiere/cours_ch1.html">Suites</a>

<!-- URL relative (depuis premiere/) -->
<a href="cours_ch1.html">Suites</a>

<!-- Remonter d'un niveau -->
<a href="../index.html">Accueil cours</a>

CSS définit le style (couleurs, tailles, marges). Le HTML dit QUOI, le CSS dit COMMENT.

3📡

Le protocole HTTP

À la fin de cette section · Tu comprendras comment ton navigateur communique avec un serveur (requête / réponse).

Définition

HTTP (HyperText Transfer Protocol) est le protocole de communication entre un navigateur (client) et un serveur Web. Il définit le format des requêtes et des réponses échangées. HTTPS est sa version sécurisée (H + TLS).

Le modèle client-serveur

💻

Client

Navigateur Web

GET /cours_ch1.html HTTP/1.1
Host: cours.mathamine.fr

→
requête

←
réponse

🖥️

Serveur

Caddy / Mac Mini M1

HTTP/1.1 200 OK
Content-Type: text/html

<html>…</html>

Les méthodes HTTP

Méthode	Rôle	Exemple d’usage
`GET`	Demander une ressource	Consulter une page Web
`POST`	Envoyer des données au serveur	Soumettre un formulaire
`PUT`	Créer ou remplacer une ressource	API REST — mettre à jour
`DELETE`	Supprimer une ressource	API REST — supprimer

Les codes de réponse HTTP

Code	Signification	Quand ?
200 OK	Succès	Page trouvée et retournée
301 Moved Permanently	Redirection permanente	Page déplacée (ex: HTTP → HTTPS)
403 Forbidden	Accès interdit	Pas les droits nécessaires
404 Not Found	Ressource introuvable	URL incorrecte, page supprimée
500 Internal Server Error	Erreur serveur	Bug dans le code serveur

Exemple concret — admin-api.mathamine.fr

L’API Node.js du serveur répond aux requêtes HTTP :
• POST /save → méthode POST, corps JSON avec le nouveau chapitres.json
• Réponse : 200 OK si succès, 403 si mauvais mot de passe, 500 si erreur d’écriture

HTTP vs HTTPS

HTTPS chiffre l’intégralité de la communication via TLS. Le cadenas 🔒 dans la barre d’adresse indique une connexion HTTPS. Sans HTTPS, n’importe qui sur le même réseau peut lire les données échangées (mots de passe, formulaires…).

Une URL a 3 parties : protocole + domaine + chemin. Ex : https://snt.mathamine.fr/cours.html.

4📄

Le langage HTML

À la fin de cette section · Tu seras capable de lire et écrire des balises HTML simples pour structurer une page.

Définition

HTML (HyperText Markup Language) est le langage de structure des pages Web. Il décrit le contenu et l’organisation d’une page à l’aide de balises (tags). HTML ne gère pas l’apparence visuelle — c’est le rôle du CSS.

Structure d’une page HTML

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Ma page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Titre principal</h1>
    <p>Un paragraphe de texte.</p>
    <a href="https://mathamine.fr">Un lien hypertexte</a>
  </body>
</html>

Les balises essentielles

Balise	Rôle	Exemple
`<h1> … <h6>`	Titres (niveaux 1 à 6)	`<h2>Chapitre 1</h2>`
`<p>`	Paragraphe	`<p>Bonjour !</p>`
`<a href="…">`	Lien hypertexte	`<a href="page.html">Cliquer</a>`
`<img src="…">`	Image	`<img src="photo.jpg" alt="Photo">`
`<ul> / <ol> / <li>`	Listes (non ordonnée / ordonnée)	`<ul><li>Item</li></ul>`
`<div>`	Bloc générique (mise en page)	`<div class="carte">…</div>`
`<span>`	Élément inline générique	`<span class="rouge">mot</span>`
`<strong>`	Texte important (gras)	`<strong>attention</strong>`
`<table>`	Tableau	`<table><tr><td>…</td></tr></table>`

Éditeur HTML interactif

Modifier le code HTML à gauche — la prévisualisation se met à jour en direct :

HTML

<h2>Ma page de cours</h2>
<p>Bienvenue sur <strong>mathamine.fr</strong> !</p>
<ul>
  <li><a href="#">Cours de première</a></li>
  <li><a href="#">Maths expertes</a></li>
</ul>
<img src="https://mathamine.fr/favicon.ico" alt="logo" style="width:32px">

💡 HTML = structure, pas style

Une balise <h1> indique « ceci est un titre important » — elle ne dit pas qu’il doit être grand et bleu. C’est le CSS qui s’occupe de l’apparence. Séparer structure (HTML) et présentation (CSS) est une bonne pratique fondamentale.

HTML structure le contenu d'une page avec des balises (<h1>, <p>, <a>…).

5🎨

Le langage CSS

À la fin de cette section · Tu pourras appliquer un style CSS à un élément HTML (couleur, taille, marges).

Définition

CSS (Cascading Style Sheets — feuilles de style en cascade) est le langage qui gère l’apparence visuelle des pages Web : couleurs, polices, marges, tailles, dispositions…

Syntaxe CSS

h1 {
  color: #1a3a5c;        /* couleur du texte */
  font-size: 2rem;       /* taille de police */
  font-family: 'DM Sans', sans-serif;
}

p {
  margin-bottom: 1rem;   /* marge sous le paragraphe */
  line-height: 1.7;      /* interligne */
}

.carte {                  /* sélecteur de classe */
  background: #eff6ff;
  border-radius: 8px;
  padding: 1rem;
}

#titre-principal {        /* sélecteur d'identifiant */
  text-align: center;
}

Les sélecteurs CSS

Sélecteur	Cible	Exemple
`balise`	Tous les éléments de ce type	`h1 { … }` → tous les titres h1
`.classe`	Éléments avec cet attribut `class`	`.rouge { color: red; }`
`#id`	L’élément unique avec cet `id`	`#menu { … }`
`A B`	Éléments B à l’intérieur de A	`nav a { … }` → liens dans nav
`A:hover`	A quand la souris passe dessus	`a:hover { color: orange; }`

La cascade et la priorité

Le mot Cascading (en cascade) signifie que plusieurs règles peuvent s’appliquer à un même élément. L’ordre de priorité est :

Styles inline (attribut style="…" dans le HTML) — priorité maximale
Règles dans une balise <style> ou un fichier .css lié — selon la spécificité du sélecteur
Styles par défaut du navigateur — priorité minimale

Éditeur CSS + HTML

Ce cours (cours_th2_web.html) est lui-même écrit en HTML/CSS. Tu peux inspecter son code dans le navigateur avec F12 → Inspecteur. Les modifications faites dans l’inspecteur sont temporaires et disparaissent au rechargement.

HTTP = protocole navigateur ↔ serveur (requête / réponse). HTTPS = HTTP + chiffrement. Code 200 = OK, 404 = non trouvé.

6🔍

Les moteurs de recherche

À la fin de cette section · Tu sauras comment Google trie les résultats (PageRank, indexation, mots-clés).

Définition

Un moteur de recherche est un service Web qui permet de retrouver des pages Web à partir de mots-clés. Il maintient un index de milliards de pages Web constamment mis à jour.

Comment fonctionne un moteur de recherche ?

Un moteur de recherche fonctionne en 3 phases :

Exploration (crawling) : des programmes appelés robots ou spiders parcourent le Web en suivant les liens hypertextes de page en page, de façon automatique et continue.
Indexation : le contenu de chaque page est analysé, nettoyé et stocké dans une base de données géante appelée index. Pour chaque mot, l’index liste les pages qui le contiennent.
Classement (ranking) : quand un utilisateur lance une recherche, le moteur consulte l’index et trie les résultats selon des centaines de critères pour afficher les pages les plus pertinentes en premier.

L’algorithme PageRank de Google

Google a révolutionné la recherche avec son algorithme PageRank (1998). L’idée : une page est importante si d’autres pages importantes pointent vers elle.

9.2

Wikipedia

← 8 millions de liens

7.4

Education.gouv.fr

← 120 000 liens

4.1

Blog inconnu

← 12 liens

1.8

Page personnelle

← 2 liens

Les critères de classement

Pertinence du contenu : présence des mots-clés dans le titre, le texte, l’URL
Popularité (PageRank) : nombre et qualité des liens entrants
Fraîcheur : date de publication et de mise à jour
Mobile-friendly : adaptation aux écrans mobiles
Vitesse de chargement : pages lentes pénalisées
HTTPS : pages sécurisées favorisées
Comportement des utilisateurs : taux de clic, temps passé sur la page…

Référencement payant (SEA) vs naturel (SEO)

Type	Principe	Identifiable ?
SEO (naturel)	Optimiser son site pour monter naturellement dans les résultats	Pas de mention « Annonce »
SEA (payant)	Payer pour apparaître en haut des résultats sur certains mots-clés	Mention « Annonce » ou « Sponsorisé »

Moteurs alternatifs et vie privée

Moteur	Pays	Collecte de données	Remarque
Google	🇺🇸 USA	Extensive (profil publicitaire)	Dominant (90% de part de marché)
Bing	🇺🇸 USA	Oui	Intègre l’IA Copilot
DuckDuckGo	🇺🇸 USA	Non	Respect de la vie privée
Qwant	🇫🇷 France	Non	Seul moteur européen indépendant
Ecosia	🇩🇪 Allemagne	Limitée	Plante des arbres avec ses revenus

🔍 Esprit critique

Les résultats d’un moteur de recherche ne sont pas « la vérité ». Ils dépendent des algorithmes (gardés secrets), de la personnalisation (historique, localisation), du référencement payant. Deux personnes qui cherchent la même chose peuvent obtenir des résultats différents. Toujours croiser les sources.

Un moteur de recherche indexe le Web (robots), puis classe les résultats (PageRank = popularité par liens entrants).

7🍪

Cookies et vie privée

À la fin de cette section · Tu pourras expliquer ce que sont les cookies et le rôle du RGPD pour ta vie privée.

Définition

Un cookie est un petit fichier texte stocké par le navigateur sur la machine de l’utilisateur, à la demande d’un site Web. Il permet au serveur de « se souvenir » de l’utilisateur d’une visite à l’autre.

À quoi servent les cookies ?

Type de cookie	Usage	Exemple
Session	Maintenir la connexion (supprimé à la fermeture)	Rester connecté à JupyterHub
Persistant	Se souvenir des préférences (durée limitée)	Langue, thème sombre/clair
Analytique	Mesurer l’audience (combien de visiteurs)	Google Analytics
Publicitaire (tracking)	Suivre l’utilisateur sur plusieurs sites	Afficher des pubs ciblées

Les cookies tiers et le suivi publicitaire

Un cookie tiers est déposé non pas par le site visité, mais par un service externe (régie publicitaire, bouton « J’aime » Facebook, Google Analytics…). Il permet de suivre un utilisateur sur des dizaines de sites différents et construire un profil publicitaire précis.

Exemple de suivi

Tu visites un site de chaussures. Une régie pub y dépose un cookie tiers. Ensuite, sur n’importe quel autre site partenaire de cette régie, tu vois des publicités pour des chaussures. C’est le retargeting.

La réglementation

Le RGPD et la directive ePrivacy imposent en Europe :

Afficher un bandeau cookies avant tout dépôt de cookies non essentiels
Obtenir le consentement explicite de l’utilisateur
Permettre de refuser aussi facilement qu’accepter
Limiter la durée de conservation (13 mois maximum en France)

Gérer ses cookies

Dans tout navigateur : Paramètres → Confidentialité → Cookies. On peut :

Bloquer les cookies tiers (recommandé)
Vider les cookies (déconnecte de tous les sites)
Consulter les cookies déposés par un site (F12 → Application)

L’historique de navigation

Le navigateur enregistre aussi l'historique (pages visitées) et le cache (copies locales des ressources). Ces données peuvent être consultées ou effacées depuis les paramètres. Le mode navigation privée ne les enregistre pas — mais ne rend pas anonyme sur Internet.

⚠️ Navigation privée ≠ anonymat

Le mode privé empêche le navigateur d’enregistrer l’historique et les cookies localement. Mais le FAI, le réseau (Wi-Fi de l’école…) et les serveurs visités voient toujours l’adresse IP et le trafic. Pour l’anonymat, un VPN ou le réseau Tor sont nécessaires.

Un cookie est un petit fichier stocké par le site dans ton navigateur. Le RGPD (2018) impose le consentement et la transparence.

8📢

Enjeux de la publication d’informations

À la fin de cette section · Tu sauras évaluer la fiabilité d'une publication et les enjeux du droit d'auteur.

Qui peut publier sur le Web ?

Aujourd’hui, n’importe qui peut publier du contenu sur le Web : réseaux sociaux, blogs, forums, wikis… Cette ouverture est une richesse (liberté d’expression, partage du savoir) mais aussi une source de risques.

Fausses informations et fact-checking

Type	Définition	Exemple
Misinformation	Fausse info diffusée sans intention de tromper	Rumeur relayée de bonne foi
Désinformation	Fausse info diffusée intentionnellement	Campagne de propagande
Malinformation	Info vraie utilisée pour nuire	Fuite de données privées

Pour vérifier une information : consulter plusieurs sources, privilégier les sources primaires, utiliser des sites de fact-checking (AFP Factuel, Les Décodeurs, Snopes…), vérifier la date de publication.

Droits d’auteur sur le Web

Toute œuvre publiée sur le Web est protégée par le droit d’auteur dès sa création (texte, photo, vidéo, musique…), même sans mention explicite. Utiliser le contenu de quelqu’un sans autorisation est de la contrefaçon.

Les licences Creative Commons permettent aux auteurs de définir précisément les usages autorisés de leurs œuvres :

CC BY : Attribution — utilisation libre si l’auteur est cité
CC BY-SA : Attribution + Partage dans les mêmes conditions
CC BY-NC : Attribution + Non commercial
CC0 : Domaine public — utilisation totalement libre

Empreinte numérique et droit à l’oubli

Tout ce que l’on publie sur le Web laisse une empreinte numérique potentiellement permanente : une photo supprimée peut avoir été copiée, indexée, archivée (Wayback Machine). Le droit à l’oubli (RGPD article 17) permet de demander la suppression de données personnelles, mais ne garantit pas l’effacement total.

💡 Avant de publier

Toujours se poser les questions : cette information est-elle vraie ? Ai-je le droit de la partager ? Ai-je obtenu l’accord des personnes concernées (droit à l’image) ? Est-ce que je serais à l’aise si mon lycée, ma famille, un futur employeur voyait ce contenu dans 10 ans ?

Tout contenu publié est protégé par le droit d'auteur. Vérifie la fiabilité (source, date, croisement) avant de partager.

Sommaire

Histoire du Web

Les URLs — adresses du Web

Anatomie d’une URL

URLs absolues et relatives

Le protocole HTTP

Le modèle client-serveur

Les méthodes HTTP

Les codes de réponse HTTP

HTTP vs HTTPS

Le langage HTML

Structure d’une page HTML

Les balises essentielles

Éditeur HTML interactif

Le langage CSS

Syntaxe CSS

Les sélecteurs CSS

La cascade et la priorité

Les moteurs de recherche

Comment fonctionne un moteur de recherche ?

L’algorithme PageRank de Google

Les critères de classement

Référencement payant (SEA) vs naturel (SEO)

Moteurs alternatifs et vie privée

Cookies et vie privée

À quoi servent les cookies ?

Les cookies tiers et le suivi publicitaire

La réglementation

Gérer ses cookies

L’historique de navigation

Enjeux de la publication d’informations

Qui peut publier sur le Web ?

Fausses informations et fact-checking

Droits d’auteur sur le Web

Empreinte numérique et droit à l’oubli