pdf 1006 ko m2.4 - séquence 1

Module D02

Management et Productivité des TIC

Technologies de l'Internet

1 - Internet 2 - TCP/IP 3 - HTTP 4 - HTML 5 - XML

Téléchargement du chapitre

Exercices QCM

Bibliographie

Gérard-Michel Cochard

[email protected]

mailto:[email protected]

Technologies de l'Internetversion modifiée le 29 octobre 2007

1 - Internet

Internet, réseau de réseaux, s'est développé à partir de 1985 et a subi un essor extraordinaire à partir de 1990 (suite à la mise en service des premiers serveurs WWW). L'année 1995 est considérée comme l'année de "décollage" d'Internet. Il constitue actuellement le moyen de communication le plus performant et le plus populaire.

Source : Nielsen//Netratings

Toutefois, on peut constater une très forte inégalité géographique dans l'utilisation d'Internet :

Nous passons en revue, dans ce chapitre quelques aperçus sur les technologies employées, sans vouloir prétendre à l'exhaustivité complète sur le sujet, d'ailleurs en perpétuelle évolution.

Internet est un ensemble de réseaux de tous types : c'est un réseau de réseaux. Chacun des réseaux possèdent ses règles propres (protocoles), en général incompatibles avec celles d'un autre réseau. Pour que ces réseaux puissent communiquer entre eux, des règles communes ont été définies : il s'agit de la famille des protocoles TCP/IP.

Le "provider" ou fournisseur d'accès Internet (ISP : Internet Service Provider, FAI : Fournisseur d'Accès Internet) est une entreprise privée ou publique qui propose aux particuliers ou aux sociétés un raccordement à Internet.

Les connexions physiques à un point d'accès Internet peuvent être réalisées par

● des liaisons téléphoniques jusqu'à 28,8 kbits/s ; 1 CD-ROM (640 Mo) sera alors transporté environ au mieux en 4 jours ;

● liaisons spécialisées : 56 kbits/s à 2 Mbits/s couramment ; 1 CD-ROM (640 Mo) sera alors transporté en 5 h à 64 kbits/s et en 10 min à 2 Mbits/s.

Les services offerts par Internet sont nombreux :

● WWW : serveurs de pages d'information ● e-mail : courrier électronique ● FTP : transfert de fichiers ● Telnet : connexion à une machine distante ● etc .....

On trouvera des documents d'intérêt sur Internet aux adresses suivantes :

● aspects du Net : http://www.eff.org/ ● une nouveau guide Internet par Gilles Maire : http://ungi.hautesavoie.net/toc.htm

http://www.eff.org/papers/eegtti/eeg_toc.html

http://www.imaginet.fr/ime/

Technologies de l'Internetversion modifiée le 20 septembre 2006

2 - TCP/IP

Les protocoles TCP/IP et le modèle OSI

TCP/IP est une famille de protocoles issus du projet américain DARPA (années 60) qui ont conduit au réseau expérimental ARPANET, devenu par la suite .... Internet au plan mondial.

La famille TCP/IP se compose essentiellement des protocoles IP, TCP, UDP. Le modèle OSI, dont le but est de normaliser les protocoles de communication, a été élaboré pratiquement en même temps que TCP/IP. On ne s'étonnera donc pas des différences inévitables que ces deux familles de protocoles présentent. Il faut remarquer que, pendant que OSI se développait avec une relative lenteur, TCP/IP s'est développé, quant à lui, avec une relative rapidité.

Le modèle OSI (Open System Interconnection) est un modèle de référence pour les réseaux ; il est composé de 7 couches, chaque couche supérieure ayant besoin de la présence de la couche immédiatement inférieure pour fonctionner. Ainsi lorsque l'on envoie un message (avec sa messagerie préférée) sur Internet, on utilise un programme applicatif (celui de votre messagerie) qui se situe au niveau de la couche application. Les données que comporte votre message, de manière totalement automatique, sont analysées, découpées et structurées en segments, paquets, trames, flux, peuvent être cryptées, augmentées d'informations de contrôle et de service, etc... au cours du passage dans les couches inférieures jusqu'à la couche physique qui assure le transport électronique des données issues de votre message. A l'arrivée, le processus inverse s'effectue et votre message, reconstitué, est délivré à votre correspondant. En résumé, chaque couche assure un ensemble de fonctions précises.

Les caractéristiques principales de la famille TCP/IP sont les suivantes

● structuration en couches : couches TCP, UDP et couche IP s'intercalant entre une couche accès au réseau et une couche application.

● caractère ouvert : alors que bon nombre de protocoles sont liés à un éditeur ou un constructeur (protocoles propriétaires), TCP/IP se veut universel et indépendant des systèmes informatiques. Il faut souligner que le développement de la famille de protocoles TCP/IP a accompagné le développement d'UNIX (ouvert également).

● propriété de routage : l'acheminement d'un message (découpé en paquets) est assuré par un ensemble de mécanismes automatiques.

La figure ci-dessous présente sommairement la correspondance centre les deux familles de protocoles OSI et TCP/IP:

IP = Internet Protocol ; TCP = Transport Control Protocol ; UDP = User Datagram Protocol

On constate donc que TCP/IP n'est pas concerné par les deux couches basses (physique et liaison) ce qui signifie que n'importe quel protocole à ces niveaux est utilisable (par exemple Ethernet, Token Ring,...) et que les couches supérieures de l'OSI correspondent, dans TCP/IP, à une seule couche "application". Les deux couches essentielles de TCP/IP sont donc la couche réseau avec le protocole IP et la couche transport avec les deux protocoles exclusifs TCP et UDP.

L'adrassage IP

Le protocole IP de la couche réseau permet d'identifier une machine sur le réseau Internet grâce à une adresse IP sur 32 bits (en IPv4) ; Les 32 bits sont usuellement regroupés en paquets de 8 bits (octets) ; chacun de ces octets correspond à un nombre binaire qui peut être exprimé en décimal (ce que l'on fait usuellement) compris entre 0 et 255.

Par exemple, 192.34.56.97 correspond à l'adresse binaire 11000000000000100011100001100001 :

Il existe plusieurs types d'adresses qui se répartissent en classes. Il existe actuellement plusieurs classes d'adresses, les plus connues étant A, B, C, D, E. Les classes D et E sont des classes spéciales, les classes A, B, C sont des classes courantes qui diffèrent par le nombre de réseaux et le nombre de machines par réseau. La figure ci-dessous explicite les classes usuelles A, B, C.

Pour chaque adresse 3 champs sont à considérer :

● le premier champ indique la classe d'adresses (0 pour la classe A, 10 pour la classe B, 110 pour la classe C, etc...) ;

● le deuxième champ indique l'adresse du réseau ou Network-ID (sa longueur dépend de la classe) ; ● le troisième champ indique l'adresse d'une machine sur le réseau (Host-ID) (sa longueur dépend également

de la classe).

On pourra vérifier que l'adresse 192.34.56.97 correspond à une machine d'un réseau de classe C.

On constatera que la classe A correspond à un maximum de 128 réseaux (27) théoriquement, chacun d'eux pouvant contenir 224 machines théoriquement ; la classe B correspond à un maximum de 214 réseaux théoriquement, chacun d'eux pouvant contenir 216 machines théoriquement ; enfin la classe C, la plus courante, correspond à un maximum de 221 réseaux théoriquement , chacun pouvant contenir 256 machines théoriquement . En fait, on ne peut avoir d'adresse Host-ID ne comportant que des "0" car ce type d'adresse est employé pour désigner des réseaux. Ainsi la machine d'adresse 192.34.56.97 appartient au réseau noté 192.34.56.0. On ne peut non plus avoir d'adresse ne comportant que des "1" car cela est réservé au "multicast" (adresse générique pour un ensemble de machines). Ainsi 192.34.56.255 qui est une adresse ne comportant que des "1" dans son Host-ID peut être employée pour envoyer un message collectif à toutes les machines du réseau 192.34.56.0. Autrement dit,

● la classe A peut comporter au maximum 128-2 = 126 réseaux distincts ; chacun d'eux peut comporter au maximum 224 - 2 machines ;

● la classe B peut comporter au maximum 214-2 réseaux distincts :; chacun d'eux peut comporter au maximum 216 - 2 machines ;

● la classe C peut comporter au maximum 221-2 réseaux distincts ; chacun d'eux peut comporter au maximum 256 - 2 = 254 machines.

Les adresses proposées par le protocole comportent donc une indication de classe, une adresse réseau et une adresse machine. La classe et l'adresse réseau sont imposés par l'administration d'Internet. Toutefois, à l'intérieur d'un réseau, on peut définir les adresses machine à son gré. En particulier rien n'empêche de définir des sous-réseaux pour une commodité de gestion.

Après une période assez laxiste de distribution des adresses IP, on est arrivé aujourd'hui au problème de la saturation de certaines classes. Le cas le plus critique est celui de la classe B. En effet, beaucoup trop d'adresses de réseau de classe B ont été accordées à des organismes qui n'utilisent pas toutes les adresses possibles, d'où un gaspillage énorme. En fait, si les réseaux de classe B sont trop grands, ceux de classe C sont trop petits ; d'où l'idée d'utiliser plusieurs réseaux de classe C pour constituer un réseau logique. C'est ce que propose la technique CIDR (Classless InterDomain Routing).

IP

IP est le protocole de la couche assimilable à la couche réseau du modèle OSI. Cette couche a pour fonctions principales la gestion de paquets de données appelés datagrammes. Ces paquets sont formés à partir des données contenus dans les messages. En fait les données des utilisateurs sont

● 1) encapsulées dans un message comportant des données de contrôle (Application Header)● 2) au passage dans la couche transport (TCP ou UDP), le message est encapsulé dans un bloc (segment TCP

ou datagramme UDP) comportant également des données de contrôle (TCP Header ou UDP Header).● 3) le bloc est à sont tour encapsulé, lors de son passage dans la couche réseau, dans un paquet IP

(datagramme IP). Le paquet IP comporte également des informations de contrôle (IP Header).● 4) enfin, le paquet IP est, au niveau de la couche liaison, incorporé dans une trame dont la structure

dépend des protocoles utilisés dans cette couche.

Le processus inverse a lieu pour la réception.

Le passage d'une couche à l'autre implique un habillage/déshabillage des données :

En règle générale, un paquet IP possède la structure suivante :

La longueur totale de l'en-tête (contrôle + adresse source + adresse cible) est de 20 octets. La longueur des données, donc la longuer totale du paquet n'est pas définie mais assujettie à un maximum de 65535 octets. Dans le champ de contrôle, il y a une zone, sur un octet, intéressante : le TTL (Time To Live) représenté par un nombre entier. Il définit la durée de vie d'un paquet. Lors d'un passage dans un routeur (voir plus loin), ce nombre est décrémenté de 1. Lorsqu'il est nul, le paquet est détruit ce qui évite d'avoir sur le réseau des paquets "errants" qui alourdiraient la charge réseau et ralentiraient le trafic;.

Les noeuds d'un réseau IP ont pour fonction la commutation des paquets ou routage. Pour cette raison, on les appelle des routeurs ; ce sont des ordinateurs qui possèdent au moins deux adresses IP car ils appartiennent à plusieurs réseaux et c'est grâce à eux que l'on passe d'un réseau à un autre (c'est le principe d'Internet qui est un réseau de réseaux). Le routage des paquets IP est effectuée grâce à des tables de routage. Ces tables utilisent le fait que le début d'une adresse IP indique le numéro de réseau et la suite le numéro de machine sur ce réseau. La transmission d'un paquet peut se faire suivant deux modes : le mode direct et le mode indirect :

● le mode direct est utilisé quand le paquet peut être transmis sous la forme d'une trame de la couche inférieure (liaison) ; ce mode est employé lorsque le destinataire est directement relié au routeur qui a reçu le paquet ; pas de traversée d'un routeur.

● le mode indirect est employé lorsque le destinataire appartient à un réseau autre que celui auquel appartient le routeur qui a reçu le paquet ; la table de routage consultée doit indiquer alors l'adresse du routeur vers lequel diriger ce paquet.

Une situation typique pour un routeur est indiquée ci-dessous :

table de routage pour le routeur B :

adresse route

200.0.0.0 direct

300.0.0.0 direct

100.0.0.0 300.0.0.7

Le terme datagramme est appliqué au paquet IP. Ce terme désigne un paquet de données qui peut prendre plusieurs chemins pour arriver à destination. Plus exactement, il arrive qu'un message puisse correspondre à plusieurs paquets. Ces paquets peuvent circuler de l'émetteur au destinataire de deux manières différentes :

● tous les paquets du même message suivent le même chemin. Ils arriveront alors dans leur ordre de départ. On dit qu'il suivent un chemin virtuel. Ce n'est pas le cas des paquets IP.

● les paquets d'un même message peuvent suivre des chemins différents (car les tables de routage IP changent suivant l'état du réseau). Ces paquets sont appelés datagrammes et c'est le cas des paquets IP.

TCP et UDP

La couche réseau utilise un protocole unique : IP. La couche transport utilise deux protocoles, exclusifs, TCP (Transport Control Protocol) et UDP (User Datagramme Protocol). Alors que IP utilise des adresses de machines, TCP et UDP utilisent des ports ; la différence est fondamentale : IP connecte des machines tandis que TCP ou UDP connectent des applications. On trouvera donc, dans les blocs manipulés par TCP ou UDP des ports source et destinataire. Certains ports sont standards (applications usuelles) :

HTTP est le protocole du Web, FTP, le protocole de transfert de fichiers, SMTP et POP3 sont les protocoles de la messagerie électronique, TELNET est le protocole de commande à distance.

La différence entre TCP et UDP est basée sur la propriété "connexion". Un protocole est "avec connexion" (ou orienté connexion) si un chemin de parcours des blocs est défini : c'est le cas de TCP ; un protocole est dit "sans connexion" s'il n'y a pas de chemin défini : c'est le cas de UDP qui utilise des datagrammes (comme IP). D'un certain côté, on peut comparer UDP à un service postal alors que TCP peut être comparé au service téléphonique.

Les deux protocoles UDP et TCP correspondent à des besoins différents :

● TCP a pour rôle d'établir une connexion , de contrôler les erreurs, de ré-ordonnancer les datagrammes pour reconstituer le message ou à l'inverse de fractionner un message en plusieurs datagrammes. Ce protocole est utile pour un volume important d'informations.En reprenant l'analogie téléphonique, les paquets IP arrivent dans un bureau et font sonner un téléphone particulier (port) , celui de l'application.

Quand celle-ci décroche et accepte la communication (acquittement), un dialogue s'instaure entre applications (ordinateurs), l'information circulant sur la ligne téléphonique sous forme de paquets IP. TCP, au contraire de UDP, offre des garanties de de délivrance d'un message au prix, bien sûr, d'une complexité plus grande. De plus, TCP optimise l'utilisation de la bande passante de la voie de communication en effectuant un contrôle de flux dynamique.

● UDP n'est pas orienté connexion et n'effectue pas de contrôle d'erreur. Par suite, il est plus rapide, mais moins fiable. Ce protocole est utilisé pour la transmission d'informations de faible taille, voire répétitive. UDP ne garantit pas la remise d'un datagramme à son destinataire, ni que les datagrammes d'un message arrivent dans leur ordre d'émission. L'analogie entre UDP et la poste peut faire comprendre comment fonctionne le passage entre la couche réseau (IP) et la couche transport (UDP). Les paquets IP arrivent dans des bureaux de poste (ordinateurs) ; ils sont triés suivant leur code postal (port) et placés dans des boîtes à lettres (espaces mémoire associé aux ports) ; les applications périodiquement regardent dans leur boîte si elles ont du "courrier".

Autres protocoles de la famille TCP/IP

La famille TCP/IP possède des protocoles annexes dont les principaux sont :

