Site Web Pour La Gestion de La Bibliothèque

Rpublique Algrienne Dmocratique et Populaire
Ministre de lenseignement Suprieur et de la Recherche Scientifique
INSTITUT DES TELECOMUNICATIONS

ABDELHAFID BOUSSOUF - ORAN -
PROJET
DE
FIN
DETUDES
Pour lobtention du diplme dingnieur dtat en tlcommunications Prsent par :

! M. NEZROUK ABDERRAHMANE ! M. ACHACHI NAMANE
Devant le jury compos de :

Prsident : Encadreur : Examinateur : Examinateur : M. SOUAG MOHAMED M. HACHEMANI RABAH M. SIDI-ALI-MEBAREK ZERROUK M. GASMI ABDELLAH
Promotion IGE 20 Soutenu en Juin 2000
SOMMAIRE
INTRODUCTION GENERALE . 2 CHAPITRE I

INTRODUCTION . 5 I.1 Historique de l'Internet .. 5 I.2 Topologie et la gestion de lInternet ... 6 I.2.1 Rseaux constituants .. 7 1.2.2 Les adresses sur le rseau Internet 7 1.2.3 Le systme de noms de domaine DNS .. 9 I.3 Types de services 10 I.3.1 Les services dInternet 11 I.4 Les protocoles rseaux . 12 I.4.1 TCP (Transmission Control Protocol) . 12 I.4.2 IP (Internet Protocol) 12 I.4.3 Interface entre TCP et IP .... 13 I.4.4 Rpartition des services entre TCP et IP .. 14
CHAPITRE II
Introduction 16 II.1 Dfinition .. 16 II.2 Les outils du Web .. 16 II.2.1 Les pages Web . 17 II.2.2 Les Hyperliens .. 18 II.3 Structure du rseau WWW .. 19 II.3.1 Lapproche Client/Serveur 19 II.3.2 Comment se connecter ? .. 21 II.3.3 Les informations du Web .. 22 II.4 Les Web chercheurs dinformation 22
CHAPITRE III
III.1 Historique 26 III.2 Gnralits . 26 III.2.1 Lvolution du langage HTML . 27 a) Un langage balises 27 b) Format des balises 27 c) Documents HTML .. 28 c.1) En-tte du document . 29 c.2) Corps du document 30 c.3) Commenter un document . 31 c.4) Options de base de la mise en forme 32 c.5 liaisons entre pages Web .. 40 Liens internes .. 42 Liens externes . 42 c.6 Les images 43 Insertion dun lien graphique 44 Insertion dimage cliquable .. 45 c.7) Hypermdia . 45 hypertexte et hypermdia . 45 Cration danimation .. 46 Le son . 46 La vido .. 47 c.8) Les formulaires HTML .. 48 c.9 Les tableaux .. 50 c.10) Cadre est mise en page interactive . 52 c.11) Les couleurs .. 54 Le code RVB 54 Les 16 couleurs principales 55
CHAPITRE IV
IV.1 Introduction IV.2 Les diteurs HTML .. IV.2.1 Les diteurs de texte . IV.2.2 Les diteurs de tags .. 57 57 57 58
IV.2.3 Les diteurs WYSIWYG 59 IV.2.4 Microsoft FrontPage .. 60 IV.3 Devenir interactif sur le Web . 60 IV.3.1 Programmation ct serveur .. 60 IV.3.1.1 Les programmes ou les scripts CGI ... 61 IV.3.1.2 NSAPI et ISAPI 61 IV.3.2 Programmation ct client .. 62 IV.3.2.1 Java, le langage 62 IV.3.2.2 Ce que nous pouvons faire avec des Applets . 63 IV.3.2.3 Adjuvants (Plug-in) .. 65 IV.3.2.4 ActiveX 65 IV.3.2.5 Les langages de script ... 66 IV.3.2.6 La ralit virtuelle et le Web .. 71 IV.4 Gestion du site .. 72 IV.4.1 Faire connatre le site ... 72 IV.4.2 Transfert des pages vers un serveur Web .. 72 IV.4.3 Amliorer le site . 73 IV.4.4 e-mail .................................................................................... 73 IV.4.5 Compteur daccs .. 74 IV.4.6 Le formulaire de demande des renseignements ... 74
CHAPITRE V
V.1 Introduction . 76 V.2 Les feuilles de style .. 76 V.2.1 Dfinition ... 77 V.2.2 Feuille de style local ... 77 V.2.3 Feuille de style global 78 V.2.4 Feuille de style li ... 78 V.3 Attributs de style ... 79 V.4 CLASSE, SELECTEUR ET GROUPES 79 V.4.1 CLASSES .. 79 a) Le slecteur CLASS appliqu tout marqueur HTML ... 80 b) Le slecteur ID .. 80 c) Pseudo-classes .... 81
V.4.2 Slecteurs .... 81 a) Slecteurs simples .. 81 b) Slecteurs contextuels .. 81 V.4.3 GROUPES . 82 V.5 Animation des pages Web .. 82 V.5.1 Principe .. 82 V.5.2 Qu'est-ce que le DOM? .. 83 V.5.3 Qu'est-ce que cela signifie pour les documents HTML? .. 83 V.5.4 La structure du DOM .. 83 Qu'est-ce qu'une couche? .. 84 Les balises DIV, SPAN et LAYER .. 85
CHAPITRE VI
VI.1 Origine de XML . 90 VI.2 Introduction de XML .... 91 VI.2.1 De quoi se compose un document XML .. 91 IV.2.2 Structure d'une feuille XML . 91 VI.3 XSL ... 93 VI.4 Conclusion . 93
CHAPITRE VII
VI.1 Gnralit . . 96 VI.2 caractristiques 96 VI.3 Programmation Orient Objet (P.O.O) 96 VI.3.1 Introduction . 96 VI.3.2 La programmation oriente objet (P.O.O) .. 97 VI.4 la hirarchie des objets 101 VI.4.1 Lobjet window (fentre) .. 102 VI.4.2 Lobjet location (emplacement) . 103 VI.4.3 Lobjet history (historique) . 104 VI.4.4 Lobjet document .. 105 VI.4.5 Les objets de la gestion des entres utilisateurs . 107 VI.4.6 Les objets de la gestion des liens hypertextes . 112 VI.4.7 Lobjet navigator (navigateur) ... 113
VI.4.8 Objet string (chane d VI.5 Structure de contrle VI.6 Oprateurs ... VI.6.1 Comparaison . VI.6.2 Arithmtique .. VI.6.3 Affectation . VI.6.4 boolen ... VI.6.5 Niveau binaire ... VI.6.6 Fonctions ...
114 114 115 115 116 116 116 117 117
Chapitre VIII
Introduction . 119 VIII.1. Les Outils Utiliss .. 119 VIII.1.1. Microsoft FrontPage .... 119 VIII.2 Outils graphiques 120 VIII.2.1 Cration des Animations . 121 Animagic GIF 121 VIII.3 Outil de traitement de son . 122 V.3.1 Le magntophone . 122 VIII.4 Test des pages . 122 VIII.5 Implmentation du site ... 124
CONCLUSION .... 126
ANNEXES ... 127

ANNEXE A .. ANNEXE B ANNEXE C ANNEXE D .. 128 129 131 132
Introduction
Introduction :
Qui besoin dun site internet ? A priori tout le monde. Le dveloppement dInternet a pris une telle ampleur que les amateurs pour appendre le langage HTML sont de plus en plus nombreux. Les pages HTML constituent aujourdhui le systme de base de lInternet. Elles offrent une grande varit dapplications allant de la page personnelle au service commercial professionnel. Les sites Web peuvent inclure du texte ainsi que des graphiques anims, du son, de la vido ou des programmes interactifs complets. Des millions de page Web sont disponibles chaque jour sur des centaines de serveurs de par le monde. Bref le Web est devenu une nouvelle mthode de dialogue innovante. Presque toutes les publicits prsentes dans les mdias contiennent une adresse Web. Les journaux tlviss, la presse quotidienne, les universits et les magazines possdent eux-mmes des sites Web. Pour linstitut, cest le catalogue disponible 24 heures sur 24, et mis jour quotidiennement. Cest la documentation interne, acc quelques minutes. Les socits, les universits et les coles suprieures lies au march de linformatique fournissent les meilleurs exemples de cration de sites Web. Aujourdhui, elles produisent tous des sites Internet et fournissent une multitude de renseignements thoriques et techniques leurs utilisateurs. Une difficult avec un logiciel ?, les pages questions rponses, des cours en ligne, etc. Lobjectif de notre sujet qui est propos par lquipe rseaux de notre institut est dtudier les lments qui entrent dans la conception dun site Web ainsi que de son environnement de fonctionnement. Les enjeux des diffrents chapitres sont : Chapitre I : Apprhende les protocoles de communications et les diffrents services qui rgissent Internet. Chapitre II : Ce chapitre explique en dtaille le Word Wide Web. Le Chapitre III est consacr ltude du langage HTML. Chapitre IV: Etude des diffrents diteurs ddis lcriture des pages HTML ainsi que lenrichissement des pages en utilisant javaScript et Java. Chapitre V: Etude des diffrentes fonctionnalits du DHTML. Chapitre VI: Bref aperu sur le langage XML.
Conception dun site Web
Introduction
Chapitre VII : Syntaxe rsume de JavaScript ainsi quune petite introduction sur la programmation oriente objet. Dans le Chapitre VIII: on implmente les dmarches suivies lors de la cration du site web de la bibliothque pour complter le site de linstitut.
Chapitre I
Gnralit sur Internet
INTRODUCTION:
approximativement 29 millions d'utilisateurs, La plupart de ceux-ci sont des universitaires, des employs des gouvernements et des grandes entreprises, qui utilisent principalement l'Internet des fins de recherche et de diffusion dinformation. Mais depuis quelques annes, l'Internet s'ouvre progressivement au public et donc au commerce. Grce internet il est possible en quelques minutes de communiquer en temps rel envoyer ou recevoir des messages lectroniques, tlcharger des fichiers informatiques (image, son ), la mise jours des logiciels (Windows... .)
I.1 Historique de l'Internet:

La premire pierre du rseau Internet est pose en pleine guerre froide, la fin des annes 50. A lpoque, le dpartement de la dfense amricaine craint de voir son systme de communication, alors centralis, gel par une attaque sovitique. Aprs une dizaine dannes de recherches, la dfense met en place en 1969 ARPANET (Advanced Research Project Agency NETwork). Compos dun ensemble de rseaux, il permet aux diffrents sites de la dfense amricaine dchanger leurs informations. La communication reste tablie, mme si certains sites La pierre dangle de ce systme repose sur lutilisation du protocole rseau TCP/IP (Transfert Control Protocol / Internet Protocol). Ce protocole normalise les communications entre machines et permet ainsi tous dchanger des informations (Mac, PC,...). Petit petit, cet ensemble de rseaux stend aux universits et grandes entreprises situes aux Etats Unis et en Europe. La communaut scientifique peut ainsi changer le fruit de ses recherches beaucoup plus facilement. En 1984, il est scind en deux : Milnet (pour la partie militaire), financ par larme amricaine. NSFnet (partie publique ), financ par la National Science Fondation. En 1988, NFSnet prend le nom dInternet ( INTER NETwork , que lon pourrait traduire par ensemble de rseaux interconnects) et est financ par lensemble de ses membres. Jusque l, de par sa complexit, son utilisation reste rserve une lite (chercheurs, Universitaires,...).
Chapitre I
I.2 Topologie et gestion de lInternet :

La caractristique la plus importante retenir de l'Internet demeure sa topologie c'est dire sa structuration. Il constitue un rseau dcentralis, compos de tronons de capacits diverses, un peu comme un rseau routier. Internet n' propritaire unique, ni une socit actions. C'est plutt une communaut d'intrt, une association d'utilisateurs qui dfraient eux-mmes les cots d'entretien et de modernisation des infrastructures. La premire consquence de cette topologie est que personne n'est en mesure de contrler le contenu qui circule dans l'ensemble du rseau, moins que l'ensemble des utilisateurs se mettent d'accord. Il existe cependant certains organismes "chaperons". Mentionnons brivement :
q
IRS (Internic Registration Service), qui gre l'attribution des adresses IS (L'Internet Society), ddie la promotion et la coordination du
Net. NSF (National Science Foundation), qui gre la principale voie rapide de l'Internet, mieux connue sous le nom de backbone. ISOC (Internet Society), qui a pour mission daccompagner lvolution technique de linternet et de promouvoir son utilisation auprs des diffrentes communauts. IAB (Internet Architecture Board), qui est considre comme lautorit suprme en matire de rseau et de technique. Elle fixe les rgles dattribution des adresses rseau, noms de domaine, donc un groupe technique qui supervise le dveloppement de linternet. IETF (Internet Engineering Task Force), qui est le principal pourvoyeur de RFC (Request For comment). Cest un ensemble de groupes de travail ouverts qui proposent des volutions techniques court ou moyen terme sur les standards est les architectures. IANA (Internet Assigned Numbers Authority), qui a le bureau central denregistrement des numros de ports, de rseaux IP,... sur lInternet.
Chapitre I
I.2.1 Rseaux constituants :

L'Internet a intgr partiellement plusieurs rseaux plus anciens, comme Bitnet (technologie IBM) ou le rseau UUCP (technologie UNIX). Ces rseaux utilisent d'autres conventions d'adressage que l'Internet (adresses IP) et sont en passe de devenir obsolte, mais ils vhiculent encore beaucoup d'information.
Rseaux constituants :
On trouve trois types d'adresse pour relier un service Internet ou une personne: q Son adresse Internet. q Son numro IP. Son adresse URL. Les trois mthodes sont quivalentes, la troisime est la plus en vogue aujourd'hui.
q
a) Les adresses :
Lorsque vous recherchez votre ami Dupont dans l'annuaire, vous regardez d'abord la ville o il habite, puis s'il y a deux Dupont, vous dpartagez les Dupont par leur prnom. Dupont est donc identifi par son prnom, son nom et sa ville. l'adresse: nom@organisation.domaine
Chapitre I
Si vous ne recherchez pas Dupont mais le nom d'une socit, vous n'avez que le nom de la socit et sa ville rechercher, sachant que dans la socit en question Dupont travaille peut-tre. Sur Internet le nom d'un ordinateur centralisant plusieurs personnes est organisation.domaine
b) Les numros IP :
Il existe un quivalent des noms prcdemment dfinis, c'est un numro de 32 bits, que l'on crit par quatre nombres spars par trois points. Par exemple, 192.203.245.63 est une adresse TCP/IP donne sous une forme plus technique mais moins mnmotechnique que la prcdente. Ce sont ces adresses que connaissent les ordinateurs qui communiquent entre eux. 0 8 16 24 31 0 1 0 ID. RESEAU ID. MACHINE
Classe C
0 1 0
8 ID. RESEAU
16
24 ID. MACHINE
31
Classe B
0 0 ID. RESEAU
16 ID. MACHINE
24
31
Classe A
L aussi on retrouve une certaine logique d'attribution de ces numros. Le premier groupe de numro peut tre plus ou moins grand (on dit de classe A, B ou C), de telle sorte que plus on rserve de digits pour les premiers numros, moins il en reste pour la
c) Les Adresses URL :

Avec les dernires technologies, la tendance est de donner les adresses directement sous la forme d'hypertexte ou d'URL. Donc une adresse URL est une adresse de la forme :
service://machine/directory/fichier
Chapitre I
Par exemple :
http://www.microsoft.com ftp://www.cern.fr/public
L'avantage de ce type d'adresse est qu'il englobe beaucoup plus d'informations que l'adresse, puisqu'il comprend: q Le type de service. q Lemplacement sur le serveur. q Le nom du fichier. Souvent le nom du rpertoire d'accueil est omis ainsi que le nom du fichier, car le nom service://machine est non ambigu. Ces adresses URL sont d'autant plus tonnantes qu'on les trouve au hasard dans la lecture des documents hypertextes. Notons que par dfaut votre lecteur de Web acceptera mme des adresses URL sans les symboles http://. Ainsi l'adresse www.microsoft.com est suffisante pour se rendre chez Microsoft. Ainsi on rservera les petits numros de classe pour les trs gros sous rseau d'Internet et les grands numros de classe pour les petits sous rseaux Internet. Ces numros IP sont les numros par lesquels les ordinateurs communiquent entre eux. Mais ils ne peuvent pas tre donns arbitrairement puisque deux ordinateurs sur l'Internet ne peuvent pas avoir le mme numro. C'est un organisme appel NIC (Network Information Center) qui fournit les premiers numros appels racine du numro IP, charge l'administrateur de votre rseau, de vous distribuer les numros disponibles dans la plage de numros attribus. Il est noter que si vous avez une adresse qui vous identifie, par exemple dupont@ricard.fr, les fournisseurs Internet qui possdent un certain nombre d'accs infrieur leur nombre de clients, peuvent vous attribuer une adresse TCP/IP qui n'est pas fixe.
1.2.3 Le systme de noms de domaine (DNS) :

Cest un systme de dnomination hirarchique support par des serveurs de noms qui reoivent les donnes depuis une base de donnes distribue. Sans le DNS nous serions sans doute obligs de taper la place dun nom, une adresse numrique trs complique. A lheure actuelle, les serveurs de noms InterNIC (Internet Network Information Center) supportent directement des nuds, appels domaines de plus haut niveau.
Conception dun site Web 9
Chapitre I
Par exemple : CODE Au Be Fr De Dz Ca Com Edu Gov Org Mil Net Int
PAYS OU SINIFICATION Australie Belgique France Allemagne Algrie Canada Entre prise Commerciale Organisme ducatif Institution governmentale Organisme non rfr Site militaire Prestataire des rseaux Organisation internationale
I.3 Types de services :

Il y a quatre faons principales d'utiliser l'Internet pour communiquer et changer de l'information, soit : q Le terminal d'ordinateur distance. q Le courrier lectronique. q Les groupes de discussions. q Le transfert de fichiers. Le terminal d'ordinateur permet d'accder un ordinateur et de lui demander d'excuter des logiciels, pour effectuer des tches ou accder des banques de donnes. Le courrier lectronique est plusieurs fois plus rapide que le courrier ordinaire et a l'avantage d'tre indirectement gratuit. Il est aussi possible de s'envoyer des fichiers (documents, images, sons), transformant un message en colis lectronique. Le courrier lectronique permet aussi de participer des forums spcialiss sur les sujets les plus divers. Ils existent sous deux formes principales: les LISTSERVs et les NewsGroups. Le transfert de fichiers permet l'change de fichiers entre individus et la mise sur pied de serveurs publics pour la diffusion de logiciels et de documents.
10
Chapitre I
I.3.1 Les services dInternet :

Internet offre plusieurs services ses usagers, et pour y accder, lusager doit disposer des logiciels-clients adquats. Parmi ces services nous citerons: E-mail: La messagerie lectronique est le service Internet le plus utilis. Elle reprsente environ 55% du trafic total. Chaque jour, des millions de messages sont envoys vers des boites aux lettres numriques de tous les Usenet : Il s'agit l d'un ensemble de sujets soumis discussion. Ces groupes de discussion (newsgroups ou groupes de news ) sont ouverts tous, et les thmes traits
Gopher : Un gopher est un systme qui affiche un document et des rpertoires Internet comme des options de menus. Nous faisons un choix dans le menu et le Gopher affiche, soit un document, soit un autre menu, ou bien nous transfre sur un autre Gopher. HTTP: Ce protocole commande lchange des fichiers entre navigateur Web et le serveur. Nous devons lutiliser chaque fois que nous voulons renvoyer un autre document Web. Telnet : Telnet est un protocole de connexion qui permet, partir d'un microordinateur ou d'un terminal, de se connecter distance sur un serveur pour une utilisation en mode local. Telnet nous permet donc d'utiliser un ordinateur distance. Il arrive souvent que les bibliothques proposent ce service : nous nous connectons l'ordinateur de la bibliothque et nous consultons directement son catalogue. Pour des raisons de scurit, les accs Telnet sont gnralement privs et destins aux administrateurs des serveurs et certains utilisateurs. FTP : Permet d'effectuer des transferts de fichiers sur une machine distante. Cependant, certains sites acceptent la connexion d'utilisateurs non rfrencs : c'est le FTP anonyme. Un serveur FTP anonyme est une machine sur laquelle sont stocks des fichiers mis gratuitement la disposition de tous les utilisateurs de l'Internet. FTP est le mcanisme idal pour faire passer les fichiers HTML crs sur notre ordinateur Les fichiers stocks sur les sites FTP sont la plupart du temps compresss. Une fois le fichier rcupr sur votre ordinateur, il va vous falloir le dcompresser pour l'exploiter.
11
Chapitre I
I.4 Les protocoles rseaux :

I.4.1 TCP (Transmission Control Protocol) :
Cest la couche que lon trouve au-dessus de IP et qui complte celle-ci en apportant les fonctions suivantes : q Les paquets mis sons remis dans lordre larrive. q Les paquets endommags ou perdus sons rmis. q Les changes entre des machines seffectuent en mode connect : Ils ont un dbut, un ordre, un contexte et une fin. Ainsi, TCP fournit des circuits virtuels aux utilisateurs. TCP procure un service de communication fiable entre applications, c'est un protocole complmentaire de IP. Aprs avoir achemin l'information vers la machine cible (le rle de IP), il s'agit ici d'atteindre l'application rfrence. TCP tablit un circuit virtuel entre applications distantes et introduit pour cela la notion de numro de port. Sur la plupart des machines connectes, plusieurs applications se droulent simultanment; par le biais port, TCP joue le rle d'un multiplexeur d'applications. Il assure galement la fiabilit de la transmission (remise en ordre des paquets, retransmission des paquets perdus,...). Les applications construites sur le modle client/serveur, TCP pour mettre en communication des processus loigns. Un circuit virtuel est ouvert entre un serveur (X window, Gopher, WWW,...) et une application cliente distante. Le couple numro IP/ port TCP permet d'adresser un service sur une machine donne. TCP/IP est le protocole de linternet, celui qui permet tous ces merveilleux ordinateurs compltement htrognes de dialoguer.
I.4.2 IP (Internet Protocol) :

