Le Web

B.O. spécial n° 1 du 22 janvier 2019 - SNT Seconde

Contenus	Capacités attendues
Pages Web et interaction avec l'utilisateur	Distinguer ce qui relève du contenu d'une page et de son style de présentation. Étudier et modifier une page HTML simple.
Repérage dans le Web : URL	Déchiffrer l'URL d'une page Web. Déterminer la partie d'une URL correspondant au nom du site hébergeant la page et au fichier désignant la page.
Liens hypertextes	Comprendre le renvoi d'une page Web vers une autre à l'aide d'un lien hypertexte.
Moteurs de recherche : exploration, indexation, classement	Mener une analyse critique des résultats fournis par un moteur de recherche. Comprendre les enjeux de la publication d'informations.
Paramètres de sécurité d'un navigateur	Maîtriser les réglages les plus importants concernant la gestion des cookies, la sécurité et la confidentialité d'un navigateur.

1. Qu'est-ce que le Web ?

Le Web (World Wide Web) est un des services fonctionnant sur Internet, au même titre que le courrier électronique ou la messagerie instantanée. Il ne faut donc pas confondre Internet (le réseau physique mondial) et le Web (un service accessible via ce réseau).

Le Web permet de consulter des sites Web à l'aide d'un navigateur (Firefox, Chrome, Edge, Safari...). Ces sites sont constitués de pages Web reliées entre elles par des liens hypertextes, ce qui forme une immense toile (web en anglais).

2. Pages Web : HTML et CSS

2.1. Le langage HTML

Une page Web est un document que le navigateur peut afficher. Elle est écrite dans le langage HTML (HyperText Markup Language, langage de balisage hypertexte).

HTML utilise des balises pour structurer le contenu. Une balise s'ouvre avec <nom> et se ferme avec </nom> :

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Ma première page</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Bienvenue</h1>
    <p>Ceci est un paragraphe.</p>
    <img src="photo.jpg" alt="Une photo" />
</body>
</html>

Le document HTML est divisé en deux parties principales :