■ ICMP (Internet Control Message Protocol) : ce protocole est destiné à l'envoi de messages de service. Par exemple, lorsque que le TTL d'un paquet IP passe à 0, le paquet est détruit, mais ICMP envoie un "avis de décès" au composant source du paquet (avec l'adresse du routeur assassin). Ce protocole est notamment mis en oeuvre dans la commande Traceroute qui permet de connaître le chemin (liste des routeurs) suivi par un paquet.

Cet utilitaire informe sur le trajet suivi par un paquet IP. Il utilise également le protocole ICMP, notamment les messages ICMP_ECHO_REQUEST et ICMP_TIME_EXCEEDED. Le paramètre TTL (Time To Live) est utilisé dans le mécanisme. Rappelons que TTl s'incrémente de 1 à chaque passage dans un noeud du réseau. La valeur de TTL est donc le nombre de routeurs traversés (sa valeur est fixée par défaut à 128 ; elle est décrémentée de 1 à chaque traversée ; quand la valeur est 0, le paquet est détruit et un message de dépassement de temps est envoyé : ICMP_TIME_EXCEEDED).

Détail du mécanisme :

● la station d'observation envoie le message ICMP_ECHO_REQUEST avec TTL=1 ● Au premier routeur rencontré, TTL est décrémenté de 1 et prend la valeur 0, le paquet est

détruit et le message ICMP_TIME_EXCEEDED est envoyé à l'émetteur ● l'émetteur envoie un nouveau message ICMP_ECHO_REQUEST avec TTL=2 ● Au deuxième routeur rencontré le mécanisme précédent recommence et l'émetteur reçoit un

deuxième message ICMP_TIME_EXCEEDED ● En continuant ainsi, l'émetteur reçoit, pour chaque routeur traversé, un message

ICMP_TIME_EXCEEDED. Tous ces messages permettent de connaître la route suivie.

La commande est tracert 13.0.6.86

Le résultat est :

Trace l'itinéraire vers 13.0.6.86 avec un maximum de 30 tronçons :

1 20 ms 20 ms 25 ms 13.15.0.2 2 120 ms 125 ms 120 ms 162.28.0.9 3 60 ms 60 ms 60 ms 13.0.6.86

Routage terminé.

On notera que Traceroute effectue 3 essais pour chaque tronçon.

■ IGMP (Internet Group Management Protocol) : ce protocole est dédié à la communication de groupes (multicast) : distribution de datagrammes à plusieurs stations avec une adresse unique IP.

■ ARP (Address Resolution Protocol) et RARP (Reverse Address Resolution Protocol) : ces protocoles sont dédiés à la correspondance entre les adresses IP et les adresses spécifiques des réseaux de base de la couche liaison (MAC).


3 - HTTP

HTTP (HyperText Transport Protocol) est un exemple de protocole de la couche application d'Internet. HTTP désigne le protocole utilisé par l'application communément appelée World Wide Web (WWW) ou simplement Web. Cette application est un dispositif client-serveur où le client demande à un serveur de lui envoyer des documents. Ces documents sont simples ou composites et la demande comme la réception de documents est effectuée sur le poste client par un logiciel spécifique appelé navigateur (browser).

Principe du serveur http

Un serveur HTTP est un ensemble composé d'une plate-forme informatique, d'un logiciel serveur et de documents. Le logiciel serveur est appelé httpd (http daemon) ou https (http server). Dans la suite, on désignera le logiciel serveur par httpd.

Les types de documents pouvant être transmis du serveur au client sont des pages HTML, du texte pur (txt), du texte Postscript (ps), du son (au), des images (gif, jpg), des images animées (mpeg), des animations 3D (vrml), des applets (java). Mais attention aux documents composites pour les temps de réponse (1 document HTML contenant 3 images nécessite 4 requêtes).

HTML (HyperText Mark-up Language) est un langage de description de document dérivé de SGML. Il permet de décrire un document composite comportant du texte et des images.

Fonctionnement du protocole http

Etape 1 : le serveur attend une requête

Etape 2 : Un client émet une requête vers le serveur dont il connaît l'adresse URL

GET /document.htm HTTP/1.0 <CRLF>

Cette chaîne de caractères est mémorisée par le serveur. GET est une méthode ; /document.htm est un document HTML situé sous la racine du serveur ; HTTP/1.0 indique le protocole et sa version.

Etape 3 : Le serveur analyse la requête

Etape 4 : le serveur lit la suite de la requête :

Accept : */* <CRLF> Accept : image/gif <CRLF> Accept : image/jpeg <CRLF> Accept : text/plain <CRLF> Accept : text/HTML <CRLF> <CRLF>

L'attribut Accept indique le type de document que le navigateur peut recevoir. Le code <CRLF> (Retour Chariot et

passage à la ligne suivante) placé seul sur une ligne indique la fin de la requête.

Etape 5 : Exécution de la méthode : le document est recherché à partir du gestionnaire de fichiers du système d'exploitation du serveur. Deux cas sont à considérer :

● succès : envoi du document

HTTP/1.0 200 Documenbt follows <CRLF> Server : NCSA/1.4 <CRLF> Date : Mon, 13 Jan 2001 21.00.00 GMT <CRLF> Content-type : text/html <CRLF> Content-length : 1257 <CRLF> Last-modified : Tue, 21 Jul 1999 12.34.56.78 GMT <CRLF> Envoi du fichier demandé <CRLF> <CRLF>

● échec : envoi d'un message d'erreur

HTTP/1.0 403 Not Found <CRLF> Server : NCSA/1.4 <CRLF> Date : Mon, 13 Jan 20001 21.00.00 GMT <CRLF> Content-type : text/html <CRLF> Content-length : 0 <CRLF>

succès

échec

<CRLF>

Etape 6 : Fermeture du fichier, fermeture de la connexion entre le client et le serveur

Etape 7 : Le serveur httpd se remet à l'écoute

Dans la description ci-dessus, un certain nombre d'attributs méritent quelques explications :

a) méthodes :

Il n'y en a pas beaucoup :

GET retourner l'objet demandé HEAD retourner seulement les informations sur l'objet demandé POST stocker l'information (généralement via un script) PUT envoyer une nouvelle copie DELETE détruire l'objet

(les deux dernières ne sont pas toujours autorisées sur le serveur)

b) codes :

200 Document follows (tout va bien) 301 Moved Permanently (le document a été déplacé définitivement) 302 Moved Temporarily (le document a été déplacé temporairement) 304 Not Modified (document non modifié depuis une date spécifiée) 401 Unauthorized (document protégé) 402 Payment Required (droits à acquitter) 403 Forbidden (illégal) 404 Not Found (pas trouvé) 500 Server Error (erreur de serveur) 501 Not implemented (non implémenté)

c) type MIME (Multipurpose Internet Mail Extensions)

définition des types de documents :

text/plain ascii pur text/html document HTML application postscript document en Postscript image/gif image en format gif

image/jpeg image en format jpeg audio/basic son video/mpeg images animées x-world/x-vrml animation 3D

Il convient de noter qu'une machine peut être multi-serveur, c'est à dire héberger plusieurs serveurs Web ; il faut évidemment leur attribuer des ports différents. Par exemple , une machine peut héberger 3 serveurs Truc, Chose et Machin avec les affectations : Truc : port 80 ; Chose : port 8080 ; Machin : port 8081


4 - HTML

HTML (HyperText Mark-up Language) est le langage de description d'un document fourni par un serveur http. Il dérive de SGML (Standard Generalized Mark-up Language) et a été développé spécifiquement pour le Web par Robert Caillau et Tim Berners Lee.

. Ce langage utilise des balises (tags) signalées par les signes "<" et ">"pour indiquer comment sont formatés les documents. La structure d'un document HTML est la suivante :

<HTML> <HEAD> ------------ </HEAD> <BODY> ------------ </BODY> </HTML>

La plupart des balises s'utilisent par paires : <balise> et </balise> pour encadrer la partie du document qui doit hériter des attributs spécifiés dans les balises. <HTML> et </HTML> indiquent le début et la fin du document HTML. Ce document se compose de deux parties : l'en-tête, encadrée par <HEAD> et </HEAD> et le corps, encadré par <BODY> et </BODY>.

Les balises permettent

● de préciser le style● d'insérer des images● de définir des listes● de définir des tableaux● de définir des cadres

● de définir des formulaires

Par ailleurs, l'hypertexte permet de définir des liens sur des objets du document (texte ou image). Chaque lien définit une référence à un fichier par son URL (Uniform Resource Locator). Les URL sont également utilisées pour lier des ressources à un document HTML ; ainsi pour insérer une image on utilisera la balise IMG :

<IMG src="http://www.truc/site_untel/images/image08>

Pour en savoir plus :

● Notions de base de HTML ● guides de HTML :

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Information_and_Documentation/Beginner_s_Guides/Beginner_s_HTML/ http://www-leland.stanford.edu/~ttores/Internet/toc.html

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Information_and_Documentation/Beginner_s_Guides/Beginner_s_HTML/



http://www-leland.stanford.edu/~ttores/Internet/toc.html


5 - XML

HTML est un langage de description de document dans le but de l'afficher sur un écran. XML est un langage de description de document beaucoup plus universel qui, par suite de sa standardisation par le WC3, est devenu le langage de l'Internet. XML, comme HTML est issu de SGML.

SGML (Standard Generalized Markup Language) est un métalangage dont l'objectif est la description de langages utilisant des balises (par exemple HTML est un langage Markup). SGML a été inventé pour afficher un document quelle que soit la plate-forme de lecture. SGML prévoit qu'un document possède une structure définie par un fichier spécifique appelé DTD (Définition de Type de Document ou Document Type Definition). Dans un langage décrit par SGML, il faut donc produire

1) le document (dont la structure est décrite par des balises)

2) la DTD (qui définit les balises)

ce qui peut représenter un mode opératoire assez lourd.

Pour plus d'informations consulter : http://www.oasis-open.org/cover/general.html

HTML, inventé par Tim Berners Lee, est basé sur une DTD particulière, comprise par les navigateurs et qu'il n'est pas besoin de transmettre. HTLM est un langage de présentation de document multimédia ayant une double fonctionnalité :

● définition de la structure du document (par exemple balise <p> pour indiquer un paragraphe)● mise en page du document (par exemple balise <font> pour préciser la police de caractères

utilisée)

HTML utilise un certain nombre de balises prédéfinies, bien connues des développeurs sur Internet.

http://www.oasis-open.org/cover/general.html

XML (Extensible Markup Language) est une simplification de SGML. C'est donc toujours un métalangage et il peut décrire HTML par exemple. Son objectif essentiel, comme celui de SGML, est la description de la structure d'un document.

Un document XML est un document créé avec les spécifications de XML. Il possède des balises qui sont décrites dans une DTD. Il n'y a donc plus, comme dans HTML, des balises prédéfinies : XML crée des balises à volonté. La mise en page n'est pas du ressort de XML ; elle est définie par des fichiers annexes : CSS ou XSL.

Documentation : http://www.w3.org/XML/ ; www.w3schools.com/xml/default.asp

Contrairement à HTML, XML suit des règles très précises (ce qui n'est pas le cas de HTML où, par exemple, une balise comme <table> peut être écrite <TABLE> ou <taBLE> sans inconvénient).

Examinons sur un exemple comment s'écrit un fichier XML. Le fichier suivant donne un extrait de la description d'une bibliothèque :

<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE bouquins SYSTEM "livres.dtd"> <bouquins> <livre> <numero>123</numero> <titre>Les Trois Mousquetaires</titre> <auteur>A.Dumas</auteur> <editeur>Gallimard</editeur> <prix>46€</prix> </livre> <livre> <numero>124</numero> <titre>Les Diaboliques</titre> <auteur>Boileau</auteur> <auteur>Narcejac</auteur> <editeur>Duchnok</editeur> <prix/> </livre> </bouquins>

Ce fichier s'interprète comme une arborescence :

http://www.w3.org/XML/

et c'est bien comme cela qu'il faut considérer un fichier XML puisqu'il est censé décrire la structure d'un document.

Ce fichier comporte des balises créées par l'utilisateur qui définissent des éléments qui sont des morceaux de fichier XML compris entre une balise ouvrante et une balise (la même) fermante.. Un élément peut être simple comme <numero>124</numero> ou complexe comme <livre>.........</livre> qui contient d'autres éléments. Un élément peut aussi être vide comme <prix/> qui s'interprète comme <prix></prix>. Un fichier XML ne possède qu'un élément racine (en général complexe) comme <bouquins>........</bouquins>.

La DTD associée à ce fichier XML spécifie ces balises ; le fichier correspondant, livres.dtd, qui est signalé dans le fichier XML par la balise <!DOCTYPE bouquins SYSTEM "livres.dtd"> est donné ci-dessous :

<!ELEMENT bouquins (livre+)> <!ELEMENT livre (numero, titre, auteur+, editeur, prix?)> <!ELEMENT numero (#PCDATA)> <!ELEMENT titre (#PCDATA)> <!ELEMENT auteur (#PCDATA)> <!ELEMENT editeur (#PCDATA)> <!ELEMENT prix (#PCDATA)>

Chaque élément complexe est décrit par son nom et les éléments composants. Chaque élément simple est décrit par son nom et (#PCDATA) qui signifie "une valeur littérale". On utilise également des contraintes d'occurrences :

contrainte signification

? 0 ou 1 (optionnel)

* 0 ou plus

+ au moins 1

qui indiquent le nombre possible d'éléments compris dans un élément complexe.

Si l'on visionne le fichier XML (qui n'est qu'un fichier texte) dans un navigateur (ci-dessous avec Internet Explorer) , on obtient simplement...... le fichier car aucune indication concernant l'affichage

n'a été donnée :

Pour afficher quelque chose d'exploitable on peut utiliser XSLT qui permet d'une part de définir les informations à afficher et via HTML la manière dont elles seront affichées. Ajoutons donc un troisième fichier de type XSL livres.xsl (qui est lui même un fichier XML) :

<?xml version="1.0" encoding="ISO-8859-1" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <table border="1"> <xsl:for-each select="bouquins/livre"> <tr> <td><xsl:value-of select="numero"/></td> <td> <xsl:for-each select="auteur"> <table border="0"> <tr> <td><xsl:value-of select="."/></td> </tr> </table> </xsl:for-each>

</td> <td><xsl:value-of select="titre"/></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet>

Il faut ajouter une ligne <?xml-stylesheet href="livres.xsl" type="text/xsl"?> dans le fichier livres.xml pour indiquer le fichier XSL de présentation à l'écran. Le fichier livres.xsl utilise des balises HTML pour l'affichage écran. On a choisi ici d'afficher seulement, pour chaque livre, le numéro, les auteurs et le titre. Le résultat est donné ci-dessous (avec Internet Explorer)

Une autre façon d'écrire le fichier XML est basée sur l'utilisation d'attributs. Cette façon est commode car elle nous rapproche des bases de données : les attributs correspondent dans ce cas aux champs des tables du modèle relationnel (appelés d'ailleurs aussi attributs) :

<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE bouquins SYSTEM "livres2.dtd"> <?xml-stylesheet href="livres2.xsl" type="text/xsl"?> <bouquins> <livre numero="123" titre="Les Trois Mousquetaires" editeur="Gallimard" prix="46€"> <auteur>A. Dumas</auteur> </livre> <livre numero="124" titre="Les Diaboliques" editeur="Duchnok" prix=""> <auteur>Boileau</auteur> <auteur>Narcejac</auteur> </livre> </bouquins>

La DTD correspondante sera

<!ELEMENT bouquins (livre+)> <!ELEMENT livre (auteur+)> <!ATTLIST livre numero CDATA #REQUIRED> <!ATTLIST livre titre CDATA #REQUIRED> <!ATTLIST livre editeur CDATA #IMPLIED> <!ATTLIST livre prix CDATA #IMPLIED> <!ELEMENT auteur (#PCDATA)>

On peut aussi indiquer des saisies obligatoires avec #REQUIRED (tout livre saisi doit comporter un numéro) ou "#IMPLIED (saisie facultative).

Enfin, le fichier XSL aura la physionomie suivante :

<?xml version="1.0" encoding="ISO-8859-1" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <table border="1"> <xsl:for-each select="bouquins/livre"> <tr> <td><xsl:value-of select="@numero"/></td> <td><xsl:for-each select="auteur"> <table border="0"> <tr> <td><xsl:value-of select="."/></td> </tr> </table> </xsl:for-each> </td> <td><xsl:value-of select="@titre"/></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet>

Le résultat à l'affichage sera le même que le précédent.

On peut aussi restituer les données du fichier XML sous une autre forme que l'affichage sur écran, par exemple sous forme d'un fichier PDF destiné à être imprimé. Cela est également possible à partir d'un fichier XML en utilisant les techniques "fo" (Formating Object). Nous ne rentrerons pas ici dans ces détails mais il faut savoir qu'avec un fichier XML on a la possibilité de restituer les données sous n'importe quelle forme.

Pour terminer, signalons que XML et ses compères (DTD, XSLT, FO, XML Schema, etc....) sont à la base d'une série d'applications utilisées largement dans les applications sur le "Net". Nous aurons l'occasion d'en reparler ultérieurement.

Module D02

Management et Productivité des TIC

Technologies de l'Internet

1 - Internet2 - TCP/IP3 - HTTP4 - HTML5 - XML

ExercicesQCM

Bibliographie

Gérard-Michel Cochard

[email protected]


1 - Internet

Internet, réseau de réseaux, s'est développé à partir de 1985 et a subi un essor extraordinaire à partir de 1990 (suite à la mise en service des premiers serveurs WWW). L'année 1995 est considérée comme l'année de "décollage" d'Internet. Il constitue actuellement le moyen de communication le plus performant et le plus populaire.

Source : Nielsen//Netratings

Toutefois, on peut constater une très forte inégalité géographique dans l'utilisation d'Internet :

Nous passons en revue, dans ce chapitre quelques aperçus sur les technologies employées, sans vouloir prétendre à l'exhaustivité complète sur le sujet, d'ailleurs en perpétuelle évolution.

Internet est un ensemble de réseaux de tous types : c'est un réseau de réseaux. Chacun des réseaux possèdent ses règles propres (protocoles), en général incompatibles avec celles d'un autre réseau. Pour que ces réseaux puissent communiquer entre eux, des règles communes ont été définies : il s'agit de la famille des protocoles TCP/IP.

Le "provider" ou fournisseur d'accès Internet (ISP : Internet Service Provider, FAI : Fournisseur d'Accès Internet) est une entreprise privée ou publique qui propose aux particuliers ou aux sociétés un raccordement à Internet.

Les connexions physiques à un point d'accès Internet peuvent être réalisées par

● des liaisons téléphoniques jusqu'à 28,8 kbits/s ; 1 CD-ROM (640 Mo) sera alors transporté environ au mieux en 4 jours ;

● liaisons spécialisées : 56 kbits/s à 2 Mbits/s couramment ; 1 CD-ROM (640 Mo) sera alors transporté en 5 h à 64 kbits/s et en 10 min à 2 Mbits/s.

Les services offerts par Internet sont nombreux :

● WWW : serveurs de pages d'information ● e-mail : courrier électronique ● FTP : transfert de fichiers ● Telnet : connexion à une machine distante ● etc .....

On trouvera des documents d'intérêt sur Internet aux adresses suivantes :

● aspects du Net : http://www.eff.org/papers/eegtti/eeg_toc.html ● une nouveau guide Internet par Gilles Maire : http://www.imaginet.fr/ime/

http://www.eff.org/papers/eegtti/eeg_toc.html

http://www.imaginet.fr/ime/


2 - TCP/IP

Les protocoles TCP/IP et le modèle OSI

TCP/IP est une famille de protocoles issus du projet américain DARPA (années 60) qui ont conduit au réseau expérimental ARPANET, devenu par la suite .... Internet au plan mondial.

La famille TCP/IP se compose essentiellement des protocoles IP, TCP, UDP. Le modèle OSI, dont le but est de normaliser les protocoles de communication, a été élaboré pratiquement en même temps que TCP/IP. On ne s'étonnera donc pas des différences inévitables que ces deux familles de protocoles présentent. Il faut remarquer que, pendant que OSI se développait avec une relative lenteur, TCP/IP s'est développé, quant à lui, avec une relative rapidité.

Le modèle OSI (Open System Interconnection) est un modèle de référence pour les réseaux ; il est composé de 7 couches, chaque couche supérieure ayant besoin de la présence de la couche immédiatement inférieure pour fonctionner. Ainsi lorsque l'on envoie un message (avec sa messagerie préférée) sur Internet, on utilise un programme applicatif (celui de votre messagerie) qui se situe au niveau de la couche application. Les données que comporte votre message, de manière totalement automatique, sont analysées, découpées et structurées en segments, paquets, trames, flux, peuvent être cryptées, augmentées d'informations de contrôle et de service, etc... au cours du passage dans les couches inférieures jusqu'à la couche physique qui assure le transport électronique des données issues de votre message. A l'arrivée, le processus inverse s'effectue et votre message, reconstitué, est délivré à votre correspondant. En résumé, chaque couche assure un ensemble de fonctions précises.

Les caractéristiques principales de la famille TCP/IP sont les suivantes

● structuration en couches : couches TCP, UDP et couche IP s'intercalant entre une couche accès au réseau et une couche application.

● caractère ouvert : alors que bon nombre de protocoles sont liés à un éditeur ou un constructeur (protocoles propriétaires), TCP/IP se veut universel et indépendant des systèmes informatiques. Il faut souligner que le développement de la famille de protocoles TCP/IP a accompagné le développement d'UNIX (ouvert également).

● propriété de routage : l'acheminement d'un message (découpé en paquets) est assuré par un ensemble de mécanismes automatiques.

La figure ci-dessous présente sommairement la correspondance centre les deux familles de protocoles OSI et TCP/IP:

IP = Internet Protocol ; TCP = Transport Control Protocol ; UDP = User Datagram Protocol

On constate donc que TCP/IP n'est pas concerné par les deux couches basses (physique et liaison) ce qui signifie que n'importe quel protocole à ces niveaux est utilisable (par exemple Ethernet, Token Ring,...) et que les couches supérieures de l'OSI correspondent, dans TCP/IP, à une seule couche "application". Les deux couches essentielles de TCP/IP sont donc la couche réseau avec le protocole IP et la couche transport avec les deux protocoles exclusifs TCP et UDP.

L'adrassage IP

Le protocole IP de la couche réseau permet d'identifier une machine sur le réseau Internet grâce à une adresse IP sur 32 bits (en IPv4) ; Les 32 bits sont usuellement regroupés en paquets de 8 bits (octets) ; chacun de ces octets correspond à un nombre binaire qui peut être exprimé en décimal (ce que l'on fait usuellement) compris entre 0 et 255.

Par exemple, 192.34.56.97 correspond à l'adresse binaire 11000000000000100011100001100001 :

Il existe plusieurs types d'adresses qui se répartissent en classes. Il existe actuellement plusieurs classes d'adresses, les plus connues étant A, B, C, D, E. Les classes D et E sont des classes spéciales, les classes A, B, C sont des classes courantes qui diffèrent par le nombre de réseaux et le nombre de machines par réseau. La figure ci-dessous explicite les classes usuelles A, B, C.

Pour chaque adresse 3 champs sont à considérer :

● le premier champ indique la classe d'adresses (0 pour la classe A, 10 pour la classe B, 110 pour la classe C, etc...) ; ● le deuxième champ indique l'adresse du réseau ou Network-ID (sa longueur dépend de la classe) ; ● le troisième champ indique l'adresse d'une machine sur le réseau (Host-ID) (sa longueur dépend également de la

classe).

On pourra vérifier que l'adresse 192.34.56.97 correspond à une machine d'un réseau de classe C.

On constatera que la classe A correspond à un maximum de 128 réseaux (27) théoriquement, chacun d'eux pouvant contenir 224 machines théoriquement ; la classe B correspond à un maximum de 214 réseaux théoriquement, chacun d'eux pouvant contenir 216 machines théoriquement ; enfin la classe C, la plus courante, correspond à un maximum de 221 réseaux théoriquement , chacun pouvant contenir 256 machines théoriquement . En fait, on ne peut avoir d'adresse Host-ID ne comportant que des "0" car ce type d'adresse est employé pour désigner des rédseaux. Ainsi la machine d'adresse 192.34.56.97 appartient au réseau noté 192.34.56.0. On ne peut non plus avoir d'adresse ne comportant que des "1" car cela est réservé au "multicast" (adresse générique pour un ensemble de machines). Ainsi 192.34.56.255 qui est une adresse ne comportant que des "1" dans son Host-ID peut être employée pour envoyer un message collectif à toutes les machines du réseau 192.34.56.0. Autrement dit,

● la classe A peut comporter au maximum 128-2 = 126 réseaux distincts ; chacun d'eux peut comporter au maximum 224 - 2 machines ;

● la classe B peut comporter au maximum 214-2 réseaux distincts :; chacun d'eux peut comporter au maximum 216 - 2 machines ;

● la classe C peut comporter au maximum 221-2 réseaux distincts ; chacun d'eux peut comporter au maximum 256 - 2 = 254 machines.

Les adresses proposées par le protocole comportent donc une indication de classe, une adresse réseau et une adresse machine. La classe et l'adresse réseau sont imposés par l'administration d'Internet. Toutefois, à l'intérieur d'un réseau, on peut définir les adresses machine à son gré. En particulier rien n'empêche de définir des sous-réseaux pour une commodité de gestion.

Après une période assez laxiste de distribution des adresses IP, on est arrivé aujourd'hui au problème de la saturation de certaines classes. Le cas le plus critique est celui de la classe B. En effet, beaucoup trop d'adresses de réseau de classe B ont été accordées à des organismes qui n'utilisent pas toutes les adresses possibles, d'où un gaspillage énorme. En fait, si les réseaux de classe B sont trop grands, ceux de classe C sont trop petits ; d'où l'idée d'utiliser plusieurs réseaux de classe C pour constituer un réseau logique. C'est ce que propose la technique CIDR (Classless InterDomain Routing).

IP

IP est le protocole de la couche assimilable à la couche réseau du modèle OSI. Cette couche a pour fonctions principales la gestion de paquets de données appelés datagrammes. Ces paquets sont formés à partir des données contenus dans les messages. En fait les données des utilisateurs sont

● 1) encapsulées dans un message comportant des données de contrôle (Application Header)● 2) au passage dans la couche transport (TCP ou UDP), le message est encapsulé dans un bloc (segment TCP ou

datagramme UDP) comportant également des données de contrôle (TCP Header ou UDP Header).● 3) le bloc est à sont tour encapsulé, lors de son passage dans la couche réseau, dans un paquet IP (datagramme IP).

Le paquet IP comporte également des informations de contrôle (IP Header).● 4) enfin, le paquet IP est, au niveau de la couche liaison, incorporé dans une trame dont la structure dépend des

protocoles utilisés dans cette couche.

Le processus inverse a lieu pour la réception.

Le passage d'une couche à l'autre implique un habillage/déshabillage des données :

En règle générale, un paquet IP possède la structure suivante :

La longueur totale de l'en-tête (contrôle + adresse source + adresse cible) est de 20 octets. La longueur des données, donc la longuer totale du paquet n'est pas définie mais assujettie à un maximum de 65535 octets. Dans le champ de contrôle, il y a une zone, sur un octet, intéressante : le TTL (Time To Live) représenté par un nombre entier. Il définit la durée de vie d'un paquet. Lors d'un passage dans un routeur (voir plus loin), ce nombre est décrémenté de 1. Lorsqu'il est nul, le paquet est détruit ce qui évite d'avoir sur le réseau des paquets "errants" qui alourdiraient la charge réseau et ralentiraient le trafic;.

Les noeuds d'un réseau IP ont pour fonction la commutation des paquets ou routage. Pour cette raison, on les appelle des routeurs ; ce sont des ordinateurs qui possèdent au moins deux adresses IP car ils appartiennent à plusieurs réseaux et c'est grâce à eux que l'on passe d'un réseau à un autre (c'est le principe d'Internet qui est un réseau de réseaux). Le routage des paquets IP est effectuée grâce à des tables de routage. Ces tables utilisent le fait que le début d'une adresse IP indique le numéro de réseau et la suite le numéro de machine sur ce réseau. La transmission d'un paquet peut se faire suivant deux modes : le mode direct et le mode indirect :

● le mode direct est utilisé quand le paquet peut être transmis sous la forme d'une trame de la couche inférieure (liaison) ; ce mode est employé lorsque le destinataire est directement relié au routeur qui a reçu le paquet ; pas de traversée d'un routeur.

● le mode indirect est employé lorsque le destinataire appartient à un réseau autre que celui auquel appartient le routeur qui a reçu le paquet ; la table de routage consultée doit indiquer alors l'adresse du routeur vers lequel diriger ce paquet.

Une situation typique pour un routeur est indiquée ci-dessous :

table de routage pour le routeur B :

adresse route

200.0.0.0 direct

300.0.0.0 direct

100.0.0.0 300.0.0.7

Le terme datagramme est appliqué au paquet IP. Ce terme désigne un paquet de données qui peut prendre plusieurs chemins pour arriver à destination. Plus exactement, il arrive qu'un message puisse correspondre à plusieurs paquets. Ces paquets peuvent circuler de l'émetteur au destinataire de deux manières différentes :

● tous les paquets du même message suivent le même chemin. Ils arriveront alors dans leur ordre de départ. On dit qu'il suivent un chemin virtuel. Ce n'est pas le cas des paquets IP.

● les paquets d'un même message peuvent suivre des chemins différents (car les tables de routage IP changent suivant l'état du réseau). Ces paquets sont appelés datagrammes et c'est le cas des paquets IP.

TCP et UDP

La couche réseau utilise un protocole unique : IP. La couche transport utilise deux protocoles, exclusifs, TCP (Transport Control Protocol) et UDP (User Datagramme Protocol). Alors que IP utilise des adresses de machines, TCP et UDP utilisent des ports ; la différence est fondamentale : IP connecte des machines tandis que TCP ou UDP connectent des applications. On trouvera donc, dans les blocs manipulés par TCP ou UDP des ports source et destinataire. Certains ports sont standards (applications usuelles) :

HTTP est le protocole du Web, FTP, le protocole de transfert de fichiers, SMTP et POP3 sont les protocoles de la messagerie électronique, TELNET est le protocole de commande à distance.

La différence entre TCP et UDP est basée sur la propriété "connexion". Un protocole est "avec connexion" (ou orienté connexion) si un chemin de parcours des blocs est défini : c'est le cas de TCP ; un protocole est dit "sans connexion" s'il n'y a pas de chemin défini : c'est le cas de UDP qui utilise des datagrammes (comme IP). D'un certain côté, on peut comparer UDP à un service postal alors que TCP peut être comparé au service téléphonique.

Les deux protocoles UDP et TCP correspondent à des besoins différents :

● TCP a pour rôle d'établir une connexion , de contrôler les erreurs, de ré-ordonnancer les datagrammes pour reconstituer le message ou à l'inverse de fractionner un message en plusieurs datagrammes. Ce protocole est utile pour un volume important d'informations.En reprenant l'analogie téléphonique, les paquets IP arrivent dans un bureau et font sonner un téléphone particulier (port) , celui de l'application. Quand celle-ci décroche et accepte la communication (acquittement), un dialogue s'instaure entre applications (ordinateurs), l'information circulant sur la ligne téléphonique sous forme de paquets IP. TCP, au contraire de UDP, offre des garanties de de délivrance d'un

message au prix, bien sûr, d'une complexité plus grande. De plus, TCP optimise l'utilisation de la bande passante de la voie de communication en effectuant un contrôle de flux dynamique.

● UDP n'est pas orienté connexion et n'effectue pas de contrôle d'erreur. Par suite, il est plus rapide, mais moins fiable. Ce protocole est utilisé pour la transmission d'informations de faible taille, voire répétitive. UDP ne garantit pas la remise d'un datagramme à son destinataire, ni que les datagrammes d'un message arrivent dans leur ordre d'émission. L'analogie entre UDP et la poste peut faire comprendre comment fonctionne le passage entre la couche réseau (IP) et la couche transport (UDP). Les paquets IP arrivent dans des bureaux de poste (ordinateurs) ; ils sont triés suivant leur code postal (port) et placés dans des boîtes à lettres (espaces mémoire associé aux ports) ; les applications périodiquement regardent dans leur boîte si elles ont du "courrier".

Autres protocoles de la famille TCP/IP

La famille TCP/IP possède des protocoles annexes dont les principaux sont :

■ ICMP (Internet Control Message Protocol) : ce protocole est destiné à l'envoi de messages de service. Par exemple, lorsque que le TTL d'un paquet IP passe à 0, le paquet est détruit, mais ICMP envoie un "avis de décès" au composant source du paquet (avec l'adresse du routeur assassin). Ce protocole est notamment mis en oeuvre dans la commande Traceroute qui permet de connaître le chemin (liste des routeurs) suivi par un paquet.

■ IGMP (Internet Group Management Protocol) : ce protocole est dédié à la communication de groupes (multicast) : distribution de datagrammes à plusieurs stations avec une adresse unique IP.

■ ARP (Address Resolution Protocol) et RARP (Reverse Address Resolution Protocol) : ces protocoles sont dédiés à la correspondance entre les adresses IP et les adresses spécifiques des réseaux de base de la couche liaison (MAC).


3 - HTTP

HTTP (HyperText Transport Protocol) est un exemple de protocole de la couche application d'Internet. HTTP désigne le protocole utilisé par l'application communément appelée World Wide Web (WWW) ou simplement Web. Cette application est un dispositif client-serveur où le client demande à un serveur de lui envoyer des documents. Ces documents sont simples ou composites et la demande comme la réception de documents est effectuée sur le poste client par un logiciel spécifique appelé navigateur (browser).

Principe du serveur http

Un serveur HTTP est un ensemble composé d'une plate-forme informatique, d'un logiciel serveur et de documents. Le logiciel serveur est appelé httpd (http daemon) ou https (http server). Dans la suite, on désignera le logiciel serveur par httpd.

Les types de documents pouvant être transmis du serveur au client sont des pages HTML, du texte pur (txt), du texte Postscript (ps), du son (au), des images (gif, jpg), des images animées (mpeg), des animations 3D (vrml), des applets (java). Mais attention aux documents composites pour les temps de réponse (1 document HTML contenant 3 images nécessite 4 requêtes).

HTML (HyperText Mark-up Language) est un langage de description de document dérivé de SGML. Il permet de décrire un document composite comportant du texte et des images.

Fonctionnement du protocole http

Etape 1 : le serveur attend une requête

Etape 2 : Un client émet une requête vers le serveur dont il connaît l'adresse URL

GET /document.htm HTTP/1.0 <CRLF>

Cette chaîne de caractères est mémorisée par le serveur. GET est une méthode ; /document.htm est un document HTML situé sous la racine du serveur ; HTTP/1.0 indique le protocole et sa version.

Etape 3 : Le serveur analyse la requête

Etape 4 : le serveur lit la suite de la requête :

Accept : */* <CRLF>Accept : image/gif <CRLF>Accept : image/jpeg <CRLF>Accept : text/plain <CRLF>Accept : text/HTML <CRLF><CRLF>

L'attribut Accept indique le type de document que le navigateur peut recevoir. Le code <CRLF> (Retour Chariot et passage à la ligne suivante) placé seul sur une ligne indique la fin de la requête.

Etape 5 : Exécution de la méthode : le document est recherché à partir du gestionnaire de fichiers du système d'exploitation du serveur. Deux cas sont à considérer :

● succès : envoi du document

HTTP/1.0 200 Documenbt follows <CRLF>Server : NCSA/1.4 <CRLF>Date : Mon, 13 Jan 2001 21.00.00 GMT <CRLF>Content-type : text/html <CRLF>Content-length : 1257 <CRLF>Last-modified : Tue, 21 Jul 1999 12.34.56.78 GMT <CRLF>Envoi du fichier demandé <CRLF><CRLF>

● échec : envoi d'un message d'erreur

HTTP/1.0 403 Not Found <CRLF>Server : NCSA/1.4 <CRLF>Date : Mon, 13 Jan 20001 21.00.00 GMT <CRLF>Content-type : text/html <CRLF>Content-length : 0 <CRLF><CRLF>

succès

échec

Etape 6 : Fermeture du fichier, fermeture de la connexion entre le client et le serveur

Etape 7 : Le serveur httpd se remet à l'écoute

Dans la description ci-dessus, un certain nombre d'attributs méritent quelques explications :

a) méthodes :

