4.B - Exemple du Web

On va maintenant développer le fonctionnement du Web. Le Web est une des applications les plus utilisées sur Internet, qui consiste à pouvoir récupérer des documents sur un serveur : des documents qui sont liés entre eux par des liens et qui sont de nature très variée. On peut bien sûr récupérer des pages web (des documents écrits en HTML) à l'aide d'un navigateur web. Dans ces pages web, il est possible d'incorporer des objets de différents types : vidéos, images, documents, liens vers des documents et liens vers d'autres pages web. Nous allons également voir le protocole HTTP. Ce protocole permet de décrire les échanges entre le navigateur Web et le serveur Web. Nous verrons également comment on peut faire du web interactif, c'est-à-dire avec des pages dynamiques dont le contenu dépend des éléments qui ont pu être saisis dans la page précédente qui contient un formulaire.

Qu'est-ce que le Web ?

Le Web repose sur le modèle client-serveur, comme nous l'avons vu dans le cours précédent. C'est-à-dire que le client fait une requête vers le serveur à l'aide d'un protocole applicatif, ici HTTP. Le serveur est en permanence en attente des requêtes provenant des clients. Son rôle est simplement de répondre aux requêtes provenant des clients. De son côté, le navigateur joue le rôle du client : il envoie les requêtes aux serveurs web et sert d'interface avec les humains en affichant les réponses à ces requêtes. On connaît tous les principaux navigateurs Web actuels : Firefox, Internet Explorer, Chrome ou encore Safari.

Fonctionnement du web

Le rôle des navigateurs Web est donc de formuler des requêtes vers des pages Web à partir d'une URL qui est saisie et d'afficher le résultat. Il peut également renvoyer des éléments au serveur à partir d'un formulaire.

Le Web est une application Internet qui existe depuis 1994 et qui s'est très rapidement développée en raison de son interface conviviale et surtout de la très grande quantité d'informations disponibles.

Le Web repose sur 3 piliers :

  • la notion d'URL,
  • le protocole HTTP,
  • et les langages du Web (HTML, CSS, JavaScript, PHP, etc.).

Les URL

Pour demander une page Web, on utilise l'URL (Uniform Resource Locator) qui permet d'identifier de manière unique une ressource. D'ailleurs, les URL peuvent aussi servir dans d'autres applications que le Web. Le format des URL est défini dans une norme (RFC 3986).

Une URL se décompose en trois parties : le "comment", le "où" et le "quoi" :

  • Le "comment" : c'est le protocole utilisé pour faire la requête. On utilise généralement le protocole HTTP ou HTTPS (qui est sa version sécurisée).
  • Le "où" : c'est le nom du serveur ou son adresse IP.
  • Le "quoi" : c'est l'objet demandé sur le serveur.

Prenons l'exemple d'URL suivante : http://www.univ-lyon1.fr/licence/lifasr2.html

