Cours : La page web (HTTP et langages HTML et CSS)

Rappel

• Le web est un réseau mondial de pages hypertextes qui utilise le réseau Internet.
• Le World Wide Web désigne collectivement l’ensemble des pages web accessibles sur les différents serveurs reliés au réseau mondial Internet. Les pages peuvent être consultées par l’intermédiaire de logiciels appelés « navigateurs ».
• La page web est un document hypertexte qui peut être affiché par un navigateur web.

Le protocole HTTP

Définition

Protocole (informatique) :

Un protocole informatique est un ensemble de règles (ou normes) créées pour permettre aux ordinateurs de s’interconnecter et aux périphériques d’échanger des données.

Le protocole HTTP (Hypertext Transfer Protocol) s’inscrit dans la suite TCP/IP et se situe dans la couche application du modèle OSI.

Ce protocole a été conçu et développé par Tim Berners-Lee à partir de 1989. La première version documentée de HTTP est apparue en 1991.

À retenir

Le protocole HTTP permet le transfert de fichiers localisés grâce à une URL (notamment ceux aux format HTML et CSS), entre un navigateur (le client) et un serveur web. Cette opération se fait en deux temps avec l’envoi d’une requête puis la réception de la réponse.

Nous allons maintenant illustrer les étapes pour afficher une page web, autrement dit un échange client-serveur.

Imaginons que le navigateur et le serveur sont deux postiers et que notre parcours est un échange permanent de lettres et colis entre les deux postiers qui sont le navigateur et le serveur qui héberge le site auquel on veut accéder.

Rappel

Un navigateur web est un logiciel permettant de consulter les informations disponibles sur le web. Les principaux navigateurs web sont Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Internet Explorer et Edge.
Un serveur web est un ordinateur connecté en permanence à Internet et équipé d’un logiciel servant des requêtes HTTP qui héberge un ou plusieurs sites web.
Un site web est un ensemble de pages web liées entre elles pour former un ensemble cohérent, et pouvant être rattachées à un nom de domaine.

La requête HTTP

Pour lire une page web, notre navigateur doit demander au serveur l’accès à cette ressource identifiée par son URL.

Au clic sur l’URL, le navigateur Internet (l’expéditeur de la lettre) va faire deux actions en simultané :

• il prépare la lettre avec l’adresse de la page ;
• il consulte un annuaire (DNS) pour savoir à qui s’adresse la lettre.

Astuce

Le recours à un annuaire DNS n’est pas nécessaire si on saisit directement une adresse IP.

Dans la lettre se trouvent toutes les informations dont le navigateur a besoin pour afficher la page à l’écran : version du protocole HTTP, langue à afficher, appareil utilisé (Smartphone, tablette, ordinateur), système d’exploitation, adresse IP du navigateur.
La lettre part vers un serveur web et se trouve parmi une pile d’autres lettres adressées par d’autres navigateurs à ce même serveur pour être traitées.

• C’est la requête HTTP.

Définition

Requête HTTP :

Une requête HTTP est un ensemble de lignes envoyées au serveur par le navigateur. Elle se compose obligatoirement d’une ligne de requête, et optionnellement de champs d’en-tête et d’un corps de requête.

• Une ligne de requête contient la méthode à appliquer, la ressource demandée et la version du protocole utilisé.
• Les champs d’en-tête de la requête sont des lignes facultatives qui permettent de donner des informations supplémentaires sur la requête et/ou sur le client (navigateur, système d’exploitation…).
• Le corps de la requête est un ensemble de lignes optionnelles séparé des lignes précédentes par une ligne vide. Il permet par exemple d’envoyer avec la méthode POST des données provenant d’un formulaire rempli par l’internaute.

La réponse HTTP

Quand la lettre arrive chez le serveur, il la lit et prépare ensuite un colis à destination du navigateur. La réponse du serveur est un ensemble de lignes qui comprend la version du protocole utilisé, le code de statut et sa signification, les champs d’en-tête et le corps de la réponse. Le colis arrive alors au navigateur, celui-ci ouvre le colis, assemble et interprète les informations et les pièces contenues à l’intérieur.

