Mis à part si vous vivez dans une caverne, sur la Lune ou dans une caverne sur la Lune, je ne pense pas prendre trop de risque en disant que vous êtes tous déjà aller sur internet et y avez consulter des sites divers et variés.
Mais vous êtes vous déjà demandé comment tout cela fonctionnait ? Quelle était la mécanique qui se cachait derrière ?
Si ce n’est pas la cas tant pis. Pour les autres, je vais tenter ici de répondre à cette question.
C’est quoi un site internet statique
Une fois n’est pas coutume, un site internet est un ensemble de fichiers qui, pour un site internet porte l’extension .html. On trouvera un fichier par page web.
Ces fichiers vont être stockés sur ce qu’on appelle un serveur d’application lorsque celui-ci sera mis en ligne (qu’on appelle mise en production). Ce serveur est géré par la société d’hébergement à qui vous payez l’espace serveur dédié à l’emplacement de votre site et, très probablement, votre nom de domaine.
En stockant le site sur ces serveurs, il devient accessible à tous via un navigateur web. C’est d’ailleurs à ces navigateurs, avant les utilisateurs, que ces fichiers s’adressent puisqu’ils sont construits de manière à être lisible par les navigateurs en question via deux langages bien spécifiques : HTML et CSS.
Comment procèdent les navigateurs
Lorsque vous effectuez une recherche sur internet, le moteur de recherche va utiliser les mots clés pour trouver dans les pages internet indexées les résultats les plus pertinents correspondant à votre recherche. Il vous affiche ensuite des liens amenant sur divers pages de divers sites. C’est à partir du moment où vous cliquez sur un de ces liens que c’est deux langages interviennent.
En effet, et c’est un des premiers éléments importants, HTML et CSS (respectivement 5 et 3 qui sont leurs versions actuelles) sont les deux seuls langages que votre navigateur internet, quel qu’il soit, est capable de lire. Cela dit, ce ne sont pas les seuls qui interviennent dans le domaine du web, mais on y reviendra quand on parlera des sites dynamiques.
HTML pour le fond…
Au moment de l’ouverture d’une page web, votre navigateur va donc lire le code source de la page, qui est en fait le fichier HTML stockée sur le serveur, pour afficher la page.
Ce fichier se compose de ce qu’on appelle des balises. Il y en a deux principales, (et obligatoires!) la balise « head » et la balise « body » qui sont composées d’une balise ouvrante et d’une balise fermante. Elles s’écrivent ainsi : <head> </head> et <body> </body>
La balise « head » vient en premier, elle va contenir diverses données comme le titre de la page ou encore l’encodage des caractères utilisés par la navigateur. En l’occurrence, pour nous, il s’agit des caractères alphanumériques que nous utilisons au quotidien mais une page web peut très bien être adaptées au caractères des langues asiatiques ou arabes par exemple.
Bien que lu par le navigateur, les données de la balise « head » ne sont jamais affichées à l’utilisateur. Elles ont pour seule utilité le bon fonctionnement de la page.
La balise « body » va quant à elle contenir tout ce que la page web va pouvoir affichée. Cette balise va elle-même être subdivisée en plusieurs balises correspondant à un type de contenu : <p> </p> par exemple contiendra du texte. Les images sont contenues dans la balise <img>. A noter que cette balise n’a pas de partie fermante et s’écrit comme ceci : <img src= « source de l’image »>. Il en existe d’autres comme la balise <br> servant à effectuer un retour à la ligne. On appelle ces balises des balises orphelines.
Il existe de nombreuses balises permettant de diviser les différents éléments qui composent un page web. Ces balises peuvent être nommées et identifiées. Cette nomenclature peut notamment servir pour le référencement des pages. Et si vous vous demandez comment fonctionne le référencement SEO, je vous renvoie vers cet article judicieusement intitulé… Le référencement SEO.
Mais avant tout, lors de la construction d’une page web, les identifiants des diverses balises va servir à isoler ou grouper les éléments pour leur appliquer une mise en forme via le langage CSS ce qui me permet d’effectuer cette incroyable transition.
…CSS pour la forme
Le CSS se présente sous la forme d’un seul fichier appelé feuille de style et qui porte l’extension .css. c’est lui qui va contenir toute la mise en forme de votre page web.
Que cela soit la typographie utilisée, les couleurs appliquées ou encore le positionnement d’un élément dans la page, tout cela va être gérer par le CSS.
Pour cela, on va indiquer l’identifiant d’un élément de la page, spécifié au sein des balises HTML puis lui appliquer des attributs pour le styliser selon l’envie. On peut appliquer des attributs à un seul élément en particulier ou encore à toute la page. Par exemple, si vous sélectionner la balise « body » qui correspond donc à tout le contenu de la page web et que vous lui affecter l’attribut suivant : « background-color : black ; » alors tout le fond de la page sera de couleur noir.
Si vous sélectionner une image en particulier avec l’attribut « border » alors vous pourrez définir une bordure pour votre image.
Bien entendu, pour que tout cela fonctionne, il faut lier la feuille de style avec les pages HTML en transmettant le fichier via un lien dans la balise « head ».
Le langage CSS est un des plus simple dans le domaine du web et avec un peut de recherche dans la documentation, il n’est pas très difficile d’arriver au résultat recherché.
En plus, il existe de nombreux CMS permettant de gérer à votre place la mise en forme de vos page web comme Bootstrap par exemple.
HTML et CSS permette de créer relativement facilement des pages web dites statiques. Cela signifie que le navigateur va lire le code source et afficher ce qu’il contient et que ce contenu n’évoluera pas sauf si l’administrateur du site y apporte des modifications. Comme vous vous en doutez, le web va beaucoup plus loin et il existe des sites avec des pages dites dynamique. Mais ça, ce sera pour la prochaine fois.
6 réflexions au sujet de « Comment fonctionne un site internet statique »
Great post. I was checking constantly this blog and I am
impressed! Extremely helpful info specially the last part 🙂 I
care for such info a lot. I was seeking this particular information for a very long time.
Thank you and good luck. frankrike tröja
RoseanneC juventus tröja ChandaTot
I’m glad to be helpfull!
Thanks for your personal marvelous posting! I actually enjoyed reading it, you are a
great author. I will be sure to bookmark your blog and will come back very soon. I
want to encourage you to definitely continue your great job, have a nice day!
borussia dortmund drakt
LouisaBri ronaldo fodboldtøj ValentinM
Thanks a lot!
Woah! I’m really loving the template/theme of this blog.
It’s simple, yet effective. A lot of times it’s
difficult to get that « perfect balance » between superb usability and visual appeal.
I must say you’ve done a excellent job with this. Also, the blog loads extremely quick
for me on Opera. Excellent Blog! maglie lazio 2022
KassieRgm manchester city tröjor JennyLuse
Great information. Lucky me I recently found your blog by chance
(stumbleupon). I’ve bookmarked it for later!
napoli trøje
CarlotaBe maglia napoli 2022 prezzo AdolfoMee