Vous êtes vous déjà demandé comment est créer un site web ?
Si c’est le cas, ou si comme moi, vous êtes curieux de savoir ce qui se cache derrière une page web, alors lisez ce qui suit. Je vais essayer de vous expliquer cela de la façon la plus simple possible.
Vous pouvez noter que je parle bien ici de site web, et non comme nous pouvons aussi souvent l’utiliser le terme de site internet. Évidemment lorsque nous parlons de site internet, nous comprenons tous, ce que cela signifie. Malgré cela la bonne définition est site web.
En effet le web fait partie d’internet. Internet est un gros ensemble qui comprend entre autres : le web, les e-mails, la messagerie instantanée, transfert de fichiers, streaming, etc.
Internet est un réseau informatique que le web utilise via le protocole http.
On confond souvent le web avec internet, car aujourd’hui les autres services appartenant à internet utilisent le web comme porte d’entrée. Si aujourd’hui, nos services de messagerie par exemple, sont consultables directement depuis une page web, ce n’était pas le cas auparavant. Nous devions pour accéder à nos emails, avoir un logiciel dédié pour cela.
Aujourd’hui pour pouvoir nous afficher ces services via une interface web, on utilise le Cloud. Et plus spécifiquement les services SaaS (Software as a Service). Plus simplement un logiciel que l’on utilise à travers une interface web.
Pour l'histoire du web
Le web étant une partie d’internet, c’est donc tout d’abord l’ancêtre d’Internet qui fit son apparition en 1969. C’est un réseau de communication militaire qui s’appelait alors ARPAnet. Le réseau est ensuite devenu un lieu d’échanges universitaires, avant de devenir un réseau grand public sous le nom d’Internet.
Ce sont ensuite les échanges de messages sous le nom d’e-mails qui sont apparus en 1972.
Et enfin en 1991, 22 ans après la création d’internet, est apparu le web, afin d’afficher des pages d’informations.
L’inventeur du web, est un Britannique travaillant au CERN : Tim Berners-Lee. Cet homme invente ainsi le concept de page web contenant des liens hypertextes permettant de naviguer d’une page à l’autre.
Ce “Monsieur” est aussi à l’origine du langage HTML, que l’on utilise toujours aujourd’hui pour concevoir des pages web.
Il crée ensuite le W3C (World Wide Web Consortium) qui s’occupe de faire évoluer les techniques du web.
De quoi ont besoin les sites web ?
Vous devez savoir qu’il y a 2 types d’ordinateurs connectés au web :
- Le Client : C’est votre ordinateur qui sert à consulter les sites.
- Le serveur : C’est un ordinateur qui possède le site que vous souhaitez consulter et qui le diffuse.
La communication entre le client et le serveur est indispensable :
- L’ordinateur du client demande une page au serveur.
- L’équipement appelé serveur génère la page demandée à l’aide du langage serveur.
- Le serveur envoie la page sous forme de langage client.

Les langages :
Les langages client
Lorsque nous créons un site web, nous utilisons des langages. Ces langages vont en quelque sorte servir à bâtir l’architecture du site, avec pour chacun d’entre eux une fonctionnalité.
Les principaux langages client pour créer des sites web sont :
- HTML
- CSS
- JavaScript
Ces 3 langages sont des indispensables à la création de sites web. On parle ici de langages client, ou encore de langages frontend, car ils sont lus par les ordinateurs des clients.
Un langage client définit comment le site web doit s’afficher.
Les langages serveur
À la différence du langage client, le langage serveur définit comment le site web doit se comporter.
Le client (vous et moi) n’y a donc pas accès.
Pour bien comprendre, si je crée par exemple un site web avec un blog :
- Avec le client, je vais dire : “J’affiche mes commentaires sous l’article de blog, avec la couleur de fond en bleu et l’écriture en blanc”
- Et côté serveur, je vais dire : “Je n’affiche les commentaires que si les utilisateurs sont connectés à mon site”.
Les langages serveurs sont très nombreux. Quelques-uns des plus connus :
- PHP
- Python
- C#
- Java (à ne pas confondre avec JavaScript)
- Etc…
Le langage serveur génère une page HTML et CSS qui est envoyée ensuite au client.
Les frameworks
En plus de ces langages, il existe de frameworks afin de faciliter la création du site web. Ces frameworks se rapportent à des langages de programmation (PHP, Python, JavaScript, Ruby, etc.). Ce sont des genres de boîtes à outils qui proposent des bibliothèques de fonctionnalités. Cela va nous permettre de gagner du temps, et éviter ainsi de réinventer la roue !
Comme pour les langages, nous avons des frameworks frontend (client) et des frameworks backend (serveur).
Les navigateurs :
Pour accéder aux sites web, nous avons besoin de navigateurs web. Il y en a une multitude, et nous pouvons citer parmi les plus connus :
- Google Chrome
- Mozilla Firefox
- Internet Explorer, et son successeur Edge
- Opera
- Safari
Le rôle d’un navigateur web est de “décoder” les langages HTML, CSS, JavaScript sous la forme de sites web.
Exemple :
Ci-dessous : A droite un extrait des fichiers HTML, CSS et JavaScript et à gauche l’affichage de ce même code “traduit” par le navigateur et affiché.

