Site web pour la gestion de la bibliothèque

République Algérienne Démocratique et Populaire

Minis

Présent!!

Devant le

PEEE

tère de l’enseignement Supérieur et de la Recherche Scientifique

INSTITUT DES TELECOMUNICATIONS
ABDELHAFID BOUSSOUF - ORAN -
Pour l’obtention du diplôme d’ingénieur d’état en télécommunications é par :

PROJET DE FIN D’ETUDES

M. NEZROUK ABDERRAHMANE M. ACHACHI NAMANE

jury composé de :

résident : M. SOUAG MOHAMED ncadreur : M. HACHEMANI RABAH xaminateur : M. SIDI-ALI-MEBAREK ZERROUK xaminateur : M. GASMI ABDELLAH

Promotion IGE 20 S 0

outenu en Juin 200

SOMMAIRE

INTRODUCTION GENERALE ………………………………………….… 2 CHAPITRE I INTRODUCTION …………………………………………………………………. 5 I.1 Historique de l'Internet …………………………………………………….. 5 I.2 Topologie et la gestion de l’Internet ..……………………………………. 6

I.2.1 Réseaux constituants …………………………………………….. 7 1.2.2 Les adresses sur le réseau Internet …………………………… 7 1.2.3 Le système de noms de domaine DNS ……………………….. 9

I.3 Types de services ……………………………………………………………10 I.3.1 Les services d’Internet …………………………………………… 11

I.4 Les protocoles réseaux ……………………………………………………. 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 Répartition des services entre TCP et IP …………………….. 14

CHAPITRE II Introduction ……………………………………………………………………… 16 II.1 Définition …………………………………………………………………….. 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 réseau WWW ……………………………………………….. 19 II.3.1 L’approche Client/Serveur ……………………………………… 19 II.3.2 Comment se connecter ? ……………………………………….. 21 II.3.3 Les informations du Web ……………………………………….. 22

II.4 Les Web chercheurs d’information ……………………………… 22

CHAPITRE III III.1 Historique …………………………………………………………………… 26

III.2 Généralités …………………………………………………………………. 26

III.2.1 L’évolution du langage HTML …………………………………. 27 a) Un langage à balises ………………………………………… 27 b) Format des balises …………………………………………… 27 c) Documents HTML …………………………………………….. 28 c.1) En-tête 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 d’un lien graphique …………………………… 44 Insertion d’image cliquable …………………………….. 45

c.7) Hypermédia …………………………………………………. 45 hypertexte et hypermédia ………………………………. 45

Création d’animation ………………………………….…. 46 Le son ………………………………………………………. 46 La vidéo …………………………………………………….. 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 ………………………………………………………………… 57 IV.2 Les éditeurs HTML ……………………………………………………….. 57

IV.2.1 Les éditeurs de texte ……………………………………………. 57 IV.2.2 Les éditeurs de tags …………………………………………….. 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 côté 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 côté 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 réalité virtuelle et le Web ………………………….. 71

IV.4 Gestion du site …………………………………………………………….. 72 IV.4.1 Faire connaître le site …………………………………………... 72 IV.4.2 Transfert des pages vers un serveur Web ………………….. 72

IV.4.3 Améliorer le site …………………………………………………. 73 IV.4.4 e-mail ….................................................................................... 73 IV.4.5 Compteur d’accès ……………………………………………….. 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 Définition …………………………………………………………... 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 sélecteur CLASS appliqué à tout marqueur HTML ………... 80

b) Le sélecteur ID ……………………………………………………….. 80 c) Pseudo-classes …………………………………………………….... 81

V.4.2 Sélecteurs ………………….……………………………………... 81 a) Sélecteurs simples ………………………………………………….. 81

b) Sélecteurs 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 Généralité ………………………………………………………………. …. 96 VI.2 caractéristiques …………………………………………………………… 96 VI.3 Programmation Orienté Objet (P.O.O) ………………………………… 96

VI.3.1 Introduction ………………………………………………….…… 96 VI.3.2 La programmation orientée objet (P.O.O) ………………….. 97

VI.4 la hiérarchie des objets ………………………………………………… 101 VI.4.1 L’objet window (fenêtre) ……………………………………….. 102 VI.4.2 L’objet location (emplacement) ………………………………. 103 VI.4.3 L’objet history (historique) ……………………………………. 104 VI.4.4 L’objet document ……………………………………………….. 105 VI.4.5 Les objets de la gestion des entrées utilisateurs ……….… 107 VI.4.6 Les objets de la gestion des liens hypertextes ……………. 112 VI.4.7 L’objet navigator (navigateur) ………………………………... 113

VI.4.8 Objet string (chaîne d …………………………… 114 VI.5 Structure de contrôle …………………………………………………… 114 VI.6 Opérateurs ………………………………………………………………... 115

VI.6.1 Comparaison ……………………………………………………. 115 VI.6.2 Arithmétique …………………………………………………….. 116 VI.6.3 Affectation ………………………………………………………. 116 VI.6.4 booléen …………………………………………………………... 116 VI.6.5 Niveau binaire ………………………………………………..…. 117 VI.6.6 Fonctions ……………………………………………………..…. 117

Chapitre VIII

Introduction ……………………………………………………………………. 119 VIII.1. Les Outils Utilisés ………………………………………………..…… 119

VIII.1.1. Microsoft FrontPage ……………………………………….... 119 VIII.2 Outils graphiques ……………………………………………………… 120

VIII.2.1 Création des Animations ……………………………………. 121 Animagic GIF …………………………………………………………… 121

VIII.3 Outil de traitement de son ……………………………………………. 122 V.3.1 Le magnétophone ………………………………………………. 122

VIII.4 Test des pages ……………………………………………………….… 122 VIII.5 Implémentation du site ………………………………………………... 124 CONCLUSION ………………………………………………………….... 126 ANNEXES ……………………………………………………………..…. 127 ANNEXE A ………………………………………………………………..…… 128 ANNEXE B ……………………………………………………………………… 129 ANNEXE C ……………………………………………………………………… 131

ANNEXE D …………………………………………………………………….. 132

Introduction

Conception d’un site Web 2

Introduction : Qui à besoin d’un site internet ? A priori tout le monde. Le développement

d’Internet a pris une telle ampleur que les amateurs pour appendre le langage HTML sont de plus en plus nombreux.

Les pages HTML constituent aujourd’hui le système de base de l’Internet. Elles offrent une grande variété d’applications allant de la page personnelle au service

commercial professionnel. Les sites Web peuvent inclure du texte ainsi que des graphiques animés, du son, de la vidéo 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 méthode de dialogue innovante. Presque

toutes les publicités présentes dans les médias contiennent une adresse Web. Les journaux télévisés, la presse quotidienne, les universités et les magazines possèdent

eux-mêmes des sites Web.

Pour l’institut, c’est le catalogue disponible 24 heures sur 24, et mis à jour quotidiennement. C’est la documentation interne, acc

quelques minutes. Les sociétés, les universités et les écoles supérieures liées au marché de l’informatique fournissent les meilleurs exemples de création de sites Web.

Aujourd’hui, elles produisent tous des sites Internet et fournissent une multitude de renseignements théoriques et techniques à leurs utilisateurs. Une difficulté avec un

logiciel ?, les pages questions réponses, des cours en ligne, etc.

L’objectif de notre sujet qui est proposé par l’équipe réseaux de notre institut est d’étudier les éléments qui entrent dans la conception d’un site Web ainsi que de

son environnement de fonctionnement.

Les enjeux des différents chapitres sont : Chapitre I : Appréhende les protocoles de communications et les différents

services qui régissent Internet. Chapitre II : Ce chapitre explique en détaille le Word Wide Web.

Le Chapitre III est consacré à l’étude du langage HTML. Chapitre IV: Etude des différents éditeurs dédiés à l’écriture des pages

HTML ainsi que l’enrichissement des pages en utilisant javaScript et Java. Chapitre V: Etude des différentes fonctionnalités du DHTML.

Chapitre VI: Bref aperçu sur le langage XML.

Introduction


Chapitre VII : Syntaxe résumée de JavaScript ainsi qu’une petite introduction

sur la programmation orientée objet. Dans le Chapitre VIII: on implémente les démarches suivies lors de la

création du site web de la bibliothèque pour compléter le site de l’institut.

Chapitre I Généralité sur Internet


INTRODUCTION:

approximativement 29 millions d'utilisateurs, La plupart de ceux-ci sont des universitaires, des employés des gouvernements et des grandes entreprises, qui utilisent principalement l'Internet à des fins de recherche et de diffusion d’information. Mais depuis quelques années, l'Internet s'ouvre progressivement au public et donc au commerce.

Grâce à internet il est possible en quelques minutes de communiquer en temps réel envoyer ou recevoir des messages électroniques, télécharger des fichiers informatiques (image, son …), la mise à jours des logiciels (Windows... .)

I.1 Historique de l'Internet: La première pierre du réseau Internet est posée en pleine guerre froide, à la fin

des années 50. A l’époque, le département de la défense américaine craint de voir son système de communication, alors centralisé, gelé par une attaque soviétique.

Après une dizaine d’années de recherches, la défense met en place en 1969 ‘ARPANET’ (Advanced Research Project Agency NETwork). Composé d’un ensemble de réseaux, il permet aux différents sites de la défense américaine d’échanger leurs informations. La communication reste établie, même si certains sites

La pierre d’angle de ce système repose sur l’utilisation du protocole réseau

TCP/IP (Transfert Control Protocol / Internet Protocol). Ce protocole normalise les

communications entre machines et permet ainsi à tous d’échanger des informations (Mac, PC,...).

Petit à petit, cet ensemble de réseaux s’étend aux universités et grandes entreprises situées 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 l’armée américaine. § NSFnet (partie « publique »), financé par la National Science Fondation.

En 1988, NFSnet prend le nom d’Internet (« INTER – NETwork », que l’on

pourrait traduire par ensemble de réseaux interconnectés) et est financé par l’ensemble de ses membres. Jusque là, de par sa complexité, son utilisation reste réservée à une élite (chercheurs, Universitaires,...).



I.2 Topologie et gestion de l’Internet :

La caractéristique la plus importante à retenir de l'Internet demeure sa topologie c'est à dire sa structuration. Il constitue un réseau décentralisé, composé de tronçons de capacités diverses, un peu comme un réseau routier. Internet n'propriétaire unique, ni une société à actions. C'est plutôt une communauté d'intérêt, une association d'utilisateurs qui défraient eux-mêmes les coûts d'entretien et de modernisation des infrastructures. La première conséquence de cette topologie est que personne n'est en mesure de contrôler le contenu qui circule dans l'ensemble du réseau, à moins que l'ensemble des utilisateurs se mettent d'accord. Il existe cependant certains organismes "chaperons". Mentionnons brièvement :

q IRS (Internic Registration Service), qui gère l'attribution des adresses

q IS (L'Internet Society), dédiée à la promotion et à la coordination du

Net. q NSF (National Science Foundation), qui gère la principale voie rapide

de l'Internet, mieux connue sous le nom de backbone. q ISOC (Internet Society), qui a pour mission « d’accompagner »

l’évolution technique de l’internet et de promouvoir son utilisation auprès des différentes communautés.

q IAB (Internet Architecture Board), qui est considérée comme l’autorité

suprême en matière de réseau et de technique. Elle fixe les règles d’attribution des adresses réseau, noms de domaine, donc un groupe technique qui supervise le développement de l’internet.

q IETF (Internet Engineering Task Force), qui est le principal

pourvoyeur de RFC (Request For comment). C’est un ensemble de groupes de travail ouverts qui proposent des évolutions techniques à court ou moyen terme sur les standards est les architectures.

q IANA (Internet Assigned Numbers Authority), qui a le bureau central d’enregistrement des numéros de ports, de réseaux IP,... sur l’Internet.



I.2.1 Réseaux constituants : L'Internet a intégré partiellement plusieurs réseaux plus anciens, comme Bitnet

(technologie IBM) ou le réseau UUCP (technologie UNIX). Ces réseaux utilisent d'autres conventions d'adressage que l'Internet (adresses IP) et sont en passe de

devenir obsolète, mais ils véhiculent encore beaucoup d'information.

: On trouve trois types d'adresse pour relier un service Internet ou une personne:

q Son adresse Internet. q Son numéro IP.

q Son adresse URL. Les trois méthodes sont équivalentes, la troisième est la plus en vogue

aujourd'hui.

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 départagez les Dupont par leur prénom. Dupont est donc identifié par son prénom, son nom et sa ville.

l'adresse: [email protected]

Réseaux constituants



Si vous ne recherchez pas Dupont mais le nom d'une société, vous n'avez que le nom de la société et sa ville à rechercher, sachant que dans la société en question Dupont travaille peut-être.

Sur Internet le nom d'un ordinateur centralisant plusieurs personnes est organisation.domaine

b) Les numéros IP : Il existe un équivalent des noms précédemment définis, c'est un numéro de 32

bits, que l'on écrit par quatre nombres séparés par trois points. Par exemple, 192.203.245.63 est une adresse TCP/IP donnée sous une forme

plus technique mais moins mnémotechnique que la précédente. Ce sont ces adresses que connaissent les ordinateurs qui communiquent entre eux. 0 8 16 24 31

0 1 0 ID. RESEAU ID. MACHINE

0 8 16 24 31

1 0 ID. RESEAU ID. MACHINE

0 8 16 24 31

0 ID. RESEAU ID. MACHINE

Là aussi on retrouve une certaine logique d'attribution de ces numéros. Le premier groupe de numéro peut être plus ou moins grand (on dit de classe A, B ou C), de telle sorte que plus on réserve de digits pour les premiers numéros, moins il en reste pour la

c) Les Adresses URL : Avec les dernières 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 :

Classe A

Classe B

Classe C

service://machine/directory/fichier



Par exemple :

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 L’emplacement sur le serveur. q Le nom du fichier.

Souvent le nom du répertoire 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 défaut votre lecteur de Web acceptera même des adresses URL sans les symboles http://. Ainsi l'adresse www.microsoft.com est suffisante pour se

rendre chez Microsoft. Ainsi on réservera les petits numéros de classe pour les très gros sous réseau

d'Internet et les grands numéros de classe pour les petits sous réseaux Internet. Ces numéros IP sont les numéros par lesquels les ordinateurs communiquent

entre eux. Mais ils ne peuvent pas être donnés arbitrairement puisque deux ordinateurs sur l'Internet ne peuvent pas avoir le même numéro.

C'est un organisme appelé NIC (Network Information Center) qui fournit les premiers numéros appelés racine du numéro IP, charge à l'administrateur de votre

réseau, de vous distribuer les numéros disponibles dans la plage de numéros attribués. Il est à noter que si vous avez une adresse qui vous identifie, par exemple

[email protected], les fournisseurs Internet qui possèdent un certain nombre d'accès inférieur à leur nombre de clients, peuvent vous attribuer une adresse

TCP/IP qui n'est pas fixe.

1.2.3 Le système de noms de domaine (DNS) : C’est un système de dénomination hiérarchique supporté par des serveurs de

noms qui reçoivent les données depuis une base de données distribuée. Sans le DNS nous serions sans doute obligés de taper à la place d’un nom, une

adresse numérique très compliquée. A l’heure actuelle, les serveurs de noms InterNIC (Internet Network

Information Center) supportent directement des nœuds, appelés domaines de plus haut niveau.

http://www.microsoft.com ftp://www.cern.fr/public



Par exemple : CODE PAYS OU SINIFICATION

Au Australie

Be Belgique

Fr France

De Allemagne

Dz Algérie

Ca Canada

Com Entre prise Commerciale

Edu Organisme éducatif

Gov Institution governmentale

Org Organisme non référé

Mil Site militaire

Net Prestataire des réseaux

Int Organisation internationale

I.3 Types de services : Il y a quatre façons 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'accéder à un ordinateur et de lui demander d'exécuter des logiciels, pour effectuer des tâches ou accéder à des banques de données.

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 spécialisés 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.



I.3.1 Les services d’Internet : Internet offre plusieurs services à ses usagers, et pour y accéder, l’usager doit

disposer des logiciels-clients adéquats. Parmi ces services nous citerons: E-mail: La messagerie électronique est le service Internet le plus utilisé. Elle

représente environ 55% du trafic total. Chaque jour, des millions de messages sont envoyés vers des boites aux lettres numériques 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 thèmes traités

Gopher : Un gopher est un système qui affiche un document et des répertoires

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 transfère sur un autre Gopher.

HTTP: Ce protocole commande l’échange des fichiers entre navigateur Web et

le serveur. Nous devons l’utiliser à chaque fois que nous voulons renvoyer à un autre document Web.

Telnet : Telnet est un protocole de connexion qui permet, à partir d'un micro-

ordinateur 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 bibliothèques proposent ce service : nous nous connectons à l'ordinateur de la bibliothèque et nous consultons directement son catalogue. Pour des raisons de sécurité, les accès Telnet sont généralement privés et destinés 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 référencés : c'est le FTP anonyme. Un serveur FTP anonyme est une machine sur laquelle sont stockés des fichiers mis gratuitement à la disposition de tous les utilisateurs de l'Internet. FTP est le mécanisme idéal pour faire passer les fichiers HTML créés sur notre ordinateur à

Les fichiers stockés sur les sites FTP sont la plupart du temps compressés. Une

fois le fichier récupéré sur votre ordinateur, il va vous falloir le décompresser pour l'exploiter.



I.4 Les protocoles réseaux : I.4.1 TCP (Transmission Control Protocol) : C’est la couche que l’on trouve au-dessus de IP et qui complète celle-ci en

apportant les fonctions suivantes : q Les paquets émis sons remis dans l’ordre à l’arrivée. q Les paquets endommagés ou perdus sons réémis. q Les échanges entre des machines s’effectuent en mode connecté : Ils ont un

début, 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 complémentaire de IP. Après avoir acheminé l'information vers la machine ciblée (le rôle de IP), il s'agit ici d'atteindre l'application référencée. TCP établit un circuit virtuel entre applications

distantes et introduit pour cela la notion de numéro de port. Sur la plupart des machines connectées, plusieurs applications se déroulent simultanément; par le biais

port, TCP joue le rôle 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 modèle client/serveur,

TCP pour mettre en communication des processus éloignés.

Un circuit virtuel est ouvert entre un serveur (X window, Gopher, WWW,...) et une application cliente distante. Le couple numéro IP/ port TCP permet d'adresser un service sur une machine donnée.

TCP/IP est le protocole de l’internet, celui qui permet à tous ces merveilleux

ordinateurs complètement hétérogènes de dialoguer.

I.4.2 IP (Internet Protocol) : Internet protocol est son nom, et la couche 3 son domaine. IP se charge

d’acheminer les paquets de données 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 d’octets (en

Chaque paquet est traité séparément; dans la mesure des possibilités du réseau. Les paquets de retour, chacune sur un chemin qui lui est propre, et sont réacheminés par les routeurs à la discrétion de ceux-ci. Aussi le protocole IP seul présente-t-il les

défauts suivants : q L’ordre d’arrivée des paquets n’est pas garanti. q Le débit n’est pas garanti. q Le contenu des paquets n’est pas garanti.



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

raccordées partagent ces protocoles. IP sert d'intermédiaire 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 débit. L'information à transmettre est découpée en paquets de petite taille. Chaque paquet, outre l'information qu'il est chargé de délivrer, possède l'adresse de l'émetteur ainsi que celle du destinataire. Pour atteindre son destinataire, un paquet passera d’un routeur (commutateurs de paquets) à l’autre... jusqu'à destination. Les machines possèdent un identificateur unique (le

IP), il est représenté par quatre octets, un découpage logique interne permet de numéroter les réseaux, les sous réseaux et enfin les machines. Les plages de numéros

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 réseau gèrent des tables de routage pour créer des chemins vers les différents réseaux qui constituent l'Internet.

Les paquets destinés à une même application, peuvent emprunter des chemins différents, arriver dans le désordre, très exceptionnellement être perdus. IP assure la

traversée du réseau, mais n'assure pas le contrôle 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 : L’utilisateur de IP (en générale TCP ou UDP) dispose de deux primitives.

