Le web, c'est quoi et comment ça marche ? — Alexandre Niveau

Généralités sur Internet

Internet est un réseau de réseaux informatiques

Une machine connectée à un de ces réseaux est « sur Internet »

Elle est identifiée par une adresse IP, comme 212.65.87.234

Elle peut communiquer avec n'importe quelle autre machine connectée si elle connaît son adresse IP

Il y a un « annuaire » d'adresses IP, le DNS, qui permet de donner un nom de domaine aux machines (comme google.com ou www.unicaen.fr)

Attention, ces généralités sont outrageusement simplifiées !

Internet ≠ Web

Dans le langage courant, termes plus ou moins synonymes… Mais la distinction est importante :

Internet est en quelque sorte une infrastructure
Le web est une application qui fonctionne grâce à Internet
Les jeux vidéo massivement multijoueurs en sont d'autres

Distinction floue pour le grand public, car les applications sur Internet clairement séparées du web sont de plus en plus rares (exemple du courrier électronique)

World Wide Web

Définition : un système de documents hypertextes (liés entre eux) fonctionnant sur l'Internet de façon décentralisée

Mis au point par Tim Berners-Lee (CERN) entre 1989 et 1991

Constitué de trois éléments fondamentaux :

un système d'identificateurs uniques pour les documents (URL)
un langage de balisage pour les documents (HTML)
un protocole de transfert de documents (HTTP)

Comment ça marche (en gros)

Jean-Marcel est sur le web. Il clique sur un lien vers le blog de Toto.

Le navigateur voit que le lien mène à l'URL http://www.toto.fr/blog/posts/243.html. Il va donc essayer de télécharger la page correspondante.

Le navigateur analyse l'URL et voit que la machine qui connaît le contenu de cette page (le serveur web) s'appelle www.toto.fr. Il demande l'adresse IP de cette machine à un serveur DNS, qui lui répond 213.186.33.4.

Il envoie un message HTTP à cette machine pour lui demander le contenu de la page /blog/posts/243.html

La machine lui envoie un message HTTP en réponse, qui contient le contenu de la page. Ce contenu est écrit dans le langage HTML.

Le navigateur de Jean-Marcel analyse le HTML pour mettre la page en forme, et affiche le résultat.

Principes de base du web

Plus formellement : le web est une application client-serveur.

N'importe quelle machine connectée à Internet peut être un serveur web :

elle écoute sur son port 80
elle interprète les requêtes HTTP reçues
elle renvoie les réponses HTTP, contenant du HTML, au demandeur

Un client est un navigateur web (comme Firefox ou Chrome) :

il envoie des requêtes HTTP aux serveurs
il interprète le HTML reçu en réponse et met en forme le document

Les pages HTML contiennent des liens unidirectionnels vers d'autres pages, pas forcément sur le même serveur, identifiées par une URL

Lors d'un clic sur un lien, le navigateur web effectue la requête HTTP correspondant à l'URL

HTTP

HyperText Transfer Protocol ; c'est le langage que parlent le serveur web et le navigateur web pour se communiquer les pages

Élément le plus fondamental du web, et aussi le plus caché pour le grand public

Pas complètement cependant :