Le "comment" c'est http:// (on va utiliser le protocole HTTP), le "où" c'est www.univ-lyon1.fr (qui est le nom du serveur) et le "quoi" est la page Web /licence/lifasr2.html (c'est-à-dire le fichier lifasr2.html qui se trouve dans le répertoire /licence du serveur). Le "comment" se trouve avant le :// et le "où" se trouve après le :// et avant le /. Le "quoi" se trouve après le /.

Dans le "où", on peut également spécifier le port du serveur. Par exemple http://www.univ-lyon1.fr:80 pour le port 80. Si on ne spécifie pas le port, c'est le port 80 qui est utilisé par défaut.

Dans le "quoi", on peut également spécifier des paramètres. Par exemple http://www.univ-lyon1.fr/licence/lifasr2.html?param1=1&param2=2 pour spécifier deux paramètres. Dans ce cas, le paramètre param1 a pour valeur 1 et le paramètre param2 a pour valeur 2. On peut également ajouter un point d'ancrage dans le lien. Par exemple http://www.univ-lyon1.fr/licence/lifasr2.html#ancre pour spécifier un point d'ancrage. Dans ce cas, le point d'ancrage s'appelle ancre et permet de désigner une partie particulière de la page web.

Le protocole HTTP

Le protocole HTTP (HyperText Transfer Protocol) définit le format et la signification des messages échangés entre le navigateur et le serveur Web. Il va donc spécifier comment sont transmises les requêtes effectuées depuis le client au serveur. Et il va également préciser comment sont faites les réponses. Nous reviendrons un peu plus loin dans ce cours sur le fonctionnement de ce protocole.

Les langages du Web

Les langages du Web sont nombreux. On va simplement en citer quelques-uns. Le premier langage incontournable est le HTML (Hypertext Markup Language). Il permet de décrire le contenu d'une page web et est interprété par le navigateur Web pour afficher la page et les objets incorporés (images, etc.). Il décrit donc la structure du document demandé et permet de définir des styles et les positions pour l'affichage des pages Web.

Ensuite, le CSS (Cascading Style Sheets) est également incontournable. Il permet de définir des styles encore plus précis et complets. Cela concerne tout ce qui est relatif aux couleurs, aux positions des objets et aux formats des différents objets. Ce style garantit que l'affichage se fasse dans de bonnes conditions et soit correctement interprété par les différents navigateurs.

Enfin, on a besoin de langages de programmation, soit côté client, soit côté serveur. Cela permet d'incorporer dans des pages Web des petits programmes qui rendent dynamiques les pages Web. On peut citer par exemple le PHP côté serveur qui va donc s'exécuter à travers le serveur web lorsque la page demandée nécessite de la programmation pour répondre, c'est-à-dire pour construire la page HTML qui va être renvoyée au navigateur. On parle alors de page dynamique. Ce dynamisme peut venir du fait que le client a saisi des données dans un formulaire et que ces données vont être utilisées pour construire la page HTML qui va être renvoyée au client. Un autre cas de figure est lorsque que le serveur doit interroger une base de données pour construire la page HTML.

Les moteurs de recherche ou les sites d'e-commerce sont des exemples de sites qui utilisent des pages dynamiques.

Côté client (dans le navigateur), on a également besoin d'un langage de programmation pour animer les pages web. On peut citer par exemple JavaScript. Typiquement, des morceaux de programmes écrits en JavaScript sont incorporés dans la page web. Ils vont s'exécuter dans le navigateur web et ils vont permettre de faire des animations, de faire des vérifications sur les données saisies dans les formulaires, de faire des calculs, etc.

Nota Bene : Nous revenons plus en détail sur la syntaxe de ces langages dans la suite de ce cours.

Récupération d'une page web par le navigateur

Regardons dans le détail ce qui se passe lorsqu'on saisit une URL dans le navigateur :

  • Le navigateur va commencer à analyser cette URL. Il va récupérer le nom du serveur dans l'URL.
  • Ensuite, il va faire une requête DNS pour obtenir l'adresse IP du serveur (à partir de son nom).
  • Une fois cette adresse IP récupérée, il va établir une connexion TCP vers le port 80 du serveur web (ou vers le numéro de port indiqué dans l'URL). Cette connexion TCP va permettre les échanges entre le navigateur et le serveur web.
  • Le navigateur web va ensuite fabriquer la requête HTTP à partir de ce qui est indiqué dans la partie "quoi" de l'URL.
  • Cette requête HTTP va être envoyée au serveur web à travers la connexion TCP.
  • Ensuite, le serveur traite la requête et retourne une réponse qui contient le contenu de la page demandée.
  • Le navigateur Web interprète le code HTML reçu pour afficher une page web avec toute la mise forme.
  • Si la page web contient d'autres objets (par exemple des images, des sons, du code JavaScript, ...), le navigateur Web va faire une nouvelle requête HTTP pour chaque objet incorporé dans la page.
  • Enfin, il pourra exécuter le ou les programmes JavaScript s'il y en a dans la page.

Fonctionnement du serveur Web

Regardons maintenant ce qu'il se passe côté serveur Web. Le serveur Web est en permanence à l'écoute des requêtes formulées par les clients (qui peuvent être très nombreux). Dès qu'il reçoit une requête, il va la traiter :

  • Dans un premier temps, il va vérifier que la requête est correcte.
  • Il va vérifier également que le document demandé existe bien. Si le document demandé n'existe pas, il va répondre Error 404 : document not found.
  • Il va vérifier que l'accès aux documents demandés est possible (par exemple, s'il y a besoin d'une authentification au préalable).
  • Enfin, il répond à la requête en renvoyant le document demandé : soit du code HTML, soit des images, soit une feuille de style (CSS), soit un code JavaScript à exécuter sur le client.
  • Si le document demandé est une page HTML dynamique (par exemple, une page PHP), le serveur va exécuter le code correspondant pour générer la page HTML qui sera renvoyée au client.

Voici un exemple de requête et de réponse HTTP qui est fait depuis un terminal avec la commande telnet :

Échange HTTP

Dans cet exemple, on se connecte au serveur web sur le port 80 et on lui demande une page web avec la méthode GET :

GET /~ogluck/index2.html HTTP/1.1
Host: localhost
Accept: */*

Cette requête suit la norme du protocole HTTP. Elle commence par la méthode GET qui indique que l'on veut récupérer un document. Ensuite, on indique le chemin vers le document demandé. Ici, c'est le document index2.html qui se trouve dans le répertoire ~ogluck du serveur web. Enfin, on indique la version du protocole HTTP utilisé. Ici, c'est la version 1.1. Pour terminer, on indique le nom du serveur web qui va traiter la requête (ici, c'est localhost). Enfin, on indique le type de document accepté. Ici, on accepte tous les types de documents. La requête se termine par une ligne vide.

Ce qu'on voit dessous, c'est la réponse du serveur. La première ligne HTTP/1.1 200 OK indique la version du protocole HTTP utilisée (1.1), le code de retour (200) et le message associé au code de retour (OK). Ensuite, on a les entêtes de la réponse. On a par exemple le type de serveur, la date de dernière modification de la page web, la date de création de la page web, le type de document, la taille du document, etc. Enfin, on a une ligne vide puis le contenu de la page web demandée : <html> ... </html>.

Analyse d'un échange dynamique

Comme nous l'avons vu, le web permet une certaine dynamicité dans les pages web. Pour illustrer cela, nous allons considérer le cas d'une page web contenant un formulaire permettant de définir une requête pour interroger une base de données. Typiquement on peut imaginer une page web permettant d'interroger les horaires et les tarifs pour un trajet en train ou en avion.

Le schéma suivant illustre les différents échanges entre le client et le serveur pour réaliser une requête dynamique.

Échange dynamique

1) Dans un premier temps l'utilisateur saisit l'URL de la page web contenant le formulaire. Le navigateur web envoie une requête HTTP au serveur web pour récupérer la page web. 2) Le serveur récupère sur son disque dur le fichier HTML contenant le formulaire. 3) Cette page web est ensuite envoyée au navigateur dans une réponse HTTP 4) L'utilisateur remplit le formulaire et le code JavaScript de la page web valide les données saisies. 5) Le navigateur web envoie une requête HTTP avec les données saisies au serveur web. 6) Le serveur web lance le programme. Dans cet exemple, c'est un programme CGI, mais ça pourrait être du PHP. 7) Ce programme s'exécute et va par exemple interroger une base de données. 8) Le gestionnaire de base de données va renvoyer les données au programme. 9) Le programme va générer une page web contenant les données récupérées bien formatées. 10) Une réponse HTTP est envoyée au navigateur web avec la page web contenant les données. 11) Le navigateur affiche le résultat de la requête.

Fonctionnement du protocole HTTP

Nous allons maintenant rentrer un peu plus dans le détail du protocole HTTP.

La version 1.0 de ce protocole est définie par la RFC 1945. La version 1.1 quant à elle est définie par la RFC 9112, Il existe 2 versions plus récentes de ce protocole (2.0 et 3.0), mais elles ne sont pas encore très utilisées.

Le protocole HTTP s'appuie sur des échanges en texte, au-dessus du protocole TCP. Une fois la connexion ouverte, le client envoie une requête au serveur et le serveur répond à cette requête. Une transaction HTTP est simplement une requête suivie d'une réponse.

  • Dans HTTP 1.0 : 1 connexion = 1 transaction.
  • Dans HTTP 1.1 : 1 connexion = plusieurs transactions (sauf si le client indique qu'il veut fermer la connexion avec l'entête Connection: close).

Le protocole HTTP est un protocole sans état. Cela signifie que le serveur ne garde pas d'information sur les requêtes précédentes. C'est au client de gérer les transactions, c'est-à-dire de savoir si la réponse qu'il reçoit correspond à la requête qu'il a envoyé.

Attardons-nous un peu sur le format des requêtes et des réponses.

Format des requêtes et des réponses

Format des requêtes

Une requête HTTP est composée de 4 éléments :

1) Une première ligne qui indique la méthode, le document demandé et la version du protocole HTTP utilisé. 2) 0, 1 ou plusieurs lignes d'entêtes. 3) Une ligne vide (obligatoire). 4) Éventuellement un corps de la requête.

La première ligne se découpe en 3 parties :

  • La méthode HTTP (GET, POST, HEAD, PUT, DELETE, OPTIONS, TRACE, CONNECT, PATCH).
  • Le chemin vers le document demandé.
  • La version du protocole HTTP utilisé.

Exemple : GET /~ogluck/index2.html HTTP/1.1

Les méthodes les plus classiques sont GET et POST. GET est utilisé pour récupérer un document. POST est utilisé pour envoyer des données au serveur (typiquement les champs d'un formulaire). Les autres méthodes sont bien moins utilisées.

Les entêtes sont des lignes de la forme nom: valeur. Elles permettent d'indiquer des informations supplémentaires sur la réponse. Par exemple, on peut indiquer le type de document envoyé, le type de codage des caractères, etc.

Voici un exemple d'un enchainement de 3 entêtes :

User-Agent: Mozilla/4.0 (compatible;MSIE 6.0;Windows NT 5.1)
Host: www710.univ-lyon1.fr
Accept: image/gif, image/jpeg, */*
  • Le premier entête indique que le navigateur utilisé est Internet Explorer 6.0.
  • Le deuxième entête indique le nom de domaine du serveur web interrogé.
  • Le troisième entête indique que le navigateur accepte des images de type gif ou jpeg, mais également n'importe quel type de document.

Format des réponses

Le format des réponses est assez similaire au format des requêtes. Une réponse HTTP est composée de 4 éléments :

1) Une première ligne qui indique la version du protocole HTTP utilisé, le code de retour et le message associé au code de retour. 2) 0, 1 ou plusieurs lignes d'entêtes, comme pour les requêtes. 3) Une ligne vide (obligatoire). 4) Le corps de la réponse.