Emission et indication de réception q la primitive émission et accompagnée de principaux paramètres correspondant

aux divers champs du data-gramme IP :

§ Adresse source et adresse destinataire. § Numéro du protocole. § Services utilisés. § Identification du paquet. § Autorisation du paquet. § Durée de vie. § Longueur des données.



§ Options. § Données reçues.

q La primitive indication de réception fournit au récepteur les paramètres suivants : § Adresse source et adresse destinataire. § Numéro du protocole. § Indicateur de type de service. § Longueur de données reçues. § Options. § Données reçues.

I.4.4 Répartition des services entre TCP et IP : Le protocole TCP assure les fonctions suivantes :

q Transmission de données de taille quelconque en mode orienté connexion.

q Restitution des messages dans l ‘ordre. q Multiplexages de plusieurs communications sur une seule connexion. q Contrôle de flux. q Retransmission en cas d’erreur.

Le protocole IP assure les fonctions suivantes : q Transmissions de données en mode sans connexion. q Routage des données par l’intermédiaire de passerelles. q Fragmentation des données quand leur taille n’est pas limitée.

Chapitre II Le Web

Conception d’un site Web

16

Introduction :

le confond souvent avec l’Internet, alors qu’il n’en constitue qu’une ressource parmi Le mot Web désigne en anglais la toile d'araignée, donc World Wide Web

désigne la toile d'araignée mondiale. Le World Wide Web est la communauté des serveurs utilisant le protocole HTTP pour donner accès à des documents de type hypertexte écrits en format HTML. Il est, depuis 1993, le service Internet le plus populaire, en ce moment même de nouveaux clients et serveurs se raccordent au Web. Tous les services en ligne offrent ou offriront sous peu un accès WWW. Les dernières estimations attribuent 85% du trafic Internet au WWW.

Ce chapitre donne un bref aperçu des concepts de client, de serveur et de protocole utilisé pour le World Wide Web. Nous y découvrirons aussi le

II.1 Définition Le World Wide Web est un système de document Hypermédia distribué. Il a

été développé au CERN (centre européen de recherche en physique nucléaire) par Tim Berners-Lee en 1989. Ce système 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 accéder via le réseau Internet au document hébergé sur un serveur WEB distant. Ces documents sont représentés à l’aide d’un langage de description des pages, le HTML (Hypertext Markup Language). Ce langage, dit à balises, permet de doter certains mots ou images d'une propriété d'hyperlien. Ces liens sont indiqués visuellement sur la page d’écran, et un simple clics au-dessus permet de se connecter au site possédant l’information sous-jacente.

II.2 Les outils du Web Les outils clients d’accès au WWW sont Netscape, Internet Explorer et Mosaic

les plus connus pour les terminaux intelligents, mais il y en a d’autres, comme Cello, et Lynx pour les terminaux en mode ligne. Netscape, créé au NCSA (National Centre for Supercomputing Application) est comme Lynx de l’unlogiciel gratuit (freeware) et qui, comme le serveur WWW, tourne sur toutes les plates-formes et sous la plupart des systèmes d’exploitation existants. Netscape donne accès à des textes comportant des liens hypermédia, qui par cliquage, vont rechercher

Chapitre II Le Web


17

et afficher d’autres médias (textes, images, sons, vidéos) qui se trouvent soit sur le même ordinateur que celui où se trouve le texte d’origine soit peut-être sur un ordinateur situé dans l’hémisphère opposé. Les liens hypermédia peuvepermettre l’accès direct à une autre partie du même texte.

Les documents hypermédia se présentent comme des pages défilantes d’un livre électronique en ligne. Quand l’utilisateur 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 hypermédia" ou à un autre document situé dans le monde Internet, éventuellement près de chez lui ou peut-être dans un autre pays.

II.2.1 Les pages Web Une page Web appelée 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 qu’on le désire. Les pages Web peuvent être créées avec un éditeur de langage HTML ou simplement avec n’importe quel éditeur de texte. Lors de sa création, une page Web est sauvegardée sous le nom d’un fichier portant l’extension. HTML ou HTM.

a) L’URL, un principe de navigation Les URL (Uniform Resource Locators) sont les noms donnés aux hypertextes.

Un URL est le moyen unique pour localiser toute source d’information sur le WWW car chaque organisation possède 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 sûr un serveur http ou un serveur Web.

b) La syntaxe des URL : Même 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 conçu pour donner accès à tous les services traditionnels de l'Internet, comme les News, le Gopher ou le FTP. Le premier élément de l'URL indique le nom du type de service. Cet élément doit se terminer par un deux-points.

Le second élément de l'URL est l'adresse de l'hôte. Il débute toujours par deux barres obliques, et se termine avant la prochaine barre oblique. Il peut parfois se

Chapitre II Le Web


18

terminer par un deux-points suivi d'un chiffre, indiquant alors une connexion sur un port non standard.

Le troisième élément de l'URL indique la localisation du document, relativement à la position du répertoire racine du serveur. Tout ce qui se trouve entre des barres obliques est un élément du chemin d'accès au document, tandis que ce qui se trouve après la dernière 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 après le nom du fichier. Cette indication est un pointeur vers une localisation particulière à l'intérieur d'un document. Le type de connexion, appelé aussi méthode de connexion, peut être :

q HTTP pour accéder à un serveur http Exemple : http : //www.ALLHTML.com/defaut.html q FTP pour transférer 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 données Exemple : wais : // info.bib.dz

II.2.2 Les Hyperliens : Le Web utilise des liens graphiques interactifs. Chaque page Web est reliée

d’autres pages Web par des Hyperliens (mots, phrases, graphiques ou Images). Chaque hyperlien fait référence à une adresse Web d’une page, contenant des informations supplémentaires sur un sujet précis. En cliquant simplement sur une rubrique dans un Browser, il est possible d’accéder à la page sélectionnée. Quand on clique sur un hyperlien, une demande est transmise au serveur Web approprié pour une récupération instantanée d’informations, et cela n’importe où dans le monde.

La figure si-après donne un exemple sur les possibilités de navigation dans un document en utilisant la méthode des hyperliens.

Chapitre II Le Web


19

II.3 Structure du réseau WWW II.3.1 L’approche Client/Serveur : Le Web fonctionnant en client/serveur, il est nécessaire qu’un protocole

commun permette les échanges entre le logiciel client et le serveur Web. Ce protocole au-dessus des protocoles TCP et IP s’appelle le HTTP. Le principe est simple :

q Le client demande une connexion vers le serveur à l’aide d’une requête GET avec pour paramètre le document demandé.

q Le serveur accepte la connexion et fournit au client le document dont l’adresse est l’URL demandé.

q Le serveur coupe la connexion. Note : L’échange entre le serveur et le client est sans état. Il n’y a donc pas de

connexion permanente. Le client et le serveur n’occupent 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 requêtes sont lancées à partir du client Web, la réponse qui est constituée d’un document HTML sera analysée par le client Web puis affichée à l’utilisateur. Le client Web n’a pas besoin de connaître le nom du

hyperliens Une page

Navigation dans le Web

Chapitre II Le Web


20

système ou résident les informations. Du point de vue de l’utilisateur, la connexion s’effectue de façon totalement transparente.

b) Le Rôle du client : Un client à deux rôles essentiels :

q Il doit être capable, à partir d’une information concernant une adresse sur Internet, de localiser cette information ou d’opérer de la façon indiquée par le contenu du pointeur. En ce qui concerne les documents en hypertexte, cela signifie qu’il doit pouvoir parler au serveur au moyen du protocole HTTP. Comme le Web peut également gérer 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 chargée 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 d’autres documents, les images, les sons etc. Le client parle à un serveur Web sur le réseau et ce dernier lui envoie un document. S’il s’agit d’un fichier HTML, il interprète alors le code HTML contenu dans ce document pour formater, puis afficher, convenablement les informations qu’il vient de recevoir. De même, c’est lui qui va exploiter les liens vers d’autres serveurs.

c) Le serveur Web : Le serveur Web, dénommé aussi serveur HTTP-D (Hypertext Transfer Protocol

Daemon) est au sens d’Unix, un processus qui tourne sur une plate-forme (PC, Macintosh, Unix) et qui attend des requêtes en provenance du client Web.

Le serveur transmet au client des données au format HTML

Protocole HTTP

Demande de documents

Documents demandés : HTML, Texte,Images (GIF, JPEG), Applets Java, etc.

serveur client

Chapitre II Le Web


21

HTTP sert à transmettre des documents Web réclamés au serveur par le navigateur. Contrairement à FTP, la connexion ici est temporaire. Elle s’interrompt dès que la transmission est effectuée, sans demander confirmation à l’utilisateur. Il peut arriver que plusieurs liaisons HTTP mènent parallèlement au même ordinateur. C’est

ent le cas lorsqu’un 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 régler, dans la plupart des navigateurs, le nombre maximal de connexions simultanées, ainsi établies. En principe, l’utilisateur d’un navigateur Web ne peut pas intervenir directement sur la connexion HTTP que le logiciel est en train d’établir. Les commandes permettant de guider la connexion HTTP restent le plus souvent cachées aux yeux de l’utilisateur Web. Le navigateur assure à lui seul la communication Internet. C’est ce qui rend le Web si convivial et indulgent. Le numéro de port donnant accès aux serveurs HTTP est 80.

La communication sur le Web peut être rés : q Le navigateur détermine l’URL. q Il demande au DNS l’adresse 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 libérée. q Le navigateur interprète 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 connectés entre eux

(figure suivante) Pour se connecter à ce réseau, il faut normalement passer par l’intermédiaire d’un fournisseur d’accès, accessible à travers la ligne téléphonique. 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 d’accès susceptible de procurer au client un nom d’utilisateur et un mot de passe. La facturation se fait généralement selon le temps de connexion sur le serveur du fournisseur d’accès, point de passage obligé pour l’accès au réseau. Des services complémentaires sont souvent proposés comme une adresse de

gerie. La connexion à un fournisseur d’accès implique

Chapitre II Le Web


22

la disponibilité de certains logiciels sur le poste client, souvent proposés par le .

L’application essentielle pour accéder au Web est un explorateur ou navigateur Internet, application qui présente les pages du Web dans une fenêtre de Windows ou d’un autre système d’exploitation.

Les principaux explorateurs disponibles sont Internet Explorer de Microsoft et Navigateur Netscape.

Ces logiciels impliquent l’existence de couches de communication pour effectuer la connexion avec le fournisseur d’accès. Par exemple, sous Windows 95, ou Windows 98 on peut utiliser l’Explorateur Internet de Microsoft pour l’exploration, il est disponible gratuitement, et Microsoft Network, qui est livré avec Windows 98, pour réaliser la connexion au fournisseur d’accès Microsoft (MSN). La connexion peut aussi être réalisée avec le logiciel d’accès réseau à distance de Windows 98.

II.3.3 Les informations du Web Le Web supporte des documents Hypertextes et Hypermédias, y compris les

graphiques, les sons et la vidéo.

a) L’organisation des pages Web : Pour développer un serveur Web, il faut prendre en considération :

q La présentation Web : cette présentation constituée d’une ou plusieurs pages Web contenant du texte ou des images, liées entre elles de façon justifiée et qui globalement, proposent un ensemble d’informations qui donnent l’impression d’un ensemble cohérent.

q La page d’accueil : cette page est la racine du serveur Web. A partir de cette page, les lecteurs peuvent pénétrer dans le serveur Web. Elle contient généralement une vue d’ensemble de ce que nous allons trouver dans le serveur Web.

II.4 Les Web chercheurs d’information :

Il existe des Web spécialisés dans la recherche d'information sur l'Internet. Ces Webs sont couplés avec des bases de données qui sont alimentées en permanence.

Ils permettent de retrouver n'importe quel type d'information, que ces informations soient stockées 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.

Chapitre II Le Web


23

Il est important que vous mettiez un de ces chercheurs dans notre liste de pages favorites après les avoir utilisés et choisi celui qui nous convenait le mieux.

a) Principe de fonctionnement Le but de cette section est de s'intéresser au mode de fonctionnement de ces

différents moteurs de recherches.

D’un point de vue théorique :

Les moteurs de recherche, au sens véritable du terme, sont ceux qui effectuent eux-mêmes la recherche et l'indexation des pages Web sans intervention humaine.

Les sites d'indexation automatique, comprennent tous : q Une base de données. q Un logiciel de mise à jour de cette base de données.

Ces logiciels de mise à jour, sont appelés 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.

Serveur Web + indexeur

+moteur de recherche

Client Internet

Un moteur de recherche Internet

Données : Fichier HTML, Word, PDF, base de données, etc

Chapitre II Le Web


24

Tout d'abord, ces programmes ont deux missions essentielles : q Lire l'information et la gérer. q Chercher dans ces informations d'autres adresses où aller

chercher. La première de ces deux étapes est facilement compréhensible; elle permet de

faire de l'indexation textuelle qui revient à mémoriser des mots clés, éventuellement les phrases dans lesquelles ils apparaissent et surtout leur localisation, c'est-à-dire leur adresses URL.

La recherche des mots clés se fait par des logiciels comme Glimse, agrep ou free Wais qui sont plus ou moins performants et qui ont des fonctionnalités 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 rencontrés, les adresses d'URL,

aître de nouvelles adresses de Web à explorer par la suite. Cette analyse doit être assez fine pour prendre en compte les aspects suivants :

q Mémoriser 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 requêtes intempestives. De même les URL mailto:, ou telnet: ne sont pas exécutées.

q Mémoriser les dates de visite des pages de manière à ne plus repasser pendant une durée paramétrée.

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.

Chapitre III HTML


26

III.1 Historique World Wide Web (W.W.W.) est née à la fin des années 80 au

laboratoire européen de Physique des particules du CERN. L’objectif initial était de rendre le résultat des travaux de recherche accessibles du monde entier sur un réseau appelé à l’époque la "mère de tous les réseaux" : 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 multimédias et accessibles en tant que documents Hypertextes. Jusqu’en 1990, l’accès aux informations de ce réseau exigeait une bonne

connaissance technique. Cette opération était tellement compliquée que même des physiciens rencontraient de grandes difficultés pour échanger des données. Un de ceux-ci, le célèbre Tim Berners-Lee, a créé une méthode pour relier avec facilité des documents à l’aide de lien hypertexte. L’idée n’était pas nouvelle mais son langage HTML simple a réussi là où des projets hypertexte ambitieux avaient échoué.

Jusqu’en 1993, près de cent ordinateurs furent équipés à travers le monde pour fournir des pages HTML. Ce progrès a permis de communiquer à l’aide du langage HTML dans des domaines aussi variés que l’éducation.

Les pages conçues avec le langage HTML ou Hyper Text Markup Longuage ou encore langage à balisage hypertexte constituent aujourd’hui le système de base d’Internet. Elles offrent une grande variété d’applications. Elles peuvent inclure du texte ainsi que des graphiques fixes ou animés, du son, de la vidéo et même 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 multimédia et du nouveau format haute capacité DVD (Digital Versatile Disk).

III.2 Généralités : Le HTML n’est pas un langage de programmation, à proprement parlé, mais

plutôt un ensemble relativement simple de commandes de mises en forme de documents et de liens vers d’autres documents (texte images, vidéo, base de données ou programme quelconque) qui peuvent se trouver sur le même serveur ou sur un autre serveur.

Pour les serveurs peu importe le type d’ordinateur ou navigateur (browser en anglais) recevant les informations codées en HTML. Tous les navigateurs savent interpréter les balises HTML et s’en servir pour déterminer la structure du document en d’autres termes le titre, les sauts de paragraphes, l’emplacement des images …etc.

Chapitre III HTML


27

Un simple éditeur de texte ASCII suffit pour l’écriture ou la lecture d’un document HTML. Donc un document HTML n’est rien de plus qu’un texte ASCII dont le nom possède l’extension HTML ou HTM selon le système d’exploitation

: Le langage HTML a déjà une histoire donc plusieurs versions et à cet effet les

concepteurs professionnels identifient trois types de pages HTML : 1. Les pages de première génération qui utilisent l’ancienne version 1.0 de

HTML sont en principe constituées de texte aimages peu attractives.

2. Les pages de seconde génération qui utilisent quelques éléments 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 troisième génération qui correspondent au langage HTML 4.0 standard actuel au moment de la rédaction de ce projet.

a) Un langage à balises : Les commandes HTML sont appelées tags en anglais, ce qui est souvent traduit

par marqueur ou balise. Voici les différents types de balises HTML qu’on rencontre : q Balises de définition contenant des méta-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 multimédia.

b) Format des balises : Une balise est constituée d’un ou plusieurs mots clés encadrés par les deux

: Aucun espace ne doit figurer à l’intérieur d’une balise. Ces derniè res peuvent

être écrites indifféremment en majuscules ou en minuscules. Il existe deux types de balise :

<TITLE>, <H1>, <P>,…etc.

Chapitre III HTML


28

q Les balises monolithiques qui apparaissent telles quelles, dans un contenu se suffisent à elles-même. Les balises de fermetures sont facultatives.

Par exemple :

Cette balise indique une rupture de paragraphe. q Les balises conteneurs formées d’une balise initiale et d’une balise

terminale, elles délimitent une partie du contenu et en spécifient l’aspect, la signification ou le traitement à y appliquer. Par exemple :

Le navigateur affichera le texte centré dans l’écran d’affichage. Les deux

balises extrêmes sont identiques à un détail près. Le mot clé de la balise terminale est

Certaines balises peuvent recevoir des paramètres, ceux-ci sont indiqués à l’intérieur des signes “<” et “>”, après le nom de la balise de début. Chaque paramètre comprend un nom, suivi du signe “=” et de sa valeur.

c) Documents HTML : L’ensemble du fichier est placé à l’intérieur d’un conteneur <HTML>. Il est

composé de deux grandes parties qui apparaissent dans cet ordre : q L’en-tête du document. q Corps du document.

Exemple :

<P>

<CENTER> Ce texte est centré </CENTER>

Chapitre III HTML


29

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 d’indiquer le niveau de conformité du document avec la version du HTML. Voici quelques exemples de déclarations possibles :

Commande. Version HTML.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD Level1//EN"> HTML 1.0

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> HTML 2.0

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> HTML 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> HTML 4.0

c.1) En-tête du document : -tête du document est placé dans un conteneur <HEAD>. Il comporte des

données importantes sur le document lui-même, dont une seule information est affichée dans la barre du titre du browser (conteneur <TITLE>).

L’ensembles des balises essentielles qui peuvent figurer dans l’en-tête d’un document HTML sont :

� Balise <TITLE>

La balise <TITLE> permet de donner un titre à un document HTML. Il apparaît

dans une zone spéciale de la partie supérieure du browser (barre de titre). Nombre maximal de caractères est 100. Par exemple :

� Balise <BASE…> La balise monolithique <BASE> indique une adresse de base qui complètera

tous les chemins relatifs. Ses paramètres sont les suivants : q HREF indique l’URL du document. q TARGET indique le nom d’un cadre (frame).

� Balise <ISINDEX …>

La balise monolithique <ISINDEX> indique au logiciel client qu’il est possible d’effectuer une saisie pour interroger un programme externe. Les paramètres possibles sont :

<TITLE>Projet_site</TITLE>

Chapitre III HTML


30

q ACTION indique le nom de l’application ou de la DLL sur le serveur

permettant d’effectuer la recherche. q PROMPT permet d’afficher 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 clés afin que les moteurs de recherche le référencent au mieux. Pour plus d’information voire annexe B.

� Balise < LINK …> La balise < LINK> permet de définir un lien entre un document et un autre. � Balise <NEXTID …>

Identificateur utilisé lors de la génération automatique de page HTML. Il Indique le document suivant.

c.2) Corps du document : Le corps du document, placé dans un conteneur <BODY>, comprend le contenu

significatif du document c’est à dire les données à afficher, tels que le texte, les images, les liens…etc.

Par défaut le fond du document est gris clair, les caractères sont noirs, les prises d’hypertextes sont bleues quand elles n’ont jamais été utilisées, violettes dans le cas contraire, rouge à l’instant de la sélection (dans le cas de NETSCAPE) .