Il n'y en a pas beaucoup :

GET retourner l'objet demandéHEAD retourner seulement les informations sur l'objet demandéPOST stocker l'information (généralement via un script)PUT envoyer une nouvelle copieDELETE détruire l'objet

(les deux dernières ne sont pas toujours autorisées sur le serveur)

b) codes :

200 Document follows (tout va bien)301 Moved Permanently (le document a été déplacé définitivement)302 Moved Temporarily (le document a été déplacé temporairement)304 Not Modified (document non modifié depuis une date spécifiée)401 Unauthorized (document protégé)402 Payment Required (droits à acquitter)403 Forbidden (illégal)404 Not Found (pas trouvé)500 Server Error (erreur de serveur)501 Not implemented (non implémenté)

c) type MIME (Multipurpose Internet Mail Extensions)

définition des types de documents :

text/plain ascii purtext/html document HTMLapplication postscript document en Postscript image/gif image en format gif image/jpeg image en format jpegaudio/basic sonvideo/mpeg images animéesx-world/x-vrml animation 3D

Il convient de noter qu'une machine peut être multi-serveur, c'est à dire héberger plusieurs serveurs Web ; il faut évidemment leur attribuer des ports différents. Par exemple , une machine peut héberger 3 serveurs Truc, Chose et Machin avec les affectations : Truc : port 80 ; Chose : port 8080 ; Machin : port 8081