son nom apparaît au début des URL (mais les navigateurs actuels ne l'affichent plus)
les célèbres cookies sont un élément du protocole
certains codes de statut sont bien connus… (erreur 404)

HTTPS est la version sécurisée de HTTP : les messages sont chiffrés, et donc illisibles pour quiconque les intercepterait entre le client et le serveur ex: wifi public

Requête HTTP

Structure d'une requête HTTP :

Une ligne de requête avec une commande (request method), un chemin et la version du protocole
Plusieurs lignes de champs d'en-tête
Une ligne vide
Le corps du message (optionnel)

Commandes : GET, POST, HEAD, PUT, DELETE…

Champs d'en-tête : Host, User-Agent, Accept… seul Host est obligatoire

GET /blog/posts/243.html HTTP/1.1
Host: www.toto.fr
Accept: text/html
Accept-Charset: utf-8
Connection: keep-alive

Réponse HTTP

Structure d'une réponse HTTP :

Une ligne de statut avec le status code et un petit message explicatif
Plusieurs lignes de champs de réponse
Une ligne vide
Le corps du message (optionnel), typiquement le code HTML de la page

Codes : 200 (OK), 404 (not found), 500 (internal server error)…

Champs de réponse : Content-type, Last-Modified, Location…

HTTP/1.1 200 OK
Date: Mon, 05 Jan 2015 12:12:12 GMT
Last-Modified: Wed, 02 Jan 2013 18:18:18 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 323
Connection: close

<html>
  <head> <title>Le blog de Toto</title> </head>
  <body> <p>Bienvenue sur mon blog !</p> </body>
</html>

faire une démo avec netcat : netcat example.com 80 <demo/requete.txt ça devrait donner qqch comme demo/reponse.txt

URL

Uniform Resource Locator : adresse d'une ressource. Sur le web, c'est généralement une page.

Une URL contient toutes les informations nécessaires pour récupérer la ressource. Exemple : https://ensweb.users.info.unicaen.fr/cours/HTML/fiche.php

le protocole (http:// ou https:// pour des pages web, file:// pour un fichier local…)
le nom de domaine du serveur (ici ensweb.users.info.unicaen.fr : c'est la « machine » ensweb du domaine users.info.unicaen.fr. Les serveurs web s'appellent souvent www pour des raisons historiques)
le chemin vers le fichier auquel on accède (ici /cours/HTML/fiche.php)

HTML

HyperText Markup Language, « langage de balisage hypertexte » : c'est le langage dans lequel les pages web sont écrites

Simplement du texte avec des balises : des caractères spéciaux qui indiquent la sémantique (le sens) des éléments du contenu,

structure de la page : blocs, titres…
forme du texte : mots importants, paragraphes, listes…
contenu non textuel : liens, images…

Le HTML est interprété différemment suivant le type de client (user agent)

Web et User Agent

Un des principes de base du web est son accessibilité : l'information peut être récupérée de nombreuses façons

navigateurs visuels : Firefox, Chrome, IE, Opera…
navigateurs en mode texte : Lynx, Links, w3m… Affichent uniquement le texte de la page, avec une mise en forme minimale
navigateurs audio : pour les mal-voyants ou les situations hors écran. Lisent le texte et donnent des informations sur la structure, les images, etc.
robots : extraient de l'information à partir du contenu des documents. Moteurs de recherche, analyseurs linguistiques, etc.

démo : montrer comment on se connecte sur sandbox.info.unicaen.fr, bidouiller la page

Autres constituants du web

Le HTML représente le contenu d'une page et sa sémantique ; pour contrôler son apparence visuelle, un autre langage est utilisé, CSS

Langages de programmation côté serveur :

Aux débuts du web, le contenu des sites étaient statiques : l'auteur écrivait des pages HTML et les gens les lisaient.
Très rapidement sont apparus les sites dynamiques, permettant aux internautes de modifier leur contenu.
Pour cela, le serveur web doit utiliser une base de données pour stocker les informations qui changent…
… et il doit sans cesse générer des pages mises à jour avec les nouvelles informations.
Cela nécessite un « langage de programmation côté serveur ». Le plus connu est PHP, mais il est aussi possible d'utiliser Java (J2EE), Python (Django), Ruby (Ruby on Rails), Node…

Une page HTML-CSS est très peu interactive. Même si le site est dynamique, le contenu n'est pas directement manipulable (par ex., Google Maps ne pourrait pas exister uniquement en HTML-CSS). Le langage utilisé pour rendre les pages interactives s'appelle JavaScript

Normalisation

W3C World Wide Web Consortium w3.org

Créé par Tim Berners-Lee, l'inventeur du web
Processus de normalisation des technologies du web

WHATWG Web Hypertext Application Technology Working Group whatwg.org

Créé par les fabricants de navigateurs
Pour se libérer du W3C, dont le processus est jugé trop lent

Juillet 2012 : scission des travaux sur HTML5 entre le W3C et WHATWG (articles Techcrunch, Le Monde)

Les standards du W3C sont plutôt prescriptifs (ils décrivent comment les choses doivent être), tandis que ceux du WHATWG (living standard) sont plutôt descriptifs (ils décrivent comment les choses sont)