Il est possible de modifier ces paramètres d’affichages en ajoutant à la commande BODY les attributs suivants :

ATTRIBUTS

ALIGN Permet de spécifier l'alignement du document (LEFT, CENTER,

RIGHT ou JUSTIFY). Uniquement I.Explorer.

ALINK Permet de spécifier la couleur des liens actifs.

BACKGROUND Permet de spécifier l'image d'arrière-plan (format gif ou jpeg).

BGCOLOR Permet de spécifier la couleur d'arrière-plan (voir annexe A pour la

codification des couleurs).

BGPROPERTIES Si la valeur est FIXED, le fond reste fixe lors du déroulement du

Chapitre III HTML


31

document. Uniquement I.Explorer.

CLASS Nom de la classe donnée à la feuille de style.

LEFTMARGIN Permet de spécifier une marge de gauche pour le document (en pixel).

LINK Permet de spécifier la couleur des liens.

SCROLL Permet de désactiver les barres de défilement du navigateur (valeur :

no). Uniquement I.Explorer.

STYLE Feuille de style intra-ligne.

TEXT Permet de spécifier la couleur du texte.

TOPMARGIN Permet de spécifier une marge supérieure pour le document (en pixel).

VLINK Permet de spécifier la couleur des liens visités.

EVENEMENT Spécifie un événement Javascript (HTML4.0) (OnClick,

OnMouseOver,...).

Exemple:

Resultat:

c.3) Commenter un document : On peut commenter le code source du document sans que le navigateur affiche

ce commentaire, cela peut s'avérer pratique quand plusieurs personnes travaillent sur le même projet. Cette instruction est aussi utilisée 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 début d’un commentaire et --> (ou </COMMENT>) la fin du commentaire.

Par exemple :

<BODY BGCOLOR="#FF9900" TEXT="#0000FF" LINK="#FF0000" VLINK="#FF0000" ALINK="#FF0000">

Ici le fond est orange. Le texte est bleu.

 Ceci n’est pas un commentaire. <COMMENT> Ceci est aussi un commentaire </COMMENT>

Chapitre III HTML


32

c.4) Options de base de la mise en forme : Tout fragment de texte qu’on veut afficher avec un enrichissement doit être

placé dans un conteneur qui en délimite le début et la fin.

Mise en forme des paragraphes La balise monolithique <P> termine un paragraphe et insère une ligne vide

après le paragraphe (double saut de ligne). Elle peut être également utilisée pour insérer une ligne vide après une image. Elle possède 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> possède aussi les attributs suivant :

q CLASS : Nom de la classe donnée à la feuille de style. q STYLE : Feuille de style intraligne. q WIDTH : Permet de spécifier la largeur (en colonnes) de la page

HTML. q EVENEMENT : Spécifie un événement Javascript (HTML4.0)

(OnClick, OnMouseOver,...). L'attribut NOWRAP permet de ne pas effectuer de retour à la ligne. La balise monolithique <BR> effectue un retour à la ligne (simple espace) en

respectant les marges, elle possède l'attribut CLEAR, qui prend une des trois valeurs : LEFT, RIGHT, ALL, permettant d'insérer un retour à la ligne dès 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 coupée, même 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 d’insérer des lignes horizontales ou filets

horizontaux, son utilisation s’avère très pratique pour séparer les différentes parties d’un document. Elle possède plusieurs attributs qui permettent de modifier la forme du trait :

Chapitre III HTML


33

q ALIGN : impose la position horizontale du trait (left/right/center). q SIZE : la largeur du trait en pixels (de 1 à 10). q WIDTH : Spécifie la largeur de la ligne (en pixels ou % de la

q NOSHADE : S'il est présent, l'effet d'ombre (3d) est annulé. q COLOR : Spécifie la couleur de la ligne (uniquement I.Explorer).

� Balise <CENTER> . . . . </CENTER>

La balise <CENTER> permet de centrer plusieurs éléments sur une page (titres,

textes, images, filets, ...). � Balise <DIV> La balise monolithique <DIV> permet de définir l'alignement de plusieurs

éléments. Elle possède l'attribut ALIGN qui prend 4 valeurs : (elle peut donc remplacer la balise <CENTER>.)

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

� Balise <BLOCKQUOTE > . . . </BLOCKQUOTE > La balise <BLOCKQUOTE > permet de créer un retrait dans la marge de

gauche. Comme les balises <CENTER> et <DIV>, tout élément compris entre les balises d'ouverture et de fermeture bénéficiera 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 remédier à ce problème c’est à 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 même façon.

Chapitre III HTML


34

Cette balise possède l'attribut WIDTH qui permet de spécifier la largeur (en colonnes) de la page. Cet attribut peut prendre 3 valeurs :

1. 40 2. 80 (par défaut) 3. 132.

Mise en forme des caractères : Tailles de polices grasses : � Balise <Hn…> La balise <Hn> (Head) permet de définir le titre d'en-tête de H1 (premier

niveau de titre - texte plus large) à H6 (dernier niveau de titre - texte plus petit). Cette commande possède les mêmes attributs que la commande <P>. Un saut de page est

automatiquement généré après un titre. Par exemple :

Résultat avec I.Explorer :

Les polices de caractères :

� Balise <BASEFONT…>

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

Chapitre III HTML


35

La balise monolithique <BASEFONT…> permet de définir la police standard

dans l’ordre utilisée dans le document, cependant pour que ce dernier soit visualisé correctement (c'est à dire avec la police définie), il faut essayer d'employer une police standard (Arial, courrier...) à toutes les plates-formes, sinon la police paramétrée par défaut sur le navigateur de chaque visiteur sera affichée.

La balise <BASEFONT > possède plusieurs attributs :

q FACE : Permet de définir par ordre de priorité, les noms des polices. q SIZE: Permet de définir la taille de la police de 1 à 7 (valeur par

A noter qu'il peut être utilisé de deux manières:

§ Absolue ex : SIZE=2 § Relative ex : SIZE= +2

q COLOR : Permet de définir la couleur du texte (soit avec le nom de la couleur ou la valeur hexadécimale correspondante).

Par exemple :

� Balise <FONT…> . . . . <FONT> La balise <FONT> permet elle aussi de modifier la taille ou la couleur de la

police de caractère, et elle emploie les mêmes attributs que la balise <BASEFONT>. En réalité elle est identique à la balise <BASEFONT> à un détail près.

suivant a le même effet que l’exemple précédent :

Mise en forme logique : A utiliser de préférence car elles laissent les logiciels clients WWW interpréter

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 généralement en italique. q <STRONG> texte < /STRONG/> met le texte généralement en gras. q <CODE> texte < /CODE > pour l’utilisation d’une police à chasse

fixe. q <SAMP> caractère </SAMP> séquence de caractères littéraux. q <KBD> saisie < /KBD > pour mettre en évidence une saisie de

<FONT FACE="Impact, Verdana" SIZE=2 COLOR="green"> texte . . . </FONT>

<BASEFONT FACE="Impact, Verdana" SIZE=2 COLOR="green"> Text …

Chapitre III HTML


36

q <VAR> variable < /VAR > pour indiquer le nom d’une variable. q <DFN> définition </ DFN > pour mettre en évidence une sous

définition. q <CITE> citation </ CITE > pour mettre en évidence une citation

(généralement en italique).

Mise en forme physique : A utilisation déconseillée car ils ne laissent pas d’alternatives aux logiciels

clients WWW. Ces instructions dites physiques sont plus proches de l'auteur, en effet, avec ces balises ci-dessous c'est l’auteur qui décide 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 l’utilisation d’une police à chasse fixe. q <U> texte </U> souligne le texte. q <STRIKE> texte </ STRIKE > cette commande permet de barrer

du texte. q <BIG> texte </ BIG > cette commande permet d’écrire le texte en

plus gros caractères que les caractères en cours. q <SMALL> texte </ SMALL > cette commande permet d’écrire le

texte en plus petits caractères que les caractères en cours. q <SUP> texte </ SUP > cette commande permet d’écrire le texte en

exposant. q <SUB> . . . </ SUP > cette commande permet d’écrire le texte en

indice.

Caractères accentués Pour inclure des caractères accentués dans un document HTML, on doit

remplacer la lettre accentuée par l'entité correspondante (code ISO 88-59-1 ou ISO Latin-1). Ceci avant tout pour permettre une harmonisation entre les différents systèmes d'exploitations et surtout entre les différentes particularités de chaque langue. (voir annexe C.)

Par exemple : Les caractères accentués.

Résultat : Les caractères accentués.

Chapitre III HTML


37

Caractères spéciaux Les caractères spéciaux sont aussi remplacés par des séquences

d’échappement.(voir annexe D.) Les caractères <,> et & sont interprétés par le langage HTML, pour apparaître

sans interprétation ils doivent être rempla : < pour <. > pour >. & pour &.

Mise en forme des listes : Les listes non ordonnées (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

précédée d'une puce dont la forme varie suivant le niveau d’imbrication avec d’autres listes. La balise <UL> est définie avec <LI> qui représente un item. La balise <LH>

indique le titre de la liste. Voici les attributs de la balise <UL> :

ATTRIBUTS

ALIGN Permet d'aligner la liste (CENTER, LEFT, RIGHT).


COMPACT Spécifie une liste compacte.

SRC Permet de spécifier une image qui représentera la puce. Seulement I.E.

STYLE Feuille de style intraligne.

TYPE Permet de spécifier la forme de la puce (DISC, CIRCLE, SQUARE) seulement Netscape.

EVENEMENT Spécifie un événement Javascript (HTML4.0) (OnClick, OnMouseOver,...).

Par exemple :

<UL> <LH>Titre <LI>Choix 1 <LI>Choix 2 </UL>

Chapitre III HTML


38

Résultat :

• Choix 1

• Choix 2

Les listes ordonnées : Une liste ordonnée s'obtient avec la commande <OL> (Ordered List) qui

permet d'avoir une liste numérotée qui s'incrémente automatiquement. La balise <OL> est définie avec <LI> qui représente un item. La balise <LH> indique le titre de la liste. La balise <OL> possède les attributs suivants :

ATTRIBUTS



COMPACT Permet de réduire la liste.

START Permet de spécifier à quel chiffre la liste va démarrer.


TYPE Permet de spécifier la forme de la puce (chiffre romain ou arabe en majuscule ou minuscule : 1 - I - i - A - a ).


Par exemple : Résultat :

II. Choix 1 III. Choix 2 IV. Choix 3

<OL TYPE=I START=2> <LH>Titre <LI>Choix 1 <LI>Choix 2 <LI>Choix 3 </OL>

Chapitre III HTML


39

Les listes de définition : La commande est <DL> (Definition List). Elle permet de définir une liste avec

définition. Elle est utilisée avec la balise <DT> qui définie le terme et <DD> qui définie la définition du terme. Elle possède les attributs suivant :

Par exemple : Résultat :

Terme définition 1 définition 2 définition 3

Les listes type menu : La balise <MENU> permet d'avoir une liste menu. Chaque élément des listes

est précédé de <LI>. Elle ne possède que l'attribut COMPACT. Les listes imbriquées : Il est possible d’imbriquer différents types de liste. Par exemple :

ATTRIBUTS


COMPACT Permet de réduire l'espace occupé par la liste.




<DL COMPACT> <DT>Terme <DD>définition 1 <DD>définition 2 <DD>définition 3 </DL>

Chapitre III HTML


40

Résultat :

I. item Terme

définition 1

c.5 liaisons entre pages Web : Un lien hypertexte permet l’obtention d’une autre page même si cette dernière

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 l’URL et essaye d’ouvrire le document indiqué.

La balise d’ancrage : Les liens hypertextes sont crées avec la balise <A> qui signifie ancrage (anchor

en anglais). Il peut soit définir la source d’un lien (texte ou image), soit indiquer une destination.

La balise d’ancrage débute avec "<A". elle est ensuite suivie d’une référence HREF "hypertext reference" puis du nom ou de l’URL (Uniform Resource Locator) de la page vers laquelle on veut créer le lien. Après la fermeture de la commande d’ancrage initiale ">", on saisit le texte qui s’affichera au format du lien hypertexte et clôturera avec la balise </A>. Par exemple :

Si on pose le pointeur de la souris au-dessus du texte "Découvrez All HTML",

il prend la forme d’une main, ce qui indique la présence d’un hyperlien dans le document HTML. Entre temps, le browser affiche l’URL du lien dans la barre d’état.

La balise <A> possède les paramètres suivants :

ATTRIBUTS

ACCESSKEY Permet de spécifier une touche (ou groupe) de raccourci.

<OL TYPE=I> <LI>item <DL> <DT>Terme <DD>définition 1 </DL> </OL>

<A HREF="http://www.allhtml.com">Découvrez All HTML</A>

Chapitre III HTML


41


HREF Spécifie le type de lien, interne ou externe ainsi que le protocole.

NAME Spécifie une ancre à laquelle il est possible de faire référence dans un autre lien


TARGET Permet de spécifier le cadre (pour une frame) de destination.

TITLE Spécifie une aide (bulle) lors du passage de la souris sur le lien.


Méthodes de liaison : Il existe deux méthodes importantes pour relier les pages Web entre elles : les

liaisons relatives et les liaisons absolues. 1. Liaison relative

Lorsqu’on crée un lien entre deux pages du même ordinateur, il n’est pas pécifier l’adresse Internet complète. Par exemple si nos deux pages se

situent dans le même répertoire, il suffit d’utiliser simplement leur nom de fichier HTML.

2. Liaison absolue

C’est dans le cas où on utilise l’URL complet dans la définition d’un lien (adressage précis de la page). Ce type de liaison fournit un pointeur exact sur l’emplacement des informations avec lequel :

Catégories de liens hypertextes En principe, on distingue deux catégories de liens hypertexte :

q Les liens internes. q Les liens externes.

<A HREF="pagedeux.htm">Aller en page 2.</A>

<A HREF="http://www.jasc.com">Paint Shop Pro</A>

Chapitre III HTML


42

Liens internes

• Lien vers une partie du document courant : Ce type de liens permet de se déplacer à l'intérieur d'un fichier HTML sans que

le visiteur soit obligé de faire "scroller" la fenêtre. Le visiteur va donc cliquer sur un lien et il sera amené vers l'ancre. Pour cela deux étapes sont nécessaires :

1. <A NAME= "etiquette"> pour définir 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 d’hypertexte: 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 répertoire du document "maître". 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 d’hypertexte : 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.

Lien externe vers un serveur FTP.

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="http://www.microsoft.com/internet">Microsoft Internet</A>

<A HREF="ftp://ftp.allhtml.com">FTP All HTML</A>

<A HREF="news:news.multimania">Les news Multimania!!</A>

Chapitre III HTML


43

Avec un lien externe vous pouvez également proposer un fichier (.EXE, .ZIP, son,

c.6 Les images : L’utilisation des images plus en moins animées rend un site non seulement

attrayant, mais aussi plus expressif, voire dynamique, Cependant, il faut bien faire attention car des problèmes de temps d’accès peuvent apparaître. Par conséquent, si l’emploi d’images est nécessaire, ces dernières doivent avoir impérativement une dimension modérée. Pour une page Web, la profusion de couleurs est inutile et un nombre maximal de 256 pour une belle image suffit amplement. De même, 16 couleurs suffisent souvent pour mettre en valeur un dessin. Si des images proviennent d’un scanner, là aussi il faut respecter des limites: une résolution de 72 points par pouce est suffisante. Avec ces restrictions, les résultats sont tout à fait satisfaisants et le volume des données transmises par le réseau reste toujours raisonnable. Cependant certains utilisateurs configurent leur navigateur afin de ne charger aucune image, toujours dans ce même souci de rapidité d’affichage. Pour que ces utilisateurs perdent le moins d’informations possibles, il faut prévoir de remplacer l’image par un texte la décrivant afin que l’utilisateur juge si c’est important ou non de

er. Ce texte est affiché à l’aide de l’attribut ALT de la balise <IMG>. On a

utilisé cet attribut pour permettre l’affichage d’infos bulle (sur les navigateurs récents) lorsque l’utilisateur déplace le curseur de sa souris sur l’emplacement de l’image.

Les deux commandes qui permettent l’insertion d’une image (gif ou jpg, ou encore png) sont :

Pour insérer une image locale, où "nom_image.gif" est le nom complet du fichier avec éventuellement son chemin relatif à partir du répertoire du document HTML.

Pour insérer une image distante. URL étant l’adresse complète du fichier image. Voici les attributs de la balise <IMG> :

<A HREF="film.mov">Cliquez ici pour télécharger un film</A>

1) <IMG SRC="nom_image.gif">

2) <IMG SRC="URL">

Chapitre III HTML


44

ATTRIBUTS

ALIGN Spécifie l'alignement de l'image par rapport au texte.

ALT Affichage d'un texte (ou légende) de l'image.

BORDER Permet de déterminer la largeur d'une bordure (en pixels).

HEIGHT Spécifie la hauteur (en pixels) de l'image.

HSPACE Spécifie l'espacement à laisser à droite et à gauche de l'image (en pixels).

LONGDESC Spécifie l'URL d'un document contenant une description complète de l'image.

LOWSRC Permet de spécifier le chemin d'une deuxième image (plus légère) pour un affichage plus rapide. Seulement Netscape.

NAME Nom de l'image (utile pour Javascript).

SRC Indique le chemin de l'image (ex: gif/image1.jpg).


VSPACE Spécifie l'espacement à laisser en haut et en bas de l'image (en pixels).

WIDTH Spécifie la largeur (en pixels) de l'image.

EVENEMENT Spécifie un événement Javascript (HTML4.0) (Onclick, Onabort...).

Les images peuvent aussi servir de prises hypertextes :

q Soit toute l’image réagit à un clic. q Soit l’image réagit en fonction de la zone où le clic s’est produit : on

parle dans ce cas là d’image cliquable ou réactive ou encore d’image sensible.

Insertion d’un lien graphique : La commande est la suivante :

Pour effectuer le lien sur le point de branchement de nom : etiquette du document courant, on clique sur l’image "nom_image.gif" qui est la prise d’hypertexte. Tout ce qui a été vu sur les liens est évidemment applicable ici.

<A HREF="#etiquette"><IMG SRC="nom_image.gif"></A>

Chapitre III HTML


45

Insertion d’image cliquable : La balise <MAP> permet de créer une image réactive (côté client) en HTML.

L'image réactive est utilisée généralement pour définir plusieurs liens (interne ou ge, elle est souvent utilisée pour des banderoles. La balise

<MAP> doit être utilisée avec la balise <AREA>. La balise <AREA> possède trois

attributs : q SHAPE qui peut prendre trois valeurs : § RECT pour un rectangle. § CIRCLE pour un cercle. § POLY pour un polygone.

q COORDS : § Indique les coordonnées des coins supérieurs gauche et inférieur droit

de la zone pour un rectangle RECT. § Indique les coordonnées de chaque angle du polygone si on opte pour

la valeur POLY. § Indique les coordonnées du centre du cercle et la dimension du rayon

de ce même cercle pour la valeur CIRCLE. q HREF définit la page de destination du lien correspondant à la zone. On

peut bien entendu, utiliser un lien interne ou externe. Exemple d'une image réactive composée d'un rectangle (zone1) et d'un cercle

(zone2). Chaque zone constitue un lien ver un paragraphe du document courant :

c.7) Hypermédia : hypertexte et hypermédia Hyper signifie plus ou au-delà. Hypertexte est appelé hypermédia dans la

mesure où il comporte des fichiers audio et vidéo. Les navigateurs font appel à des programmes externes, pour palier leur incapacité à traiter certaines formes de données. Par exemple, si un navigateur ne sait pas déployer une séquence vidéo il fait appel à

uate pour lire cette séquence. Bien évidemment il faut que cette application soit installée sur le micro-ordinateur de l’usager.

<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 d’utilisation de le balise MAP">

Chapitre III HTML


46

Création d’animation Il existe plusieurs moyens d’apporter du mouvement à un site Internet. Les gifs

crée par Compuserve en 1989) sont certainement les plus efficaces et les plus faciles à mettre en œuvre pour faire bouger des icônes et ajouter des animations, et donc de l’intérêt, à une page Web. En effet une image au format

