7.1 Pages web et interactions⚓︎

1. Le cas le plus simple : la même page pour tout le monde⚓︎

Nous allons tout d'abord considérer le cas où le serveur renvoie une page unique, identique pour tous les utilisateurs. De plus, l'utilisateur ne pourra pas agir sur sa page : il n'y a aucune interactivité.

Exemple de page statique côté serveur et côté utilisateur :

cette merveille de page web.
plus complète, mais tout aussi statique : cette page Wikipedia consacrée à John Conway.

1.1 `html` pur⚓︎

Lorsque le client demande au serveur le contenu d'une page web, celui-ci lui renvoie, dans le cas le plus simple, une simple page html.
html est un langage dit « à balises ». Ce n'est pas à proprement parler un langage de programmation, mais plutôt un langage de description de contenu. Il a été inventé en 1992 par Tim Berners-Lee. La version actuellement utilisée est le html5.

Exemple de page web minimale

HTML

<!DOCTYPE html>
<html lang='fr'>
    <head>
        <meta charset="utf-8">
        <title>Un titre très original</title>
    </head>

    <body>
        <p>Ceci est le texte introductif de ma page.</p>
        <p>
          <h1>  Ceci est un titre de niveau 1 </h1>
          Mais sans rien d'intéressant.
          <h2>  Ceci est un titre de niveau 2 </h2>
              <ul>
                  <li> le début d'une liste indentée </li>
                  <li> la suite ... </li>
              </ul>  
        Pour apprendre le fonctionnement des balises, voir <a href="https://www.w3schools.com/html/default.asp"> ici</a> par exemple !
        </p>
    </body>
</html>

Copier/coller ce code dans un éditeur de texte (VS code, notepad++, ...), sauvegarder votre fichier et visualisez le grace à votre navigateur préféré.

Exercice 1

Énoncé

Créez un dossier monsite contenant un fichier mapage.html.
Créez une page contenant une image et un lien vers le site du lycée.
L'image doit être stockée dans votre dossier (voir 1.2 ci-dessous), pas appelée depuis un autre site.
Vous pouvez aussi utiliser un éditeur en ligne avec rendu instantané, du type https://www.w3schools.com/tryit/. Mais attention : dans un éditeur en ligne, vous ne pouvez pas stocker vos images dans un dossier. Pour cet exercice, utilisez un éditeur local.

1.2 Images, liens absolus et liens relatifs⚓︎

Pour afficher une image, on utilise la balise <img> avec l'attribut src (source) qui indique où trouver le fichier :

HTML

<img src="..." alt="Description de l'image">

L'attribut alt est obligatoire : il s'affiche si l'image est introuvable, et il est lu par les lecteurs d'écran.

Tout l'enjeu est la valeur de src, c'est-à-dire le chemin vers l'image. Il en existe deux familles.

Le lien absolu⚓︎

Un lien absolu donne l'adresse complète, qui ne dépend pas de l'endroit où se trouve votre page.

HTML

<!-- URL absolue : l'image est hébergée sur un autre site -->
<img src="https://www.exemple.com/photos/chat.jpg" alt="Un chat">

<!-- Chemin absolu sur VOTRE disque dur : à ne JAMAIS faire -->
<img src="C:\Users\Léa\Documents\monsite\chat.jpg" alt="Un chat">

Pourquoi c'est dangereux pour une image

URL absolue vers un autre site : si ce site supprime ou déplace l'image, votre page est cassée. Vous dépendez de sa disponibilité, et vous utilisez peut-être une image dont vous n'avez pas le droit.
Chemin absolu sur votre disque : cela fonctionne sur votre ordinateur, et uniquement chez vous. Dès que vous envoyez votre site à un camarade ou que vous le mettez en ligne, l'image disparaît.

Le lien relatif⚓︎

Un lien relatif indique le chemin à partir de l'endroit où se trouve le fichier html. Si vous déplacez tout le dossier du site, tout continue de fonctionner.

Règle à retenir

Tout ce dont votre page a besoin (images, css, JavaScript) doit se trouver dans le dossier du site, et être appelé par un lien relatif.

Organisation recommandée :

📋 Texte

