1 / 32

Le Web

Le Web. Les clients et serveurs Web. Clients utilisant des fouineurs. Serveur Web. Requêtes émises pages 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

taffy
Download Presentation

Le Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Le Web Section 3: Le Web, le http et le HTML1

  2. Les clients et serveurs Web Clients utilisant des fouineurs Serveur Web Requêtes émises pages reçues Section 3: Le Web, le http et le HTML2

  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 HTML3

  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 HTML4

  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 HTML5

  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 HTML6

  7. <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 Les liens (ii) Section 3: Le Web, le http et le HTML7

  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 HTML8

  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 HTML9

  10. Un exemple d’URL http://www.open.ac.uk/staff/Darrel Spécifie le chemin d’accès à la page Web Spécifie le protocole Spécifie l’ordinateur Section 3: Le Web, le http et le HTML10

  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 HTML11

  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 HTML12

  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 HTML13

  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 HTML14

  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 HTML15

  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 HTML16

  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 HTML17

  18. Un exemple d’une requête Nom de la commande Je veux cette page • GET /index.html HTTP/1.1 • User-Agent: Lynx/2.4 • Connection: Keep-Alive • Host: www.openaccess.com • Accept: text/html J’utilise ce logiciel Garder la connection TCP/IP Accepte une réponse En text/HTML Le nom de l’ordinateur à qui la requête s’adresse Section 3: Le Web, le http et le HTML18

  19. Un exemple d’une réponse Version 1.1 de HTTP La requête du client réussi • HTTP/1.1 200 OK • Date: Thu, 22 July 1998 18:40:55 GMT • Server: Apache 1.3.5 (Unix) PHP/3.0.6 • Last-Modified: Mon, 19 July 1997 16:03:22 GMT • Content-Type: text/html • Content-Length: 12987 • ... Date de la réponse Date de la dernière modification à la page Logiciel Serveur Type de contenu Longueur du contenu (octets) Section 3: Le Web, le http et le HTML19

  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 HTML20

  21. Commandes HTTP GET Obtenir une page HEAD Comme GET, mais sans contenu, seulement les entêtes POST Appeler un programme sur un formulaire PUT Conserver le fichier sur le serveur OPTIONS Liste des options de communications Section 3: Le Web, le http et le HTML21

  22. Commandes GET Vs POST • GET • Les paramètres sont dans l’URL • POST • Les paramètres du formulairesuivent dans le fil d’entrée après les en-têtes Section 3: Le Web, le http et le HTML22

  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 HTML23

  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 HTML24

  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 HTML25

  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 HTML26

  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 HTML27

  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 HTML28

  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 HTML29

  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 HTML30

  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 HTML31

  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/ Section 3: Le Web, le http et le HTML32

More Related