Installation

Publié le March 17, 2019 par Hubert
Tags: web, http, css

Principe du WEB

Lorsque vous utilisez un navigateur internet (Chrome, Firefox, Safari, Internet Explorer, …) vous naviguez sur internet. Le navigateur permet d’afficher des sites WEB, qui sont des pages de contenu. Cette navigation est régie par le protocole HTTP. Dans les grandes lignes ce protocole décrit la façon qu’a votre navigateur de contacter un serveur HTTP, c’est à dire la machine qui possède le contenu du site que vous visitez, de lui spécifier quelle page vous voulez afficher et comment le serveur vous délivrera son contenu.

Voici par exemple une requête effectuée par votre navigateur

GET / HTTP/1.1
Host: pointfixe.fr:80
User-Agent: curl/7.52.1
Accept: */*

Ce message est envoyé via une communication TCP au serveur pointfixe.fr sur le port 80.

Les messages échangés entre le navigateur et le serveur contiennent l’information du contenu des pages. Cette information est codée dans le format HTML. C’est un langage à balise (XML) de description de contenu. Par description on entends le contenu d’une page internet (texte, images, …) et structure (titre, liens, sections, …).

Voici par exemple le code source d’une partie de cette page

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Pointfixe - Installation</title>
        <link rel="stylesheet" href="../css/default.css" />
    </head>
    <body>
        <header>
            <div class="logo">
                <a href="../">Yf = f(Yf)</a>
            </div>
            <nav>
                <a href="../">Home</a>
                <a href="../about.html">About</a>
                <a href="../contact.html">Contact</a>
                <a href="../archive.html">Archive</a>
            </nav>
        </header>

        <main role="main">
            <h1>Installation</h1>
            <article>
    <section class="header">
        Publié le March  3, 2019
        
            par Hubert
        
    </section> 

Cette description HTML est le plus souvent couplée avec une feuille de styles (au format CSS) décrivant comment est affiché le contenu de la page (taile des marges, police, couleur, …)

Encore un exemple, cette fois d’un style CSS

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  color: #000;
}

Le navigateur reçoit toutes ces informations et reconstitue la page.

Cette séparation entre le fond et la forme, le quoi et le comment, sont à la base des langages de contenu, parmi lesquels on trouve donc le couple HTML + CSS, le langage TeX… C’est également sur ce principe que se fonde le Markdown et ses différents compilateurs (comme Pandoc)1.

Qu’est-ce qu’un site statique ?

Comme on l’a vu, le serveur envoie au client (le navigateur) le contenu des pages WEB. Il a le contrôle sur ce contenu, et peut donc, par conséquent, le générer dynamiquement (à chaque fois qu’u navigateur lui le lui demande). Cette méthode à l’intéret de pouvoir fournir un contenu personnalisé à chaque client. Ceci est nécéssaire, par exemple sur un forum, dans les réseaux sociaux, …

Cette méthode n’est pas neutre au niveau consommation des ressources, car les pages doivent être générée à chaque fois.

Le serveur peut également se contenter de renvoyer des pages WEB déjà existante. Dans ce cas, le contenu n’est pas dynamique, mais statique : les pages sont figées et ne peuvent pas être modifiée par le serveur. On gagne alors en capacité de calcul car on n’a pas à générer ces pages. C’est le cas par exemple de ce blog !

Dans un prochain article je décrirais la solution que j’utilise pour générer ces fichiers que le serveur WEB se contente d’envoyer.


  1. On en parlera plus tard↩︎