LE WEB

Introduction

Définitions

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.

Repères historiques

Date	Evènement
1990	Premier serveur : CERN httpd Premier navigateur : WorldWideWeb rebaptisé Nexus	Créés par le britannique Tim Berners-Lee au CERN (Conseil européen pour la recherche nucléaire) près de Genève (dans le bâtiment 31 situé en France).
1991	Premier site Web au monde (copie sur http://info.cern.ch)
1993	Premier navigateur graphique : Mosaic	Créé par les américains Marc Andreessen et Eric Bina au centre de recherches 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 puis par l'université Keiō, au Japon en 1996.
1995	Naissance du JavaScript	Créé par l'américain 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.
Sa version chiffrée HTTPS (HyperText Transfer Protocol Secured), créée en 1994.

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.

Types de balises

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

Exemple de lien vers la page d'accueil :

Repère	Désignation
Repère	Française	Anglaise
1	Elément	Element
2	Balise ouvrante	Opening tag
3	Balise fermante	Closing tag
4	Contenu	Content
5	Attribut de balise	Tag attribute
6	Nom de l’attribut	Attribute name
7	Valeur de l’attribut	Attribute value

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 de la page HTML, entre <?php et ?>.

PHP

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

Protocoles HTTP et HTTPS

Avec le protocole HTTP, les messages ne sont pas chiffrés. On dit que la communication est en clair. Le protocole HTTPS, version chiffrée de HTTP, permet de chiffrer tous les messages échangés entre le serveur et le client.

En-tête de requête ou de réponse

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

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

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

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

Exemple de requête :

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

Cookie: _ga=GA1.2.374864853 ...

Exemple de réponse :

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

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

Au chiffrement asymétrique (produit par le serveur).
Au chiffrement symétrique (produit par le client).
A un organisme de certification de confiance agréé par les pouvoirs publics.
A un système de certificats.

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 pourra par la suite être réutilisé par le serveur qui l’a déposé.

Obligation

Depuis 2018, le RGPD s'applique dans l'union européenne. Ainsi, l'auteur d'un site Web n'a pas le droit de déposer un cookie sans avoir obtenu le consentement de l'utilisateur.

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 à des fins publicitaires. Les cookies sont assez controversés pour cette raison. Certains sites deviennent inutilisables si l'utilisateur ne clique pas sur le bouton accepter les cookies ou si les cookies du navigateur sont désactivés...