importants : 1. La transparence, pour intégrer parfaitement des logos à une page. 2. La possibilité de sauvegarder une chaîne d'image qui accompagnée

d'instructions permet de créer une animation. De nombreux utilitaires graphiques permettent de mettre en œuvr e un gif

animé. Certains sont disponibles en freeware et d’autres, aux fonctions complexes, sont commercialisés. La création d’un gif animé est tellement simple qu’elle peut se

: 1. Sélection de la série d’images qui va constituer la source. 2. Inclure les différents contrôles (commentaire, temporisation...) pour

Il est possible de préciser combien de fois l'animation sera jouée. Habituellement, elle se fait avec l’attribut LOOP (boucle) qui doit être fixée entre 0 et 32760. Dans cette technique, rien ne distingue un GIF animé d’un GIF classique, seul le contenu du fichier connaît les informations pour l’animation.

Les navigateurs telle que Netscape et I.Explorateur supportent le format gif89a de façon native. Donc pour la consultation, cette technique d’animation ne requiert

Le son : L'intégration d'un fichier son (.MIDI, .WAV, .AU ou .AIFF) dans une page

Web peut s'effectuer de différentes façons : 1. Soit avec la balise <BGSOUND> (spécifique à I.Explorer) 2. Soit avec la balise <A HREF> 3. Soit avec la balise <EMBED>

Le tag <EMBED>, en particulier, permet d’intégrer dans un document HTML

n’importe quel fichier son. Le format de fichier n’a aucune importance, car ce n’est pas le navigateur qui le lira mais un programme externe compatible. Voici comment procède le navigateur Web :

q Lorsqu’il rencontre un tag EMBED, il identifie le type du fichier intégré

Chapitre III HTML


47

q S’il ne reconnaît pas un format, il le signale sous forme d’icône

q Dans le cas contraire, il représente le fichier par son icône habituelle, à la demande de l’utilisateur, il active le programme associé auquel il

Voici un exemple d’utilisation de la balise <EMBED> :

q SRC indique le fichier son. q WIDTH indique la largeur de l’icône. q HEIGHT indique la hauteur de l’icône. q AUTOSTART indique si le fichier son est joué automatiquement.(Par

défaut il est égal à TRUE) L’alignement est défini avec le tag ALIGN . Les autres attributs de ce tag sont

également applicables

La vidéo Voici la dernière des merveilles du multimédia que le HTML peut nous offrir.

En effet Nous pouvons placer dans nos pages Web des liens vers des clips vidéo. Les assez conséquents, et les visiteurs qui souhaitent les

visionner devront être équipés de connexions rapides, s’ils ne veulent pas s’ennuyer à

charger des fichiers représentant plusieurs centaines de Kilo−octets. Voici les différents formats vidéo qu’on peut intégrer dans une page HTML :

q MOV : Il s’agit du format QuickTime développé au départ pour le Macintosh. C’est le format vidéo le plus répandu sur le Web.

q AVI : ce format a été introduit avec Vidéo for Windows, il est en standard dans Windows 95.

q MPG : Il s’agit d’un nouveau format des fichiers plus petits avec une

L'intégration d'un fichier vidéo peut s'effectuer de différentes façons : 1. Soit avec la balise <A HREF> 2. Soit avec la balise <EMBED>

Avec la balise <A HREF> la procédure consiste à appeler cette vidéo par un lien hypertexte. Exemple :

<EMBED SRC="win.wav" WIDTH="80" HEIGHT="50" AUTOSTART="FALSE">

<A HREF="video.avi">Cliquez ici pour voir un clip !!</A>

Chapitre III HTML


48

Comme pour les fichiers audio, la balise <EMBED> permet d’inclure

n’importe qu’elle vidéo. Exemple : L’attribut LOOP définit le nombre de boucle de la diffusion de la vidéo. En

outre, nous pouvons définir l’alignement 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 c’est à dire qu’on peut également

exploiter nos pages Web pour recueillir des informations provenant de nos lecteurs. En effet un formulaire HTML fait partie d’une page Web et comprend plusieurs champs dans lesquels le visiteur est invité à saisir une information ou à opter pour un choix. L'information est ensuite envoyée à l'aide de scripts sur le serveur qui héberge notre site puis renvoyée dans la plupart des cas sur l’adresse électronique de notre choix. Par exemple le bon de commande est une utilisation très répandu des formulaires en ligne.

Un formulaire commence par la balise <FORM> et se ferme par la balise

</FORM>. il peut se trouver n’importe où dans le corps du document HTML. La balise <FORM> reconnaît les attributs suivant :

1) ACTION : Indique l'URL (relative) du script CGI ou ISAPI (fourni par le serveur qui héberge vos pages), qui accepte l'information saisie dans le formulaire et vous le retourne suivant les paramètres définis.

2) METHOD : Indique la façon dont les données sont transmises au script ACTION. 2 valeurs sont proposées :

q POST : Pour un formulaire classique. q GET : Pour, par exemple définir un moteur de recherche sur

votre site. 3) ENCTYPE : Cet attribut spécifie le format des données envoyées dans

le cas où un protocole n'imposerait pas un format précis. Iplusieurs valeurs dont :

q "text/plain" : Valeur utilisée dans le cas d'un formulaire classique.

q "multipart/form-data" : Valeur utilisée dans le cas où le formulaire comprendrait un fichier attaché (<INPUT TYPE="file" ...>).

<EMBED SRC=" video.avi." WIDTH=200 HEIGHT=200 AUTOSTART="FALSE" LOOP=1>

Chapitre III HTML


49

4) TARGET : Permet d’indiquer le nom d’une fenêtre ou d’un cadre. Les données renvoyées par le serveur après traitement sont alors affichées 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 d’option (CHECKBOX et

RADIO). q Les fichiers attachés. q Les listes ou les listes combinées (SELECT ET OPTION). q Les boutons de commande, comprenant plusieurs variantes : § SUBMIT : Pour soumettre le formulaire à l’application (le

script dont le nom est la valeur indiquée dans ACTION du marqueur <FORM>).

§ RESET : L’action de ce dernier réinitialise les différents champs du formulaire à leur valeur initiale. Contrairement au bouton SUBMIT, le bouton RESET ne provoque pas d’envoi au script distant.

§ IMAGE : ce paramètre permet de créer des boutons d'envoi et de remise à zéro personnalisés.

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

Chapitre III HTML


50

Résultat (avec I.Explorater) :

c.9 Les tableaux : Le tableau est l’un des outils créatifs les plus puissants et les plus utilisés de nos

jours dans la conception d’une page Web, car il permet d’organiser du texte et/ou des images sur plusieurs colonnes et lignes d’une façon captivante permettant d’attirer l’attention du lecteur, suffisamment longtemps pour qu’il assimile le message.

La création des tableaux se passe autour des balises suivantes : q La balise <TABLE> qui indique au navigateur la création d'un

tableau. q La balise <TH> identifie l'en-tête de chaque colonne.

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

Chapitre III HTML


51

q La balise <TR> définit une ligne de tableau contenant une ou plusieurs colonnes.

q La balise <TD> (table data ou données du tableau) définit une cellule.

Outre que ces balises on trouve aussi la balise <CAPTION> qui permet d’affiche le titre du tableau et qui possède deux attributs :

q TOP : Titre placé au-dessus du tableau (par défaut). q BOTTOM : Titre placé en dessous du tableau.

Bien évidemment, ces balises doivent êtres fermées pour indiquer au navigateur la fin du tableau, d'une colonne, et d'une cellule.

Par défaut, la taille du tableau et celle des cellules qui le composent s’adaptent automatiquement au contenu (texte ou image). Cependant on peut définir 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 : Spécifie la largeur du tableau ou d'une cellule, en pixels ou u navigateur.

q HEIGHT : Spécifie la hauteur du tableau ou d'une cellule, en pixels ou pourcentage de la fenêtre du navigateur.

q BORDER : Spécifie la taille en pixels (par défaut 1) de la bordure du tableau.

q CELLPADDING : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau.

q CELLSPACING : Spécifie l'espace en pixels entre les cellules du tableau.

q BGCOLOR : Spécifie la couleur d'une cellule. q BORDERCOLOR : Spécifie la couleur de la bordure du tableau. q BORDERCOLORLIGHT : Spécifie la couleur aux points culminants

de la bordure du tableau (effet 3d). q BORDERCOLORDARK : Spécifie la couleur de l'ombre de la

bordure du tableau (effet 3d). q BACKGROUND : Spécifie l'URL de l'image à afficher comme

image d'arrière plan du tableau (I.Explorer seulement). A noter que pour exploiter la technique des tableaux comme outil de mise en

page, on définit l’épaisseur de la bordure par 0, ce qui la rend invisible. Afin d’obtenir des cellules plus ou moins grandes pour accueillir des données, les lignes et les colonnes peuvent êtres fusionnées avec les attributs ROWSPAN (pour 2 cellules

Chapitre III HTML


52

adjacentes d’une même ligne ) et COLSPAN (pour 2 cellules adjacentes d’une même colonne).

En principe, tout élément placé dans une cellule de tableau est aligné à gauche et centré verticalement. Néanmoins on peut aligner le contenu d’une cellule ou toute une ligne à la fois horizontalement et verticalement à l’aide des attributs ALIGN (LEFT, RIGHTet CENTER) et VALIGN (MIDDLE, TOP, BOTTOM et BASELINE).

c.10) Cadre est mise en page interactive : Dans les versions précédentes du HTML, l’une des principales limitations était

que l’on ne pouvait afficher qu’une seule page à la fois. Les cadres (développés par Netscape) éliminent cette limitation en permettant le découpagenavigateur en plusieurs documents HTML. Ils représentent une solution similaire aux tableaux pour l’agencement du textes et/ou des images au sein de lignes et de colonnes.

La définition d’un cadre (frame) se fait dans une page "maîtresse" qui indique le découpage.

� Balise <FRAMESET > . . . </FRAMESET > La balise <FRAMESET> prend la place du tag <BODY>, c'est elle qui va

définir les cadres, qu'ils soient verticaux ou horizontaux, et leurs dimensions (en % ou en pixels).

Elle peut avoir les attributs suivants : q ROWS, COLS : définissent le nombre de cadre, qui peut être vertical

(ROWS - rangée) ou horizontal (COLS - colonnes), exprimés en % ou en pixels.

q FRAMEBORDER : Cet attribut permet de déterminer si les cadres

auront ou n'auront pas de bordure. Il a deux valeurs YES ou NO. q FRAMESPACING : permet d’ajouter un espace entre les cadres,

exprimés en pixels. La valeur 0 indique aucun espace. q BORDER : permet de déterminer la taille des bordures entourant les

cadres, exprimés en pixels. La valeur 0 indique aucune bordure. q BORDERCOLOR : permet de déterminer la couleur de l'ensemble

des bordures des cadres. Il suffit pour cela de spécifier une couleur sous forme de nom ou de sa valeur hexadécimale. Ex : BORDERCOLOR="red".

Chapitre III HTML


53

� Balise <FRAME > . . . </FRAME >

Cette balise permet de définir un cadre à l'intérieur du conteneur <FRAMESET>. Elle a plusieurs attributs :

q SRC : Cet attribut indique l'URL du document HTML qui sera

affiché dans un cadre spécifique. q NAME : Permet de donner un nom au cadre. ce qui permettra ensuite

de l'appeler avec l'attribut TARGET. q FRAMEBORDER : Même définition que pour la balise

<FRAMESET>. q BORDER : idem que la définition précédente. N’est valable que pour

Netscape. q MARGINHEIGHT, MARGINWIDTH : permettent de spécifier la

largeur des marges autour du cadre. q NORESIZE : sa présence indique que les dimensions du cadre ne

peuvent pas être modifiées par l’utilisateur. Par défaut les cadres peuvent être redimensionnés.

q SCROLLING : Cet attribut permet d'attribuer ou non une barre de

défilement (scrollbar) à un cadre. Il possède trois valeurs : 1. YES : Indique que la barre de défilement sera toujours visible. 2. NO : Indique que la barre de défilement ne sera jamais visible. 3. AUTO : Indique que le navigateur déterminera si la barre de

ent est nécessaire.

Navigateurs non compatibles

Dans la mesure où certains navigateurs ne sont pas compatibles avec les cadres, il est à la fois sage et prévenant de proposer le contenu d’une page Web sous une autre forme, en utilisant les balises <NOFRAMES> et </NOFRAMES>. Entre ces balises il faut donc théoriquement développer un deuxième site. L’avantage 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 d’indiquer le nom de la fenêtre dans laquelle le document doit être affiché. Voici les différentes valeurs des noms réservés pour les frames cibles :

q _self : Permet d’afficher le document dans la même fenêtre que le lien.

Chapitre III HTML


54

q _parent : Permet d’afficher le document dans la fenêtre parent du

document ou se trouve le lien. q _blank : Permet d 'afficher le document dans une nouvelle fenêtre

ouverte par le navigateur. q _top : Permet d 'afficher le document dans toute la fenêtre du

navigateur et les frames disparaissent. q _new : Identique à _blank.

Cadres locaux

La balise <IFRAME> (spécifique à I.Explorer) permet d'insérer un cadre local (une fenêtre qui fera référence à 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 possède les mêmes attributs que la balise <FRAME> et en plus les attributs HEIGHT et WIDTH qui déterminent la hauteur et la largeur du cadre, (valeur en pixels).

c.11) Les couleurs : Plusieurs balises disposent de paramètres permettant d’indiquer une couleur.

Par exemple l’attribut TEXT du marqueur <BODY> indique la couleur de texte du

document. En HTML les couleurs peuvent être spécifiées de deux façons :

q Soit à l’aide de ses composantes rouge, vert et bleu. q Soit à l’aide d’un symbole.

Le code RVB

En effet on peut indiquer la couleur à l’aide de ses trois composantes rouge, vert et bleu, sous la forme suivante :

Le signe "#" introduit la définition d’une 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 décimales en base 16. Chaque couleur peut donc prendre 256 nuances, de 00 (pas de couleurs) à FF (La combinaison des trois couleurs peut ainsi créer plus de 16 millions de couleurs mais le langage HTML n'en accepte que 216, notées en hexadécimal avec les proportions suivantes :

#rrggbb

Chapitre III HTML


55

00 33 66 99 CC FF

0 % 20 %

40 %

60 %

80 %

100 %

Le code d'une couleur en HTML s'écrit donc ainsi : "003366".

Les 16 couleurs principales

La seconde méthode pour indiquer une couleur fait appel à un nom symbolique reconnu par les navigateurs. Voici les 16 couleurs pouvant ainsi être utilisées :

Nom symbolique Couleur Nom symbolique Couleur BLACK Noir BLUE Bleu MAROON Marron ou rouge foncé FUCHSIA Violet vert GREEN Vert AQUA Bleu clair OLIVE Vert olive WHITE Blanc NAVY Bleu marine YELLOW Jaune PURPLE Violet LIME Vert clair TEAL Cyan foncé RED Rouge GRAY Gris SILVER Gris clair

Chapitre IV HTML et Le Web


57

VI.1 Introduction : Persuader le visiteur de revenir visiter régulièrement un site est la quête du

grand Graal de ceux qui publient sur le Web. La compétition est énorme. Les utilisateurs de jeux ou de programmes éducatifs, d’encyclopédie

sont habitués à des présentations de grandes qualités, les graphiques, les animations vidéo, le son concourent à des présentations 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 très rigide. Bref comparé avec tous ces documents multimédias, un document HTML ordinaire est plutôt plat, quelle que soit la qualité de son contenu.

Les développeurs de site Web sont dans une course effrénée, constamment à la nouveaux pour satisfaire l’enthousiasme des gens pour Internet et

pour le Web en particulier. Un des premiers besoins d’évolution à été de rendre les pages dynamiques en

améliorant le taux d’interactivité entre le document et l’utilisateur. En effet, le standard HTML ou le SGML (Standard Generalized Markup Langage) laisse le libre choix en ce qui concerne les moyens donnés aux programmeurs HTML pour contrôler leurs pages Web. Des éditeurs de navigateurs comme Netscap et Internet Explorer ont d’ailleurs anticipé les standards et mis en œuvre des possibilités pour donner plus de

Cela dit, le langage HTML n’est plus vu comme un simple langage de

formatage de document mais plutôt comme un langage évolutif qui s’enrichit de nouvelles balises et de nouveaux attributs au fil du temps.

Dans ce présent chapitre, on parlera des moyens qui facilitent l’écriture des pages Web ainsi que les possibilités qui concourent à la création des pages Web dynamiques et interactifs.

IV.2 Les éditeurs HTML : Il existe trois méthodes pour coder en langage HTML, du simple éditeur de

texte jusqu’aux environnements très 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 défaut au format texte tout en permettant d’attribuer une extension htm ou html. Par exemple on peut travailler avec le WordPad ou le Blocnotes de Windows 98.



58

Exemple de code source HTML écrit avec l’éditeur WordPad de Windows 98.

IV.2.2 Les éditeurs de tags : Les éditeurs de tags constituent une solution intermédiaire. Ce type d’éditeur

propose un environnement d’édition ASCII avec un support étendu pour les divers codes HTML.

Exemple d’un éditeur de tags HTML, le HotDogPRO.



59

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 résultat. Ont peut créer un document HTML sans jamais avoir entendu parler de HTML. Les packages de ces logiciels nous permettent de voir directement ce qu’on va obtenir. Front page de Microsoft et Dreamweaver de Macromédia font partie de cette catégorie de logiciels. Les sociétés de production importantes qui travaillent avec HTML choisissent souvent ce type de programmes. Mais ne cachons pas les inconvénients de ces éditeurs.

Les éditeurs WYSIWYG limitent les possibilités créatives de l’utilisateur, ils ne proposent que les tags et les attributs qu’ils savent correctement traduire en code HTML. Des lacunes importantes apparaissent, notamment si l’on veut combiner plusieurs tags, et certaines combinaisons sont tout bonnement irréalisables. Le code produit n’est pas toujours correct. Donc la seule solution pour obtenir de bons résultats

e le code pour pouvoir réparer les erreurs.

Exemple d’un éditeur WYSIWYG : Microsoft FrontPage



60

IV.2.4 Microsoft FrontPage : Microsoft FrontPage permet la création et la maintenance rapide et facile de

sites Web extrêmement performants. Son utilisation est menus et des barres d’outils de Microsoft Word ou de Microsoft Excel. Il comprend un éditeur de page Web qui génère automatiquement le code HTML voulu, la conversion automatique d’images vers les format .GIF ou .JPG, un éditeur de points actifs pour transformer rapidement une image en Image map, la création de liens par glisser-déplacer, un éditeur de formulaire ainsi que des assistants et des modèles d’aide à la création de sites. Il permet aussi l’insertion de modules comme les classes Java, les contrôles ActiveX et les divers effets spéciaux et ce, de manière transparente pour l’utilisateur. Il est même possible d’afficher le contenu des Plug in et d’exécuter des

Il dispose d’élément WebBot qu’on peut insérer dans nos pages Web pour

effectuer des tâches 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 d’un site Web et une compréhension de l’interrelation. La section la plus importante est probablement le mode Navigation, qui aide à visualiser l’arborescence du site

IV.3 Devenir interactif sur le Web : IV.3.1 Programmation côté serveur Une façon très rependue d’étendre l’interaction entre l’utilisateur et le contenu

est de faire communiquer la page avec son serveur Web. Ce dernier doit être capable de gérer les fonctions de distribution de page HTML déjà existantes ou de création de pages en répondant à une requête définie. On distingue deux niveaux dans l’utilisation

: q Serveurs Web statiques q Serveur Web applicatifs

Les serveurs Web statiques appelés aussi serveurs http sont ceux qui, à la requête d’un client, renvoient des documents existants sans aucun travail préalable. C’est le cas de beaucoup de serveurs sur l’Internet.

Les serveurs Web applicatifs sont ceux qui, à la requête d’un client construisent une page Web répondant à la demande du client, à ses droits d’accès, à concernant dans la base, etc.

HTML et HTTP étant très limités dans leurs fonctionnalités. Ils ne savent pas traiter l’information comme le fait un programme informatique classique, ni d’accéder à une base de données. Un logiciel serveur est donc nécessaire. En effet pour permettre



61

au serveur d’exécuter des programmes sur la demande d’un client et de lui retourner une réponse sous forme d’une 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 développées généralement en C, C++, Perl et des scripts shell qui permettent d’établir 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é à l’utilisateur d’entrer un thème de recherche et de cliquer sur les options pour préciser la façon dont le moteur de recherche doit traiter la requête. Lorsque

eur clique sur le bouton d’envoi, le navigateur transmet vers le serveur les données saisies dans le formulaire. Sur le serveur, un script CGI formate les informations reçues, puis les transmet, pour traitement à une base de données ou un autre programme tournant sur le serveur. Les résultats reviennent au script CGI qui les oriente vers le navigateur du visiteur, parfois sous forme d’une nouvelle page, parfois sous forme d’informations s’inscrivant dans d’autres champs du formulaire encore

L’écriture des scripts CGI personnalisés peut se faire avec n’importe quel

langage de programmation. En outre, pour pouvoir les installer il faut que : 1) Le serveur soit configuré pour permettre de les exécuter. 2) L’administrateur système (notre hébergeur) nous donne l'autorisation

