docLe World Wide Web
download 
Plainte Transcription
Le World Wide Web
Le World Wide Web
Introduction
Daniel Hagimont
Laurent Broto
IRIT/ENSEEIHT
13 mars 2011
1 / 34
Copyright (c) 2010 Daniel Hagimont & Laurent Broto.
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.2
or any later version published by the Free Software Foundation ;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover
Texts. A copy of the license is included in the section entitled ”GNU
Free Documentation License”.
2 / 34
Historique
• Système d’information hypermédia
• Né en 1989, par Tim Berners-Lee au CERN
• Concept de base universelle d’information
• Accès aux bases d’information
• Accessibles à tous et partout
• Liens entre les informations
• Informations sous différents formats (multimédia)
3 / 34
Principe
• Système client-serveur
• Trois aspects
◦ Désignation et localisation des documents (URI/URN/URL)
◦ Codage des documents (HTML, types MIME)
◦ Protocole de requête et transfert de documents (HTTP)
4 / 34
Langage HTML
• HTML : Hyper Text Markup Language
◦ Langage de description d’information structurée portable
◦ Organisme de standardisation : WWW consortium
◦ HTML 4.01 : http://www.w3.org/TR/html401/
• <balise attributs> contenu </balise>
◦ balise (tag), ex : <html>
◦ attributs : représente des options, ex : <table width=”60%”>
◦ contenu : texte, images ou d’autres balises
◦ </balise> : fin de la balise
5 / 34
Syntaxe (exemple)
<HR>
<IMG SRC=” monimage . g i f ” WIDTH=100 HEIGHT=120>
<H1>C e c i e s t un t i t r e</H1>
<h2>C e c i e s t un s o u s − t i t r e</ h2>
<A HREF=” h t t p : / / h o s t / d i r / f i l e . h t m l ”> l i e n</A>
<!−− Commentaire −−>
6 / 34
Syntaxe XHTML
• XHTML est une transposition en syntaxe XML de HTML
◦ http://www.w3.org/TR/2002/REC-xhtml1-20020801/
◦ syntaxe plus rigoureuse, notamment :
• toute balise ouvrante doit être fermée (<img alt=”...”/>)
• noms des balises et des attributs en minuscules
• elements HTML correctement imbriqués
• recommandé !
7 / 34
Principales balises
• <a> lien hypertexte attribut : <href> ou <name>
• <em> met en emphase une portion de texte
• <img> inclut une image dans le document, attributs : <alt>
(texte alternatif) et <src> (chemin vers l’image)
• <div> conteneur generique de type bloc
• <p> paragraphe de texte
• <table> ecriture d’un tableau voir aussi <tr>, <td>, <th>
• <h1>, <h2>, . . . <h6> niveaux de titres
• <ol>, <ul> listes ordonnees ou a puces simples, chaque element
(item) sera ecrit <li>
• <form> formulaire interactif
8 / 34
Structure d’un document
<!DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN”
” h t t p : / / www . w3 . o r g /TR/ x h t m l 1 /DTD/ xhtml1−s t r i c t . d t d ”>
<html >
<head >
<!−− d e f i n i t i o n de l ’ URL de r e f e r e n c e du document −−>
<b a s e h r e f=” h t t p : / / m o n s e r v e u r . mondomaine / d i r /HTML. h t m l ” />
<!−− c o n t i e n t d e s meta−i n f o r m a t i o n s −−>
<meta h t t p−e q u i v=” C o n t e n t−Type ” c o n t e n t=” t e x t / h t m l ; c h a r s e t=u t f −8” />
<meta name=” a u t h o r ” c o n t e n t=” a u t e u r ” />
<!−− d&e a c u t e ; f i n i t l e t i t r e du document : t i t r e de l a f e n e t r e />
< t i t l e>Exemple de document</ t i t l e>
</ head>
<body>
<h1>Un t i t r e</ h1>
<d i v>Un b l o c .
<p>Un p a r a g r a p h e .</p>
<p>Un d e u x i&e g r a v e ; me p a r a g r a p h e .</p>
</ d i v >
</ body >
</ html >
HTML : langage de description de contenu, pas de sa présentation
9 / 34
Mise en page
• CSS : Cascading Style Sheet
◦ Feuilles de style
◦ Correctement pris en charge depuis 2000
◦ http://www.w3.org/TR/CSS2
• Documentations
◦ Valider son code HTML
• http://validator.w3.org/
◦ Valider son code CSS
• http://jigsaw.w3.org/css-validator/
◦ Tutoriels HTML – CSS
• http://www.alsacreations.com/tutoriels/
10 / 34
Syntaxe
•
/* les titres de types h1 seront en bleu et centres */
h1 {
color: blue ;
text-align: center;
}
/* on peut appliquer des proprietes a des classes d’objet :
ici seuls les paragraphes de classe ’note ’ auront cette
propriete */
p.note {
font-family: Arial, sans-serif;
font-style: italic;
}
/* les balises html peuvent aussi etre dotees d’un attribut
id qui doit alors etre unique dans la page */
p#menu {
font-weight: bold;
}
/* ou encore */
#menu {
font-weight: bold;
}
/* agir sur les ancres du paragraphe " menu " */
#menu a {
text-decoration: none; /* default : underline */
}
11 / 34
Dans l’entête du document
<head >
...
<s t y l e t y p e=” t e x t / c s s ”>
h1 { c o l o r : b l u e ; }
</ s t y l e>
...
</ head>
•
Dans les balises
<h1 s t y l e=” c o l o r :
b l u e ; ”>
T i t r e de l a page</ h1>
•
Référence à une feuille externe
<head>
...
<l i n k r e l=” s t y l e s h e e t ”
t y p e=” t e x t / c s s ”
h r e f=” s t y l e s . c s s ” />
...
</ head>
Le protocole HTTP
• HTTP : HyperText Transfer Protocol
◦ Modèle client-serveur pour le transfert des documents hypertextes
◦ Protocole utilisé par les serveurs Web depuis 1990
◦ Protocole minimaliste basé sur TCP/IP et utilisant des messages sous
forme de chaı̂nes de caractères
• URL : Uniform ressource Locator
◦ method://machine[:port]/fichier[#ancre|?param]
• method:file/ftp/http/telnet/news/mailto
• Transaction HTTP one-shot
12 / 34
Requête HTTP
Méthode
Destination
Descriptif
Fin En-tête
Corps
Method URL HTTP ver
Host :
If-Modified-Since :
Referer
User-Agent :
Accept :
Content-Encoding :
Content-Length :
Content-Type :
...
CRLF
...
GET, HEAD, POST, . . .
adresse électronique du client
accès à la ressource si modification depuis
URL du lien ayant émis la requête
information sur le client
types MIME supportés par le client
type de codage du corps de la requête
taille du corps de la requête
type MIME du corps de la requête
ligne blanche
surtout POST et PUT
GET /chemin/vers/fichier.html HTTP/1.0
Host: enseeiht.fr:80
If-Modified-Since: Monday, 19-Jan-96 14:30:36 GMT
User-Agent: Mozilla/2.0b6a (X11; I; OSF1 V3.2 alpha)
13 / 34
Les méthodes HTTP
GET
HEAD
POST
OPTIONS,
CONNECT, TRACE
PUT
DELETE
14 / 34
Pour
Pour
Pour
Pour
récupérer une ressource
obtenir des informations sur une ressource
récupérer une ressource
interroger le serveur sur son état
Pour ajouter ou remplacer une ressource
Pour supprimer une ressource
Réponse HTTP
Status
En-tête
Descriptif
Fin En-tête
Document
HTTP-Version
Location :
Server :
Content-Encoding :
Content-Length :
Content-Type :
Date
Expires
Last-Modified :
...
CRLF
...
Status-Code Reason-Phrase
URL exacte de la ressource demandée
informations sur le serveur
type de codage du corps de la requête
taille du corps de la requête
type MIME du corps de la requête
date de la génération de la réponse
date d’expiration du document
dernière modification du document
ligne blanche
contenu du document demandé
HTTP/1.1 200 OK
Date: Fri, 09 Jan 1998 09:49:11 GMT
Server: Apache/1.3b2
Last-Modified: Tue, 19 Aug 1997 11:57:17 GMT
Content-Length: 118+
Content-Type: text/html
<html>
...
15 / 34
Code de retour
• Classe 1 : information (pas utilisé)
• Classe 2 : succès
◦ 200 (OK), 201 (created), 204 (no content), . . .
• Classe 3 : redirection
◦ 301 (moved permanently), 304 (not modified), . . .
• Classe 4 : erreur client
◦ 400 (bad request), 401 (Unauthorized), 404 (not found), . . .
• Classe 5 : erreur serveur
◦ 500 (internal serveur error), 501 (not implemented), 503 (service
unavailable), . . .
16 / 34
Cookies HTTP
• Limitations d’HTTP
◦ Protocole sans mémoire
◦ Pas d’identification simple du client
• Cookies
◦ Mécanisme de stockage d’informations chez le client (pris en compte
par le serveur à chaque accès)
◦ Exemples d’utilisation :
• sauvegarde d’option
• validité d’accès à un serveur payant
• ...
17 / 34
Cookies : création par le serveur
• Dans l’en-tête HTTP
◦ Set-Cookie : Nom=Valeur ; expires=Date ; path=Chemin ;
domain=NomDomaine ; secure
Nom
expires
domain
path
secure
18 / 34
associe une valeur a une variable spécifique
(obligatoire)
date d’échéance du cookie
identification du cookie par rapport au serveur accédé (defaut : serveur HTTP)
association à un ensemble de ressources
(fichiers)
utilisation d’une connexion sécurisée
(HTTPS)
Cookies : gestion par le client
• A
◦
• A
◦
réception d’une réponse
Mémorise les cookies qu’il reçoit
émission d’une requête
Recherche parmi les cookies mémorisés ceux s’appliquant au couple
serveur/URL
◦ Ajoute dans la requête une ligne par paire nom/valeur
• A
◦
◦
◦
noter
Plusieurs directives Set-cookie insérables par le serveur
Nombre et taille des cookies limités
Effacement d’un cookie possible en précisant pour expires une date
périmée
◦ Un cookie sans date expire à la mort du navigateur
19 / 34
Exemple
• Requête - Client
GET /chemin/vers/fichier.html HTTP/1.0
• Réponse - Serveur
HTTP/1.1 200 OK
Date: Tue, 07 Aug 2001 21:36:13 GMT
Server: Apache-AdvancedExtranetServer/1.3.19
Set-Cookie: id=0xa11111; expires=Friday,
10-March-09 00:00:00 GMT; path=/
Content-Type: text/html
<HTML>
...
• Nouvelle requête - Client
GET /chemin/vers/fichier.html HTTP/1.0
Cookie: id=0xa11111;
20 / 34
Formulaires et CGI
• Limitations
◦ Requête limitée à la demande de ressources statiques
◦ Besoin d’exécuter une application sur le serveur HTTP
◦ Besoin de fournir des données
• Solution
◦ Formulaires HTML pour la saisie
◦ Scripts CGI pour l’exécution
21 / 34
Formulaires HTML
Ecriture d’un formulaire
<form a c t i o n=” u r l ” method=” methode ”>
...
</ form>
• url : identifie le programme utilisé pour traiter le formulaire
• methode : méthode à utiliser pour transmettre l’information au
serveur
◦ GET : données ajoutées à l’URL
◦ POST : données envoyées dans le corps du message
22 / 34
Eléments de formulaires
• Eléments INPUT
<i n p u t t y p e=” t y p e ” name=”nom” s i z e=” s i z e ”
m a x l e n g t h=”max” c h e c k e d=” c h e c k e d ” v a l u e=” v a l ” />
• Différents types possibles
TEXT
Champ de saisie de texte
PASSWORD
Champ de saisie de texte caché
SUBMIT
Bouton de soumission du formulaire
CHECKBOX
Bouton à cocher
RADIO
Bouton à cocher de type radio
HIDDEN
Champ invisible
• On envoie dans la requête nom=val
23 / 34
Eléments de formulaires
• Eléments SELECT
< s e l e c t name=”nom” s i z e=” ” m u l t i p l e=” ”>
<o p t i o n>p r e m i e r e o p t i o n</ o p t i o n>
<o p t i o n s e l e c t e d=” s e l e c t e d ”>
Deuxieme o p t i o n</ o p t i o n>
...
</ s e l e c t>
• Elément TEXTAREA
<t e x t a r e a name=”nom” rows=” n b L i g n e s ”
c o l s=” n b C o l o n n e s ”>
t e x t e par defaut
</ t e x t a r e a>
24 / 34
Exemple
<html>
<head>< t i t l e>MaBanque</ t i t l e></ head>
<body>
<form method=” p o s t ” a c t i o n=” / s e r v l e t / BanqueAccount ”>
<p>numero de compte<i n p u t t y p e=” t e x t ” name= ”num”>
</p>
<p>montant<i n p u t t y p e=” t e x t ” name= ” v a l ”></p>
<p><i n p u t t y p e=” s u b m i t ” name=” o p e r a t i o n ”
v a l u e=” s o l d e ”>
<i n p u t t y p e=” s u b m i t ” name=” o p e r a t i o n ” v a l u e=” d e b i t ”>
<i n p u t t y p e=” s u b m i t ” name=” o p e r a t i o n ” v a l u e=” c r e d i t ”>
</p>
</ form>
</ body>
</ html>
25 / 34
Exemple - résultat
26 / 34
Scripts CGI
• Programme générant un contenu en réponse à une requête
• Programmé dans n’importe quel langage
◦ Perl, C, C++, Java, shell, . . .
• Placé dans un répertoire particulier du serveur Web (cgi-bin)
• Envoie le contenu sur STDOUT
• Doit envoyer entête (type mime) + contenu
◦ Pour HTML : content-type : text/html
27 / 34
Serveur web dynamique - CGI
28 / 34
Requête à un CGI
• Envoi de paramètres
◦ champ1=valeur1&champ2=valeur2...
• Les requêtes GET et POST
◦ GET : paramètres inclus dans l’URL
http://nom_du_serveur/cgi-bin/script.cgi?champ1=valeur1&...
• Limitation à 255 catactères, visible, . . .
◦ POST : paramètres inclus dans le corps de la requête HTTP
◦ Utilisation de formulaires (pour interactions)
• Réception des paramètres
◦ GET : variable d’environnement QUERY STRING
◦ POST : STDIN, et variable d’environnement CONTENT LENGTH
29 / 34
Exemple GET - Serveur
#! / b i n / b a s h
function extract parameter ()
{
echo you s u b m i t t e d t h e f o l l o w i n g key−v a l u e p a i r s ”<br>”
s t r=$1
w h i l e [ ” $ s t r ” != ” ” ] ;
do
echo − ‘ echo $ s t r | c u t −f 1 −d ’ & ’ ‘ ”<br>”
s t r =‘ echo $ s t r | c u t −s −f 2 − −d ’ & ’ ‘
done
}
echo ” C o n t e n t −Type : t e x t / h t m l ”
echo ” ”
e x t r a c t p a r a m e t e r $QUERY STRING
echo ” ”
30 / 34
Exemple GET - Client
laurent@sarah:~$ telnet localhost 80
Trying ::1...
Connected to localhost.
Escape character is ’^]’.
GET /cgi-bin/test-cours?nom=toto&prenom=titi HTTP/1.0
Host: localhost
HTTP/1.1 200 OK
Date: Thu, 30 Sep 2010 11:10:01 GMT
Server: Apache/2.2.16 (Debian)
Vary: Accept-Encoding
Connection: close
Content-Type: text/html
you submitted the following key-value pairs <br>
- nom=toto <br>
- prenom=titi <br>
Connection closed by foreign host.
31 / 34
Exemple POST - Serveur
#! / b i n / b a s h
function extract parameter ()
{
echo you s u b m i t t e d t h e f o l l o w i n g key−v a l u e p a i r s ”<br>”
s t r=$1
w h i l e [ ” $ s t r ” != ” ” ] ;
do
echo − ‘ echo $ s t r | c u t −f 1 −d ’ & ’ ‘ ”<br>”
s t r =‘ echo $ s t r | c u t −s −f 2 − −d ’ & ’ ‘
done
}
echo ” C o n t e n t −Type : t e x t / h t m l ”
echo ” ”
r e a d QUERY STRING
e x t r a c t p a r a m e t e r $QUERY STRING
echo ” ”
32 / 34
Exemple POST - Client
laurent@sarah:~$ telnet localhost 80
Connected to localhost.
Escape character is ’^]’.
POST /cgi-bin/test-cours? HTTP/1.0
Host: localhost
Content-length: 20
nom=toto&prenom=titi
HTTP/1.1 200 OK
Date: Thu, 30 Sep 2010 11:17:41 GMT
Server: Apache/2.2.16 (Debian)
Vary: Accept-Encoding
Connection: close
Content-Type: text/html
you submitted the following key-value pairs <br>
- nom=toto <br>
- prenom=titi <br>
Connection closed by foreign host.
33 / 34
Conclusion
• Initialement
◦ Web statique
◦ Principalement des serveurs
• de page HTML
• accédés par HTTP
• Evolution vers des sites dynamiques
◦ Formulaires HTML pour saisie
◦ Scripts CGI pour génération dynamique de pages
◦ Souvent il faut accéder à une BD
• Programmation fastidieuse
34 / 34
