Upload
leonce-gregoire
View
118
Download
4
Embed Size (px)
Citation preview
Section 3: Le Web, le http et le HTML 1
Le Web
Section 3: Le Web, le http et le HTML 2
Les clients et serveurs Web
Serveur WebServeur Web
Clients utilisant des fouineurs
Requêtes émisespages reçues
Section 3: Le Web, le http et le HTML 3
Le langage de balise HTML
• Les pages sont écrites en HTML• HyperText Mark-up Language
• HTML est basé sur SGML, un standard développé par IBM
• Le texte est entrelacé avec des balises• Les pages peuvent être dynamiques ou
statiques• Des formulaires de saisie de données peuvent
être inclus dans les pages
Section 3: Le Web, le http et le HTML 4
Balises HTML
• Formatage de base• <b>Présentez en gras cette section</b>
• Gras, Italique, Titre, couleur• Liste
• Énumérations, puces • Tableau • Graphiques et images• Champs non visible pour les engins
de recherche
Section 3: Le Web, le http et le HTML 5
Un exemple de HTML
<HTML><HEAD>
<TITLE> Darrel’s Rudimentary Home Page </TITLE></HEAD><BODY><H1> Darrel Ince </H1>Hi I am Darrel Ince. I am a Professor at the Open University. There are a number of things worth knowing about me:<UL>
<LI> I own a psychotic cat. </LI><LI> My youngest daughter is named after Dylan Thomas’s
late wife. </LI><LI> I am a fanatical Welsh rugby supporter. </LI><LI> I am very tall. </LI><LI> I am a proficient Java programmer. </LI>
</UL></BODY></HTML>
Section 3: Le Web, le http et le HTML 6
Les liens
• HTML permet d’exprimer les liens d’un document à un autre document.
• Les liens peuvent référer à un document sur le même ordinateur ou sur un autre ordinateur
• En cliquant sur un lien, la nouvelle page est présentée.
Section 3: Le Web, le http et le HTML 7
Les liens (ii)
<a href= "http://www.iro.umontreal.ca/index.html"> Le département IRO
</a>
• Les hyperliens peuvent être relatifs<a href="../chapitre2/index.html">Chapitre suivant</a>
• Les hyperliens relatifs facilitent la gestion d'un ensemble de contenu
Section 3: Le Web, le http et le HTML 8
Une ancre
• Un lien peut adresser une ancre à l’intérieur d’un document. • Dans ce cas, la section identifiée par l’ancre est
présentée.
• Exemple• Ancre définit à l'intérieur d'un document• <a name="section2">Titre de la section II</a>
• Exemple d'hyperlien le ciblant• <a href= "http://www.iro.umontreal.ca/cours/plan.html#section2"> </a>
Section 3: Le Web, le http et le HTML 9
URL
• “Uniform Resource Locator” ou “Universal Resource Locator”
• Est l’adresse d’une page Web ou de d’autres ressources
• Un URL peut identfier une page Web, un fichier FTP, etc..
Section 3: Le Web, le http et le HTML 10
Un exemple d’URL
http://www.open.ac.uk/staff/Darrel
Spécifie le protocole Spécifie l’ordinateur
Spécifie le chemin d’accès à la page Web
Section 3: Le Web, le http et le HTML 11
Définition URL
• Uniform Ressource Location – URL• URI: Uniform Ressource Identifier (ISDN, autre)
• Exemple: http://www.iro.umontreal.ca/index.html • scheme://host:port/path/extra-path-info?query-info • Scheme
• Protocole utilisé: file, http, ftp, smtp, telnet, autres • Host
• Nom internet de l'ordinateur ou adresse IP • Path
• Chemin d'accès à la ressource • Extra-path-info
• Chemin d'accès additionnel • Query-info
• Suite de paramètres additionnels, nom=valeur
Section 3: Le Web, le http et le HTML 12
Les formulaires
• HTML permet d’inclure des formulaires• Les formulaires contiennent des objets
visuels comme les bouttons, les boîtes de sélection, les champs de texte
• Quand une forme est complétée, les données sont retournées au serveur Web et un programme y est exécuté
Section 3: Le Web, le http et le HTML 13
Définition succinte d’un formulaires
• <form action=url> ....</form> • Affiche un champ de saisie d'un formulaire
• <input type=text name=string>
• Différents type de champ de saisie • Texte court ou long • Boutton de choix (un ou plusieurs de la liste) • Boutton radio (actif, inactif) • Mot de passe • Boutton personnalisé, image, coordonnées x et y • Menu déroulant
Section 3: Le Web, le http et le HTML 14
Formulaire
• Le client transmet tous les champs d'un formulaire à l'URL d'action lorsque un bouton input de type submit est activé• <input type=submit>
• Les données du formulaire sont transmises avec la requête• Une liste de tuples
• <name>=valeur
Section 3: Le Web, le http et le HTML 15
Exemple d’un formulaire HTML(i)
<FORM METHOD=”POST” ACTION=”/cgi-bin/Form1process”><P>
Please type your name below</P><P>
<INPUT TYPE=”TEXT” NAME=”nameField” MAXLENGTH=”30”></P><P>
Please type your address below</P><P>
<TEXTAREA NAME=”addField” ROWS=”5” COLS=”40”></TEXTAREA>
</P><P>
Male<INPUT TYPE=”RADIO”NAME=”maleButton”VALUE=”mButt”>
</P>
Section 3: Le Web, le http et le HTML 16
Exemple d’un formulaire HTML(ii)
<P>Female<INPUT TYPE=”RADIO”NAME=”femaleButton”
VALUE=”fButt”></P><P> <INPUT TYPE=”SUBMIT” VALUE=”Submit”></P></FORM>
Ce formulaire contient 2 bouttons radio, un champ de saisi de texte et un texte
Section 3: Le Web, le http et le HTML 17
HTTP
• HyperText Transfer Protocol• Protocole utilisé pour la
communication entre le serveur et le client Web
• Un protocole de type requête/réponse
Section 3: Le Web, le http et le HTML 18
Un exemple d’une requête
GET /index.html HTTP/1.1User-Agent: Lynx/2.4Connection: Keep-AliveHost: www.openaccess.comAccept: text/html
Je veux cette page
J’utilise celogiciel
Garder la connectionTCP/IP
Le nom de l’ordinateur à qui la requête s’adresse
Accepte une réponse En text/HTML
Nom de la commande
Section 3: Le Web, le http et le HTML 19
Un exemple d’une réponse
HTTP/1.1 200 OKDate: Thu, 22 July 1998 18:40:55 GMTServer: Apache 1.3.5 (Unix) PHP/3.0.6Last-Modified: Mon, 19 July 1997 16:03:22 GMTContent-Type: text/htmlContent-Length: 12987
...
Version 1.1 de HTTP La requête du client réussi
Date de la réponse
Logiciel Serveur
Date de la dernière modification à la page
Type de contenu
Longueur du contenu (octets)
Section 3: Le Web, le http et le HTML 20
Réponse (ii)
• Contiennent les paramètre d'en-tête, suivi du document• HTTP 1.1 200 Document follows • Date: Fri, 31 August • HTTP/1.1 200 OK • Date: Thu, 30 Aug 2001 20:12:15 GMT • Server: Apache/1.3.14 (Unix) (Red-Hat/Linux) mod_fastcgi/2.2.10 • Last-Modified: Wed, 20 Dec 2000 16:18:33 GMT • Content-Length: 697 • Connection: close • Content-Type: text/html • <html> <head> <title>CIRANO</title> • ....
Section 3: Le Web, le http et le HTML 21
Commandes HTTP
GET Obtenir une pageHEAD Comme GET, mais sans contenu,
seulement les entêtes POST Appeler un programme sur un formulairePUT Conserver le fichier sur le serveurOPTIONS Liste des options de communications
Section 3: Le Web, le http et le HTML 22
Commandes GET Vs POST
• GET• Les paramètres sont dans l’URL
• POST• Les paramètres du formulaire suivent
dans le fil d’entrée après les en-têtes
Section 3: Le Web, le http et le HTML 23
Requête Get
• GET /index.html HTTP/1.0 • Paramètres du formulaire d'action
• GET /mescripts/monscript?nom=Robert+Gerin-Lajoie&adresse=2020+University HTTP/1.1
• Champs d'information additionnelle suivent le GET • Connection: Keep-Alive • User-Agent: String • Mozilla/2.02Gold (WintNT; I) • Host: www.iro.umontreal.ca • Authorization: scheme credentials • BASIC username:password
• username:password encodé en base64 • 16 autres de possibles
Section 3: Le Web, le http et le HTML 24
Requête Post
• POST mescripts/monscript HTTP/1.1 • Les paramètres du formulaire suivent sur le fil après les
en-têtes et une ligne blanche • nom=Robert+Gerin-Lajoie&adresse=2020+University
• Pourquoi une requête Post? • Pas de limite à la longueur et au nombre des
paramètres
Section 3: Le Web, le http et le HTML 25
Codes de status
• Indiques le résultat d’une requête• Commençant par 2xx indique une réponse
correcte• Commençant par 3xx indique que le logiciel
fouineur doit faire une autre action• Redirection (Redirect) sur une autre ressource• Location: <URL de la ressource>
• Commençant par 4xx indique un problème, souvent que la page est absente (404)
• Commençant par 5 indique un problème sérieux du côté du serveur
Section 3: Le Web, le http et le HTML 26
Témoins-Cookies
• Le serveur demande à ses clients de conserver les témoins.
• Le client retourne le témoin à toutes les requêtes
• Ceci est fait dans l'en-tête d'une réponse et d'une requête.
• Limite:• Au moins 300 témoins par client• 4 Ko par cookies• 20 témoins par serveur
Section 3: Le Web, le http et le HTML 27
Témoins
• Set-Cookie: name=String; expires=date; path=pathname; domain=domain-name
• Le témoin lui-même• name=String (sauf blanc, point virgule ou
tabulateur)
• La date d'expiration• Le domaine et le chemin d'accès pour
lesquels le jeton sera retransmis lors d'une prochaine requête par le client
Section 3: Le Web, le http et le HTML 28
Exemples
• domain=mondomaine.com• path= /
• Ce témoin sera retourné à tous les serveurs hhtp du domaine mondomaine.com,
• Sur toutes les ressources
Section 3: Le Web, le http et le HTML 29
Retourner le témoin sur tous les ordinateurs du domaine!
• Attention!• Only hosts within the specified domain can set a cookie for a
domain and domains must have at least two (2) or three (3) periods in them to prevent domains of the form: ".com", ".edu", and "va.us". Any domain that fails within one of the seven special top level domains listed below only require two periods. Any other domain requires at least three. The seven special top level domains are: "COM", "EDU", "NET", "ORG", "GOV", "MIL", and "INT".
• La valeur par défaut est le nom de l’ordinateur qui a généré le témoin.
Section 3: Le Web, le http et le HTML 30
Témoins tiers (cookies tiers)
• Fournis par le serveur des images insérées dans vos pages (IMG)
• Cette image peut être invisible (1X1)
• Permet à un site tiers de suivre vos sessions de furetage
• Marketing, tracking, autres
Section 3: Le Web, le http et le HTML 31
Durée des témoins
• Permanent• Selon la date fournie
• Session de furetage• Jusqu’à ce que votre fureteur soit
fermé• Prolème:
• Fureteur dans les lieux publics
Section 3: Le Web, le http et le HTML 32
Scénarios complexes
• Redirections invisibles• Images invisibles• Témoins sur des images• Utilisations
• Pour un serveur commun d’identité• Pour suivre à la trace les utilisations du site• WebBeacons
• http://www.allaboutcookies.org/web-beacons/