L3 MIASHS, Programmation Web 2, année 2022

Introduction à HTML/CSS

Les liens font partie du cours et doivent être lus/visités.

Architecture client/serveur et requête HTTP

À chaque fois qu’une personne visite un site internet, elle consulte une URL qui pointe vers une page HTML qui va être afficher.

Cette simplicité cache un grand nombre d’étape intermédiaire.

Le navigateur va:

  1. Interroger les serveur DNS pour transformer l’URL en IP: on parle de résolution d’URL.
  2. Se connecter au serveur grâce à l’addresse IP (et le protocole TCP/IP)
  3. Demander au serveur via le protocole HTTP une page web (sous la forme d’un document HTML)
  4. Télécharger le document HTML et le lire.
  5. Trouver des ressources nécessaires à son affichage:
    • feuille de style CSS
    • fichier JavaScript
    • média: images et vidéo
    • fichier de données: document JSON, XML.

Chacune de ses ressources vont faire l’objet de requêtes séparées.

Anatomie d’une requête de Firefox pour se connecter à un site web

Lorsque mon navigateur se connecte à perdu.com, voici la requête qu’il envoie au serveur.

GET / HTTP/2
Host: perdu.com
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: fr,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
DNT: 1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Sec-GPC: 1
Cache-Control: no-cache

Cette requête contient quelques informations intéressantes.

  1. La première ligne contient la méthode HTTP utilisée (ici GET), la ressource cible (ici / la racine) et le protocole (ici HTTP/2). La méthode HTTP indique au serveur le type d’interaction que l’on souhaite réaliser. Le serveur n’est pas obliger de répondre favorablement. Les méthodes possibles sont nombreuses, mais les plus courantes sont les suivantes:

    • GET : accéder à un document sur le serveur (et ne doit surtout rien changer au serveur)
    • POST: soumettre une information au serveur
    • DELETE: supprimer une ressource sur le serveur
    • PATCH : met à jour une ressource.

  2. La deuxième ligne indique la cible (l’URL) visé. Cela est utile notamment quand un seul serveur héberge de nombreuses pages web. Cela permet au serveur de comprendre quel site est concerné par la requête.

  3. User-agent indique au serveur le type de client qui a générer la requête.

  4. Accept: indique au serveur le type de document que sait lire le client.

Le serveur répond alors par une requête contenant:

L’entête ressemble beaucoup à la requête:

HTTP/2 200 OK
date: Mon, 20 Dec 2021 14:03:32 GMT
server: Apache
last-modified: Thu, 02 Jun 2016 06:01:08 GMT
etag: "cc-5344555136fe9-gzip"
accept-ranges: bytes
cache-control: max-age=600
expires: Mon, 20 Dec 2021 14:13:32 GMT
vary: Accept-Encoding,User-Agent
content-encoding: gzip
content-length: 163
content-type: text/html
X-Firefox-Spdy: h2

Et un document HTML qui n’est rien d’autre qu’un document texte avec des balises indiquant des informations sur la structure et qui sera interprété par le navigateur pour l’affichage de la page.

<html>
    <head>
        <title>Vous Etes Perdu ?</title>
    </head>
    <body>
        <h1>
            Perdu sur l'Internet ?
        </h1>
        <h2>
            Pas de panique, on va vous aider
        </h2>
        <strong>
            <pre>
                *<----- vous &ecirc;tes ici
            </pre>
        </strong>
    </body>
</html>

Ce document peut être vu comme un arbre qui hiérarchise l’information qu’il contient. On parle alors de DOM

Lisez et faites les activités de cette page de mozilla.

Séparation du fond et de la forme

Le site perdu.com n’est pas très intéressant, il n’a pas besoin de style pour afficher son information. Quand on a beaucoup de contenu, il devient difficile de parvenir à maintenir un affichage cohérent et uniforme sur l’ensemble d’un site.

Si chaque page était complètement indépendante, cela signifierais que chaque modification de style sur un site nécessiterais de retravailler chaque page indépendamment.

Pour éviter ça, on introduit une séparation du contenu (le fond) de la forme (le style). Ce n’est pas propre à internet, c’est également le cas:

Introduction à CSS

Contrairement à une idée répandu, créer une feuille de style est difficile. C’est un travail de professionnel de le faire correctement et cela nécessite d’être à jour dans les différentes politiques des navigateurs.

Il y a des corps de métiers du web dont c’est l’unique objectif. Il est possible de faire énormément de chose de pleins de façon différentes avec CSS.

On ne peut pas reprendre tous le langage et ces spécificités ici, et durant les TD on manipulera différentes parties de CSS.

Dans une feuille de style, on a des règles de la forme:

descripteur {
    attribut1: valeur1;
    attribut2: valeur2;
    ...
}

Un descripteur est une manière de décrire des ensembles d’éléments. Il existe pleins de manière de le faire:

Pour en savoir plus, lisez la page de Mozilla.



Compiled the: dim. 07 janv. 2024 23:19:10 CET