Internet protocol est son nom, et la couche 3 son domaine. IP se charge dacheminer les paquets de donnes un par un entre deux ordinateurs proches ou distants. Chaque paquet IP comporte une adresse de destination et une adresse source de 4 octets chacune, plus quelques bits de service, plus une centaine doctets (en Chaque paquet est trait sparment; dans la mesure des possibilits du rseau. Les paquets de retour, chacune sur un chemin qui lui est propre, et sont rachemins par les routeurs la discrtion de ceux-ci. Aussi le protocole IP seul prsente-t-il les dfauts suivants : q Lordre darrive des paquets nest pas garanti. q Le dbit nest pas garanti. q Le contenu des paquets nest pas garanti.
Chapitre I
q
Certains paquets se perdent en route. q Certains paquets arrivent plusieurs fois. la base du fonctionnement de l'Internet, on trouve les deux protocoles de communication TCP et IP, l'usage est de parler de TCP/IP, toutes les machines raccordes partagent ces protocoles. IP sert d'intermdiaire entre les protocoles applicatifs et les protocoles de transmission de bas-niveau comme Ethernet, FDDI, HDLC...etc. IP peut donc fonctionner sur des liaisons faible ou haut dbit. L'information transmettre est dcoupe en paquets de petite taille. Chaque paquet, outre l'information qu'il est charg de dlivrer, possde l'adresse de l'metteur ainsi que celle du destinataire. Pour atteindre son destinataire, un paquet passera dun routeur (commutateurs de paquets) lautre... jusqu' destination. Les machines possdent un identificateur unique (le IP), il est reprsent par quatre octets, un dcoupage logique interne permet de numroter les rseaux, les sous rseaux et enfin les machines. Les plages de numros IANA ( Internet Assigned Number and naming Authority) par le biais de relais nationaux. Il n'y a pas (en principe) un chemin unique pour acheminer les paquets d'un metteur vers la machine destinataire. Les routeurs du rseau grent des tables de routage pour crer des chemins vers les diffrents rseaux qui constituent l'Internet. Les paquets destins une mme application, peuvent emprunter des chemins diffrents, arriver dans le dsordre, trs exceptionnellement tre perdus. IP assure la traverse du rseau, mais n'assure pas le contrle de la transmission. Une nouvelle version de l'adressage IP, connue sous le nom de IPNG ( IP New Generation), devrait permettre l'Internet de continuer sa croissance.
I.4.3 Interface entre TCP et IP :

Lutilisateur de IP (en gnrale TCP ou UDP) dispose de deux primitives. Emission et indication de rception q la primitive mission et accompagne de principaux paramtres correspondant aux divers champs du data-gramme IP : Adresse source et adresse destinataire. Numro du protocole. Services utiliss. Identification du paquet. Autorisation du paquet. Dure de vie. Longueur des donnes.
13
Chapitre I
Options. Donnes reues. La primitive indication de rception fournit suivants : Adresse source et adresse destinataire. Numro du protocole. Indicateur de type de service. Longueur de donnes reues. Options. Donnes reues.
au
rcepteur
les
paramtres
I.4.4 Rpartition des services entre TCP et IP : Le protocole TCP assure les fonctions suivantes :
q
q q q q
Transmission de donnes de taille quelconque en mode connexion. Restitution des messages dans l ordre. Multiplexages de plusieurs communications sur une seule connexion. Contrle de flux. Retransmission en cas derreur.
orient
Le protocole IP assure les fonctions suivantes :

q q q
Transmissions de donnes en mode sans connexion. Routage des donnes par lintermdiaire de passerelles. Fragmentation des donnes quand leur taille nest pas limite.
14
Chapitre II
Le Web
Introduction :
le confond souvent avec lInternet, alors quil nen constitue quune ressource parmi Le mot Web dsigne en anglais la toile d'araigne, donc World Wide Web dsigne la toile d'araigne mondiale. Le World Wide Web est la communaut des serveurs utilisant le protocole HTTP pour donner accs des documents de type hypertexte crits en format HTML. Il est, depuis 1993, le service Internet le plus populaire, en ce moment mme de nouveaux clients et serveurs se raccordent au Web. Tous les services en ligne offrent ou offriront sous peu un accs WWW. Les dernires estimations attribuent 85% du trafic Internet au WWW. Ce chapitre donne un bref aperu des concepts de client, de serveur et de protocole utilis pour le World Wide Web. Nous y dcouvrirons aussi le
II.1 Dfinition
Le World Wide Web est un systme de document Hypermdia distribu. Il a t dvelopp au CERN (centre europen de recherche en physique nuclaire) par Tim Berners-Lee en 1989. Ce systme fonctionne en mode Client/Serveur. Les logiciels clients ou navigateur WEB ou encore browser en anglais utilisent le protocole de communication HTTP (Hypertext Transfert Protocol) pour accder via le rseau Internet au document hberg sur un serveur WEB distant. Ces documents sont reprsents laide dun langage de description des pages, le HTML (Hypertext Markup Language). Ce langage, dit balises, permet de doter certains mots ou images d'une proprit d'hyperlien. Ces liens sont indiqus visuellement sur la page dcran, et un simple clics au-dessus permet de se connecter au site possdant linformation sousjacente.
II.2 Les outils du Web

Les outils clients daccs au WWW sont Netscape, Internet Explorer et Mosaic les plus connus pour les terminaux intelligents, mais il y en a dautres, comme Cello, et Lynx pour les terminaux en mode ligne. Netscape, cr au NCSA (National Centre for Supercomputing Application) est comme Lynx de lun logiciel gratuit (freeware) et qui, comme le serveur WWW, tourne sur toutes les plates-formes et sous la plupart des systmes dexploitation existants. Netscape donne accs des textes comportant des liens hypermdia, qui par cliqua ge, vont rechercher
16
Chapitre II
Le Web
et afficher dautres mdias (textes, images, sons, vidos) qui se trouvent soit sur le mme ordinateur que celui o se trouve le texte dorigine soit peut-tre sur un ordinateur situ dans lhmisphre oppos. Les liens hypermdia peuve permettre laccs direct une autre partie du mme texte. Les documents hypermdia se prsentent comme des pages dfilantes dun livre lectronique en ligne. Quand lutilisateur est dans un document, il peut passer par un simple clic de la souris sur un mot ou groupe de mots une autre partie de ce document "constituant ainsi un lien hypermdia" ou un autre document situ dans le monde Internet, ventuellement prs de chez lui ou peut-tre dans un autre pays.
II.2.1 Les pages Web

Une page Web appele aussi page HTML, est un document qui sera charg en un seul bloc par le client Web puis affich pour sa lecture. Une page Web peut tre aussi longue quon le dsire. Les pages Web peuvent tre cres avec un diteur de langage HTML ou simplement avec nimporte quel diteur de texte. Lors de sa cration, une page Web est sauvegarde sous le nom dun fichier portant lextension. HTML ou HTM.
a) LURL, un principe de navigation

Les URL (Uniform Resource Locators) sont les noms donns aux hypertextes. Un URL est le moyen unique pour localiser toute source dinformation sur le WWW car chaque organisation possde son propre identificateur. Un URL peut tre un serveur ftp, un fichier sur notre disque dur, un serveur gopher, une image, une adresse courrier, un serveur de News, un serveur telnet et bien sr un serveur http ou un serveur Web.
b) La syntaxe des URL :

Mme s'il est invisible pour l'utilisateur, l'URL est essentiel pour le fonctionnement du WWW. La syntaxe de l'URL est cependant simple et universelle, soit:
Bien que cr avant tout pour supporter les documents de type hypertexte, le WWW est conu pour donner accs tous les services traditionnels de l'Internet, comme les News, le Gopher ou le FTP. Le premier lment de l'URL indique le nom du type de service. Cet lment doit se terminer par un deux-points. Le second lment de l'URL est l'adresse de l'hte. Il dbute toujours par deux barres obliques, et se termine avant la prochaine barre oblique. Il peut parfois se
17
Chapitre II
Le Web
terminer par un deux-points suivi d'un chiffre, indiquant alors une connexion sur un port non standard. Le troisime lment de l'URL indique la localisation du document, relativement la position du rpertoire racine du serveur. Tout ce qui se trouve entre des barres obliques est un lment du chemin d'accs au document, tandis que ce qui se trouve aprs la dernire barre oblique constitue le nom du document. Le nom du document se termine par une extension, qui indique de quel type de document il s'agit. On peut aussi trouver un signe cardinal (#) suivi d'un mot aprs le nom du fichier. Cette indication est un pointeur vers une localisation particulire l'intrieur d'un document. Le type de connexion, appel aussi mthode de connexion, peut tre : q HTTP pour accder un serveur http Exemple : http : //www.ALLHTML.com/defaut.html q FTP pour transfrer des fichiers. Exemple : ftp : // ftp.itoran. DZ /machine q NEWS pour les forums de discussion. Exemple : news : comp.infosystems.www.users q GOPHER pour les serveurs gopher. Exemple : gopher : //gopher.entreprise.dz q WAIS pour les interrogations de base de donnes Exemple : wais : // info.bib.dz
II.2.2 Les Hyperliens :

Le Web utilise des liens graphiques interactifs. Chaque page Web est relie dautres pages Web par des Hyperliens (mots, phrases, graphiques ou Images). Chaque hyperlien fait rfrence une adresse Web dune page, contenant des informations supplmentaires sur un sujet prcis. En cliquant simplement sur une rubrique dans un Browser, il est possible daccder la page slectionne. Quand on clique sur un hyperlien, une demande est transmise au serveur Web appropri pour une rcupration instantane dinformations, et cela nimporte o dans le monde. La figure si-aprs donne un exemple sur les possibilits de navigation dans un document en utilisant la mthode des hyperliens.
18
Chapitre II Une page hyperliens
Le Web
Navigation dans le Web
II.3 Structure du rseau WWW

II.3.1 Lapproche Client/Serveur :
Le Web fonctionnant en client/serveur, il est ncessaire quun protocole commun permette les changes entre le logiciel client et le serveur Web. Ce protocole au-dessus des protocoles TCP et IP sappelle le HTTP. Le principe est simple : q Le client demande une connexion vers le serveur laide dune requte GET avec pour paramtre le document demand. q Le serveur accepte la connexion et fournit au client le document dont ladresse est lURL demand. q Le serveur coupe la connexion. Note : Lchange entre le serveur et le client est sans tat. Il ny a donc pas de connexion permanente. Le client et le serveur noccupent la ligne que durant le
a) Le Client Web :
Le client Web, appel aussi Navigateur ou Browser, peut tre soit un PC, soit un Macintosh ou une plate-forme Unix. Les requtes sont lances partir du client Web, la rponse qui est constitue dun document HTML sera analyse par le client Web puis affiche lutilisateur. Le client Web na pas besoin de connatre le nom du
19
Chapitre II
Le Web
systme ou rsident les informations. Du point de vue de lutilisateur, la connexion seffectue de faon totalement transparente.
b) Le Rle du client :
Un client deux rles essentiels : q Il doit tre capable, partir dune information concernant une adresse sur Internet, de localiser cette information ou doprer de la faon indique par le contenu du pointeur. En ce qui concerne les documents en hypertexte, cela signifie quil doit pouvoir parler au serveur au moyen du protocole HTTP. Comme le Web peut galement grer des informations de sites FTP, Gopher, etc. Il doit aussi tre capable de parler leur langage. q Il doit pouvoir traiter des documents en hypertexte. Chaque page Web charge constitue un document isol crit dans un langage HTML qui renferme non seulement le texte du document proprement dit, mais aussi sa mise en page, sa structure, les liens ventuels vers dautres documents, les images, les sons etc. Le client parle un serveur Web sur le rseau et ce dernier lui envoie un document. Sil sagit dun fichier HTML, il interprte alors le code HTML contenu dans ce document pour formater, puis afficher, convenablement les informations quil vient de recevoir. De mme, cest lui qui va exploiter les liens vers dautres serveurs.
c) Le serveur Web :
Le serveur Web, dnomm aussi serveur HTTP-D (Hypertext Transfer Protocol Daemon) est au sens dUnix, un processus qui tourne sur une plate-forme (PC, Macintosh, Unix) et qui attend des requtes en provenance du client Web.
client serveur
Demande de documents Protocole HTTP Documents demands : HTML, Texte, Images (GIF, JPEG), Applets Java, etc.
Le serveur transmet au client des donnes au format HTML
20
Chapitre II
Le Web
HTTP sert transmettre des documents Web rclams au serveur par le navigateur. Contrairement FTP, la connexion ici est temporaire. Elle sinterrompt ds que la transmission est effectue, sans demander confirmation lutilisateur. Il peut arriver que plusieurs liaisons HTTP mnent paralllement au mme ordinateur. Cest ent le cas lorsquun document HTML contenant plusieurs Inline Image est charg. Le document proprement dit, ainsi que chacune des images sont transmis par une connexion distincte. On peut rgler, dans la plupart des navigateurs, le nombre maximal de connexions simultanes, ainsi tablies. En principe, lutilisateur dun navigateur Web ne peut pas intervenir directement sur la connexion HTTP que le logiciel est en train dtablir. Les commandes permettant de guider la connexion HTTP restent le plus souvent caches aux yeux de lutilisateur Web. Le navigateur assure lui seul la communication Internet. Cest ce qui rend le Web si convivial et indulgent. Le numro de port donnant accs aux serveurs HTTP est 80. La communication sur le Web peut tre rs : q Le navigateur dtermine lURL. q Il demande au DNS ladresse IP correspondante. q Le DNS renvoi cette adresse. q Le navigateur tablit une connexion TCP avec le port 80 du serveur de cette adresse. q Il envoie alors la commande GET du fichier demand. q Le serveur envoi le fichier. q La connexion TCP est libre. q Le navigateur interprte le fichier HTML et affiche la page. q Le navigateur demande une nouvelle connexion pour afficher chaque image de cette page.
II.3.2 Comment se connecter ?

Le Web est constitu de centaines de milliers de serveurs connects entre eux (figure suivante) Pour se connecter ce rseau, il faut normalement passer par lintermdiaire dun fournisseur daccs, accessible travers la ligne tlphonique. Le WWW est un ensemble de clients et de serveurs qui admettent le protocole HTTP, comme protocole d'change d'informations entre ses clients et ses serveurs. Il existe de nombreux fournisseurs daccs susceptible de procurer au client un nom dutilisateur et un mot de passe. La facturation se fait gnralement selon le temps de connexion sur le serveur du fournisseur daccs, point de passage oblig pour laccs au rseau. Des services complmentaires sont souvent proposs comme une adresse de gerie. La connexion un fournisseur daccs implique
21
Chapitre II
Le Web
la disponibilit de certains logiciels sur le poste client, souvent proposs par le

.
Lapplication essentielle pour accder au Web est un explorateur ou navigateur Internet, application qui prsente les pages du Web dans une fentre de Windows ou dun autre systme dexploitation. Les principaux explorateurs disponibles sont Internet Explorer de Microsoft et Navigateur Netscape. Ces logiciels impliquent lexistence de couches de communication pour effectuer la connexion avec le fournisseur daccs. Par exemple, sous Windows 95, ou Windows 98 on peut utiliser lExplorateur Internet de Microsoft pour lexploration, il est disponible gratuitement, et Microsoft Network, qui est livr avec Windows 98, pour raliser la connexion au fournisseur daccs Microsoft (MSN). La connexion peut aussi tre ralise avec le logiciel daccs rseau distance de Windows 98.
II.3.3 Les informations du Web

Le Web supporte des documents Hypertextes et Hypermdias, y compris les graphiques, les sons et la vido.
a) Lorganisation des pages Web :

Pour dvelopper un serveur Web, il faut prendre en considration : q La prsentation Web : cette prsentation constitue dune ou plusieurs pages Web contenant du texte ou des images, lies entre elles de faon justifie et qui globalement, proposent un ensemble dinformations qui donnent limpression dun ensemble cohrent. q La page daccueil : cette page est la racine du serveur Web. A partir de cette page, les lecteurs peuvent pntrer dans le serveur Web. Elle contient gnralement une vue densemble de ce que nous allons trouver dans le serveur Web.
II.4 Les Web chercheurs dinformation :

Il existe des Web spcialiss dans la recherche d'information sur l'Internet. Ces Webs sont coupls avec des bases de donnes qui sont alimentes en permanence. Ils permettent de retrouver n'importe quel type d'information, que ces informations soient stockes sur un Web ou sur un serveur ftp. En pratique, ils sont presque exhaustifs dans le monde des Web, et encore assez pauvres dans le monde des serveurs ftp.
22
Chapitre II
Le Web
Il est important que vous mettiez un de ces chercheurs dans notre liste de pages favorites aprs les avoir utiliss et choisi celui qui nous convenait le mieux.
a) Principe de fonctionnement
Le but de cette section est de s'intresser au mode de fonctionnement de ces diffrents moteurs de recherches.
Internet
Client
Donnes :
Fichier HTML, Word, PDF, base
de donnes, etc
Serveur Web + indexeur +moteur de recherche
Un moteur de recherche Internet
Dun point de vue thorique : Les moteurs de recherche, au sens vritable du terme, sont ceux qui effectuent eux-mmes la recherche et l'indexation des pages Web sans intervention humaine. Les sites d'indexation automatique, comprennent tous : q Une base de donnes. q Un logiciel de mise jour de cette base de donnes. Ces logiciels de mise jour, sont appels Robots, nom qui indique bien qu'ils correspondent des programmes automatiques. Un robot est un programme simple dans le principe, mais que les optimisations rendent complexes dans leur programmation.
23
Chapitre II
Le Web
Tout d'abord, ces programmes ont deux missions essentielles : q Lire l'information et la grer. q Chercher dans ces informations d'autres adresses o aller chercher. La premire de ces deux tapes est facilement comprhensible; elle permet de faire de l'indexation textuelle qui revient mmoriser des mots cls, ventuellement les phrases dans lesquelles ils apparaissent et surtout leur localisation, c'est--dire leur adresses URL. La recherche des mots cls se fait par des logiciels comme Glimse, agrep ou free Wais qui sont plus ou moins performants et qui ont des fonctionnalits plus ou Ces logiciels lisent donc un fichier et mettent dans un index les mots lus dans le fichier. Dans cette lecture, ils analysent parmi les mots rencontrs, les adresses d'URL, atre de nouvelles adresses de Web explorer par la suite. Cette analyse doit tre assez fine pour prendre en compte les aspects suivants : q Mmoriser l'adresse IP du site trouv et les noms des fichiers correspondants, pour viter la redondance et le bouclage des noms de serveur. q Ne pas appeler les programmes CGI, les pages ISINDEX afin de ne pas provoquer des requtes intempestives. De mme les URL mailto:, ou telnet: ne sont pas excutes. q Mmoriser les dates de visite des pages de manire ne plus repasser pendant une dure paramtre. C'est ainsi que les programmes de recherche scrutent en permanence Internet. Et lorsque vous demandez Lycos de chercher un mot cl, il effectue la recherche non pas sur Internet mais dans son fichier de recherche.
24
Chapitre III
HTML
III.1 Historique
World Wide Web (W.W.W.) est ne la fin des annes 80 au laboratoire europen de Physique des particules du CERN. Lobjectif initial tait de rendre le rsultat des travaux de recherche accessibles du monde entier sur un rseau appel lpoque la "mre de tous les rseaux" : Internet. Les protocoles de communication existants comme Telnet et le FTP ne permettaient pas la mise en page des documents transmettre car ceux-ci devaient tre visuellement attrayants, pourvus ments multimdias et accessibles en tant que documents Hypertextes. Jusquen 1990, laccs aux informations de ce rseau exigeait une bonne connaissance technique. Cette opration tait tellement complique que mme des physiciens rencontraient de grandes difficults pour changer des donnes. Un de ceux-ci, le clbre Tim Berners-Lee, a cr une mthode pour relier avec facilit des documents laide de lien hypertexte. Lide ntait pas nouvelle mais son langage HTML simple a russi l o des projets hypertexte ambitieux avaient chou. Jusquen 1993, prs de cent ordinateurs furent quips travers le monde pour fournir des pages HTML. Ce progrs a permis de communiquer laide du langage HTML dans des domaines aussi varis que lducation. Les pages conues avec le langage HTML ou Hyper Text Markup Longuage ou encore langage balisage hypertexte constituent aujourdhui le systme de base dInternet. Elles offrent une grande varit dapplications. Elles peuvent inclure du texte ainsi que des graphiques fixes ou anims, du son, de la vido et mme des programmes interactifs complets ( l'aide de Java ou Java script). Le HTML ne se rencontre pas exclusivement sur le Web, celui ci est galement utilis pour les -ROM multimdia et du nouveau format haute capacit DVD (Digital Versatile Disk).
III.2 Gnralits :
Le HTML nest pas un langage de programmation, proprement parl, mais plutt un ensemble relativement simple de commandes de mises en forme de documents et de liens vers dautres documents (texte images, vido, base de donnes ou programme quelconque) qui peuvent se trouver sur le mme serveur ou sur un autre serveur. Pour les serveurs peu importe le type dordinateur ou navigateur (browser en anglais) recevant les informations codes en HTML. Tous les navigateurs savent interprter les balises HTML et sen servir pour dterminer la structure du document en dautres termes le titre, les sauts de paragraphes, lemplacement des images etc.
Chapitre III
HTML
Un simple diteur de texte ASCII suffit pour lcriture ou la lecture dun document HTML. Donc un document HTML nest rien de plus quun texte ASCII dont le nom possde lextension HTML ou HTM selon le systme dexploitation
:
Le langage HTML a dj une histoire donc plusieurs versions et cet effet les concepteurs professionnels identifient trois types de pages HTML : 1. Les pages de premire gnration qui utilisent lancienne version 1.0 de HTML sont en principe constitues de texte a images peu attractives. 2. Les pages de seconde gnration qui utilisent quelques lments de HTML 2.0, 3 et 3.2, comme les fonts de page, le cadrage du texte dans les tableaux et les formulaires de commandes en ligne. 3. Les pages de troisime gnration qui correspondent au langage HTML 4.0 standard actuel au moment de la rdaction de ce projet.
a) Un langage balises :
Les commandes HTML sont appeles tags en anglais, ce qui est souvent traduit par marqueur ou balise. Voici les diffrents types de balises HTML quon rencontre : q Balises de dfinition contenant des mta-informations telles que <HEAD> ou <TITLE>. q Balises de mise en forme (formatage) du document telles que par exemple <B> <I> ou <TABLE>. q Balises de liens telles que <A HREF>. q Balises d'insertions de fichier multimdia.
b) Format des balises :

Une balise est constitue dun ou plusieurs mots cls encadrs par les deux :
<TITLE>, <H1>, <P>,etc.
Aucun espace ne doit figurer lintrieur dune balise. Ces derni res peuvent tre crites indiffremment en majuscules ou en minuscules. Il existe deux types de balise :
27
Chapitre III
HTML
Les balises monolithiques qui apparaissent telles quelles, dans un contenu se suffisent elles-mme. Les balises de fermetures sont facultatives. Par exemple :
q
<P>
Cette balise indique une rupture de paragraphe. q Les balises conteneurs formes dune balise initiale et dune balise terminale, elles dlimitent une partie du contenu et en spcifient laspect, la signification ou le traitement y appliquer. Par exemple :
<CENTER> Ce texte est centr </CENTER>
Le navigateur affichera le texte centr dans lcran daffichage. Les deux balises extrmes sont identiques un dtail prs. Le mot cl de la balise terminale est Certaines balises peuvent recevoir des paramtres, ceux-ci sont indiqus lintrieur des signes < et >, aprs le nom de la balise de dbut. Chaque paramtre comprend un nom, suivi du signe = et de sa valeur.
c) Documents HTML :
Lensemble du fichier est plac lintrieur dun conteneur <HTML> . compos de deux grandes parties qui apparaissent dans cet ordre : q Len-tte du document. q Corps du document. Exemple : Il est
28
Chapitre III
HTML
La balise < !DOCTYPE...> doit figurer avant la balise <HTML> du document principal (ou de chaque page du projet, mais ce n'est pas obligatoire). Elle permet dindiquer le niveau de conformit du document avec la version du HTML. Voici quelques exemples de dclarations possibles : Version HTML. HTML 1.0 HTML 2.0 HTML 3.0 HTML 3.2 HTML 4.0
Commande. <!DOCTYPE HTML PUBLIC "-//IETF//DTD Level1//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
c.1) En-tte du document :