• Le navigateur peut alors afficher la page web.

Attention

Cette description est simplifiée, car en réalité une page web se compose d’un certain nombre de ressources individuelles appelées par le fichier HTML. Chacune de ces ressources (fichiers CSS, images, scripts Javascript, etc.) fait l’objet d’une requête HTTP distincte.

De la même manière qu’un postier peut être dans des embouteillages et être retardé, le serveur peut être ralenti, car le trafic est plus intense et parfois même saturé. Il y a alors un temps de chargement, pour afficher une page.

Nous pouvons illustrer l’exemple d’un transfert de fichiers entre un navigateur et un serveur comme suit.

• Le navigateur (client) effectue une requête HTTP.
• Le serveur web traite la requête.
• Le serveur web localise le fichier demandé.
• Le serveur crée des en-têtes de données.
• Le serveur envoie la réponse au navigateur.

Les méthodes

Définition

Protocole HTTP :

Dans le protocole HTTP, une méthode est une commande spécifiant un type de requête, elle demande au serveur d’effectuer une action.

Il existe une version sécurisée du protocole HTTP, appelée HTTPS.

Définition

Protocole HTTPS :

Le protocole HTTPS (Hypertext Transfer Protocol Secure ou protocole de transfert hypertexte sécurisé) est un protocole de communication internet qui protège l’intégrité et la confidentialité des données lors du transfert d’information (entre l’ordinateur de l’internaute et le site) via le protocole TLS (Transport Layer Security).

Il offre 3 formes de protection.

• Le chiffrement consiste à coder les données : quand un internaute navigue sur un site web, personne ne peut écouter ses conversations, ni utiliser ses informations.
• L’intégrité des données garantit la détection d’une modification des données pendant leur transfert.
• L’authentification prouve que l’internaute communique avec le bon site (il est ainsi protégé des attaques des intercepteurs).

À retenir

Quand on développe un site web et qu’on veut sécuriser les échanges qu’il propose, on active le protocole HTTPS pour notre site par l’obtention d’un certificat de sécurité. Ce certificat est délivré par l’autorité de certification (CA).

Le protocole HTTP comporte une dizaine de méthodes. Parmi les plus courantes on trouve :

• la méthose GET (lecture) qui permet le chargement d’une ressource ;
• la méthode POST qui permet l’envoi de données pouvant entrainer une modification sur le serveur.

La méthode GET s’utilise pour faire afficher une ressource. La méthode POST permet d’afficher, mais aussi de créer ou de mettre à jour une ressource côté serveur.

Exemple

GET / HTTP/1.1
Host: www.schoolmouv.fr
Ici la requête GET requiert la page d’accueil du site (/) avec la version 1.1 du protocole HTTP.
Cette requête comporte un seul champ d’en-tête (Host)

Les langages HTML et CSS

La réponse envoyée par le serveur au navigateur est un fichier HTML souvent accompagné d’un fichier CSS et d’autres ressources nécessaires telles que des images pour composer une page web.

Le langage HTML

Définition

HTML :

HTML est le sigle de l’anglais HyperText Markup Language, c’est un langage qui permet de mettre en forme des pages web à l’aide de balises. Les balises permettent de mettre en avant certaines phrases, d’ajouter des fichiers multimédias ou de gérer des formulaires en ligne.

Le langage HTML repose sur 140 balises environ, elles renseignent le navigateur sur l’interprétation des éléments.

Les balises comportent la description de la structure logique du document : elles délimitent le titre, l’en-tête, le corps, les sections ou les paragraphes.

Enfin les balises permettent d’inclure des objets (textes, images, sons) au sein du document. Des liens peuvent être tissés à partir du document et renvoyer vers des ressources situées dans le même document, dans un autre document d’un même site ou vers un document situé sur un autre site web.

Exemple

Un mot peut être associé à sa définition dans un glossaire situé n’importe où sur le réseau.

La principale innovation apportée par HTML réside dans sa capacité à définir simplement ces liens en fournissant l’adresse internet des documents cibles.

