Le fonctionnement du Web

synthèse rédigée par Pauline Leplongeon, mise en ligne par Stella Mulas, stagiaires sur le projet EVEille en 2022 et 2023

Internet vs Web

Internet est antérieur au web, il s’agit de l’infrastructure et du réseau matériel de télécommunication qui relie des ordinateurs, des réseaux entre eux et qui permet le transfert de données. L’Internet utilise des câbles, notamment sous-marins, pour effectuer ces opérations de transfert.
Internet est le support de plusieurs services dont le web, les messageries électroniques, ou encore le FTP (pour échanger des fichiers entre ordinateurs). Aujourd’hui, beaucoup de ces services utilisent le web ce qui explique pourquoi on a tendance à confondre web et internet.
Toutefois, il existe encore des usages d’internet qui n’utilisent pas le web. Par exemple, les données du SUDOC (les notices bibliographiques des documents) qui sont transférées aux logiciels de gestion des bibliothèques, et ensuite visibles sur leur catalogue en ligne ne passent pas par le web.

Le web

Le web a été créé entre en 1989 et 1991 par Tim Berners-Lee avec l’aide de Robert Cailliau au Conseil européen pour la recherche nucléaire (CERN). Il s’est servi des technologies existantes : internet, les ordinateurs et les liens hypertextes. Il invente le navigateur, un logiciel permettant de naviguer au sein d’une collection de documents, des pages, reliées entre elles par des liens hypertextes.

W3C

En 1994, Tim Berners-Lee créé le Word Wide Web Consortium ou W3C qui se donne pour mission de structurer et de suivre l’évolution du web de façon à ce qu’il reste un outil libre, unique, utilisable par tous. Il produit notamment des recommandations sur l’évolution des langages web. Ainsi le html est un langage standardisé maintenu et développé par le W3C (voir ci-après pour plus de précisions sur le html).

Comment fonctionne le web ? Client, serveur et site

Le web fonctionne sur un système de clients et de serveurs.
Le client est l’ordinateur de l’utilisateur. Il est connecté à un internet et utilise un logiciel d’accès au web autrement dit, un navigateur (comme Firefox, Safari, Google Chrome).
Le serveur est un ordinateur qui stocke un site web ou des données brutes.
Un site web est lui-même composé de pages web. Concrètement un site web est un ensemble de fichiers qu’on peut classer en deux catégories :

  • les fichiers de code c’est-à-dire les fichiers écrits en html, css et autres langages, chaque fichier html correspond à une page web.
  • les fichiers ressources comme un fichier image, un fichier son ou vidéo, un fichier PDF qui apparaissent sur les pages web.

Quand un client accède à une page web, une copie de la page est en fait téléchargée depuis le serveur et envoyée au client dont le navigateur affiche la page dans une version lisible par l’humain.

Adresse web, URL et adresse IP

Chaque page web a une adresse web ou URL qui permet de la localiser. Cette URL est une suite de caractères alphanumérique facilement lisible par l’oeil humain. ELle correspond en fait à une adresse IP qui prend la forme d’une suite de chiffres. Les correspondances entre les URL et les adresse IP sont stockées dans des serveurs spéciaux, les DNS (Domain Name System). Ainsi, quand l’utilisateur saisit une adresse ou URl dans un navigateur, celui-ci va chercher l’adresse IP correspondante dans une DNS. Puis, il envoie une requête HTTP au serveur qui stocke la page, de façon à en obtenir une copie.

Le protocole HTTP/HTTPS

HTTP signifie : Hypertext Transfer Protocol. C’est un protocole de communication entre client et serveur. Il a été inventé par Tim Bernes-Lee.
HTTPS est la version sécurisée du protocole HTTP. Il garantit la confidentialité des données envoyées par l’utilisateur et lui permet d’authentifier un site. HTTPS est très utilisé aujourd’hui, notamment pour accéder aux sites marchands et bancaires.
Dans le protocole HTTP, différentes méthodes existent pour préciser des types de requêtes différents qui sont envoyées au serveur. Ce dernier exécute alors la requête.
Voici quelques méthodes :

  • GET sert à demander à récupérer une ressource (page, données)
  • HEAD sert à récupérer uniquement les métadonnées de la ressource (notamment ce qui se trouve dans le header d’une page html. voir ci-après).
  • POST sert à transmettre des données à une ressource pour un traitement. Cela peut signifier la création ou la modification de ressources.
  • PUT sert à ajouter ou remplacer une ressources sur un serveur.
  • PATCH sert à modifier partiellement une ressource
  • DELETE sert à supprimer une ressources