4 - HTML

HTML (HyperText Mark-up Language) est le langage de description d'un document fourni par un serveur http. Il dérive de SGML (Standard Generalized Mark-up Language) et a été développé spécifiquement pour le Web par Robert Caillau et Tim Berners Lee.

. Ce langage utilise des balises (tags) signalées par les signes "<" et ">"pour indiquer comment sont formatés les documents. La structure d'un document HTML est la suivante :

<HTML><HEAD>------------</HEAD><BODY>------------</BODY></HTML>

La plupart des balises s'utilisent par paires : <balise> et </balise> pour encadrer la partie du document qui doit hériter des attributs spécifiés dans les balises. <HTML> et </HTML> indiquent le début et la fin du document HTML. Ce document se compose de deux parties : l'en-tête, encadrée par <HEAD> et </HEAD> et le corps, encadré par <BODY> et </BODY>.

Les balises permettent

● de préciser le style● d'insérer des images● de définir des listes● de définir des tableaux● de définir des cadres● de définir des formulaires

Par ailleurs, l'hypertexte permet de définir des liens sur des objets du document (texte ou image). Chaque lien définit une référence à un fichier par son URL (Uniform Resource Locator). Les URL sont également utilisées pour lier des ressources à un document HTML ; ainsi pour insérer une image on utilisera la balise IMG :

<IMG src="http://www.truc/site_untel/images/image08>

Pour en savoir plus :

● Notions de base de HTML ● guides de HTML :

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Information_and_Documentation/Beginner_s_Guides/Beginner_s_HTML/http://www-leland.stanford.edu/~ttores/Internet/toc.html


http://www-leland.stanford.edu/~ttores/Internet/toc.html


5 - XML

HTML est un langage de description de document dans le but de l'afficher sur un écran. XML est un langage de description de document beaucoup plus universel qui, par suite de sa standardisation par le WC3, est devenu le langage de l'Internet. XML, comme HTML est issu de SGML.

SGML (Standard Generalized Markup Language) est un métalangage dont l'objectif est la description de langages utilisant des balises (par exemple HTML est un langage Markup). SGML a été inventé pour afficher un document quelle que soit la plate-forme de lecture. SGML prévoit qu'un document possède une structure définie par un fichier spécifique appelé DTD (Définition de Type de Document ou Document Type Definition). Dans un langage décrit par SGML, il faut donc produire

1) le document (dont la structure est décrite par des balises)

2) la DTD (qui définit les balises)

ce qui peut représenter un mode opératoire assez lourd.

Pour plus d'informations consulter : http://www.oasis-open.org/cover/general.html

HTML, inventé par Tim Berners Lee, est basé sur une DTD particulière, comprise par les navigateurs et qu'il n'est pas besoin de transmettre. HTLM est un langage de présentation de document multimédia ayant une double fonctionnalité :

● définition de la structure du document (par exemple balise <p> pour indiquer un paragraphe)● mise en page du document (par exemple balise <font> pour préciser la police de caractères utilisée)

HTML utilise un certain nombre de balises prédéfinies, bien connues des développeurs sur Internet.

XML (Extensible Markup Language) est une simplification de SGML. C'est donc toujours un métalangage et il peut décrire HTML par exemple. Son objectif essentiel, comme celui de SGML, est la description de la structure d'un document.

http://www.oasis-open.org/cover/general.html

Un document XML est un document créé avec les spécifications de XML. Il possède des balises qui sont décrites dans une DTD. Il n'y a donc plus, comme dans HTML, des balises prédéfinies : XML crée des balises à volonté. La mise en page n'est pas du ressort de XML ; elle est définie par des fichiers annexes : CSS ou XSL.

Documentation : http://www.w3.org/XML/ ; www.w3schools.com/xml/default.asp

Contrairement à HTML, XML suit des règles très précises (ce qui n'est pas le cas de HTML où, par exemple, une balise comme <table> peut être écrite <TABLE> ou <taBLE> sans inconvénient).

Examinons sur un exemple comment s'écrit un fichier XML. Le fichier suivant donne un extrait de la description d'une bibliothèque :

<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE bouquins SYSTEM "livres.dtd"><bouquins> <livre> <numero>123</numero> <titre>Les Trois Mousquetaires</titre> <auteur>A.Dumas</auteur> <editeur>Gallimard</editeur>

<prix>46€</prix> </livre> <livre> <numero>124</numero> <titre>Les Diaboliques</titre> <auteur>Boileau</auteur> <auteur>Narcejac</auteur> <editeur>Duchnok</editeur> <prix/> </livre></bouquins>

Ce fichier s'interprète comme une arborescence :

et c'est bien comme cela qu'il faut considérer un fichier XML puisqu'il est censé décrire la structure d'un document.

Ce fichier comporte des balises créées par l'utilisateur qui définissent des éléments qui sont des morceaux de fichier XML compris entre une balise ouvrante et une balise (la même) fermante.. Un élément peut être simple comme <numero>124</numero> ou complexe comme <livre>.........</livre> qui contient d'autres éléments. Un élément

http://www.w3.org/XML/

peut aussi être vide comme <prix/> qui s'interprète comme <prix></prix>. Un fichier XML ne possède qu'un élément racine (en général complexe) comme <bouquins>........</bouquins>.

La DTD associée à ce fichier XML spécifie ces balises ; le fichier correspondant, livres.dtd, qui est signalé dans le fichier XML par la balise <!DOCTYPE bouquins SYSTEM "livres.dtd"> est donné ci-dessous :

<!ELEMENT bouquins (livre+)><!ELEMENT livre (numero, titre, auteur+, editeur, prix?)><!ELEMENT numero (#PCDATA)><!ELEMENT titre (#PCDATA)><!ELEMENT auteur (#PCDATA)><!ELEMENT editeur (#PCDATA)><!ELEMENT prix (#PCDATA)>

Chaque élément complexe est décrit par son nom et les éléments composants. Chaque élément simple est décrit par son nom et (#PCDATA) qui signifie "une valeur littérale". On utilise également des contraintes d'occurrences :

contrainte signification

? 0 ou 1 (optionnel)

* 0 ou plus

+ au moins 1

qui indiquent le nombre possible d'éléments compris dans un élément complexe.

Si l'on visionne le fichier XML (qui n'est qu'un fichier texte) dans un navigateur (ci-dessous avec Internet Explorer) , on obtient simplement...... le fichier car aucune indication concernant l'affichage n'a été donnée :

Pour afficher quelque chose d'exploitable on peut utiliser XSLT qui permet d'une part de définir les informations à afficher et via HTML la manière dont elles seront affichées. Ajoutons donc un troisième fichier de type XSL livres.xsl (qui est lui même un fichier XML) :

<?xml version="1.0" encoding="ISO-8859-1" ?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><table border="1"> <xsl:for-each select="bouquins/livre"> <tr> <td><xsl:value-of select="numero"/></td> <td> <xsl:for-each select="auteur"> <table border="0"> <tr> <td><xsl:value-of select="."/></td> </tr> </table> </xsl:for-each> </td> <td><xsl:value-of select="titre"/></td> </tr> </xsl:for-each>

</table></xsl:template></xsl:stylesheet>

Il faut ajouter une ligne <?xml-stylesheet href="livres.xsl" type="text/xsl"?> dans le fichier livres.xml pour indiquer le fichier XSL de présentation à l'écran. Le fichier livres.xsl utilise des balises HTML pour l'affichage écran. On a choisi ici d'afficher seulement, pour chaque livre, le numéro, les auteurs et le titre. Le résultat est donné ci-dessous (avec Internet Explorer)

Une autre façon d'écrire le fichier XML est basée sur l'utilisation d'attributs. Cette façon est commode car elle nous rapproche des bases de données : les attributs correspondent dans ce cas aux champs des tables du modèle relationnel (appelés d'ailleurs aussi attributs) :

<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE bouquins SYSTEM "livres2.dtd"><?xml-stylesheet href="livres2.xsl" type="text/xsl"?><bouquins>

<livre numero="123" titre="Les Trois Mousquetaires" editeur="Gallimard" prix="46€"> <auteur>A. Dumas</auteur> </livre> <livre numero="124" titre="Les Diaboliques" editeur="Duchnok" prix=""> <auteur>Boileau</auteur> <auteur>Narcejac</auteur> </livre></bouquins>

La DTD correspondante sera

<!ELEMENT bouquins (livre+)><!ELEMENT livre (auteur+)><!ATTLIST livre numero CDATA #REQUIRED><!ATTLIST livre titre CDATA #REQUIRED><!ATTLIST livre editeur CDATA #IMPLIED><!ATTLIST livre prix CDATA #IMPLIED><!ELEMENT auteur (#PCDATA)>

On peut aussi indiquer des saisies obligatoires avec #REQUIRED (tout livre saisi doit comporter un numéro) ou "#IMPLIED (saisie facultative).

Enfin, le fichier XSL aura la physionomie suivante :

<?xml version="1.0" encoding="ISO-8859-1" ?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><table border="1"> <xsl:for-each select="bouquins/livre"> <tr> <td><xsl:value-of select="@numero"/></td> <td><xsl:for-each select="auteur"> <table border="0"> <tr> <td><xsl:value-of select="."/></td> </tr> </table> </xsl:for-each> </td> <td><xsl:value-of select="@titre"/></td> </tr> </xsl:for-each></table></xsl:template></xsl:stylesheet>

Le résultat à l'affichage sera le même que le précédent.

On peut aussi restituer les données du fichier XML sous une autre forme que l'affichage sur écran, par exemple sous forme d'un fichier PDF destiné à être imprimé. Cela est également possible à partir d'un fichier XML en utilisant les techniques "fo" (Formating Object). Nous ne rentrerons pas ici dans ces détails mais il faut savoir qu'avec un fichier XML on a la possibilité de restituer les données sous n'importe quelle forme.

Pour terminer, signalons que XML et ses compères (DTD, XSLT, FO, XML Schema, etc....) sont à la base d'une série d'applications utilisées largement dans les applications sur le "Net". Nous aurons l'occasion d'en reparler ultérieurement.


Bibliographie

K.JAMSA,K.COPE Internet Programming Jamsa

C. SERVIN Telecoms 1, De la transmission à l'architecture de réseaux

Dunod Informatiques

W. STALLINGS Data and Computer Communications Prentice Hall

P. ROLLIN, G. MARTINEAU, L. TOUTAIN, A. LEROY

Les Réseaux, principes fondamentaux Hermes

A. TANENBAUM Réseaux InterEditions

N.J. YEAGER, R.E. McGRATH

Technologie des serveurs Web

International Thomson Publishing

C. FRANKLIN Programmation Internet en Visual Basic


CNRS & Universités L'Internet professionnel CNRS Editions

HOLZER, PFLUGMANN TCP/IP MicroApplications


Exercices

Exercice 1

Quelle est la classe de réseau des machines d'adresse suivantes :

machine 1 : 193.34.67.89machine 2 : 122.10.20.30machine 3 : 10.20.30.40machine 4 : 192.256.123.321

Exercice 2

On s'intéresse à un réseau d'entreprise sur lequel on souhaite faire un plan d'adressage. Le réseau d'entreprise a obtenu l'adresse réseau 192.56.57.0. Le réseau est structuré en 5 sous-réseaux locaux de type Ethernet :

● un réseau de 3 serveurs● un réseau de 4 PC● un réseau de 3 PC● un réseau de 3 Macintosh● un réseau de communication entre les routeurs

1) Quelle est la classe du réseau de l'entreprise (A, B ou C) ?

2) Proposer un plan d'adressage des machines du réseau de l'entreprise

