LE WEB

Introduction

Qu'est-ce que le Web?

World Wide Web ou plus simplement Web (toile d’araignée) :
- Un des services disponibles sur internet : Système de publication d'hypertextes.
- Basé sur trois inventions :
  - HTML
  - HTTP
  - Adresse Web ou URL
HTML (Hypertext Markup Language) : Principal langage utilisé pour créer des pages Web.
HTTP (Hypertext Transfer Protocol) : Protocole de communication pour le Web.
Adresse Web ou URL : Adresse qui identifie une page Web.

Autres définitions

Hypertexte : Ensemble de documents contenant des hyperliens.
Hyperlien ou lien hypertexte : Référence permettant de passer automatiquement d'un document consulté à un autre document.
XHTML (eXtensible HyperText Markup Language) : Variante du HTML, conforme au langage XML (Extensible Markup Language), qui devait remplacer le HTML.

Bref historique

Date	Evénement	Origine
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).
1995	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 :

Le navigateur (ou client Web) envoie au serveur Web une requête.
Le serveur Web retourne au navigateur sa réponse.

Il existe deux sortes de serveur Web :

Le serveur HTTP.
Le serveur HTTPS (HyperText Transfer Protocol Secured) : Version chiffrée de HTTP.

Exemples de navigateurs

Chrome
Firefox
Safari
Opera
Edge

Exemples de serveurs Web

Apache
Nginx
IIS (Internet Information Service)
LiteSpeed
Google Servers
Lighttpd

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 :

Un EDI (Environnent de Développement Intégré).
Ou un simple éditeur de texte.

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

La plupart fonctionnent par paires. Du texte est encadré entre une balise ouvrante et la balise fermante correspondante.
Un petit nombre de balises sont dites auto-fermantes ou vides.
Dans quelques cas particuliers (<li>, <option>...), la balise fermante est facultative, elle peut éventuellement être omise.

Balises ouvrantes et fermantes

Balises	Utilité
<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

Balises	Utilité
<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.

Balises	Utilité
<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">

img : La balise.
scr : L'attribut de balise.
logo.png : La valeur de l'attribut.

Langages associés au HTML

Les applications Web peuvent s'exécuter :

Coté client.
Coté serveur.
En partie coté client, en partie coté serveur.

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.

Le code en JavaScript se place entre les balises <script> et </script>.
Le code en CSS se place entre les balises <style> et </style>.
Le code en SVG se place entre les balises <svg> et </svg>.

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 :

PHP
JavaScript
Python
Perl
...

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 :

L'en-tête HTTP.
Et la page au format HTML.

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 :

L'en-tête HTTP.
Et, éventuellement, d'autres informations : Cookie, valeurs d'un formulaire...

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 :

Chiffrement : Procédé qui rend un document incompréhensible sans clé de déchiffrement.
Chiffrement symétrique : La même clé sert à chiffrer et déchiffrer.
Chiffrement asymétrique : Une clé sert à chiffrer, une autre clé à déchiffrer. Une clé est publique, l'autre privée.
Déchiffrement (déchiffrage) : Décodage d'un texte connaissant le moyen de chiffrement et la clé.
Décryptage : Décodage d'un texte sans connaissance du moyen de chiffrement.

A éviter :

Chiffrage : Evaluation du prix de quelque chose.
Cryptage : Ne veut rien dire (crypter signifierait chiffrer un document sans la clé).

Chiffrer peut signifier :

Coder un document grâce à une clé.
Evaluer le prix de quelque chose.

Fonctionnement de la communication chiffrée

Il est assez complexe. Il fait appel :

A un organisme de certification pour l'authentification du serveur.
Au chiffrement symétrique produit par le client.
Au chiffrement asymétrique produit par le serveur.

Le protocole HTTPS :

Chiffre le message (donc l'URL contenue dans l'en-tête HTTPS).
Ne chiffre pas les en-têtes TCP et IP.

Les cookies

Définition

Un cookie :

Est un fichier texte.
Enregistré sur le client (votre ordinateur).
Par le site Web que vous visitez.

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...