(Source : Wikipédia, Hypertext Transfer Protocol)

Navigateur vs moteur de recherche

Attention à ne pas confondre navigateur et moteur de recherche.
“un navigateur est un logiciel qui affiche des pages web, alors qu’un moteur de recherche est un site web qui aide les utilisateurs à trouver les pages web d’autres sites web.”
On utilise un navigateur pour accéder à un moteur de recherche.
La confusion entre les deux notions tient au fait qu’en ouvrant un navigateur web, on accède souvent directement à la page d’accueil d’un moteur de recherche.
Exemple de moteur de recherche :

  • Les classiques : Google, Bing,
  • Les engagés : Ecosia, Lilo,
  • Les protecteurs de données personnelles : Startpage, Duckduckgo, Qwant

(Source : Mdn Web Doc, Quelle différence entre une page web, un site web, un serveur web et une moteur de recherche ?)

Les langages de balisage

Ils servent à annoter du texte brut avec des informations qui sont lisibles autant par les machines que par les humains. Les annotations sont contenues dans des balises et donnent des informations sur la structure du texte brut autrement dit, sur la structure du contenu. Les balises sont interprétées par un programme informatique.
Il existe plusieurs langages de balisage : le html, le xml, le CSS, le LaTeX, la TEI, le Markdown.

Le HTML

Langage de balisage du web. Toutes les pages web sont écrites en html ce qui permet l’interopérabilité du documents présents sur le web. Une page web est contenu dans un fichier .html.
Il existe un nombre limité de balises, et ce langage est maintenu par le W3C qui décide d’intégrer de nouvelles balises.
Le html se caractérise par un système de balises ouvrantes et de balises fermantes (sauf exception comme <br/> pour le saut de ligne).
Exemple :
<h1>contenu titre</h1>.

Structure html d’une page web :
<html> <head> </head> <body> </body> </html>.

La balise <html> </html> est la balise racine qui encadre toutes les autres.

Entre les balises <head> </head> se trouvent les métadonnées qui ne s’affichent pas sur la page que lit l’internaute. Les métadonnées y sont contenues entre des balises plus spécifiques pour déterminer l’encodage, le titre de l’onglet, etc.

Entre les balises <body> </body> se situe tout ce qui est affiché sur la page web.

Cette structure est obligatoire et se retrouve sur toutes les pages web de tous les sites.
Les balises peuvent donc s’imbriquer les unes dans les autres. Une balise qui contient une autre balise est dite “parente”, la balise imbriquée est dite “enfant” ou “descendante”. Cette imbrication peut avoir des conséquences notamment lors de l’application du CSS (voir ci-après).

La structuration des balises.
Une balise peut être dotée d’un attribut, et l’attribut être doté d’une valeur.
balise + attribut + valeur de l’attribut :
<balise attribut="valeurdelattribut">.
Exemple :
<h1 class="black">, qui signifie que la balise h1 qui détermine un titre de niveau 1 (le plus gros) a un attribut de type “class” qui a lui même une valeur, “black”.
Attention, l’attribut est toujours ajoutée dans la balise ouvrante, jamais dans la balise fermante.

Les principales balises html :

  • balises paragraphe :
    <p> contenu </p>.
  • balise saut de ligne :
    <br/>.
  • balises titre de la page (il y a 6 niveaux de titre, du h1 au h6) :
    <h1> contenu </h1>.
  • balises pour mettre en gras son contenu :
    <strong> contenu </strong>.
  • balises pour mettre en italique son contenu :
    <em> contenu </em>.
  • balises pour faire des listes ordonnées ou numérotées :
    <ol> <li> </li> <li> </li> <li> </li> </ol>.
  • balises pour faire des listes non ordonnées :
    <ul> <li> </li> <li> </li> <li> </li> </ul>.
  • balise pour insérer une image. C’est une balise autofermante :
    <image/>.
    Il faut lui ajouter un attribut de type “src” et mettre le lien vers le fichier image :
    <image src="nom-du-fichier-image.jpg" />.
  • balises pour insérer un lien hypertexte :
    <a> contenu avec un lien hypertexte </a>.
    Comme pour la balise image, il faut lui ajouter un attribut et sa valeur qui correspond à l’url du liens qu’on veut indiquer :
    <a href="https://www.siteavoir.com">Pour aller plus loin</a>.
    La chaîne de caractère “Pour aller plus loin” apparaîtra sur la page web avec un lien hypertexte renvoyant au site indiqué au sein de la balise.
  • Il existe des balises génériques :
    <span> </span>
    <div> </div>.
    Elles n’ont pas de signification sémantique à l’inverse de “h1” qui indique un titre, “p” qui indique un paragraphe, etc. Elles sont utilisées pour mettre en forme le contenu qu’elles encadrent grâce à des attributs qui seront repris dans un CSS (voir ci-après).