-tte du document est plac dans un conteneur <HEAD>. Il comporte des donnes importantes sur le document lui-mme, dont une seule information est affiche dans la barre du titre du browser (conteneur <TITLE> ). Lensembles des balises essentielles qui peuvent figurer dans len-tte dun document HTML sont : Balise <TITLE> La balise <TITLE> permet de donner un titre un document HTML. Il apparat dans une zone spciale de la partie suprieure du browser (barre de titre). Nombre maximal de caractres est 100. Par exemple :
<TITLE>Projet_site</TITLE>
Balise <BASE> La balise monolithique <BASE> indique une adresse de base qui compltera tous les chemins relatifs. Ses paramtres sont les suivants : q HREF indique lURL du document. q TARGET indique le nom dun cadre (frame). Balise <ISINDEX > La balise monolithique <ISINDEX> indique au logiciel client quil est possible deffectuer une saisie pour interroger un programme externe. Les paramtres possibles sont :
Chapitre III
HTML
ACTION indique le nom de lapplication ou de la DLL sur le serveur permettant deffectuer la recherche. PROMPT permet dafficher le texte du message devant les champs de saisie.
Balise < META > La balise < META > permet de fournir au serveur, des informations sur le site Web par le biais de mots cls afin que les moteurs de recherche le rfrencent mieux. Pour plus dinformation voire annexe B. Balise < LINK > La balise < LINK> permet de dfinir un lien entre un document et un autre. Balise <NEXTID > Identificateur utilis lors de la gnration automatique de page HTML. Indique le document suivant. Il au
c.2) Corps du document :

Le corps du document, plac dans un conteneur <BODY>, comprend le contenu significatif du document cest dire les donnes afficher, tels que le texte, les images, les liensetc. Par dfaut le fond du document est gris clair, les caractres sont noirs, les prises dhypertextes sont bleues quand elles nont jamais t utilises, violettes dans le cas contraire, rouge linstant de la slection (dans le cas de NETSCAPE) . Il est possible de modifier ces paramtres daffichages en ajoutant la commande BODY les attributs suivants : ATTRIBUTS ALIGN ALINK BACKGROUND BGCOLOR BGPROPERTIES Permet de spcifier l'alignement du document (LEFT, CENTER, RIGHT ou JUSTIFY). Uniquement I.Explorer. Permet de spcifier la couleur des liens actifs. Permet de spcifier l'image d'arrire-plan (format gif ou jpeg). Permet de spcifier la couleur d'arrire-plan (voir annexe A pour la codification des couleurs). Si la valeur est FIXED, le fond reste fixe lors du droulement du
30
Chapitre III
HTML
document. Uniquement I.Explorer. CLASS LEFTMARGIN LINK SCROLL STYLE TEXT TOPMARGIN VLINK EVENEMENT Nom de la classe donne la feuille de style. Permet de spcifier une marge de gauche pour le document (en pixel). Permet de spcifier la couleur des liens. Permet de dsactiver les barres de dfilement du navigateur (valeur : no). Uniquement I.Explorer. Feuille de style intra-ligne. Permet de spcifier la couleur du texte. Permet de spcifier une marge suprieure pour le document (en pixel). Permet de spcifier la couleur des liens visits. Spcifie un vnement Javascript (HTML4.0) (OnClick, OnMouseOver,...).
Exemple:
<BODY BGCOLOR="#FF9900" TEXT="#0000FF" LINK="#FF0000" VLINK="#FF0000" ALINK="#FF0000">
Resultat:
Ici le fond est orange. Le texte est bleu.
c.3) Commenter un document :

On peut commenter le code source du document sans que le navigateur affiche ce commentaire, cela peut s'avrer pratique quand plusieurs personnes travaillent sur le mme projet. Cette instruction est aussi utilise lors de l'criture d'un script Javascript pour cacher le code aux navigateurs non compatibles. Pour se faire on utilise le marqueur < !-- (ou <COMMENT> ) indique le dbut dun commentaire et --> (ou </COMMENT> ) la fin du commentaire. Par exemple :
 Ceci nest pas un commentaire. <COMMENT> Ceci est aussi un commentaire </COMMENT> Conception dun site Web 31
Chapitre III
HTML
c.4) Options de base de la mise en forme :

Tout fragment de texte quon veut afficher avec un enrichissement doit tre plac dans un conteneur qui en dlimite le dbut et la fin.
Mise en forme des paragraphes

La balise monolithique <P> termine un paragraphe et insre une ligne vide aprs le paragraphe (double saut de ligne). Elle peut tre galement utilise pour insrer une ligne vide aprs une image. Elle possde l'attribut ALIGN qui sert aligner le texte ou les images, il prend 4 valeurs : 1. LEFT : Aligne le texte sur la marge de gauche. 2. RIGHT : Aligne le texte sur la marge de droite. 3. CENTER : Centre le texte entre les marges. 4. JUSTIFY : Justifie le texte. La balise <P> possde aussi les attributs suivant : CLASS : Nom de la classe donne la feuille de style. q STYLE : Feuille de style intraligne. q WIDTH : Permet de spcifier la largeur (en colonnes) de la page HTML. q EVENEMENT : Spcifie un vnement Javascript (HTML4.0) (OnClick, OnMouseOver,...). L'attribut NOWRAP permet de ne pas effectuer de retour la ligne.
q
La balise monolithique <BR> effectue un retour la ligne (simple espace) en respectant les marges, elle possde l'attribut CLEAR, qui prend une des trois valeurs : LEFT, RIGHT, ALL, permettant d'insrer un retour la ligne ds que la marge (gauche, droite ou les deux) est libre, il sert aussi mettre des images autour du texte. La balise <NOBR> </NOBR> permet de ne pas effectuer de retour la ligne, elle indique au navigateur que la ligne ne doit pas tre coupe, mme si elle est trop longue, mais la commande <WBR> permet de forcer un retour de ligne dans un texte encadr par <NOBR> . Balise <HR > La balise monolithique <HR> permet dinsrer des lignes horizontales ou filets horizontaux, son utilisation savre trs pratique pour sparer les diffrentes parties dun document. Elle possde plusieurs attributs qui permettent de modifier la forme du trait :
Chapitre III
HTML
q q q
ALIGN : impose la position horizontale du trait (left/right/center). SIZE : la largeur du trait en pixels (de 1 10). WIDTH : Spcifie la largeur de la ligne (en pixels ou % de la NOSHADE : S'il est prsent, l'effet d'ombre (3d) est annul. COLOR : Spcifie la couleur de la ligne (uniquement I.Explorer).
q q
Balise <CENTER> . . . . </CENTER> La balise <CENTER> permet de centrer plusieurs lments sur une page (titres, textes, images, filets, ...). Balise <DIV> La balise monolithique <DIV>
permet de dfinir l'alignement de plusieurs
lments. Elle possde l'attribut ALIGN qui prend 4 valeurs : (elle peut donc remplacer la balise <CENTER> .) LEFT : Aligne le texte sur la marge de gauche. q RIGHT : Aligne le texte sur la marge de droite. q CENTER : Texte centr. q JUSTIFY : Texte Justifi. A noter que depuis la version 4.0 du HTML, la balise <DIV> accepte l'attribut STYLE (feuilles de styles).
q
Balise <BLOCKQUOTE > . . . </BLOCKQUOTE > La balise <BLOCKQUOTE > permet de crer un retrait dans la marge de gauche. Comme les balises <CENTER> et <DIV>, tout lment compris entre les balises d'ouverture et de fermeture bnficiera de ce retrait. Balise <BLINK> . . . . </BLINK> Pour faire clignoter le texte. En effet tout texte compris entre les balises <BLINK> et </BLINK> sera affich avec clignotement. Balise <PRE > . . . . </PRE > Les espaces (plusieurs la suite), tabulations, retour chariot en HTML. Alors pour remdier ce problme cest dire inclure un texte pr -format dans un document HTML on utilise la commande <PRE> . . . . . </PRE>. En effet tout texte compris entre les balises <PRE> et </PRE> sera transcrit de la mme faon.
33
Chapitre III
HTML
Cette balise possde l'attribut WIDTH qui permet de spcifier la largeur (en colonnes) de la page. Cet attribut peut prendre 3 valeurs : 1. 40 2. 80 (par dfaut) 3. 132.
Mise en forme des caractres : Tailles de polices grasses :

Balise <Hn> La balise <Hn> (Head) permet de dfinir le titre d'en-tte de H1 (premier niveau de titre - texte plus large) H6 (dernier niveau de titre - texte plus petit). Cette commande possde les mmes attributs que la commande <P> . Un saut de page est automatiquement gnr aprs un titre. Par exemple :
<H1>Titre de niveau 1</H1> <H2>Titre de niveau 2</H2> <H3>Titre de niveau 3</H3> <H4>Titre de niveau 4</H4> <H5>Titre de niveau 5</H5> <H6>Titre de niveau 6</H6>
Rsultat avec I.Explorer :
Les polices de caractres :

Balise <BASEFONT>
34
Chapitre III
HTML
La balise monolithique <BASEFONT> permet de dfinir la police standard dans lordre utilise dans le document, cependant pour que ce dernier soit visualis correctement (c'est dire avec la police dfinie), il faut essayer d'employer une police standard (Arial, courrier...) toutes les plates-formes, sinon la police paramtre par dfaut sur le navigateur de chaque visiteur sera affiche. La balise <BASEFONT > possde plusieurs attributs :
q q
FACE : Permet de dfinir par ordre de priorit, les noms des polices. SIZE: Permet de dfinir la taille de la police de 1 7 (valeur par
A noter qu'il peut tre utilis de deux manires: Absolue ex : SIZE=2 Relative ex : SIZE= +2 q COLOR : Permet de dfinir la couleur du texte (soit avec le nom de la couleur ou la valeur hexadcimale correspondante). Par exemple :
<BASEFONT FACE="Impact, Verdana" SIZE=2 COLOR="green"> Text
Balise <FONT> . . . . <FONT> La balise <FONT> permet elle aussi de modifier la taille ou la couleur de la police de caractre, et elle emploie les mmes attributs que la balise <BASEFONT>. En ralit elle est identique la balise <BASEFONT> un dtail prs. suivant a le mme effet que lexemple prcdent :
<FONT FACE="Impact, Verdana" SIZE=2 COLOR="green"> texte . . . </FONT>
Mise en forme logique :

A utiliser de prfrence car elles laissent les logiciels clients WWW interprter le formatage du texte. Pour utiliser ces balises, il suffit d'entourer le texte avec la balise d'ouverture choisie et la balise de fermeture correspondante. Voici toutes les commandes de mise en forme logiques : q <EM> texte < /EM> met le texte gnralement en italique. q <STRONG> texte < /STRONG/> met le texte gnralement en gras. q <CODE> texte < /CODE > pour lutilisation dune police chasse
q q
fixe. <SAMP> caractre </SAMP> squence de caractres littraux. <KBD> saisie < /KBD > pour mettre en vidence une saisie de
35
Chapitre III
HTML
q q
<VAR> variable < /VAR > pour indiquer le nom dune variable. <DFN> dfinition </ DFN > pour mettre en vidence une sous dfinition. <CITE> citation </ CITE > pour mettre en vidence une citation (gnralement en italique).
Mise en forme physique :

A utilisation dconseille car ils ne laissent pas dalternatives aux logiciels clients WWW. Ces instructions dites physiques sont plus proches de l'auteur, en effet, avec ces balises ci-dessous c'est lauteur qui dcide ce que le navigateur affichera. Voici toutes les balises de mise en forme physique : q <I> texte </I> met le texte en italique q <B> texte </B> met le texte en gras q <TT> texte </TT> pour lutilisation dune police chasse fixe. q <U> texte </U> souligne le texte. q <STRIKE> texte </ STRIKE > cette commande permet de barrer
q
du texte. <BIG> texte </ BIG > cette commande permet dcrire le texte en plus gros caractres que les caractres en cours. <SMALL> texte </ SMALL > cette commande permet dcrire le texte en plus petits caractres que les caractres en cours. <SUP> texte </ SUP > cette commande permet dcrire le texte en exposant. <SUB> . . . </ SUP > cette commande permet dcrire le texte en indice.
Caractres accentus
Pour inclure des caractres accentus dans un document HTML, on doit remplacer la lettre accentue par l'entit correspondante (code ISO 88-59-1 ou ISO Latin-1). Ceci avant tout pour permettre une harmonisation entre les diffrents systmes d'exploitations et surtout entre les diffrentes particularits de chaque langue. (voir annexe C.) Par exemple : Les caractères accentués. Rsultat : Les caractres accentus.
36
Chapitre III
HTML
Caractres spciaux
Les caractres spciaux sont aussi remplacs par des squences dchappement.(voir annexe D.) Les caractres <,> et & sont interprts par le langage HTML, pour apparatre sans interprtation ils doivent tre rempla : < pour <. > pour >. & pour &.
Mise en forme des listes : Les listes non ordonnes (avec puces)
Ce type de liste est utilis pour des paragraphes de plusieurs lignes. Elle s'obtient avec la commande <UL> (Unordered List) qui permet d'avoir une liste prcde d'une puce dont la forme varie suivant le niveau dimbrication avec dautres listes. La balise <UL> est dfinie avec <LI> qui reprsente un item. La balise <LH> indique le titre de la liste. Voici les attributs de la balise <UL> : ATTRIBUTS ALIGN CLASS COMPACT SRC STYLE TYPE EVENEMENT Permet d'aligner la liste (CENTER, LEFT, RIGHT). Nom de la classe donne la feuille de style. Spcifie une liste compacte. Permet de spcifier une image qui reprsentera la puce. Seulement I.E. Feuille de style intraligne. Permet de spcifier la forme de la puce (DISC, CIRCLE, SQUARE) seulement Netscape. Spcifie un vnement Javascript (HTML4.0) (OnClick, OnMouseOver,...).
Par exemple :
<UL> <LH>Titre <LI>Choix 1 <LI>Choix 2 </UL>
37
Chapitre III
HTML
Rsultat : Choix 1 Choix 2
Les listes ordonnes :

Une liste ordonne s'obtient avec la commande <OL> (Ordered List) qui permet d'avoir une liste numrote qui s'incrmente automatiquement. La balise <OL> est dfinie avec <LI> qui reprsente un item. La balise <LH> indique le titre de la liste. La balise <OL> possde les attributs suivants : ATTRIBUTS ALIGN CLASS COMPACT START STYLE TYPE EVENEMENT Permet d'aligner la liste (CENTER, LEFT, RIGHT). Nom de la classe donne la feuille de style. Permet de rduire la liste. Permet de spcifier quel chiffre la liste va dmarrer. Feuille de style intraligne. Permet de spcifier la forme de la puce (chiffre romain ou arabe en majuscule ou minuscule : 1 - I - i - A - a ). Spcifie un vnement Javascript (HTML4.0) (OnClick, OnMouseOver,...).
Par exemple :
<OL TYPE=I START=2> <LH>Titre <LI>Choix 1 <LI>Choix 2 <LI>Choix 3 </OL>
Rsultat : II. Choix 1 III. Choix 2 IV. Choix 3
38
Chapitre III
HTML
Les listes de dfinition :

La commande est <DL> (Definition List). Elle permet de dfinir une liste avec dfinition. Elle est utilise avec la balise <DT> qui dfinie le terme et <DD> qui dfinie la dfinition du terme. Elle possde les attributs suivant : ATTRIBUTS ALIGN COMPACT CLASS STYLE EVENEMENT Permet d'aligner la liste (CENTER, LEFT, RIGHT). Permet de rduire l'espace occup par la liste. Nom de la classe donne la feuille de style. Feuille de style intraligne. Spcifie un vnement Javascript (HTML4.0) (OnClick, OnMouseOver,...).
Par exemple :
<DL COMPACT> <DT>Terme <DD>dfinition 1 <DD>dfinition 2 <DD>dfinition 3 </DL>
Rsultat : Terme dfinition 1 dfinition 2 dfinition 3
Les listes type menu :

La balise <MENU> permet d'avoir une liste menu. Chaque lment des listes est prcd de <LI>. Elle ne possde que l'attribut COMPACT.
Les listes imbriques :

Il est possible dimbriquer diffrents types de liste. Par exemple :
39
Chapitre III
HTML
<OL TYPE=I> <LI>item <DL> <DT>Terme <DD>dfinition 1 </DL> </OL>
Rsultat : I. item Terme dfinition 1
c.5 liaisons entre pages Web :

Un lien hypertexte permet lobtention dune autre page mme si cette dernire se situe au-del de la page principale. En effet avec un simple clic de souris sur un lien suffit pour tablir la connexion avec le fichier en question. Le navigateur Web analyse lURL et essaye douvrire le document indiqu.
La balise dancrage :
Les liens hypertextes sont cres avec la balise <A> qui signifie ancrage (anchor en anglais). Il peut soit dfinir la source dun lien (texte ou image), soit indiquer une destination. La balise dancrage dbute avec "<A". elle est ensuite suivie dune rfrence HREF "hypertext reference" puis du nom ou de lURL (Uniform Resource Locator) de la page vers laquelle on veut crer le lien. Aprs la fermeture de la commande dancrage initiale ">", on saisit le texte qui saffichera au format du lien hypertexte et clturera avec la balise </A>. Par exemple :
<A HREF="http://www.allhtml.com">D&eacut e;couvrez All HTML</A>
Si on pose le pointeur de la souris au-dessus du texte "Dcouvrez All HTML", il prend la forme dune main, ce qui indique la prsence dun hyperlien dans le document HTML. Entre temps, le browser affiche lURL du lien dans la barre dtat. La balise <A> possde les paramtres suivants : ATTRIBUTS ACCESSKEY Permet de spcifier une touche (ou groupe) de raccourci.
Chapitre III
HTML
CLASS HREF NAME STYLE TARGET TITLE EVENEMENT
Nom de la classe donne la feuille de style. Spcifie le type de lien, interne ou externe ainsi que le protocole. Spcifie une ancre laquelle il est possible de faire rfrence dans un autre lien Feuille de style intraligne. Permet de spcifier le cadre (pour une frame) de destination. Spcifie une aide (bulle) lors du passage de la souris sur le lien. Spcifie un vnement Javascript (HTML4.0) (OnClick, OnMouseOver,...).
Mthodes de liaison :
Il existe deux mthodes importantes pour relier les pages Web entre elles : les liaisons relatives et les liaisons absolues. 1. Liaison relative Lorsquon cre un lien entre deux pages du mme ordinateur, il nest pas pcifier ladresse Internet complte. Par exemple si nos deux pages se situent dans le mme rpertoire, il suffit dutiliser simplement leur nom de fichier HTML.
<A HREF="pagedeux.htm">Aller en page 2.</A>
2. Liaison absolue Cest dans le cas o on utilise lURL complet dans la dfinition dun lien (adressage prcis de la page). Ce type de liaison fournit un pointeur exact sur lemplacement des informations avec lequel :
<A HREF="http://www.jasc.com">Paint Shop Pro</A>
Catgories de liens hypertextes

En principe, on distingue deux catgories de liens hypertexte : q Les liens internes. q Les liens externes.
41
Chapitre III
HTML
Liens internes Lien vers une partie du document courant : Ce type de liens permet de se dplacer l'intrieur d'un fichier HTML sans que le visiteur soit oblig de faire "scroller" la fentre. Le visiteur va donc cliquer sur un lien et il sera amen vers l'ancre. Pour cela deux tapes sont ncessaires : 1. <A NAME= "etiquette"> pour dfinir le point de branchement de nom : etiquette. 2. <A HREF= " #etiquette">ancre</A> pour effectuer le lien sur le point
de branchement de nom etiquette, en cliquant sur la prise dhypertexte: ancre. Lien vers un document local: La commande est : <A HREF="chemin/nomdefichier">ancre</A> pou effectuer le lien sur le fichier de nom "nomdefichier", on clique sur la prise hypertexte : ancre. Eventuellement le chemin partir du rpertoire du document "matre". On peut aussi tablir un lien vers une partie de ce document avec la commande ci-dessus : <A HREF="chemin/nomdefichier#etiquette">ancre</A> pour effectuer le lien sur le point de branchement de nom etiquette, du fichier "nomdefichier", on clique sur la prise dhypertexte : ancre. Liens externes Les liens externes commencent comme les autres liens, c'est dire avec la balise <A HREF="..., par contre suivant le protocole, le reste de la syntaxe varie. Exemples: Lien externe vers un site http.
<A HREF="http://www.microsoft.com/internet">Microsoft Internet</A>
Lien externe vers un serveur FTP.

<A HREF="ftp://ftp.allhtml.com">FTP All HTML</A>
Lien externe vers un serveur de news. Pour que ce lien soit valide il faut que le visiteur soit abonn ce serveur de news. <A HREF="news:news.multimania">Les news Multimania!!</A>
42
Chapitre III
HTML
Avec un lien externe vous pouvez galement proposer un fichier (.EXE, .ZIP, son,
<A HREF="film.mov">Cliquez ici pour tlcharger un film</A>
c.6 Les images :

Lutilisation des images plus en moins animes rend un site non seulement attrayant, mais aussi plus expressif, voire dynamique, Cependant, il faut bien faire attention car des problmes de temps daccs peuvent apparatre. Par consquent, si lemploi dimages est ncessaire, ces dernires doivent avoir imprativement une dimension modre. Pour une page Web, la profusion de couleurs est inutile et un nombre maximal de 256 pour une belle image suffit amplement. De mme, 16 couleurs suffisent souvent pour mettre en valeur un dessin. Si des images proviennent dun scanner, l aussi il faut respecter des limites: une rsolution de 72 points par pouce est suffisante. Avec ces restrictions, les rsultats sont tout fait satisfaisants et le volume des donnes transmises par le rseau reste toujours raisonnable. Cependant certains utilisateurs configurent leur navigateur afin de ne charger aucune image, toujours dans ce mme souci de rapidit daffichage. Pour que ces utilisateurs perdent le moins dinformations possibles, il faut prvoir de remplacer limage par un texte la dcrivant afin que lutilisateur juge si cest important ou non de er. Ce texte est affich laide de lattribut ALT de la balise <IMG> . On a utilis cet attribut pour permettre laffichage dinfos bulle (sur les navigateurs rcents) lorsque lutilisateur dplace le curseur de sa souris sur lemplacement de limage. Les deux commandes qui permettent linsertion dune image (gif ou jpg, ou encore png) sont :
1) <IMG SRC="nom_image.gif">
Pour insrer une image locale, o "nom_image.gif" est le nom complet du fichier avec ventuellement son chemin relatif partir du rpertoire du document HTML.
2) <IMG SRC="URL">
Pour insrer une image distante. URL tant ladresse complte du fichier image. Voici les attributs de la balise <IMG> :
43
Chapitre III
HTML
ATTRIBUTS ALIGN ALT BORDER HEIGHT HSPACE LONGDESC LOWSRC NAME SRC STYLE VSPACE WIDTH Spcifie l'alignement de l'image par rapport au texte. Affichage d'un texte (ou lgende) de l'image. Permet de dterminer la largeur d'une bordure (en pixels). Spcifie la hauteur (en pixels) de l'image. Spcifie l'espacement laisser droite et gauche de l'image (en pixels). Spcifie l'URL d'un document contenant une description complte de l'image. Permet de spcifier le chemin d'une deuxime image (plus lgre) pour un affichage plus rapide. Seulement Netscape. Nom de l'image (utile pour Javascript). Indique le chemin de l'image (ex: gif/image1.jpg). Feuille de style intraligne. Spcifie l'espacement laisser en haut et en bas de l'image (en pixels). Spcifie la largeur (en pixels) de l'image.
EVENEMENT Spcifie un vnement Javascript (HTML4.0) (Onclick, Onabort...). Les images peuvent aussi servir de prises hypertextes : q Soit toute limage ragit un clic. q Soit limage ragit en fonction de la zone o le clic sest produit : on parle dans ce cas l dimage cliquable ou ractive ou encore dimage sensible.
Insertion dun lien graphique :

La commande est la suivante :
<A HREF="#etiquette"><IMG SRC="nom_image.gif"></A>
Pour effectuer le lien sur le point de branchement de nom : etiquette du document courant, on clique sur limage "nom_image.gif" qui est la prise dhypertexte. Tout ce qui a t vu sur les liens est videmment applicable ici.
44
Chapitre III
HTML
Insertion dimage cliquable :

La balise <MAP> permet de crer une image ractive (ct client) en HTML. L'image ractive est utilise gnralement pour dfinir plusieurs liens (interne ou ge, elle est souvent utilise pour des banderoles. La balise <MAP> doit tre utilise avec la balise <AREA> . La balise <AREA> possde trois attributs : SHAPE qui peut prendre trois valeurs : RECT pour un rectangle. CIRCLE pour un cercle. POLY pour un polygone. q COORDS : Indique les coordonnes des coins suprieurs gauche et infrieur droit de la zone pour un rectangle RECT. Indique les coordonnes de chaque angle du polygone si on opte pour la valeur POLY. Indique les coordonnes du centre du cercle et la dimension du rayon de ce mme cercle pour la valeur CIRCLE. q HREF dfinit la page de destination du lien correspondant la zone. On peut bien entendu, utiliser un lien interne ou externe. Exemple d'une image ractive compose d'un rectangle (zone1) et d'un cercle (zone2). Chaque zone constitue un lien ver un paragraphe du document courant :
q
MAP NAME="TESTMAP"> <AREA SHAPE="RECT" COORDS="5,5,90,40" HREF="#pargraphe1"> <AREA SHAPE="CIRCLE" COORDS="139,23,20" HREF="#paragraphe2"> </MAP> <IMG SRC="gif/area.gif" BORDER=0 WIDTH=191 HEIGHT=45 USEMAP="#TESTMAP" ALT="Exemple dutilisation de le balise MAP">
<
c.7) Hypermdia : hypertexte et hypermdia

Hyper signifie plus ou au-del. Hypertexte est appel hypermdia dans la mesure o il comporte des fichiers audio et vido. Les navigateurs font appel des programmes externes, pour palier leur incapacit traiter certaines formes de donnes. Par exemple, si un navigateur ne sait pas dployer une squence vido il fait appel uate pour lire cette squence. Bien videmment il faut que cette application soit installe sur le micro-ordinateur de lusager.
45
Chapitre III
HTML
Cration danimation
Il existe plusieurs moyens dapporter du mouvement un site Internet. Les gifs cre par Compuserve en 1989) sont certainement les plus efficaces et les plus faciles mettre en uvre pour faire bouger des icnes et ajouter des animations, et donc de lintrt, une page Web. En effet une image au format importants : 1. La transparence, pour intgrer parfaitement des logos une page. 2. La possibilit de sauvegarder une chane d'image qui accompagne d'instructions permet de crer une animation. De nombreux utilitaires graphiques permettent de mettre en uvr e un gif anim. Certains sont disponibles en freeware et dautres, aux fonctions complexes, sont commercialiss. La cration dun gif anim est tellement simple quelle peut se : 1. Slection de la srie dimages qui va constituer la source. 2. Inclure les diffrents contrles (commentaire, temporisation...) pour Il est possible de prciser combien de fois l'animation sera joue. Habituellement, elle se fait avec lattribut LOOP (boucle) qui doit tre fixe entre 0 et 32760. Dans cette technique, rien ne distingue un GIF anim dun GIF classique, seul le contenu du fichier connat les informations pour lanimation. Les navigateurs telle que Netscape et I.Explorateur supportent le format gif89a de faon native. Donc pour la consultation, cette technique danimation ne requiert
Le son :
L'intgration d'un fichier son (.MIDI, .WAV, .AU ou .AIFF) dans une page Web peut s'effectuer de diffrentes faons : 1. Soit avec la balise <BGSOUND> (spcifique I.Explorer) 2. Soit avec la balise <A HREF> 3. Soit avec la balise <EMBED> Le tag <EMBED> , en particulier, permet dintgrer dans un document HTML nimporte quel fichier son. Le format de fichier na aucune importance, car ce nest pas le navigateur qui le lira mais un programme externe compatible. Voici comment procde le navigateur Web : q Lorsquil rencontre un tag EMBED, il identifie le type du fichier intgr
46
Chapitre III
HTML
Sil ne reconnat pas un format, il le signale sous forme dicne Dans le cas contraire, il reprsente le fichier par son icne habituelle, la demande de lutilisateur, il active le programme associ auquel il
Voici un exemple dutilisation de la balise <EMBED> :