monsite/
├── index.html
├── style.css
├── img/
│   ├── chat.jpg
│   └── logo.png
└── pages/
    └── contact.html

Depuis le fichier...	Pour atteindre...	On écrit
`index.html`	`chat.jpg`	`img/chat.jpg`
`index.html`	`style.css`	`style.css`
`pages/contact.html`	`chat.jpg`	`../img/chat.jpg`
`pages/contact.html`	`index.html`	`../index.html`

img/chat.jpg : on entre dans le dossier img, puis on prend chat.jpg.
../ signifie « remonter d'un dossier ».

HTML

<!-- Dans index.html -->
<img src="img/chat.jpg" alt="Un chat">

<!-- Dans pages/contact.html -->
<img src="../img/chat.jpg" alt="Un chat">

Vous avez déjà utilisé un lien relatif sans le savoir : dans le <head>, href="style.css" est un lien relatif.

Et les liens entre pages, et vers l'extérieur ?

La même distinction s'applique aux balises <a> :

un lien interne (vers une autre page de votre site) est un lien relatif : <a href="contact.html">Contact</a> ;
un lien externe (vers le site d'un autre) est forcément absolu : <a href="https://fr.wikipedia.org/">Wikipedia</a>, car on ne peut pas deviner où se trouve ce site.

Règle simple : ce qui est à moi, je l'appelle en relatif ; ce qui est à un autre, je le cite en absolu. Mais une image, elle, doit toujours être chez moi (dans img/).

Image légendée, libre de droits⚓︎

Une image qui illustre un propos mérite une légende. Pour associer l'image et sa légende, on utilise <figure> et <figcaption> :

HTML

<figure>
    <img src="img/chat.jpg" alt="Un chat gris endormi sur un canapé">
    <figcaption>Un chat gris. Photo : Prénom Nom, licence CC BY-SA 4.0, source Wikimedia Commons.</figcaption>
</figure>

Droits d'auteur

Une image trouvée sur Internet n'est pas libre pour autant. Cherchez sur Wikimedia Commons, et notez toujours l'auteur, la licence et l'adresse d'origine. C'est une exigence de votre mini-projet.

Nommer ses fichiers

pas d'espaces, pas d'accents, pas de majuscules : mon_chat.jpg et non Mon Chat (1).JPG ;
toujours le / (et non le \ de Windows) dans les chemins web ;
des images légères (un fichier de 8 Mo ralentit tout le site).

Exercice 1 bis

ÉnoncéQuestions de compréhensionCorrection

Dans votre dossier monsite, créez un sous-dossier img et placez-y deux images (téléchargées depuis Wikimedia Commons ou prises par vous).
Affichez-les dans mapage.html avec des liens relatifs, chacune avec son alt.
Transformez l'une des deux en image légendée (<figure> + <figcaption>) avec auteur et licence.
Créez un sous-dossier pages contenant galerie.html, qui affiche aussi une image du dossier img. Ajoutez dans mapage.html un lien vers galerie.html et, dans galerie.html, un lien retour.
Test final : copiez tout le dossier monsite sur une clé USB ou dans un autre dossier, et ouvrez la page. Toutes les images s'affichent-elles ?

Pourquoi <img src="C:\Users\Léa\chat.jpg"> ne fonctionne-t-il pas sur l'ordinateur d'un camarade ?
Que signifie ../ ?
Vous êtes dans pages/contact.html. Écrivez le chemin vers img/logo.png.
Une image affichée avec https://... fonctionne sans connexion Internet : vrai ou faux ?
Le lien vers le site du lycée est-il absolu ou relatif ? Pourquoi ne peut-il pas être autrement ?

Ce chemin n'existe que sur l'ordinateur de Léa : c'est un chemin absolu sur son disque.
Remonter d'un dossier parent.
../img/logo.png
Faux : il faut une connexion, et le site distant doit toujours héberger l'image.
Absolu (https://...) : l'adresse du lycée est hors de votre dossier, il faut donc l'adresse complète.

Attention avec l'IA

Quand une IA génère une page web, elle propose très souvent des images par URL (https://images.unsplash.com/...) ou des chemins qui n'existent pas chez vous. Réflexe à avoir : téléchargez l'image dans img/ et remplacez le lien par un lien relatif. Si votre page « marche » seulement avec Internet ou seulement sur votre machine, c'est qu'un lien est mal écrit.

1.3 `html` + `css`⚓︎

L'acronyme css signifie Cascading Style Sheets. L'idée est de regrouper dans un seul fichier toutes les informations relatives à la mise en forme des éléments de la page html. De manière très simplifiée, on peut dire que le fichier html s'occupe du fond tandis que le fichier css s'occupe de la forme.

Le fichier css (souvent nommé style.css et appelé feuille de style) doit être référencé au début du fichier html , au sein de la balise <head>.

Exemple de couple html / css minimal

fichier index.html :

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>page test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
    <body>
        <p>
          <h1>  Ceci est un titre de niveau 1 </h1>
          Mais sans rien d'intéressant.
          <h2>  Ceci est un titre de niveau 2 </h2>
        </p>
    </body>
</html>

fichier style.css :

CSS

html {
    font-size: 15px;
    font-family:  sans-serif;
    background-color: lightgray; 
  }

h1 {
  color: red;
}

En savoir plus

le cours d'OpenClassrooms : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

Exercice 2

Reprenez votre page de l'exercice 1 et rajoutez une feuille de style.

Exercice 3

Allez sur le site Ouest-france, et affichez l'inspecteur d'élement de votre navigateur (généralement accessible en appuyant sur F12 )
Modifiez le plus possible les attributs de style de la page.

Séparer le fond et la forme

Dans vos pages html, n'écrivez jamais de mise en forme : pas d'attribut style="...", pas d'attribut align, pas de <center> ni de <font>. Le html décrit le contenu, le css décrit l'apparence. C'est une exigence de votre mini-projet.

Exercice 3 bis : TP guidé

Vous allez maintenant construire un site complet de 4 pages, en suivant pas à pas un TP guidé : TP : le site web d'une informaticienne

Ce TP est l'entraînement du Mini Projet : site Web, que vous réaliserez ensuite sur votre personnage.

Ce que vous savez faire à la fin de cette partie

Écrire une page html valide, avec des titres, des listes, des liens et des images ;
distinguer un lien absolu d'un lien relatif, et ranger vos fichiers pour que votre site soit déplaçable ;
mettre en forme vos pages avec une feuille css, sans rien écrire de la forme dans le html.

👉 Prochaine étape : le TP guidé, puis votre mini-projet.

2. Quand le client peut agir sur sa page : exemple avec JavaScript⚓︎

Jusqu'à présent, la page web envoyée par le serveur est :

identique quel que soit le client.
statique après réception sur l'ordinateur du client.

Le JavaScript va venir régler le problème n°2 : il est possible de fabriquer une page sur laquelle le client va pouvoir agir localement, sans avoir à redemander une nouvelle page au serveur.

Inventé en 1995 par Brendan Eich pour le navigateur Netscape, le langage JavaScript s'est imposé comme la norme auprès de tous les navigateurs pour apporter de l'interactivité aux pages web.

Exemple de couple html / javascript minimal

Notre fichier index.html fait référence, au sein d'une balise <script>, à un fichier externe script.js qui contiendra notre code JavaScript.

fichier index.html :

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>un peu d'action</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <p>
    <h2>Une page web extrêmement dynamique</h2>
    </p>
    <div>

        <label>Changez la couleur d'arrière-plan:</label>

        <button type="button" onclick="choix('yellow');">jaune</button>

        <button type="button" onclick="choix('green');">vert</button>

        <button type="button" onclick="choix('purple');">violet</button> 
    </div>
    <div>
      <p>
      En JavaScript, le nom de la couleur choisie est :
      </p>
      <p id="resultat"></p>
    </div>
  </body>
</html>

fichier script.js :

🍵 JavaScript

function choix(color){
    document.body.style.background = color;
    document.getElementById("resultat").innerHTML=color;
}

Commentaires

Au sein du bouton déclaré par la balise button, l'attribut onclick reçoit le nom d'une fonction déclarée à l'intérieur du fichier script.js, ici la fonction choix().
Cette fonction nous permet de modifier à la fois l'aspect esthétique de la page (changement de la couleur de background) mais aussi le contenu de cette page, en faisant afficher le nom de la couleur.

La puissance du JavaScript permet de réaliser aujourd'hui des interfaces utilisateurs très complexes au sein d'un navigateur, équivalentes à celles produites par des logiciels externes (pensez à Discord, par ex.). Bien sûr, dans ces cas complexes, le serveur est aussi sollicité pour modifier la page, comme nous le verrons en partie 3.

En savoir plus

le guide JavaScript de la fondation Mozilla : https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide
le cours d'OpenClassrooms : https://openclassrooms.com/fr/courses/2984401-apprenez-a-coder-avec-javascript

Exercice 4

Application sur le TP Fortnite

3. Quand la page est fabriquée à la demande pour le client : exemple avec PHP⚓︎

Rappelons que toutes les pages que nous avons créées jusqu'à présent sont uniformément envoyées par le serveur au client. Aucune «préparation» de la page en amont n'a lieu sur le serveur, aucun dialogue n'a lieu avec le serveur une fois que la page a été livrée. Évidemment, si le web était comme ceci, il ne serait qu'une gigantesque bibliothèque en consultation seule (ce fut le cas pendant longtemps, et ce qui n'était déjà pas si mal).

Les langages serveurs, parmi lesquels PHP (présent sur environ 80% des serveurs), Python (via le framework Django), Java, Ruby, C#, permettent de rajouter de l'interactivité côté serveur.

Il convient de rappeler la différence fondamentale entre une page statique (côté serveur) et une page dynamique (côté serveur) :

3.1 Page statique (côté serveur) :⚓︎

Lors d'une requête d'un client vers un serveur, si le client demande la page index.html, une copie exacte du fichier index.html est transmise au client sur sa machine.

Exemple : la page http://sofaugeras.com/interesting.html que vous avez déjà consultée se trouve telle quelle sur le serveur mis à disposition par Free pour l'hébergement des pages personnelles :

Depuis votre navigateur, l'affichage du code-source (par Ctrl-U) vous donnera le fichier html tel qu'il était stocké sur le serveur.

3.2 Page dynamique (côté serveur) :⚓︎

Lors d'une requête d'un client vers un serveur, si le client demande la page test.php, un code html est généré à partir du fichier test.php puis est transmise au client sur sa machine. Le fichier transmis ne contient plus de balises php, il ne comporte que des balises html classiques.

Exemple : la consultation de la page http://sofaugeras.com/test.php va renvoyer la page suivante :

dont le code-source est :

Notez bien que ce code-source ne contient que du html.

Allons regarder cette page du côté du serveur :

Le contenu de cette page est :

🐘 PHP

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Quel jour sommes-nous</title>
    </head>
    <body>
    <p>
    <?php
    $date = date("d-m-Y");
    Print("Nous sommes le $date");
    ?>
    </p>
</body>
</html>

On y repère la balise <?php> :

🐘 PHP

    <?php
    $date = date("d-m-Y");
    Print("Nous sommes le $date");
    ?>

Ce code php a donc généré, lors de l'appel au serveur, le code html :

HTML

Nous sommes le 20-05-2025

Vous pouvez tester du code PHP et la page générée par exemple sur ce site.

Voilà comment un serveur peut adapter la page qu'il renvoie, suivant l'utilisateur qui la demande. Nous verrons prochainement comment par des requêtes le client peut envoyer des paramètres au serveur, et comment celui-ci modifie sa réponse en conséquence.

En savoir plus : https://www.php.net/manual/fr/tutorial.firstpage.php

7.1 Pages web et interactions⚓︎

1. Le cas le plus simple : la même page pour tout le monde⚓︎

1.1 html pur⚓︎

1.2 Images, liens absolus et liens relatifs⚓︎

Le lien absolu⚓︎

Le lien relatif⚓︎

Image légendée, libre de droits⚓︎

1.3 html + css⚓︎

2. Quand le client peut agir sur sa page : exemple avec JavaScript⚓︎

3. Quand la page est fabriquée à la demande pour le client : exemple avec PHP⚓︎

3.1 Page statique (côté serveur) :⚓︎

3.2 Page dynamique (côté serveur) :⚓︎

1.1 `html` pur⚓︎

1.3 `html` + `css`⚓︎