Un élément HTML se compose généralement d’une balise ouvrante, d’un contenu et d’une balise fermante. La balise fermante est une copie de la balise ouvrante à laquelle on ajoute un antislash : <p> devient </p>.

Exemple

<p> Paragraphe </p>
Balise ouvrante - Contenu - Balise fermante

Étude d’un code HTML

Voici ci-dessous un exemple de code HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Le meilleur site web</title>
</head>
<body>

<h1>Mes débuts sur le web</h1>
<p>J’ai créé mon <i>tout premier</i> site web grâce à <a title="site de schoolmouv" href= »http://www.schoolmouv.fr"> Schoolmouv</a> ! </p>
<p> Je peux dire sans hésiter qu’il s’agit du <strong>meilleur</strong> site web.</p>

</body>
</html>

On observe plusieurs balises dans ce code HTML.

<title> : balise de titre de la page web
Il s’agit du titre principal qui s’affiche sur l’onglet du navigateur.

<h1> : balise de titre de niveau 1
Il y a 6 niveaux de titres dans le langage HTML (de h1 à h6). Ces balises servent à hiérarchiser et à organiser les informations sur la page.

<p> : balise de paragraphes
Il s’agit d’une des balises les plus courantes. On l’utilise pour délimiter le texte courant de la page.

<strong> : indique que le texte a une importance particulière. Cette balise permet d’afficher une partie du texte en gras.

<i> : permet de mettre du texte en italique.

<a> : crée des liens vers des ressources externes (une autre page web, un e-mail, une image, une autre section du document, etc.).

Le langage HTML définit la structure des informations d’un document. Sa mise en forme est définie par un autre langage appelé CSS.

Langage CSS

Le style graphique des pages web est défini dans le langage CSS.

Définition

CSS 

CSS est l’acronyme anglais de Cascading Style Sheets qui signifie « feuilles de style en cascade ». Le CSS est un langage informatique utilisé sur Internet pour mettre en forme les fichiers HTML et XML.

Les fichiers CSS se composent d’un code qui permet de gérer le design d’une page HTML. CSS est utilisé couramment dans la conception de sites web et bien pris en charge par les navigateurs web depuis les années 2000.

Le principal avantage du langage CSS est de faciliter la mise en forme d’un site avec la possibilité de modifier uniformément chaque type de balise du site.
Une feuille de style attribue une mise en forme spécifique pour chaque balise comme les paragraphes (<p>), les titres (<h1>, <h2>, <h3>), etc.

En effet sans feuille de style un changement de police devrait être effectué individuellement sur chaque page du site (rappelons qu’un site peut contenir plusieurs milliers de pages). La structure est la suivante :

Le sélecteur, les propriétés et les valeurs répondent respectivement aux questions suivantes. À quelle balise HTML le style s’applique-t-il ? Veut-on modifier la couleur de fond, du texte, la taille, la police ? Quelles sont les caractéristiques de la propriété ?

Exemple

h1 {
background-color: #8FD1E6 ;
font-family:brandon grotesque;
font-size: 38px;
color:white
}
p{
background-color: white ;
font-family:brandon grotesque;
color: #21374A
}

Cette feuille de style donnera :

• un fond blanc pour le paragraphe et un fond bleu clair pour le titre de niveau 1 ;
• avec une police de caractère Brandon Grotesque ;
• une police de 38px pour le titre de niveau 1 ;
• un texte bleu marine pour le paragraphe et blanc pour le titre de niveau 1.

La page web avec des styles CSS

Grâce au langage CSS il est aussi possible de créer des feuilles de styles spécifiques pour l’impression des documents ou pour les usagers d’un téléphone portable (avec une mise en forme adaptée aux petits écrans).

Le W3C : un consortium pour les unifier tous

Les standards (normalisations) qui définissent HTML et CSS sont publiés par le World Wide Web Consortium.

Définition

W3C :

Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de standardisation à but non lucratif, fondé en octobre 1994 par Tim Berners-Lee, chargé de promouvoir la compatibilité des technologies du World Wide Web parmi lesquelles HTML et CSS.

Le W3C fonctionne comme un consortium international, il regroupe au 1^er octobre 2019, 453 entreprises membres.