de les installer, y compris l’accès à des bases de données ou des programmes traitant l’information en provenance de l’utilisateur.

3) Nous sachions biensûr, les installer (et de les personnaliser suivant la configuration du serveur) et définir les permissions.

Quel que soit l’intérêt et l’utilité des scripts CGI qui résident dans la simplicité, leur emploi encombre les serveurs avec de nombreux traitement de requêtes, ce qui consomme beaucoup de ressources sur le serveur.

IV.3.1.2 NSAPI et ISAPI : NSAPI ou Netscape Server API représente la première technique qui à été mise

en œuvre pour remédier aux défauts des scripts CGI. Son principe consiste à remplacer l’exécution d’un programme à chaque appel par l’invocation d’une DLL (librairie dynamique) déjà présente en mémoire. On gagne ainsi en ressource sur le serveur puisqu’il n’est pas nécessaire de lancer un programme pour chaque client.



62

Malheureusement, l’écriture de ces DLL doit être en C++ et demande des connaissances importantes en programmation, ce qui est très coûteux, donc peu utilisé.

Microsoft à également développer sa propre solution qui est équivalente à NSAPI de Netscape et qui se nomme ISAPI.

IV.3.2 Programmation côté client IV.3.2.1 Java, le langage: Java est à la fo is un langage de développement orienté objet et une plate forme

de portabilité. Cela signifie qu’il est plus difficile à apprendre que le langage HTML, mais également plus puissant. Bref c’est un outil destiné aux professionnels. Il possède plusieurs points communs avec le C et le C++, mais les sources d’erreurs ou de confusions les plus courantes ont été supprimées ou contrôlées.

Développé par Sun Microsystem, Java a rencontré un grand succès dés son apparition au début de l’année 1995. Cela est dû à la rencontre entre :

q Un ingénieux mécanisme de portabilité. q Les technologies orientées objets q Le besoin de disposer d’une certaine intelligence sur le poste client

pour répartir les traitements entre ce dernier et le serveur.

La portabilité de Java : Java possède les avantages des langages interprétés et les performances des

langages compilés. En effet les programmes écrits avec Java sont compilés dans une forme intermédiaire, une sorte de pseudo-assembleur, appelée pseudo-code ou bytecodes. Cette forme intermédiaire peut être exécutée sur n’importe quelle machine,

La client formate et visualise les informations reçues

2

3

4

5

6

7

Le client envoie une requête au serveur

Le serveur exécute la requête

La passerelle peut faire appel à d’autres programmes

Le serveur retourne l’information au client

programme et retourne le résultat au serveur

Client Serveur

Passerelle Autres programmes

Programmation d’un CGI ou d’une ISAPI

1



63

si celle-ci dispose d’un noyau d’exécution Java. Ce noyau comprend deux parties importantes :

q La JVM (Java Virtual Machine), qui lit et exécute le p-code. q L’implémentation des interfaces de programmation (API) standard en

Java pour le système d’exploitation concerné. Ainsi le problème de la portabilité se résume à la disposition d’un noyau

d’exécution Java sur la machine cible.

Java et la sécurité : Les applets Java (petites applications Internet) qui s’exécutent dans des

navigateurs compatibles Java sont soumises à de sévères restrictions de sécurité, afin de protéger le poste client contre les agressions. L’innocuité des bytecodes trouvés sur le réseau est vérifiée. C’est la machine virtuelle implémentée dans le navigateur qui permet aux programmes Java de s’exécuter. Les différents browsers compatibles Java fournissent différents niveaux de sécurité lorsqu’il gèrent des applets Java. Le système de Netscape Navigator, très restrictif, a la réputation d’être particulièrement efficace. Avec lui, nous pouvons théoriquement 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

réellement interactives. A titre d’exemple, avec des applets java on peut :

Noyau java pour

Solaris

Noyau Java pour

MacOs

Noyau java pour

Windows2000

Programme source

java

P-Code

Solaris MacOs Windows2000

Compilation en forme intermédiaire

"Machine virtuelle"

La portabilité d’un programme java



64

q Afficher des textes ondulés, des images ainsi que des animations. q Gérer des saisies au clavier. q Inclure des boutons, boutons radio, etc. q Inclure des champs de texte.

Sans oublier qu’une applet Java peut établir une connexion permanente avec le serveur depuis lequel elle à été téléchargée, ce qui nous permet de répartir les traitements entre ce dernier et le poste client.

Programmer en Java : Pour pouvoir programmer avec Java, il nous faut deux logiciels différents. Le

premier est le JDK (Java Development Kit), ou le kit de développement pour Java. Il contient tous les logiciels nécessaires 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 qu’on écrit ainsi que de visualiser les applets qu’on trouve sur le Web. En effet ces deux logiciels n’offrent pas la convivialité des derniers compilateurs Java, mais ils constituent de bons outils d’apprentissage du langage.

Développement d’applets à l’aide d’environnement Java

Si nous voulons écrire des applets java nous disposons d’un grand choix d’environnement de développement. La palette des compilateurs Java présentés plus bas va de la saisie manuelle du code source jusqu’aux outils de programmation graphiques qui permettent de tout faire ou presque sans avoir à écrire une seule ligne de code. Il existe même des interfaces de programmation qula saisie de lignes de code. L’offre, très diversifiée, permet donc à chacun de choisir son outil selon ses capacités et ses besoins.

Plusieurs éditeurs ont rapidement réagi à la déferlante Java et proposent des environnements graphiques :

q Symantec avec Cafe. q Aimtech avec Ljamba.

JVM

P-Code Code source Java Aperçue dans le Browser

Compilation

Les deux étapes d’exécution de code source Java

javac Appletviewer



65

q Borland avec Lette. q Microsoft avec Visuel J++.

Pour les petites applets, le développeur n’a le plus souvent pas besoin de mettre la main à la pâte, il peut recourir à des composants prêts à l’emploi ou à un assistant qui crée des applets à l’aide de menus.

IV.3.2.3 Adjuvants (Plug-in): Netscape grâce à son concept d’adjuvants, est parmi les premiers dans la course

à l’intégration. Le principe des adjuvants est simple : ils permettent d’étendre les capacités multimédias du navigateur à l’aide de module d’extension. Le plug-in est en fait soit :

q Un fichier librairie (extension .DLL). q Un ActiveX (extension .OCX). q Une application indépendante (relié par un type MIME ).

En effet, les serveurs http sont capables de transmettre toutes sortes de documents : textuel, visuel, audio ou encore vidéo. Réaliser un navigateur capable de maîtriser tous ces formats demanderait un travail énorme. Pour cela le navigateur doit être complété, à la demande, par des programme s capables de traiter un format donné.

Deux possibilités sont alors offertes à l’utilisateur :

• Installer des programmes complémentaires (ou utiliser des programmes déjà installés) et paramétrer le navigateur pour qu’il lance le

respondant au type du document automatiquement après avoir chargé celui-ci.

• Installer un module d’extension ou plug-in. Ce programme se branche sur le navigateur, et après chargement du document, ce dernier s’affiche directement dans la fenêtre du navigateur.

Ainsi, le chargement d’un fichier de format Acrobat pourra, suivant la façon dont on a installé les logiciels, lancer Acrobat Reader ou bien faire afficher le document dans la fenêtre du navigateur.

Notons cependant que ces modules d’extensions ne sont pas multiplates-formes.

IV.3.2.4 ActiveX : Contrairement à Java, ActiveX ne constitue pas une réelle révolution. La

technologie mise en œuvre n’est autre qu’une extension de la caractéristique de Microsoft Windows, appelée liaison et incorporation des objets, plus connue sous l’acronyme OLE (Object Linking Embedding). OLE permet à tout ou à une partie d’un programme d’être incorporé à un document créé à l’aide d’un autre programme. A titre



66

d’exemple, cette technique autorise le placement d’une feuille de calcul Microsoft Excel dans un document provenant d’un traitement de texte Microsoft word.

Lorsque Internet à révolutionné le monde de l’informatique au milieu des années 1990, Microsoft a adapté la technologie OLE afin qu’elle fonctionne sur les pages Web en ligne et l’a rebaptisée ActiveX.

Qu’est-qu’un contrôle ActiveX?

Conçue dans le but de concurrencer Java, ActiveX ne constitue pas vraiment un langage de programmation, mais plutôt un standard pour développer des applications, tournant sous Windows 32 bits, indépendamment du langage, du moment que ce dernier soit conforme aux mêmes protocoles.

Ce programme peut être développé avec n’importe qu’elle langage de programmation (C++, Visual Basic ou même Java). Du fait qu’un assistant lui attribue la propriété d’être un contrôle ActiveX.

Différence entre un contrôle ActiveX et une applet Java :

Contrairement aux applets Java, qui disparaissent après leur exécution, les contrôles ActiveX sont enregistrés sur le poste de travail de l’utilisateur, ce qui évite de les recharger à chaque utilisation. Notons aussi que le modèle de sécurité d’ActiveX et différent de celui de Java. Java permet de télécharger n’importe qu’elle applet, mais celle-ci n’a pas accès au disque dur de l’utilisateur. ActiveX permet aux cond’agir comme bon leur semble sur le poste client, mais le client peut exiger une identification des modules qu’il charge.

Pour les développeurs Internet, la technologie ActiveX est considérée comme plus rapide que l’emploi des applets Java. Cependant l’inconvénient est qu’on se limite uniquement aux plates-formes Windows 32 bits, ce qui n’est pas dans l’esprit 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 réagir à certains événements, comme par exemple un clic de souris sur un bouton. On appelle ceci "la gestion par l'événement". Ce terme vient de

rogrammation d’interface graphique utilisateur, comme par exemple Windows pour les PC ou le System pour le Macintosh. Dans ces environnements, le système d’exploitation surveille constamment les périphériques d’entrée (clavier et



67

souris). Chaque fois que l’utilisateur enfance une touche ou déplace la souris, le system prend note de cette action : un événement s’est produit.

De même au niveau des scripts, le navigateur surveille constamment les éléments de document qui ont été conçus pour réagir aux actions

C’est le rédacteur du script qui détermine les éléments d’interface qui doivent répondrent aux actions de l’utilisateur et les actions qu’ils déclenchent.

JavaScript : JavaScript est aujourd’hui encore le moyen le plus courant qu’utilisent les

créateurs de pages HTML pour animer celles-ci. Contrairement à ce que pourrait laisser supposer son nom, JavaScript n’a rien à

avoir avec Java. Développé par Netscape, sous le nom de LiveScript en parallèle avec le logiciel serveur LiveWire. LiveScript a été conçu pour répondre à deux choses :

q De disposer d’un outil que les administrateurs de serveurs LiveWire pourraient exploiter pour gérer LiveWire.

q D’utiliser LiveScript comme moyen de communication entre les documents HTML et les applets Java.

Début décembre 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 l’équipe de développement du langage.

Les applications possibles de JavaScript Comparé aux langages de programmation, JavaScript est un langage pseudo

objet, il est à la fois simple et fort. Il ouvre aux auteurs Web de grandes perspectives car ses applications possibles sont nombreuses. Par exemple il permet :

q D’animer les bas de pages HTML en faisant défiler du texte en bas du navigateur.

q De réaliser de contrôle de saisie localement (pour contrôler la validité

q D’ouvrire de nouvelles fenêtres. q De réaliser des fonctions d’historique des q De créer des pages HTML à la demande du client. q De modifier les propriétés des documents affichés (couleur, titre, taille,

etc.). q De gérer les éléments graphiques qui sont interdépendants.



68

q De donner l’accès à de petites séries d’informations et fournir une interface conviviale vers ces données (proposer une mini-base de données).

Et maintenant explicitons cet exemple pour bien comprendre l’intérêt de JavaScript. Un auteur Web écrirait des instructions JavaScript pour s’assurer de la

des informations entrées par l’utilisateur dans le formulaire. Au lieu de forcer le serveur ou la base de données à réaliser la validation des données ce qui demande des échanges de données entre le navigateur et le serveur, donc une perte de temps.

JavaScript est fort répandu parmi les navigateurs. Néanmoins il présente

plusieurs inconvénients. Tout d’abord, la simplicité du langage a pour conséquence ses limites. Il n’est pas possible de manipuler des notions complexes dans ces pages et

tions élémentaires sont possibles. De plus l’interprétation de JavaScript est assez différente d’un navigateur à un autre et il est délicat de réaliser des pages qui fonctionnent correctement pour tous les navigateurs.

JavaScript a fait aussi l’objet de nombreuses critiques dues aux faiblesses que présente sa conception de la sécurité. Il était possible au début à un script JavaScript de lire ou d’écrire sur un disque dur du poste client, en exploitant certaines bogues du navigateur.

Les différentes version de JavaScript : Il existe à l'heure actuelle plusieurs versions de Javascript, implémentées plus

ou moins par les versions successives des navigateurs Netscape Navigator et Microsoft I.Explorer. Plus précisément, Microsoft emploie le terme Jscript pourlangage de script "ECMA 262" que supporte son navigateur. Jscript est un langage qui a de nombreux points communs avec JavaScript, mais dont l’évolution porte des noms différents. Voici un tableau résumant les différentes versions avec les navigateurs compatibles ainsi que la balise définissant la version.

Version Compatibilité Balise

JavaScript 1.0 I.Explorer 3.0 - Netscape 2.0

<SCRIPT LANGUAGE="JavaScript1.0">

Javascript 1.1 Netscape 3.0 <SCRIPT LANGUAGE="JavaScript1.1">

Javascript 1.2 I.Explorer 4.x - Netscape 4.x

<SCRIPT LANGUAGE="JavaScript1.2">



69

Pour simplifier, disons que Netscape Navigator et Microsoft I.Explorer supportent JavaScript de façon différente mais comparable en terme d’achèvement. A partir des versions 4 des navigateurs, les différences s’atténuent du langage, dont la standardisation a été confiée à un organisme de normalisation indépendant, l’ECMA. Cependant il reste toujours difficile de réaliser un code JavaScript qui fonctionne correctement sur des milieux hétérogènes.

Comment Intégrer un script JavaScript Pour intégrer un script JavaScript dans une page HTML, on introduit des lignes

de code qui sont repérées par les balises <SCRIPT> et </SCRIPT>. Ces lignes de code font partie de la page HTML et sont donc envoyées aules parties statiques de la page.

Les marqueurs <SCRIPT> et </SCRIPT> indiquent au navigateur qu’il doit interpréter en tant que scripte le texte qu’ils entourent. Et du fait que d’autres langages de scripts sont susceptible d’évoluer à l’avenir, on doit spécifier le nom précis du langage, dont lequel est écrit le code, avec l’attribut LANGUAGE. Lorsque le navigateur reçoit cette information indiquant que le script utilise le langage JavaScript,

égré JavaScript pour gérer le code. De plus on doit entourer les scripts par des balises de commentaires ( </STYLE>

<H1 class= classique>bonjour! Messieurs</H1>

<STYLE TYPE="text/css"> 

#[nom d'identification] [déclaration]

Chapitre V DHTML


81

c) Pseudo-classes : Un ensemble d'éléments qui répondent à un même critère de contexte, forment

ce que l'on appelle une pseudo-classe. Ils sont spécifiés 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 définir sans ajouter le A (qui spécifie les ancres) et donc, on

peut écrire l'exemple précédent par : :link {font-size:14px; color:royalblue} :visited {font-size:16px; font-style:italic; color:maroon} :active {color:red}

V.4.2 Sélecteurs : a) Sélecteurs simples : Un sélecteur simple associe un élément (par son type ou son attribut) à une

règle particulière et cela, quelle que soit la position qu'il occupe parmi les autres éléments. On peut grouper plusieurs sélecteurs simples, à une même règle de présentation, en les séparant par des virgules (",").

H1,H2 {color:navy} H3, H4, H5 {color:red} H6,H7 {color:green}

Dans cet exemple, les en-têtes H1 et H2 sont affichés en bleu, H3,H4 et H5 sont affichés en rouge, H6 et H7 sont affichés en vert.

b) Sélecteurs contextuels : Comme leur nom l'indique, les sélecteurs contextuels associent une règle

particulière à un élément, mais en fonction de sa situation. Par exemple, tous les

<STYLE TYPE="text/css">  </STYLE>

Chapitre V DHTML


82

éléments <STRONG> de classe ex (CLASS="ex") situés dans des paragraphes (P) sont affichés en jaune. Si un élément <STRONG> n'est pas inséré dans un élément P

(SPAN, DIV...) ou un élément P de classe différente, la règle ne lui sera pas appliquée. On sépare par des espaces les sélecteurs contextuels que l'on veut grouper.

Par exemple :

Codes HTML et visualisation : Résultat :

Voici un élément strong situé dans un élément P de classe ex.

Chaque sélecteur peut faire référence à une CLASSE, un ID ou un TYPE d'élément.

V.4.3 GROUPES : La création 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 : Et voici comment il est possible de grouper cette classe : Les résultats sont les mêmes.

V.5 Animation des pages Web : V.5.1 Principe : L'animation des éléments présents sur une page Web se fait en modifiant leurs

propriétés (position, hauteur, largeur, visibilité, z-index, etc.) ou en utilisant leurs méthodes (fonctions associées à un élément). Cela ne peut se faire qu'à l'aide d'un code Javascript, permettant de modifier les propriétés des éléments, suite à des événements

utilisateurs (clic sur la souris, déplacement de la souris,...), et cela grâce à une structuration des éléments dans la page définie par le DOM (Document Object Model).

P.1{font: Arial; font-size: 12pt; line-height: 14pt}

P.1{font: 12/14pt Arial}

P STRONG.ex {color: green}

<P> Voici un élément <STRONG CLASS="ex">strong</STRONG> situé dans un élément P de classe <EM>ex</EM>. </P>

Chapitre V DHTML


83

V.5.2 Qu'est-ce que le DOM? : Le DOM est une spécification développée par le W3C, l'organisme chargé

d'élaborer des standards de l'Internet. DOM est l'abréviation de "Dynamic Object Model" ou "modèle objet du document". L'importance d'en connaître le principe vient du fait qu'il est déjà 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 contienneninertes. Par contre, le DOM vient bouleverser cette façon de voir, car celui-ci permet aux documents de devenir de réelles applications.

V.5.3 Qu'est-ce que cela signifie pour les documents HTML? : Le modèle objet du document rend maintenant possible la manipulation de

chacun des éléments HTML d'une page : il définit comment chacun des éléments est adressé et comment les styles leur sont appliqués. On ne pouvait espérer une telle flexibilité avant l'apparition des navigateurs 4. Son prinnavigateur et le document qui y est affiché comme une hiérarchie d'objets, possédant des propriétés intrinsèques et auxquels on peut accéder en décrivant la hiérarchie qui

Une autre caractéristique du DOM est à souligner : l'interaction, le contenu et la

