Web

Cette page est une introduction au développement web par le duo HTML/CSS et le langage de programmation PHP.

Un peu de terminologie

Hôte

Ordinateur connecté à un réseau.

Ressource

Entité informatique (image, texte, …) dites locale si présente sur l’hôte de l’utilisateur ou distante si sur un hôte différent donc accessible via un protocole de communication.

HTTP

HyperText Transfer Protocol, protocole de communication utilisé pour le web.

HTTPS

HyperText Transfer Protocol Secure, variante avec chiffrement.

Hyperlink

HyperLien, élément dans une ressource associé à une URL.

HTML

HyperText Markup Language, language de description d’un document (titre, paragraphe, image, lien, …).

Serveur

Hôte sur lequel fonctionne un logiciel serveur.

Serveur HTTP

Logiciel utilisé pour service des ressources au travers du protocole HTTP.

Serveur web

Hôte sur lequel fonctionne un serveur HTTP.

Site web

Ensemble de pages web et de ressources liées et accessible par une adresse web.

La technologie URL

Note

Chaîne de caractères décrivant l’emplacement d’une ressource

@startuml url scale 2.5 skinparam backgroundcolor transparent skinparam defaultFontName Hack rectangle Protocole #Tomato { rectangle "https://" #LavenderBlush } rectangle "Nom du serveur" #LightGreen { rectangle "ugaritic.fr/" #LavenderBlush } rectangle "Nom Local de la ressource" #LightBlue { rectangle "supports/" #LavenderBlush } @enduml 

[protocole]://[nom d'hôte]/[chemin]

https://ugaritic.fr/helloworld.html

Naissance d’internet

Internet est un ensemble de réseaux d’ordinateurs repartis dans le monde et connectés entre eux, un réseau de réseaux. Issu d’ARPANET (1969), réseau militaire, puis repris par les scientifiques dans les années 80, enfin accessible au grand public dans les années 90.

Les ordinateurs connectés à un réseau IP possèdent une adresse IP. Ces adresses sont numériques afin d’être plus facilement traitées par une machine. Elles sont de deux formes:

  • IPv4: \(xxx.xxx.xxx.xxx\), où \(xxx\) est un nombre variant entre 0 et 255.

  • IPv6: \(xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx\), où \(x\) représente un chiffre en base 16 (hexadécimale).

Le Domain Name Service (1983) est un service permettant de traduire un nom de domain en informations de plusieurs types qui y sont associées. Résoudre un nom de domaine c’est obtenir la traduction de nom de domaine en adresse IP. Avant le DNS, la résolution d’un nom de domaine passait par l’utilisation du fichier HOSTS.TXT (RFC 608).

@startuml dns scale 2.5 skinparam backgroundcolor transparent skinparam defaultFontName Hack skinparam monochrome true actor Utilisateur participant DNS participant "Serveur ugaritic" as Serveur Utilisateur --> DNS: ugaritic.fr ? DNS --> Utilisateur: 51.255.194.187 Utilisateur --> Serveur: HTTP GET / Serveur --> Utilisateur: Envoi document html @enduml

World Wide Web

../_images/www_logo.png

Le World Wide Web (littérallement la « toile (d’araignée) mondiale », abrégé www ou le Web), est un système hypertexte public fonctionnant sur Internet.

Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites. L’image de la toile d’araignée vient des hyperliens qui lient les pages web entre elles. Le Web n’est qu’une des applications d’Internet, distincte d’autres applications comme le courrier électronique, la messagerie instantanée et le partage de fichiers en pair à pair.

Le Web a été inventé en 1989 au CERN à Genève par Tim Berners-Lee et le Robert Cailliau plusieurs années après Internet. Pour ce faire trois technologies furent créées: HTML, URL et HTTP.

Quelques grandes dates:

  • 1993: Renonciation au droit d’auteur sur le Web

  • 1995: Début de la guerre des navigateurs

  • 1996: CSS1

  • 1997: HTML 3.2 puis 4

  • 1998: Google, Mozilla

  • 2000: XHTML1

  • 2001: Wikipédia

  • 2004: Facebook, émergence du Web 2.0

Web 2.0

Plus de simplicité et d’interactivité. Partage, échange, interraction créant notamment le Web social. L’internaute devient, grâce aux outils mis à sa disposition, une personne active sur la toile.

World Wide Web Consortium