Différences entre navigateurs
Bon à savoir, c’est que certains navigateurs n’afficheront pas le site web de la même manière. Pourtant le site web est codé de la même manière ! Alors pourquoi cela ?
En fait, la plupart des langages sont en perpétuelle évolution. De nouvelles fonctionnalités viennent s’ajouter régulièrement. Certains navigateurs prendront en compte ces dernières fonctionnalités, et d’autres non. À cela vient s’ajouter les différentes versions des navigateurs. Afin de prendre en compte ces dernières fonctionnalités, le navigateur doit bénéficier des dernières mises à jour.
Voilà pourquoi, il peut être important de mettre à jour votre navigateur web.
Pour nous, développeur, nous devons également prendre en compte ce paramètre, et nous développons toujours en ayant plusieurs navigateurs sous la main afin de s’assurer que nos créations s’affichent correctement sur la plupart des navigateurs, ou tout du moins, les plus connus d’entre eux. Nous utilisons également un site comme caniuse.com qui nous permet de connaitre les compatibilités des navigateurs avec les fonctionnalités des langages utilisés lors de nos créations.
Exemple de recherche sur caniuse.com :

Navigateurs sur mobile
En plus de ce paramètre de différences d’affichage des navigateurs web, nous devons aujourd’hui aussi être attentifs aux navigateurs sur mobile. Même si ces navigateurs sont développés par les mêmes firmes que les navigateurs web, quelques variantes sont tout de même à prendre en compte.
Notre navigateur web nous permet également de tester et déboguer du code HTML et CSS. Si vous souhaitez voir le code qui se cache derrière une page web, vous pouvez par exemple taper sur les touches Ctrl + u. Un autre onglet vous affichera alors le code de votre page. Nous utilisons également les outils des navigateurs (devtools) en y accédant par appui sur la touche F12.
Exemple avec Ctrl + u sur une page web :

Voici un extrait du code de cette page web qui s’est ouvert dans un nouvel onglet après avoir taper Ctrl + u sur la page :

Les bases de données
Presque tous les sites web ont besoin d’enregistrer des informations comme une liste de leurs utilisateurs, les produits qu’ils affichent, les articles de blogs, etc.
Et c’est précisément le rôle qu’aura une base de données. Celle-ci stockera les informations enregistrées. On parle de stockage des données.
Nous utiliserons pour cela un logiciel dédié au stockage de données.
Parmi les logiciels de base de données les plus connus :
- MySQL
- PostgreSQL
- SQLITE
- Oracle
- SQL Server
- Etc..
Exemple de base de données et d’une de ces tables dans le logiciel MySQL Workbench :

Là aussi pour communiquer avec ces logiciels, un langage s’impose : SQL.
Langage SQL
Pour communiquer avec les bases de données, le langage SQL est utilisé. On parle alors de requêtes SQL.
C’est la plupart du temps, le serveur qui communique avec la base de données, via le langage serveur.
La base de données est également stockée sur un serveur qui sera différent de celui qui héberge notre site.
Par exemple une requête SQL où l’on souhaiterait afficher le nombre d’utilisateurs ayant une adresse Gmail dans notre base de données :
SELECT COUNT(*) FROM utilisateur WHERE email LIKE "%gmail.com";
Ceci est une requête très simple. Bien entendu, il existe des requêtes beaucoup plus complexes.
Communication entre serveurs et clients
Nous savons tous à quoi ressemblent les machines clients, puisque c’est l’ordinateur sur lequel nous sommes actuellement. Les machines serveur, elles se situent la plupart du temps dans un datacenter :