structure du document sont tout à fait indépendants. Cependant il est à noter que DOM n’est qu’un modèle et que ce modèle doit être complété par une mise en œuvre concrète en JavaScript. Cette absence de précision conduit bien sûr à des différences entre les différents navigateurs supportant DOM et DHTML. En effet, les deux grands navigateurs (Internet Explorer 4.x et Netscape 4.x) ne sont pas entièrement compatibles. Internet Explorer 4.x donne beaucoup plus de possibilités d'action (par les scripts) sur les éléments 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

nœuds. Tous les nœuds, excepté le nœud racine, possèdent un parent. De plus, chaque nœud est numéroté séquentiellement, de façon à l'identifier (il peut posséder également un nom). En somme, les couches du document consistent en une collection ordonnée d'éléments où chacun d'eux constitue un objet.

Qu'est-ce que cela représente en réalité pour un document HTML? Voyons à quoi ressemble la structure en couches pour les objets d'un document Web.

Chapitre V DHTML


84

Structure des principaux éléments 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 élément est accessible en parcourant la structure en couche ou en

l'adressant par référence à son numéro, son ID ou son nom. On constate de cette façon que les objets et les propriétés 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 appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des "couches"

contenant des éléments et pouvant être positionnés sur l'écran. Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes 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


85

q 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'éléments HTML pouvant être superposés à l'écran et pouvant être déplacés séfenêtre du navigateur grâce à du Javascript. De plus, le z-index définit l'ordre de

superposition des éléments, 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 façon d'accéder aux propriétés des éléments est différente, ainsi que les propriétés elles-mêmes (il s'agira donc dans un premier temps de déterminer par l'intermédiaire 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 première (LAYER qui signifie justement couche) est une balise spécifique à Netscape Navigator. Les balises DIV et SPAN sont plus génériques mais sont

toutefois mieux supportées par Internet Explorer que Netscape Navigator. La balise LAYER :

Netscape permet d'accéder aux différentes couches en utilisant la syntaxe suivante:

ou

Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante:

Voici un tableau résumant les attributs de la balise LAYER :

Propriété Valeur Description

Name Chaîne de caractère Définit un identifiant unique pour la couche

document.layers['nom']. attribut

document.layers.nom. attribut

<LAYER NAME="IMG1" LEFT="20" TOP="30"> <IMG SRC="image.gif"> </LAYER> <LAYER NAME="IMG2" LEFT="25" TOP="35"> <IMG SRC="image2.gif"> </LAYER>

Chapitre V DHTML


86

Left valeur numérique entière distance en pixel à la bordure gauche

Top valeur numérique entière distance en pixel au haut de la page

Les balises DIV et SPAN :

Avec Internet Explorer (versions 4 et supérieures), 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 après Netscape Navigator 4, les possibilités "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 modifiées par l'intermédiaire d'un code écrit en Javascript après chargement de la page. Avec les balises DIV et SPAN, le positionnement peut se faire de trois façons : statique,

absolu et relatif. La mise en forme normale des documents HTML correspond au

positionnement statique, qui est appliqué par défaut.

Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (avec l’attribut top) et de gauche à droite (avec l’attribut left).

Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans les balises DIV ou SPAN seront

positionnés à la suite des éléments HTML. Internet Explorer définit un objet appelé "all" contenant tous les éléments DIV.

Ainsi, l'accès aux éléments se fait par la syntaxe suivante:

Exemple :

Actuellement, si tous les éléments du corps du document acceptent le positionnement relatif (et statique bien sûr), le positionnement absolu n'est reconnu

- APPLET - BUTTON - DIV - SPAN

- INPUT - OBJECT - SELECT – FIELDSET - IFRAME - IMG - TABLE - TEXTAREA

document.all.nom.attribut

<DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible;z-index : 2;"> éléments HTML </DIV>

Chapitre V DHTML


87

Voici un tableau résumant les attributs des balises DIV et SPAN :

Propriété Valeur Description

position Static absolute relative

Aucun mouvement par rapport au docu-ment positionnement par rapport au document par rapport à l'élément précédent

left Auto (par défaut) valeur numérique entière valeur en pourcentage (%)

distance à la bordure gauche automatique distance à la bordure gauche en pixels distance à la bordure gauche en pour -centage

top Auto (par défaut) valeur numérique entière valeur en pourcentage (%)

distance au sommet automatique distance au sommet en pixels distance au sommet en pourcentage

width auto valeur numérique entièrevaleur en pourcentage (%)

largeur automatique largeur de l'élément en pixels largeur de l'élément en pourcentage

height Auto (par défaut) valeur numérique entière valeur en pourcentage (%)

hauteur automatique hauteur de l'élément en pixels hauteur de l'élément en pourcentage

overflow

visible hidden auto scroll

affiche le contenu même s'il est trop grand cache le contenu superflu automatique affiche des barres de défilement

clip

auto bottom left right top

découpage automatique découpage en bas découpage à gauche découpage à droite découpage en haut

visibility inherit hidden visible

visibilité par défaut caché visible

z-index auto valeur numérique entière

superposition automatique valeur indiquant la profondeur

Enfin, voici un bref aperçu des actions réalisables en DHTML et la façon de les effectuer sur les deux navigateurs :

Chapitre V DHTML


88

Action Netscape Navigator Internet Explorer

Modifier l'image de fond

document.layers.nom.background document.all.nom.style.backgroundImage

Modifier la couleur du fond

document.layers.nom.bgColor document.all.nom.style.backgroundColor

Modifier le clipping

document.layers.nom.clip document.all.nom.style.clip

Modifier le contenu

document.layers.nom.open(); document.layers.nom.writeln();

document.all.nom.innerHTML

Modifier la distance à gauche

document.layers.nom.left document.all.nom.style.left

Accéder au nom objet.name objet.id objet.name

Modifier la visibilité

document.layers.nom.visibility document.all.nom.style.visibility

Modifier la distance au haut

document.layers.nom.top document.all.nom.style.top

Modifier le z-index

document.layers.nom.zIndex document.all.nom.style.zIndex

Chapitre VI XML


90

VI.1 Origine de XML :

-textuels sur une immense échelle. Depuis 1995, les moteurs de recherche ont démontré la stupéfiante carecherche d'information rendue possible par le WWW.

Ainsi, avant l'apparition de XML (eXtensible Markup Language), existaient : • Un langage de balisage normalisé, riche en sémantique mais relativement

lourd à mettre en oeuvre et inadapté au Web, le SGML (Standard Generazed Markup Language).

• Un langage parfaitement adapté au Web (puisque développé uniquement pour cette application) mais dont les applications sont limitées par une bibliothèque de balises figée et réduite, le HTML. De plus il ne peunavigateurs.

Il convenait donc de définir un langage qui conserve les qualités d’HTML (simplicité d’apprentissage, contenu multimédia, gestion des liens hyper-textuels, utilisation du langage de script), et d’en gommer les défauts tout en offrant la richesse sémantique 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 données, très complet utilisé en GED (Gestion électronique de documents).

XML a été développé 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 présidé par Jon Bosak de Sun Microsystems avec la participation active d'un groupe d'intérêt 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 variété 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 très facilement lisibles. q La conception de XML devrait être préparée rapidement. q La conception de XML sera formelle et concise. q Il devrait être facile de créer des documents XML.

XML est en quelque sorte une version allégée de SGML : « il offre 80% des fonctionnalités de SGML pour seulement 20% de sa complexité! », prétendent ses auteurs.

XML peut être considéré comme un méta-langage permettant de définir d'autres langages. Sa force réside dans sa capacité à pouvoir décrire n'importe quel domaine de

Chapitre VI XML


91

données grâce à son extensibilité. Il va permettre de structurer, poser le vocabulaire et la syntaxe des données qu'il va contenir. XML se caractérise par les points suivants :

q Lisibilité. q Autodescriptif et extensible. q Une structure arborescente. q Universel et portable. q Déployable. q Intégration.

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 référence 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 sémantiquement figé comme peut l'être HTML mais au contraire un langage ouvert. C'est à dire que l'auteur d'un document XML peut créer ses propres balises

Exemple : La balise <INSTRUMENT> peut être définie pour désigner un instrument de

musique. Cela s'écrirait de la façon suivante :

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 réalisée par la feuille de style.

Et puisque dans un document XML l'information pertinente est marquée 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 départ, c'est ce que l'on appelle le bruit.

VI.2.1 De quoi se compose un document XML : Principalement un document XML se compose de trois parties :

q La DTD (Document type Declaration) qui décrit la structure de données. q Les feuilles de style XSL (ou CSS) qui permettent le formatage des données. q Le document lui-même qui contient les données (texte, image, vidéo, etc.).

IV.2.2 Structure d'une feuille XML : Toute feuille XML est composée de la façon suivante :

q un prologue : il contient diverses déclarations facultatives mais recommandées q le contenu du document avec les balises associées q des commentaires éventuels

<INSTRUMENT>Guitare</INSTRUMENT>

Chapitre VI XML


92

Le prologue peut contenir une déclaration XML,des instructions de traitement et une déclaration de type de document

La déclaration XML est facultative mais fortement conseillée, Elle indique au processeur qui va traiter le document :

q La version du langage XML utilisée dans le document. q Le codage de caractères utilisé dans le document, si la valeur par défaut ne

convient pas, XML utilise les jeux de caractères définis 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 déclarations extérieures au document qui doivent être prises en compte pour le traitement de celui-ci. Si l'attribut standalone a la valeur «yes», le processeur considère que toutes les déclarations nécessaires au traitement du document y sont incluses. Si cet Attribut a la valeur «rechercher des déclarations dans d'autres fichiers que celui qui contient cette déclaration XML, pour pouvoir traiter convenablement le document.

Exemple : Dans cet exemple, on a déclaré un document de type XML dans sa version

actuelle 1.0 qui utilise un encodage de type UTF-8 et qui ne possède pas de DTD. Chacune de ces trois informations, version du langage, codage des caractères

et complétude du document, est facultative mais doit apparaître dans cet ordre. DTD : La DTD est l'acronyme de Document Type Définition ou en français Définition

de type de document. Son rôle consiste à définir la structure interne d’un document XML. Elle permet de spécifier ces éléments ainsi que leurs ordres et leurs fréquences

feuille de sécurité sociale » qui décrit le contenu d’une telle feuille.

Il est à noter que l'utilisation d'une DTD est une caractéristique optionnelle d'un fichier XML. Dans le jargon XML, un document qui n'en possède pas est dit bien formé (Well-formed) si sa structure respecte les règles imposées 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 sociée du contenu du document. C'est

sa forme la plus courante, ce qui permet de la réutiliser pour créer d'autre document qui devront avoir la même structure.

Une DTD commence toujours par <!DOCTYPE et se termine par ]>. La racine du document est renseignée après <!DOCTYPE et doit être également définie comme un ELEMENT de la DTD.

La DTD est donc construite à partir d'un ensemble de déclarations permettant de définir le type, la nature et les contraintes liés à chaque nouveau marqueur.

Exemple de document XML avec une déclaration de type de document :

<?xml version=’1.0’ encoding=’UTF-8’ standalone=’yes’?>

Chapitre VI XML


93

Document avec DTD externe : Document avec DTD interne :

VI.3 XSL : Le XSL Extensible Style Language est le langage utilisé pour définir les feuilles

de style qui seront associées aux documents XML. C'est le fichier XSL qui permettra de définir que tel élément XML doit être affiché avec telle fonte, de telle couleur, etc. Ces décisions seront, grâce à XSL, prises par le créateur du document qui aura ainsi un meilleur contrôle sur l'apparence de son document. Il pourra également faire référence à un fichier XSL public déjà 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 développeurs choisissent le moyen terme: XSL emprunte au CSS et au DSSSL. XSL est encore en développement, 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 proposée" avant de devenir une "recommandation officielle". (Notons toutefois que la réflexion sur les modèles de feuilles de style dont s'inspire le XSL est passablement avancéesa deuxième version. CSS2 est maintenant une recommandation officielle du W3C tandis que le DSSSL est déjà une norme ISO). VI.4 Conclusion :

Ces quelques lignes devraient suffire pour entrevoir la révolution qu'amène le format XML. XML est déjà supporté par Internet Explorer et Netscape Navigator. Il ne manque que les développements 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 développer (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 très long. Par contre, pour les documents que l'on placera sur nos rayons virtuels, XML représente une percée technologique importante.

