Introduction au Web - Sophia - Inria · Introduction au Web Architecture du Web, HTML Par Elena...

Introduction au WebArchitecture 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

Présentation/

Programme de l’UE


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 : https://www-sop.inria.fr/members/Elena.Cabrio/introweb.html

Contact : [email protected]


https://www-sop.inria.fr/members/Elena.Cabrio/introweb.html

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


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


http://caniuse.com/

https://developer.mozilla.org/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

Questions:

Avez-vous des notions...

De création de pages web ?

Des notions de réseaux ?

De programmation ?

Posez des questions !


Introduction


Difference entre le Web et Internet?

A votre avis?


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)


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


Internet


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


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&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


http://www.lemonde.fr/idees/article/2015/09/11/climat-regarder-la-realite-en-face_4753004_3232.html

Historique


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 !


Un peu d’historique: Internet


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



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...



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.



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).


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


La première image partagée sur le Web


Un de tous premiers navigateurs: NCSA Mosaic


Le Web: protocole HTTP


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)


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&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


Protocole HTTP

Plus de séquences d’échappement dans les URLs:


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


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:


Protocole HTTP

Format d’une réponse HTTP

Un exemple:


Protocole HTTP

Codes réponse HTTP :


Elena Cabrio - Intro (à Php) - Prog Web Server, 2016-2017 06 / 25

En résumé…


En résumé…1. L’utilisatrice veut voir la page http://www-

sop.inria.fr/members/Elena.Cabrio

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










un document

Internet : - 3.b identification de la

localisation de la page

(DNS)










un document



(DNS)

3.c Internet

« aiguille » la

machine jusqu’à

la l’endroit

identifié (= un

ordinateur)










un document



(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)










un document



(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.f - Renvois de la réponse (document ou erreur)








5. Affiche la « page »



un document



(DNS)

- …



demandeur

3.c Internet

« aiguille » la

machine jusqu’à

la l’endroit

identifié (= un

ordinateur)












5. Affiche la « page »

6. L’utilisatrice lit la page



un document



(DNS)

- …



demandeur

3.c Internet

« aiguille » la

machine jusqu’à

la l’endroit

identifié (= un

ordinateur)






Le langage HTML


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...)


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


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


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 :


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


http://dev.w3.org/html5/html-author/charref

Exemple de structuration


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/


http://www.w3.org/

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 :


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

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)


Introduction au Web - Sophia - Inria · Introduction au Web Architecture du Web, HTML Par Elena...

Documents

Transcript of Introduction au Web - Sophia - Inria · Introduction au Web Architecture du Web, HTML Par Elena...