<EMBED SRC="win.wav" WIDTH="80" HEIGHT="50" AUTOSTART="FALSE">
SRC indique le fichier son. q WIDTH indique la largeur de licne. q HEIGHT indique la hauteur de licne. q AUTOSTART indique si le fichier son est jou automatiquement.(Par dfaut il est gal TRUE) Lalignement est dfini avec le tag ALIGN . Les autres attributs de ce tag sont galement applicables
q
La vido Voici la dernire des merveilles du multimdia que le HTML peut nous offrir. En effet Nous pouvons placer dans nos pages Web des liens vers des clips vido. Les assez consquents, et les visiteurs qui souhaitent les visionner devront tre quips de connexions rapides, sils ne veulent pas sennuyer charger des fichiers reprsentant plusieurs centaines de Kilooctets. Voici les diffrents formats vido quon peut intgrer dans une page HTML : q MOV : Il sagit du format QuickTime dvelopp au dpart pour le Macintosh. Cest le format vido le plus rpandu sur le Web. q AVI : ce format a t introduit avec Vido for Windows, il est en standard dans Windows 95. q MPG : Il sagit dun nouveau format des fichiers plus petits avec une L'intgration d'un fichier vido peut s'effectuer de diffrentes faons : 1. Soit avec la balise <A HREF> 2. Soit avec la balise <EMBED> Avec la balise <A HREF> la procdure consiste appeler cette vido par un lien hypertexte. Exemple :
<A HREF="video.avi">Cliquez ici pour voir un clip !!</A>
47
Chapitre III
HTML
Comme pour les fichiers audio, la balise <EMBED> permet dinclure nimporte quelle vido. Exemple :
<EMBED SRC=" video.avi." WIDTH=200 HEIGHT=200 AUTOSTART="FALSE" LOOP=1>
Lattribut LOOP dfinit le nombre de boucle de la diffusion de la vido. En outre, nous pouvons dfinir lalignement avec le tag ALIGN : gauche (LEFT), droite (RIGHT)ou centr. Les autres attributs de ce tag sont galement possibles.
c.8) Les formulaires HTML

Le HTML est une route double sens cest dire quon peut galement exploiter nos pages Web pour recueillir des informations provenant de nos lecteurs. En effet un formulaire HTML fait partie dune page Web et comprend plusieurs champs dans lesquels le visiteur est invit saisir une information ou opter pour un choix. L'information est ensuite envoye l'aide de scripts sur le serveur qui hberge notre site puis renvoye dans la plupart des cas sur ladresse lectronique de notre choix. Par exemple le bon de commande est une utilisation trs rpandu des formulaires en ligne. Un formulaire commence par la balise <FORM> et se ferme par la balise </FORM>. il peut se trouver nimporte o dans le corps du document HTML. La balise <FORM> reconnat les attributs suivant : 1) ACTION : Indique l'URL (relative) du script CGI ou ISAPI (fourni par le serveur qui hberge vos pages), qui accepte l'information saisie dans le formulaire et vous le retourne suivant les paramtres dfinis. 2) METHOD : Indique la faon dont les donnes sont transmises au script ACTION. 2 valeurs sont proposes : q POST : Pour un formulaire classique. q GET : Pour, par exemple dfinir un moteur de recherche sur votre site. 3) ENCTYPE : Cet attribut spcifie le format des donnes envoyes dans le cas o un protocole n'imposerait pas un format prcis. I plusieurs valeurs dont : q "text/plain" : Valeur utilise dans le cas d'un formulaire classique. q "multipart/form-data" : Valeur utilise dans le cas o le formulaire comprendrait un fichier attach (<INPUT TYPE="file" ...>).
Chapitre III
HTML
4) TARGET : Permet dindiquer le nom dune fentre ou dun cadre. Les donnes renvoyes par le serveur aprs traitement sont alors affiches dans ce cadre. 5) NAME : Indique le nom du formulaire. Les divers types de champs pouvant figurer dans un formulaire sont les suivants : q Les champs de saisie de texte, sur une ligne (TEXT ou PASSWORD) ou sur plusieurs lignes (TEXTAREA). q Les cases cocher et les boutons doption (CHECKBOX et RADIO). q Les fichiers attachs. q Les listes ou les listes combines (SELECT ET OPTION). q Les boutons de commande, comprenant plusieurs variantes : SUBMIT : Pour soumettre le formulaire lapplication (le script dont le nom est la valeur indique dans ACTION du marqueur <FORM>). RESET : Laction de ce dernier rinitialise les diffrents champs du formulaire leur valeur initiale. Contrairement au bouton SUBMIT, le bouton RESET ne provoque pas denvoi au script distant. IMAGE : ce paramtre permet de crer des boutons d'envoi et de remise zro personnaliss. Voici un exemple concret de formulaire ainsi que le code source :
<HTML><HEAD><TITLE>Exemple de formulaire</TITLE></HEAD> <BODY> <H1><I><U>Exemple de formulaire</U></I></H1> <FORM ACTION="URL du script" METHOD="POST"> <I><B>Entrer votre nom:</B></I><INPUT NAME="nom" SIZE=30> <HR WIDTH="45%" ALIGN="left"> <B><I>Cocher la cas correspendant votre cas :</I></B> <UL> <LI><INPUT TYPE="RADIO" NAME="age" VALUE="-20">Mois de 20 ans <LI><INPUT TYPE="RADIO" NAME="age" VALUE="20-40">De20 40 ans <LI><INPUT TYPE="RADIO" NAME="age" VALUE="+40">Plus de 40 ans </UL> <I><B>Quel est votre secteur d'activit :</B></I> <SELECT NAME ="Menu"> <OPTION SELECTED>Etudiant <OPTION>Enseignant <OPTION>Secteur public
49
Chapitre III <OPTION>Secteur priv </SELECT><P> <I><B>Faite votre choix :</B></I> <INPUT TYPE="CHECKBOX" NAME="Check1" CHECKED="true" VALUE="C2">Choix 1 <INPUT TYPE="CHECKBOX" NAME="Check2" VALUE="C2">Choix 2 <HR WIDTH="45%" ALIGN="left"> <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="Annuler"> </FORM></BODY></HTML>
HTML
Rsultat (avec I.Explorater) :
c.9 Les tableaux :

Le tableau est lun des outils cratifs les plus puissants et les plus utiliss de nos jours dans la conception dune page Web, car il permet dorganiser du texte et/ou des images sur plusieurs colonnes et lignes dune faon captivante permettant dattirer lattention du lecteur, suffisamment longtemps pour quil assimile le message. La cration des tableaux se passe autour des balises suivantes : q La balise <TABLE> qui indique au navigateur la cration d'un tableau. q La balise <TH> identifie l'en-tte de chaque colonne.
Chapitre III
HTML
La balise <TR> dfinit une ligne de tableau contenant une ou plusieurs colonnes. q La balise <TD> (table data ou donnes du tableau) dfinit une cellule. Outre que ces balises on trouve aussi la balise <CAPTION> qui permet daffiche le titre du tableau et qui possde deux attributs : q TOP : Titre plac au-dessus du tableau (par dfaut). q BOTTOM : Titre plac en dessous du tableau. Bien videmment, ces balises doivent tres fermes pour indiquer au navigateur la fin du tableau, d'une colonne, et d'une cellule. Par dfaut, la taille du tableau et celle des cellules qui le composent sadaptent automatiquement au contenu (texte ou image). Cependant on peut dfinir la taille du tableau ou la taille de chaque cellule ainsi que l'espacement des cellules et la taille de la bordure en jouant avec les attributs suivant : q WIDTH : Spcifie la largeur du tableau ou d'une cellule, en pixels ou u navigateur. q HEIGHT : Spcifie la hauteur du tableau ou d'une cellule, en pixels ou pourcentage de la fentre du navigateur. q BORDER : Spcifie la taille en pixels (par dfaut 1) de la bordure du tableau. q CELLPADDING : Spcifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau. q CELLSPACING : Spcifie l'espace en pixels entre les cellules du tableau. q BGCOLOR : Spcifie la couleur d'une cellule. q BORDERCOLOR : Spcifie la couleur de la bordure du tableau. q BORDERCOLORLIGHT : Spcifie la couleur aux points culminants de la bordure du tableau (effet 3d). q BORDERCOLORDARK : Spcifie la couleur de l'ombre de la bordure du tableau (effet 3d). q BACKGROUND : Spcifie l'URL de l'image afficher comme image d'arrire plan du tableau (I.Explorer seulement). A noter que pour exploiter la technique des tableaux comme outil de mise en page, on dfinit lpaisseur de la bordure par 0, ce qui la rend invisible. Afin dobtenir des cellules plus ou moins grandes pour accueillir des donnes, les lignes et les colonnes peuvent tres fusionnes avec les attributs ROWSPAN (pour 2 cellules
q
51
Chapitre III
HTML
adjacentes dune mme ligne ) et COLSPAN (pour 2 cellules adjacentes dune mme colonne). En principe, tout lment plac dans une cellule de tableau est align gauche et centr verticalement. Nanmoins on peut aligner le contenu dune cellule ou toute une ligne la fois horizontalement et verticalement laide des attributs ALIGN (LEFT, RIGHTet CENTER) et VALIGN (MIDDLE, TOP, BOTTOM et BASELINE).
c.10) Cadre est mise en page interactive :

Dans les versions prcdentes du HTML, lune des principales limitations tait que lon ne pouvait afficher quune seule page la fois. Les cadres (dvelopps par Netscape) liminent cette limitation en permettant le dcoupage navigateur en plusieurs documents HTML. Ils reprsentent une solution similaire aux tableaux pour lagencement du textes et/ou des images au sein de lignes et de colonnes. La dfinition dun cadre (frame) se fait dans une page "matresse" qui indique le dcoupage. Balise <FRAMESET > . . . </FRAMESET > La balise <FRAMESET> prend la place du tag <BODY>, c'est elle qui va dfinir les cadres, qu'ils soient verticaux ou horizontaux, et leurs dimensions (en % ou en pixels). Elle peut avoir les attributs suivants : q ROWS, COLS : dfinissent le nombre de cadre, qui peut tre vertical (ROWS - range) ou horizontal (COLS - colonnes), exprims en % ou en pixels. q FRAMEBORDER : Cet attribut permet de dterminer si les cadres
q
auront ou n'auront pas de bordure. Il a deux valeurs YES ou NO. FRAMESPACING : permet dajouter un espace entre les cadres, exprims en pixels. La valeur 0 indique aucun espace. BORDER : permet de dterminer la taille des bordures entourant les cadres, exprims en pixels. La valeur 0 indique aucune bordure. BORDERCOLOR : permet de dterminer la couleur de l'ensemble des bordures des cadres. Il suffit pour cela de spcifier une couleur sous forme de nom ou de sa valeur hexadcimale. Ex : BORDERCOLOR="red".
52
Chapitre III
HTML
Balise <FRAME > . . . </FRAME > Cette balise permet de dfinir un cadre l'intrieur du conteneur <FRAMESET>. Elle a plusieurs attributs : q SRC : Cet attribut indique l'URL du document HTML qui sera
q
affich dans un cadre spcifique. NAME : Permet de donner un nom au cadre. ce qui permettra ensuite de l'appeler avec l'attribut TARGET. FRAMEBORDER : Mme dfinition que pour la balise
<FRAMESET>. BORDER : idem que la dfinition prcdente. Nest valable que pour Netscape. MARGINHEIGHT, MARGINWIDTH : permettent de spcifier la largeur des marges autour du cadre. NORESIZE : sa prsence indique que les dimensions du cadre ne peuvent pas tre modifies par lutilisateur. Par dfaut les cadres peuvent tre redimensionns. SCROLLING : Cet attribut permet d'attribuer ou non une barre de dfilement (scrollbar) un cadre. Il possde trois valeurs : 1. YES : Indique que la barre de dfilement sera toujours visible. 2. NO : Indique que la barre de dfilement ne sera jamais visible. 3. AUTO : Indique que le navigateur dterminera si la barre de ent est ncessaire.
Navigateurs non compatibles Dans la mesure o certains navigateurs ne sont pas compatibles avec les cadres, il est la fois sage et prvenant de proposer le contenu dune page Web sous une autre forme, en utilisant les balises <NOFRAMES> et </NOFRAMES>. Entre ces balises il faut donc thoriquement dvelopper un deuxime site. Lavantage de cette solution est que tout les lecteurs pourront visiter le site. Relier des cadres L'attribut TARGET qui figure dans les balises A, AREA, BASE ou FORME permet dindiquer le nom de la fentre dans laquelle le document doit tre affich. Voici les diffrentes valeurs des noms rservs pour les frames cibles :
q
_self : Permet dafficher le document dans la mme fentre que le lien.
53
Chapitre III
HTML
_parent : Permet dafficher le document dans la fentre parent du document ou se trouve le lien. _blank : Permet d 'afficher le document dans une nouvelle fentre ouverte par le navigateur. _top : Permet d 'afficher le document dans toute la fentre du navigateur et les frames disparaissent. _new : Identique _blank.
Cadres locaux La balise <IFRAME> (spcifique I.Explorer) permet d'insrer un cadre local (une fentre qui fera rfrence un autre document HTML) n'importe quel endroit du document HTML. Elle doit figurer dans le corps du document, c'est--dire entre les balises <BODY> et </BODY>. Elle possde les mmes attributs que la balise <FRAME> et en plus les attributs HEIGHT et WIDTH qui dterminent la hauteur et la largeur du cadre, (valeur en pixels).
c.11) Les couleurs :

Plusieurs balises disposent de paramtres permettant dindiquer une couleur. Par exemple lattribut TEXT du marqueur <BODY> indique la couleur de texte du document. En HTML les couleurs peuvent tre spcifies de deux faons : q Soit laide de ses composantes rouge, vert et bleu. q Soit laide dun symbole. Le code RVB En effet on peut indiquer la couleur laide de ses trois composantes rouge, vert et bleu, sous la forme suivante :
#rrggbb
Le signe "#" introduit la dfinition dune couleur. Rr, gg et bb indiquant respectivement la quantit de rouge (red), de vert (green) et de bleu (blue) dans la voluent selon un nombre deux dcimales en base 16. Chaque couleur peut donc prendre 256 nuances, de 00 (pas de couleurs) FF ( La combinaison des trois couleurs peut ainsi crer plus de 16 millions de couleurs mais le langage HTML n'en accepte que 216, notes en hexadcimal avec les proportions suivantes :
Chapitre III
HTML
00 33 0% 20 %
66 40 %
99 CC FF 60 % 80 % 100 %
Le code d'une couleur en HTML s'crit donc ainsi : "003366". Les 16 couleurs principales La seconde mthode pour indiquer une couleur fait appel un nom symbolique reconnu par les navigateurs. Voici les 16 couleurs pouvant ainsi tre utilises : Nom symbolique BLACK MAROON GREEN OLIVE NAVY PURPLE TEAL GRAY Couleur Noir Marron ou rouge fonc Vert Vert olive Bleu marine Violet Cyan fonc Gris Nom symbolique BLUE FUCHSIA AQUA WHITE YELLOW LIME RED SILVER Couleur Bleu Violet vert Bleu clair Blanc Jaune Vert clair Rouge Gris clair
55
Chapitre IV
HTML et Le Web
VI.1 Introduction :
Persuader le visiteur de revenir visiter rgulirement un site est la qute du grand Graal de ceux qui publient sur le Web. La comptition est norme. Les utilisateurs de jeux ou de programmes ducatifs, dencyclopdie sont habitus des prsentations de grandes qualits, les graphiques, les animations vido, le son concourent des prsentations de premier choix. Les documents HTML ont peu de moyens de concurrencer ce genre de produit. La mise en page des images et du texte est trs rigide. Bref compar avec tous ces documents multimdias, un document HTML ordinaire est plutt plat, quelle que soit la qualit de son contenu. Les dveloppeurs de site Web sont dans une course effrne, constamment la nouveaux pour satisfaire lenthousiasme des gens pour Internet et pour le Web en particulier. Un des premiers besoins dvolution t de rendre les pages dynamiques en amliorant le taux dinteractivit entre le document et lutilisateur. En effet, le standard HTML ou le SGML (Standard Generalized Markup Langage) laisse le libre choix en ce qui concerne les moyens donns aux programmeurs HTML pour contrler leurs pages Web. Des diteurs de navigateurs comme Netscap et Internet Explorer ont dailleurs anticip les standards et mis en uvre des possibilits pour donner plus de Cela dit, le langage HTML nest plus vu comme un simple langage de formatage de document mais plutt comme un langage volutif qui senrichit de nouvelles balises et de nouveaux attributs au fil du temps. Dans ce prsent chapitre, on parlera des moyens qui facilitent lcriture des pages Web ainsi que les possibilits qui concourent la cration des pages Web dynamiques et interactifs.
IV.2 Les diteurs HTML :

Il existe trois mthodes pour coder en langage HTML, du simple diteur de texte jusquaux environnements trs complexes.
IV.2.1 Les diteurs de texte :

Les fichiers HTML sont des fichiers ASCII brut, donc le plus simple consiste avec un programme qui enregistre les fichiers par dfaut au format texte tout en permettant dattribuer une extension htm ou html. Par exemple on peut travailler avec le WordPad ou le Blocnotes de Windows 98.
57
Chapitre IV
HTML et Le Web
Exemple de code source HTML crit avec lditeur WordPad de Windows 98.
IV.2.2 Les diteurs de tags :

Les diteurs de tags constituent une solution intermdiaire. Ce type dditeur propose un environnement ddition ASCII avec un support tendu pour les divers codes HTML.
Exemple dun diteur de tags HTML, le HotDogPRO.
58
Chapitre IV
HTML et Le Web
IV.2.3 Les diteurs WYSIWYG :

Avec un diteur WYSIWYG (What You See Is What You Get). Ce que vous voyez ( l'cran) correspond au rsultat. Ont peut crer un document HTML sans jamais avoir entendu parler de HTML. Les packages de ces logiciels nous permettent de voir directement ce quon va obtenir. Front page de Microsoft et Dreamweaver de Macromdia font partie de cette catgorie de logiciels. Les socits de production importantes qui travaillent avec HTML choisissent souvent ce type de programmes. Mais ne cachons pas les inconvnients de ces diteurs. Les diteurs WYSIWYG limitent les possibilits cratives de lutilisateur, ils ne proposent que les tags et les attributs quils savent correctement traduire en code HTML. Des lacunes importantes apparaissent, notamment si lon veut combiner plusieurs tags, et certaines combinaisons sont tout bonnement irralisables. Le code produit nest pas toujours correct. Donc la seule solution pour obtenir de bons rsultats e le code pour pouvoir rparer les erreurs.
Exemple dun diteur WYSIWYG : Microsoft FrontPage

Chapitre IV
HTML et Le Web
IV.2.4 Microsoft FrontPage :

Microsoft FrontPage permet la cration et la maintenance rapide et facile de sites Web extrmement performants. Son utilisation est menus et des barres doutils de Microsoft Word ou de Microsoft Excel. Il comprend un diteur de page Web qui gnre automatiquement le code HTML voulu, la conversion automatique dimages vers les format .GIF ou .JPG, un diteur de points actifs pour transformer rapidement une image en Image map, la cration de liens par glisserdplacer, un diteur de formulaire ainsi que des assistants et des modles daide la cration de sites. Il permet aussi linsertion de modules comme les classes Java, les contrles ActiveX et les divers effets spciaux et ce, de manire transparente pour lutilisateur. Il est mme possible dafficher le contenu des Plug in et dexcuter des Il dispose dlment WebBot quon peut insrer dans nos pages Web pour effectuer des tches interactives, comme les recherches de texte complet, le traitement de formulaires, et des barres de navigation. Il offre galement des outils performants pour la maintenance, qui autorisent des vues multiples dun site Web et une comprhension de linterrelation. La section la plus importante est probablement le mode Navigation, qui aide visualiser larborescence du site
IV.3 Devenir interactif sur le Web :

IV.3.1 Programmation ct serveur
Une faon trs rependue dtendre linteraction entre lutilisateur et le contenu est de faire communiquer la page avec son serveur Web. Ce dernier doit tre capable de grer les fonctions de distribution de page HTML dj existantes ou de cration de pages en rpondant une requte dfinie. On distingue deux niveaux dans lutilisation : q Serveurs Web statiques q Serveur Web applicatifs Les serveurs Web statiques appels aussi serveurs http sont ceux qui, la requte dun client, renvoient des documents existants sans aucun travail pralable. Cest le cas de beaucoup de serveurs sur lInternet. Les serveurs Web applicatifs sont ceux qui, la requte dun client construisent une page Web rpondant la demande du client, ses droits daccs, concernant dans la base, etc. HTML et HTTP tant trs limits dans leurs fonctionnalits. Ils ne savent pas traiter linformation comme le fait un programme informatique classique, ni daccder une base de donnes. Un logiciel serveur est donc ncessaire. En effet pour permettre
Chapitre IV
HTML et Le Web
au serveur dexcuter des programmes sur la demande dun client et de lui retourner une rponse sous forme dune page HTML, on doit passer par un CGI ou NSAPI/ISAPI.
IV.3.1.1 Les programmes ou les scripts CGI :

Les scripts CGI ou Common Geteway Interface (interface de passerelle) sont des mini-applications dveloppes gnralement en C, C++, Perl et des scripts shell qui permettent dtablir un lien entre les applications de traitement et le serveur http. Par exemple, les sites de recherches comme Yahoo, WebCrawler et Lycos offrent la possibilit lutilisateur dentrer un thme de recherche et de cliquer sur les options pour prciser la faon dont le moteur de recherche doit traiter la requte. Lorsque eur clique sur le bouton denvoi, le navigateur transmet vers le serveur les donnes saisies dans le formulaire. Sur le serveur, un script CGI formate les informations reues, puis les transmet, pour traitement une base de donnes ou un autre programme tournant sur le serveur. Les rsultats reviennent au script CGI qui les oriente vers le navigateur du visiteur, parfois sous forme dune nouvelle page, parfois sous forme dinformations sinscrivant dans dautres champs du formulaire encore Lcriture des scripts CGI personnaliss peut se faire avec nimporte quel langage de programmation. En outre, pour pouvoir les installer il faut que : 1) Le serveur soit configur pour permettre de les excuter. 2) Ladministrateur systme (notre hbergeur) nous donne l'autorisation de les installer, y compris laccs des bases de donnes ou des programmes traitant linformation en provenance de lutilisateur. 3) Nous sachions biensr, les installer (et de les personnaliser suivant la configuration du serveur) et dfinir les permissions. Quel que soit lintrt et lutilit des scripts CGI qui rsident dans la simplicit, leur emploi encombre les serveurs avec de nombreux traitement de requtes, ce qui consomme beaucoup de ressources sur le serveur.
IV.3.1.2 NSAPI et ISAPI :

