On retrouve l'[[Architecture Client-Serveur]] très souvent sur [[Internet]] et en particulier sur le [[Web]].
## Au restaurant
Imaginons un restaurant avec un-e client-e qui souhaite commander son plat.
Il y a un serveur ainsi qu'une personne en cuisine.
![[client-serveur-au-resto-meilleures-denrées-du-nord.png|480]]
<div style="page-break-after: always;"></div>
```mermaid
---
title: Au restaurant "Meilleures Denrées du Nord"
---
sequenceDiagram
Client->>Serveur: Bonjour, pouvez-vous <br/>me montrer le menu ?
Serveur->>Client: Bien sûr, le voici ! # (ressource statique)
Client->>+Serveur: Je vais prendre <br/>la choucroute de la mer.
Serveur->>+Cuisine: Un plat du jour <br/>pour la 2 !
Cuisine->>-Serveur: C'est prêt !
Serveur->>-Client: Choucroute de la mer: <br/>Haddock, Truite, Merlan et Lotte
Client->>Serveur: Oh c'est joli comme <br/>décoration, c'est quoi ?
Serveur->>Client: Coulis de Safran et Sauge
```
<div style="page-break-after: always;"></div>
## Maintenant sur le Web
```mermaid
---
title: Naviguer sur le site Web MDN Web Docs
---
sequenceDiagram
Navigateur->>Serveur_Web: HTTP GET accept:text/html <br/>https://developer.mozilla.org/fr/docs/Web
Serveur_Web->>Navigateur: HTTP 200 OK (page Web) <br/>response : <br/><!doctype html><html>...
Navigateur->>+Serveur_Web: HTTP GET accept:text/html <br/>https://developer.mozilla.org/fr/docs/Web/HTML
Serveur_Web->>+Serveur_Application: generate /docs/Web/HTML
Serveur_Application->>-Serveur_Web: <h1>HyperText Markup Language</h1><br/><p><strong>HTML</strong> signifie <br/>« <em>HyperText Markup Language</em> » <br/>qu'on peut traduire par <br/>« langage de balises pour l'hypertexte ». …</p>
Serveur_Web->>-Navigateur: HTTP 200 OK (page Web) <br/>response: <br/><h1>HyperText Markup Language</h1>…<br/>
Navigateur->>Serveur_Web: HTTP GET accept:text/css <br/>https://developer.mozilla.org/static/css/main.257fbf0f.css
Serveur_Web->>Navigateur: HTTP 200 OK (feuille de style CSS) <br/>response: <br/>body { background-color: black }
```
## Ressources
- [How the Web Works: A Primer for Newcomers to Web Development (or anyone, really)](https://www.freecodecamp.org/news/how-the-web-works-a-primer-for-newcomers-to-web-development-or-anyone-really-b4584e63585c/)