Exercice 3

On considère un réseau de 5 routeurs A, B, C, D, E. On désire constituer les tables de routage de ces routeurs. La "distance" est ici représentée par le nombre de hops (nombre de segments inter-routeurs). Etablir les 5 tables de routage selon le modèle ci-dessous :

dest indique le routeur destinataire ; vers indique le prochain routeur à atteindre ; dist indique le nombre de hops nécessaires pour arriver à destination.

Exercice 4

Pouvez-vous imaginer l 'affichage à l'écran du fichier HTML suivant :

<html><head><meta http-equiv="Content-Language" content="fr"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>Bonjour les petits enfants</title></head><body bgcolor="#FFFFCC"><h1><font face="Comic Sans MS">Bonjour les petits enfants</font></h1><center><table border="0" cellpadding="10" cellspacing="0" width="77%"><tr><td width="50%"><font size="2" face="Comic Sans MS">Tous au stade pour voir se dérouler le match de football entre</font><ul><li><font size="2" face="Comic Sans MS">Trifouillis les Oies </font></li><li><font size="2" face="Comic Sans MS">Perpettes les Oisettes</font></li></ul></td><td width="50%"><p align="center"><font size="2" face="Comic Sans MS"><img border="0" src="images_ch1/joueur.gif" width="156" height="157"></font></td></tr></table></center><p align="center"><font face="Comic Sans MS" size="4">Bon match.</font></p></body></html>

Exercice 5

Ecrire un fichier XML permettant de répertorier les données du tableau suivant :

Dans "Libération" la qualité de l'air est donnée par un tableau :

Exprimer ce tableau par un fichier XML.

Solution de l'exercice 1

machine 1 : 193.34.67.89 193 en binaire s'écrit 11000001 et commence donc par "110" : classe Cmachine 2 : 148.10.20.30 148 en binaire s'écrit 10010100 et commence par ""10" : classe Bmachine 3 : 72.20.30.40 72 en binaire s'écrit 01001000 et commence par "0" : classe Amachine 4 : 192.256.123.321 256 ne peut tenir sur un octet (maximum 255) : adresse erronée


Il faut 5 sous-réseaux, donc il faudra prendre les 3 bits de poids fort de l'adresse machine. Le masque de sous-réseau sera donc 255.255.255.224. Bien entendu cela donne 6 sous-réseaux mais on n'en utilisera que les 5 premiers par exemple. On aura donc les adresses suivantes des sous-réseaux : 192.56.57.32, 192.56.57.64, 192.56.57.96, 192.56.57.128, 192.56.57.160 ce qui conduit à la proposition suivante :


tables de routage :



<?xml version="1.0" encoding="ISO-8859-1" ?><meteo> <ville>Paris <today>Bonne</today> <yesterday>Bonne</yesterday> </ville> <ville>Lyon <today>Moyenne</today> <yesterday>Bonne</yesterday> </ville> <ville>Marseille <today>Bonne</today> <yesterday>Bonne</yesterday>

</ville></meteo>

ou plus élégamment avec des attributs :

<?xml version="1.0" encoding="ISO-8859-1" ?><meteo> <ville nom="Paris" today="Bonne" yesterday="Bonne" /> <ville nom="Lyon" today="Moyenne" yesterday="Bonne" /> <ville nom="Marseille" today="Bonne" yesterday="Bonne" /></meteo>


Exercices

Exercice 1

Quelle est la classe de réseau des machines d'adresse suivantes :

machine 1 : 193.34.67.89 machine 2 : 122.10.20.30 machine 3 : 10.20.30.40 machine 4 : 192.256.123.321

Exercice 2

On s'intéresse à un réseau d'entreprise sur lequel on souhaite faire un plan d'adressage. Le réseau d'entreprise a obtenu l'adresse réseau 192.56.57.0. Le réseau est structuré en 5 sous-réseaux locaux de type Ethernet :

● un réseau de 3 serveurs● un réseau de 4 PC● un réseau de 3 PC● un réseau de 3 Macintosh● un réseau de communication entre les routeurs

1) Quelle est la classe du réseau de l'entreprise (A, B ou C) ?

2) Proposer un plan d'adressage des machines du réseau de l'entreprise

Exercice 3

On considère un réseau de 5 routeurs A, B, C, D, E. On désire constituer les tables de routage de ces routeurs. La "distance" est ici représentée par le nombre de hops (nombre de segments inter-routeurs). Etablir les 5 tables de routage selon le modèle ci-dessous :

dest indique le routeur destinataire ; vers indique le prochain routeur à atteindre ; dist indique le nombre de hops nécessaires pour arriver à destination.

Exercice 4

Pouvez-vous imaginer l 'affichage à l'écran du fichier HTML suivant :

<html> <head> <meta http-equiv="Content-Language" content="fr"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Bonjour les petits enfants</title> </head> <body bgcolor="#FFFFCC"> <h1><font face="Comic Sans MS">Bonjour les petits enfants</font></h1> <center> <table border="0" cellpadding="10" cellspacing="0" width="77%"> <tr> <td width="50%"><font size="2" face="Comic Sans MS">Tous au stade pour voir se dérouler le match de football entre </font> <ul> <li><font size="2" face="Comic Sans MS">Trifouillis les Oies </font></li> <li><font size="2" face="Comic Sans MS">Perpettes les Oisettes</font></li> </ul> </td> <td width="50%"> <p align="center"><font size="2" face="Comic Sans MS"> <img border="0" src="images_ch1/joueur.gif" width="156" height="157"></font> </td> </tr> </table> </center> <p align="center"><font face="Comic Sans MS" size="4">Bon match.</font></p> </body> </html>

Exercice 5

Ecrire un fichier XML permettant de répertorier les données du tableau suivant :

Dans "Libération" la qualité de l'air est donnée par un tableau :

Exprimer ce tableau par un fichier XML.


machine 1 : 193.34.67.89 193 en binaire s'écrit 11000001 et commence donc par "110" : classe C machine 2 : 148.10.20.30 148 en binaire s'écrit 10010100 et commence par ""10" : classe B machine 3 : 72.20.30.40 72 en binaire s'écrit 01001000 et commence par "0" : classe A machine 4 : 192.256.123.321 256 ne peut tenir sur un octet (maximum 255) : adresse erronée


Il faut 5 sous-réseaux, donc il faudra prendre les 3 bits de poids fort de l'adresse machine. Le masque de sous-réseau sera donc 255.255.255.224. Bien entendu cela donne 6 sous-réseaux mais on n'en utilisera que les 5 premiers par exemple. On aura donc les adresses suivantes des sous-réseaux : 192.56.57.32, 192.56.57.64, 192.56.57.96, 192.56.57.128, 192.56.57.160 ce qui conduit à la proposition suivante :


tables de routage :



<?xml version="1.0" encoding="ISO-8859-1" ?> <meteo> <ville>Paris <today>Bonne</today> <yesterday>Bonne</yesterday> </ville> <ville>Lyon <today>Moyenne</today> <yesterday>Bonne</yesterday> </ville> <ville>Marseille <today>Bonne</today>

<yesterday>Bonne</yesterday> </ville> </meteo>

ou plus élégamment avec des attributs :

<?xml version="1.0" encoding="ISO-8859-1" ?> <meteo> <ville nom="Paris" today="Bonne" yesterday="Bonne" /> <ville nom="Lyon" today="Moyenne" yesterday="Bonne" /> <ville nom="Marseille" today="Bonne" yesterday="Bonne" /> </meteo>


QCM

Une bonne réponse apporte 1 point ; une mauvaise réponse enlève 1 point

Question 1 : Internet est

●

●

●

●

●

Question 2 : Quel service, parmi les suivants, n'est pas un service Internet

●

●

●

●

●

Question 3 : Quelle adresse, parmi les suivantes est de classe A

●

●

●

●

●

Question 4 : Le protocole IP est un protocole

●

●

●

●

●

Question 5 : Les paquets IP d'un même message

●

●

●

●

●

Question 6 : TCP est un protocole

●

●

●

●

●

Question 7 : un routeur

●

●

●

●

●

Question 8 : HTTP est

●

●

●

●

●

Question 9 : HTML

●

●

●

●

●

Question 10 : XML

●

●

●

●

●

et voici le résultat :


Bibliographie

K.JAMSA,K.COPE Internet Programming Jamsa

C. SERVIN Telecoms 1, De la transmission à l'architecture de réseaux

Dunod Informatiques

W. STALLINGS Data and Computer Communications Prentice Hall

P. ROLLIN, G. MARTINEAU, L. TOUTAIN, A. LEROY

Les Réseaux, principes fondamentaux Hermes

A. TANENBAUM Réseaux InterEditions

N.J. YEAGER, R.E. McGRATH

Technologie des serveurs Web


C. FRANKLIN Programmation Internet en Visual Basic


CNRS & Universités L'Internet professionnel CNRS Editions

HOLZER, PFLUGMANN TCP/IP MicroApplications

CIDR (Classless InterDomain Routing)

La méthode CIDR consiste à proposer plusieurs réseaux de classe C pour constituer un réseau logique plutôt que d'attribuer une adresse de réseau de classe B (dont toutes les adresses ne seraient pas utilisées).

En premier lieu, une répartition géographique est proposée pour les attributions des adresses de classe C :

plage d'adresses région

194.0.0.0 à 195.255.255.255 Europe

198.0.0.0 à 199.255.255.255 Amérique du Nord

200.0.0.0 à 201.255.255.255

Amérique du Sud et Centrale

202.0.0.0 à 203.255.255.255 Asie et Pacifique

Cette répartition permet déjà un tri des datagrammes par région et évite des transferts inutiles.