NSAPI ou Netscape Server API reprsente la premire technique qui t mise en uvre pour remdier aux dfauts des scripts CGI. Son principe consiste remplacer lexcution dun programme chaque appel par linvocation dune DLL (librairie dynamique) dj prsente en mmoire. On gagne ainsi en ressource sur le serveur puisquil nest pas ncessaire de lancer un programme pour chaque client.
61
Chapitre IV
HTML et Le Web
Malheureusement, lcriture de ces DLL doit tre en C++ et demande des connaissances importantes en programmation, ce qui est trs coteux, donc peu utilis. Microsoft galement dvelopper sa propre solution qui est quivalente NSAPI de Netscape et qui se nomme ISAPI.
Le client envoie une requte au serveur Client
1 6
Serveur
Le serveur excute la requte
2
La passerelle peut faire appel dautres programmes
Le serveur retourne linformation au client
3 5
La client formate et visualise les informations programme et retourne reues le rsultat au serveur Passerelle Autres programmes
Programmation dun CGI ou dune ISAPI
IV.3.2 Programmation ct client IV.3.2.1 Java, le langage:

Java est la fo is un langage de dveloppement orient objet et une plate forme de portabilit. Cela signifie quil est plus difficile apprendre que le langage HTML, mais galement plus puissant. Bref cest un outil destin aux professionnels. Il possde plusieurs points communs avec le C et le C++, mais les sources derreurs ou de confusions les plus courantes ont t supprimes ou contrles. Dvelopp par Sun Microsystem, Java a rencontr un grand succs ds son apparition au dbut de lanne 1995. Cela est d la rencontre entre : q Un ingnieux mcanisme de portabilit. q Les technologies orientes objets q Le besoin de disposer dune certaine intelligence sur le poste client pour rpartir les traitements entre ce dernier et le serveur. La portabilit de Java : Java possde les avantages des langages interprts et les performances des langages compils. En effet les programmes crits avec Java sont compils dans une forme intermdiaire, une sorte de pseudo-assembleur, appele pseudo-code ou bytecodes. Cette forme interm diaire peut tre excute sur nimporte quelle machine,
62
Chapitre IV
HTML et Le Web
si celle-ci dispose dun noyau dexcution Java. Ce noyau comprend deux parties importantes : q La JVM (Java Virtual Machine), qui lit et excute le p-code. q Limplmentation des interfaces de programmation (API) standard en Java pour le systme dexploitation concern. Ainsi le problme de la portabilit se rsume la disposition dun noyau dexcution Java sur la machine cible.
Programme source java Compilation en forme intermdiaire "Machine virtuelle"
P-Code
Noyau java pour Windows2000 Windows2000 Noyau java pour Solaris Solaris Noyau Java pour MacOs MacOs
La portabilit dun programme java
Java et la scurit : Les applets Java (petites applications Internet) qui sexcutent dans des navigateurs compatibles Java sont soumises de svres restrictions de scurit, afin de protger le poste client contre les agressions. Linnocuit des bytecodes trouvs sur le rseau est vrifie. Cest la machine virtuelle implmente dans le navigateur qui permet aux programmes Java de sexcuter. Les diffrents browsers compatibles Java fournissent diffrents niveaux de scurit lorsquil grent des applets Java. Le systme de Netscape Navigator, trs restrictif, a la rputation dtre particulirement efficace. Avec lui, nous pouvons thoriquement faire tourner un programme en Java, cependant
IV.3.2.2 Ce que nous pouvons faire avec des Applets :

Les applets insufflent de la vie dans nos pages HTML. Elles les rendent rellement interactives. A titre dexemple, avec des applets java on peut :
Chapitre IV
q
HTML et Le Web
Afficher des textes onduls, des images ainsi que des animations. q Grer des saisies au clavier. q Inclure des boutons, boutons radio, etc. q Inclure des champs de texte. Sans oublier quune applet Java peut tablir une connexion permanente avec le serveur depuis lequel elle t tlcharge, ce qui nous permet de rpartir les traitements entre ce dernier et le poste client. Programmer en Java : Pour pouvoir programmer avec Java, il nous faut deux logiciels diffrents. Le premier est le JDK (Java Development Kit), ou le kit de dveloppement pour Java. Il contient tous les logiciels ncessaires pour crire, compiler et tester des applets et des applications Java. Le second est un browser compatible Java. Ce dernier nous permet de tester les applets quon crit ainsi que de visualiser les applets quon trouve sur le Web. En effet ces deux logiciels noffrent pas la convivialit des derniers compilateurs Java, mais ils constituent de bons outils dapprentissage du langage.
Compilation JVM Aperue dans le Browser Appletviewer
Code source Java javac
P-Code
Les deux tapes dexcution de code source Java
Dveloppement dapplets laide denvironnement Java Si nous voulons crire des applets java nous disposons dun grand choix denvironnement de dveloppement. La palette des compilateurs Java prsents plus bas va de la saisie manuelle du code source jusquaux outils de programmation graphiques qui permettent de tout faire ou presque sans avoir crire une seule ligne de code. Il existe mme des interfaces de programmation qu la saisie de lignes de code. Loffre, trs diversifie, permet donc chacun de choisir son outil selon ses capacits et ses besoins. Plusieurs diteurs ont rapidement ragi la dferlante Java et proposent des environnements graphiques : q Symantec avec Cafe. q Aimtech avec Ljamba.
Chapitre IV
q
HTML et Le Web
Borland avec Lette. q Microsoft avec Visuel J++. Pour les petites applets, le dveloppeur na le plus souvent pas besoin de mettre la main la pte, il peut recourir des composants prts lemploi ou un assistant qui cre des applets laide de menus.
IV.3.2.3 Adjuvants (Plug-in):

Netscape grce son concept dadjuvants, est parmi les premiers dans la course lintgration. Le principe des adjuvants est simple : ils permettent dtendre les capacits multimdias du navigateur laide de module dextension. Le plug-in est en fait soit : q Un fichier librairie (extension .DLL). q Un ActiveX (extension .OCX). q Une application indpendante (reli par un type MIME ). En effet, les serveurs http sont capables de transmettre toutes sortes de documents : textuel, visuel, audio ou encore vido. Raliser un navigateur capable de matriser tous ces formats demanderait un travail norme. Pour cela le navigateur doit tre complt, la demande, par des programme s capables de traiter un format donn. Deux possibilits sont alors offertes lutilisateur : Installer des programmes complmentaires (ou utiliser des programmes dj installs) et paramtrer le navigateur pour quil lance le respondant au type du document automatiquement aprs avoir charg celui-ci. Installer un module dextension ou plug-in. Ce programme se branche sur le navigateur, et aprs chargement du document, ce dernier saffiche directement dans la fentre du navigateur. Ainsi, le chargement dun fichier de format Acrobat pourra, suivant la faon dont on a install les logiciels, lancer Acrobat Reader ou bien faire afficher le document dans la fentre du navigateur. Notons cependant que ces modules dextensions ne sont pas multiplates-formes.
IV.3.2.4 ActiveX :
Contrairement Java, ActiveX ne constitue pas une relle rvolution. La technologie mise en uvre nest autre quune extension de la caractristique de Microsoft Windows, appele liaison et incorporation des objets, plus connue sous lacronyme OLE (Object Linking Embedding). OLE permet tout ou une partie dun programme dtre incorpor un document cr laide dun autre programme. A titre
Chapitre IV
HTML et Le Web
dexemple, cette technique autorise le placement dune feuille de calcul Microsoft Excel dans un document provenant dun traitement de texte Microsoft word. Lorsque Internet rvolutionn le monde de linformatique au milieu des annes 1990, Microsoft a adapt la technologie OLE afin quelle fonctionne sur les pages Web en ligne et la rebaptise ActiveX. Quest-quun contrle ActiveX? Conue dans le but de concurrencer Java, ActiveX ne constitue pas vraiment un langage de programmation, mais plutt un standard pour dvelopper des applications, tournant sous Windows 32 bits, indpendamment du langage, du moment que ce dernier soit conforme aux mmes protocoles. Ce programme peut tre dvelopp avec nimporte quelle langage de programmation (C++, Visual Basic ou mme Java). Du fait quun assistant lui attribue la proprit dtre un contrle ActiveX. Diffrence entre un contrle ActiveX et une applet Java : Contrairement aux applets Java, qui disparaissent aprs leur excution, les contrles ActiveX sont enregistrs sur le poste de travail de lutilisateur, ce qui vite de les recharger chaque utilisation. Notons aussi que le modle de scurit dActiveX et diffrent de celui de Java. Java permet de tlcharger nimporte quelle applet, mais celle-ci na pas accs au disque dur de lutilisateur. ActiveX permet aux con dagir comme bon leur semble sur le poste client, mais le client peut exiger une identification des modules quil charge. Pour les dveloppeurs Internet, la technologie ActiveX est considre comme plus rapide que lemploi des applets Java. Cependant linconvnient est quon se limite uniquement aux plates-formes Windows 32 bits, ce qui nest pas dans lesprit de
IV.3.2.5 Les langages de script

Il existe deux langages de script possibles : JavaScript (technologie Netscape) et VBScript (technologie Microsoft). Ces derniers permettent d'indiquer aux navigateurs comment ils doivent ragir certains vnements, comme par exemple un clic de souris sur un bouton. On appelle ceci "la gestion par l'vnement". Ce terme vient de rogrammation dinterface graphique utilisateur, comme par exemple Windows pour les PC ou le System pour le Macintosh. Dans ces environnements, le systme dexploitation surveille constamment les priphriques dentre (clavier et
66
Chapitre IV
HTML et Le Web
souris). Chaque fois que lutilisateur enfance une touche ou dplace la souris, le system prend note de cette action : un vnement sest produit. De mme au niveau des scripts, le navigateur surveille constamment les lments de document qui ont t conus pour ragir aux actions Cest le rdacteur du script qui dtermine les lments dinterface qui doivent rpondrent aux actions de lutilisateur et les actions quils dclenchent. JavaScript : JavaScript est aujourdhui encore le moyen le plus courant quutilisent les crateurs de pages HTML pour animer celles-ci. Contrairement ce que pourrait laisser supposer son nom, JavaScript na rien avoir avec Java. Dvelopp par Netscape, sous le nom de LiveScript en parallle avec le logiciel serveur LiveWire. LiveScript a t conu pour rpondre deux choses : q De disposer dun outil que les administrateurs de serveurs LiveWire pourraient exploiter pour grer LiveWire. q Dutiliser LiveScript comme moyen de communication entre les documents HTML et les applets Java. Dbut dcembre 1995, Netscape et Sun Microsystem pour des raisons de Marketing ont conjointement annonc que le langage LiveScript prenait le nom de JavaScript. En outre, Sun Microsystem entrait dans lquipe de dveloppement du langage. Les applications possibles de JavaScript Compar aux langages de programmation, JavaScript est objet, il est la fois simple et fort. Il ouvre aux auteurs Web de car ses applications possibles sont nombreuses. Par exemple il permet : q Danimer les bas de pages HTML en faisant dfiler navigateur. q De raliser de contrle de saisie localement (pour
q q q q
un langage pseudo grandes perspectives du texte en bas du contrler la validit
Douvrire de nouvelles fentres. De raliser des fonctions dhistorique des De crer des pages HTML la demande du client. De modifier les proprits des documents affichs (couleur, titre, taille, etc.). De grer les lments graphiques qui sont interdpendants.
67
Chapitre IV
q
HTML et Le Web
De donner laccs de petites sries dinformations et fournir une interface conviviale vers ces donnes (proposer une mini-base de donnes). Et maintenant explicitons cet exemple pour bien comprendre lintrt de JavaScript. Un auteur Web crirait des instructions JavaScript pour sassurer de la des informations entres par lutilisateur dans le formulaire. Au lieu de forcer le serveur ou la base de donnes raliser la validation des donnes ce qui demande des changes de donnes entre le navigateur et le serveur, donc une perte de temps. JavaScript est fort rpandu parmi les navigateurs. Nanmoins il prsente plusieurs inconvnients. Tout dabord, la simplicit du langage a pour consquence ses limites. Il nest pas possible de manipuler des notions complexes dans ces pages et tions lmentaires sont possibles. De plus linterprtation de JavaScript est assez diffrente dun navigateur un autre et il est dlicat de raliser des pages qui fonctionnent correctement pour tous les navigateurs. JavaScript a fait aussi lobjet de nombreuses critiques dues aux faiblesses que prsente sa conception de la scurit. Il tait possible au dbut un script JavaScript de lire ou dcrire sur un disque dur du poste client, en exploitant certaines bogues du navigateur. Les diffrentes version de JavaScript : Il existe l'heure actuelle plusieurs versions de Javascript, implmentes plus ou moins par les versions successives des navigateurs Netscape Navigator et Microsoft I.Explorer. Plus prcisment, Microsoft emploie le terme Jscript pour langage de script "ECMA 262" que supporte son navigateur. Jscript est un langage qui a de nombreux points communs avec JavaScript, mais dont lvolution porte des noms diffrents. Voici un tableau rsumant les diffrentes versions avec les navigateurs compatibles ainsi que la balise dfinissant la version. Version JavaScript 1.0 Javascript 1.1 Javascript 1.2 Compatibilit I.Explorer 3.0 - Netscape 2.0 Netscape 3.0 I.Explorer 4.x - Netscape 4.x Balise <SCRIPT LANGUAGE="JavaScript1.0"> <SCRIPT LANGUAGE="JavaScript1.1"> <SCRIPT LANGUAGE="JavaScript1.2">
68
Chapitre IV
HTML et Le Web
Pour simplifier, disons que Netscape Navigator et Microsoft I.Explorer supportent JavaScript de faon diffrente mais comparable en terme dachvement. A partir des versions 4 des navigateurs, les diffrences sattnuent du langage, dont la standardisation a t confie un organisme de normalisation indpendant, lECMA. Cependant il reste toujours difficile de raliser un code JavaScript qui fonctionne correctement sur des milieux htrognes. Comment Intgrer un script JavaScript Pour intgrer un script JavaScript dans une page HTML, on introduit des lignes de code qui sont repres par les balises <SCRIPT> et </SCRIPT>. Ces lignes de code font partie de la page HTML et sont donc envoyes au les parties statiques de la page. Les marqueurs <SCRIPT> et </SCRIPT> indiquent au navigateur quil doit interprter en tant que scripte le texte quils entourent. Et du fait que dautres langages de scripts sont susceptible dvoluer lavenir, on doit spcifier le nom prcis du langage, dont lequel est crit le code, avec lattribut LANGUAGE. Lorsque le navigateur reoit cette information indiquant que le script utilise le langage JavaScript, gr JavaScript pour grer le code. De plus on doit entourer les scripts par des balises de commentaires ( </STYLE>
Pour choisir entre ces deux classes dans notre page HTML, on utilise l'attribut classe, de la manire suivante :
<H1 class= classique >bonjour! Messieurs</H1>
a) Le slecteur CLASS appliqu tout marqueur HTML :

La syntaxe d'une classe potentiellement applicable tous les marqueurs HTML omme suit:
<STYLE TYPE="text/css"> <!-.elegant { color: black; font-family: "Book Antiqua"} -->
Remarquons que nous avons intentionnellement omis le marqueur HTML juste avant le point.
b) Le slecteur ID :
Contrairement au slecteur CLASS, le slecteur ID ne s'applique qu' un seul et unique lment. Autrement dit, tous les lments du document peuvent utiliser un slecteur ID, condition que chacun soit diffrent l'un de l'autre. La syntaxe du
#[nom d'identification] [dclaration]
Notons que le symbole # est ncessaire. ID suivant:
Par exemple, dfinissons l'attribut
80
Chapitre V
DHTML
<STYLE TYPE="text/css"> <!-#copyright {font-size: italic; font-size: smaller; color: red; } --> </STYLE>
c) Pseudo-classes :
Un ensemble d'lments qui rpondent un mme critre de contexte, forment ce que l'on appelle une pseudo-classe. Ils sont spcifis dans les feuilles de style, par l'ajout de deux points (":") A:link {font-size:14px; color: royalblue} A:visited {font-size:16px; font-style: italic; color: maroon} A:active {color: red} Parce que seules les ancres (Anchor) peuvent appartenir active , link ou visited, on peut aussi les dfinir sans ajouter le A (qui spcifie les ancres) et donc, on peut crire l'exemple prcdent par : :link {font-size:14px; color:royalblue} :visited {font-size:16px; font-style:italic; color:maroon} :active {color:red}
V.4.2 Slecteurs : a) Slecteurs simples :

Un slecteur simple associe un lment (par son type ou son attribut) une rgle particulire et cela, quelle que soit la position qu'il occupe parmi les autres lments. On peut grouper plusieurs slecteurs simples, une mme rgle de prsentation, en les sparant par des virgules (","). H1,H2 {color:navy} H3, H4, H5 {color:red} H6,H7 {color:green} Dans cet exemple, les en-ttes H1 et H2 sont affichs en bleu, H3,H4 et H5 sont affichs en rouge, H6 et H7 sont affichs en vert.
b) Slecteurs contextuels :
Comme leur nom l'indique, les slecteurs contextuels associent une rgle particulire un lment, mais en fonction de sa situation. Par exemple, tous les
Chapitre V
DHTML
lments <STRONG> de classe ex (CLASS="ex") situs dans des paragraphes (P) sont affichs en jaune. Si un lment <STRONG> n'est pas insr dans un lment P (SPAN, DIV...) ou un lment P de classe diffrente, la rgle ne lui sera pas applique. On spare par des espaces les slecteurs contextuels que l'on veut grouper. Par exemple :
P STRONG.ex { color: green}
Codes HTML et visualisation :

<P> Voici un lment <STRONG CLASS="ex">strong</STRONG> situ dans un lment P de classe <EM>ex</EM>. </P>
Rsultat : Voici un lment strong situ dans un lment P de classe ex. Chaque slecteur peut faire rfrence une CLASSE, un ID ou un TYPE d'lment.
V.4.3 GROUPES :
La cration des groupes est une technique qui permet de condenser les balises de style et autres attributs. Par exemple voici un code qui n'utilise pas les groupes :
P.1{font: Arial; font-size: 12pt; line-height: 14pt}
Et voici comment il est possible de grouper cette classe :

P.1{font: 12/14pt Arial}
Les rsultats sont les mmes.
V.5 Animation des pages Web :

V.5.1 Principe :
L'animation des lments prsents sur une proprits (position, hauteur, largeur, visibilit, mthodes (fonctions associes un lment). Cela Javascript, permettant de modifier les proprits page Web se fait en modifiant leurs z-index, etc.) ou en utilisant leurs ne peut se faire qu' l'aide d'un code des lments, suite des vnements
utilisateurs (clic sur la souris, dplacement de la souris,...), et cela grce une structuration des lments dans la page dfinie par le DOM (Document Object Model).
Chapitre V
DHTML
V.5.2 Qu'est-ce que le DOM? :

Le DOM est une spcification dveloppe par le W3C, l'organisme charg d'laborer des standards de l'Internet. DOM est l'abrviation de "Dynamic Object Model" ou "modle objet du document". L'importance d'en connatre le principe vient du fait qu'il est dj implant dans Netscape Navigator 4 et Internet Explorer 4. Bien que le nom soit moins populaire que DHTML, le DOM constitue la charpente sur laquelle repose la nature active d'un document. Jusqu' maintenant, on a toujours constat la nature passive des documents : ils ne contiennen inertes. Par contre, le DOM vient bouleverser cette faon de voir, car celui-ci permet aux documents de devenir de relles applications.
V.5.3 Qu'est-ce que cela signifie pour les documents HTML? :

