LE WEB

Introduction

Qu'est-ce que le Web?

Autres définitions

Bref historique

DateEvénementOrigine
1990 Premier serveur : CERN httpd
Premier navigateur : WorldWideWeb rebaptisé Nexus
Créés au bâtiment 31 (situé en France) du CERN (Conseil européen pour la recherche nucléaire) près de Genève par le britannique Tim Berners-Lee.
1991 Premier site Web au monde (copie sur http://info.cern.ch)
1993 Premier navigateur graphique : Mosaic Créé au centre de recherches américain NCSA (National Center for Supercomputing Applications)
1994 Naissance du W3C (World Wide Web Consortium) Fondé par Tim Berners-Lee au MIT (Massachusetts Institute of Technology)
Rejoint par l'INRIA (Institut national de recherche en informatique et en automatique) en 1995
Rejoint par l'université Keiō, au Japon en 1996.
1995 Naissance du JavaScript Créé par Brendan Eich pour le compte de la Netscape Communications Corporation (entreprise américaine, créatrice du navigateur Netscape et fournisseur d'accès à internet).
Naissance du PHP/FI (Personal Home Page Tools/Form Interpreter) qui deviendra en 1998 PHP version 3 (Hypertext Preprocessor) Créé par le groenlandais et canadien Rasmus Lerdorf, pour son propre compte. Développés par les israéliens Andi Gutmans et Zeev Suraski, cofondateurs de Zend Technologies.
2000 Adoption du CSS (Cascading Style Sheets) par les navigateurs W3C
2001 Standardisation des pages grâce au DOM (Document Object Model)
2011 Création du standard WebGL (contenus 3D)

Client et serveur Web

Principe

Deux sortes de données s'échangent entre le client et le serveur :

Il existe deux sortes de serveur Web :

Exemples de navigateurs

Exemples de serveurs Web

Langage HTML

Structure d'une page HTML

Une page au format HTML dans sa version 5 se structure de la manière suivante :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    Contenu de la page...
  </body>
</html>

Elle se crée avec :

Le HTML comporte environ 110 balises différentes (140 en comptant les balises abandonnées, dépréciées ou expérimentales) :

Balises ouvrantes et fermantes

BalisesUtilité
<a href="...">...</a>Lien vers une autre page
<h1>...</h1>Titre de la page
<p>...</p>Paragraphe
<i>...</i>Texte en italique
<u>...</u>Texte souligné
<b>...</b>Texte en gras

Balises vides ou auto-fermantes

BalisesUtilité
<img src="...">Image Incorporée dans la page
<br>Saut de ligne
<hr>Ligne horizontale

Balises génériques

Deux balises servent à toutes sortes d'utilisations. On leur applique, pour cela, le style CSS adéquat.

BalisesUtilité
<span>...</span>Balise générique de type en ligne
<div>...</div>Balise générique de type bloc

Terminologie

Prenons en exemple :

<img src="logo.png">

Langages associés au HTML

Les applications Web peuvent s'exécuter :

Langages interprétés coté client

Le HTML est souvent mêlé à d'autres langages. Le code est envoyé par le serveur au navigateur puis interprété par ce dernier.

Quelques exemples basiques sont présentés ci-dessous.

JavaScript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      alert("Bonjour!")
    </script>
  </head>
  <body>
    Bonjour...
  </body>
</html>

CSS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body { color: #3322bb; }
    </style>
  </head>
  <body>
    Bonjour...
  </body>
</html>

SVG

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <svg width="120" height="120">
      <rect x="0" y="0" width="120" height="120" fill="#bbf"/>
      <circle cx="120" cy="60" r="60" fill="#33cc22" opacity=".6" />
    </svg>
  </body>
</html>

Langages interprétés coté serveur

Les données entrées par l'utilisateur sont envoyées au serveur, traitées par le serveur, lequel retourne au client le résultat du traitement. Les langages interprétés coté serveur sont nombreux :

Dans le cas du PHP, le code se place au sein même de la page HTML, entre <?php et ?>.

PHP

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <?php
      echo "Bonjour";
    ?>
  </body>
</html>

Le protocole HTTP

Le message n'étant pas chiffré, on dit que la communication est en clair.

En-tête de réponse

Lorsqu’un serveur Web envoie sa réponse à un navigateur Web, il envoie :

Exemple de réponse HTTP :

HTTP/1.1 200 OK
Date: Sat, 20 Nov 2010 13:37:00 GMT
Content-Type: text/HTML
Content-Length: 2644
Content-Language: fr
Last-Modified : Fri, 14 Jan 2019 08:25:13 GMT

<!doctype html>
<html>
  <meta charset="utf-8">
  ...

En-tête de requête

Lorsqu’un navigateur Web envoie une requête à un serveur Web, il envoie :

GET /fichier.html HTTP/1.1
Host: www.monsite.com
User-Agent: Mozilla/5.0 Safari/531.9

Cookie: _ga=GA1.2.374864853 ...

Le protocole HTTPS

Ce protocole permet de chiffrer tous les messages échangés entre le serveur et le client.

Clés de chiffrement

Définitions :

A éviter :

Chiffrer peut signifier :

Fonctionnement de la communication chiffrée

Il est assez complexe. Il fait appel :

Le protocole HTTPS :

Les cookies

Définition

Un cookie :

Il ne pourra par la suite être réutilisé que par le serveur qui l’a déposé.

Usages

En théorie

Rendre plus facile la navigation sur un site lors de nouvelles visites d’un internaute, ses préférences étant enregistrées.

En pratique?

Récolter des données personnelles? A des fins publicitaires? Les cookies sont assez controversés pour ces raisons. Certains sites deviennent inutilisables si les cookies du navigateur sont désactivés...