<?xml version="1.0"?> <!DOCTYPE accueil SYSTEM "hello.dtd"> <accueil>hello word!</accueil>

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE accueil [ <!ELEMENT accueil (#PCDATA)> ]> <accueil>Hello word!</accueil>

Chapitre VII JavaScript


96

VII.1 Généralités :

version 2.0.

L’emploi de JavaScript n’est pas limité au Web. Il est adapté à tout réseau utilisant la technologie Internet, le protocole http et les documents HTML.

Dans notre travail nous avons utilisé JavaScript comme un outil pédagogique pour mieux présenter l’interface des pages web, ainsi nous avons intégré des codes en JavaScript dans les frames afin d’obtenir des pages web sophistiquées et faciles à utiliser. Nous avons aussi utilisé JavaScript pour faire quelques tâches au niveau de la machine cliente avant l’envoi du formulaire au serveur.

Ce présent chapitre à deux buts : donner un bref aperçu sur les concepts de la programmation orientée objet, et établir quelques références du langage JavaScript VII.2 Caractéristiques :

JavaScript est un langage sécurisé, incapable d’écrire sur le disque de l’utilisateur ou d'exécuter toutes autres actions susceptibles d’être utilisées par un virus pour endommager le système. Les caractéristiques les plus importantes de JavaScript sont :

q JavaScript est un langage interprété, son code source est téléchargé et traduit en instructions que l’ordinateur peut comprendre au moment où

q JavaScript est à base d’objets ; les programmes écrits en JavaScript utilisent des objets pré-définis. Autrement dit ; nous sommes limités en termes de création d’objets propres.

q JavaScript implique un typage faible des variables ; autrement dit, les variables peuvent contenir tout type de données.

q Le code JavaScript est intégré ; il fait toujours partie d’un fichier HTML.

VII.3 Programmation Orienté Objet : POO VII.3.1 Introduction : Aujourd’hui, il existe beaucoup de langages hybrides, ou des langages à

procédures avec quelques fonctionnalités orientées objet. A un niveau fondamental, ces langages ont été élaborés d’abord pour nous fournir une structure pour créer des

par l’ordinateur (d’où le terme "procédure"), et aussi pour nous permettre d’organiser et de manipuler les données.

Chapitre VIII Conception


Introduction

:

VIII.1. Les Outils Utilisés

VIII.1.1. Microsoft FrontPage Microsoft FrontPage 98 est un outil de création et de gestion des sites

Web expérimentés. Il comprend l’Explorateur FrontPage, qui permet de créer, concevoir et gérer l’ensemble du site Web et l’éditeur Fmodifier une page Web. Grâce à l’Explorateur FrontPage on peut créer la structure ou l’agencement du site Web, appliquer des thèmes graphiques à ses pages, organiser ses fichiers et dossiers, importer et exporter des fichiers, tester et réparer des liens hypertexte, administrer des privilèges d’accès, assurer le suivi des tâches, et lancer l’Editeur FrontPage. L’Editeur FrontPage permet de créer, concevoir et modifier des pages Web. A mesure que nous ajoutons des textes, des images, des tables, des champs de formulaires et d’autres éléments dans la page, l’Editeur FrontPage les affiche tels qu’ils apparaîtraient dans un navigateur Web.

Bien qu’il s’agisse d’un outil puissant, l’Editeur FrontPage est d’une utilisation facile en raison de son interface largement répandue, similaire à un traitement de texte. On n’a pas besoin d’insérer le code HTML pour utiliser l’Editeur FrontPage puisque ce dernier le crée automatiquement.

Il est possible de modifier directement le code HTML à l’aide du mode HTML de l’Editeur 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 intègre de nombreuses fonctionnalités propres à Microsoft Word et Microsoft Excel, telles que la bibliothèque des cliparts Microsoft, la vérification d’orthographe, le dictionnaire de synonymes et la modification facile des tableaux .FrontPage gère également les liens hypertexte créés dans des documents Microsoft Office.



L’Explorateur de FrontPage

L’Editeur de FrontPage

VIII.2 Outils graphiques

Nos pages Web doivent contenir plus que les textes, des images. Il n’est pas nsérer des graphiques mais la difficulté consiste à trouver la bonne qualité

Modes Affichage

Les Dossiers

Barre d’outils

Barre d’outils formulaires

Barre d’outils D’Images

Barre d’Etat

Barre d’outils Tableau

Barre d’outils Fonctions avancées

Barre d’outils Mise en Forme

Barre d’outils Standard



d’images. 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 l’effet, et de diminuer sa taille pour accélérer sa transmission. Ce programme vient du monde du traitement professionnel de l’image. Il offre de nombreuses fonctions extrêmement puissantes, permettant, notamment de :

q Changer la luminosité, les couleurs et le contraste d’une image, q Appliquer de nombreux filtres au contraste, q Utiliser des effets spéciaux de déformation d’image, q Découper et recoller des parties d’image, pour un montage par exemple.

Paint shop Pro 5

VIII.2.1 Création des Animations

Animagic GIF : Il est très utile pour créer des formes particulières du format GIF, avec cet

outil il est facile de : q Créer des GIF animées à partir de différentes images, q Enregistrer des images GIF au format ‘Interlaced’ (entrelacé), q Rendre transparent le fond d’une image GIF



Animagic GIF

VIII.3 Outil de traitement de son

Sans le son, une page Web n’est pas complètement multimédia. Comme dans le graphique il nous a fallu un logiciel pour enregistrer et modifier des fichiers sons.

VIII.3.1 Le magnétophone Windows disposent déjà d’un outil simple et efficace :

Le magnétophone de Windows 98

VIII.4 Test des pages Il nous a fallu tester les pages crées avec l’éditeur FrontPage avec différents navigateurs, car chaque Browser (navigateur) réagit différemment, et pour cette raison on a utilisé :

Bouton d’enregistrement



Microsoft Internet Explorer :

Netscape Navigator :

Ces deux navigateurs sont, de loin, les programmes les plus utilisés dans le

monde. Un document qui s’affiche correctement dans les deux, atteindra donc le plus grand nombre possible d’internautes. Ouvrir également les documents sans afficher les images, car certains utilisateurs préfèrent ne pas les afficher pour mieux accélérer le chargement.



VIII.5.2 Implémentation du site Avant de commencer la construction du site les questions que nous devons

nous poser sont : q Que voulons-nous représenter sur notre site ? q A qui s’adressent nos pages ?

Notre site représente la bibliothèque de l’institut, donc il s’adresà la communauté des étudiants ainsi qu’aux enseignants qui vont chercher sur notre site des informations. Dans le but que l’accès à l’information soit complet et facile on a choisi la représentation suivante :

La page d’accueil Il faut faire des choix pour que les informations contenues sur le site restent

toujours faciles d’accès pour les personnes qui s’y connectent. La solution retenue est de diviser la page d’accueil en trois frames (grâce aux bordures ).

Une partie est réservée à un "sommaire" et les deux autres servent à afficher les informations. Grâce à ce sommaire toujours présent à l’écran, il est facile de passer d’un thème à un autre sans effectuer de retour en arrière. De plus la largeur du sommaire est redéfinissable, ce qui permet de régler au mieux la dimension de la seconde partie.

Le sommaire permet de consulter les renseignements relatifs à la bibliothèque : q Accueil : Page d’accueil du site de la bibliothèque. q Infos pratiques : Présente des informations indispensables sur la réglementation

au sein de la bibliothèque. q Nouveauté : Page consacré pour les nouveautés de la bibliothèque. q Recherche : Propose une recherche par nom et par mots clefs sur les ouvrages

de la bibliothèque ainsi que les périodiques. q Cours en ligne : Page consacrée pour présenter des cours en ligne. q Autres liens : différents liens utiles. q Retour : lien vers le site Web de l’institut.



Page d’accueil

Recherché

Nouveautés

Infos pratiques

Autres liens

Cours en ligne

Retour

Heures d’ouverture

Comment s’inscrire

personnel

Comptoir du prêt



97

VII.3.2 La programmation orientée objet (POO) : "Orienté objet" est une expression largement employée pour décrire des langages

des styles de programmation, des interfaces utilisateurs. D’un point de vue conceptuel, la POO est souvent décrite comme la manière dont nous modélisons des objets réels (des

maisons, des gens, des machines, des ordinateurs, etc.) en utilisant des objets informatiques dans un langage orienté objet.

Qu’est ce qu’un objet ? La POO est fondée sur le concept d’objet, à savoir une association des données et

des procédures (qu’on appelle alors méthodes) agissant sur ces données. On pourrait dire POO est :

Mais cette association est plus qu’une simple juxtaposition. En effet, dans ce que

POO "pure", on réalise ce que l’on nomme une encapsulation

des données. Cela signifie qu’il n’est pas possible d’agir directement sobjet ; il est nécessaire de passer par l’intermédiaire de ses méthodes qui jouent ainsi le rôle d’interface obligatoire. On traduit parfois cela en disant que l’appel d’une méthode est en fait l’envoi d’un "message" à l’objet.

Le grand mérite de l’encapsulation est que, vu de l’extérieur, un objet se caractérise uniquement par les spécifications de ses méthodes, la manière dont sont réellement implantées les données étant sans importance. On décrit souvent une telle situation en disant qu’elle réalise une "abstraction des données".

Objet & Classe : En POO, apparaît généralement le concept de classe. Ce dernier correspond

simplement à la généralisation de la notion de type que l’on rencontre dans les langages classiques. Une classe, en effet, n’est rien d’autre que la description d’un ensemble d’objets ayant une structure de données commune et disposant des même méthodes. C’est essentiellement un plan qui indique à l’ordinateur comment construire un objet lorsqu’on le lui demande. Les objets apparaissent alors comme des variables d’un type.

Par exemple on décide d’écrire un programme qui gère des fenêtres. Pour cela on définit une classe appelée Fenêtre qui décrit toutes les propriétés d’un tel objet comme par exemple ses quatre coins (Haut, Gauche, Bas, Droite ), figure si-dessous.

Méthodes+Données = Objet



98

Note : en POO, un objet créé à partir d’une classe est appelé "instance" de la classe.

Ainsi d’autres termes comme types d’objets, gabarits ou templates sont utilisés pour

Données membres : Les données membres sont des données enregistrées à l’intérieur d’un objet ou d’une classe. Elles sont parfois considérées comme des propriétés, ou, si elles sont dans un objet issu d’une classe, des variables d’instance. On définit quelles variables membres font partie d’une classe lors de la définition de la classe. De nouvelles occurrences de ces variables sont créées chaque fois qu’un nouvel objet de cette classe est créé. Cela signifie que toutes les occurrences d’une classe contiendront les même type de données, mais le contenu de ces variables différera d’un objet à l’autre. Un objet qui ne contient que des données membres peut être considéré comme fonctionnant quasiment comme une structure C ou RECORD Pascal qui aurait été a Dans l’exemple précédent, on peut voir que l’objet Fenêtre contient quatre variables membres, appelées Haut, Gauche, Bas, et Droite. Bien que cela impose que ces variables soient présentes dans n’importe qu’elle objet créé la valeur contenue dans chaque objet n’est pas imposée.

Méthodes

Classe : Fenêtre

Haut Gauche

Bas Droite

Objet : Fenêtre : 1

Haut 5 Gauche 100

Bas 20 Droite 125

Objet : fenêtre : 2

Haut 10 Gauche 30

Bas 30 Droite 50

issus de cette classe



99

Dans les paragraphes précédents, on à vu comment les données sont contenues dans les objets dans les langages de programmation orientés objet, dans cette partie, on va voir de quelle manière le code est lui aussi inclus dans les objets d’un POO. Dans un langage traditionnel à procédures, on travaille avec des procédures et des fonctions, et l’endroit où on insère ce code dans nos programmes dépend principalemDans un langage orienté objet, les fonctions et les procédures sont remplacées par des méthodes, et chaque méthode est associée à une classe particulière. Dans l’exemple précédent, on à vu comment définir la classe Fenêtre. Maintenant dessinons cet objet, et voyons comment il pourrait changer de taille. Pour cela on dénote deux méthodes pour la classe Fenêtre : Dessin et Taille. Figure si-dessous.

Chaque objet créé à partir de la classe Fenêtre contiendra les méthodes Dessin et Taille. L’appel d’une méthode peut être considéré comme l’envoi d’un message à l’objet qui contient la méthode. Par exemple, l’appel de la méthode Dessin est assimilable à l’envoi d’un message Dessin à cet objet. Les méthodes sont principalement utilisées comme des fonctions ou des procédures comme le C, avec quelques différences importantes. Ainsi, lorsqu’une méthode est invoquée, chaque référence à une variable membre dans le code de la méthode correspondra en réalité à une variable membre de

la méthode est un membre.

Héritage : Un autre concept important en POO est celui d’héritage. Il permet de définir une

nouvelle classe à partir d’une classe existante (qu’on réutilise en bloc !), à laquelle on ajoute de nouvelles données et de nouvelles méthodes. La conception de la nouvelle classe, qui hérite des propriétés et des aptitudes de l’ancienne, peut ainsi s’appuyer sur des réalisations antérieures parfaitement au point et les spécialiser à volonté. Comme on

ilite largement la réutilisation de produits existants, et ceci

Classe : Fenêtre Haut

Gauche Bas

Droite

Dessin Taille

La classe Fenêtre avec les deux méthodes : Dessin et taille



100

d’autant plus qu’il peut être réitéré autant de fois que nécessaire (la classe C peut hériter de B, qui elle-même hérite de A).

Terminologie orientée objet :

Souvent les auteurs ou les langages utilisent différents termes pour décrire des processus identiques. Par exemple l’appel d’une méthode dans un objet peut être considéré comme une invocation de la méthode, ou comme l’envoi d’un message à l’objet. Pour cela et pour achever notre petite introduction sur la POO on propose quelque terminologie de la POO :

Les variables d’un objet Variables d’instance.

Variables membres.

Propriétés.

Les méthodes d’un objet Méthodes. Fonctions membres.

Les méthodes d’appel d’un objet Appeler une méthode.

Envoyer un message. Invoquer une méthode.

Créer un objet Allouer un objet.

Instancier un objet. Créer un nouvel objet.

Créer une instance d’une classe.

Une classe dérivée d’une autre classe Sous-classe. Classe dérivée.

Classe enfant. Classe descendante.

Une classe dont dérivent d’autres classes

Classe parent.



101

Classe de base.

Super classe. Ancêtre.

Dériver une nouvelle classe d’une classe existante :

Sous-classer une classe. Créer une sous-classe.

Créer une Classe dérivée. Dériver une classe.

VII.4 La hiérarchie des objets dans javaScript : Les objets sont classés en trois catégories suivant leurs fonctionnalités.

Notamment, les objets utilisés pour obtenir les entrées de la part des utilisateurs, les objets liés aux liens hypertextes et les objets de contrôle de l’écran. Au début nous commençons par la hiérarchie globale des objets.

La figure si-dessous montre la hiérarchie complètes des objets JavaScript. Notons que l’objet window (fenêtre) est l’objet le plus haut dans la hiérarchie.

Dans la suite de ce chapitre, on présentera en bref les objets window (fenêtre), location (emplacement) et history (historique). L’objet document, l’objet JavaScript le

document

window

history location

frames self top parent

link form anchor

radio

checkbok

select

button

submit

reset password

textarea

text

Hiérarchie des objets JavaScript



102

VII.4.1 L’objet window (fenêtre): Propriétés Méthodes Gestionnaires

d’événements frames parent selt top status defaultStatus window

alert() close() confirm() open() prompt() setTimeout() clearTimeout()

onLoad= onUnload=

Création d’une fenêtre :

Accession aux propriétés ou méthodes de la fenêtre :

Propriétés : Propriétés Valeur Lisible Modifiable status string(chaîne) Oui Oui defaultstatus string(chaîne) Oui Oui self Objet fenêtre Oui Non parent Objet fenêtre Oui Non top Objet fenêtre Oui Non frames Objet fenêtre Oui Non window Objet fenêtre Oui non

Méthodes :

Syntaxe Valeur de retour alert(message) Aucune

Nom de l’objet fenêtre = window.open( [paramètres] )

window. propriété | méthode( [paramètres] ) self. propriété | méthode( [paramètres] ) nom de l’objet fenêtre. propriété | méthode( [paramètres] )



103

confirm(message) true ou false (vrai ou faux) prompt(message, réponse par défaut) Chaîne de texte entrée par

l’utilisateur ou valeur nulle open("URL", "nom de la fenêtre" [, "caractéristiques de la fenêtre" ] )

Aucune

close() Aucune setTimeout("expression", temps alloué en millisecondes)

Valeur d’identification, à employer éventuellement avec la méthode window.clearTimeout()

clearTimeout(numéro d’identification fourni par setTimeout)

Aucune

VII.4.2 L’objet location (emplacement) :

Propriétés Méthodes Gestionnaires

d’événements hash host hostname pathname port protocol search href

Aucun Aucun

Affecter un nouvel emplacement à la fenêtre actuelle :

Accéder aux propriétés de l’objet emplacement :

Propriétés :

Propriété Valeur Lisible Modifiable

[window].location = " URL"

[window].location. propriété



104

href Chaîne (string) Oui Oui hast Chaîne (string) Oui Oui host Chaîne (string) Oui Oui hostname Chaîne (string) Oui Oui pathname Chaîne (string) Oui Oui port Chaîne (string) Oui Oui protocol Chaîne (string) Oui Oui search Chaîne (string) Oui Oui

Les propriétés d’un objet location (emplacement) se rapportent essentiellement au : serveur hôte, protocole utilisé, etc. par exemple :

Voici à quoi correspondent les propriétés de l’objet location. Elles contiennent en :

Propriétés 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 L’objet history (historique) Propriétés Méthodes Gestionnaires

d’événements lenght back()

forward() go()

Aucun

Accéder aux propriétés ou aux méthodes de l’objet historique :

Propriétés:

Propriété Valeur Lisible Modifiable length Nombre Oui Oui

http: // www.ito.com: 80 / projet /index.html #debut

[ window].history.propriété | méthode ( [paramètres] )



105

Méthodes :

Syntaxe Valeur de retour back() Aucune forward() Aucune go(nombre relatif | "URL ou titre") Aucune

VII.4.4 L’objet document : Propriétés Méthodes Gestionnaire d’événements alinkColor anchors bgColor cookie fgColor forms lastModified linkColor links location referrer title vlinkColor

clear() close() open() write() writeln()

Aucun

Propriétés : Propriétés Valeur lisible Modifiable forms Tableau (array) Oui Oui location Chaîne (string) Oui Oui title Chaîne (string) Oui Non lastModified Chaîne (string) Oui Non anchors Tableau d’objet

anchor Oui Non

referrer Chaîne (string) Oui Non links Tableau d’objet link Oui Non cookie Chaîne (string) Oui Oui alinkColor vlinkColor bgColor fgColor

Triple hexadécimal ou une constante

Oui

Oui



106

linkColor

Methods: Syntaxe Valeur de retour write("chaîne de caractères") Booléen true en cas de succès writeln("chaîne de caractères") Booléen true en cas de succès open( ["type Mime"] ) Aucune close() Aucune clear() Aucune

Dans tout document HTML/JavaScript, l’objet document est le plus important. Cet objet est défini par les balises <BODY>…</BODY> dans le fichier. Tous les autres objets sont compris à l’intérieur de l’objet document.

Un niveau en dessous, on trouve l’objet form. Un document peut contenir un ou plusieurs formulaires. La propriété forms de l’objet document fournit un tableau indexé de tous les objets form à l’intérieur du document. La notation :

document.forms[x]

Offre accès au xième formulaire dans le document, et la notation :

document.forms.length

Renvoie le nombre total de formulaire dans le document.

Chaque formulaire peut contenir d’autres objets de divers types. Ces objets sont généralement liés aux entrées de l’utilisateur et comprennent des zones pour l’entrée de texte, des boutons d’option et des choses du même genre. Chaque objet form possède une propriété length qui renvoie le nombre d’objets sur le formulaire, ainsi qu’une

element qui fournit un tableau indexé de ces objets. Ainsi la notation :

document.form[0].length

Renvoie le nombre d’objet sur le premier formulaire dans le document en cours, et ;

document.write(document.form[1].element[1].value)

Renvoie la propriété value du deuxième objet sur le deuxième formulaire dans le document.

VII.4.5 Les objets de la gestion des entrées utilisateurs : Tous les objets liés aux entrées utilisateur commencent par le mot-clé INPUT,

suivi du paramètre type qui spécifie l’objet particulier. Celui-ci est suivi d’un nombre variable de paramètres supplémentaires spécifiques de l’objet. Les objets liés aux entrées utilisateurs sont :



107

ü Button :

L’objet Button génère l’affichage dans le document d’un bouton rectangulaire comportant un libellé, et ressemblant beaucoup aux boutons de commandes. La syntaxe pour un objet bouton est la suivante :

• Name est une constante de type « chaîne de caractère » spécifiant la propriété NAME de l’objet.

• Text correspond à une constante qui spécifie le texte à afficher sur le bouton ( sa propriété VALUE).

• Handler spécifie le code JavaScript qui est exécuté quand on clique sur le bouton. Il s’agit généralement, mais pas nécessairement, du nom d’une fonction. Il est à noter que la spécification d’un traitement onCLICK est optionnelle.

Cet objet possède deux propriétés, name et value. Il est lié à une seule méthode, Click(). L’exécution de cette méthode produit le même effet que l’utilisateur qui click sur le bouton.

ü Checkbox :

L’objet Checkbox génère l’affichage d’une petite case carrée dotée d’un libellé adjacent. L’utilisateur peut cliquer sur la case pour l’activer ou la désactiver. La syntaxe pour cet objet est la suivante :

• Name est une constante de type « chaîne de caractère » spécifiant la propriété NAME de l’objet. On utilise ce nom pour se référer à l’objet dans le code.

• Value spécifie la valeur à retourner au serveur lorsque le formulaire contenant la case à cocher est soumis.

<INPUT

type="Button"

name="name"

value="texte"

[OnliCk="handler"]>

<INPUT

type="Checkbox"

name="name"

value="value"

[CHECKED]

[onClick="handler"]

>text



108

• CHECKED, s’il est inclus, spécifie que la case doit être initialement affichée en mode active.

• Handler spécifie le code JavaScript qui est exécuté lorsqu’on clique sur la case à cocher.

• Text est le texte qui s’affiche à coté de la case à cocher.

L’objet Checbox possède la propriété checked qui renvoie la valeur true lorsque la priété name qui renvoie la valeur la valeur de l’attribut de nom

affecté dans la balise Checkbox et la propriété value qui est utilisée pour obtenir l’attribut de valeur de l’objet ou pour le modifier. Il existe une seule méthode pour cet objet : Click(). L’exécution de cette méthode produit le même effet que l’utilisateur qui clique

ü Form :

L’objet Form constitue le point névralgique de bon nombre de choses que nous voudrons faire avec le HTML et JavaScript. Les objets d’entrée utilisateur, tels que « Text » et « Checkbox », doivent être placés sur un formulaire. On peut également utiliser des formulaires pour envoyer des données sur un serveur ou pour en récupérer. La syntaxe de l’objet Form est la suivant :

• Windowname correspond au nom de la fenêtre ou du cadre du navigateur dans lequel les réponses aux entrées sur le formulaire doivent être

• Server URL spécifie l’URL du serveur sur lequel des informations entrées dans le formulaire doivent être envoyées.

• Méthode indique comment les informations sont envoyées au serveur. Ce paramètre implique deux valeurs possibles : GET et POST.

• Enctype spécifie l’encodage MIME du formulaire.

• Handler indique le code JavaScript à exécuter 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 ». généralement, ce code se compose du mot-clé return suivi d’un appel à une fonction de vérification qui renvoie la valeur souhaitée. Exemple :

<Form

name="formname"

target="windowname"

action="serverURL"

methode=methode

enctype="enctype"

[onSubmit="handler"]>



109

Password:

L’objet Password est identique à l’objet Text. A ceci prés que sa valeur est masquée du fait de l’affichage d’astérisques à la place des caractères saisis. Pour définir un objet Password. On utilise la syntaxe HTML standard :

L’objet Password possède la propriété defaultvalue qui reflète l’attribut VALUE, la propriété name qui reflète l’attribut de nom de l’objet et la propriété value qui renvoie le contenu actuel de l’objet. Il existe trois méthodes pour cet objet : focus() place le point d’insertion sur l’objet, blur() retire le point d’insertion de l’objet et la méthode select() qui sélectionne, ou met en valeur, le texte affiché dans l’objet.

ü Radio :

L’objet Radio est utilisé pour l’affichage d’un ensemble d’au moins deux boutons d’options sur un formulaire. La syntaxe de création d’un objet Radio est la suivante :

Cet objet possède les propriétés checked, defaultChecked, length, name et value. La seule méthode pour cet objet est : Click() qui produit le même effet que qui clique sur le bouton.

ü Reset :

L’objet Reset génère l’affichage d’un bouton sur un formulaire, qui quand on clique dessus, remet tous les éléments du formulaire à leur valeur par défaut. La syntaxe de cet objet est la suivante :

<FORM…onsubmit="return VerifyData(this) ">

<INPUT

Type="password"

NAME=name

VALUE="value"

SIZE=size>

<INPUT

TYPE="radio"

NAME="name"

VALUE="value"

[CHECKED]

[onClick="handler"]>text

<INPUT

TYPE="reset"

NAME="name"

VALUE="button Text"



110

Cet objet possède les propriétés name et value et une méthode Click().

ü Select :

L’objet Select est utilisé pour afficher une liste déroulante ou une liste de sélection. Pour définir un objet Select, on utilise la syntaxe HTML suivante :

Les propriétés de l’objet select sont : lengeth, name, option, et selectindex.

Cet objet ne possède pas de méthode.

ü Submit :

L’objet submit génère l’affichage d’un bouton qui , quand on clique dessus, engendre la soumission du formulaire. La syntaxe de cet objet est la suivante :

Les propriétés de cet objet sont : name et value.

Une méthode clik() produit le même effet que l’utilisateur qui clique sur le bouton Submit.

<SELECT

NAME="name"

SIZE="size"

[MULTIPLE]

[onBlur="BlurHandler"]

[onFocus="ChangeHandler"]>

<OPTION VALUE="value"[SELECTED]>text

</SELECTED>

<INPUT

TYPE=" submit"

NAME="name"

[onClik="handler"]>



111

ü text :

L’objet text génère l ‘affichage d’une zone de texte pour la présentation et l’entde données sur un formulaire HTML. Il est identique à l’objet Text HTML standard, avec en plus l’ajout de gestionnaires d’événements. la syntaxe est la suivante :

ü textarea:

Un objet Textarea est similaire à un objet Text, à ceci prés qu’il pe ut contenir plusieurs lignes de texte. Il permet à l’utilisateur d’entrer plus de données. La syntaxe est la suivante :

Les propriétés de cet objet sont : defaultvalue, name et value. Les méthodes focus() et blur() sont utilisées respectivement pour placer le point d’insertion sur l’objet Textarea et pour l’enlever. La méthode select() sélectionne le contenu de l’objet.

VII.4.6 Les objets de la gestion des liens hypertextes : ü Anchor :

Pour définir un objet anchor ; on utilise la syntaxe HTML standard :

<INPUT

TYPE="text"

NAME="name"

VALUE="value"

SIZE="talle"

[onBlur="blurhandler"]

[onChange="ChangeHandler"]

[onFocus="selecthandler">

<TEXTAREA

NAME="name"

ROWS=rows

COLS=cols

[onBlur="BlurHandler"]

[onChange="ChangeHandler"]

[onFocus="FocusHandler"]

[onSelect="SelectHandler"]>text

</TEXTAREA>

<A HREF ="locationOrURL"

NAME = "name"

TARGET = "window">

Anchor Text

</A>



112

• LocationOrURL identifie une ancre de distination ou une URL. Si cet attribut est présent l’objet anchor est égalemnet un objet LINK.

• Name spécifie la balise qui devient une cible hypertexte valide dans le document en cours.

• Window spécifie la fenêtre dans laquelle le lien est chargé. Cet attribut est requis uniquement si l’on spécifie locationOrURL.

• Anchor Texte spécifie le texte à afficher au niveau de l’ancre. L’objet anchor ne posséde ni propriétés ni méthodes.

ü LINK :

Un objet LINK est un texte ou une image qui sert de lien hypertexte. Lorsqu’on clique sur le lien la cible de ce dernier est chargée dans la fenêtre appropriée. Un lien peut également être un objet anchor. Pour définir un lien on utilse la syntaxe HTML standard, en ajoutant les gestionnaires d’événement OnClick et OnMouseOver.

L’objet link possède les propriétés suivantes: Elles permettent l’extraction de

• Hash spécifie le nom de l’ancre, éventuellement, dans l’URL cible. Il ci de la partie optionnelle de URL, qui suit le symbole # qui identifie un

endroit spécifique dans le document.

• Host spécifie la portion horstname : Port de URL cible. Si l’URL ne comprend pas de port, alors la propriété host est identique à la propriété hostname.

• Hostname spécifie l’hôte et le nom de domaine ou l’adresse IP de

• Href spécifie l’URL cible en entier.

<A HREF = " locationOrURL"

NAME = "name"

TARGET ="window"

OnClic = "ClickHandler"

OnMouseOver = "MouseOverHandler">

Text

</A>



113

• pathname spécifie la portion URL/chemin d’accés de l’URL cible.

• Port spécifie le port de communication indiqué dans l’URL cible.

• Protocol spécifie le protocole de début de l’URL cible éventuellement. Donc il s’agit d’une chaîne de caractères commençant par un

• Target reflète l’attribut TARGET spécifie dans la balise de lien.

L’objet LINK ne possède pas de méthodes.

VII.4.7 L’objet navigator (navigateur) : Propriétés Méthodes Gestionnaire

d’événements appName appVersion appCodeName userAgent

Aucun Aucun

Accession aux propriétés de l’objet navigateur :

Propriétés : Propriétés Valeur Lisible Modifiable appName appVersion appCodeName userAgent

Chaîne (string)

Oui

Oui

VII.4.8 Objet string (chaîne de caractères) :

Propriété : Propriété valeur Visible Modifiable length Entier (integer) Oui Oui

Méthodes :

Syntaxe Valeur de retour Chaine.toLowercase() La chaîne en minuscules Chaine.toUpperCase() La chaîne en majuscules

Navigator.propriété



114

Chaine.indexOf( chaîne de recherche [, index de démarage ] )

Position à laquelle commence la chaîne recherchée dans la chaîne analysée.

Chaine. lastindexOf( chaîne de recherche [, index de démarage ] )

Position dans la chaîne analysée, du dernier caractère de la chaîne recherchée

Chaine.charArt( index ) Le caractère se trouvant à la position index dans la chaîne analysée

Chaine.substring( indexA, indexB ) Les caractères se trouvant de la position 1 à la position 2 (non incluse)

Chaine.anchor( " nom de l’ancrage") Aucune Chaine.big() La chaîne en grands caractères Chaine.blink() Clignotement de la chaîne Chaine.bold() La chaîne en caractères gras Chaine.fixed() Espacement fixe Chaine.fontcolor( valeur de couleur ) Aucune Chaine.fontsize( entier de 1 à 7 ) Aucune Chaine.italics() La chaîne en italique Chaine.link( emplacement ou URL ) Chaine.small() La chaîne en petits caractères Chaine.strike() La chaîne barrée Chaine.sub() La chaîne en indice Chaine.sup() La chaîne en exposant

VII.5 Structure de contrôle :

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 }



115

VII.6 Opérateurs :

VII.6.1 Comparaison :

= = Egale != Différent de > Supérieur à

>= Supérieur ou égal à < Inférieur à

<= Inférieur ou égale à

VII.6.2 Arithmétiques :

+ Plus - Moins * Multiplication / Division % Modulo ++ Incrémentation -- Décrémentation

-valeur Négation

For (variable in objet ) { Instructions }

While (condition) { Instruction }

With (objet) { Instructions }



116

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 <<= Décalage, vers la gauche, de la variable de gauche, du nombre de fois

>>= Décalage, vers la droite, de la variable de gauche, du nombre de fois

>>>= Décalage, vers la droite, de la variable de gauche, du nombre de fois

indiqué par la valeur de droite. Les bits de gauche décalés vers la droite

&= Réalise au niveau binaire un ET avec la variable de gauche ^= Réalise au niveau binaire un OU avec la variable de gauche != Réalise au niveau binaire un OU exlusif avec la variable de gauche

VII.6.4 booléen :

&& ET logique

|| OU logique ! NON logique

VII.6.5 Niveau binaire :

& ET | OU exclusif ^ OU

<< Décalage à gauche >> Décalage à droite >>> Décalage à droite avec remplissage de zéros à gauche

VII.6.6 Fonctions :

Function nom de la fonction ( [paramètre1] … [paramètreN] ) { Instructions }

Conclusion


logiciels et du manque du matériel, on est arrivé dans une courte durée avec l’aide de

Le travail de réalisation du site nous a éclairé sur les aspects théoriques et techniques rencontrés pendant nos études universitaires.

La simplicité apparente de la conception des pages Web cache derrière elle une multitude de difficultés exigeant une connaissanprotocoles de communications ainsi que des derniers logiciels WYSIWYG, de

traitement d’image, du son et de la vidéo. Les pages construites restent statiques, et parmi les possibilités que nous

proposons citons, l’insertion d’une base de données pour augmenter le taux d’interactivité et afin d’intégrer toutes les possibilités fournis par l’utilisation des bases

Enfin, le travail sur ce sujet, qui est proposé par l’équipe réseaux, nous a

un domaine de renommé mondiale qui touche tous les secteurs d’activités de nos jours, cet atout est considérable pour un ingénieur qui se

préparent à rentrer dans le monde de la recherche.

Serveur Web Outils et techniques [Jonathan Magid, R.DouglasMatthews, poul Jones] [Thomson] 1996.

LE GRAND POCHE HTML 4 [Dick Oliver, Molly Holzschlag] [S&SM] décembre 1997.

Généralités sur Internet [A.GASMI] [ITO] 1998

Le projet Intranet [Frédréc ALJN, Denis Lafont, Jean-Françoit Macary] [Eyrolles] Deuxième 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] 2ème Edition – mars 1997

LE GRAND POCHE Site Internet Conception & réalisation [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 hexadécimaux

compatibles avec tous les navigateurs du marché. Exemple d'utilisation : <FONT COLOR="#FF0000">Couleur</FONT>

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF




FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF




CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF



330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF



000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF



ANNEXE B


Liste des balises META :

<META NAME="xxx" CONTENT="xxx">

<META NAME="xxx" ... > Description Caractères

maxi Exemple

Description Description du site en une phrase de

préférence. 200

<META NAME="Desciption" CONTENT="All HTML, l'autre vision du

html">

Mots clés Liste de mots clés 500 <META NAME="Keywords"

CONTENT="html, xml, sgml, tags">

Author Auteur du site - <META NAME="Author"

CONTENT="Cyrille CLEDIERE">

Identifier-URL URL de votre site - <META NAME="Identifier-URL"

CONTENT="http://www.allhtml.com">

Date-Creation-yyyymmdd Date de la création

de votre site -

<META NAME="Date-Creation-yyyymmdd" content="19990525">">

Date-Revision-yyyymmdd Date de la dernière

modification - <meta name="Date-Revision-yyyymmdd"

content="19990717">

Reply-to Votre e-mail - <META NAME="Reply-to"

CONTENT="[email protected]">

revisit-after Indique la revisite du robot après n

jours -

<META NAME="revisit-after" CONTENT="15 days">

Category Catégorie de votre

site (annuaire) -

<META NAME="Category" CONTENT="Internet">

Publisher Celui qui publie

votre site - <META NAME="Publisher"


Copyright Copyright(s) de

votre site - <META NAME="Copyright"


Generator Logiciels utilisés

pour la création de votre site

- <META NAME="Generator"

CONTENT="WebExpert, Picture Publisher">

robots Diriger le robot - <META NAME="robots" CONTENT="index,

follow">

ANNEXE C


CARACTERES ACCENTUES. Voici une petite liste des principaux caractères accentués. Il suffit d'insérer le

code du caractère pour l'obtenir dans nos pages Web. Avec cette manipulation nous garantissons que l'accent sera reconnu correctement par tous les navigateurs.

Caractères en code ISO 5589-1 (ISO-Latin 1)

Caractère Code Iso Entité Caractère Code Iso Entité À À À à à à Á Á Á á á á Â Â Â â â â Ã Ã Ã ã ã ã Ä Ä Ä ä ä ä Å Å Å å å å Æ Æ &Aelig; æ æ æ Ç Ç Ç ç ç ç È È È è è è É É É é é é Ê Ê Ê ê ê ê Ë Ë Ë ë ë ë Ì Ì Ì ì ì ì Í Í Í í í í Î Î Î î î î Ï Ï Ï ï ï ï Ð Ð Ð ð ð ð Ñ Ñ Ñ ñ ñ ñ Ò Ò Ò ò ò ò Ó Ó Ó ó ó ó Ô Ô Ô ô ô ô Õ Õ Õ õ õ õ Ö Ö Ö ö ö ö × × × ÷ ÷ ÷ Ø Ø Ø ø ø ø Ù Ù Ù ù ù ù Ú Ú Ú ú ú ú Û Û Û û û û Ü Ü Ü ü ü ü Ý Ý Ý ý ý ý Þ Þ Þ þ þ þ ß ß ß

ÿ ÿ ÿ

ANNEXE D


CARACTERES SPECIAUX.

ar tous les navigateurs.

Caractères en code ISO 5589-1 (ISO-Latin 1)

Caractère Code Iso Entité Caractère Code Iso Entité • ¡ ¡ ¡ ‚ ¢ ¢ ¢ ƒ £ £ £ „ ¤ ¤ ¤

… ¥ ¥ ¥ † ¦ ¦ ¦ ‡ § § § ˆ ¨ ¨ ¨

‰ © © © Š ª ª ª ‹ « « «

Œ ¬ ¬ ¬ � Ž ® ® ® � ̄ ¯ &masr; • ° ° ° ‘ ± ± ± ’ ² ² ² “ ³ ³ ³ ” ´ ´ ´ • µ µ µ – ¶ ¶ ¶

— · · · ˜ ¸ ¸ ¸

™ ¹ ¹ &supl; š º º º › » » » œ ¼ ¼ ¼ � ½ ½ ½ ž ¾ ¾ ¾ Ÿ ¿ ¿ ¿

Espace

GLOSSAIRE

A : Active X : Langage de programmation développé par Microsoft et qui concurrence java.

Adresse : Désignation unique de l'emplacement de données ou identité d'un équipement intelligent ; chaque équipement sur une même ligne de communication peut répondpropre message. Adresse électronique : Code conventionnel au moyen duquel l’Internet identifie un utilisateur et lui permet de recevoir de courrier. Adresse Internet : Adresse d’un site d’information sur le réseau Internet. Cette adresse est

ifiée sous forme numérique (199.99.99.99) ou logique www.les-goudes.fr. Applet : Abréviation de petite application Internet. Applet java : Programme écrit en java, et qui s’exécute à l’intérieur d’une page HTML.

ARPA : Advanced Research Projects Agency ; organisme qui a développé le premier grand réseau à commutation de Arpanet : Réseau d’ordinateurs créé en 1969 par le ministère de la Défense aux Etats-Unis, c’est ancêtre de l’Internet fut démantelé quelques années plus tard. ASCII : (American Standard Code for Information Interchange ). Code à 7 bits très utilisé, en particulier sur l’Internet, ce qui explique pourquoi les caractères accentués sont rarement transmis correctement. B : Base de données : Collecte de données ordonnées pour faciliter leur consultation. Balise : Constituée d’un ou plusieurs mots clés encadrés par les deux signes “<” et “>” Berner-Lee : ( Tim ) Ingénieur informaticien du CERN à l’origine du Web.

Bit : Binary digIT ; La plus petite unité d'information dans un système binair"0". Bps : (bits par second)Unit de mesure du débit d’une voie de transmission caractérisant ce

vitesse » d’un modem. Ne pas confondre avec baud. Browser : (en français : Routeur, explorateur, fureteur, butineur…et surtout : Navigateur.). Programme d’exploration du Web. C : CERN : Centre Européen de Recherche Nucléaire, Genève (Suisse). Chemin d’accès : Emplacement d’un ficher sur un disque. Il se compose des noms de dossiers et de sous-dossiers. Client : Application pour accéder aux informations détenues par un serveur. Client/Serveur : (modèle), Type d’architecture dont laquel le Web fonctionnant en client/serveur, il est nécessaire qu’un protocole commun permette les échanges entre le

GLOSSAIRE

logiciel client et le serveur Web. Ce protocole au-dessus des protocoles TCP et IP s’appelle le http. Com : (commerciale) Nom de domaine de haut nivaux. Compresser : Réduire la taille d’un ficher informatique sans diminuer le nombre

D : DHTML : Dynamique HTML, Extension du langage HTML pour crée des pages Web

DNS : (Domain Name system), service Internet qui traduit les noms de domaine en numéros IP. Domaine : Nom officiel d’un ordinateur sur l’Internet, qui figure immédiatemencaractère @. Dans [email protected], 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 d’un nom d’utilisateur. Et d’un nom de domaine séparé par @. F : Frame : Une page Web peut se diviser en plusieurs fenêtres, on les appelle frame du nom de la commande HTML. Fichier : Collection d’informations considérée comme une unité de traitement par ordinateur. Forum : Dans le sens le plus général, groupe de news ou discutions. Fournisseur d’accès : Entreprise commercial disposant d ‘une connexion directe à l’Internet et par l’intermédiaire de laquelle vous devez passer pour vous accorder vous-même au Net lorsque vous ne disposez que d’une ligne téléphonique 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 : Système de recherche d’informations par mot clé.

GLOSSAIRE

H : Hôte : Désigne un ordinateur sur lequel on peut se connecter. HTTP: (hypertext transport protocol), Protocole de communication qui défini la façon dont les pages web circulent de serveur en serveur. HTML : ( HyperTexte Markup Language ). Langage standard, sur Internet, de description de documents hypermédias, ce langage est constitué de marqueurs ou balises, spécifiant la forme

HTML dérivé de SGML (Standard generalized Markup Language). Hypermédias : Type de document virtuel riche, pouvant contenir texte, son, image ou vidéo, constitué de texte propre et de références ( liens ) à des documents externes, sur le réseau. HyperTexte : Type d’organisation de documents, permettant de parcourir l’information de

-linaire (figée ), en se déplaçant de lien en lien à l’intérieur ou à l’extérieur du document. I : Intranet : Réseau interne à une entre-prise, qui fonctionne et s’utilise comme Internet. Internaute : Utilisateur d’internet. Internet : L’Internet est un système global d’information résultant de l’interconnexion de milliers de réseaux logiquement reliés par un système d’adresses uniques. IP : (Internet Protocol). Protocole utilisé sur l’Internet 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 développer des applications qui s’exécutent indifféremment sur n’importe quel type de machine . Souvent utilisé pour écrire des applets qui se placent à l’intérieur des pages HTML.C’est 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. C’est un langage interprété ; chaque fois qu’une page HTML contenant du java script est chargé le navigateur Web décode 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-démodulateur" dispositif électronique chargé de convertir des signaux électriques entre ordinateur et une ligne téléphonique. Moteur de recherche : site qui aide à retrouver d’autres sites. N: Navigateur Web : Logiciel qui aide à visualiser les pages web. Par exemples Microsoft Internet explorer ou Netscape Navigateur. Net : Signifie réseau en anglais (network) on abrège souvent Internet par Net. Netscape : société qui développe Netscape Communicator, le navigateur Web concurrent de Microsoft, Internet Explorer. Newsgroup : Forum de discussion sur le réseau Usenet. Netscape Navigateur : Browser de qualité remarquable ayant largement contribué à la popularité du Web. News : Ordinateur raccordé à l’Internet et dont la mission consiste à distribuer les news. Non de domaine : Nom qui indique l’adresse d’un serveur internet. Exemple WWW.yahoo.com Numéro IP : Lors de chacune de nos connexions le réseau nous attribue un numéro IP,(sorte de numéro de téléphone temporaire composé de quatre nombres). Les serveurs disposent d’un

O : P : Page : Chaque adresse Web correspond une page Web (un fichier HTML) la première page

Page d’accueil : Page web qui s’affiche lorsque vous ouvrez voutre navigateur.

GLOSSAIRE

Paquet : Groupe de bits (comprenant des signaux de données et de contrôle d'appel) transmis à la fois sur un réseau à PDF : (Portable Document Format) les documents enregistrés au format PDF peuvent être visualisés dans leur exacte mise en page quel que soit l’ordinateur sur lequel on les consulte pour lire les fichiers PDF il faut installer Acrobat Reader. Police de caractère : Une police définit un dessin pour chaque caractère. Elle est identifiée par un nom par exemple : Arial ou times. Protocole : Règles est conventions qui déterminent la façon dont deux ordinateurs dialoguent. Provider : Fournisseur d’accès Internet. Société 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. Requête : Instruction de consultation de la base de donnée. Réseau : Interconnexion de plusieurs machines en vue d’échanger des informations. Routeur : Equipement utilisé dans l’Internet pour guider un message de donné à travers le

seau de donné jusqu’à la destination demandée. RTC : Réseau téléphonique commuté. S : Serveur : Ordinateur qui dispose d’informations qui viendront consulter des ordinateurs Clients. Serveur FTP : Serveur sur lequel on récupère des fichier à l’aide du protocole FTP, on peut aussi enregistrer des données sur certains serveur, les serveur d’hébergement (utile pour publier des page Web). Site Web : Ensemble des pages Web. Site miroir : Copie conforme d’un site sur un serveur installé généralement dans un notre pays, intérêt diviser le flux de communication. Site portail : Site qui rassemble divers types d’informations dans le but d’attirer les internautes.

Système d'exploitation : Logiciel permettant l'exécution d'un certain nombre d'opérations de base (exécutions de

GLOSSAIRE

T : TCP/IP : (Transmission Control protocol/Internet Protocol), noms d’une famille de protocoles de communication, il en existe plus d’une centaine. Téléchargement : Récupérer des données de puis un serveur à laide du protocole FTP. Telnet : Protocole Internet pour piloter à distance un ordinateur. Les utilisateurs Telnet fonctionnent généralement en mode texte. Topologie de réseau : Relation physique et logique entre les nœuds d'un réseau ; schéma d'organisation des liaisons et des nœud U : Usenet : Réseau qui rassemble les serveurs de newsgroups, ces serveurs ne sont souvent pas directement connectés à Internet. URL : (Uniform Ressource Locator), chaque page Web dispose d’une URL qui commence par http://(pages web), ftp://(fichier à télécharger). V : VRML : (Virtual Reality ModeLing Language ), langage pour décrire des objets en 3D. W : Web : Abréviation de World Wide Web qui signifie toile d’aréniez mondiale en français ; est le service le plus populaire d’Internet, il permet de publier des pages (HTML) contenant des textes, des images, des sons, etc. WebBot : petits programmes (CGI) facilement intégrables à des pages Web pour la réalisation de fonctions spécifiques (gestion de formulaires, appels de moteurs de recherche, etc.). Webcam : Caméra vidéo directement connectée à un serveur et qui envoie tous ce qu’elle filme sur Internet. Web Casting : Action d’émettre sur Internet de l’information en continu. Webmaster : Personne qui supervise un site Web. L’adresse e-mail du Webmaster est généralement indiquée sur la page d’accueil du site. Windows : Système d’exploitation multitâche à fenêtrage crée par Microsoft pour les PC. WWW : Voir Web. X : XML : (eXtensible Markup Language), extension de HTML pour réaliser des mises en page bien plus précises.

GLOSSAIRE

Y : Yahoo : Moteur de recherche sur le Web accessible sur l’URL http://www.yahoo.com