Introduction au Web Architecture du Web, HTML

Transcription

1 Introduction au Web Architecture du Web, HTML Par Elena CABRIO Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 1

2 Présentation/ Programme de l UE 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 2

3 Présentation de l UE 12 séances de cours (1h30) en salle M03 (8h15-9h45) 10 séances de TP (1h30) en salle machine PV 315 (10h-11h30) 50% de la note : contrôle continu (présence + certains TPs notés aléatoirement) 50% de la note : contrôle final Site web de l UE : Contact : elena.cabrio@unice.fr 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 3

4 Programme de l UE 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 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 4

5 Avertissement Technologie(s) évolutive(s) Standards w3c vs implémentations Éléments pour savoir le support actuel : Ex: 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 5

6 Questions: Avez-vous des notions... De création de pages web? Des notions de réseaux? De programmation? Posez des questions! 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 6

7 Introduction 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 7

8 Difference entre le Web et Internet? A votre avis? 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 8

9 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, ) Souvent, ordinateurs identifiables par un nom de domaine / sous-domaine etc. Plus facile à retenir pour les humains! Par exemple, Traductions entre adresses IP et domaines par DNS (Domain Name System) 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 9

10 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' s Protocole BitTorrent : échange de fichiers pair à pair Protocole FTP : échange de fichiers Protocole IRC : messagerie instantanée 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 10

11 Internet 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 11

12 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 Qu est-ce que ça veut dire? Différence entre et www? 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 12

13 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 : Format plus général : protocole://sous-sous-domaine.sous-domaine.domaine:port/chemin/vers/fichier/fichier#ancre?param=valeur&param=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 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 13

14 Historique 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 14

15 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! 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 15

16 Un peu d historique: Internet 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 16

17 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 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 17

18 Un peu d historique: le Web 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 18

19 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... 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 19

20 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. 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 20

21 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). 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 21

22 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 avril 1993 : le CERN verse toutes les technologies autour du WWW dans le domaine public 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 22

23 La première image partagée sur le Web 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 23

24 Un de tous premiers navigateurs: NCSA Mosaic 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 24

25 Le Web: protocole HTTP 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 25

26 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) 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 26

27 Protocole HTTP On a vu tout à l heure ce qu était une URL. Rappel, par exemple : protocole://sous-sous-domaine.sousdomaine.domaine:port/chemin/vers/fichier/fichier#ancre?param=valeur&param=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 slashesest 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 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 27

28 Protocole HTTP Plus de séquences d échappement dans les URLs: 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 28

29 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 : toute récente (2015), peu utilisée 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 29

30 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: 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 30

31 Protocole HTTP Format d une réponse HTTP Un exemple: 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 31

32 Protocole HTTP Codes réponse HTTP : 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 32

33 En résumé Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

34 En résumé 1. L utilisatrice veut voir la page Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

35 En résumé 1. L utilisatrice veut voir la page 2. Tape l adresse, valide Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

36 En résumé 1. L utilisatrice veut voir la page 2. Tape l adresse, valide 3. Le navigateur fait une requête Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

37 En résumé 1. L utilisatrice veut voir la page 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 Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

38 En résumé 1. L utilisatrice veut voir la page 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) Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

39 En résumé 1. L utilisatrice veut voir la page 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 3.c Internet «aiguille» la machine jusqu à la l endroit identifié (= un ordinateur) Internet : - 3.b identification de la localisation de la page (DNS) Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

40 En résumé 1. L utilisatrice veut voir la page 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 3.c Internet «aiguille» la machine jusqu à la l endroit identifié (= un ordinateur) Internet : - 3.b identification de la localisation de la page (DNS) 3.d - Réception de la demande par le serveur 3.e - Identification du document à partir de l URL (éventuellement création du contenu) Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

41 En résumé 1. L utilisatrice veut voir la page 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 3.c Internet «aiguille» la machine jusqu à la l endroit identifié (= un ordinateur) Internet : - 3.b identification de la localisation de la page (DNS) f Internet aiguille la réponse vers l ordinateur demandeur 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) Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

42 En résumé 1. L utilisatrice veut voir la page 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 3.c Internet «aiguille» la machine jusqu à la l endroit identifié (= un ordinateur) Internet : - 3.b identification de la localisation de la page (DNS) f Internet aiguille la réponse vers l ordinateur demandeur 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) Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

43 En résumé 1. L utilisatrice veut voir la page 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 3.c Internet «aiguille» la machine jusqu à la l endroit identifié (= un ordinateur) Internet : - 3.b identification de la localisation de la page (DNS) f Internet aiguille la réponse vers l ordinateur demandeur 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) Elena Cabrio - Intro (à Php) - Prog Web Server, / 25

44 Le langage HTML 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 44

45 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, flash...) ou côté serveur (PHP, perl...) 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 45

46 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 46

47 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 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 47

48 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 Très à la mode depuis quelques années Utilisé par exemple dans les flux RSS XHTML est une variante de HTML qui est aussi du XML Plus facile à traiter automatiquement 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 48

49 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 : 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 49

50 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 : 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 50

51 Exemple de structuration 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 51

52 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...) 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 52

53 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 ( Document HTML 5.0 minimal : 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 53

54 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 --> 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 54

55 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 Exemple : <img src="images/logo.png"/> Autre exemple : <a href=" 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) 20/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 55