Les codes de retour sont des nombres qui indiquent le résultat de la requête :

  • 100-199 : message d'information.
  • 200-299 : succès de la requête cliente (OK).
  • 300-399 : la requête n'est pas directement réalisable, le client doit préciser certaines choses.
  • 400-499 : échec de la requête qui incombe au client.
  • 500-599 : échec de la requête qui incombe au serveur (par exemple, erreur d'exécution d'un programme sur le serveur).

Voici 3 codes de retour courants :

  • HTTP/1.1 200 OK (la requête a été traitée avec succès).
  • HTTP/1.1 404 Not Found (la ressource demandée n'a pas été trouvée).
  • HTTP/1.1 500 Internal Server Error (erreur du serveur).

Voici un exemple d'entête de réponse :

Date: Sun, 23 May 2004 17:46:01 GMT
Server: Apache/1.3.28 (Debian GNU/Linux) PHP/3.0.18
Last-Modified: Sun, 23 May 2004 17:42:12 GMT
Content-Length: 90
Content-Type: text/html; charset=iso-8859-1

La première indique la date et l'heure à laquelle la réponse a été générée. La deuxième indique le nom du serveur web utilisé. La troisième indique la date et l'heure à laquelle le document a été modifié pour la dernière fois. La quatrième indique la taille du document en octets. La cinquième indique le type de document et le type de codage des caractères utilisé.

Sessions, champs cachés et cookies

Une chose importante est que HTTP est un protocole sans état. Cela signifie que, entre deux requêtes successives depuis le même navigateur vers le même serveur web, par défaut, le serveur ne conserve aucune information.

Si l'on souhaite avoir quand même un effet mémoire, il faut avoir recours à d'autres mécanismes au-dessus d'HTTP. Cela peut se faire par exemple en utilisant des cookies ou en utilisant des champs cachés dans un formulaire. Grâce à cela, il est par exemple possible de maintenir des sessions PHP.

Une session PHP, c'est un ensemble de données (des variables) qui peuvent être conservées et retrouvées côté serveur lors de chaque nouvelle requête HTTP, à condition d'avoir un identifiant de la session PHP transmis dans la requête HTTP.

Voici un exemple de code HTML définissant un formulaire avec un champ caché :

<!DOCTYPE html>
<html>
  <body>
    <form action="process.php" method="GET">
      <label for="nom">Nom :</label>
      <input type="text" name="nom">
      <input type="hidden" name="num_cache" value="1024">
      <input type="submit" value="Envoyer">
    </form>
  </body>
</html>

Et voici le rendu associé dans un navigateur.

Formulaire Minimaliste

Ce formulaire contient un champ de type texte et un champ caché. Le champ caché contient la variable num_cache qui a une valeur de 1024. Lorsqu'on clique sur le bouton Envoyer, le navigateur va accéder à l'URL process.php?nom=Olivier&num_cache=1024. On peut ainsi voir que le champ caché a été transmis au serveur.

Un cookie est une chaîne de caractères qui fait 4 ko au maximum et qui est stockée dans le navigateur Web côté client et qui est positionnée par le serveur. Plus exactement, c'est le serveur qui va demander au navigateur de stocker cette valeur associée à un cookie. De plus, cette chaîne de caractères va être renvoyée au serveur dans toutes les requêtes HTTP, sous forme d'entête Cookie: nom=valeur.

Ce mécanisme permet donc de stocker des informations côté client et de les récupérer côté serveur, et donc d'avoir un effet mémoire. Typiquement, on peut stocker dans un cookie un identifiant de session PHP, l'identifiant d'un panier d'achat, les préférences d'un utilisateur, etc.

Cela permet également au serveur de se souvenir de toutes les requêtes HTTP qui ont été faites par un même client, et donc de pouvoir générer des pages web en fonction de l'historique des précédentes navigations. Sur des sites marchands, cela permet par exemple de générer des pages web qui contiennent de la publicité ciblée en fonction des produits que l'utilisateur a déjà achetés précédemment.

Connexions persistantes

Il y a plusieurs versions du protocole HTTP. Aujourd'hui, on en est au protocole HTTP 1.1 ou 2.0. La version HTTP 1.1 apporte comme principale nouveauté la notion de connexions persistantes, ce qui signifie que lorsqu'un navigateur web demande une page web, il va également demander les objets incorporés dans la page web, sans devoir refaire une nouvelle connexion TCP pour chaque objet demandé.

Connexion persistante

Considérons l'exemple d'un navigateur web, qui souhaite afficher la page index.html d'un serveur web, incluant 3 objets, un fichier de style et deux images. Si c'est une connexion persistante, le navigateur web va ouvrir une connexion TCP vers le serveur web pour demander la page index.html dans la première requête HTTP, ainsi que les trois objets incorporés dans la même connexion TCP. Il y aura donc quatre requêtes-réponses HTTP qui se feront à l'aide d'une seule connexion TCP, ce qui permet un affichage plus rapide.

Cache web et proxy web

Un cache web est un espace mémoire qui va permettre de stocker des pages web qui ont déjà été demandées. Cet espace mémoire peut être situé directement sur le client web (navigateur) ou sur un serveur web intermédiaire, appelé proxy.

Cache web

Au sein d'une même organisation, lorsque les mêmes serveurs Web sont très souvent sollicités, l'utilisation d'un proxy web permet d'améliorer les performances et d'obtenir des réponses plus rapides.

En effet, plutôt que de redemander toutes les minutes la même page web au serveur web qui se trouve sur Internet, l'utilisation du proxy de l'organisation (qui se trouve dans le réseau local) va permettre de répondre avec la page web qui se trouve en cache. En outre, cela permet aussi de soulager le serveur Web qui se trouve sur Internet.

Proxy web

Le proxy Web est donc un intermédiaire entre le navigateur Web et le serveur Web. Cela permet également, pour une organisation à travers ce proxy Web, de filtrer éventuellement les pages Web demandées et les réponses obtenues. Typiquement, les filtres peuvent se faire soit sur des URL, soit sur des mots-clés et donc empêcher l'accès à certains serveurs Web par exemple. Le proxy est donc comme une sorte de pare-feu, mais simplement au niveau du protocole HTTP.

Les types MIME

Le type MIME (Multipurpose Internet Mail Extensions) indique de manière standardisée les types de données qui peuvent être transférées sur Internet. C'est un standard qui a été défini par l'IETF et qui est utilisé par le protocole HTTP.

Un type MIME est composé de deux parties : le type et le sous-type. Par exemple, le type text et le sous-type html pour un document HTML. Le type image et le sous-type jpeg pour une image JPEG...

On retrouve ce type MIME dans les entêtes HTTP. Par exemple, dans l'entête Content-Type qui indique le type MIME d'un document. Par exemple : Content-Type: text/html ou Content-Type: image/jpeg ou encore Content-Type: application/pdf.

Les langages Web

Afin de programmer un site web, il est nécessaire de maîtriser plusieurs technologies web, ainsi que les langages de base associés : HTML, CSS et JavaScript.

Nota Bene : Nous présentons en Annexe quelques compléments sur le développement Web.

HTML

Commençons par les bases du langage HTML (version 5). Un document HTML débute par une balise spéciale <!DOCTYPE html> et se compose de balises (également appelés éléments) ouvrantes (<html>) et fermantes (</html>), qui servent à décrire la structure du document. Voici donc une page minimaliste : demo-01.html. Faire Ctrl-U pour afficher le code source dans votre navigateur (ou F12, onglet Sources).

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Demo Web</title>
</head>

<body>
    <h1>Ma Page Web</h1>
    <h2>Un Sous-Titre</h2>
    <p>Un paragraphe, pour dire que ma page est chouette !</p>
    <!-- un commentaire -->
</body>

</html>

En partant de cet exemple minimaliste, il est possible d'enrichir cette une page HTML en utilisant un large éventail de balises pour structurer son texte : <h1>, <h2>, <p>, <pre>, <br>, ... On peut encore ajouter d'autres éléments comme une liste (balises <ul>, <ol>, <li>), une image (balise <img>), ou un lien vers une page web externe (balise <a>). Il faut ensuite compléter sa page avec des meta-informations dans la partie <head>, comme par exemple : author, charset, description, keywords, ... Il est également possible de structurer plus fortement votre document avec les balises : <header>, <nav>, <main>, <section>, <footer>, ...

Notez que pour mettre du texte en évidence, il faut privilégier l'utilisation des balises sémantiques <em> et <strong>, plutôt que <i> (italic) et <b> (bold). De manière générale, on s'interdira volontairement d'effectuer de la mise en forme en changeant par exemple les polices de caractères (<font>), l'alignement (<center>), la couleur, ... Nous allons faire cela de manière beaucoup plus élégante dans la section suivante avec une feuille de style CSS.

Voici quelques documentations complémentaires :

CSS

Jusqu'à présent, notre page web a le style par défaut du navigateur. Pour appliquer notre propre style et ainsi contrôler l'aspect de la page, on intègre à la page une feuille de style, défini dans le fichier mystyle.css, via la balise <link> dans l'en-tête du document (<head>).

<head>
<meta charset ="utf-8" />
<title> Demo Web </title>
...
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Une feuille de style se décompose en blocs de règles encadrées par des accolades, s'appliquant à un ensemble d'éléments HTML décrit par un ou plusieurs sélecteurs séparés par des virgules (selector_1, selector_2 { ... }).

Considérons par exemple le style mystyle.css ci-dessous :

h2, .important {
    color: darkblue;
    background: #eeeeee;
}

#labri {
    color: red;
    font-family: monospace;
    font-weight: bold;
    font-size: 20px;
}

