Derrière la page web : HTML, CSS, HTTP et le secret de PageRank

Tu tapes trois mots dans un moteur de recherche, tu cliques, et une page s'affiche. En moins d'une seconde, quatre inventions ont travaillé pour toi : une adresse (l'URL), un protocole (HTTP), un langage de contenu (HTML) et un langage de mise en forme (CSS). Et avant ton clic, un algorithme avait classé les résultats.

Le Web n'est pas Internet

Internet est le réseau : câbles, routeurs, adresses IP. Le Web (World Wide Web) est un service qui circule dessus, inventé en 1989 par Tim Berners-Lee au CERN : des pages reliées par des liens hypertextes. En 1993, le CERN l'a placé dans le domaine public : n'importe qui peut créer une page.

L'URL : l'adresse d'une page

Une URL (Uniform Resource Locator) désigne une ressource précise. Décortiquons https://www.lumni.fr/lycee/seconde?page=2 :

• https est le protocole (le « s » signifie que l'échange est chiffré) ;
• www.lumni.fr est le nom de domaine du serveur, que le DNS traduit en adresse IP ;
• /lycee/seconde est le chemin de la ressource sur le serveur ;
• ?page=2 est un paramètre envoyé au serveur.

HTTP : une requête, une réponse

Ton navigateur est un client ; la machine qui héberge la page est un serveur. Ils dialoguent en HTTP (HyperText Transfer Protocol). Le client envoie une requête : « GET /lycee/seconde ». Le serveur renvoie une réponse avec un code à trois chiffres et le contenu. Codes à connaître : 200 (tout va bien), 301 (page déplacée), 403 (accès interdit), 404 (page introuvable), 500 (erreur du serveur).

HTML : la structure de la page

Le serveur renvoie du HTML (HyperText Markup Language) : du texte entouré de balises qui disent ce qu'est chaque morceau. Une page complète et valide :

<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <title>Mon club de robotique</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1>Le club robotique du lycée</h1>
 <p class="important">On se retrouve le mardi à 17 h en salle B12.</p>
 <p>Pour commencer, lis le <a href="https://www.python.org">site officiel de Python</a>.</p>
 <img src="robot.jpg" alt="Notre robot suiveur de ligne">
</body>
</html>

<head> contient ce qui ne s'affiche pas (titre de l'onglet, lien vers la feuille de style), <body> ce qui s'affiche. <h1> est le titre principal, <p> un paragraphe, <a href="…"> un lien dont la destination est l'attribut href, <img> une image. Presque toutes les balises s'ouvrent (<p>) et se ferment (</p>).

CSS : la mise en forme

Le HTML dit ce que c'est ; le CSS (Cascading Style Sheets) dit à quoi ça ressemble. Le fichier style.css appelé plus haut :

body { font-family: Arial, sans-serif; background-color: #f4f4f4; }
h1 { color: darkblue; }
p.important { color: red; font-weight: bold; }

Chaque règle commence par un sélecteur (h1 vise toutes les balises h1, p.important les paragraphes de classe important, #menu viserait l'élément d'identifiant menu), suivi de propriétés entre accolades. Un seul fichier CSS habille des centaines de pages : contenu et forme sont séparés.

Les moteurs de recherche et PageRank

Un moteur travaille en trois étapes. Des robots (crawlers) parcourent le Web de lien en lien et copient les pages. Le moteur construit un index : pour chaque mot, la liste des pages qui le contiennent. Enfin, quand tu cherches « volcan Tonga », il doit classer les milliers de pages qui contiennent ces mots.

En 1998, deux étudiants de Stanford, Larry Page et Sergey Brin, ont proposé PageRank : une page est importante si des pages importantes pointent vers elle. Imagine un internaute qui clique au hasard de lien en lien : le PageRank d'une page, c'est la proportion du temps qu'il y passe.

Exemple avec trois pages : A pointe vers B et C ; B pointe vers C ; C pointe vers A. Chaque page part avec un score de 1 et le distribue à parts égales à ses liens sortants : A donne 0,5 à B et 0,5 à C ; B donne 1 à C ; C donne 1 à A. Après une étape, A = 1, B = 0,5 et C = 1,5 : C arrive en tête, car elle reçoit deux liens, dont un de B qui lui donne tout son score. On répète jusqu'à ce que les scores se stabilisent.

À retenir

• Une URL = protocole + nom de domaine + chemin (+ paramètres) ; le Web est un service d'Internet, pas Internet lui-même.
• HTTP : le client (navigateur) envoie une requête, le serveur répond avec un code (200, 404…) et le contenu.
• HTML structure le contenu avec des balises (h1, p, a, img) ; CSS décrit la mise en forme avec des sélecteurs et des propriétés.
• Un moteur de recherche explore, indexe puis classe ; PageRank mesure l'importance d'une page par les liens qui pointent vers elle.

★ Pour aller plus loin

Le vrai PageRank ajoute un ingrédient : avec une probabilité de 85 % l'internaute suit un lien, avec 15 % il saute vers une page quelconque, ce qui évite qu'une page sans lien sortant « avale » tout le score. Les moteurs d'aujourd'hui combinent des centaines d'autres critères.

Un troisième langage, JavaScript, exécuté dans ton navigateur, rend la page interactive : menus qui se déplient, résultats affichés sans recharger. Tu l'étudieras en spécialité NSI.

Le cadenas à côté de l'URL signale HTTPS : les échanges sont chiffrés ; sans lui, un mot de passe tapé dans un café circulerait en clair sur le Wi-Fi.

Sources pour creuser

• Réalisez votre site web avec HTML5 et CSS3, Mathieu Nebra (Eyrolles).
• Histoire illustrée de l'informatique, Emmanuel Lazard et Pierre Mounier-Kuhn (EDP Sciences), chapitre sur la naissance du Web.
• MDN Web Docs (developer.mozilla.org, en français) : la référence des balises HTML et des propriétés CSS.
• Chaîne YouTube Graven - Développement : ses tutoriels HTML et CSS pour débutants.
• interstices.info (Inria) : cherche « PageRank » ; pixees.fr (Inria), rubrique SNT « Le Web » ; programme officiel sur eduscol.education.fr.