Comment fonctionne un site web ?

2024-01-25

On consulte des sites web chaque jour sans véritablement savoir comment cela fonctionne. Pourtant le simple fait de naviguer à, en quelques secondes, un impact direct sur un ensemble de périphériques comme votre ordinateur, les switchs et routeurs, les serveurs, les bases de données. Après avoir abordé le sujet des cookies dans un précédent article je vous propose de s'attarder ici, sur le fonctionnement d'un site web pour en comprendre de manière succincte le fonctionnement.

Le protocole http & https :

Conçu au début des années 90, c'est le protocole de communication qui permet de transférer des informations via des fichiers (HTML) sur le World Wide Web. Jusqu'à une époque pas si lointaine les navigateurs affichaient encore le préfixe "http" ou "https" suivi de "www." dans l'URL du navigateur. Aujourd'hui, notamment sur Chrome tout cela est masqué au profit du nom de domaine et de son extension en ".fr, .com etc.". A la fin de cette adresse est masqué également le port (:xx), ainsi pour "google.fr" cela donne par exemple "https://www.google.fr:443".

Ce protocole utilise des commandes, dont certaines sont facilement identifiables lors de votre navigation et d'autres moins visibles. Par exemple la commande "GET" qui permet de passer des paramètres dans l'URL. Si vous vous rendez sur Google à nouveau vous constaterez qu'à la génération d'une requête de recherche, l'URL est modifiée.

Exemple ici : "https://www.google.fr/search?q=ma+recherche", si vous changez le paramètre après "q=" vous changerez le contenu de la recherche effectuée par Google.

HTTP n'est d'ailleurs pas le seul protocole interprétable par un navigateur, nous pourrions utiliser un autre protocole, ftp:// ou ftps:// (File Transfert Protocol) de la même façon.

Pour que HTTP fonctionne, les serveurs disposent d'un service actif. Ils "écoutent" sur un port : 80, 8080, 443 et attendent la connexion d'un utilisateur pour afficher une page. Quelques exemples célèbre de programme serveur : "Apache", "IIS". Ils peuvent être dédiés ou mutualisés entre plusieurs sites.

Un site web est donc en mesure d'instruire des actions pour vous mais vous aussi vous êtes en mesure à travers votre navigateur de donner un ensemble d'instructions. C'est d'ailleurs comme cela que de nombreux sites se font pirater.

Qui sont les acteurs ?

De manière simplifiée voici ceux qui entrent en jeux lorsque vous consultez un site :

• Les applications : C'est l'IHM (Interface Homme Machine) qui permet de faire les relations montantes et descendantes entre les couches encapsulées et le client pour être affiché à l'Utilisateur. En bref, votre navigateur web.
• Le client : C'est le support physique, un smartphone, une TV, un ordinateur.... C'est ce celui-ci qui est considéré comme le "client".
• Le réseau : C'est l'ensemble des périphériques réseaux qui permettent de faire transiter la demande du client vers le serveur.
• Le serveur : C'est le destinataire de la demande qui va traiter l'information.

Le HTML

HTML est un langage permettant de créer un document avec des balises qui encadrent différentes parties du contenu afin de les faire apparaître ou comporter d'une certaine façon.

HTML est ensuite interprété par le navigateur web du client pour afficher le contenu d'une page web.

Découvrez mon tutoriel sur le HTML à cette adresse : Tutoriel HTML

Le CSS

Initialement même si le CSS était déjà présent, le style visuel de la page était directement intégré dans le HTML. Avec l'amélioration de la compatibilité entre navigateurs et l'adoption croissante des normes web, l'utilisation de CSS s'est généralisée. Ainsi, est attaché depuis à chaque page HTML une ou plusieurs feuille de style css visant à gérer l'esthétique de la page. Aujourd'hui, CSS est une technologie fondamentale pour la conception web, permettant de séparer la structure (HTML) de la présentation (CSS) et de fournir un contrôle plus précis sur l'apparence des sites web.

Avec html et css vous êtes en mesure de fournir une page web mais celle-ci n'est pas en mesure d'interagir avec l'utilisateur, en tout cas pas de manière poussée. C'est là où les langages de type client et les langages de type serveur ont leur rôle.

Découvrez mon tutoriel sur le CSS à cette adresse : Tutoriel CSS

Le javascript

JavaScript est un langage de programmation de script principalement utilisé du côté client pour créer des pages web interactives. Il est souvent utilisé pour répondre à des événements utilisateur et manipuler le contenu HTML et CSS d'une page web. (ex: Faire apparaître ou disparaître un pop-up).

Etant donné qu'il est exécuté côté client, comme le css et le html, il sera visible du côté de l'utilisateur à travers l'option "Inspecter" ou "Afficher la source" et vous serez en mesure de le modifier pendant votre session.

Découvrez mon tutoriel sur le CSS à cette adresse : Tutoriel javascript

Comment utiliser l'inspecteur ?

Le langage serveur

Contrairement à javascript, sur ce domaine il y a beaucoup plus de concurrence, PHP, JAVA, Python, Ruby... Ce langage va exécuter des commandes du côté serveur et celles-ci ne seront pas toujours visibles. La création d'un cookie, l'insertion d'informations en base de données par exemple sont réalisées via ce type de langage.

La base de données

Là aussi, il y a de nombreuses solutions : SQL, MySQL, fichier texte... C'est le lieu où sont stockées de manière durable les informations.

Découvrez mon CMS utilisant MySQL et PHP à cette adresse : CMS gratuit simple FrogNestCMS

Les logs

Tout ce que nous avons vu plus tôt est éphémère et dure le temps d'une session s'il n'est pas enregistré en base de données. Néanmoins chaque service, http, php, mysql stocke des logs. Ce sont des "journaux d'évènements" qui servent à pouvoir diagnostiquer en cas de défaillance. Ils enregistrent les connexions, les paramètres en URL et tout un tas d'autres évènements.
Accessible uniquement depuis le serveur ils ne sont pas visibles sur le site.

Voici donc en bref comment fonctionne un site internet, si vous souhaitez aller plus loin je vous conseille l'excellent site "OpenClassRoom" (ex "Site Du Zéro") qui depuis des années transmet le savoir aux geeks en herbe.

Quelques liens si vous souhaitez aller plus loin

• Découvrez les protocoles web
• Apprendre CSS et HTML