Le modle objet du document rend maintenant possible la manipulation de chacun des lments HTML d'une page : il dfinit comment chacun des lments est adress et comment les styles leur sont appliqus. On ne pouvait esprer une telle flexibilit avant l'apparition des navigateurs 4. Son prin navigateur et le document qui y est affich comme une hirarchie d'objets, possdant des proprits intrinsques et auxquels on peut accder en dcrivant la hirarchie qui Une autre caractristique du DOM est souligner : l'interaction, le contenu et la structure du document sont tout fait indpendants. Cependant il est noter que DOM nest quun modle et que ce modle doit tre complt par une mise en uvre concrte en JavaScript. Cette absence de prcision conduit bien sr des diffrences entre les diffrents navigateurs supportant DOM et DHTML. En effet, les deux grands navigateurs (Internet Explorer 4.x et Netscape 4.x) ne sont pas entirement compatibles. Internet Explorer 4.x donne beaucoup plus de possibilits d'action (par les scripts) sur les lments du document HTML.
V.5.4 La structure du DOM :

Il s'agit d'une structure en couches qui peut comporter un nombre infini de nuds. Tous les nuds, except le nud racine, possdent un parent. De plus, chaque nud est numrot squentiellement, de faon l'identifier (il peut possder galement un nom). En somme, les couches du document consistent en une collection ordonne d'lments o chacun d'eux constitue un objet. Qu'est-ce que cela reprsente en ralit pour un document HTML? Voyons quoi ressemble la structure en couches pour les objets d'un document Web.
83
Chapitre V
DHTML
Structure des principaux lments HTML : - window - location - frames - history - navigator - events - screen - documents - links - anchors - images - filters - forms - applets - embeds - plug-ins - frames - scripts - all - selection - stylesheets - body Chaque lment est accessible en parcourant la structure en couche ou en l'adressant par rfrence son numro, son ID ou son nom. On constate de cette faon que les objets et les proprits sont facilement manipulables l'aide du JavaScript. Qu'est-ce qu'une couche? : Le DHTML est bas sur une fonctionnalit provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appele CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de dfinir des "couches" contenant des lments et pouvant tre positionns sur l'cran. Il s'agit en ralit de balises HTML spciales pouvant contenir elles-mmes d'autres balises HTML, et dont les attributs sont entre-autres: q La position par rapport au haut du navigateur q La position par rapport la bordure gauche du navigateur
Chapitre V
DHTML
La largeur q La hauteur q Le Z-Index, c'est--dire le niveau de superposition de la balise. En effet, on appelle ces conteneurs HTML "couches" car il s'agit d'lments HTML pouvant tre superposs l'cran et pouvant tre dplacs s fentre du navigateur grce du Javascript. De plus, le z-index dfinit l'ordre de
q
superposition des lments, c'est--dire qui se trouve au-dessus des autres. Les balises DIV, SPAN et LAYER : Selon que l'on utilise Internet Explorer ou Netscape Navigator, la faon d'accder aux proprits des lments est diffrente, ainsi que les proprits ellesmmes (il s'agira donc dans un premier temps de dterminer par l'intermdiaire du script le type de navigateur utilis, puis adapter la notation en fonction du navigateur). Les balises permettant de constituer des couches sont les balises LAYER, SPAN et DIV. La premire (LAYER qui signifie justement couche) est une balise spcifique Netscape Navigator. Les balises DIV et SPAN sont plus gnriques mais sont toutefois mieux supportes par Internet Explorer que Netscape Navigator. La balise LAYER : Netscape permet d'accder aux diffrentes couches en utilisant la syntaxe suivante:
document.layers['nom']. attribut
ou
document.layers.nom. attribut
Ainsi, le positionnement de deux images superposes sous Netscape Navigator (version 4 ou suprieure) peut se faire de la manire suivante:
<LAYER NAME="IMG1" LEFT="20" TOP="30"> <IMG SRC="image.gif"> </LAYER> <LAYER NAME="IMG2" LEFT="25" TOP="35"> <IMG SRC="image2.gif"> </LAYER>
Voici un tableau rsumant les attributs de la balise LAYER : Proprit Valeur Description Name Chane de caractre Dfinit un identifiant unique pour la couche
85
Chapitre V
DHTML
Left Top
valeur numrique entire valeur numrique entire Les balises DIV et SPAN :
distance en pixel la bordure gauche distance en pixel au haut de la page
Avec Internet Explorer (versions 4 et suprieures), le positionnement des on le concept des CSS-P, au moyen des balises DIV et SPAN. Etant donn que le navigateur Internet Explorer 4 est apparu aprs Netscape Navigator 4, les possibilits "dynamiques" qu'il offre sont plus vastes que celles de Netscape, c'est--dire qu'il offre plus d'attributs au niveau de ses balises, pouvant tre modifies par l'intermdiaire d'un code crit en Javascript aprs chargement de la page. Avec les balises DIV et SPAN, le positionnement peut se faire de trois faons : statique, absolu et relatif. La mise en forme normale des documents HTML correspond au positionnement statique , qui est appliqu par dfaut. Le positionnement absolu se dtermine par rapport au coin suprieur gauche de la fentre du navigateur. Les coordonnes d'un point s'expriment alors de haut en bas (avec lattribut top) et de gauche droite (avec lattribut left). Le positionnement relatif se fait par rapport d'autres lments, comme une image, c'est--dire que les lments contenus dans les balises DIV ou SPAN seront positionns la suite des lments HTML. Internet Explorer dfinit un objet appel "all" contenant tous les lments DIV. Ainsi, l'accs aux lments se fait par la syntaxe suivante:
document.all.nom.attribut
Exemple :
<DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible;z-index : 2;"> lments HTML </DIV>
Actuellement, si tous les lments du corps du document acceptent le positionnement relatif (et statique bien sr), le positionnement absolu n'est reconnu APPLET - BUTTON - DIV - SPAN INPUT - OBJECT - SELECT FIELDSET IFRAME - IMG - TABLE - TEXTAREA
86
Chapitre V
DHTML
Voici un tableau rsumant les attributs des balises DIV et SPAN :

Proprit Static position absolute relative Auto (par dfaut) valeur numrique entire valeur en pourcentage (%) Auto (par dfaut) valeur numrique entire valeur en pourcentage (%) Valeur Description Aucun mouvement par rapport au document positionnement par rapport au document par rapport l'lment prcdent distance la bordure gauche automatique distance la bordure gauche en pixels distance la bordure gauche en pour centage distance au sommet automatique distance au sommet en pixels distance au sommet en pourcentage
left
top
width
auto largeur automatique valeur numrique entire largeur de l'lment en pixels valeur en pourcentage (%) largeur de l'lment en pourcentage Auto (par dfaut) valeur numrique entire valeur en pourcentage (%) hauteur automatique hauteur de l'lment en pixels hauteur de l'lment en pourcentage affiche le contenu mme s'il est trop grand cache le contenu superflu automatique affiche des barres de dfilement dcoupage automatique dcoupage en bas dcoupage gauche dcoupage droite dcoupage en haut visibilit par dfaut cach visible superposition automatique valeur indiquant la profondeur
height
visible hidden overflow auto scroll auto bottom left right top
clip
inherit visibility hidden visible z-index auto valeur numrique entire
Enfin, voici un bref aperu des actions ralisables en DHTML et la faon de les effectuer sur les deux navigateurs :
87
Chapitre V Action Netscape Navigator Internet Explorer
DHTML
Modifier l'image document.layers.nom.background de fond Modifier la document.layers.nom.bgColor couleur du fond Modifier le clipping Modifier le contenu document.layers.nom.clip document.layers.nom.open(); document.layers.nom.writeln();
document.all.nom.style.backgroundImage document.all.nom.style.backgroundColor document.all.nom.style.clip document.all.nom.innerHTML document.all.nom.style.left objet.id objet.name document.all.nom.style.visibility document.all.nom.style.top document.all.nom.style.zIndex
Modifier la document.layers.nom.left distance gauche Accder au nom objet.name Modifier la visibilit document.layers.nom.visibility
Modifier la document.layers.nom.top distance au haut Modifier le zindex document.layers.nom.zIndex
88
Chapitre VI
XML
VI.1 Origine de XML :

