Technologies du WebPar Elena CABRIO
Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi
22/01/2020 Technologies du Web - ELENA CABRIO 1
Présentation/
Programme du cours
22/01/2020 Technologies du Web – ELENA CABRIO 2
Présentation du cours
12 séances de cours (2h) en Amphi INFO (8h00- 10h)
12 séances de TP (2h) en salle machine
Lundi 8h-10h ; 10h15-12h15
Mercredi 10h15-12h15
A partir de la semaine prochaine!!
50% de la note : contrôle continu (présence + avancement TP)
50% de la note : contrôle final
Site web de l’UE : https://www-sop.inria.fr/members/Elena.Cabrio/TechnoWeb.html
Contact : [email protected]
22/01/2020 Technologies du Web – ELENA CABRIO 3
Programme du cours
Ce que vous apprendrez (à titre indicatif !)
Qu’est ce que le web ? Comment cela fonctionne-t-il ?
Créer des pages web statiques en HTML
Utiliser CSS (feuilles de style) pour mettre en forme vos pages
Programmation dynamique côté client en Javascript
Programmation dynamique côté serveur en PHP
22/01/2020 Technologies du Web – ELENA CABRIO 4
Avertissement
Technologie(s) évolutive(s)
Standards w3c vs implémentations
Éléments pour savoir le support actuel :
http://caniuse.com/
https://developer.mozilla.org/
Ex: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
22/01/2020 Technologies du Web – ELENA CABRIO 5
Questions:
Avez-vous des notions...
De création de pages web ?
Des notions de réseaux ?
De programmation ?
Posez des questions !
22/01/2020 Technologies du Web – ELENA CABRIO 6
Introduction
22/01/2020 Technologies du Web – ELENA CABRIO 7
Difference entre le Web et Internet?
A votre avis?
22/01/2020 Technologies du Web – ELENA CABRIO 8
Internet
Réseau global mondial, réseau de réseaux
Définition : tout ce qui est basé sur le protocole de bas niveau TCP/IP !
Tout ordinateur a une adresse IP (par exemple, 134.59.130.2)
Souvent, ordinateurs identifiables par un nom de domaine / sous-domaine etc.
Plus facile à retenir pour les humains !
Par exemple, www.unice.fr→134.59.204.9
Traductions entre adresses IP et domaines par DNS (Domain Name System)
22/01/2020 Technologies du Web – ELENA CABRIO 9
Internet
Au-dessus de TCP/IP, de très nombreux protocoles
Protocole HTTP : navigation de pages web dans votre navigateur
Protocoles POP/IMAP/SMTP : envoi et réception d'e-mails
Protocole BitTorrent : échange de fichiers pair à pair
Protocole FTP : échange de fichiers
Protocole IRC : messagerie instantanée
22/01/2020 Technologies du Web – ELENA CABRIO 10
Internet
22/01/2020 Technologies du Web – ELENA CABRIO 11
Le Web
Seulement le protocole HTTP ! (le plus utilisé depuis les années 90)
Ou HTTPS, S comme sécurisé
C’est-à-dire, les pages web que vous consultez dans votre navigateur
Connectées par des liens hypertextes... HTTP = HyperText Transfer Protocol
22/01/2020 Technologies du Web – ELENA CABRIO 12
http://www.google.fr?
Qu’est-ce que ça veut dire ?
Différence entre http:// et www ?
Le Web
URL : Universal Resource Locator / URI : Universal Resource Indicator
Différence entre les deux pas très bien définie
Format dans un cas simple :
protocole://sous-domaine.domaine/chemin/vers/fichier/fichier.html
Exemple : http://www.lemonde.fr/idees/article/2015/09/11/climat-regarder-la-realite-en-
face_4753004_3232.html
Format plus général :
protocole://sous-sous-domaine.sous-domaine.domaine:port/chemin/vers/fichier/fichier#ancre?param=valeur¶m=valeur
Ancre = position dans la page, paramètres = nom d’utilisateur par exemple
Paramètres utiles pour les pages générées dynamiquement, en PHP par exemple
22/01/2020 Technologies du Web – ELENA CABRIO 13
Historique
Technologies du Web – ELENA CABRIO 1422/01/2020
Un peu d’historique: Internet
Dans les années 60, création de réseaux utilisant la commutation de paquets
Le premier d’entre eux créé par Donald Davies au Royaume-Uni (National Physical Laboratory)
Division des données en paquets, avec en-tête pour le routage
Création d’ARPANET en 1977, par le US Department of Defense
«Advanced Research Projects Agency Network»
Premier réseau à utiliser TCP/IP
TCP/IP créé par Robert Kahn et Vint Cerf
Incorporé des idées du réseau français CYCLADES (Louis Pouzin)
Petit à petit, de plus en plus d’universités connectées
Emergence des premiers fournisseurs d’accès à la fin des années 80
Tout ceci avant le web !
Technologies du Web – ELENA CABRIO 1522/01/2020
Un peu d’historique: Internet
Technologies du Web – ELENA CABRIO 1622/01/2020
Un peu d’historique: le Web
Idée principale du web : système hypertexte basé sur internet
Nombreuses pages interconnectées, passage de l’une à l’autre par des liens
En 1945, Vannevar Bush (ingénieur) publie l’article «As we may think»
Dans Atlantic Monthly (pas une revue scientifique)
Il décrit le Memex, un ordinateur analogique, électro-mécanique, avec microfilms
Rélié à une bibliothèque permettant d’afficher des livres et projeter des films
Liens entre paires d’images de microfilms : première idée basique de lien
Technologies du Web – ELENA CABRIO 1722/01/2020
Un peu d’historique: le Web
Technologies du Web – ELENA CABRIO 1822/01/2020
Un peu d’historique: le Web
Stanford, années 60 : Doug Engelbart crée le protoype NLS (oN-Line
System)
Révolutionnaire : utilise liens, mais aussi un écran, une souris, fenêtre,
programmes...
Technologies du Web – ELENA CABRIO 1922/01/2020
Un peu d’historique: le Web
En 1960, à Harvard, Ted Nelson crée le Projet Xanadu, premier
système hypertexte
Inventeur du terme «hypertexte» !
En avance sur son temps, très complexe... Pas un succès mais influent.
Technologies du Web – ELENA CABRIO 2022/01/2020
Un peu d’historique: le Web
Dans l’idée de Ted Nelson : système hypertexte= ensemble de nœuds liés entre eux
par des hyperliens permettant de passer automatiquement de l’un à l’autre.
Nœud = unité minimale d’information, par exemple un paragraphe
Les liens entre parties du texte gérés par ordinateur
Accès à l’information de manière associative
Navigation non-linéaire (pas évident à l’époque !), personnalisée
Les nœuds peuvent aussi être audiovisuels : on parle de système hypermédia
Ted Nelson : « Let me introduce the word 'hypertext' to mean a body of written or
pictorial material interconnected in such a complex way that it could not
conveniently be presented or represented on paper» (Proceedings of the 20th ACM
National Conference, 1965).
Technologies du Web – ELENA CABRIO 2122/01/2020
Un peu d’historique: le Web En 1980, Tim Berners-Lee crée ENQUIRE, une base de données de personnes
et logiciels
Premier logiciel à utiliser les liens hypertexte
Au CERN, en Suisse
Peu après, connexion de machines du CERN au réseau TCP/IP
Tim Berners-Lee écrit «A large hypertext database with typed links»
Acqusition d’une station de travail NeXT par Tim Berners-Lee...
...sur laquelle il a commencé à implémenter le World Wide Web
En 1990, Tim Berners-Lee avait créé tous les outils nécessaires : le protocole
HTTP, le langage HTML, le premier navigateur web, le premier serveur HTTP...
30 avril 1993 : le CERN verse toutes les technologies autour du WWW dans le
domaine public
Technologies du Web – ELENA CABRIO 2222/01/2020
La première image partagée sur le Web
Technologies du Web – ELENA CABRIO 2322/01/2020
Un de tous premiers navigateurs: NCSA Mosaic
Technologies du Web – ELENA CABRIO 2422/01/2020
Le Web: protocole HTTP
Technologies du Web – ELENA CABRIO 2522/01/2020
Protocole HTTP
HTTP = HyperText Transfer Protocol
Fonctionne au-dessus des protocoles TCP et IP
Permet aux serveurs Web de transmettre des pages (ou images, etc.) aux
clients
Serveur : hôte qui contient des pages web
Client : navigateur (Google Chrome, Mozilla Firefox, Safari, Internet Explorer...)
Un serveur HTTP = un serveur HTTP (par exemple Apache) qui tourne sur une
machine hôte
(appellée aussi serveur !)
Un client HTTP = un navigateur qui tourne sur la machine de l’utilisateur
Une page web est un document, écrit en HTML (HyperText Markup Language)
Technologies du Web – ELENA CABRIO 2622/01/2020
Protocole HTTP On a vu tout à l’heure ce qu’était une URL. Rappel, par exemple :
protocole://sous-sous-domaine.sous-
domaine.domaine:port/chemin/vers/fichier/fichier#ancre?param=valeur¶m=valeur
Ancre = position dans la page, paramètres = nom d’utilisateur par exemple
Paramètres utiles pour les pages générées dynamiquement, en PHP par exemple
Après le nom de domaine/port, chaque élément entre les slashes est une séquence de
caractères alphanumériques, plus les deux caractères «–» et «_».
Les espaces sont remplacés par «+» ou «%20»
Séquences d’échappement pour les caractères spéciaux : %xx où xx est le code hexadécimal du
caractère en ASCII. Par exemple, %20 = espace, %7E = «~», %2B = «+», %25 = «%»...
Attention ! Masqué par les navigateurs récents
Technologies du Web – ELENA CABRIO 2722/01/2020
Protocole HTTP
Plus de séquences d’échappement dans les URLs:
Technologies du Web – ELENA CABRIO 2822/01/2020
Protocole HTTP
HTTP est le protocole le plus utilisé depuis 1990
Version 0.9 : version très basique, seulement une commande GET pour récupérer un document, sans recevoir aucune information sur son type.
Version 1.0, en 1996 : permet de transférer des messages avec des en-têtes décrivant le contenu du message en utilisant un codage de type MIME («Multipurpose Internet Mail Extensions»). [RFC 1945]
Version 1.1, en 1997 : quelques améliorations, dont une meilleure gestion du cache
Version 2 , en 2015: améliorations de performances (gains de vitesse de transmission)
Version 3, toute récente.
Technologies du Web – ELENA CABRIO 2922/01/2020
Protocole HTTP
Transfert de fichiers identifiés grâce à une URL entre un navigateur (le
client) et un serveur web (Apache) :
Le navigateur effectue une requête HTTP
Le serveur traite la requête puis envoie une réponse HTTP
Les commandes HTTP:
Technologies du Web – ELENA CABRIO 3022/01/2020
Protocole HTTP
Format d’une réponse HTTP
Un exemple:
Technologies du Web – ELENA CABRIO 3122/01/2020
Protocole HTTP
Codes réponse HTTP :
Technologies du Web – ELENA CABRIO 3222/01/2020
En résumé…
Technologies du Web – ELENA CABRIO22/01/2020
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
22/01/2020 Technologies du Web – ELENA CABRIO
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
2. Tape l’adresse, valide
22/01/2020 Technologies du Web – ELENA CABRIO
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
2. Tape l’adresse, valide
3. Le navigateur fait une requête
22/01/2020 Technologies du Web – ELENA CABRIO
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
2. Tape l’adresse, valide
3. Le navigateur fait une requête
4. Le navigateur attend la réponse
3.a : le navigateur, via
l’ordinateur, demande
un document
22/01/2020 Technologies du Web – ELENA CABRIO
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
2. Tape l’adresse, valide
3. Le navigateur fait une requête
4. Le navigateur attend la réponse
3.a : le navigateur, via
l’ordinateur, demande
un document
Internet : - 3.b identification de la
localisation de la page
(DNS)
22/01/2020 Technologies du Web – ELENA CABRIO
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
2. Tape l’adresse, valide
3. Le navigateur fait une requête
4. Le navigateur attend la réponse
3.a : le navigateur, via
l’ordinateur, demande
un document
Internet : - 3.b identification de la
localisation de la page
(DNS)
3.c Internet
« aiguille » la
machine jusqu’à
la l’endroit
identifié (= un
ordinateur)
22/01/2020 Technologies du Web – ELENA CABRIO
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
2. Tape l’adresse, valide
3. Le navigateur fait une requête
4. Le navigateur attend la réponse
3.a : le navigateur, via
l’ordinateur, demande
un document
Internet : - 3.b identification de la
localisation de la page
(DNS)
3.c Internet
« aiguille » la
machine jusqu’à
la l’endroit
identifié (= un
ordinateur)
3.d - Réception de la demande par le serveur
3.e - Identification du document à partir de l’URL
(éventuellement création du contenu)
22/01/2020 Technologies du Web – ELENA CABRIO
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
2. Tape l’adresse, valide
3. Le navigateur fait une requête
4. Le navigateur attend la réponse
3.a : le navigateur, via
l’ordinateur, demande
un document
Internet : - 3.b identification de la
localisation de la page
(DNS)
- …
- 3.f Internet aiguille la
réponse vers l’ordinateur
demandeur
3.c Internet
« aiguille » la
machine jusqu’à
la l’endroit
identifié (= un
ordinateur)
3.d - Réception de la demande par le serveur
3.e - Identification du document à partir de l’URL
(éventuellement création du contenu)
3.f - Renvois de la réponse (document ou erreur)
22/01/2020 Technologies du Web – ELENA CABRIO
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
2. Tape l’adresse, valide
3. Le navigateur fait une requête
4. Le navigateur attend la réponse
5. Affiche la « page »
3.a : le navigateur, via
l’ordinateur, demande
un document
Internet : - 3.b identification de la
localisation de la page
(DNS)
- …
- 3.f Internet aiguille la
réponse vers l’ordinateur
demandeur
3.c Internet
« aiguille » la
machine jusqu’à
la l’endroit
identifié (= un
ordinateur)
3.d - Réception de la demande par le serveur
3.e - Identification du document à partir de l’URL
(éventuellement création du contenu)
3.f - Renvois de la réponse (document ou erreur)
22/01/2020 Technologies du Web – ELENA CABRIO
En résumé…1. L’utilisatrice veut voir la page http://www-
sop.inria.fr/members/Elena.Cabrio
2. Tape l’adresse, valide
3. Le navigateur fait une requête
4. Le navigateur attend la réponse
5. Affiche la « page »
6. L’utilisatrice lit la page
3.a : le navigateur, via
l’ordinateur, demande
un document
Internet : - 3.b identification de la
localisation de la page
(DNS)
- …
- 3.f Internet aiguille la
réponse vers l’ordinateur
demandeur
3.c Internet
« aiguille » la
machine jusqu’à
la l’endroit
identifié (= un
ordinateur)
3.d - Réception de la demande par le serveur
3.e - Identification du document à partir de l’URL
(éventuellement création du contenu)
3.f - Renvois de la réponse (document ou erreur)
22/01/2020 Technologies du Web – ELENA CABRIO
Le langage HTML
Technologies du Web – ELENA CABRIO 4422/01/2020
Le langage HTML: présentation
Les pages web sont écrites en HTML (.htm ou .html) : HyperText Markup Language
Ce qu’est HTML :
Un langage descriptif : contenu de la page, description des paragraphes, images, liens, tableaux...
Pas de compilation : le navigateur reçoit le HTML, l’interprête, et produit la page telle qu’affichée au client.
Toujours possible pour le client de consulter le code HTML !
Ce qu’HTML n’est pas :
Un langage de programmation :
Pas de structures conditionnelles («if... then ... else»)
Pas de boucles (for, while, ...)
Pour programmer, il faudra utiliser un langage de programmation côté client (javascript,...) ou côté serveur
(PHP, perl...)
Technologies du Web – ELENA CABRIO 4522/01/2020
Technologies du Web – ELENA CABRIO 4622/01/2020
Les langages de balisages
Des langages spécialisés dans l’enrichissement (markup) d’information
textuelle
Balise = unité syntaxique délimitant une séquence de caractères à l’intérieur
d’un flux de caractères (par exemple un fichier texte). Hiérarchique : des
balises dans des balises...
L’inclusion de balises permet de spécifier, à la fois :
La structure (logique, graphique...) du document
Son contenu
Les balises sont faciles à analyser par un programme (navigateur par exemple),
ce qui permet un traitement automatisé de son contenu
Historiquement, les langages à base de balise servent surtout à structurer ou
formater des documents
Technologies du Web – ELENA CABRIO 4722/01/2020
SGML → HTML →XML
Historiquement, HTML est une application dérivée de SGML
SGML = Standard Generalized Markup Language
Inventé par Charles Goldfarb pour rationaliser le système documentaire d’IBM, devient un standard ISO en 1986
XML : une extension de SGML pour structurer des données hiérarchiquement
Pas seulement pour la mise en page
Utilisé par exemple dans les flux RSS
XHTML est une variante de HTML qui est aussi du XML
HTML5 (2014): spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5
comprend également une couche application avec de nombreuses API
Nouveaux éléments, nouveaux attributs
Technologies du Web – ELENA CABRIO 4822/01/2020
Les balises
Une balise est définie par un identifiant/étiquette, par exemple h1
En-tête (titre) de plus haut niveau (h = header, 1 = premier niveau)
Balise d’ouverture : <h1>
Balise de fermeture : </h1>
Un couple de balises (d’ouverture et de fermeture) délimite un bloc de texte
Balises vides : <br/> (br= line break, retour à la ligne) juste <br> possible si pas
XHTML
Les balises sont imbriquées hiérarchiquement :
Technologies du Web – ELENA CABRIO 4922/01/2020
Interprétation de HTML
Éléments reconnus lors de l’interprétation par le navigateur :
<NOM_DE_BALISE> ... </BALISE>
<BALISE /> ou juste <BALISE> si pas XHTML
Texte (espaces, tabulations, retours à la ligne consécutifs considérés comme un seul espace)
Certains caractères non autorisés (lettres accentuées en ASCII...), peut dépendre de l’encodage
Façon la plus sûre: utiliser des codes, évite problèmes d’encodage (ex: «J'aime l'√©at√©a» au lieu de «J'aime l'été»)
Format : &code;
Liste complète :
http://dev.w3.org/html5/html-author/charref
Technologies du Web – ELENA CABRIO 5022/01/2020
Exemple de structuration
20/09/2017 Technologies du Web – ELENA CABRIO 51
HTML: standardisation
HTML n’appartient pas à une seule entreprise : plusieurs navigateurs !
Doit être standardisé, pour que chacun sache précisément comment interpréter le
langage
Si approximatif, pages web affichées différemment d’un navigateur à l’autre !
C’était le cas il y a longtemps, de moins en moins le cas, standards de mieux en mieux implémentés
Standardisé par le World Wide Web Consortium, ou W3C
Créé par Tim Berners-Lee
Standardise de nombreuses techonologies web (HTML, XHTML, XML, CSS, PNG, SVG, SOAP, RDF...)
http://www.w3.org/
Technologies du Web – ELENA CABRIO 5222/01/2020
Document HTML minimal
En 1997, HTML 4.01, resté très courant pendant très longtemps
En 2000, XHTML 1.0, très similaire mais peut-être analysé par des
parseurs XML
Depuis 2014 : HTML 5.0 ! Nous utiliserons cette version
(http://www.w3.org/TR/html5/)
Document HTML 5.0 minimal :
20/09/2017 Technologies du Web – ELENA CABRIO 53
Les balises: plus en détail
Les balises conteneurs contiennent :
Du texte
D’autres balises... parmi celles autorisées !
Par exemple, balises «bloc» (<div>, <h1>, <p>, <form>, souvent les éléments qui commencent sur une
nouvelle ligne) et «en ligne» (<span>, <strong>, <img>, se suivent comme du texte)
Une balise bloc peut contenir d’autres balises bloc, des éléments en ligne, du texte
Un élément en ligne ne peut pas contenir de balise bloc
Balises peuvent contenir seulement certain types de contenu, on verra ces types plus loin
Utilisées pour présenter ou structurer le document
Les balises vides : sont destinées à insérer un élément hors du texte dans le document :
séparateur (<hr/>), saut de ligne, saut de paragraphe...
Commentaires : ignorés par l’interpréteur : <!--Commentaire -->Technologies du Web – ELENA CABRIO 5422/01/2020
Les balises: plus en détail
Les balises peuvent prendre des attributs
Précise la nature ou le fonctionnement de la balise
Certains attributs sont obligatoires
Propres à chaque balise : voir par exemple https://www.w3.org/TR/html5/
Exemple : <img src="images/logo.png"/>
Autre exemple : <a href="http://www.unice.fr">Le site de l’université</a>
Conseil : valeur entre guillemets
Pour attributs «boolean», i.e., juste la présence, utiliser par exemple
reversed=”reversed”
Juste reversed possible en HTML 5 (mais pas en XHTML, pas recommandé XML
invalide)
Technologies du Web – ELENA CABRIO 5522/01/2020