Ces attributs sont :

  • class : renvoie au nom de la classe CSS à employer.
  • id : donne un nom à la balise et permet de l’identifier. Il faut que ce nom soit unique sur la page.
  • style : sert à indiquer directement le code CSS qu’on veut appliquer. Cet attribue n’est pas conseillé.

Ces attributs peuvent être utilisés dans d’autres balises et pas seulement dans “span” et “div”.

Le CSS – Cascading Style Sheet

Langage de mise en forme du contenu html maintenu par le W3C.
Sans entrer dans les détails de la mise en relation d’un fichier html avec une feuille de style css (qui intervient dans la balise <head> du fichier html), il s’agit ici de se concentrer sur les principes moteurs du css : les sélecteurs, les propriétés et les valeurs.

  • Le sélecteur : c’est l’élément html sur lequel on souhaite appliquer un style.
    Par exemple, si on souhaite appliquer un style aux paragraphes, on choisit l’intitulé de la balise html du paragraphe, “p”. Si on souhaite appliquer un style aux titre de niveau 2, on prendra comme sélecteur “h2”.
    Après le sélecteur, on ajoute des accolades {} qui contiendront les propriétés et les valeurs.
    Ex : p {}.
  • Les propriétés : elles indiquent quel aspect de l’élément html on souhaite mettre en forme : la taille, la couleur, la police, etc. La propriété est directement suivie d’un “deux-points” sans espace.
    Ex : css p { color: } .

On ne peut pas créer de propriété, elles sont prédéfinies, il faut donc les connaître. De nombreux sites recensent ces propriétés (voir le site du W3C ou le cours de Mathieu Nebra sur le site OpenClassrooms, Mémento des propriétés CSS).

  • La valeur : elle s’applique à la propriété.
    Ex : css p { color: black } .
  • Si on souhaite appliquer une autre propriété à ce sélecteur, on ajoute un point-virgule après la valeur.
    Ex : css p { color: black; } .
  • Ce qui permet d’ajouter une nouvelle propriété et valeur à ce sélecteur, comme la police de caractère.
    Ex :
    css p { color: black; font-family: Arial; } .

CSS : héritage des propriétés.

Une notion fondamentale du CSS veut que tout élément html qui est imbriqué dans une balise hérite des propriétés CSS de cette balise parente.
Par exemple, si on applique la couleur bleue à une balise <div></div> qui contient des balises <p></p>, la couleur bleue s’applique aussi aux paragraphes.

Sources & ressources

  • Site du CNRTL, article “Internet”.
    Lien
  • Site de Aune (Nicolas), Apprendre html et CSS.
    Lien
  • Site de DariahTeach, Langages de balisage et modélisation du texte.
    Lien
  • Site Mdn Web Doc, Le fonctionnement du web.
    Lien
  • Site Mdn Web Doc, Quelle différence entre une page web, un site web, un serveur web et une moteur de recherche ?.
    Lien
  • Nebra (Mathieu), Comprendre le web, Site OpenClassrooms, mis à jour le 2 mars 2022.
    Lien
  • Nebra (Mathieu), Mémento des balises html, Site OpenClassrooms, mis à jour le 25 février 2022.
    Lien
  • Nebra (Mathieu), Mémento des propriétés CSS, Site OpenClassrooms, mis à jour le 25 février 2022.
    Lien
  • Nebra (Mathieu), Apprenez à créer votre site web avec HTML5 et CSS3, Site OpenClassrooms, mis à jour le 25 février 2022.
    Lien
  • WC3, List of CSS properties, both proposed and standard, mis à jour le 7 juillet 2022.
    Lien
  • Wikipédia, Hypertext Transfer Protocol, mis à jour le 23 mai 2022.
    Lien
  • Wikipédia, Langages de balisage, mis à jour le 3 janvier 2022.
    Lien


Citer ce billet
Équipe EVEille (2023, 24 juin). Le fonctionnement du Web. Eveille. Consulté le 20 avril 2024, à l’adresse https://doi.org/10.58079/omnl

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.