section 3: le web, le http et le html1 le web. section 3: le web, le http et le html2 les clients et...

Section 3: Le Web, le http et le HTML 1

Le Web


Les clients et serveurs Web

Serveur WebServeur Web

Clients utilisant des fouineurs

Requêtes émisespages reçues


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


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


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>


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.


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


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>


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


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


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


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é


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


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


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>


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


HTTP

• HyperText Transfer Protocol• Protocole utilisé pour la

communication entre le serveur et le client Web

• Un protocole de type requête/réponse


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


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)


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


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


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


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


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


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


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


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


Exemples

• domain=mondomaine.com• path= /

• Ce témoin sera retourné à tous les serveurs hhtp du domaine mondomaine.com,

• Sur toutes les ressources


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.


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


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


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/

section 3: le web, le http et le html1 le web. section 3: le web, le http et le html2 les clients et...

Documents