Partie	Balise	Rôle
Tête	`<head>...</head>`	Informations sur la page (titre dans l'onglet, encodage, lien vers la feuille de style). Non visible directement.
Corps	`<body>...</body>`	Contenu visible de la page (textes, images, liens, tableaux...).

Les balises courantes du corps :

Balise	Rôle
`<h1>` à `<h6>`	Titres (du plus grand au plus petit)
`<p>`	Paragraphe
`<a href="...">`	Lien hypertexte
`<img src="..." alt="..." />`	Image
`<ul>`, `<ol>`, `<li>`	Listes à puces ou numérotées
`<table>`, `<tr>`, `<td>`	Tableau
`<br/>`	Retour à la ligne

2.2. Le langage CSS

Le CSS (Cascading Style Sheets, feuilles de style en cascade) est le langage qui définit la présentation visuelle d'une page Web : couleurs, polices, tailles, dispositions, marges...

Le CSS est généralement écrit dans un fichier séparé (par exemple style.css) et relié au HTML via la balise <link> dans le <head> :

<link rel="stylesheet" href="style.css" type="text/css" />

Exemple de règles CSS :

body {
    background-color: beige;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

h1 {
    color: darkblue;
    text-align: center;
}

img {
    float: left;
    margin-right: 20px;
}

2.3. Séparation fond et forme

Le principe fondamental du Web est de séparer le contenu (HTML) de sa présentation (CSS). Un même fichier CSS peut être appliqué à plusieurs pages, garantissant une apparence cohérente sur tout un site. Inversement, un même contenu HTML peut changer radicalement d'apparence simplement en changeant la feuille de style qui lui est associée.

Considérons le fichier HTML suivant :

<h1>Les planètes du système solaire</h1>
<p class="intro">Notre système solaire compte huit planètes.</p>
<ul>
    <li>Mercure</li>
    <li>Vénus</li>
    <li>Terre</li>
    <li>Mars</li>
</ul>

Style A : classique
Style B : moderne et coloré

body {
    background-color: white;
    font-family: Georgia, serif;
    color: #333;
}
h1 {
    color: navy;
    border-bottom: 2px solid navy;
}
.intro {
    font-style: italic;
    color: #666;
}
li {
    list-style-type: disc;
}

Résultat : une page sobre, avec un titre bleu marine souligné, un texte d'introduction en italique gris et une liste à puces classique sur fond blanc.

body {
    background-color: #1a1a2e;
    font-family: Arial, sans-serif;
    color: #eee;
}
h1 {
    color: #e94560;
    text-transform: uppercase;
    text-align: center;
}
.intro {
    background-color: #16213e;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
li {
    list-style-type: "🪐 ";
    margin: 5px 0;
}

Résultat : une page sombre au style moderne, avec un titre rouge centré en majuscules, un texte d'introduction dans un encadré arrondi et une liste décorée d'émojis.

Le contenu HTML est strictement identique dans les deux cas. Seule la feuille CSS change. C'est tout l'intérêt de cette séparation :

On peut modifier l'apparence d'un site sans toucher au contenu.
Un designer peut travailler sur le CSS pendant qu'un rédacteur travaille sur le HTML.
Un même fichier CSS peut être appliqué à toutes les pages d'un site pour assurer une cohérence visuelle.

3. Les URL

3.1. Qu'est-ce qu'une URL ?

Pour accéder à une page Web, le navigateur a besoin de connaître son adresse unique sur le Web. Cette adresse est l'URL (Uniform Resource Locator, localisateur universel de ressource).

Voici comment se décompose une URL :

https://www.mon-site.fr/pages/cours/index.html

Élément	Valeur	Rôle
Protocole	`https://`	Méthode de communication (HTTP ou HTTPS pour la version sécurisée)
Nom de domaine	`www.mon-site.fr`	Identifie le serveur qui héberge le site
Chemin	`/pages/cours/`	Répertoires sur le serveur
Ressource	`index.html`	Le fichier demandé

3.2. URL absolue et URL relative

Une URL absolue donne l'adresse complète depuis le protocole : https://www.mon-site.fr/images/photo.jpg
Une URL relative indique le chemin par rapport à la page courante : ../images/photo.jpg

L'URL relative est utilisée pour relier les pages d'un même site entre elles (liens internes), tandis que l'URL absolue sert à pointer vers des ressources externes.

3.3. HTTP et HTTPS

Quand on entre une URL dans le navigateur, celui-ci envoie une requête HTTP au serveur qui héberge la page. Le serveur répond en renvoyant le document demandé.

HTTP (HyperText Transfer Protocol) : protocole de transfert hypertexte, non chiffré.
HTTPS (HTTP Secure) : version sécurisée, les échanges sont chiffrés. Le cadenas affiché dans la barre d'adresse indique une connexion HTTPS.

4. Les liens hypertextes

4.1. Principe

Les liens hypertextes sont le fondement du Web. Ils permettent de naviguer de page en page en cliquant sur un élément cliquable (texte, image...).

Tim Berners-Lee les définit ainsi : "L'hypertexte est un moyen de lier des informations de diverses natures et d'y accéder, comme un réseau de nœuds dans lequel l'utilisateur peut naviguer à volonté."

En HTML, un lien se crée avec la balise <a> :

<a href="contact.html">Nous contacter</a>

<a href="https://www.wikipedia.org">Wikipedia</a>

4.2. Types de liens

Type	Description	Exemple
Lien interne	Vers une page du même site	`<a href="page2.html">Page 2</a>`
Lien externe	Vers un autre site Web	`<a href="https://www.exemple.fr">Exemple</a>`
Lien ancre	Vers un endroit précis de la même page	`<a href="#section3">Aller à la section 3</a>`

5. Les moteurs de recherche

5.1. Qu'est-ce qu'un moteur de recherche ?

Un moteur de recherche est une application Web qui permet de trouver des ressources sur le Web à partir d'une requête formulée avec des mots clés. Les plus connus sont Google, Bing, Yahoo, Qwant, DuckDuckGo...

5.2. Fonctionnement en trois étapes

Le fonctionnement d'un moteur de recherche repose sur trois étapes :

Étape 1 : Exploration (crawling)

Des programmes appelés robots d'exploration (ou crawlers, spiders) parcourent en permanence le Web en suivant les liens hypertextes de page en page. Ils découvrent ainsi de nouvelles pages et détectent les mises à jour.

Étape 2 : Indexation

Le contenu découvert est analysé et stocké dans une immense base de données appelée index. Chaque page est catégorisée selon ses mots clés, son contenu, sa structure...

Étape 3 : Classement et diffusion

Quand un utilisateur soumet une requête, le moteur compare les mots clés avec son index, classe les résultats par pertinence et les affiche.

5.3. Critères de classement

Les moteurs de recherche utilisent des algorithmes pour classer les résultats. Les principaux critères sont :

Critère	Description
Pertinence	Présence et fréquence des mots clés dans la page
Popularité (PageRank)	Nombre et qualité des liens pointant vers la page
Qualité technique	Vitesse de chargement, compatibilité mobile, HTTPS
Fraîcheur	Date de mise à jour du contenu
Engagement	Taux de clics, temps passé sur la page

5.4. Focus : l'algorithme PageRank

Parmi les critères de classement, la popularité d'une page joue un rôle central. En 1998, Larry Page et Sergey Brin, fondateurs de Google, ont mis au point un algorithme appelé PageRank (du nom de Larry Page) pour mesurer cette popularité de manière automatique.

Le principe : le surfeur aléatoire

Pour comprendre PageRank, on peut imaginer un internaute fictif qui navigue au hasard sur le Web :

Il arrive sur une page quelconque.
Il choisit au hasard l'un des liens présents sur cette page et clique dessus.
Il recommence indéfiniment.

Au bout d'un très grand nombre de clics, certaines pages auront été visitées beaucoup plus souvent que d'autres. Les pages les plus visitées par ce surfeur aléatoire sont considérées comme les plus importantes : ce sont celles vers lesquelles de nombreux liens convergent, en particulier depuis des pages elles-mêmes importantes.

Le Web comme graphe orienté

On peut représenter le Web comme un graphe orienté : chaque page est un nœud (un point) et chaque lien hypertexte est une flèche allant de la page qui contient le lien vers la page de destination.

    A ───→ B
    ↑      │
    │      ↓
    D ←─── C
    │      ↑
    └──────┘

Dans cet exemple, la page A pointe vers B, B pointe vers C, C pointe vers D et vers A, et D pointe vers C. On dit que les flèches sont orientées car un lien de A vers B ne crée pas automatiquement un lien de B vers A.

Les pièges du graphe

Le surfeur aléatoire peut rencontrer deux situations problématiques :

Piège	Description	Conséquence
Le puits	Une page sans aucun lien sortant (aucune flèche qui en part).	Le surfeur est bloqué : il ne peut plus cliquer nulle part.
La poche Web	Un petit groupe de pages qui ne contiennent que des liens entre elles, sans lien vers l'extérieur.	Le surfeur tourne en boucle dans ce groupe et ne visite jamais le reste du Web.

Le facteur d'amortissement

Pour résoudre ces problèmes, l'algorithme PageRank introduit un facteur d'amortissement (souvent fixé à 0,85, soit 85 %) :

À chaque étape, le surfeur a 85 % de chances de suivre un lien au hasard sur la page courante.
Il a 15 % de chances de se « téléporter » vers une page complètement aléatoire du Web, comme s'il tapait une nouvelle adresse au hasard dans la barre du navigateur.

Ce mécanisme garantit que le surfeur ne reste jamais piégé : même s'il tombe dans un puits ou une poche, il finira par en sortir grâce à la téléportation aléatoire.

6. Sécurité et confidentialité sur le Web

6.1. Les cookies

Un cookie est un petit fichier texte déposé sur l'ordinateur de l'utilisateur par un site Web visité. Il permet au site de mémoriser des informations.

Type de cookie	Rôle	Exemple
Cookie de session	Mémoriser des informations temporaires	Contenu d'un panier d'achat
Cookie permanent	Retenir des préférences entre les visites	Langue préférée, identifiant de connexion
Cookie tiers	Déposé par un site différent de celui visité	Publicités ciblées, trackers de réseaux sociaux

6.2. Paramètres de sécurité du navigateur

Les navigateurs proposent des réglages pour protéger la vie privée :

Gestion des cookies : accepter, refuser ou supprimer les cookies (notamment les cookies tiers).
Historique de navigation : liste des pages visitées, que l'on peut consulter et supprimer.
Navigation privée : mode dans lequel le navigateur ne conserve ni l'historique, ni les cookies à la fin de la session.
Bloqueur de publicités / trackers : extensions ou réglages intégrés pour bloquer les éléments indésirables.

6.3. L'hameçonnage (phishing)

L'hameçonnage (ou phishing) est une technique frauduleuse visant à tromper l'utilisateur pour lui soutirer des informations personnelles (identifiants, données bancaires...). L'attaquant crée une page Web imitant un site de confiance (banque, service public...).

Pour s'en protéger :

Vérifier l'URL dans la barre d'adresse (les faux sites ont des adresses légèrement différentes).
Ne jamais cliquer sur des liens suspects reçus par email.
Vérifier la présence du cadenas HTTPS.

7. Repères historiques

Le Web s'inscrit dans une histoire plus large, à la croisée de l'informatique et des événements mondiaux. Voici les grandes dates à retenir :

Date	Événement du Web	Contexte mondial
1965	Ted Nelson invente le concept d'hypertexte : l'idée de relier des documents entre eux par des liens cliquables.	Guerre froide, premiers pas de l'informatique personnelle.
1989	Tim Berners-Lee invente le Web au CERN : il propose un système de documents liés par des liens hypertextes, accessibles via un réseau.	Chute du mur de Berlin - fin de la guerre froide.
1990	Premier site Web et premier navigateur (WorldWideWeb), créés par Tim Berners-Lee.	Réunification de l'Allemagne.
1991	Le Web est ouvert à tous les utilisateurs d'Internet.	Dissolution de l'URSS.
1993	Mosaic, premier navigateur grand public avec affichage des images directement dans les pages. Le Web devient accessible au-delà du monde universitaire.	Création de l'Union européenne (traité de Maastricht).
1994	Premiers cookies ; création de Yahoo (annuaire Web).	Premiers achats en ligne.
1995	Création de JavaScript (langage rendant les pages interactives) et de PHP (langage permettant de générer des pages Web dynamiques côté serveur).	Lancement d'Amazon et d'eBay.
1998	Création de Google et de son algorithme PageRank.	-
2001	Standardisation du DOM (Document Object Model), permettant à JavaScript de modifier dynamiquement le contenu des pages. Lancement de Wikipédia.	Attentats du 11 septembre.
2005	Web 2.0 : les utilisateurs deviennent producteurs de contenu (blogs, wikis, réseaux sociaux).	Lancement de YouTube.
2008	Essor des applications mobiles avec l'ouverture de l'App Store (Apple).	Crise financière mondiale.
2010	HTML5 : pages Web plus riches et interactives. Explosion de l'usage du Web sur smartphones et tablettes.	Printemps arabe - rôle majeur des réseaux sociaux dans les mouvements de contestation.

8. Tableau récapitulatif

Notion	Définition
Web	Service d'Internet permettant de consulter des pages via un navigateur
HTML	Langage de balisage définissant la structure et le contenu d'une page Web
CSS	Langage de style définissant la présentation visuelle d'une page
Séparation fond / forme	Principe consistant à séparer le contenu (HTML) de sa présentation (CSS)
URL	Adresse unique permettant de localiser une ressource sur le Web
Lien hypertexte	Élément cliquable permettant de naviguer entre les pages
Moteur de recherche	Application qui explore, indexe et classe les pages du Web
PageRank	Algorithme mesurant l'importance d'une page selon le nombre et la qualité des liens qui pointent vers elle
Cookie	Petit fichier déposé par un site pour mémoriser des informations
HTTPS	Version sécurisée du protocole HTTP (échanges chiffrés)
Hameçonnage	Technique frauduleuse imitant un site de confiance pour voler des données