Supposons maintenant que les universités de Montpellier 2, de Lyon 1 et de Grenoble 3 demandent une adresse réseau pour respectivement 2048 adresses, 1024 adresses et 4096 adresses. Au lieu de leur affecter, à chacune, un réseau de classe B (qui correspondrait à un gaspillage certain d'adresses), on peut affecter à chaque établissement plusieurs réseaux de classe C. Ainsi on pourra proposer les affectations d'adresses suivantes :

université plage d'adresses

Montpellier 2

195.78.0.0 à 195.78.7.255

Lyon 1 195.78.8.0 à 195.78.11.255

Grenoble 3 195.78.16.0 à 195.78.31.255

Les datagrammes pour ces universités sont dirigées vers le routeur européen principal. Par exemple, soit un datagramme arrivant avec l'adresse de destination 195.78.28.92. Comment savoir pour qui est destiné ce datagramme ?

La technique des masques est employée conjointement à celle des adresses de base (la plus basse des adresses affectées) :

université masque adresse de base

Montpellier 2 255.255.248.0 195.78.0.0

Lyon 1 255.255.252.0 195.78.8.0

Grenoble 3 255.255.224.0 195.78.16.0

On applique successivement (en fait les techniques de recherche utilisent des méthodes d'exploration des tables plus sophistiquées) les masque à l'adresse destination du datagramme :

11111111.11111111.11111000.00000000 & 11000011.01001110.00011100.01011100 = 11000011.01001110.00011000.00000000 =195.78.24.0 11111111.11111111.11111100.00000000 & 11000011.01001110.00011100.01011100 = 11000011.01001110.00011100.00000000 = 195.78.28.0 11111111.11111111.11110000.00000000 & 11000011.01001110.00011100.01011100 = 11000011.01001110.00010000.00000000 = 195.78.16.0

On constate que le datagramme est destiné à l'université Grenoble 3.

Eléments de HTMLGérard-Michel Cochard ; octobre 1999 revu en septembre 2006

téléchargement du document

WWW et HTTP Qu'est-ce que HTML ? Qu'est-ce qu'un document HTML ? Physionomie d'une page HTML Balises usuelles Listes Tableaux Images Multifenêtrage Hyperliens Formulaires CGI, Perl, java, javascript

WWW et HTTP

Le grand essor d�Internet est dû, à partir de 1990, à la mise en �uvre du protocole HTTP (HyperText Transfer Protocol, 1989, T. Berners-Lee), plus connu sous le nom de Web (toile d�araignée) ou de WWW (World Wide Web : toile d�araignée à l�échelle planétaire). Ce protocole, basé sur le concept client-serveur, permet à un poste client de demander l�envoi, par un serveur WWW d�un document multimédia décrit par un langage spécifique HTML (HyperText Markup Language), lui-même issu d�un langage plus complet appelé SGML (Standard Generalized Markup Language).

Sur le poste client, un logiciel appelé navigateur (ou explorateur, ou browseur, ou bien d�autres noms plus ou moins poétiques comme "brouteur",❭) interprète le fichier HTML reçu du serveur et en assure la visualisation (avec la possibilité d�entendre les sons grâce aux possibilités multimédias des ordinateurs personnels actuels). Les principaux navigateurs du moment sont Netscape 6 et Internet Explorer 6 (de Microsoft) :

La demande de document s�effectue très simplement par envoi de l�adresse de celui-ci (URL) ; cette demande s�adresse à un serveur Web équipé d�un logiciel httpd (http daemon), qui n�est autre qu�un logiciel serveur de documents HTML. Les logiciels httpd les plus connus sont donnés dans la figure ci-dessous :

Le protocole HTTP a été décrit au chapitre précédent. On trouvera aussi des renseignements plus complets aux références suivantes disponibles sur le Web évidemment : http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/HTTP/Servers/ http://webcompare.iworld.com/

Qu�est-ce que HTML ?

HTML = HyperText Markup Language, langage de description de document multimédia utilisé par le Web. HTML utilise des balises ou tags pour indiquer la façon dont le document doit être affiché. Les balises sont délimitées par les signes �<� et �>�

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/HTTP/Servers/

http://webcompare.iworld.com/

Qu�est-ce qu�un document HTML ?

Un document HTML est un document envoyé généralement par un serveur WWW vers un poste client équipé d�un navigateur ou browser ( Netscape, Internet Explorer, Mosaic, Lynx,...) permettant de visualiser le document

Un document HTML contient des informations multimédias : textes, images fixes, sons, vidéos. Il est, en fait, un fichier spécial dont le suffixe est .htm ou .html

Physionomie d�une page HTML

Une page HTML possède la structure de base suivante :

exemple :

la page décrite en HTML par : <HTML> <HEAD> <TITLE> Salutation </TITLE> </HEAD> <BODY> bonjour les petits enfants ! </BODY> </HTML>

correspond au résultat suivant :

Balises usuelles

Styles physiques de texte

<B>bonjour</B> gras bonjour<I>bonjour</I> italique bonjour<U>bonjour</U> souligné bonjour<S>bonjour</S> barré bonjourbon<SUB>jour</SUB> indice bonjour

bon<SUP>jour</SUP> exposant bonjour

Styles logiques de texte

<H1>bonjour</H1> titre taille 1 bonjour<H2>bonjour</H2> titre taille 2 bonjour<H3>bonjour</H3> titre taille 3 bonjour<H4>bonjour</H4> titre taille 4 bonjour<H5>bonjour</H5> titre taille 5 bonjour<H6>bonjour</H6> titre taille 6 bonjour

bonjour<EM>bonsoir</EM> mise en valeur bonjourbonsoir

<BR> saut de ligne<P> paragraphe

<PRE>......</PRE> texte préformaté

Alignement de texte

Il est défini par un attribut ALIGN = valeur où valeur peut être RIGHT, CENTER, LEFT. L'attribut ALIGN se place dans un tag <P> ou <Hx> ou <DIV> ou <HR>

exemple : <P ALIGN=CENTER>

Taille des caractères

Elle est définie par la balise BASEFONT :

<BASEFONT SIZE = x> où x = 1, 2, 3, 4, 5, 6, 7

Tracé d�une ligne horizontale

Il est défini par la simple balise <HR> qui peut posséder les attributs suivants :

WIDTH : longueur de la ligne en % SIZE : épaisseur en pixels ALIGN = x

Couleur du texte

Elle est définie par l'attribut COLOR de la balise <FONT> ; les valeurs de COLOR sont : aqua, black, blue, fuchsy, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

Couleur du fond

Elle est définie par l'attribut BGCOLOR dans le tag <BODY> pour la couleur de fond (qui est donc constante dans un même document).

Couleur des liens

Les attributs pour les liens dans le tag <BODY> sont

LINK : liens non visités VLINK : liens visités ALINK : liens actifs

Un exemple

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <HTML> <HEAD> <TITLE>Voici un exemple de page HTML</TITLE> </HEAD> <BODY BGCOLOR="yellow"> <H2 ALIGN ="center">Voici un exemple de page HTML</H2> <HR SIZE="10" WIDTH="50%> <P ALIGN="center"><B>tagada tsoin tsoin</B> <I>tagada tsoin tsoin</I> <U>tagada tsoin tsoin</U> <S>tagada tsoin tsoin</S></P> <P>Ce texte est aligné de diverses façons :</P> <P><EM>comme ceci </EM></P> <P ALIGN="center"><EM>comme cela </EM></P> <P ALIGN="right"><EM>ou encore ainsi</EM></P> <P ALIGN="left">S'il est formaté, il peut aussi se disposer ainsi :</P> <PRE>comme ceci comme cela ou encore ainsi</PRE> </BODY> </HTML>

donne le résultat suivant :

Listes

Listes numérotées

Ce sont des listes d�informations présentées suivant un ordre défini par un numéro

balises pour la liste numérotée : <OL>........</OL> balises pour le titre de la liste : <LH>.......</LH> balises pour les items de la liste : <LI>

exemple :

<OL> <B><LH>Opérations à effectuer : </LH></B> <LI>Prendre son couteau <LI>Prendre sa fourchette <LI>Couper un morceau de steack <LI>Le manger <LI>Boire un peu de vin </OL>

correspond à

Opérations à effectuer :

1. Prendre son couteau2. Prendre sa fourchette3. Couper un morceau de steack4. Le manger5. Boire un peu de vin

Listes non numérotées

Ce sont des listes analogues aux précédentes, mais où des puces remplacent les numéros.

balises à utiliser : <UL>.......</UL> attribut de définition de puce : TYPE = SQUARE|CIRCLE|DISC

exemple :

<UL> <B><LH>Opérations à effectuer : </LH></B> <LI TYPE=SQUARE> Prendre son couteau </LI> <LI> Prendre sa fourchette </LI> <LI TYPE=SQUARE> Couper un morceau de steack </LI> <LI TYPE=SQUARE>Le manger </LI> <LI TYPE=CIRCLE>Boire un peu de vin </LI> </UL>

correspond à


■ Prendre son couteau■ Prendre sa fourchette■ Couper un morceau de steack■ Le manger�❍ Boire un peu de vin

Listes de définition

Ce sont des listes permettant de faire des glossaires

balises pour une liste de définition : <DL>.......</DL> balises pour le sujet : <DT>........</DT> balises pour la définition : <DD>.......</DD>

exemple :

<B>Dictionnaire</B> <DL> <DT>alpha</DT> <DD>première lettre de l'alphabet grec</DD> <DT>beta</DT> <DD>deuxième lettre de l'alphabet grec</DD> <DT>gamma</DT> <DD>troisième lettre de l'alphabet grec</DD> </DL>

correspond à

Dictionnaire

alpha

première lettre de l�alphabet grecbeta

deuxième lettre de l�alphabet grecgamma

troisième lettre de l�alphabet grec

Tableaux

Définition d�un tableau

Un tableau estconstitué de lignes et de colonnes. Les balises qui délimitent un tableau sont :

<TABLE>.........</TABLE> attribut : BORDER = 1|2|3..... attribut : ALIGN = BLEEDLEFT|BLEEDRIGHT|CENTER|LEFT|RIGHT|JUSTIFY balises pour le titre : <CAPTION>.......</CAPTION> avec l'attribut : ALIGN = TOP|BOTTOM balises pour chaque ligne : <TR>........</TR> avec l'attribut : ALIGN = CHAR|CENTER|DECIMAL|LEFT|RIGHT|JUSTIFY balises pour les cases de titres de lignes ou de colonnes : <TH>........</TH> avec l'attribut : ALIGN = CHAR|CENTER|DECIMAL|LEFT|RIGHT|JUSTIFY et l'attribut : VALIGN = TOP|MIDDLE|BOTTOM|BASELINE balises pour les données : <TD>........</TD> avec l'attribut : ALIGN = CHAR|CENTER|DECIMAL|LEFT|RIGHT|JUSTIFY et l'attribut : VALIGN = TOP|MIDDLE|BOTTOM|BASELINE

exemple :

<TABLE BORDER =2 bgcolor="silver"> <CAPTION ALIGN = BOTTOM> <B><I>Internet casse les prix du téléphone</I></B></CAPTION> <CAPTION ALIGN = TOP><U><B>L'actualité</B></U></CAPTION> <P> <TR ALIGN=CENTER><TH>Destination</TH> <TH>1 min par France Telecom</TH> <TH>1 min par Internet</TH> <TH>Economie réalisée</TH></TR> <TR ALIGN=CENTER><TH>Paris-New York</TH> <TD>2,25F</TD><TD>0,85F</TD><TD>62%</TD></TR> <TR ALIGN=CENTER><TH>Paris-Tokyo</TH> <TD>5,90F</TD><TD>1,80F</TD><TD>69%</TD></TR> </TABLE>

correspond au tableau suivant :

L'actualité

Internet casse les prix du téléphone

Destination 1 min par France Telecom 1 min par Internet Economie réaliséeParis-New York 2,25F 0,85F 62%

Paris-Tokyo 5,90F 1,80F 69%

Cellspanning, Cellspacing, Cellpadding

Cellspanning effectue la fusion de plusieurs cellules et utilise les attributs : COLSPAN et ROWSPAN Cellspacing gère l'espacement des cellules et utilise l'attribut : CELLSPACING = 0|1|2|3..... Cellpadding gère l'espacement du texte d�une cellule par rapport au bord et utilise l'attribut : CELLPADDING = 0|1|2|3.....

exemple 1 :

<TABLE BORDER=1 ALIGN=CENTER> <CAPTION ALIGN = TOP>Cellspanning</CAPTION>

<TR ALIGN = center > <TH>....</TH><TH>colonne 1</TH><TH>colonne 2</TH> <TH>colonne 3</TH></TR> <TR ALIGN = Center ><TH >ligne 1</TH> <TD COLSPAN = 2>11 et 12</TD><TD>13</TD></TR> <TR ALIGN = Center ><TH>ligne 2</TH><TD>21</TD> <TD COLSPAN = 2 ROWSPAN=2>22 et 23 et 32 et 33</TD> </TR> <TR ALIGN = Center ><TH>ligne 3</TH><TD>31</TD></TR> </TABLE>

correspond à :

Cellspanning

.... colonne 1 colonne 2 colonne 3ligne 1 11 et 12 13ligne 2 21

22 et 23 et 32 et 33ligne 3 31

exemple 2 2 : Cellspanning, Cellpadding

Le code HTML suivant

<H4><I>Cellspacing et Cellpadding</I></H4> <P><TABLE ALIGN=center BORDER = 1 CELLSPACING = 10 CELLPADDING = 10 > <TR > <TD >Cellspacing<BR>=10</TD> <TD>Cellpadding<BR>=10</TD> <TD>Border<BR>=1</TD> </TR> </TABLE> <TABLE ALIGN =center BORDER = 2 CELLSPACING = 10 CELLPADDING =0> <TR> <TD>Cellspacing<BR>=10</TD> <TD>Cellpadding<BR>=0</TD> <TD>Border<BR>=2</TD> </TR> </TABLE> <BR><BR><BR><BR> <TABLE ALIGN=center BORDER = 3 CELLSPACING = 0 CELLPADDING = 10> <TR> <TD >Cellspacing<BR>=0</TD> <TD>Cellpadding<BR>=10</TD> <TD>Border<BR>=3</TD> </TR> </TABLE> <TABLE ALIGN=center BORDER = 4 CELLSPACING = 0 CELLPADDING = 0> <TR><TD>Cellspacing<BR>=0</TD> <TD>Cellpadding<BR>=0</TD> <TD>Border<BR>=4</TD> </TR> </TABLE>

correspond au résultat :

Cellspacing et Cellpadding

Cellspacing =10

Cellpadding =10

Border =1

Cellspacing =10

Cellpadding =0

Border =2

Cellspacing =0

Cellpadding =10

Border =3

Cellspacing =0

Cellpadding =0

Border =4

Images

Formats graphiques

2 formats graphiques seulement sont acceptés par l�ensemble des navigateurs :

● GIF : Graphics Interchange Format d�origine Compuserve 256 couleurs max image compressée sans perte

● JPEG : Joint Photographic Experts Group 16,7 millions de couleurs max image compressée avec perte

D�autres formats nécessitent des extensions des navigateurs appelés plugs-in : DIB, TIFF, PCX, WMF, BMP, TGA.

Images progressives, images transparentes

● format GIF entrelacé : affichage de 1 ligne sur x : affichage progressif de l�image : ergonomie accentuée.

● avec GIF on peut définir la couleur de l�image comme transparente d�où la possibilité d�effets spéciaux.

La balise IMG

L�insertion d�une image est annoncée par le tag <IMG> avec un certain nombre d�attributs :

● attribut SRC : indique la source de l�image. ex : SRC = C:\truc\machin\image4.gif● attribut WIDTH : indique la largeur de l�image● attribut HEIGHT : indique la hauteur de l�image. ex : WIDTH = 20 HEIGHT = 50● attribut ALIGN : valeurs TOP (en haut), MIDDLE(au milieu de la ligne), BOTTOM (en bas).● attribut ALT : texte alternatif pour les navigateurs qui ne peuvent afficher l�image

● attribut BORDER : largeur de la bordure de l�image● attributs VSPACE et HSPACE : création d�espaces vides autour de l�image

exemple :

<H3 align="center"><B>Quelques images</B></H3> <IMG SRC= "ampoule.gif" BORDER="1" HSPACE="20" VSPACE="20" WIDTH="70" HEIGHT="66"> < IMG SRC ="ampoule.gif" BORDER ="1 " VSPACE= "20" WIDTH ="140" HEIGHT ="66"> <BR> < IMG SRC ="ampoule.gif" BORDER ="1" HSPACE="20" WIDTH="70" HEIGHT ="132"> < IMG SRC ="ampoule.gif" BORDER ="1" WIDTH ="140" HEIGHT ="132">

correspond à

Quelques images

Multifenêtrage

La technique des frames

Les frames permettent d�afficher plusieurs documents HTML à l�intérieur de visionneuses prévues dans la fenêtre d�un navigateur :

Les balises FRAMESET et FRAME

définition du nombre et de la taille des frames : <FRAMESET>........</FRAMESET> attributs COLS et ROWS avec valeur en % ou en pixels

ex : <FRAMESET COLS=«100,25%,*» crée 3 frames dans le sens de la largeur, la première de 100 pixels, la deuxième du quart de la largeur totale, la troisième de ce qui reste.

définition du document HTML à afficher dans la frame : <FRAME> attributs : NAME qui indique le nom de la frame SRC qui indique l�adresse du document HTML à afficher

exemple :

<HTML> <HEAD> <TITLE>essai8</TITLE> </HEAD> <FRAMESET rows="25%,50%,25%"> <FRAME src="cadre1.htm"> <FRAMESET cols="25%,75%"> <FRAME src="cadre2.htm"> <FRAMESET rows="50%,50%" cols="50%,50%"> <FRAME src="cadre3.htm"> <FRAME src="cadre4.htm"> <FRAME src="cadre5.htm"> <FRAME src="cadre6.htm"> </FRAMESET> </FRAMESET> <FRAME src="cadre7.htm"> </FRAMESET> </HTML>

Méthode pour imbriquer des frames

La numérotation des frames s�opère de bas en haut et de gauche à droite :cette numérotation résulte du PTT (Pre-order Tree Traversal), sens de parcours d�un arbre permettant de numéroter les feuilles.

Autres balises et attributs

● dans la balise <FRAME> :

attribut SCROLLING =YES|NO|AUTO ajout/non ajout d� ascenseurs attribut NORESIZE blocage du redimensionnement des frames par l�utilisateur attributs MARGINHEIGHT et MARGINWIDTH définition d�espacements (en pixels) par rapport au bord de la frame

● dans les balises <FRAME> ou <FRAMESET> :

attribut FRAMEBORDER=YES|NO visibilité/non visibilité des bords de la frame

Hyperliens

Hypertexte, hypermedia

Avec HTML on peut créer des liens entre documents WWW ou objets de documents WWW. Ces liens sont appelés Hyperliens. L�hypertexte en est un exemple; c�est un texte qui est sensible au clic de la souris et qui provoque une action sous ce clic (en général, le chargement d�un autre document WWW). Comme on peut aussi cliquer sur une image pour provoquer une action, on peut alors parler d�hypermédia....

Ancres

Une ancre est l�indication d�une cible par une balise <A>. La cible peut être :

a) une étiquette dans un document local ou distant définition de l�étiquette par un nom: <A NAME=«truc»>.....</A>

b) un document local ou distant le document est défini par son adresse URL, par exemple http://www.dep.u-picardie.fr/

L�hyperlien est défini dans une balise <A> par l�attribut HREF :

http://www.u-picardie.fr/

<A HREF=«#truc»>.Aller à truc </A> : lien local vers une étiquette «truc» <A HREF=«http://www.u-picardie.fr»>.univ. de picardie</A> : lien vers un serveur WWW (page d�accueil) <A HREF=«http://www.nando.net/toys/cyrano.html>Ecrivez des lettres d�amour avec Internet</A> : lien vers un document html d�un serveur WWW <A HREF=«http://www.cenaath.cena.dgac.fr/themes/cuisine/plat/#veau»>Recettes de cuisine</A> : lien vers une étiquette d�un document d�un serveur WWW

exemple :

<HTML> <HEAD> <TITLE>exemples de liens</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> Ceci est un exemple d'utilisation de liens<BR> <A name="Table">Sommaire</A> <UL> <LI><A href="#chapitre1">Chapitre 1</A> </LI> <LI><A href="#chapitre2">Chapitre 2</A> </LI> <LI><A href="#chapitre3">Chapitre 3</A> </LI> <LI><A href="#conclusion">Conclusion</A></LI> </UL> <P>blablablablala <P>blablablabla <H3><A name="chapitre1">Chapitre 1</A></H3> <P>blablabla <P>blablabla <P>blablabla <P><A href="#Table">Retour au sommaire</A><BR> <H3><A name="chapitre2">Chapitre 2</A> </H3> <P>blablabla <P>blablabla <P>blablabla <P><A href="#Table">Retour au sommaire</A> <BR> <H3><A name="chapitre3">Chapitre 3</A> </H3> <P>blablabla <P>blablabla <P>blablabla <P><A href="#Table">Retour au sommaire</A><BR> <H3><A name="conclusion">Conclusion</A> </H3> <P>blablabla <P>blablabla <P>blablabla <P><A href="#Table">Retour au sommaire</A><BR> <P><A href="http://www.u-picardie.fr/">Cliquez ici pour visiter notre site</A> <P><A href="mailto:[email protected]">Ecrivez-moi</A> </BODY> </HTML>

Images réactives