-textuels sur une immense chelle. Depuis 1995, les moteurs de recherche ont dmontr la stupfiante ca recherche d'information rendue possible par le WWW. Ainsi, avant l'apparition de XML (eXtensible Markup Language), existaient : Un langage de balisage normalis, riche en smantique mais relativement lourd mettre en oeuvre et inadapt au Web, le SGML (Standard Generazed Markup Language). Un langage parfaitement adapt au Web (puisque dvelopp uniquement pour cette application) mais dont les applications sont limites par une bibliothque de balises fige et rduite, le HTML. De plus il ne peu navigateurs. Il convenait donc de dfinir un langage qui conserve les qualits dHTML (simplicit dapprentissage, contenu multimdia, gestion des liens hyper-textuels, utilisation du langage de script), et den gommer les dfauts tout en offrant la richesse smantique de SGML. C'est la raison d'tre de XML. XML est un sous-ensemble au sens strict de SGML, langage de description de structure de donnes, trs complet utilis en GED (Gestion lectronique de documents). XML a t dvelopp par un groupe de travail XML Working Group (initialement connu sous le nom de comit d'examen ditorial SGML ou SGML Editorial Review Board), constitu sous les auspices du Consortium du World Wide Web (W3C) en 1996. Le GT tait prsid par Jon Bosak de Sun Microsystems avec la participation active d'un groupe d'intrt XML (XML Special Interest Group) auparavant connu sous le nom de groupe de travail de SGML (SGML Working Group) galement organis par le W3C. Les objectifs de conception de XML sont les suivants : q XML devrait pouvoir tre utilis sans difficult sur Internet. q XML devrait soutenir une grande varit d'applications. q XML devrait tre compatible avec SGML. q Il devrait tre facile d'crire des programmes traitant les documents XML. q Les documents XML devraient tre raisonnablement clairs pour tre trs facilement lisibles. q La conception de XML devrait tre prpare rapidement. q La conception de XML sera formelle et concise. q Il devrait tre facile de crer des documents XML. XML est en quelque sorte une version allge de SGML : il offre 80% des fonctionnalits de SGML pour seulement 20% de sa complexit! , prtendent ses auteurs. XML peut tre considr comme un mta-langage permettant de dfinir d'autres langages. Sa force rside dans sa capacit pouvoir dcrire n'importe quel domaine de
Chapitre VI
XML
donnes grce son extensibilit. Il va permettre de structurer, poser le vocabulaire et la syntaxe des donnes qu'il va contenir. XML se caractrise par les points suivants : q Lisibilit. q Autodescriptif et extensible. q Une structure arborescente. q Universel et portable. q Dployable. q Intgration.
VI.2 Introduction de XML :

XML est un langage de marquage constitu de balises tout comme HTML. Il se -chemin entre SGML (le langage de rfrence en milieu professionnel pour la gestion lectronique des documents, le GED) et HTML que l'on rencontre tous les jours sur l'Internet. XML est l'acronyme de eXtensible Markup Language, cela signifie que XML n'est pas un langage smantiquement fig comme peut l'tre HTML mais au contraire un langage ouvert. C'est dire que l'auteur d'un document XML peut crer ses propres balises Exemple : La balise <INSTRUMENT> peut tre dfinie pour dsigner un instrument de musique. Cela s'crirait de la faon suivante :
<INSTRUMENT>Guitare</INSTRUMENT>
Dans un document XML, on s'efforcera de ne pas tenir compte de la mise en forme mais seulement du contenu de celui-ci; la mise en forme tant ralise par la feuille de style. Et puisque dans un document XML l'information pertinente est marque par des balises portant des noms significatifs, il sera plus facile de retrouver l'information en s'appuyant sur le nom de ces balises pour effectuer des recherches. En effet, en HTML on ne sait faire actuellement que de la recherche plein-texte qui aboutit la plupart du temps des documents qui n'ont rien voir avec notre recherche de dpart, c'est ce que l'on appelle le bruit.
VI.2.1 De quoi se compose un document XML :

q q q
Principalement un document XML se compose de trois parties : La DTD (Document type Declaration) qui dcrit la structure de donnes. Les feuilles de style XSL (ou CSS) qui permettent le formatage des donnes. Le document lui-mme qui contient les donnes (texte, image, vido, etc.).
IV.2.2 Structure d'une feuille XML :

q q q
Toute feuille XML est compose de la faon suivante : un prologue : il contient diverses dclarations facultatives mais recommandes le contenu du document avec les balises associes des commentaires ventuels
91
Chapitre VI
XML
Le prologue peut contenir une dclaration XML,des instructions de traitement et une dclaration de type de document La dclaration XML est facultative mais fortement conseille, Elle indique au processeur qui va traiter le document : q La version du langage XML utilise dans le document. q Le codage de caractres utilis dans le document, si la valeur par dfaut ne convient pas, XML utilise les jeux de caractres dfinis par la norme ISO 10646, les processeurs XML doivent tre capables de traiter au moins les codages UTF-8 et UTF-16. q L'existence de dclarations extrieures au document qui doivent tre prises en compte pour le traitement de celui-ci. Si l'attribut standalone a la valeur yes, le processeur considre que toutes les dclarations ncessaires au traitement du document y sont incluses. Si cet Attribut a la valeur rechercher des dclarations dans d'autres fichiers que celui qui contient cette dclaration XML, pour pouvoir traiter convenablement le document. Exemple :
<?xml version=1.0 encoding=UTF-8 standalone=yes?>
Dans cet exemple, on a dclar un document de type XML dans sa version actuelle 1.0 qui utilise un encodage de type UTF-8 et qui ne possde pas de DTD. Chacune de ces trois informations, version du langage, codage des caractres et compltude du document, est facultative mais doit apparatre dans cet ordre. DTD : La DTD est l'acronyme de Document Type Dfinition ou en franais Dfinition de type de document. Son rle consiste dfinir la structure interne dun document XML. Elle permet de spcifier ces lments ainsi que leurs ordres et leurs frquences feuille de scurit sociale qui dcrit le contenu dune telle feuille. Il est noter que l'utilisation d'une DTD est une caractristique optionnelle d'un fichier XML. Dans le jargon XML, un document qui n'en possde pas est dit bien form (Well-formed) si sa structure respecte les rgles imposes par XML. A l'inverse s'il en utilise une le document sera dit valide. La DTD peut prendre deux formes : Soit interne, donc incluse dans la feuille XML Soit externe c'est dire qu'elle est dis socie du contenu du document. C'est sa forme la plus courante, ce qui permet de la rutiliser pour crer d'autre document qui devront avoir la mme structure. Une DTD commence toujours par <!DOCTYPE et se termine par ]>. La racine du document est renseigne aprs <!DOCTYPE et doit tre galement dfinie comme un ELEMENT de la DTD. La DTD est donc construite partir d'un ensemble de dclarations permettant de dfinir le type, la nature et les contraintes lis chaque nouveau marqueur. Exemple de document XML avec une dclaration de type de document :
Chapitre VI
XML
Document avec DTD externe :

<?xml version="1.0"?> <!DOCTYPE accueil SYSTEM "hello.dtd"> <accueil>hello word!</accueil>
Document avec DTD interne :

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE accueil [ <!ELEMENT accueil (#PCDATA)> ]> <accueil>Hello word!</accueil>
VI.3 XSL :
Le XSL Extensible Style Language est le langage utilis pour dfinir les feuilles de style qui seront associes aux documents XML. C'est le fichier XSL qui permettra de dfinir que tel lment XML doit tre affich avec telle fonte, de telle couleur, etc. Ces dcisions seront, grce XSL, prises par le crateur du document qui aura ainsi un meilleur contrle sur l'apparence de son document. Il pourra galement faire rfrence un fichier XSL public dj existant. Le XSL s'inspire de 2 normes de feuilles de style, le Cascading Style Sheet, qui est utilis avec des fichiers HTML et le DSSSL (Document Style Semantics and Specification Language) qui est une norme de feuilles de style plus complexe. Encore une fois les dveloppeurs choisissent le moyen terme: XSL emprunte au CSS et au DSSSL. XSL est encore en dveloppement, XSL n'est en effet qu'une "Note" du W3C, c'est dire que XSL doit franchir les 3 autres tapes qui sont "brouillon", puis "recommandation propose" avant de devenir une "recommandation officielle". (Notons toutefois que la rflexion sur les modles de feuilles de style dont s'inspire le XSL est passablement avance sa deuxime version. CSS2 est maintenant une recommandation officielle du W3C tandis que le DSSSL est dj une norme ISO).
VI.4 Conclusion :
Ces quelques lignes devraient suffire pour entrevoir la rvolution qu'amne le format XML. XML est dj support par Internet Explorer et Netscape Navigator. Il ne manque que les dveloppements d'une masse importante de documents XML pour qu'on commence profiter de cette richesse de balisage et des traitements qui seront possibles. Est-ce dire que XML remplacera HTML? Non. HTML demeure et continue de se dvelopper (HTML 4.0 est une recommandation officielle du W3C). HTML continue d'tre utile pour des petits documents publicitaires ou pour des documents qui n'ont pas un cycle de vie trs long. Par contre, pour les documents que l'on placera sur nos rayons virtuels, XML reprsente une perce technologique importante.
Chapitre VII
JavaScript
VII.1 Gnralits :
version 2.0. Lemploi de JavaScript nest pas limit au Web. Il est adapt tout rseau utilisant la technologie Internet, le protocole http et les documents HTML. Dans notre travail nous avons utilis JavaScript comme un outil pdagogique pour mieux prsenter linterface des pages web, ainsi nous avons intgr des codes en JavaScript dans les frames afin dobtenir des pages web sophistiques et faciles utiliser. Nous avons aussi utilis JavaScript pour faire quelques tches au niveau de la machine cliente avant lenvoi du formulaire au serveur. Ce prsent chapitre deux buts : donner un bref aperu sur les concepts de la programmation oriente objet, et tablir quelques rfrences du langage JavaScript
VII.2 Caractristiques :
JavaScript est un langage scuris, incapable dcrire sur le disque de lutilisateur ou d'excuter toutes autres actions susceptibles dtre utilises par un virus pour endommager le systme. Les caractristiques les plus importantes de JavaScript sont :
q
JavaScript est un langage interprt, son code source est tlcharg et traduit en instructions que lordinateur peut comprendre au moment o JavaScript est base dobjets ; les programmes crits en JavaScript utilisent des objets pr-dfinis. Autrement dit ; nous sommes limits en termes de cration dobjets propres. JavaScript implique un typage faible des variables ; autrement dit, les variables peuvent contenir tout type de donnes. Le code JavaScript est intgr ; il fait toujours partie dun fichier HTML.
VII.3 Programmation Orient Objet : POO

VII.3.1 Introduction :
Aujourdhui, il existe beaucoup de langages hybrides, ou procdures avec quelques fonctionnalits orientes objet. A un niveau langages ont t labors dabord pour nous fournir une structure par lordinateur (do le terme "procdure"), et permettre dorganiser et de manipuler les donnes. des langages fondamental, ces pour crer des aussi pour nous
96
Chapitre VIII Conception
Introduction
VIII.1. Les Outils Utiliss

VIII.1.1. Microsoft FrontPage
Microsoft FrontPage 98 est un outil de cration et de gestion des sites Web expriments. Il comprend lExplorateur FrontPage, qui permet de crer, concevoir et grer lensemble du site Web et lditeur F modifier une page Web. Grce lExplorateur FrontPage on peut crer la structure ou lagencement du site Web, appliquer des thmes graphiques ses pages, organiser ses fichiers et dossiers, importer et exporter des fichiers, tester et rparer des liens hypertexte, administrer des privilges daccs, assurer le suivi des tches, et lancer lEditeur FrontPage. LEditeur FrontPage permet de crer, concevoir et modifier des pages Web. A mesure que nous ajoutons des textes, des images, des tables, des champs de formulaires et dautres lments dans la page, lEditeur FrontPage les affiche tels quils apparatraient dans un navigateur Web. Bien quil sagisse dun outil puissant, lEditeur FrontPage est dune utilisation facile en raison de son interface largement rpandue, similaire un traitement de texte. On na pas besoin dinsrer le code HTML pour utiliser lEditeur FrontPage puisque ce dernier le cre automatiquement. Il est possible de modifier directement le code HTML laide du mode HTML de lEditeur FrontPage. Dans ce mode, on peut modifier du texte, modifier des balises HTML ou du code de script. FrontPage appartient la famille des produits Microsoft Office et il intgre de nombreuses fonctionnalits propres Microsoft Word et Microsoft Excel, telles que la bibliothque des cliparts Microsoft, la vrification dorthographe, le dictionnaire de synonymes et la modification facile des tableaux .FrontPage gre galement les liens hypertexte crs dans des documents Microsoft Office.
119
Modes Affichage
Barre doutils Les Dossiers
LExplorateur de FrontPage
Barre doutils Standard
Barre doutils Mise en Forme
Barre doutils Fonctions avances
Barre doutils formulaires
Barre doutils Tableau
Barre doutils DImages Barre dEtat
LEditeur de FrontPage
VIII.2 Outils graphiques

Nos pages Web doivent contenir plus que les textes, des images. Il nest pas nsrer des graphiques mais la difficult consiste trouver la bonne qualit
dimages. Comme sur le Web, il vaut mieux se limiter aux formats GIF et JPEG, il nous arrive de convertir des fichiers graphiques ou de modifier une image pour renforcer leffet, et de diminuer sa taille pour acclrer sa transmission. Ce programme vient du monde du traitement professionnel de limage. Il offre de nombreuses fonctions extrmement puissantes, permettant, notamment de : q Changer la luminosit, les couleurs et le contraste dune image, q Appliquer de nombreux filtres au contraste, q Utiliser des effets spciaux de dformation dimage, q Dcouper et recoller des parties dimage, pour un montage par exemple.
Paint shop Pro 5
VIII.2.1 Cration des Animations Animagic GIF :

Il est trs utile pour crer des formes particulires du format GIF, avec cet outil il est facile de : q Crer des GIF animes partir de diffrentes images, q Enregistrer des images GIF au format Interlaced (entrelac), q Rendre transparent le fond dune image GIF
121
Animagic GIF
VIII.3 Outil de traitement de son

Sans le son, une page Web nest pas compltement multimdia. Comme dans le graphique il nous a fallu un logiciel pour enregistrer et modifier des fichiers sons.
VIII.3.1 Le magntophone
Windows disposent dj dun outil simple et efficace :
Bouton denregistrement
Le magntophone de Windows 98
VIII.4 Test des pages

Il nous a fallu tester les pages cres avec lditeur FrontPage avec diffrents navigateurs, car chaque Browser (navigateur) ragit diffremment, et pour cette raison on a utilis :
Microsoft Internet Explorer :
Netscape Navigator :
Ces deux navigateurs sont, de loin, les programmes les plus utiliss dans le monde. Un document qui saffiche correctement dans les deux, atteindra donc le plus grand nombre possible dinternautes. Ouvrir galement les documents sans afficher les images, car certains utilisateurs prfrent ne pas les afficher pour mieux acclrer le chargement.
123
VIII.5.2 Implmentation du site

Avant de commencer la construction du site les questions que nous devons nous poser sont : q Que voulons-nous reprsenter sur notre site ? q A qui sadressent nos pages ? Notre site reprsente la bibliothque de linstitut, donc il sadres la communaut des tudiants ainsi quaux enseignants qui vont chercher sur notre site des informations. Dans le but que laccs linformation soit complet et facile on a choisi la reprsentation suivante :
La page daccueil
Il faut faire des choix pour que les informations contenues sur le site restent toujours faciles daccs pour les personnes qui sy connectent. La solution retenue est de diviser la page daccueil en trois frames (grce aux bordures ). Une partie est rserve un "sommaire" et les deux autres servent afficher les informations. Grce ce sommaire toujours prsent lcran, il est facile de passer dun thme un autre sans effectuer de retour en arrire. De plus la largeur du sommaire est redfinissable, ce qui permet de rgler au mieux la dimension de la seconde partie. Le sommaire permet de consulter les renseignements relatifs la bibliothque : q Accueil : Page daccueil du site de la bibliothque. q Infos pratiques : Prsente des informations indispensables sur la rglementation au sein de la bibliothque. q Nouveaut : Page consacr pour les nouveauts de la bibliothque. q Recherche : Propose une recherche par nom et par mots clefs sur les ouvrages de la bibliothque ainsi que les priodiques. q Cours en ligne : Page consacre pour prsenter des cours en ligne. q Autres liens : diffrents liens utiles. q Retour : lien vers le site Web de linstitut.
124
Page daccueil Infos pratiques Heures douverture Nouveauts Comment sinscrire Recherch Comptoir du prt Cours en ligne personnel Autres liens
Retour
125
Chapitre VII
JavaScript
VII.3.2 La programmation oriente objet (POO) :

"Orient objet" est une expression largement employe pour dcrire des langages des styles de programmation, des interfaces utilisateurs. Dun point de vue conceptuel, la POO est souvent dcrite comme la manire dont nous modlisons des objets rels (des maisons, des gens, des machines, des informatiques dans un langage orient objet. ordinateurs, etc.) en utilisant des objets
Quest ce quun objet ?

La POO est fonde sur le concept dobjet, savoir une association des donnes et des procdures (quon appelle alors mthodes) agissant sur ces donnes. On pourrait dire POO est :
Mthodes+Donnes = Objet
Mais cette association est plus quune simple juxtaposition. En effet, dans ce que POO "pure", on ralise ce que lon nomme une encapsulation des donnes. Cela signifie quil nest pas possible dagir directement s objet ; il est ncessaire de passer par lintermdiaire de ses mthodes qui jouent ainsi le rle dinterface obligatoire. On traduit parfois cela en disant que lappel dune mthode est en fait lenvoi dun "message" lobjet. Le grand mrite de lencapsulation est que, vu de lextrieur, un objet se caractrise uniquement par les spcifications de ses mthodes, la manire dont sont rellement implantes les donnes tant sans importance. On dcrit souvent une telle situation en disant quelle ralise une "abstraction des donnes".
Objet & Classe :

En POO, apparat gnralement le concept de classe. Ce dernier correspond simplement la gnralisation de la notion de type que lon rencontre dans les langages classiques. Une classe, en effet, nest rien dautre que la description dun ensemble dobjets ayant une structure de donnes commune et disposant des mme mthodes. Cest essentiellement un plan qui indique lordinateur comment construire un objet lorsquon le lui demande. Les objets apparaissent alors comme des variables dun type. Par exemple on dcide dcrire un programme qui gre des fentres. Pour cela on dfinit une classe appele Fentre qui dcrit toutes les proprits dun tel objet comme par exemple ses quatre coins (Haut, Gauche, Bas, Droite ), figure si-dessous.
97
Chapitre VII
JavaScript
Note : en POO, un objet cr partir dune classe est appel "instance" de la classe. Ainsi dautres termes comme types dobjets, gabarits ou templates sont utiliss pour
Classe : Fentre Haut Gauche Bas Droite
Objet : Fentre : 1 Haut 5 Gauche 100 Bas 20 Droite 125
Objet : fentre : 2 Haut 10 Gauche 30 Bas 30 Droite 50
issus de cette classe
Donnes membres :
Les donnes membres sont des donnes enregistres lintrieur dun objet ou dune classe. Elles sont parfois considres comme des proprits, ou, si elles sont dans un objet issu dune classe, des variables dinstance. On dfinit quelles variables membres font partie dune classe lors de la dfinition de la classe. De nouvelles occurrences de ces variables sont cres chaque fois quun nouvel objet de cette classe est cr. Cela signifie que toutes les occurrences dune classe contiendront les mme type de donnes, mais le contenu de ces variables diffrera dun objet lautre. Un objet qui ne contient que des donnes membres peut tre considr comme fonctionnant quasiment comme une structure C ou RECORD Pascal qui aurait t a Dans lexemple prcdent, on peut voir que lobjet Fentre contient quatre variables membres, appeles Haut, Gauche, Bas, et Droite. Bien que cela impose que ces variables soient prsentes dans nimporte quelle objet cr la valeur contenue dans chaque objet nest pas impose.
Mthodes
Chapitre VII
JavaScript
Dans les paragraphes prcdents, on vu comment les donnes sont contenues dans les objets dans les langages de programmation orients objet, dans cette partie, on va voir de quelle manire le code est lui aussi inclus dans les objets dun POO. Dans un langage traditionnel procdures, on travaille avec des procdures et des fonctions, et lendroit o on insre ce code dans nos programmes dpend principalem Dans un langage orient objet, les fonctions et les procdures sont remplaces par des mthodes, et chaque mthode est associe une classe particulire. Dans lexemple prcdent, on vu comment dfinir la classe Fentre. Maintenant dessinons cet objet, et voyons comment il pourrait changer de taille. Pour cela on dnote deux mthodes pour la classe Fentre : Dessin et Taille. Figure si-dessous.
Classe : Fentre Haut Gauche Bas Droite
Dessin Taille
La classe Fentre avec les deux mthodes : Dessin et taille
Chaque objet cr partir de la classe Fentre contiendra les mthodes Dessin et Taille. Lappel dune mthode peut tre considr comme lenvoi dun message lobjet qui contient la mthode. Par exemple, lappel de la mthode Dessin est assimilable lenvoi dun message Dessin cet objet. Les mthodes sont principalement utilises comme des fonctions ou des procdures comme le C, avec quelques diffrences importantes. Ainsi, lorsquune mthode est invoque, chaque rfrence une variable membre dans le code de la mthode correspondra en ralit une variable membre de la mthode est un membre. Hritage : Un autre concept important en POO est celui dhritage. Il permet de dfinir une nouvelle classe partir dune classe existante (quon rutilise en bloc !), laquelle on ajoute de nouvelles donnes et de nouvelles mthodes. La conception de la nouvelle classe, qui hrite des proprits et des aptitudes de lancienne, peut ainsi sappuyer sur des ralisations antrieures parfaitement au point et les spcialiser volont. Comme on ilite largement la rutilisation de produits existants, et ceci
Chapitre VII
JavaScript
dautant plus quil peut tre ritr autant de fois que ncessaire (la classe C peut hriter de B, qui elle-mme hrite de A). Terminologie oriente objet : Souvent les auteurs ou les langages utilisent diffrents termes pour dcrire des processus identiques. Par exemple lappel dune mthode dans un objet peut tre considr comme une invocation de la mthode, ou comme lenvoi dun message lobjet. Pour cela et pour achever notre petite introduction sur la POO on propose quelque terminologie de la POO : Les variables dun objet Variables dinstance. Variables membres. Proprits. Les mthodes dun objet Mthodes. Fonctions membres. Les mthodes dappel dun objet Appeler une mthode. Envoyer un message. Invoquer une mthode. Crer un objet Allouer un objet. Instancier un objet. Crer un nouvel objet. Crer une instance dune classe. Une classe drive dune autre classe Sous-classe. Classe drive. Classe enfant. Classe descendante.
Une classe dont drivent dautres classes
Classe parent.
Chapitre VII
JavaScript
Classe de base. Super classe. Anctre.

Driver une nouvelle classe dune classe existante :
Sous-classer une classe. Crer une sous-classe. Crer une Classe drive. Driver une classe.
VII.4 La hirarchie des objets dans javaScript :

Les objets sont classs en trois catgories suivant leurs fonctionnalits. Notamment, les objets utiliss pour obtenir les entres de la part des utilisateurs, les objets lis aux liens hypertextes et les objets de contrle de lcran. Au dbut nous commenons par la hirarchie globale des objets.
window
parent
top
self
frames
history
document
location
link
form
anchor
text textarea password
button submit reset Hirarchie des objets JavaScript
radio checkbok select
La figure si-dessous montre la hirarchie compltes des objets JavaScript. Notons que lobjet window (fentre) est lobjet le plus haut dans la hirarchie. Dans la suite de ce chapitre, on prsentera en bref les objets window (fentre), location (emplacement) et history (historique). Lobjet document, lobjet JavaScript le
101
Chapitre VII
JavaScript
VII.4.1 Lobjet window (fentre):

Proprits Mthodes Gestionnaires dvnements onLoad= onUnload=
frames parent selt top status defaultStatus window
alert() close() confirm() open() prompt() setTimeout() clearTimeout()
Cration dune fentre :

Nom de lobjet fentre = window.open( [paramtres] )
Accession aux proprits ou mthodes de la fentre :

window. proprit | mthode( [paramtres] ) self. proprit | mthode( [paramtres] ) nom de lobjet fentre. proprit | mthode( [paramtres] )
Proprits : Proprits status defaultstatus self parent top frames window Valeur string(chane) string(chane) Objet fentre Objet fentre Objet fentre Objet fentre Objet fentre Lisible Oui Oui Oui Oui Oui Oui Oui Modifiable Oui Oui Non Non Non Non non
Mthodes : Syntaxe alert(message)

Valeur de retour Aucune

102
Chapitre VII
JavaScript
confirm(message) prompt(message, rponse par dfaut) open("URL", "nom de la "caractristiques de la fentre" ] ) close() setTimeout("expression", temps millisecondes) clearTimeout(numro setTimeout) didentification fentre"
true ou false (vrai ou faux) Chane de texte entre lutilisateur ou valeur nulle [, Aucune Aucune en Valeur didentification, ventuellement avec la window.clearTimeout() par Aucune
par
allou
employer mthode
fourni
VII.4.2 Lobjet location (emplacement) :

Proprits hash host hostname pathname port protocol search href Mthodes Aucun Gestionnaires dvnements Aucun
Affecter un nouvel emplacement la fentre actuelle :

[window].location = " URL"
Accder aux proprits de lobjet emplacement :

[window].location. proprit
Proprits : Proprit Valeur Lisible Modifiable

103
Chapitre VII
JavaScript
href hast host hostname pathname port protocol search
Chane (string) Chane (string) Chane (string) Chane (string) Chane (string) Chane (string) Chane (string) Chane (string)
Oui Oui Oui Oui Oui Oui Oui Oui
Oui Oui Oui Oui Oui Oui Oui Oui
Les proprits dun objet location (emplacement) se rapportent essentiellement au : serveur hte, protocole utilis, etc. par exemple :
http: // www.ito.com: 80 / projet /index.html #debut
Voici quoi correspondent les proprits de lobjet location. Elles contiennent en : Proprits Valeur protocol "http" hostname "www.ito.com" port "80" host "www.ito.com:80" pathname "#debut" hash "http://www.ito.com:80/projet" href "index.html#debut"
VII.4.3 Lobjet history (historique)

Proprits lenght Mthodes back() forward() go() Gestionnaires dvnements Aucun
Accder aux proprits ou aux mthodes de lobjet historique :

[ window].history.proprit | mthode ( [paramtres] )
Proprits: Proprit length

Valeur Nombre
Lisible Oui
Modifiable Oui
104
Chapitre VII
JavaScript
Mthodes : Syntaxe back() forward() go(nombre relatif | "URL ou titre") Valeur de retour Aucune Aucune Aucune
VII.4.4 Lobjet document :

Proprits alinkColor anchors bgColor cookie fgColor forms lastModified linkColor links location referrer title vlinkColor Proprits : Proprits forms location title lastModified anchors referrer links cookie alinkColor vlinkColor bgColor fgColor
Mthodes clear() close() open() write() writeln()
Gestionnaire dvnements Aucun
Valeur Tableau (array) Chane (string) Chane (string) Chane (string) Tableau dobjet anchor Chane (string) Tableau dobjet link Chane (string) Triple hexadcimal ou une constante
lisible Oui Oui Oui Oui Oui Oui Oui Oui
Modifiable Oui Oui Non Non Non Non Non Oui
Oui
Oui
105
Chapitre VII
JavaScript
linkColor Methods: Syntaxe write("chane de caractres") writeln("chane de caractres") open( ["type Mime"] ) close() clear()
Valeur de retour Boolen true en cas de succs Boolen true en cas de succs Aucune Aucune Aucune
Dans tout document HTML/JavaScript, lobjet document est le plus important. Cet objet est dfini par les balises <BODY></BODY> dans le fichier. Tous les autres objets sont compris lintrieur de lobjet document. Un niveau en dessous, on trouve lobjet form. Un document peut contenir un ou plusieurs formulaires. La proprit forms de lobjet document fournit un tableau index de tous les objets form lintrieur du document. La notation : document.forms[x] Offre accs au xim e formulaire dans le document, et la notation : document.forms.length Renvoie le nombre total de formulaire dans le document. Chaque formulaire peut contenir dautres objets de divers types. Ces objets sont gnralement lis aux entres de lutilisateur et comprennent des zones pour lentre de texte, des boutons doption et des choses du mme genre. Chaque objet form possde une proprit length qui renvoie le nombre dobjets sur le formulaire, ainsi quune element qui fournit un tableau index de ces objets. Ainsi la notation : document.form[0].length Renvoie le nombre dobjet sur le premier formulaire dans le document en cours, et ; document.write(document.form[1].element[1].value) Renvoie la proprit value du deuxime objet sur le deuxime formulaire dans le document.
VII.4.5 Les objets de la gestion des entres utilisateurs :

Tous les objets lis aux entres utilisateur commencent par le mot-cl INPUT, suivi du paramtre type qui spcifie lobjet particulier. Celui-ci est suivi dun nombre variable de paramtres supplmentaires spcifiques de lobjet. Les objets lis aux entres utilisateurs sont :
Chapitre VII
JavaScript
Button :
Lobjet Button gnre laffichage dans le document dun bouton rectangulaire comportant un libell, et ressemblant beaucoup aux boutons de commandes. La syntaxe pour un objet bouton est la suivante :
<INPUT type="Button" name="name" value="texte" [OnliCk="handler"]>
Name est une constante de type chane de caractre spcifiant la proprit NAME de lobjet. Text correspond une constante qui spcifie le texte afficher sur le bouton ( sa proprit VALUE). Handler spcifie le code JavaScript qui est excut quand on clique sur le bouton. Il sagit gnralement, mais pas ncessairement, du nom dune fonction. Il est noter que la spcification dun traitement onCLICK est optionnelle. Cet objet possde deux proprits, name et value. Il est li une seule mthode, Click(). Lexcution de cette mthode produit le mme effet que lutilisateur qui click sur le bouton. Checkbox : Lobjet Checkbox gnre laffichage dune petite case carre dote dun libell adjacent. Lutilisateur peut cliquer sur la case pour lactiver ou la dsactiver. La syntaxe pour cet objet est la suivante :
<INPUT type="Checkbox" name="name" value="value" [CHECKED] [onClick="handler"] >text
Name est une constante de type chane de caractre spcifiant la proprit NAME de lobjet. On utilise ce nom pour se rfrer lobjet dans le code. Value spcifie la valeur retourner au serveur lorsque le formulaire contenant la case cocher est soumis.
Chapitre VII
JavaScript
CHECKED, sil est inclus, spcifie que la case doit tre initialement affiche en mode active. Handler spcifie le code JavaScript qui est excut lorsquon clique sur la case cocher. Text est le texte qui saffiche cot de la case cocher. Lobjet Checbox possde la proprit checked qui renvoie la valeur true lorsque la prit name qui renvoie la valeur la valeur de lattribut de nom affect dans la balise Checkbox et la proprit value qui est utilise pour obtenir lattribut de valeur de lobjet ou pour le modifier. Il existe une seule mthode pour cet objet : Click(). Lexcution de cette mthode produit le mme effet que lutilisateur qui clique Form : Lobjet Form constitue le point nvralgique de bon nombre de choses que nous voudrons faire avec le HTML et JavaScript. Les objets dentre utilisateur, tels que Text et Checkbox , doivent tre placs sur un formulaire. On peut galement utiliser des formulaires pour envoyer des donnes sur un serveur ou pour en rcuprer. La syntaxe de lobjet Form est la suivant :
<Form name="formname" target="windowname" action="serverURL" methode=methode enctype="enctype" [onSubmit="handler"]>
Windowname correspond au nom de la fentre ou du cadre du navigateur dans lequel les rponses aux entres sur le formulaire doivent tre Server URL spcifie lURL du serveur sur lequel des informations entres dans le formulaire doivent tre envoyes. Mthode indique comment les informations sont serveur. Ce paramtre implique deux valeurs possibles : GET et POST. Enctype spcifie lencodage MIME du formulaire. envoyes au
Handler indique le code JavaScript excuter lorsque le formulaire est soumis. Ce code de traitement peut controler si le formulaire est soumis ou non en renvoyant, respectivement, la valeur true ou false . gnralement, ce code se compose du mot-cl return suivi dun appel une fonction de vrification qui renvoie la valeur souhaite. Exemple :
Chapitre VII
JavaScript
<FORMonsubmit="return VerifyData(this) ">
Password: Lobjet Password est identique lobjet Text. A ceci prs que sa valeur est masque du fait de laffichage dastrisques la place des caractres saisis. Pour dfinir un objet Password. On utilise la syntaxe HTML standard :
<INPUT Type="password" NAME=name VALUE="value" SIZE=size>
Lobjet Password possde la proprit defaultvalue qui reflte lattribut VALUE, la proprit name qui reflte lattribut de nom de lobjet et la proprit value qui renvoie le contenu actuel de lobjet. Il existe trois mthodes pour cet objet : focus() place le point dinsertion sur lobjet, blur() retire le point dinsertion de lobjet et la mthode select() qui slectionne, ou met en valeur, le texte affich dans lobjet. Radio : Lobjet Radio est utilis pour laffichage dun ensemble dau moins deux boutons doptions sur un formulaire. La syntaxe de cration dun objet Radio est la suivante :
<INPUT TYPE="radio" NAME="name" VALUE="value" [CHECKED] [onClick="handler"]>text
Cet objet possde les proprits checked, defaultChecked, length, name et value. La seule mthode pour cet objet est : Click() qui produit le mme effet que qui clique sur le bouton. Reset : Lobjet Reset gnre laffichage dun bouton sur un formulaire, qui quand on clique dessus, remet tous les lments du formulaire leur valeur par dfaut. La syntaxe de cet objet est la suivante :
<INPUT TYPE="reset" Conception dun site Web NAME="name" VALUE="button Text" 109
Chapitre VII
JavaScript
Cet objet possde les proprits name et value et une mthode Click(). Select : Lobjet Select est utilis pour afficher une liste droulante ou une liste de slection. Pour dfinir un objet Select, on utilise la syntaxe HTML suivante :
<SELECT NAME="name" SIZE="size" [MULTIPLE] [onBlur="BlurHandler"] [onFocus="ChangeHandler"]> <OPTION VALUE="value"[SELECTED]>text </SELECTED>
Les proprits de lobjet select sont : lengeth, name, option, et selectindex. Cet objet ne possde pas de mthode. Submit : Lobjet submit gnre laffichage dun bouton qui , quand on clique dessus, engendre la soumission du formulaire. La syntaxe de cet objet est la suivante :
<INPUT TYPE=" submit" NAME="name" [onClik="handler"]>
Les proprits de cet objet sont : name et value. Une mthode clik() produit le mme effet que lutilisateur qui clique sur le bouton Submit.
Chapitre VII
JavaScript
text : Lobjet text gnre l affichage dune zone de texte pour la prsentation et lent de donnes sur un formulaire HTML. Il est identique lobjet Text HTML standard, avec en plus lajout de gestionnaires dvnements. la syntaxe est la suivante :
<INPUT TYPE="text" NAME="name" VALUE="value" SIZE="talle" [onBlur="blurhandler"] [onChange="ChangeHandler"] [onFocus="selecthandler">
textarea: Un objet Textarea est similaire un objet Text, ceci prs quil pe ut contenir plusieurs lignes de texte. Il permet lutilisateur dentrer plus de donnes. La syntaxe est la suivante :
<TEXTAREA NAME="name" ROWS=rows COLS=cols [onBlur="BlurHandler"] [onChange="ChangeHandler"] [onFocus="FocusHandler"] [onSelect="SelectHandler"]>text </TEXTAREA>
Les proprits de cet objet sont : defaultvalue, name et value. Les mthodes focus() et blur() sont utilises respectivement pour placer le point dinsertion sur lobjet Textarea et pour lenlever. La mthode select() slectionne le contenu de lobjet.
VII.4.6 Les objets de la gestion des liens hypertextes :

Anchor : Pour dfinir un objet anchor ; on utilise la syntaxe HTML standard :
<A HREF ="locationOrURL" NAME = "name" TARGET dun = "window"> Conception site Web Anchor Text </A> 111
Chapitre VII
JavaScript
LocationOrURL identifie une ancre de distination ou une URL. Si cet attribut est prsent lobjet anchor est galemnet un objet LINK. Name spcifie la balise qui devient une cible hypertexte valide dans le document en cours. Window spcifie la fentre dans laquelle le lien est charg. Cet attribut est requis uniquement si lon spcifie locationOrURL. Anchor Texte spcifie le texte afficher au niveau de lancre. Lobjet anchor ne possde ni proprits ni mthodes. LINK : Un objet LINK est un texte ou une image qui sert de lien hypertexte. Lorsquon clique sur le lien la cible de ce dernier est charge dans la fentre approprie. Un lien peut galement tre un objet anchor. Pour dfinir un lien on utilse la syntaxe HTML standard, en ajoutant les gestionnaires dvnement OnClick et OnMouseOver.
<A HREF = " locationOrURL" NAME = "name" TARGET ="window" OnClic = "ClickHandler" OnMouseOver = "MouseOverHandler"> Text </A>
Lobjet link possde les proprits suivantes: Elles permettent lextraction de Hash spcifie le nom de lancre, ventuellement, dans lURL cible. Il ci de la partie optionnelle de URL, qui suit le symbole # qui identifie un endroit spcifique dans le document. Host spcifie la portion horstname : Port de URL cible. Si lURL ne comprend pas de port, alors la proprit host est identique la proprit hostname. Hostname spcifie lhte et le nom de domaine ou ladresse IP de Href spcifie lURL cible en entier.
112
Chapitre VII
JavaScript
pathname spcifie la portion URL/chemin daccs de lURL cible. Port spcifie le port de communication indiqu dans lURL cible.
Protocol spcifie le protocole de dbut de lURL cible ventuellement. Donc il sagit dune chane de caractres commenant par un Target reflte lattribut TARGET spcifie dans la balise de lien.
Lobjet LINK ne possde pas de mthodes.
VII.4.7 Lobjet navigator (navigateur) :

Proprits appName appVersion appCodeName userAgent Mthodes Aucun Gestionnaire dvnements Aucun
Accession aux proprits de lobjet navigateur :

Navigator.proprit
Proprits : Proprits appName appVersion appCodeName userAgent Valeur Chane (string) Lisible Oui Modifiable Oui
VII.4.8 Objet string (chane de caractres) :

Proprit : Proprit length Mthodes : Syntaxe Chaine.toLowercase() Chaine.toUpperCase()
valeur Entier (integer)
Visible Oui
Modifiable Oui
Valeur de retour La chane en minuscules La chane en majuscules

113
Chapitre VII
JavaScript
Chaine.indexOf( chane de recherche [, index de dmarage ] ) Chaine. lastindexOf( chane de recherche [, index de dmarage ] ) Chaine.charArt( index ) Chaine.substring( indexA, indexB ) Chaine.anchor( " nom de lancrage") Chaine.big() Chaine.blink() Chaine.bold() Chaine.fixed() Chaine.fontcolor( valeur de couleur ) Chaine.fontsize( entier de 1 7 ) Chaine.italics() Chaine.link( emplacement ou URL ) Chaine.small() Chaine.strike() Chaine.sub() Chaine.sup()
Position laquelle commence la chane recherche dans la chane analyse. Position dans la chane analyse, du dernier caractre de la chane recherche Le caractre se trouvant la position index dans la chane analyse Les caractres se trouvant de la position 1 la position 2 (non incluse) Aucune La chane en grands caractres Clignotement de la chane La chane en caractres gras Espacement fixe Aucune Aucune La chane en italique La chane en petits caractres La chane barre La chane en indice La chane en exposant
VII.5 Structure de contrle :

If (condition) { Instructions si vrai }
If (condition) { Instructions si vrai } else { instructions si faux }
Variable = (condition) ? valeur1 : valeur2
For ( [expression initiale] ; [condition] ; [expression finale]) { Instructions } Conception dun site Web
114
Chapitre VII
JavaScript
For (variable in objet ) { Instructions }
While (condition) { Instruction }
With (objet) { Instructions }
VII.6 Oprateurs :
VII.6.1 Comparaison :
== != > >= < <= Egale Diffrent de Suprieur Suprieur ou gal Infrieur Infrieur ou gale
VII.6.2 Arithmtiques :
+ * / % ++ --valeur Plus Moins Multiplication Division Modulo Incrmentation Dcrmentation Ngation
115
Chapitre VII
JavaScript
VII.6.3 Affectation :
= += -= *= /= %= <<= >>= >>>= Affectation Ajoute la valeur de droite la variable de gauche Soustrait la valeur de droite de la variable de gauche Multiplie la valeur de gauche par la valeur de droite Divise la valeur de gauche par la valeur de droite Affecte la valeur de gauche le modulo de cette variable avec la valeur de droite Dcalage, vers la gauche, de la variable de gauche, du nombre de fois Dcalage, vers la droite, de la variable de gauche, du nombre de fois Dcalage, vers la droite, de la variable de gauche, du nombre de fois indiqu par la valeur de droite. Les bits de gauche dcals vers la droite Ralise au niveau binaire un ET avec la variable de gauche Ralise au niveau binaire un OU avec la variable de gauche Ralise au niveau binaire un OU exlusif avec la variable de gauche
&= ^= !=
VII.6.4 boolen :
&& || ! ET logique OU logique NON logique
VII.6.5 Niveau binaire :

& | ^ << >> >>> ET OU exclusif OU Dcalage gauc he Dcalage droite Dcalage droite avec remplissage de zros gauche
VII.6.6 Fonctions :
Function nom de la fonction ( [paramtre1] [paramtreN] ) { Instructions } Conception dun site Web
116
Conclusion
logiciels et du manque du matriel, on est arriv dans une courte dure avec laide de Le travail de ralisation du site nous a clair sur les aspects thoriques et techniques rencontrs pendant nos tudes universitaires. La simplicit apparente de la conception des pages Web cache derrire elle une multitude de difficults exigeant une connaissan protocoles de communications ainsi que des derniers logiciels WYSIWYG, de traitement dimage, du son et de la vido. Les pages construites restent statiques, et parmi les possibilits que nous proposons citons, linsertion dune base de donnes pour augmenter le taux dinteractivit et afin dintgrer toutes les possibilits fournis par lutilisation des bases Enfin, le travail sur ce sujet, qui est propos par lquipe rseaux, nous a un domaine de renomm mondiale qui touche tous les secteurs dactivits de nos jours, cet atout est considrable pour un ingnieur qui se prparent rentrer dans le monde de la recherche.
126
Serveur Web Outils et techniques

[Jonathan Magid, R.DouglasMatthews, poul Jones] [Thomson] 1996.
LE GRAND POCHE HTML 4

[Dick Oliver, Molly Holzschlag] [S&SM] dcembre 1997.
Gnralits sur Internet

[A.GASMI] [ITO] 1998
Le projet Intranet
[Frdrc ALJN, Denis Lafont, Jean-Franoit Macary] [Eyrolles] Deuxime tirage 1999
INTERNET (LES Fondamentaux)

[John R, Levine, Carol Baroudi] Traduction de Etienne Cazin [Thomson] 1996
Tout pour monter son site Web

[louis Kahn, Loura Logan] [Microsoft PRESS] 3etirage 1997
PC POCHE JAVA
[Rolf Maurers, Kai Baufeldt] Traduction de Christophe Stehly [micro application] 2me Edition mars 1997
LE GRAND POCHE Site Internet Conception & ralisation

[Eric Charton] [Simon & Schuster Macmillan] novembre 1997
Internet
[Michel Dreyfus] [Simon & Schuster Macmillan] 1997
Programmer en Langage C++

[Claude Delannoy] [CHIHABE-EYROLLES] 1995
http://www.oclc.org:5046/~emiller/talks/dc5-rdf-talk/ http://www.inria.fr/koala/colas/ http://www.ensta.fr/~doc/h21/doc/doc4/www.page-web.com/tutor/feuilles.html http://www.siteexperts.com/dhtml/chapter1.asp http://www.amazon.com/exec/obidos/ISBN=1572316861/insidedynamichtmA http://dobitel.cnet.fr/ http://vote.weborama.fr/fcgi-bin/vote.fcgi?7675 http://www.w3.org/TR/2000/REC-xhtml1-20000126 http://www.ietf.org/rfc/rfc2046.txt http://www.ensicaen.ismra.fr/~delestre/VRML3.html http:// www.webdeveloppeur.com\index.html http://www.polymers.com/dotcom/polycon/ http://www.rtlsoft.com/animagic/regfaq.html http://www.citeweb.net/apetitje/xml/exemples/hellol.xml http://www.datachannel.com/developers/webbroker/XMLSeattle/index.html http://www.imaginet.fr/ime/javascri.htm http://developer.netscape.com/library/documentation/ http://www.w3.org/ http://www.insidehtml.com/ http://www.webdeveloppeur.com/ http://www.page-web.com/ http://heuss.techfak.uni-bielefeld.de/www/mreinsch/dsssl http://www.dugratuit.com/telechargement/index.htm http://www.biblio.usherb.ca/peb/peb.htm http://www.cuslm.ca/biblio/bibg_education.htm http://www.multimania.com/webtheque http://www.umontreal.ca/ http://www.bib.umontreal.ca/ http://www.cuslm.ca/index.htm http://www.geocities.com/Heartland/Pointe/5013/index.html
ANNEXE A
La palette des 216 couleurs :
Voici la liste des 216 couleurs sous forme de codes hexadcimaux compatibles avec tous les navigateurs du march. Exemple d'utilisation : <FONT COLOR="#FF0000">Couleur </FONT>
FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 990000 993300 996600 999900 99CC00 99FF00 660000 663300 666600 669900 66CC00 66FF00 330000 333300 336600 339900 33CC00 33FF00 000000 003300 006600 009900 00CC00 00FF00 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 990033 993333 996633 999933 99CC33 99FF33 660033 663333 666633 669933 66CC33 66FF33 330033 333333 336633 339933 33CC33 33FF33 000033 003333 006633 009933 00CC33 00FF33 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 990066 993366 996666 999966 99CC66 99FF66 660066 663366 666666 669966 66CC66 66FF66 330066 333366 336666 339966 33CC66 33FF66 000066 003366 006666 009966 00CC66 00FF66 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99 CC0099 CC3399 CC6699 CC9999 FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC CC00CC CC33CC CC66CC CC99CC FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF CC00FF CC33FF CC66FF CC99FF
CCCC99 CCCCCC CCCCFF CCFF99 990099 993399 996699 999999 99CC99 99FF99 660099 663399 666699 669999 66CC99 66FF99 330099 333399 336699 339999 33CC99 33FF99 000099 003399 006699 009999 00CC99 00FF99 CCFFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC CCFFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF
128
ANNEXE B
Liste des balises META : <META NAME="xxx" CONTENT="xxx">
<META NAME="xxx" ... > Description Mots cls Author Identifier-URL Date-Creation-yyyymmdd Date-Revision-yyyymmdd Reply-to revisit-after Category Publisher Copyright Generator robots
Description Description du site en une phrase de prfrence. Liste de mots cls Auteur du site URL de votre site Date de la cration de votre site Date de la dernire modification Votre e-mail Indique la revisite du robot aprs n jours Catgorie de votre site (annuaire) Celui qui publie votre site Copyright(s) de votre site Logiciels utiliss pour la cration de votre site Diriger le robot
Caractres maxi 200 500 -
Exemple <META NAME="Desciption" CONTENT="All HTML, l'autre vision du html"> <META NAME="Keywords" CONTENT="html, xml, sgml, tags"> <META NAME="Author" CONTENT="Cyrille CLEDIERE"> <META NAME="Identifier-URL" CONTENT="http://www.allhtml.com"> <META NAME="Date-Creation-yyyymmdd" content="19990525">"> <meta name="Date-Revision-yyyymmdd" content="19990717"> <META NAME="Reply-to" CONTENT="webmaster@allhtml.com"> <META NAME="revisit-after" CONTENT="15 days"> <META NAME="Category" CONTENT="Internet"> <META NAME="Publisher" CONTENT="Cyrille CLEDIERE"> <META NAME="Copyright" CONTENT="Cyrille CLEDIERE"> <META NAME="Generator" CONTENT="WebExpert, Picture Publisher"> <META NAME="robots" CONTENT="index, follow">
129
ANNEXE C
CARACTERES ACCENTUES. Voici une petite liste des principaux caractres accentus. Il suffit d'insrer le code du caractre pour l'obtenir dans nos pages Web. Avec cette manipulation nous garantissons que l'accent sera reconnu correctement par tous les navigateurs. Caractres en code ISO 5589-1 (ISO-Latin 1)
Caractre Code Iso Entit À À Á Á Â Â Ã Ã Ä Ä Å Å Æ &Aelig; Ç Ç È È É É Ê Ê Ë Ë Ì Ì Í Í Î Î Ï Ï Ð Ð Ñ Ñ Ò Ò Ó Ó Ô Ô Õ Õ Ö Ö × × Ø Ø Ù Ù Ú Ú Û Û Ü Ü Ý Ý Þ Þ ß ß Caractre Code Iso à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Entit à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ
131
ANNEXE D CARACTERES SPECIAUX.

ar tous les navigateurs.
Caractres en code ISO 5589-1 (ISO-Latin 1)
Caractre Code Iso Entit Espace Caractre Code Iso Entit ¡ ¡ ¢ ¢ £ £ ¤ ¤ ¥ ¥ ¦ ¦ § § ¨ ¨ © © ª ª « « ¬ ¬ ® ® ¯ &masr; ° ° ± ± ² ² ³ ³ ´ ´ µ µ ¶ ¶ · · ¸ ¸ ¹ &supl; º º » » ¼ ¼ ½ ½ ¾ ¾ ¿ ¿
132
GLOSSAIRE A:
Active X : Langage de programmation dvelopp par Microsoft et qui concurrence java. Adresse : Dsignation unique de l'emplacement de donnes ou identit d'un quipement intelligent ; chaque quipement sur une mme ligne de communication peut rpond propre message. Adresse lectronique : Code conventionnel au moyen duquel lInternet identifie un utilisateur et lui permet de recevoir de courrier. Adresse Internet : Adresse dun site dinformation sur le rseau Internet. Cette adresse est ifie sous forme numrique (199.99.99.99) ou logique www.les-goudes.fr. Applet : Abrviation de petite application Internet. Applet java : Programme crit en java, et qui sexcute lintrieur dune page HTML. ARPA : Advanced Research Projects Agency ; organisme qui a dvelopp le premier grand rseau commutation de Arpanet : Rseau dordinateurs cr en 1969 par le ministre de la Dfense aux Etats-Unis, cest anctre de lInternet fut dmantel quelques annes plus tard. ASCII : (American Standard Code for Information Interchange ). Code 7 bits trs utilis, en particulier sur lInternet, ce qui explique pourquoi les caractres accentus sont rarement transmis correctement. B: Base de donnes : Collecte de donnes ordonnes pour faciliter leur consultation. Balise : Constitue dun ou plusieurs mots cls encadrs par les deux signes < et > Berner-Lee : ( Tim ) Ingnieur informaticien du CERN lorigine du Web. Bit : Binary digIT ; La plus petite unit d'information dans un systme binair "0". Bps : (bits par second)Unit de mesure du dbit dune voie de transmission caractrisant ce vitesse dun modem. Ne pas confondre avec baud. Browser : (en franais : Routeur, explorateur, fureteur, butineuret surtout : Navigateur.). Programme dexploration du Web. C: CERN : Centre Europen de Recherche Nuclaire, Genve (Suisse). Chemin daccs : Emplacement dun ficher sur un disque. Il se compose des noms de dossiers et de sous-dossiers. Client : Application pour accder aux informations dtenues par un serveur. Client/Serveur : (modle), Type darchitecture dont laquel le Web fonctionnant en client/serveur, il est ncessaire quun protocole commun permette les changes entre le
GLOSSAIRE
logiciel client et le serveur Web. Ce protocole au-dessus des protocoles TCP et IP sappelle le http. Com : (commerciale) Nom de domaine de haut nivaux. Compresser : Rduire la taille dun ficher informatique sans diminuer le nombre
D: DHTML : Dynamique HTML, Extension du langage HTML pour cre des pages Web DNS : (Domain Name system), service Internet qui traduit les noms de domaine en numros IP. Domaine : Nom officiel dun ordinateur sur lInternet, qui figure immdiatemen caractre @. Dans hectopr@monserveur.fr, le nom du domaine est monserveur.fr. DVD : (Digital Versatile Disk). nouveau format des CD haute capacit E: E-mail : Electronique mail ou Adresse lectronique. Elle se compose dun nom dutilisateur. Et dun nom de domaine spar par @. F: Frame : Une page Web peut se diviser en plusieurs fentres, on les appelle frame du nom de la commande HTML. Fichier : Collection dinformations considre comme une unit de traitement par ordinateur. Forum : Dans le sens le plus gnral, groupe de news ou discutions. Fournisseur daccs : Entreprise commercial disposant d une connexion directe lInternet et par lintermdiaire de laquelle vous devez passer pour vous accorder vous-mme au Net lorsque vous ne disposez que dune ligne tlphonique ordinaire du RTC. FTP : (File transfert Protocole) protocole de communication pour changer des fichiers entre ordinateurs. G: Gif : (Graphics inter change Format ), Format de fichier image (comme le JPEG), reconnu par les navigateurs. Gopher : Systme de recherche dinformations par mot cl.
GLOSSAIRE
H: Hte : Dsigne un ordinateur sur lequel on peut se connecter. HTTP: (hypertext transport protocol), Protocole de communication qui dfini la faon dont les pages web circulent de serveur en serveur. HTML : ( HyperTexte Markup Language ). Langage standard, sur Internet, de description de documents hypermdias, ce langage est constitu de marqueurs ou balises, spcifiant la forme HTML driv de SGML (Standard generalized Markup Language). Hypermdias : Type de document virtuel riche, pouvant contenir texte, son, image ou vido, constitu de texte propre et de rfrences ( liens ) des documents externes, sur le rseau. HyperTexte : Type dorganisation de documents, permettant de parcourir linformation de -linaire (fige ), en se dplaant de lien en lien lintrieur ou lextrieur du document. I: Intranet : Rseau interne une entre-prise, qui fonctionne et sutilise comme Internet. Internaute : Utilisateur dinternet. Internet : LInternet est un systme global dinformation rsultant de linterconnexion de milliers de rseaux logiquement relis par un systme dadresses uniques. IP : (Internet Protocol). Protocole utilis sur lInternet pour acheminer les informations sur ISP : (Internet Sevice Provider). J: JPEG : (Joint Photographic Experts group), Format de fichier image (comme le GIF) reconnu par les navigateurs Web. JAVA : langage de programmation, proche du C , pour dvelopper des applications qui sexcutent indiffremment sur nimporte quel type de machine . Souvent utilis pour crire des applets qui se placent lintrieur des pages HTML.Cest un langage compil. Donc plus puissant et plus rapide que java Scripte. JAVASCRIPT : langage de programmation, sorte de Basic, dont le code est inscrit dont les pages HTML. Cest un langage interprt ; chaque fois quune page HTML contenant du java script est charg le navigateur Web dcode les commandes. K:
GLOSSAIRE
L: Lien : Un lien est un mot actif, en cliquant dessus on se retrouve ailleurs dans le document ou dans un autre document.
M: Mail : Courrier. Modem : Acronyme de "modulateur-dmodulateur" dispositif lectronique convertir des signaux lectriques entre ordinateur et une ligne tlphonique. Moteur de recherche : site qui aide retrouver dautres sites. N: Navigateur Web : Logiciel qui aide visualiser les pages web. Par exemples Microsoft Internet explorer ou Netscape Navigateur. Net : Signifie rseau en anglais (network) on abrge souvent Internet par Net. Netscape : socit qui dveloppe Netscape Communicator, le navigateur Web concurrent de Microsoft, Internet Explorer. Newsgroup : Forum de discussion sur le rseau Usenet. Netscape Navigateur : Browser de qualit remarquable ayant largement contribu la popularit du Web. News : Ordinateur raccord lInternet et dont la mission consiste distribuer les news. Non de domaine : Nom qui indique ladresse dun serveur internet. Exemple WWW.yahoo.com Numro IP : Lors de chacune de nos connexions le rseau nous attribue un numro IP,(sorte de numro de tlphone temporaire compos de quatre nombres). Les serveurs disposent dun
charg
de
O:
P: Page : Chaque adresse Web correspond une page Web (un fichier HTML) la premire page Page daccueil : Page web qui saffiche lorsque vous ouvrez voutre navigateur.
GLOSSAIRE
Paquet : Groupe de bits (comprenant des signaux de donnes et de contrle d'appel) transmis la fois sur un rseau PDF : (Portable Document Format) les documents enregistrs au format PDF peuvent tre visualiss dans leur exacte mise en page quel que soit lordinateur sur lequel on les consulte pour lire les fichiers PDF il faut installer Acrobat Reader. Police de caractre : Une police dfinit un dessin pour chaque caractre. Elle est identifie par un nom par exemple : Arial ou times. Protocole : Rgles est conventions qui dterminent la faon dont deux ordinateurs dialoguent. Provider : Fournisseur daccs Internet. Socit qui propose des abonnements Internet (abonnement forfaitaire, mensuel, ou en temps pass). Q: R: Ressources : Appellation des sites aidant retrouver les autres sites ou une information. Requte : Instruction de consultation de la base de donne. Rseau : Interconnexion de plusieurs machines en vue dchanger des informations. Routeur : Equipement utilis dans lInternet pour guider un message de donn travers le seau de donn jusqu la destination demande. RTC : Rseau tlphonique commut. S: Serveur : Ordinateur qui dispose dinformations qui viendront consulter des ordinateurs Clients. Serveur FTP : Serveur sur lequel on rcupre des fichier laide du protocole FTP, on peut aussi enregistrer des donnes sur certains serveur, les serveur dhbergement (utile pour publier des page Web). Site Web : Ensemble des pages Web. Site miroir : Copie conforme dun site sur un serveur install gnralement dans un notre pays, intrt diviser le flux de communication. Site portail : Site qui rassemble divers types dinformations dans le but dattirer les internautes. Systme d'exploitation : Logiciel permettant l'excution d'un certain nombre d'oprations de base (excutions de
GLOSSAIRE
T: TCP/IP : (Transmission Control protocol/Internet Protocol), noms dune famille de protocoles de communication, il en existe plus dune centaine. Tlchargement : Rcuprer des donnes de puis un serveur laide du protocole FTP. Telnet : Protocole Internet pour piloter distance un ordinateur. Les utilisateurs Telnet fonctionnent gnralement en mode texte. Topologie de rseau : Relation physique et logique entre les nuds d'un rseau ; schma d'organisation des liaisons et des nud U: Usenet : Rseau qui rassemble les serveurs de newsgroups, ces serveurs ne sont souvent pas directement connects Internet. URL : (Uniform Ressource Locator), chaque page Web dispose dune URL qui commence par http://(pages web), ftp://(fichier tlcharger). V: VRML : (Virtual Reality ModeLing Language ), langage pour dcrire des objets en 3D. W: Web : Abrviation de World Wide Web qui signifie toile darniez mondiale en franais ; est le service le plus populaire dInternet, il permet de publier des pages (HTML) contenant des textes, des images, des sons, etc. WebBot : petits programmes (CGI) facilement intgrables des pages Web pour la ralisation de fonctions spcifiques (gestion de formulaires, appels de moteurs de recherche, etc.). Webcam : Camra vido directement connecte un serveur et qui envoie tous ce quelle filme sur Internet. Web Casting : Action dmettre sur Internet de linformation en continu. Webmaster : Personne qui supervise un site Web. Ladresse e-mail du Webmaster est gnralement indique sur la page daccueil du site. Windows : Systme dexploitation multitche fentrage cre par Microsoft pour les PC. WWW : Voir Web. X: XML : (eXtensible Markup Language), extension de HTML pour raliser des mises en page bien plus prcises.
GLOSSAIRE
Y: Yahoo : Moteur de recherche sur le Web accessible sur lURL http://www.yahoo.com

Site Web Pour La Gestion de La Bibliothèque

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Site Web Pour La Gestion de La Bibliothèque

Загружено:

Авторское право:

Доступные форматы

Rpublique Algrienne Dmocratique et Populaire

Ministre de lenseignement Suprieur et de la Recherche Scientifique

INSTITUT DES TELECOMUNICATIONS

Pour lobtention du diplme dingnieur dtat en tlcommunications Prsent par :

Devant le jury compos de :

Promotion IGE 20 Soutenu en Juin 2000

INTRODUCTION GENERALE . 2 CHAPITRE I

114 114 115 115 116 116 116 117 117

CONCLUSION .... 126

ANNEXES ... 127

Conception dun site Web

Conception dun site Web

Gnralit sur Internet

I.1 Historique de l'Internet:

Conception dun site Web

Gnralit sur Internet

I.2 Topologie et gestion de lInternet :

Conception dun site Web

Gnralit sur Internet

I.2.1 Rseaux constituants :

Conception dun site Web

Gnralit sur Internet

c) Les Adresses URL :

Conception dun site Web

Gnralit sur Internet

1.2.3 Le systme de noms de domaine (DNS) :

Gnralit sur Internet

I.3 Types de services :

Conception dun site Web

Gnralit sur Internet

I.3.1 Les services dInternet :

Conception dun site Web

Gnralit sur Internet

I.4 Les protocoles rseaux :

I.4.2 IP (Internet Protocol) :

Gnralit sur Internet

I.4.3 Interface entre TCP et IP :

Conception dun site Web

Gnralit sur Internet

Le protocole IP assure les fonctions suivantes :

Conception dun site Web

II.2 Les outils du Web

II.2.1 Les pages Web

a) LURL, un principe de navigation

b) La syntaxe des URL :

II.2.2 Les Hyperliens :

Conception dun site Web

Chapitre II Une page hyperliens

Navigation dans le Web

II.3 Structure du rseau WWW

Conception dun site Web

Le serveur transmet au client des donnes au format HTML

Conception dun site Web

II.3.2 Comment se connecter ?

la disponibilit de certains logiciels sur le poste client, souvent proposs par le

II.3.3 Les informations du Web

a) Lorganisation des pages Web :

II.4 Les Web chercheurs dinformation :

Conception dun site Web

Serveur Web + indexeur +moteur de recherche

Un moteur de recherche Internet

Conception dun site Web

b) Format des balises :