Et voici un exemple de page demo-02.html, qui utilise ce style. Dans cet exemple, on change les couleurs du texte et de l'arrière-plan de tous les éléments <h2> et de tous les éléments de classe important (attribut class). De plus, on modifie le style du texte et sa couleur pour l'élément avec l'identifiant labri (attribut id). Voici un extrait du code HTML, qui utilise ce style :

<h2>Un sous-titre</h2>
<p>Un paragraphe normal...</p>
<p class="important"> Un paragraphe important...</p>
<p>Un lien avec une style particulier <a href="https://www.labri.fr" id="labri">LaBRI</a>.</p>

Nota Bene : Les couleurs peuvent s'écrire dans plusieurs formats comme #rrggbb en hexadécimal ou encore en utilisant des noms de couleur standards (https://www.w3schools.com/html/html_colors.asp).

Notez que vous pouvez utiliser la balise <div> comme un simple conteneur pour appliquez votre style à tout un bloc de HTML. La balise <span> permet de faire la même chose à l’inérieur d’une ligne.

Voici quelques documentations complémentaires :

Pour aller plus loin, vous pouvez mettre en place un layout dans votre document avec, par exemple, le <header> dans un bloc en haut, des balises <section> répartis sur deux ou trois colonnes au milieu et le <footer> en bas (https://www.w3schools.com/css/css_templates.asp).

JavaScript

Une fois la page HTML, les styles CSS et les images chargées, la page (son contenu et son aspect) ne change plus. On dit que la page est statique. Pour ajouter un peu de dynamisme, il est possible d'intégrer à sa page web un programme écrit en langage JavaScript. Considérons un petit exemple, demo-03.html.

<body>
...
<script>
  console.log("Hello World!");
</script>
<script src="myscript.js"></script>
</body>

La balise <script> permet d'injecter du code JavaScript directement dans la page HTML. Notez que le message Hello World! va s'afficher dans la console de votre navigateur web, accessible sous Chrome ou Firefox avec la touche F12. C'est très pratique pour faire du débogage !

Mais, en pratique, il est préférable d'écrire son code JavaScript dans un fichier à part, comme par exemple myscript.js. Ce code va s’exécuter à la fin du chargement de la page et va principalement contenir la définition de fonctions, qui seront appelées en réaction à des évènements, comme un clic souris. Dans l’exemple ci-dessous, la première fonction modifie le titre <h1>, tandis que la seconde fonction modifie le style d’un élément avec l’identifiant foo.

function func1 () {
  let elm = document.querySelector("h1");
  elm.textContent = "Un Nouveau Titre";
}

function func2 () {
  let elm = document.getElementById ("foo");
  elm.style.fontWeight ="bold ";
}

Vous noterez que ce code utilise la variable globale prédéfinie document (qui représente la page web courante au format DOM), pour sélectionner un élément de ce document soir à partir de son type <h1>, soit à partir d'un identifiant unique foo. Il existe d'autres variables globales ainsi prédéfinies comme window ou console.

Afin de réagir à un évènement particulier, il est nécessaire d’affecter le nom d’une fonction JavaScript à certains attributs spéciaux (onclick, onmousemove, onmouseover, onload, onfocus, ...) des différents éléments. Par exemple :

<h1 onmouseover="func1()">Un Titre</h1>
<h2>Un Sous-Titre</h2>
<p>Un paragraphe, pour dire que ma page est <span id="foo">chouette</span> !</p>
<button onclick="func2()">Clic</button>

Voici un autre démo très simple tempus/ de code JavaScript qui utilise la fonction setInterval() pour afficher périodiquement la date et l'heure du jour... Notez que le sablier qui tourne n'est pas programmé en JavaScript, c'est juste un Gif animé.

Voici quelques documentations de base :

Pour aller plus loin, vous pouvez vous aider de la documentation complémentaire suivante :

Utilisation d'un formulaire HTML/PHP

Nous allons maintenant voir comment utiliser un formulaire HTML/PHP pour envoyer des données au serveur Web avec les méthodes GET et POST du protocole HTTP.

Méthode GET

La méthode standard qui est utilisée par le protocole HTTP pour récupérer une page web est la méthode GET. Avec cette méthode, le contenu (qui est normalement après les entêtes) de la requête est toujours vide.

Si on reprend l'exemple du formulaire minimaliste présenté ci-dessus, un clic sur le bouton Envoyer générera une requête HTTP avec la méthode GET :

GET process.php?nom=Olivier&num_cache=1024 HTTP/1.1

On constate qu'après le nom du script process.php il y a un point d'interrogation ? et ensuite les paramètres du formulaire séparés par un & : nom=Olivier&num_cache=1024.

Ce fonctionnement est pratique, mais il y a une limite dans la taille des URL qui dépend du navigateur et du serveur. En général, on ne dépasse pas 2000 caractères.

Donc, si on souhaite par exemple envoyer un fichier, la méthode GET ne convient pas.

Méthode Post

Dans ce cas-là, on préférera la méthode POST qui permet également de transmettre les données d'un formulaire, non pas dans l'URL, mais dans le contenu de la requête HTTP (après les entêtes, de manière analogue aux réponses HTTP) :

POST process.php HTTP/1.1
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0
Host: localhost
Accept: */*
Content-Type: application/x-www-form-urlencoded
Content-Length: 27

nom=Olivier&num_cache=1024

Encodage des données

Que ce soit avec la méthode GET ou avec la méthode POST, les paramètres sont transmis au format URL encodé. Cela signifie que les caractères spéciaux sont remplacés pour respecter la syntaxe des URL.

Ainsi, les caractères non-alphanumériques sont remplacés par leur code hexadécimal précédé du caractère %. Par exemple, le caractère + est remplacé par %2B et le caractère & est remplacé par %26.

Récupération des données d'un formulaire

Dans un script PHP, on récupère les données d'un formulaire en utilisant deux tableaux préremplis : $_GET et $_POST que l'on peut utiliser selon la méthode employée. Ces tableaux sont indexés par le nom des champs du formulaire. Par exemple, si on a un champ de type text avec le nom nom et un champ de type hidden avec le nom num_cache, on peut récupérer les données du formulaire :

$nom = $_GET['nom'];
$num_cache = $_GET['num_cache'];

// ou bien

$nom = $_POST['nom'];
$num_cache = $_POST['num_cache'];

Exemple de formulaire

Voici un exemple compteur.php de formulaire en HTML/PHP qui contient un compteur qui est incrémenté à chaque fois qu'on clique sur le bouton +1. On utilise la méthode GET pour transmettre les données du formulaire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>compteur.php </title>
  </head>
  <body>
    <form name="compteur" method="get" action="compteur.php">
      <?php
        if (isset($_GET['compteur']))
          $cpt = $_GET['compteur'];
        else
          $cpt = 0;
        $cpt = $cpt + 1;
        // Pour propager la nouvelle valeur de cpt vers la page suivante
        echo '<input type="hidden" name="compteur" value="'.$cpt.'"/>';
        echo "Le compteur vaut $cpt.\n";
      ?>
      <input type="submit" name="action" value="+1" />
    </form>
  </body>
</html>

Ce compteur peut donc être transmis de page en page, en utilisant toujours la même page web, c'est-à-dire que cette page se rappelle elle-même. Pour transmettre la valeur du compteur de page en page (à chaque fois qu'on clique sur le bouton), il faut récupérer l'ancienne valeur du compteur, l'incrémenter côté serveur et la remettre dans la page web. Cela se fait avec un champ caché (hidden) où la valeur du compteur est stockée. Vous avez donc ici le code PHP qui permet de faire cela. Ce code est remplacé à l'exécution sur le serveur par l'insertion dans le formulaire du champ avec la bonne valeur du compteur.

On peut faire la même chose avec la méthode POST :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>compteur.php</title>
  </head>
  <body>
    <form name="compteur" method="post" action="compteur.php">
      <?php
        if (isset($_POST['compteur'])) {
          $cpt = $_POST['compteur'];
        } else {
          $cpt = 0;
        }
        $cpt = $cpt + 1;
        // Pour propager la nouvelle valeur de cpt vers la page suivante
        echo '<input type="hidden" name="compteur" value="'.$cpt.'"/>';
        echo "Le compteur vaut $cpt.\n";
      ?>
      <input type="submit" name="action" value="+1" />
    </form>
  </body>
</html>

Les seuls changements sont les suivants :

  • On récupère la valeur du compteur dans le tableau $_POST au lieu de $_GET.
  • On utilise la méthode POST au lieu de GET pour le formulaire.

Autre exemple de formulaire

On présente ici tous les éléments qu'on peut rencontrer dans un formulaire, c'est-à-dire avec tous les types de champs.

<html><head><title>Éléments d'un formulaire</title>
</head><body>
<form name="f1" method="POST" action="4-form.html">
<input name="email" value="Entrez votre email ici" size="30" maxlength="50" />
<input type="password" name="pass" value="Entrez votre passwd ici" size="8" maxlength="8" /><br />
<input type="checkbox" name="cours1" value="1" checked />HTML
<input type="checkbox" name="cours1" value="2" checked />JS
<input type="checkbox" name="cours1" value="3" />CGI<br />
<input type="radio" name="cours2" value="1" />HTML <input type="radio" name="cours2" value="2" checked />JS
<input type="radio" name="cours2" value="3" />CGI<br />
<input type="submit" name="s" value="login" /> <input type="submit" name="s" value="logout" />
<input type="reset" name="raz" value="Effacer" /><br />
<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
<input type="file" name="fichier" value="Parcourir" /><br />
<textarea name="t1" rows="3" cols="40">Entrez vos remarques ici</textarea>
<select name="pop">
  <option value="v1" />1
  <option value="v2" selected />2
  <option value="v3" />3
</select>
<select name="mul" size="3" multiple>
  <option value="v1" />1
  <option value="v2" selected />2
  <option value="v3" selected />3
  <option value="v4" />4
</select>
</form>
</body>
</html>

Graphiquement, le formulaire ressemble à ceci :

Formulaire

Et en dessous, on voit à quoi ressemble la transmission de ce formulaire à l'aide de l'inspecteur du navigateur.

Voici les différents types de champ :

  • INPUT : champ de saisie de texte
  • PASSWORD : champ de saisie de texte masqué
  • CHECKBOX : case à cocher, avec pour chaque case un nom et une valeur
  • RADIO : bouton radio. Cela fonctionne comme les cases à cocher, mais on ne peut cocher qu'une seule case à la fois
  • SUBMIT : bouton de validation du formulaire qu'on a déjà vu. Il permet de transmettre les données du formulaire à la page cible avec la méthode GET ou POST
  • RESET : bouton qui permet de réinitialiser les champs du formulaire. Il remet les champs à leur valeur par défaut
  • HIDDEN : champ caché, qui permet de transmettre des informations entre les pages
  • FILE : champ de saisie le chemin d'un fichier. Ce champ permet de transmettre un fichier depuis le client au serveur. Il faut utiliser la méthode POST pour pouvoir transmettre un fichier.
  • TEXTAREA : champ de saisie de texte sur plusieurs lignes
  • SELECT : liste déroulante, avec pour chaque élément un nom et une valeur

Pour afficher tous les champs d'un formulaire avec un code PHP, il suffit de faire une boucle sur le tableau $_GET$ ou $_POST$ avec le mot-clé foreach :

// afficher la chaîne CGI en méthode GET
echo $_SERVER['QUERY_STRING'];
echo "<br />";
// afficher tous les champs transmis en méthode GET
foreach ($_GET as $name => $value) {
   echo "$name = $value<br />\n";
}
// afficher tous les champs transmis en méthode POST
foreach ($_POST as $name => $value) {
   echo "$name = $value<br />\n";
}