On peut remplacer un «hypermot» par une «hyperimage» ou image réactive. Une image réactive se définit par la balise <MAP> qui possède l� attribut NAME nom de l�image réactive et par la balise <AREA> qui possède les attributs : SHAPE forme géométrique de l�image réactive (circle, rect, polygon), COORDS coordonnées des points de contrôle de l�image réactive, HREF adresse de destination.

exemple : le code ci-dessous

<MAP NAME="ImageReac0"> <AREA SHAPE="POLYGON" COORDS="93, 89, 0, 0, 186, 0" HREF="#chapitre1"> <AREA SHAPE="POLYGON" COORDS="0, 0, 0, 178, 93, 89" HREF="#chapitre2"> <AREA SHAPE="POLYGON" COORDS="0, 178, 186, 178, 93, 89" HREF="#chapitre3"> <AREA SHAPE="POLYGON" COORDS="186, 0, 93, 89, 186, 178" HREF="#conclusion"> </MAP> <img src="carre.gif" border="0" width="186" height="178" usemap="#ImageReac0">

correspond à la figure réactive suivante (4 zônes sensibles)

Formulaires

Principe général

Les formulaires sont urilisés pour échanger des données entre le poste client et le serveur. Cet échange de données fait appel à des programmes spéciaux s�exécutant sur le serveur. Dans la méthode standard, ils sont appelés scripts CGI (CGI = Common Gateway Interface. Il existe d'autres méthodes, mais pour expliquer les formulaires, on se bornera à CGI.

1) L�utilisateur remplit le formulaire et le valide ce qui a pour effet d�envoyer des données vers le script CGI situé sur le serveur

2) Le script CGI sur le serveur accepte les données comme paramètres et effectue un traitement produisant éventuellement des résultats

3) Les résultats sont transmis (éventuellement) au poste client. Ils sont affichés par le navigateur

Envoi de paramètres

Un formulaire est délimité par les balises <FORM> et </FORM>. Les champs de saisie se trouvent entre ces deux balises. Les données saisies sont transmises selon deux méthodes indiquées par l�attribut METHOD au script CGI (sur le serveur)

a) METHOD = GET envoi des données saisies (paramètres) à l�adresse du script CGI : exemple :

b) METHOD = POST permet l�envoi de listes de données plus longues (les paramètres sont envoyés indépendamment de l�adresse URL du script).

Structure d�un formulaire

L�adresse du script CGI est défini par l�attribut ACTION ; exemple : ACTION=«http://www.truc.fr/cgi-bin/script1». Les zônes de saisie sont définies par la balise <INPUT> qui possède les attributs suivants :

NAME : nom du champ de saisie ; TYPE : type de champ ; text : texte ; password : mot de passe checkbox : boite à cocher radio : boite d�option SIZE : taille du champ MAXLENGHT : nombre maximum de caractères à saisir

http://www.truc.fr/cgi-bin/script1


Le déclenchement de l�envoi des paramètres peut s�effectuer avec un bouton «Envoi» :

<INPUT TYPE=SUBMIT VALUE=«Envoyer»>

La remise à leur valeur initiale des paramètres peut également s�effectuer ave un bouton «Reset»

<INPUT TYPE=RESET VALUE=«Rétablir»>

exemple :

<FORM METHOD=GET ACTION=«http://www.truc.fr/cgi-bin/inscription»> Merci de bien vouloir indiquer votre nom : <INPUT NAME=«Nom» TYPE=Text SIZE=32 MAXLENGTH=32> <P><INPUT TYPE=SUBMIT VALUE=«Envoyer»> <P><INPUT TYPE=RESET VALUE=«Rétablir»> </FORM>

correspond au formulaire :

Différents types de formulaires

● champ de saisie sur une ligne

<INPUT NAME=«Truc» TYPE=Text SIZE=20

MAXLENGTH=12>

● saisie d�un mot de passe

<INPUT NAME=«Truc» TYPE=Password SIZE=20

MAXLENGTH=12>

● saisie sur plusieurs lignes

<TEXTAREA NAME=«Baratin» ROWS=3 COLS=25> Ecrire ici </TEXTAREA>

● cases à cocher

<INPUT NAME=«pain» TYPE=CHECKBOX> pain <INPUT NAME=«vin» TYPE=CHECKBOX CHECKED> vin <INPUT NAME=«potage» TYPE=CHECKBOX> potage <INPUT NAME=«salade» TYPE=CHECKBOX> salade

● cases à option ou boutons radio (sélection d�un seul élément)

<INPUT NAME=«X» TYPE=RADIO VALUE=«4»>brûlant <INPUT NAME=«X» TYPE=RADIO VALUE=«3»>chaud <INPUT NAME=«X» TYPE=RADIO VALUE=«2»>tiède <INPUT NAME=«X» TYPE=RADIO CHECKED VALUE=«1»>froid

● menu déroulant (sélection d�un item ou de plusieurs items)

<SELECT NAME=«légume» SIZE=1 MULTIPLE> <OPTION VALUE=«Salsifi» SELECTED>Salsifi <OPTION VALUE=«Pomme de terre»>Pomme de terre <OPTION VALUE=«Carotte»>Carotte </SELECT>

SIZE indique le nombre d�options visibles MULTIPLE indique une sélection multiple ; pour une sélection unique, cet attribut est omis.

CGI, Perl, java, javascript

L'interactivité, toujours recherchée, nécessite de pouvoir donner à l'utilisateur la possibilité d'effectuer des traitements (exécuter des programmes). Diverses techniques sont employés dans ce but :

● la plus ancienne est CGI (Common Gateway Interface) qui est un protocole permettant d'effectuer un programme qui se trouve au niveau du serveur. Ces programmes peuvent être, en principe, écrits dans un langage de programmation quelconque ; un langage très employé pour l'écriture de "scripts CGI" est Perl. CGI a été (et est encore) utilisé pour des serveurs sur plate-forme UNIX ; il existe aussi des possibilités pour les serveurs sous Windows : WinCGI. Toutefois Java est actuellement le langage le plus employé.

● une autre façon de procéder est de lier un document à des programmes qui peuvent être téléchargés de manière transparente pour l'utilisateur. Dans ce cas, l'exécution s'opère au niveau du poste client. Les applets java appartiennent à cette catégorie. Il s'agit de programmes écrits en java et compilés qui sont liés à des documents HTML.

● une version du procédé ci-dessus est également fournie avec javascript qui est un langage interprété, plus simple que java ; les scripts écrits en javascript apparaissent en clair dans le document HTML et font partie inhérente du document.

Eléments de HTMLGérard-Michel Cochard ; octobre 1999revu en septembre 2006

WWW et HTTPQu'est-ce que HTML ?Qu'est-ce qu'un document HTML ?Physionomie d'une page HTMLBalises usuellesListesTableauxImagesMultifenêtrageHyperliensFormulairesCGI, Perl, java, javascript

WWW et HTTP

Le grand essor d’Internet est dû, à partir de 1990, à la mise en œuvre du protocole HTTP (HyperText Transfer Protocol, 1989, T. Berners-Lee), plus connu sous le nom de Web (toile d’araignée) ou de WWW (World Wide Web : toile d’araignée à l’échelle planétaire). Ce protocole, basé sur le concept client-serveur, permet à un poste client de demander l’envoi, par un serveur WWW d’un document multimédia décrit par un langage spécifique HTML (HyperText Markup Language), lui-même issu d’un langage plus complet appelé SGML (Standard Generalized Markup Language).

Sur le poste client, un logiciel appelé navigateur (ou explorateur, ou browseur, ou bien d’autres noms plus ou moins poétiques comme "brouteur",…) interprète le fichier HTML reçu du serveur et en assure la visualisation (avec la possibilité d’entendre les sons grâce aux possibilités multimédias des ordinateurs personnels actuels). Les principaux navigateurs du moment sont Netscape 6 et Internet Explorer 6 (de Microsoft) :

La demande de document s’effectue très simplement par envoi de l’adresse de celui-ci (URL) ; cette demande s’adresse à un serveur Web équipé d’un logiciel httpd (http daemon), qui n’est autre qu’un logiciel serveur de documents HTML. Les logiciels httpd les plus connus sont donnés dans la figure ci-dessous :

Le protocole HTTP a été décrit au chapitre précédent. On trouvera aussi des renseignements plus complets aux références suivantes disponibles sur le Web évidemment : http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/HTTP/Servers/ http://webcompare.iworld.com/

Qu’est-ce que HTML ?

HTML = HyperText Markup Language, langage de description de document multimédia utilisé par le Web. HTML utilise des balises ou tags pour indiquer la façon dont le document doit être affiché. Les balises sont délimitées par les signes ‘<‘ et ‘>‘

Qu’est-ce qu’un document HTML ?

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/HTTP/Servers/

http://webcompare.iworld.com/

Un document HTML est un document envoyé généralement par un serveur WWW vers un poste client équipé d’un navigateur ou browser ( Netscape, Internet Explorer, Mosaic, Lynx,...) permettant de visualiser le document

Un document HTML contient des informations multimédias : textes, images fixes, sons, vidéos. Il est, en fait, un fichier spécial dont le suffixe est .htm ou .html

Physionomie d’une page HTML

Une page HTML possède la structure de base suivante :

exemple :

la page décrite en HTML par :<HTML><HEAD><TITLE>Salutation</TITLE></HEAD><BODY>bonjour les petits enfants ! </BODY></HTML>

correspond au résultat suivant :

Balises usuelles

Styles physiques de texte

<B>bonjour</B> gras bonjour<I>bonjour</I> italique bonjour<U>bonjour</U> souligné bonjour<S>bonjour</S> barré bonjourbon<SUB>jour</SUB> indice bonjourbon<SUP>jour</SUP> exposant bonjour

Styles logiques de texte

<H1>bonjour</H1> titre taille 1 bonjour<H2>bonjour</H2> titre taille 2 bonjour<H3>bonjour</H3> titre taille 3 bonjour<H4>bonjour</H4> titre taille 4 bonjour<H5>bonjour</H5> titre taille 5 bonjour<H6>bonjour</H6> titre taille 6 bonjour

bonjour<EM>bonsoir</EM> mise en valeur bonjourbonsoir

<BR> saut de ligne<P> paragraphe

<PRE>......</PRE> texte préformaté

Alignement de texte

Il est défini par un attribut ALIGN = valeur où valeur peut être RIGHT, CENTER, LEFT. L'attribut ALIGN se place dans un tag <P> ou <Hx> ou <DIV> ou <HR>

exemple : <P ALIGN=CENTER>

Taille des caractères

Elle est définie par la balise BASEFONT :

<BASEFONT SIZE = x> où x = 1, 2, 3, 4, 5, 6, 7

Tracé d’une ligne horizontale

Il est défini par la simple balise <HR> qui peut posséder les attributs suivants :

WIDTH : longueur de la ligne en %SIZE : épaisseur en pixelsALIGN = x

Couleur du texte

Elle est définie par l'attribut COLOR de la balise <FONT> ; les valeurs de COLOR sont : aqua, black, blue, fuchsy, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

Couleur du fond

Elle est définie par l'attribut BGCOLOR dans le tag <BODY> pour la couleur de fond (qui est donc constante dans un même document).

Couleur des liens

Les attributs pour les liens dans le tag <BODY> sont

LINK : liens non visitésVLINK : liens visitésALINK : liens actifs

Un exemple

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"><HTML><HEAD><TITLE>Voici un exemple de page HTML</TITLE></HEAD><BODY BGCOLOR="yellow"><H2 ALIGN ="center">Voici un exemple de page HTML</H2><HR SIZE="10" WIDTH="50%><P ALIGN="center"><B>tagada tsoin tsoin</B><I>tagada tsoin tsoin</I><U>tagada tsoin tsoin</U> <S>tagada tsoin tsoin</S></P><P>Ce texte est aligné de diverses façons :</P><P><EM>comme ceci </EM></P><P ALIGN="center"><EM>comme cela </EM></P><P ALIGN="right"><EM>ou encore ainsi</EM></P><P ALIGN="left">S'il est formaté, il peut aussi se disposer ainsi :</P><PRE>comme ceci comme cela ou encore ainsi</PRE></BODY></HTML>

donne le résultat suivant :

Listes

Listes numérotées

Ce sont des listes d’informations présentées suivant un ordre défini par un numéro

balises pour la liste numérotée : <OL>........</OL>balises pour le titre de la liste : <LH>.......</LH>balises pour les items de la liste : <LI>

exemple :

<OL><B><LH>Opérations à effectuer :</LH></B><LI>Prendre son couteau<LI>Prendre sa fourchette<LI>Couper un morceau de steack<LI>Le manger<LI>Boire un peu de vin</OL>

correspond à


1. Prendre son couteau2. Prendre sa fourchette3. Couper un morceau de steack4. Le manger5. Boire un peu de vin

Listes non numérotées

Ce sont des listes analogues aux précédentes, mais où des puces remplacent les numéros.

balises à utiliser : <UL>.......</UL>attribut de définition de puce : TYPE = SQUARE|CIRCLE|DISC

exemple :

<UL><B><LH>Opérations à effectuer : </LH></B><LI TYPE=SQUARE> Prendre son couteau </LI><LI> Prendre sa fourchette </LI><LI TYPE=SQUARE>Couper un morceau de steack </LI><LI TYPE=SQUARE>Le manger </LI><LI TYPE=CIRCLE>Boire un peu de vin </LI></UL>

correspond à


■ Prendre son couteau■ Prendre sa fourchette■ Couper un morceau de steack■ Le manger❍ Boire un peu de vin

Listes de définition

Ce sont des listes permettant de faire des glossaires

balises pour une liste de définition : <DL>.......</DL>balises pour le sujet : <DT>........</DT>balises pour la définition : <DD>.......</DD>

exemple :

<B>Dictionnaire</B><DL><DT>alpha</DT><DD>première lettre de l'alphabet grec</DD><DT>beta</DT><DD>deuxième lettre de l'alphabet grec</DD><DT>gamma</DT><DD>troisième lettre de l'alphabet grec</DD></DL>

correspond à

Dictionnaire

alphapremière lettre de l’alphabet grec

betadeuxième lettre de l’alphabet grec

gammatroisième lettre de l’alphabet grec

Tableaux

Définition d’un tableau

Un tableau estconstitué de lignes et de colonnes. Les balises qui délimitent un tableau sont :

<TABLE>.........</TABLE>attribut : BORDER = 1|2|3.....attribut : ALIGN = BLEEDLEFT|BLEEDRIGHT|CENTER|LEFT|RIGHT|JUSTIFYbalises pour le titre : <CAPTION>.......</CAPTION> avec l'attribut : ALIGN = TOP|BOTTOMbalises pour chaque ligne : <TR>........</TR> avec l'attribut : ALIGN = CHAR|CENTER|DECIMAL|LEFT|RIGHT|JUSTIFYbalises pour les cases de titres de lignes ou de colonnes : <TH>........</TH> avec l'attribut : ALIGN = CHAR|CENTER|DECIMAL|LEFT|RIGHT|JUSTIFY et l'attribut : VALIGN = TOP|MIDDLE|BOTTOM|BASELINEbalises pour les données : <TD>........</TD> avec l'attribut : ALIGN = CHAR|CENTER|DECIMAL|LEFT|RIGHT|JUSTIFYet l'attribut : VALIGN = TOP|MIDDLE|BOTTOM|BASELINE

exemple :

<TABLE BORDER =2 bgcolor="silver"><CAPTION ALIGN = BOTTOM><B><I>Internet casse les prix du téléphone</I></B></CAPTION><CAPTION ALIGN = TOP><U><B>L'actualité</B></U></CAPTION><P><TR ALIGN=CENTER><TH>Destination</TH><TH>1 min par France Telecom</TH><TH>1 min par Internet</TH><TH>Economie réalisée</TH></TR><TR ALIGN=CENTER><TH>Paris-New York</TH><TD>2,25F</TD><TD>0,85F</TD><TD>62%</TD></TR><TR ALIGN=CENTER><TH>Paris-Tokyo</TH><TD>5,90F</TD><TD>1,80F</TD><TD>69%</TD></TR></TABLE>

correspond au tableau suivant :

L'actualité

Internet casse les prix du téléphone

Destination 1 min par France Telecom 1 min par Internet Economie réaliséeParis-New York 2,25F 0,85F 62%

