![Page 1: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/1.jpg)
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
![Page 2: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/2.jpg)
Présentation/
Programme du cours
22/01/2020 Technologies du Web – ELENA CABRIO 2
![Page 3: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/3.jpg)
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
![Page 4: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/4.jpg)
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
![Page 5: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/5.jpg)
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
![Page 6: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/6.jpg)
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
![Page 7: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/7.jpg)
Introduction
22/01/2020 Technologies du Web – ELENA CABRIO 7
![Page 8: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/8.jpg)
Difference entre le Web et Internet?
A votre avis?
22/01/2020 Technologies du Web – ELENA CABRIO 8
![Page 9: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/9.jpg)
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
![Page 10: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/10.jpg)
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
![Page 11: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/11.jpg)
Internet
22/01/2020 Technologies du Web – ELENA CABRIO 11
![Page 12: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/12.jpg)
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 ?
![Page 13: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/13.jpg)
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
![Page 14: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/14.jpg)
Historique
Technologies du Web – ELENA CABRIO 1422/01/2020
![Page 15: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/15.jpg)
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
![Page 16: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/16.jpg)
Un peu d’historique: Internet
Technologies du Web – ELENA CABRIO 1622/01/2020
![Page 17: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/17.jpg)
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
![Page 18: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/18.jpg)
Un peu d’historique: le Web
Technologies du Web – ELENA CABRIO 1822/01/2020
![Page 19: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/19.jpg)
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
![Page 20: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/20.jpg)
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
![Page 21: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/21.jpg)
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
![Page 22: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/22.jpg)
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
![Page 23: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/23.jpg)
La première image partagée sur le Web
Technologies du Web – ELENA CABRIO 2322/01/2020
![Page 24: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/24.jpg)
Un de tous premiers navigateurs: NCSA Mosaic
Technologies du Web – ELENA CABRIO 2422/01/2020
![Page 25: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/25.jpg)
Le Web: protocole HTTP
Technologies du Web – ELENA CABRIO 2522/01/2020
![Page 26: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/26.jpg)
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
![Page 27: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/27.jpg)
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
![Page 28: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/28.jpg)
Protocole HTTP
Plus de séquences d’échappement dans les URLs:
Technologies du Web – ELENA CABRIO 2822/01/2020
![Page 29: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/29.jpg)
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
![Page 30: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/30.jpg)
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
![Page 31: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/31.jpg)
Protocole HTTP
Format d’une réponse HTTP
Un exemple:
Technologies du Web – ELENA CABRIO 3122/01/2020
![Page 32: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/32.jpg)
Protocole HTTP
Codes réponse HTTP :
Technologies du Web – ELENA CABRIO 3222/01/2020
![Page 33: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/33.jpg)
En résumé…
Technologies du Web – ELENA CABRIO22/01/2020
![Page 34: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/34.jpg)
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
![Page 35: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/35.jpg)
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
![Page 36: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/36.jpg)
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
![Page 37: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/37.jpg)
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
![Page 38: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/38.jpg)
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
![Page 39: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/39.jpg)
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
![Page 40: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/40.jpg)
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
![Page 41: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/41.jpg)
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
![Page 42: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/42.jpg)
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
![Page 43: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/43.jpg)
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
![Page 44: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/44.jpg)
Le langage HTML
Technologies du Web – ELENA CABRIO 4422/01/2020
![Page 45: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/45.jpg)
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
![Page 46: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/46.jpg)
Technologies du Web – ELENA CABRIO 4622/01/2020
![Page 47: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/47.jpg)
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
![Page 48: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/48.jpg)
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
![Page 49: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/49.jpg)
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
![Page 50: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/50.jpg)
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
![Page 51: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/51.jpg)
Exemple de structuration
20/09/2017 Technologies du Web – ELENA CABRIO 51
![Page 52: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/52.jpg)
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
![Page 53: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/53.jpg)
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
![Page 54: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/54.jpg)
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
![Page 55: Technologies du Web · 2020-01-21 · Technologies du Web Par Elena CABRIO [elena.cabrio@univ-cotedazur.fr] Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi](https://reader034.vdocuments.fr/reader034/viewer/2022052519/5f0ff3dc7e708231d446b4a2/html5/thumbnails/55.jpg)
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