Abrégé en W3C, organisme de normalisation à but non lucratif fondé en octobre 1994. Il s’agit d’un Consortium international (383 entreprises partenaires) qui oeuvre pour faire évoluer le web.\

De plus le web est fondé sur les principes:

  • d’universalité: Il doit être accessible avec les outils les plus divers, un protocole universel, normalisé par le W3C et accessible à tous via le WAI (Web Accessibility Initiative).

  • de décentralisation: Aucune organisation n’est imposé, les hyperliens sont universels et l’absence de registre centralisé (hormis les DNS).

Protocole HTTP

Protocole de communication client-serveur développé pour le World Wide Web. HTTPS (avec S pour secured, soit « sécurisé ») est la variante du HTTP sécurisée par l’usage des protocoles SSL ou TLS.

Principe du fonctionnement du Protocole HTTP

@startuml http scale 2.5 skinparam backgroundcolor transparent skinparam defaultFontName Hack actor Client participant "Serveur HTTP" as A Client -> A: Requête HTTP activate A #IndianRed A -> A: Traitement interne A -> Client: Réponse HTTP deactivate A @enduml

Fonctionnement général du protocole HTTP

wget https://ugaritic.fr/

@startuml http2 scale 2.5 skinparam backgroundcolor transparent skinparam defaultFontName Hack actor Client participant "Serveur HTTP" as A collections "File System" as FS Client -> A: Requête HTTP:\n**GET /** activate A #IndianRed A -> A: Traitement interne\n__/var/www/delahayeyouself.info__ A -> FS: **index.html** ? activate FS #OrangeRed FS -> A: lecture **index.html** deactivate FS A -> Client: Réponse HTTP:\n**Code 200** deactivate A @enduml

Requête sur un site

wget https://ugaritic.fr/helloworld.html

@startuml http3 scale 2.5 skinparam backgroundcolor transparent skinparam defaultFontName Hack actor Client participant "Serveur HTTP" as A collections "File System" as FS Client -> A: Requête HTTP:\n**GET /news.html** activate A #IndianRed A -> A: Traitement interne\n__/var/www/delahayeyouself.info__ A -> FS: **helloworld.html** ? activate FS #OrangeRed FS -> A: lecture **helloworld.html** deactivate FS A -> Client: Réponse HTTP:\n**Code 200** deactivate A @enduml

Requête sur un document précis d’un site

wget https://ugaritic.fr/blabla

@startuml http4 scale 2.5 skinparam backgroundcolor transparent skinparam defaultFontName Hack actor Client participant "Serveur HTTP" as A collections "File System" as FS Client -> A: Requête HTTP:\n**GET /blabla** activate A #IndianRed A -> A: Traitement interne\n__/var/www/delahayeyouself.info__ A -> FS: **blabla** ? activate FS #OrangeRed FS -> A: erreur **file not found** deactivate FS A -> Client: Réponse HTTP:\n**Code 404: NOT FOUND** deactivate A @enduml

Requête sur un document introuvable

Serveur HTTP

Note

Logiciel servant des requêtes respectant le protocole de communication client-serveur HyperText Transfer Protocol (HTTP). On peut citer Nginx ❤️, Apache, IIS, …

Code HTTP

Code HTTP (aussi appelé code d’état) permet de déterminer le résultat d’une requête ou d’indiquer une erreur au client. Ce code numérique est destiné aux traitements automatiques par les logiciels de client HTTP.

  • \(1xx\) Information

  • \(2xx\) Succès

  • \(3xx\) Redirection

  • \(4xx\) Erreur du client web

  • \(5xx\) Erreur du serveur

Pour en savoir plus https://httpstatuses.com/

Site web statique

Est un site web développé uniquement en HTML/CSS, il n’y a pas de langage de programmation mais uniquement de présentation de documents. Aucune interactivité possible avec le visiteur ni dynamisme (pas de lecture en BDD), l’ajout d’une page entraîne la modification de toutes les pages.

Site web dynamique

C’est un programme serveur qui génére les pages HTML pour nous. Plusieurs technologies disponibles:

  1. Serveur HTTP: Apache, Nginx ❤️, IIS, …

  2. Langage: PHP, ASP, Ruby, Python ❤️, Java, …

  3. BDD: MySQL/MariaDB, SQlServer, SQLite ❤️, PostGreSQL, Oracle, DB2 …