Paris-Tokyo 5,90F 1,80F 69%

Cellspanning, Cellspacing, Cellpadding

Cellspanning effectue la fusion de plusieurs cellules et utilise les attributs : COLSPAN et ROWSPANCellspacing gère l'espacement des cellules et utilise l'attribut : CELLSPACING = 0|1|2|3.....Cellpadding gère l'espacement du texte d’une cellule par rapport au bord et utilise l'attribut : CELLPADDING = 0|1|2|3.....

exemple 1 :

<TABLE BORDER=1 ALIGN=CENTER><CAPTION ALIGN = TOP>Cellspanning</CAPTION><TR ALIGN = center ><TH>....</TH><TH>colonne 1</TH><TH>colonne 2</TH><TH>colonne 3</TH></TR><TR ALIGN = Center ><TH >ligne 1</TH><TD COLSPAN = 2>11 et 12</TD><TD>13</TD></TR><TR ALIGN = Center ><TH>ligne 2</TH><TD>21</TD><TD COLSPAN = 2 ROWSPAN=2>22 et 23 et 32 et 33</TD></TR><TR ALIGN = Center ><TH>ligne 3</TH><TD>31</TD></TR></TABLE>

correspond à :

Cellspanning

.... colonne 1 colonne 2 colonne 3ligne 1 11 et 12 13

ligne 2 2122 et 23 et 32 et 33

ligne 3 31

exemple 2 2 : Cellspanning, Cellpadding

Le code HTML suivant

<H4><I>Cellspacing et Cellpadding</I></H4><P><TABLE ALIGN=center BORDER = 1 CELLSPACING = 10 CELLPADDING = 10 ><TR > <TD >Cellspacing<BR>=10</TD> <TD>Cellpadding<BR>=10</TD> <TD>Border<BR>=1</TD></TR></TABLE><TABLE ALIGN =center BORDER = 2 CELLSPACING = 10 CELLPADDING =0><TR> <TD>Cellspacing<BR>=10</TD> <TD>Cellpadding<BR>=0</TD> <TD>Border<BR>=2</TD></TR></TABLE><BR><BR><BR><BR><TABLE ALIGN=center BORDER = 3 CELLSPACING = 0 CELLPADDING = 10><TR> <TD >Cellspacing<BR>=0</TD> <TD>Cellpadding<BR>=10</TD> <TD>Border<BR>=3</TD></TR></TABLE><TABLE ALIGN=center BORDER = 4 CELLSPACING = 0 CELLPADDING = 0><TR><TD>Cellspacing<BR>=0</TD> <TD>Cellpadding<BR>=0</TD> <TD>Border<BR>=4</TD></TR></TABLE>

correspond au résultat :

Cellspacing et Cellpadding

Cellspacing=10

Cellpadding=10

Border=1

Cellspacing=10

Cellpadding=0

Border=2

Cellspacing=0

Cellpadding=10

Border=3

Cellspacing=0

Cellpadding=0

Border=4

Images

Formats graphiques

2 formats graphiques seulement sont acceptés par l’ensemble des navigateurs :

● GIF : Graphics Interchange Format d’origine Compuserve256 couleurs maximage compressée sans perte

● JPEG : Joint Photographic Experts Group16,7 millions de couleurs maximage compressée avec perte

D’autres formats nécessitent des extensions des navigateurs appelés plugs-in : DIB, TIFF, PCX, WMF, BMP, TGA.

Images progressives, images transparentes

● format GIF entrelacé : affichage de 1 ligne sur x : affichage progressif de l’image : ergonomie accentuée.

● avec GIF on peut définir la couleur de l’image comme transparente d’où la possibilité d’effets spéciaux.

La balise IMG

L’insertion d’une image est annoncée par le tag <IMG> avec un certain nombre d’attributs :

● attribut SRC : indique la source de l’image. ex : SRC = C:\truc\machin\image4.gif● attribut WIDTH : indique la largeur de l’image● attribut HEIGHT : indique la hauteur de l’image. ex : WIDTH = 20 HEIGHT = 50● attribut ALIGN : valeurs TOP (en haut), MIDDLE(au milieu de la ligne), BOTTOM (en bas).● attribut ALT : texte alternatif pour les navigateurs qui ne peuvent afficher l’image● attribut BORDER : largeur de la bordure de l’image● attributs VSPACE et HSPACE : création d’espaces vides autour de l’image

exemple :

<H3 align="center"><B>Quelques images</B></H3><IMG SRC= "ampoule.gif" BORDER="1" HSPACE="20" VSPACE="20" WIDTH="70" HEIGHT="66">< IMG SRC ="ampoule.gif" BORDER ="1 " VSPACE= "20" WIDTH ="140" HEIGHT ="66"> <BR>< IMG SRC ="ampoule.gif" BORDER ="1" HSPACE="20" WIDTH="70" HEIGHT ="132"> < IMG SRC ="ampoule.gif" BORDER ="1" WIDTH ="140" HEIGHT ="132">

correspond à

Quelques images

Multifenêtrage

La technique des frames

Les frames permettent d’afficher plusieurs documents HTML à l’intérieur de visionneuses prévues dans la fenêtre d’un navigateur :

Les balises FRAMESET et FRAME

définition du nombre et de la taille des frames : <FRAMESET>........</FRAMESET>attributs COLS et ROWS avec valeur en % ou en pixelsex : <FRAMESET COLS=«100,25%,*» crée 3 frames dans le sens de la largeur, la première de 100 pixels, la deuxième du quart de la largeur totale, la troisième de ce qui reste.

définition du document HTML à afficher dans la frame : <FRAME>attributs : NAME qui indique le nom de la frame

SRC qui indique l’adresse du document HTML à afficher

exemple :

<HTML><HEAD><TITLE>essai8</TITLE></HEAD><FRAMESET rows="25%,50%,25%"> <FRAME src="cadre1.htm"> <FRAMESET cols="25%,75%"> <FRAME src="cadre2.htm"> <FRAMESET rows="50%,50%" cols="50%,50%"> <FRAME src="cadre3.htm"> <FRAME src="cadre4.htm"> <FRAME src="cadre5.htm"> <FRAME src="cadre6.htm"> </FRAMESET> </FRAMESET> <FRAME src="cadre7.htm"></FRAMESET></HTML>

Méthode pour imbriquer des frames

La numérotation des frames s’opère de bas en haut et de gauche à droite :cette numérotation résulte du PTT (Pre-order Tree Traversal), sens de parcours d’un arbre permettant de numéroter les feuilles.

Autres balises et attributs

● dans la balise <FRAME> :

attribut SCROLLING =YES|NO|AUTO ajout/non ajout d’ ascenseursattribut NORESIZE blocage du redimensionnement des frames par l’utilisateurattributs MARGINHEIGHT et MARGINWIDTH définition d’espacements (en pixels) par rapport au bord de la frame

● dans les balises <FRAME> ou <FRAMESET> :

attribut FRAMEBORDER=YES|NO visibilité/non visibilité des bords de la frame

Hyperliens

Hypertexte, hypermedia

Avec HTML on peut créer des liens entre documents WWW ou objets de documents WWW. Ces liens sont appelés Hyperliens. L’hypertexte en est un exemple; c’est un texte qui est sensible au clic de la souris et qui provoque une action sous ce clic (en général, le chargement d’un autre document WWW). Comme on peut aussi cliquer sur une image pour provoquer une action, on peut alors parler d’hypermédia....

Ancres

Une ancre est l’indication d’une cible par une balise <A>. La cible peut être :

a) une étiquette dans un document local ou distant définition de l’étiquette par un nom: <A NAME=«truc»>.....</A>

b) un document local ou distant le document est défini par son adresse URL, par exemple http://www.dep.u-picardie.fr/

L’hyperlien est défini dans une balise <A> par l’attribut HREF :

<A HREF=«#truc»>.Aller à truc </A> : lien local vers une étiquette «truc»<A HREF=«http://www.u-picardie.fr»>.univ. de picardie</A> : lien vers un serveur WWW (page d’accueil)<A HREF=«http://www.nando.net/toys/cyrano.html>Ecrivez des lettres d’amour avec Internet</A> : lien vers un document html d’un serveur WWW<A HREF=«http://www.cenaath.cena.dgac.fr/themes/cuisine/plat/#veau»>Recettes de cuisine</A> : lien vers une étiquette d’un document d’un serveur WWW

exemple :

<HTML><HEAD><TITLE>exemples de liens</TITLE></HEAD><BODY bgcolor="#FFFFFF">Ceci est un exemple d'utilisation de liens<BR><A name="Table">Sommaire</A><UL><LI><A href="#chapitre1">Chapitre 1</A> </LI>

http://www.u-picardie.fr/

<LI><A href="#chapitre2">Chapitre 2</A> </LI><LI><A href="#chapitre3">Chapitre 3</A> </LI><LI><A href="#conclusion">Conclusion</A></LI></UL><P>blablablablala<P>blablablabla<H3><A name="chapitre1">Chapitre 1</A></H3><P>blablabla<P>blablabla<P>blablabla<P><A href="#Table">Retour au sommaire</A><BR><H3><A name="chapitre2">Chapitre 2</A> </H3><P>blablabla<P>blablabla<P>blablabla<P><A href="#Table">Retour au sommaire</A><BR><H3><A name="chapitre3">Chapitre 3</A> </H3><P>blablabla<P>blablabla<P>blablabla<P><A href="#Table">Retour au sommaire</A><BR><H3><A name="conclusion">Conclusion</A> </H3><P>blablabla<P>blablabla<P>blablabla<P><A href="#Table">Retour au sommaire</A><BR><P><A href="http://www.u-picardie.fr/">Cliquez ici pour visiter notre site</A> <P><A href="mailto:[email protected]">Ecrivez-moi</A></BODY></HTML>

Images réactives

On peut remplacer un «hypermot» par une «hyperimage» ou image réactive. Une image réactive se définit par la balise <MAP> qui possède l’ attribut NAME nom de l’image réactive et par la balise <AREA> qui possède les attributs : SHAPE forme géométrique de l’image réactive (circle, rect, polygon), COORDS coordonnées des points de contrôle de l’image réactive, HREF adresse de destination.

exemple : le code ci-dessous

<MAP NAME="ImageReac0"><AREA SHAPE="POLYGON" COORDS="93, 89, 0, 0, 186, 0" HREF="#chapitre1"><AREA SHAPE="POLYGON" COORDS="0, 0, 0, 178, 93, 89" HREF="#chapitre2"><AREA SHAPE="POLYGON" COORDS="0, 178, 186, 178, 93, 89" HREF="#chapitre3"><AREA SHAPE="POLYGON" COORDS="186, 0, 93, 89, 186, 178" HREF="#conclusion"></MAP><img src="carre.gif" border="0" width="186" height="178" usemap="#ImageReac0">

correspond à la figure réactive suivante (4 zônes sensibles)

Formulaires

Principe général

Les formulaires sont urilisés pour échanger des données entre le poste client et le serveur. Cet échange de données fait appel à des programmes spéciaux s’exécutant sur le serveur. Dans la méthode standard, ils sont appelés scripts CGI (CGI = Common Gateway Interface. Il existe d'autres méthodes, mais pour expliquer les formulaires, on se bornera à CGI.

1) L’utilisateur remplit le formulaire et le valide ce qui a pour effet d’envoyer des données vers le script CGI situé sur le serveur

2) Le script CGI sur le serveur accepte les données comme paramètres et effectue un traitement produisant éventuellement des résultats

3) Les résultats sont transmis (éventuellement) au poste client. Ils sont affichés par le navigateur

Envoi de paramètres

Un formulaire est délimité par les balises <FORM> et </FORM>. Les champs de saisie se trouvent entre ces deux balises. Les données saisies sont transmises selon deux méthodes indiquées par l’attribut METHOD au script CGI (sur le serveur)

a) METHOD = GET envoi des données saisies (paramètres) à l’adresse du script CGI : exemple :

b) METHOD = POST permet l’envoi de listes de données plus longues (les paramètres sont envoyés indépendamment de l’adresse URL du script).

Structure d’un formulaire

L’adresse du script CGI est défini par l’attribut ACTION ; exemple : ACTION=«http://www.truc.fr/cgi-bin/script1». Les zônes de saisie sont définies par la balise <INPUT> qui possède les attributs suivants :

NAME : nom du champ de saisie ; TYPE : type de champ ; text : texte ; password : mot de passe checkbox : boite à cocher radio : boite d’optionSIZE : taille du champMAXLENGHT : nombre maximum de caractères à saisir

Le déclenchement de l’envoi des paramètres peut s’effectuer avec un bouton «Envoi» :

<INPUT TYPE=SUBMIT VALUE=«Envoyer»>

La remise à leur valeur initiale des paramètres peut également s’effectuer ave un bouton «Reset»

<INPUT TYPE=RESET VALUE=«Rétablir»>


exemple :

<FORM METHOD=GET ACTION=«http://www.truc.fr/cgi-bin/inscription»>Merci de bien vouloir indiquer votre nom :<INPUT NAME=«Nom» TYPE=Text SIZE=32 MAXLENGTH=32><P><INPUT TYPE=SUBMIT VALUE=«Envoyer»><P><INPUT TYPE=RESET VALUE=«Rétablir»></FORM>

correspond au formulaire :

Différents types de formulaires

● champ de saisie sur une ligne

<INPUT NAME=«Truc» TYPE=Text SIZE=20 MAXLENGTH=12>

● saisie d’un mot de passe

<INPUT NAME=«Truc» TYPE=Password SIZE=20

MAXLENGTH=12>

● saisie sur plusieurs lignes

<TEXTAREA NAME=«Baratin» ROWS=3 COLS=25>Ecrire ici</TEXTAREA>

● cases à cocher

<INPUT NAME=«pain» TYPE=CHECKBOX> pain<INPUT NAME=«vin» TYPE=CHECKBOX CHECKED> vin<INPUT NAME=«potage» TYPE=CHECKBOX> potage<INPUT NAME=«salade» TYPE=CHECKBOX> salade

● cases à option ou boutons radio (sélection d’un seul élément)

<INPUT NAME=«X» TYPE=RADIO VALUE=«4»>brûlant<INPUT NAME=«X» TYPE=RADIO VALUE=«3»>chaud<INPUT NAME=«X» TYPE=RADIO VALUE=«2»>tiède<INPUT NAME=«X» TYPE=RADIO CHECKED VALUE=«1»>froid

● menu déroulant (sélection d’un item ou de plusieurs items)

<SELECT NAME=«légume» SIZE=1 MULTIPLE><OPTION VALUE=«Salsifi» SELECTED>Salsifi<OPTION VALUE=«Pomme de terre»>Pomme de terre<OPTION VALUE=«Carotte»>Carotte</SELECT>

SIZE indique le nombre d’options visiblesMULTIPLE indique une sélection multiple ; pour une sélection unique, cet attribut est omis.

CGI, Perl, java, javascript

L'interactivité, toujours recherchée, nécessite de pouvoir donner à l'utilisateur la possibilité d'effectuer des traitements (exécuter des programmes). Diverses techniques sont employés dans ce but :

● la plus ancienne est CGI (Common Gateway Interface) qui est un protocole permettant d'effectuer un programme qui se trouve au niveau du serveur. Ces programmes peuvent être, en principe, écrits dans un langage de programmation quelconque ; un langage très employé pour l'écriture de "scripts CGI" est Perl. CGI a été (et est encore) utilisé pour des serveurs sur plate-forme UNIX ; il existe aussi des possibilités pour les serveurs sous Windows : WinCGI. Toutefois Java est actuellement le langage le plus employé.

● une autre façon de procéder est de lier un document à des programmes qui peuvent être téléchargés de manière transparente pour l'utilisateur. Dans ce cas, l'exécution s'opère au niveau du poste client. Les applets java appartiennent à cette catégorie. Il s'agit de programmes écrits en java et compilés qui sont liés à des documents HTML.

● une version du procédé ci-dessus est également fournie avec javascript qui est un langage interprété, plus simple que java ; les scripts écrits en javascript apparaissent en clair dans le document HTML et font partie inhérente du document.

pdf 1006 ko m2.4 - séquence 1

Documents