Il existe des datacenters comme celui-ci partout dans le monde.
Ce que nous voyons et qui ressemble à des colonnes sont en fait des baies de serveurs. Les serveurs sont disposés les uns sur les autres avec plusieurs dizaines de serveurs par baie.
Les serveurs sont souvent des machines plates afin de pouvoir les entasser plus facilement dans une baie. Ils ne disposent pas d’écran et se contentent de transmettre le contenu des sites web qu’ils stockent.
À l’arrière de ses serveurs des câbles réseaux reliés à un câble de fibre optique pour permettre un échange ultrarapide. Ces câbles de fibre optique sont souvent enterrés mais aussi souvent en sous-marins. La majorité du trafic Internet passe par des câbles sous-marins. Lorsque nous nous connectons à un site situé en Chine ou États-Unis, les échanges se sont via ces câbles sous-marins.

Rassurez-vous, si toutefois un câble comme celui-ci est coupé, l’échange de données se ferait tout de même car les données trouveraient instantanément une route bis toutes seules.
En pratique, lorsque vous choisissez un hébergeur, et donc un serveur pour distribuer votre site, mieux vaut prendre les serveurs les plus proches de vos utilisateurs. Vous gagnerez alors quelques millisecondes sur l’affichage de votre site.
L'adresse IP
Tout comme un téléphone dispose d’un numéro sur lequel l’appelé, chaque ordinateur, qu’il soit client ou serveur, possède une adresse. On parle d’adresse IP. Cette adresse est composée d’une suite de nombres.
Les noms d'hôtes et DNS
DNS signifie : Domain Name Service. En français, il s’agit de notre nom de domaine.
Lorsque vous créez un site internet et que vous l’hébergez, la première chose qui vous sera demandée et de choisir (et payer) un nom de domaine. Mon nom de domaine est activateurweb.com.
Le DNS permet de traduire le nom de domaine en adresse IP. Il est en effet plus facile de se souvenir d’un nom de domaine que d’une suite de nombres. Ainsi lorsque vous tapez activateurweb.com sur votre navigateur, le DNS est réquisitionné afin de traduire ce nom de domaine en adresse IP. Si vous souhaitez l’adresse IP d’un serveur de site web, vous pouvez essayer le site PingTool.org et ensuite l’outil Reverse DNS Lookup.

Les protocoles
Pour que les ordinateurs puissent communiquer entre eux, nous devons utiliser des langages de programmation que nous appelons des protocoles. Il existe 2 formats de protocoles :
Les protocoles bas niveau :
On les retrouve dans toutes les communications :
- TCP (Transmission Control Protocol)
- UDP (User Datagram Protocol)
La communication TCP en particulier est très importante. Elle a été inventée par Vint Cerf, considéré aujourd’hui grâce à cela comme le père d’Internet. Sans cette transmission, pas de communication réseau… TCP est utilisé pour un peu tout : faire transiter des pages web, des e-mails, des vidéos…
Les protocoles haut niveau :
Les protocoles dits “haut niveau” sont généralement basés sur TCP (ou UDP). Ils forment une surcouche qui englobe TCP.
Les noms des protocoles haut niveau :
- HTTP : le protocole qui permet d’échanger des pages web entre le client et le serveur
- HTTPS : identique à HTTP, avec le “S” en plus qui signifie “Secure”.
- FTP : permet d’échanger des fichiers.
- SMTP : permet d’envoyer des e-mails. • Etc.
Conclusion
Nous avons vu comment est construit un site web, les langages utilisés côté client et côté serveur, et comment la communication se fait entre le client et le serveur. Bien évidemment cette liste peut être étendue en fonction du site que nous souhaiterons créer. D’autres langages ou d’autres protocoles peuvent être nécessaires.
Je développerai dans de futurs articles, ce qu’il est nécessaire de prendre en compte lors de la création d’un site web comme le choix du développement en mobile-first ou en desktop-first pour qu’un site web soit dit responsive. c’est à dire qu’il s’adapte quel que soit sur l’écran ou il est affiché. J’espère que cela vous aura permis de mieux comprendre se qui se cache derrière un site web.
N’hésitez pas à me laisser vos commentaires. Merci d’avoir lu cet article et à bientôt pour un nouveau sujet sur le développement web.
En attendant, prenez soin de vous, et surtout, restez curieux !