Site web pour la gestion de la bibliothèque

Published on January 2017 | Categories: Documents | Downloads: 28 | Comments: 0 | Views: 377
of 138
Download PDF   Embed   Report

Comments

Content

République Algérienne Démocratique et Populaire
Ministère de l’enseignement Supérieur et de la Recherche Scientifique

INSTITUT DES TELECOMUNICATIONS
ABDELHAFID BOUSSOUF - ORAN -

PROJET

DE

FIN

D’ETUDES

Pour l’obtention du diplôme d’ingénieur d’état en télécommunications Présenté par :
! M. NEZROUK ABDERRAHMANE ! M. ACHACHI NAMANE

Devant le jury composé de :
Président : Encadreur : Examinateur : Examinateur : M. SOUAG MOHAMED M. HACHEMANI RABAH M. SIDI-ALI-MEBAREK ZERROUK M. GASMI ABDELLAH

Promotion IGE 20 Soutenu en Juin 2000

SOMMAIRE

INTRODUCTION GENERALE ………………………………………….… 2 CHAPITRE I
INTRODUCTION …………………………………………………………………. 5 I.1 Historique de l'Internet …………………………………………………….. 5 I.2 Topologie et la gestion de 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 ………………………………………………………………… IV.2 Les éditeurs HTML ……………………………………………………….. IV.2.1 Les éditeurs de texte ……………………………………………. IV.2.2 Les éditeurs de tags …………………………………………….. 57 57 57 58

IV.2.3 Les éditeurs WYSIWYG ………………………………………… 59 IV.2.4 Microsoft FrontPage …………………………………………….. 60 IV.3 Devenir interactif sur le Web ……………………………………………. 60 IV.3.1 Programmation 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 …………………………… VI.5 Structure de contrôle …………………………………………………… VI.6 Opérateurs ………………………………………………………………... VI.6.1 Comparaison ……………………………………………………. VI.6.2 Arithmétique …………………………………………………….. VI.6.3 Affectation ………………………………………………………. VI.6.4 booléen …………………………………………………………... VI.6.5 Niveau binaire ………………………………………………..…. VI.6.6 Fonctions ……………………………………………………..….

114 114 115 115 116 116 116 117 117

Chapitre VIII
Introduction ……………………………………………………………………. 119 VIII.1. Les Outils 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 ………………………………………………………………..…… ANNEXE B ……………………………………………………………………… ANNEXE C ……………………………………………………………………… ANNEXE D …………………………………………………………………….. 128 129 131 132

Introduction

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.

Conception d’un site Web

2

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.

Conception d’un site Web

3

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

Conception d’un site Web

5

Chapitre I

Généralité sur Internet

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 IS (L'Internet Society), dédiée à la promotion et à la coordination du

q

q

q

Net. NSF (National Science Foundation), qui gère la principale voie rapide de l'Internet, mieux connue sous le nom de backbone. 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. 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. 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. IANA (Internet Assigned Numbers Authority), qui a le bureau central d’enregistrement des numéros de ports, de réseaux IP,... sur l’Internet.

q

q

q

Conception d’un site Web

6

Chapitre I

Généralité sur 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.

Réseaux constituants :
On trouve trois types d'adresse pour relier un service Internet ou une personne: q Son adresse Internet. q Son numéro IP. Son adresse URL. Les trois méthodes sont équivalentes, la troisième est la plus en vogue aujourd'hui.
q

a) Les adresses :
Lorsque vous recherchez votre ami Dupont dans l'annuaire, vous regardez d'abord la ville où il habite, puis s'il y a deux Dupont, vous 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]

Conception d’un site Web

7

Chapitre I

Généralité sur Internet

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

0 1 0

8 ID. RESEAU

16

24 ID. MACHINE

31
Classe B

0 0 ID. RESEAU

8

16 ID. MACHINE

24

31
Classe A

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 :
service://machine/directory/fichier

Conception d’un site Web

8

Chapitre I

Généralité sur Internet

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

L'avantage de ce type d'adresse est qu'il englobe beaucoup plus d'informations que l'adresse, puisqu'il comprend: q Le type de service. q 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.
Conception d’un site Web 9

Chapitre I

Généralité sur Internet

Par exemple : CODE Au Be Fr De Dz Ca Com Edu Gov Org Mil Net Int

PAYS OU SINIFICATION Australie Belgique France Allemagne Algérie Canada Entre prise Commerciale Organisme éducatif Institution governmentale Organisme non référé Site militaire Prestataire des réseaux 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.

Conception d’un site Web

10

Chapitre I

Généralité sur Internet

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 microordinateur ou d'un terminal, de se connecter à distance sur un serveur pour une utilisation en mode local. Telnet nous permet donc d'utiliser un ordinateur à distance. Il arrive souvent que les 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.

Conception d’un site Web

11

Chapitre I

Généralité sur Internet

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.
Conception d’un site Web 12

Chapitre I
q

Généralité sur Internet

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

Conception d’un site Web

Chapitre I

Généralité sur Internet

q

§ Options. § Données reçues. La primitive indication de réception fournit 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.

au

récepteur

les

paramètres

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

q q q q

Transmission de données de taille quelconque en mode connexion. Restitution des messages dans l ‘ordre. Multiplexages de plusieurs communications sur une seule connexion. Contrôle de flux. Retransmission en cas d’erreur.

orienté

Le protocole IP assure les fonctions suivantes :
q q q

Transmissions de données en mode sans connexion. Routage des données par l’intermédiaire de passerelles. Fragmentation des données quand leur taille n’est pas limitée.

Conception d’un site Web

14

Chapitre II

Le Web

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

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’un logiciel 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 cliqua ge, vont rechercher
Conception d’un site Web
16

Chapitre II

Le Web

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 peuve permettre 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
Conception d’un site Web
17

Chapitre II

Le Web

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.

Conception d’un site Web

18

Chapitre II Une page hyperliens

Le Web

Navigation dans le Web

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

Conception d’un site Web

19

Chapitre II

Le Web

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.
client serveur
Demande de documents Protocole HTTP Documents demandés : HTML, Texte, Images (GIF, JPEG), Applets Java, etc.

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

Conception d’un site Web

20

Chapitre II

Le Web

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
Conception d’un site Web
21

Chapitre II

Le Web

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.

Conception d’un site Web

22

Chapitre II

Le Web

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.

Internet

Client

Données :
Fichier HTML, Word, PDF, base

de données, etc

Serveur Web + indexeur +moteur de recherche

Un moteur de recherche Internet

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.
Conception d’un site Web
23

Chapitre II

Le Web

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.

Conception d’un site Web

24

Chapitre III

HTML

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.
Conception d’un site Web 26

Chapitre III

HTML

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 a images 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 :
<TITLE>, <H1>, <P>,…etc.

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 :

Conception d’un site Web

27

Chapitre III

HTML

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

<P>

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 :
<CENTER> Ce texte est centré </CENTER>

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> . composé de deux grandes parties qui apparaissent dans cet ordre : q L’en-tête du document. q Corps du document. Exemple : Il est

Conception d’un site Web

28

Chapitre III

HTML

La balise < !DOCTYPE...> doit figurer avant la balise <HTML> du document principal (ou de chaque page du projet, mais ce n'est pas obligatoire). Elle permet d’indiquer le niveau de conformité du document avec la version du HTML. Voici quelques exemples de déclarations possibles : Version HTML. HTML 1.0 HTML 2.0 HTML 3.0 HTML 3.2 HTML 4.0

Commande. <!DOCTYPE HTML PUBLIC "-//IETF//DTD Level1//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

c.1) En-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 :
<TITLE>Projet_site</TITLE>

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 :
Conception d’un site Web 29

Chapitre III

HTML

q

ACTION indique le nom de l’application ou de la DLL sur le serveur permettant d’effectuer la recherche. PROMPT permet d’afficher le texte du message devant les champs de saisie.

q

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 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. Indique le document suivant. Il au

c.2) Corps du document :
Le corps du document, placé dans un conteneur <BODY>, comprend le contenu significatif du document 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 ALINK BACKGROUND BGCOLOR BGPROPERTIES Permet de spécifier l'alignement du document (LEFT, CENTER, RIGHT ou JUSTIFY). Uniquement I.Explorer. Permet de spécifier la couleur des liens actifs. Permet de spécifier l'image d'arrière-plan (format gif ou jpeg). Permet de spécifier la couleur d'arrière-plan (voir annexe A pour la codification des couleurs). Si la valeur est FIXED, le fond reste fixe lors du déroulement du

Conception d’un site Web

30

Chapitre III

HTML

document. Uniquement I.Explorer. CLASS LEFTMARGIN LINK SCROLL STYLE TEXT TOPMARGIN VLINK EVENEMENT Nom de la classe donnée à la feuille de style. Permet de spécifier une marge de gauche pour le document (en pixel). Permet de spécifier la couleur des liens. Permet de désactiver les barres de défilement du navigateur (valeur : no). Uniquement I.Explorer. Feuille de style intra-ligne. Permet de spécifier la couleur du texte. Permet de spécifier une marge supérieure pour le document (en pixel). Permet de spécifier la couleur des liens visités. Spécifie un événement Javascript (HTML4.0) (OnClick, OnMouseOver,...).

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

Resultat:
Ici le fond est orange. Le texte est bleu.

c.3) Commenter un document :
On peut commenter le code source du document sans que le navigateur affiche ce commentaire, cela peut s'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 :
<!-- Ceci est un commentaire. --> Ceci n’est pas un commentaire. <COMMENT> Ceci est aussi un commentaire </COMMENT> Conception d’un site Web 31

Chapitre III

HTML

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

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 :
Conception d’un site Web 32

Chapitre III

HTML

q q q

ALIGN : impose la position horizontale du trait (left/right/center). SIZE : la largeur du trait en pixels (de 1 à 10). WIDTH : Spécifie la largeur de la ligne (en pixels ou % de la NOSHADE : S'il est présent, l'effet d'ombre (3d) est annulé. COLOR : Spécifie la couleur de la ligne (uniquement I.Explorer).

q q

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> .) LEFT : Aligne le texte sur la marge de gauche. q RIGHT : Aligne le texte sur la marge de droite. q CENTER : Texte centré. q JUSTIFY : Texte Justifié. A noter que depuis la version 4.0 du HTML, la balise <DIV> accepte l'attribut STYLE (feuilles de styles).
q

Balise <BLOCKQUOTE > . . . </BLOCKQUOTE > La balise <BLOCKQUOTE > permet de 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.

Conception d’un site Web

33

Chapitre III

HTML

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 :

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

Résultat avec I.Explorer :

Les polices de caractères :
Balise <BASEFONT…>

Conception d’un site Web

34

Chapitre III

HTML

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 q

FACE : Permet de définir par ordre de priorité, les noms des polices. 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 :
<BASEFONT FACE="Impact, Verdana" SIZE=2 COLOR="green"> Text …

Balise <FONT…> . . . . <FONT> La balise <FONT> permet elle aussi de modifier la taille ou la couleur de la police de 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 :
<FONT FACE="Impact, Verdana" SIZE=2 COLOR="green"> texte . . . </FONT>

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

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

Conception d’un site Web

35

Chapitre III

HTML

q q

<VAR> variable < /VAR > pour indiquer le nom d’une variable. <DFN> définition </ DFN > pour mettre en évidence une sous définition. <CITE> citation </ CITE > pour mettre en évidence une citation (généralement en italique).

q

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
q

du texte. <BIG> texte </ BIG > cette commande permet d’écrire le texte en plus gros caractères que les caractères en cours. <SMALL> texte </ SMALL > cette commande permet d’écrire le texte en plus petits caractères que les caractères en cours. <SUP> texte </ SUP > cette commande permet d’écrire le texte en exposant. <SUB> . . . </ SUP > cette commande permet d’écrire le texte en indice.

q

q

q

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&egrave;res accentu&eacute;s. Résultat : Les caractères accentués.

Conception d’un site Web

36

Chapitre III

HTML

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 : &lt; pour <. &gt; pour >. &amp; 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 CLASS COMPACT SRC STYLE TYPE EVENEMENT Permet d'aligner la liste (CENTER, LEFT, RIGHT). Nom de la classe donnée à la feuille de style. Spécifie une liste compacte. Permet de spécifier une image qui représentera la puce. Seulement I.E. Feuille de style intraligne. Permet de spécifier la forme de la puce (DISC, CIRCLE, SQUARE) seulement Netscape. Spécifie un événement Javascript (HTML4.0) (OnClick, OnMouseOver,...).

Par exemple :
<UL> <LH>Titre <LI>Choix 1 <LI>Choix 2 </UL>

Conception d’un site Web

37

Chapitre III

HTML

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 ALIGN CLASS COMPACT START STYLE TYPE EVENEMENT Permet d'aligner la liste (CENTER, LEFT, RIGHT). Nom de la classe donnée à la feuille de style. Permet de réduire la liste. Permet de spécifier à quel chiffre la liste va démarrer. Feuille de style intraligne. Permet de spécifier la forme de la puce (chiffre romain ou arabe en majuscule ou minuscule : 1 - I - i - A - a ). Spécifie un événement Javascript (HTML4.0) (OnClick, OnMouseOver,...).

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

Résultat : II. Choix 1 III. Choix 2 IV. Choix 3

Conception d’un site Web

38

Chapitre III

HTML

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 : ATTRIBUTS ALIGN COMPACT CLASS STYLE EVENEMENT Permet d'aligner la liste (CENTER, LEFT, RIGHT). Permet de réduire l'espace occupé par la liste. Nom de la classe donnée à la feuille de style. Feuille de style intraligne. Spécifie un événement Javascript (HTML4.0) (OnClick, OnMouseOver,...).

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

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 :

Conception d’un site Web

39

Chapitre III

HTML

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

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 :
<A HREF="http://www.allhtml.com">D&eacut e;couvrez All HTML</A>

Si on pose le pointeur de la souris au-dessus du texte "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.
Conception d’un site Web 40

Chapitre III

HTML

CLASS HREF NAME STYLE TARGET TITLE EVENEMENT

Nom de la classe donnée à la feuille de style. Spécifie le type de lien, interne ou externe ainsi que le protocole. Spécifie une ancre à laquelle il est possible de faire référence dans un autre lien Feuille de style intraligne. Permet de spécifier le cadre (pour une frame) de destination. Spécifie une aide (bulle) lors du passage de la souris sur le lien. Spécifie un événement Javascript (HTML4.0) (OnClick, OnMouseOver,...).

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.
<A HREF="pagedeux.htm">Aller en page 2.</A>

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 :
<A HREF="http://www.jasc.com">Paint Shop Pro</A>

Catégories de liens hypertextes
En principe, on distingue deux catégories de liens hypertexte : q Les liens internes. q Les liens externes.

Conception d’un site Web

41

Chapitre III

HTML

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

Lien externe vers un serveur FTP.
<A HREF="ftp://ftp.allhtml.com">FTP All HTML</A>

Lien externe vers un serveur de news. Pour que ce lien soit valide il faut que le visiteur soit abonné à ce serveur de news. <A HREF="news:news.multimania">Les news Multimania!!</A>

Conception d’un site Web

42

Chapitre III

HTML

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

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

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 :
1) <IMG SRC="nom_image.gif">

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.
2) <IMG SRC="URL">

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

Conception d’un site Web

43

Chapitre III

HTML

ATTRIBUTS ALIGN ALT BORDER HEIGHT HSPACE LONGDESC LOWSRC NAME SRC STYLE VSPACE WIDTH Spécifie l'alignement de l'image par rapport au texte. Affichage d'un texte (ou légende) de l'image. Permet de déterminer la largeur d'une bordure (en pixels). Spécifie la hauteur (en pixels) de l'image. Spécifie l'espacement à laisser à droite et à gauche de l'image (en pixels). Spécifie l'URL d'un document contenant une description complète de l'image. Permet de spécifier le chemin d'une deuxième image (plus légère) pour un affichage plus rapide. Seulement Netscape. Nom de l'image (utile pour Javascript). Indique le chemin de l'image (ex: gif/image1.jpg). Feuille de style intraligne. Spécifie l'espacement à laisser en haut et en bas de l'image (en pixels). 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 :
<A HREF="#etiquette"><IMG SRC="nom_image.gif"></A>

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

Conception d’un site Web

44

Chapitre III

HTML

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

MAP NAME="TESTMAP"> <AREA SHAPE="RECT" COORDS="5,5,90,40" HREF="#pargraphe1"> <AREA SHAPE="CIRCLE" COORDS="139,23,20" HREF="#paragraphe2"> </MAP> <IMG SRC="gif/area.gif" BORDER=0 WIDTH=191 HEIGHT=45 USEMAP="#TESTMAP" ALT="Exemple d’utilisation de le balise MAP">
<

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.
Conception d’un site Web

45

Chapitre III

HTML

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é

Conception d’un site Web

46

Chapitre III

HTML

q

S’il ne reconnaît pas un format, il le signale sous forme d’icône 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

q

Voici un exemple d’utilisation de la balise <EMBED> :
<EMBED SRC="win.wav" WIDTH="80" HEIGHT="50" AUTOSTART="FALSE">

SRC indique le fichier son. q WIDTH indique la largeur de 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
q

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 :
<A HREF="video.avi">Cliquez ici pour voir un clip !!</A>

Conception d’un site Web

47

Chapitre III

HTML

Comme pour les fichiers audio, la balise <EMBED> permet d’inclure n’importe qu’elle vidéo. Exemple :
<EMBED SRC=" video.avi." WIDTH=200 HEIGHT=200 AUTOSTART="FALSE" LOOP=1>

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. I plusieurs 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" ...>).
Conception d’un site Web 48

Chapitre III

HTML

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

Conception d’un site Web

49

Chapitre III <OPTION>Secteur privé </SELECT><P> <I><B>Faite votre choix :</B></I> <INPUT TYPE="CHECKBOX" NAME="Check1" CHECKED="true" VALUE="C2">Choix 1 <INPUT TYPE="CHECKBOX" NAME="Check2" VALUE="C2">Choix 2 <HR WIDTH="45%" ALIGN="left"> <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="Annuler"> </FORM></BODY></HTML>

HTML

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.
Conception d’un site Web 50

Chapitre III

HTML

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
q

Conception d’un site Web

51

Chapitre III

HTML

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écoupage navigateur 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
q

auront ou n'auront pas de bordure. Il a deux valeurs YES ou NO. FRAMESPACING : permet d’ajouter un espace entre les cadres, exprimés en pixels. La valeur 0 indique aucun espace. BORDER : permet de déterminer la taille des bordures entourant les cadres, exprimés en pixels. La valeur 0 indique aucune bordure. 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".

q

q

Conception d’un site Web

52

Chapitre III

HTML

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
q

affiché dans un cadre spécifique. NAME : Permet de donner un nom au cadre. ce qui permettra ensuite de l'appeler avec l'attribut TARGET. FRAMEBORDER : Même définition que pour la balise

q

q

<FRAMESET>. BORDER : idem que la définition précédente. N’est valable que pour Netscape. MARGINHEIGHT, MARGINWIDTH : permettent de spécifier la largeur des marges autour du cadre. 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. 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.

q

q

q

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.

Conception d’un site Web

53

Chapitre III

HTML

q

_parent : Permet d’afficher le document dans la fenêtre parent du document ou se trouve le lien. _blank : Permet d 'afficher le document dans une nouvelle fenêtre ouverte par le navigateur. _top : Permet d 'afficher le document dans toute la fenêtre du navigateur et les frames disparaissent. _new : Identique à _blank.

q

q

q

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 :
#rrggbb

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 :
Conception d’un site Web 54

Chapitre III

HTML

00 33 0% 20 %

66 40 %

99 CC FF 60 % 80 % 100 %

Le code d'une couleur en HTML s'écrit donc ainsi : "003366". Les 16 couleurs principales La seconde 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 BLACK MAROON GREEN OLIVE NAVY PURPLE TEAL GRAY Couleur Noir Marron ou rouge foncé Vert Vert olive Bleu marine Violet Cyan foncé Gris Nom symbolique BLUE FUCHSIA AQUA WHITE YELLOW LIME RED SILVER Couleur Bleu Violet vert Bleu clair Blanc Jaune Vert clair Rouge Gris clair

Conception d’un site Web

55

Chapitre IV

HTML et Le Web

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.
Conception d’un site Web

57

Chapitre IV

HTML et Le Web

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.

Conception d’un site Web

58

Chapitre IV

HTML et Le Web

IV.2.3 Les éditeurs WYSIWYG :
Avec un éditeur WYSIWYG (What You See Is What You Get). Ce que vous voyez (à l'écran) correspond au 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
Conception d’un site Web 59

Chapitre IV

HTML et Le Web

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 glisserdé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
Conception d’un site Web 60

Chapitre IV

HTML et Le Web

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.

Conception d’un site Web

61

Chapitre IV

HTML et Le Web

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.

Le client envoie une requête au serveur Client

1 6

Serveur

Le serveur exécute la requête

2
La passerelle peut faire appel à d’autres programmes

7

Le serveur retourne l’information au client

3 5
La client formate et visualise les informations programme et retourne reçues le résultat au serveur Passerelle Autres programmes

4

Programmation d’un CGI ou d’une 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,

Conception d’un site Web

62

Chapitre IV

HTML et Le Web

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.

Programme source java Compilation en forme intermédiaire "Machine virtuelle"

P-Code
Noyau java pour Windows2000 Windows2000 Noyau java pour Solaris Solaris Noyau Java pour MacOs MacOs

La portabilité d’un programme java

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 :
Conception d’un site Web 63

Chapitre IV
q

HTML et Le Web

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.
Compilation JVM Aperçue dans le Browser Appletviewer

Code source Java javac

P-Code

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

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 qu la 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.
Conception d’un site Web 64

Chapitre IV
q

HTML et Le Web

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
Conception d’un site Web 65

Chapitre IV

HTML et Le Web

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 con d’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

Conception d’un site Web

66

Chapitre IV

HTML et Le Web

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 objet, il est à la fois simple et fort. Il ouvre aux auteurs Web de car ses applications possibles sont nombreuses. Par exemple il permet : q D’animer les bas de pages HTML en faisant défiler navigateur. q De réaliser de contrôle de saisie localement (pour
q q q q

un langage pseudo grandes perspectives du texte en bas du contrôler la validité

q

D’ouvrire de nouvelles fenêtres. De réaliser des fonctions d’historique des De créer des pages HTML à la demande du client. De modifier les propriétés des documents affichés (couleur, titre, taille, etc.). De gérer les éléments graphiques qui sont interdépendants.

Conception d’un site Web

67

Chapitre IV
q

HTML et Le Web

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 pour langage 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 JavaScript 1.0 Javascript 1.1 Javascript 1.2 Compatibilité I.Explorer 3.0 - Netscape 2.0 Netscape 3.0 I.Explorer 4.x - Netscape 4.x Balise <SCRIPT LANGUAGE="JavaScript1.0"> <SCRIPT LANGUAGE="JavaScript1.1"> <SCRIPT LANGUAGE="JavaScript1.2">

Conception d’un site Web

68

Chapitre IV

HTML et Le Web

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 au les 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 (<!-- et //->), ce qui a pour effet de cacher le contenu des scripts aux anciens navigateurs non compatibles avec la balise <SCRIPT>. L’interpréteur intégré JavaScript ignore la ligne commençant par un marqueur de début de commentaire HTML mais traite la ligne suivante en tant que ligne de script. L’intérêt de procéder ainsi n’apparaît que lorsqu’on affiche notre document dans un navigateur non compatible JavaScript. Ce navigateur ignore le marqueur <SCRIPT> qu’il ne reconnaît pas. Puis il ignore tout ce qui se trouve dans la paire de marqueurs de commentaire et, donc, l’intégralité du script JavaScript. A noter qu'une solution de rechange peut être envisagée avec les balises <NOSCRIPT> et </NOSCRIPT> qui permettent d'accueillir du texte et/ou du code HTML. Par exemples :

Conception d’un site Web

69

Chapitre IV

HTML et Le Web

<HTML> <HEAD> <TITLE>Exemple de script JavaScript</TITLE> </HEAD> <BODY> <H1>Exemple de script JavaScript</H1> <HR> <SCRIPT LANGAGE="JavaScript"> < !- - Masquage du code pour les navigateurs non compatibles document.write("Dernière mise à jour de ce document le" + document.lastModified + ".") // fin du masquage du script - - > </SCRIPT> <NOSCRIPT> Votre navigateur n'accepte pas le JavaScript. </NOSCRIPT> </BODY> </HTML>

Voici le résultat avec I.Explorer :

Lien vers un script On peut choisir de ne pas intégrer un script dans notre code HTML. Pour cela, il suffit d'indiquer à la balise <SCRIPT> où se trouve notre fichier script. Le fichier script doit porter l'extension .js s'il est rédigé en Javascript ou .vbs pour VBSCRIPT. Exemple pour un fichier JavaScript.
<SCRIPT SRC="EmpJScript.js" TYPE="text/JavaScript">

Conception d’un site Web

70

Chapitre IV

HTML et Le Web

IV.3.2.6 La réalité virtuelle et le Web :
Quelques programmeurs sont en train de mettre au point ce qui pourrait se révéler être l’application multimédia la plus enthousiasmante du Web. Le langage VRML (Virtual Reality Modeling Language) est un langage qui permet de créer des scènes 3D et de les diffuser sur le Web. Il est possible aussi de réaliser des liens entre

des éléments de ces scènes et des documents HTML ou d’autres scènes VRML. VRML 1.0 est sorti en avril 1995, mais ses créateurs ne relâchent pas leur effort et recherchent des fonctionnalités toujours plus performantes. Leur but avoué est de créer un monde cybernétique complet (une reproduction fidèle et détaillée de la terre). Les objets d’un monde en trois dimensions pourraient être multiples : textes, images, audio, vidéo et application du style Java. parmi les visionneurs VRML, on compte WordView d’Intervista et WebSpace de Silicon Graphics. VRML 1.0 est conçu dans le but de répendre aux exigences suivantes : q L’indépendance vis à vis les plates-formes. q Les possibilités d’extension et d’amélioration. q La possibilité de travailler sur une connexion avec faible bande passante. VRML est un langage de description de pages. Il est en cela comparable à HTML. On charge du texte, que le navigateur interprète pou 3D est un processus qui exige beaucoup de ressources, même sans contraintes de largeur de bande passante au Web. De plus ces scènes 3D fonctionneront correctement que sur les ordinateurs bénéficiant d’une certaine puissance à caus mathématiques requises pour afficher une image 3D. Notez par ailleurs que l’on ne trouve pas de navigateur VRML pour Windows3.x. Le système de base sera un microConception d’un site Web

71

Chapitre IV

HTML et Le Web

ordinateur sous Windows95. Cela dit le moment n’est peut-être pas si loin où les pages Web seront remplacées par des bâtiments, des villes et des mondes virtuels.

IV.4 Gestion du site :
IV.4.1 Faire connaître le site :
L’emplacement le plus évident pour publier son site Web est bien sûr le réseau Internet. Cependant on peut restreindre la distribution de nos pages à l’Intranet local de notre institut (réseau privé dont l’accès est réservé à une organisation, mais qui utilise les mêmes standards et protocoles que le réseau Internet) ou de choisir une distribution sur CD-ROM, disquette, ou disquette Zip. En effet la publication sur Internet met nos pages à la disposition d’un grand nombre d’internautes. Pour cela il est indispensable de disposer d’un site sur Internet. Il s'agit alors de transférer toutes les pages du site sur le d'accès Internet (FSI). Il est alors enregistré dans les bases de données des moteurs de recherche. La prochaine fois qu’un internaute recherche l’un des mots-clés qu’on a définit, il obtiendra l’URL entre autres résultats. L’un des meilleurs moyens de se faire enregistrer dans un index du Web est de s’inscrire à l’adresse : http ://www.submit-it.com On peut faire connaître notre site avec d’autres possibilités : Les renvois vers d’autres serveurs Web : Une méthode très efficace pour attirer le monde sur notre site est de travailler en collaboration avec d’autres administrateurs de sites. On peut intégrer dans leurs sites un lien vers notre site, les visiteurs peuvent ainsi passer confortablement d’un site à l’autre. Groupes de news : L’une des solutions les plus utilisées consiste à publier un article dans un ou plusieurs groupes de news. L’article doit comprendre les informations suivantes : § Un objet significatif, permettant aux membres du groupe de reconnaître immédiatement s’ils sont concernés. § L’URL complète du site. § Une brève description du contenu.

q

q

IV.4.2 Transfert des pages vers un serveur Web :
Lorsqu’un serveur Web envoie sur Internet les pages choisies par le public, il utilise le protocole standard HTTP. Dans le cas d’un transfert de pages vers le site
Conception d’un site Web 72

Chapitre IV

HTML et Le Web

Web, le logiciel doit faire appel à un standard de communication plus ancien appelé FTP (File Transfer Protocol). Un logiciel comme FTPExpert (un logiciel client FTP en français et facile à utiliser) permet de transférer des fichiers de son ordinateur à un serveur internet appelé hôte. Néanmoins, avant de pouvoir faire un transfert, il faut avant tout établir une connexion avec le serveur Internet du fournisseur d'accès. Certaines informations sont alors requises: adresse de l'hôte (adresse du serveur), ID de l'usager et mot de passe. Il suffit de communiquer avec son fournisseur d'accès pour les connaître. Une fois la connexion établie, on peut ensuite transférer les fichiers du site Web. Non seulement, doit-on envoyer les fichiers HTML, mais également les images (fichiers GIF et JPG). Par ailleurs, ce n'est qu'une fois la page index.html (page d’accueil du site) transférée sur le serveur que le site sera accessible par Internet en tapant son adresse.

IV.4.3 Améliorer le site :
Une fois le site Web en ligne, on doit immanquablement y apporter des modifications à plusieurs reprises. Il est alors important de travailler sur la toute dernière version des pages HTML à modifier. Aussi, utilisera-t-on encore une fois FTPExpert pour transférer les pages concernés du fournisseur à son ordinateur. Voici quelles sont les étapes: q Transférer les pages HTML à modifier du fournisseur d'accès à son ordinateur q Effectuer les modifications à l'aide d'un éditeur HTML q Sauvegarder les pages HTML modifiées q Réexpédier le tout sur le serveur.

IV.4.4 e-mail :
Maintenant nous ne contentons pas de proposer des informations mais nous voulons également recevoir des données de la part des visiteurs. E-mail est un moyen d’obtenir des critiques, de répondre aux questions ou de demande des renseignements de la part des personnes qui vont consulter notre site. Grâce à la commande MAILTO les visiteurs peuvent contacter tous les sites qui existent dans le monde entier.
<A HREF="mailto : notre adresse e-mail">texte du lien</A>

On peut aussi contacter l’un des réalisateurs de site, par la même procédure.

Conception d’un site Web

73

Chapitre IV

HTML et Le Web

IV.4.5Compteur d’accès :
Pour connaître le nombre d’internautes qui ont accédés à notre site, on doit installer un compteur d’accès dans la page d’accueil. Pour cela on choisi un parmi les compteurs d’accès exécutable, les sections suivantes montrent comment on peut créer un tel compteur. Il existe deux façons d’installer un compteur d’accès : q Nous développons notre propre compteur. Pour cela, on doit disposer de notre serveur Web personnel, ou d’un accès très généreux au serveur de notre prestataire de services. Nous pouvons alors installer un compteur fiable. q Nous profitons de la présence d’un compteur d’accès central. Il suffit d’insérer un lien dans notre document. Cependant ce type de compteur

IV.4.6 Le formulaire de demande de renseignements :
Les utilisateurs doivent être réellement motivés d’utilisé e-mail, car cela demande un minimum de rédaction, sans parler de la nécessité de quitter le Web. Pour nos visiteurs, il est bien plus intéressant et simple de fournir l’information par le biais de zones de saisie. De cette manière, ils ne sont jamais à plus d’un clic de souris des informations qui les intéressent. Les formulaires existent depuis HTML 2.0. Le navigateur affiche des zones de saisie et des cases d’option à remplir par l’internaute. Une fois que l’utilisateur rempli tous les champs, il doit confirmer ses données et les envoyer au serveur avec le bouton d’envoi. Le serveur analyse ces formulaires puis crée un nouveau document HTML e en réponse au navigateur Web. En cas où l’utilisateur se tromperait en remplissant les champs du formulaire, il doit avoir la possibilité de remettre l’ensemble à son état initial; c’est la fonction du bouton Reset (annuler).

Conception d’un site Web

74

Chapitre V

DHTML

V.1 Introduction :
proposée par Microsoft depuis la version 4.0 d’Internet Explorer. DHTML fait partie des solutions qui sont proposées pour rendre les pages Web plus vivantes et réactives. DHTML n’est pas un nouveau langage ou un nouveau standard. C’est plutôt une nouvelle présentation de concepts déjà existants : dire qu’un navigateur permet d’utiliser DHTML, c’est dire qu’il supporte la version 4.0 du langage HTML, les utilisation de JavaScript et le model objet DOM.
CSS (styles) Scripts (JavaScript – VBScript ) DOM (Document Object Model)

DHTML
Ainsi, l’aspect dynamique des documents se résume à l’utilisation des feuilles de style pour les effets stylistiques et à l’action des scripts qui pourront intervenir la page. Par exemple on peut mettre en gras certaines parties d’un menu lorsque la souris de l’utilisateur passe dessus, afficher ou masquer certains éléments suivant les actions de l’utilisateur. Le but de ce chapitre n'est pas de donner une liste exhaustive de toutes les possibilités que le DHTML et le CSS nous offrent, mais plutôt de permettre d'aborder ces nouvelles techniques. Du fait qu’on ne peut dissocier le concept des feuilles de style et celui du DHTML, nous commencerons par une approche des feuilles de style avant de terminer par celle du DHTML proprement dit.

V.2 Les feuilles de style :
Dès 1996 est apparu un nouveau langage, élaboré par le W3C, appelé CSS (Cascading Style Sheets), dont le but est de spécifier les styles en HTML : celui-ci fut adopté par les principaux navigateurs. Fondamentalement, le CSS sépare réellement le contenu et la structure de la présentation d'un document HTML : il respecte donc la DTD (Document Type Definition : la DTD définit l'ensemble des éléments supportés avec leurs attributs et indique si un élément peut en contenir d'autres). Cette séparation était impossible avant la venue du CSS, quand des balises étaient incorporées au code HTML, afin d'indiquer le style du contenu. Ces balises ne
Conception d’un site Web 76

Chapitre VI

XML

VI.1 Origine de XML :
-textuels sur une immense échelle. Depuis 1995, les moteurs de recherche ont démontré la stupéfiante ca recherche d'information rendue possible par le WWW. Ainsi, avant l'apparition de XML (eXtensible Markup Language), existaient : • Un langage de balisage normalisé, riche en 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 peu navigateurs. 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
Conception d’un site Web 90

Chapitre VI

XML

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 :
<INSTRUMENT>Guitare</INSTRUMENT>

Dans un document XML, on s'efforcera de ne pas tenir compte de la mise en forme mais seulement du contenu de celui-ci; la mise en forme étant 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 :
q q q

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

IV.2.2 Structure d'une feuille XML :
q q q

Toute feuille XML est composée de la façon suivante : un prologue : il contient diverses déclarations facultatives mais recommandées le contenu du document avec les balises associées des commentaires éventuels
91

Conception d’un site Web

Chapitre VI

XML

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 :
<?xml version=’1.0’ encoding=’UTF-8’ standalone=’yes’?>

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 :
Conception d’un site Web 92

Chapitre VI

XML

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

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

VI.3 XSL :
Le XSL Extensible Style Language est le langage utilisé pour 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ée sa 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.
Conception d’un site Web 93

Chapitre V

DHTML

respectaient pas les principes de structuration des documents puisqu'elles mêlaient et contenu. Par exemple, l'élément <STRONG> dont le rôle fondamental est d'indiquer l'importance d'une partie du texte, peut être présenté en caractère gras, par une feuille de style :
STRONG {font-weight:bold}

De cette manière, peu importe le style de présentation utilisé pour le texte <STRONG> , celui-ci pouvant être changé à tout moment (script ou feuille de style), mais structurellement, cette partie de texte reste définie comme importante pour le document !

V.2.1 Définition :
L’expression feuille de style en cascade fait référence à une combinaison de méthode permettant de contrôler des éléments de style, tels que le contrôle des polices, la gestion des couleurs, le contrôle des marges, et même l’ajout d’effets spéciaux comme l’ombrage du texte. Leur introduction apporte la solution tant attendue à de nombreuses insuffisances du langage HTML. Bien entendu, il est toujours possible de contrôler grossièrement le style d’une page à l’aide -tête et de police, mais cela reste lourd et d’efficacité limitée. Il existe trois techniques différentes pour joindre des feuilles de style à un document HTML, respectivement plus complexes mais offrant également des es : q Les feuilles de style local ou feuille de style en ligne. q Les feuilles de style incorporées ou feuilles de style global. q Les feuilles de style liées.

V.2.2 Feuille de style local :
Les feuilles de style local (intra-ligne) permettent d’affecter un st n’importe qu’elle élément HTML (paragraphes, en-têtes, ancrages, cellules de tableaux, … etc.). Celui-ci est spécifié directement dans la balise du début de l'élément, par les attributs de STYLE, qui emploient d'ailleurs le même langage que celui des feuilles de style (globales ou liées). Par exemple :
<P STYLE="FONT : 14pt Arial; COLOR :green"> IV.2.3 Feuille style global : ce texte va s’afficher en de couleur vert, en 14 points avec la police Arial. </P>

Conception d’un site Web

77

Chapitre V

DHTML

V.2.3 Feuille de style global :
Ici, la définition de la feuille de style global s'insère par la balise spécifique <STYLE> , généralement placée dans l'en-tête du document. En quelque sorte, on regroupe les différents styles concernant les différents éléments, ce qui permet de globalement le style de tout le document HTML. Cette technique permet, par le changement de quelques codes, de modifier toute la présentation de la page ou de lui adjoindre un ou des styles supplémentaires. Exemple : une feuille de style globale qui définit un fond d'écran, la justification des paragraphes, une classe "info" (fond marron et couleur blanche), des liens non soulignés et enfin, les éléments <STRONG> en couleur rouge.
<HEAD> <TITLE>Feuilles de style incorporées</TITLE> <STYLE> BODY {background-image :URL(image.gif)} P {text-align:justify} .info {background:maroon; color:white} STRONG {color:red } A { COLOR: #FF0000; TEXT-DECORATION: none} </STYLE> </HEAD>

V.2.4 Feuille de style lié
La méthode de feuille de style liée ou externe est une méthode puissante de création de style générique, applicable à la totalité d’un site. Les styles externes une page Web sont codés exactement comme pour une feuille de style incorporés, mais ils sont placés dans un document distant, portant l’extension CSS (".CSS"). Cette dernière technique apporte une amélioration des performances, car : q La feuille de style liée est mise en mémoire séparément. q Les documents sont moins volumineux. q Le chargement des informations de style ne se fait qu'une seule fois. Par exemple :
<STYLE> BODY { BACKGROUND : #FFFFFF ; COLOR : #000000; MARGIN-TOP: .25in; MARGIN-LEFT: .75in; MARGIN-RIGHT: .75in} H1 { FONT: 14pt Verdana; COLOR: #0000FF} P { FONT: 12pt Times; TEXT-INDENT: 0.5in} A { COLOR: #FF0000; TEXT-DECORATION: none} </STYLE>

Conception d’un site Web

78

Chapitre V

DHTML

Maintenant on peut lier à ce document autant de pages HTML qu’on souhaite, en employant seulement la syntaxe suivante :
<HTML> <HEAD><TITLE>Feuilles de style externe</TITLE> <LINK REL="StyleSheet" HREF="style.css" TYPE="text/CSS" </HEAD>

V.3 Attributs de style :
Voici la liste des trois nombreux attributs utilisés dans une feuille de style : Font : L’attribut " font" permet de définir plusieurs polices en une seule opération. Si la première police n'est pas disponible, la suivante sera essayée, etc. On a aussi la possibilité d'ajouter les mots bold (gras) et/ou italic (italique) ainsi que la taille de la police, séparément avec les paramètres Font-family:, Font-size:, Font-weight:, Font-style:. Exemple:
H2{ font: 14pt Vernada; color:#0000FF; font-weight: bold; font-style: italic}

text-decoration : sert, entre autre à supprimer le soulignement des liens. Pour cela on affecte à ce paramètre la valeur none. Les valeurs underline, italic et line through (respectivement : souligné, italique et barré) sont également possibles. Exemple:
A {color:#FF0000; text-decoration: none}

background: place une couleur ou une image à l'arrière d'un texte, soit avec une couleur, soit avec une URL, adresse qui pointe sur une image d'arrière-plan. Cet attribut peut être ajouter à toute balise de texte HTML.

V.4 CLASSE, SELECTEUR ET GROUPES :
V.4.1 CLASSES :
En HTML, les classes de style définissent un découpage du style en éléments précis. C'est une balise HTML personnalisée, entre autre, chaque type de texte spécialement formaté qu'on définisse nous-même se nomme une classe de style. La syntaxe est alors la suivante:
[Marqueur HTML].[nom de la classe][déclaration]

Conception d’un site Web

79

Chapitre V

DHTML

Supposons par exemple : qu'on décide que notre document doit contenir deux types de balises <H1>. On crée une classe de style pour chacune de ces balises en ajoutant le texte suivant à notre feuille de style:
<STYLE TYPE="text/css"> <!-H1.sans{font: 18pt Arial} H1.classique { color: blue; font-family: "Bookman Old Style"} --> </STYLE>

Pour choisir entre ces deux classes dans notre page HTML, on utilise l'attribut classe, de la manière suivante :
<H1 class= classique >bonjour! Messieurs</H1>

a) Le sélecteur CLASS appliqué à tout marqueur HTML :
La syntaxe d'une classe potentiellement applicable à tous les marqueurs HTML omme suit:
<STYLE TYPE="text/css"> <!-.elegant { color: black; font-family: "Book Antiqua"} -->

Remarquons que nous avons intentionnellement omis le marqueur HTML juste avant le point.

b) Le sélecteur ID :
Contrairement au sélecteur CLASS, le sélecteur ID ne s'applique qu'à un seul et unique élément. Autrement dit, tous les éléments du document peuvent utiliser un sélecteur ID, à condition que chacun soit différent l'un de l'autre. La syntaxe du

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

Notons que le symbole # est nécessaire. ID suivant:

Par exemple, définissons l'attribut

Conception d’un site Web

80

Chapitre V

DHTML

<STYLE TYPE="text/css"> <!-#copyright {font-size: italic; font-size: smaller; color: red; } --> </STYLE>

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
Conception d’un site Web 81

Chapitre V

DHTML

é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 :
P STRONG.ex { color: green}

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

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 :
P.1{font: Arial; font-size: 12pt; line-height: 14pt}

Et voici comment il est possible de grouper cette classe :
P.1{font: 12/14pt Arial}

Les 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 propriétés (position, hauteur, largeur, visibilité, méthodes (fonctions associées à un élément). Cela Javascript, permettant de modifier les propriétés page Web se fait en modifiant leurs z-index, etc.) ou en utilisant leurs ne peut se faire qu'à l'aide d'un code des é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).
Conception d’un site Web 82

Chapitre V

DHTML

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 contiennen inertes. 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 prin navigateur 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.
Conception d’un site Web

83

Chapitre V

DHTML

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
Conception d’un site Web 84

Chapitre V

DHTML

La largeur q La hauteur q Le Z-Index, c'est-à-dire le niveau de superposition de la balise. En effet, on appelle ces conteneurs HTML "couches" car il s'agit d'é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
q

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 ellesmê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:
document.layers['nom']. attribut

ou
document.layers.nom. attribut

Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante:
<LAYER NAME="IMG1" LEFT="20" TOP="30"> <IMG SRC="image.gif"> </LAYER> <LAYER NAME="IMG2" LEFT="25" TOP="35"> <IMG SRC="image2.gif"> </LAYER>

Voici un tableau 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
85

Conception d’un site Web

Chapitre V

DHTML

Left Top

valeur numérique entière valeur numérique entière Les balises DIV et SPAN :

distance en pixel à la bordure gauche distance en pixel au haut de la page

Avec Internet Explorer (versions 4 et 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:
document.all.nom.attribut

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

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

Conception d’un site Web

86

Chapitre V

DHTML

Voici un tableau résumant les attributs des balises DIV et SPAN :
Propriété Static position absolute relative Auto (par défaut) valeur numérique entière valeur en pourcentage (%) Auto (par défaut) valeur numérique entière valeur en pourcentage (%) Valeur Description Aucun mouvement par rapport au document positionnement par rapport au document par rapport à l'élément précédent distance à la bordure gauche automatique distance à la bordure gauche en pixels distance à la bordure gauche en pour centage distance au sommet automatique distance au sommet en pixels distance au sommet en pourcentage

left

top

width

auto largeur automatique valeur numérique entière largeur de l'élément en pixels valeur en pourcentage (%) largeur de l'élément en pourcentage 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 affiche le contenu même s'il est trop grand cache le contenu superflu automatique affiche des barres de défilement découpage automatique découpage en bas découpage à gauche découpage à droite découpage en haut visibilité par défaut caché visible superposition automatique valeur indiquant la profondeur

height

visible hidden overflow auto scroll auto bottom left right top

clip

inherit visibility hidden visible z-index auto valeur numérique entière

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

Conception d’un site Web

87

Chapitre V Action Netscape Navigator Internet Explorer

DHTML

Modifier l'image document.layers.nom.background de fond Modifier la document.layers.nom.bgColor couleur du fond Modifier le clipping Modifier le contenu document.layers.nom.clip document.layers.nom.open(); document.layers.nom.writeln();

document.all.nom.style.backgroundImage document.all.nom.style.backgroundColor document.all.nom.style.clip document.all.nom.innerHTML document.all.nom.style.left objet.id objet.name document.all.nom.style.visibility document.all.nom.style.top document.all.nom.style.zIndex

Modifier la document.layers.nom.left distance à gauche Accéder au nom objet.name Modifier la visibilité document.layers.nom.visibility

Modifier la document.layers.nom.top distance au haut Modifier le zindex document.layers.nom.zIndex

Conception d’un site Web

88

Chapitre VI

XML

VI.1 Origine de XML :
-textuels sur une immense échelle. Depuis 1995, les moteurs de recherche ont démontré la stupéfiante ca recherche d'information rendue possible par le WWW. Ainsi, avant l'apparition de XML (eXtensible Markup Language), existaient : • Un langage de balisage normalisé, riche en 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 peu navigateurs. 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
Conception d’un site Web 90

Chapitre VI

XML

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 :
<INSTRUMENT>Guitare</INSTRUMENT>

Dans un document XML, on s'efforcera de ne pas tenir compte de la mise en forme mais seulement du contenu de celui-ci; la mise en forme étant 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 :
q q q

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

IV.2.2 Structure d'une feuille XML :
q q q

Toute feuille XML est composée de la façon suivante : un prologue : il contient diverses déclarations facultatives mais recommandées le contenu du document avec les balises associées des commentaires éventuels
91

Conception d’un site Web

Chapitre VI

XML

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 :
<?xml version=’1.0’ encoding=’UTF-8’ standalone=’yes’?>

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 :
Conception d’un site Web 92

Chapitre VI

XML

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

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

VI.3 XSL :
Le XSL Extensible Style Language est le langage utilisé pour 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ée sa 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.
Conception d’un site Web 93

Chapitre VII

JavaScript

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ù 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. JavaScript implique un typage faible des variables ; autrement dit, les variables peuvent contenir tout type de données. Le code JavaScript est intégré ; il fait toujours partie d’un fichier HTML.

q

q

q

VII.3 Programmation Orienté Objet : POO
VII.3.1 Introduction :
Aujourd’hui, il existe beaucoup de langages hybrides, ou procédures avec quelques fonctionnalités orientées objet. A un niveau langages ont été élaborés d’abord pour nous fournir une structure par l’ordinateur (d’où le terme "procédure"), et permettre d’organiser et de manipuler les données. des langages à fondamental, ces pour créer des aussi pour nous

Conception d’un site Web

96

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

Conception d’un site Web

119

Chapitre VIII Conception

Modes Affichage

Barre d’outils Les Dossiers

L’Explorateur de FrontPage

Barre d’outils Standard

Barre d’outils Mise en Forme

Barre d’outils Fonctions avancées

Barre d’outils formulaires

Barre d’outils Tableau

Barre d’outils D’Images Barre d’Etat

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é
Conception d’un site Web 120

Chapitre VIII Conception

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

Conception d’un site Web

121

Chapitre VIII Conception

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 :

Bouton d’enregistrement

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é :
Conception d’un site Web 122

Chapitre VIII Conception

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.

Conception d’un site Web

123

Chapitre VIII Conception

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.

Conception d’un site Web

124

Chapitre VIII Conception

Page d’accueil Infos pratiques Heures d’ouverture Nouveautés Comment s’inscrire Recherché Comptoir du prêt Cours en ligne personnel Autres liens

Retour

Conception d’un site Web

125

Chapitre VII

JavaScript

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 informatiques dans un langage orienté objet. ordinateurs, etc.) en utilisant des objets

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 :

Méthodes+Données = Objet
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 s objet ; 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.

Conception d’un site Web

97

Chapitre VII

JavaScript

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

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

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
Conception d’un site Web 98

Chapitre VII

JavaScript

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

Classe : Fenêtre Haut Gauche Bas Droite

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

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
Conception d’un site Web 99

Chapitre VII

JavaScript

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.
Conception d’un site Web 100

Chapitre VII

JavaScript

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

parent

top

self

frames

history

document

location

link

form

anchor

text textarea password

button submit reset Hiérarchie des objets JavaScript

radio checkbok select

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

Conception d’un site Web

101

Chapitre VII

JavaScript

VII.4.1 L’objet window (fenêtre):
Propriétés Méthodes Gestionnaires d’événements onLoad= onUnload=

frames parent selt top status defaultStatus window

alert() close() confirm() open() prompt() setTimeout() clearTimeout()

Création d’une fenêtre :
Nom de l’objet fenêtre = window.open( [paramètres] )

Accession aux propriétés ou méthodes de la fenêtre :
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] )

Propriétés : Propriétés status defaultstatus self parent top frames window Valeur string(chaîne) string(chaîne) Objet fenêtre Objet fenêtre Objet fenêtre Objet fenêtre Objet fenêtre Lisible Oui Oui Oui Oui Oui Oui Oui Modifiable Oui Oui Non Non Non Non non

Méthodes : Syntaxe alert(message)
Conception d’un site Web

Valeur de retour Aucune
102

Chapitre VII

JavaScript

confirm(message) prompt(message, réponse par défaut) open("URL", "nom de la "caractéristiques de la fenêtre" ] ) close() setTimeout("expression", temps millisecondes) clearTimeout(numéro setTimeout) d’identification fenêtre"

true ou false (vrai ou faux) Chaîne de texte entrée l’utilisateur ou valeur nulle [, Aucune Aucune en Valeur d’identification, à éventuellement avec la window.clearTimeout() par Aucune

par

alloué

employer méthode

fourni

VII.4.2 L’objet location (emplacement) :
Propriétés hash host hostname pathname port protocol search href Méthodes Aucun Gestionnaires d’événements Aucun

Affecter un nouvel emplacement à la fenêtre actuelle :
[window].location = " URL"

Accéder aux propriétés de l’objet emplacement :
[window].location. propriété

Propriétés : Propriété Valeur Lisible Modifiable
103

Conception d’un site Web

Chapitre VII

JavaScript

href hast host hostname pathname port protocol search

Chaîne (string) Chaîne (string) Chaîne (string) Chaîne (string) Chaîne (string) Chaîne (string) Chaîne (string) Chaîne (string)

Oui Oui Oui Oui Oui Oui Oui Oui

Oui Oui Oui Oui Oui Oui Oui Oui

Les propriétés d’un objet location (emplacement) se rapportent essentiellement au : serveur hôte, protocole utilisé, etc. par exemple :
http: // www.ito.com: 80 / projet /index.html #debut

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 lenght Méthodes back() forward() go() Gestionnaires d’événements Aucun

Accéder aux propriétés ou aux méthodes de l’objet historique :
[ window].history.propriété | méthode ( [paramètres] )

Propriétés: Propriété length
Conception d’un site Web

Valeur Nombre

Lisible Oui

Modifiable Oui
104

Chapitre VII

JavaScript

Méthodes : Syntaxe back() forward() go(nombre relatif | "URL ou titre") Valeur de retour Aucune Aucune Aucune

VII.4.4 L’objet document :
Propriétés alinkColor anchors bgColor cookie fgColor forms lastModified linkColor links location referrer title vlinkColor Propriétés : Propriétés forms location title lastModified anchors referrer links cookie alinkColor vlinkColor bgColor fgColor
Conception d’un site Web

Méthodes clear() close() open() write() writeln()

Gestionnaire d’événements Aucun

Valeur Tableau (array) Chaîne (string) Chaîne (string) Chaîne (string) Tableau d’objet anchor Chaîne (string) Tableau d’objet link Chaîne (string) Triple hexadécimal ou une constante

lisible Oui Oui Oui Oui Oui Oui Oui Oui

Modifiable Oui Oui Non Non Non Non Non Oui

Oui

Oui

105

Chapitre VII

JavaScript

linkColor Methods: Syntaxe write("chaîne de caractères") writeln("chaîne de caractères") open( ["type Mime"] ) close() clear()

Valeur de retour Booléen true en cas de succès Booléen true en cas de succès Aucune Aucune 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èm e 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 :
Conception d’un site Web 106

Chapitre VII

JavaScript

ü

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 :
<INPUT type="Button" name="name" value="texte" [OnliCk="handler"]>

• 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 :
<INPUT type="Checkbox" name="name" value="value" [CHECKED] [onClick="handler"] >text

• 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.
Conception d’un site Web 107

Chapitre VII

JavaScript

• 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 :
<Form name="formname" target="windowname" action="serverURL" methode=methode enctype="enctype" [onSubmit="handler"]>

• 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 serveur. Ce paramètre implique deux valeurs possibles : GET et POST. • Enctype spécifie l’encodage MIME du formulaire. envoyées au

• 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 :
Conception d’un site Web 108

Chapitre VII

JavaScript

<FORM…onsubmit="return VerifyData(this) ">

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 :
<INPUT Type="password" NAME=name VALUE="value" SIZE=size>

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 :
<INPUT TYPE="radio" NAME="name" VALUE="value" [CHECKED] [onClick="handler"]>text

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 :
<INPUT TYPE="reset" Conception d’un site Web NAME="name" VALUE="button Text" 109

Chapitre VII

JavaScript

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 :
<SELECT NAME="name" SIZE="size" [MULTIPLE] [onBlur="BlurHandler"] [onFocus="ChangeHandler"]> <OPTION VALUE="value"[SELECTED]>text </SELECTED>

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 :

<INPUT TYPE=" submit" NAME="name" [onClik="handler"]>

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.
Conception d’un site Web 110

Chapitre VII

JavaScript

ü text : L’objet text génère l ‘affichage d’une zone de texte pour la présentation et l’ent de 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 :
<INPUT TYPE="text" NAME="name" VALUE="value" SIZE="talle" [onBlur="blurhandler"] [onChange="ChangeHandler"] [onFocus="selecthandler">

ü textarea: Un objet Textarea est similaire à un objet Text, à ceci 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 :
<TEXTAREA NAME="name" ROWS=rows COLS=cols [onBlur="BlurHandler"] [onChange="ChangeHandler"] [onFocus="FocusHandler"] [onSelect="SelectHandler"]>text </TEXTAREA>

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 :

<A HREF ="locationOrURL" NAME = "name" TARGET d’un = "window"> Conception site Web Anchor Text </A> 111

Chapitre VII

JavaScript

• 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.
<A HREF = " locationOrURL" NAME = "name" TARGET ="window" OnClic = "ClickHandler" OnMouseOver = "MouseOverHandler"> Text </A>

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

Conception d’un site Web

Chapitre VII

JavaScript

• •

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 appName appVersion appCodeName userAgent Méthodes Aucun Gestionnaire d’événements Aucun

Accession aux propriétés de l’objet navigateur :
Navigator.propriété

Propriétés : Propriétés appName appVersion appCodeName userAgent Valeur Chaîne (string) Lisible Oui Modifiable Oui

VII.4.8 Objet string (chaîne de caractères) :
Propriété : Propriété length Méthodes : Syntaxe Chaine.toLowercase() Chaine.toUpperCase()
Conception d’un site Web

valeur Entier (integer)

Visible Oui

Modifiable Oui

Valeur de retour La chaîne en minuscules La chaîne en majuscules
113

Chapitre VII

JavaScript

Chaine.indexOf( chaîne de recherche [, index de démarage ] ) Chaine. lastindexOf( chaîne de recherche [, index de démarage ] ) Chaine.charArt( index ) Chaine.substring( indexA, indexB ) Chaine.anchor( " nom de l’ancrage") Chaine.big() Chaine.blink() Chaine.bold() Chaine.fixed() Chaine.fontcolor( valeur de couleur ) Chaine.fontsize( entier de 1 à 7 ) Chaine.italics() Chaine.link( emplacement ou URL ) Chaine.small() Chaine.strike() Chaine.sub() Chaine.sup()

Position à laquelle commence la chaîne recherchée dans la chaîne analysée. Position dans la chaîne analysée, du dernier caractère de la chaîne recherchée Le caractère se trouvant à la position index dans la chaîne analysée Les caractères se trouvant de la position 1 à la position 2 (non incluse) Aucune La chaîne en grands caractères Clignotement de la chaîne La chaîne en caractères gras Espacement fixe Aucune Aucune La chaîne en italique La chaîne en petits caractères La chaîne barrée La chaîne en indice 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 } Conception d’un site Web

114

Chapitre VII

JavaScript

For (variable in objet ) { Instructions }

While (condition) { Instruction }

With (objet) { Instructions }

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 :
+ * / % ++ --valeur Plus Moins Multiplication Division Modulo Incrémentation Décrémentation Négation

Conception d’un site Web

115

Chapitre VII

JavaScript

VII.6.3 Affectation :
= += -= *= /= %= <<= >>= >>>= Affectation Ajoute la valeur de droite à la variable de gauche Soustrait la valeur de droite de la variable de gauche Multiplie la valeur de gauche par la valeur de droite Divise la valeur de gauche par la valeur de droite Affecte à la valeur de gauche le modulo de cette variable avec la valeur de droite 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 à gauc he 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 } Conception d’un site Web

116

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

Conception d’un site Web

126

Serveur Web Outils et techniques
[Jonathan Magid, R.DouglasMatthews, poul Jones] [Thomson] 1996.

LE GRAND POCHE HTML 4
[Dick Oliver, Molly Holzschlag] [S&SM] 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 FF3300 FF6600 FF9900 FFCC00 FFFF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 990000 993300 996600 999900 99CC00 99FF00 660000 663300 666600 669900 66CC00 66FF00 330000 333300 336600 339900 33CC00 33FF00 000000 003300 006600 009900 00CC00 00FF00 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 990033 993333 996633 999933 99CC33 99FF33 660033 663333 666633 669933 66CC33 66FF33 330033 333333 336633 339933 33CC33 33FF33 000033 003333 006633 009933 00CC33 00FF33 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 990066 993366 996666 999966 99CC66 99FF66 660066 663366 666666 669966 66CC66 66FF66 330066 333366 336666 339966 33CC66 33FF66 000066 003366 006666 009966 00CC66 00FF66 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99 CC0099 CC3399 CC6699 CC9999 FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC CC00CC CC33CC CC66CC CC99CC FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF CC00FF CC33FF CC66FF CC99FF

CCCC99 CCCCCC CCCCFF CCFF99 990099 993399 996699 999999 99CC99 99FF99 660099 663399 666699 669999 66CC99 66FF99 330099 333399 336699 339999 33CC99 33FF99 000099 003399 006699 009999 00CC99 00FF99 CCFFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC CCFFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF

Conception d’un site Web

128

ANNEXE B

Liste des balises META : <META NAME="xxx" CONTENT="xxx">

<META NAME="xxx" ... > Description Mots clés Author Identifier-URL Date-Creation-yyyymmdd Date-Revision-yyyymmdd Reply-to revisit-after Category Publisher Copyright Generator robots

Description Description du site en une phrase de préférence. Liste de mots clés Auteur du site URL de votre site Date de la création de votre site Date de la dernière modification Votre e-mail Indique la revisite du robot après n jours Catégorie de votre site (annuaire) Celui qui publie votre site Copyright(s) de votre site Logiciels utilisés pour la création de votre site Diriger le robot

Caractères maxi 200 500 -

Exemple <META NAME="Desciption" CONTENT="All HTML, l'autre vision du html"> <META NAME="Keywords" CONTENT="html, xml, sgml, tags"> <META NAME="Author" CONTENT="Cyrille CLEDIERE"> <META NAME="Identifier-URL" CONTENT="http://www.allhtml.com"> <META NAME="Date-Creation-yyyymmdd" content="19990525">"> <meta name="Date-Revision-yyyymmdd" content="19990717"> <META NAME="Reply-to" CONTENT="[email protected]"> <META NAME="revisit-after" CONTENT="15 days"> <META NAME="Category" CONTENT="Internet"> <META NAME="Publisher" CONTENT="Cyrille CLEDIERE"> <META NAME="Copyright" CONTENT="Cyrille CLEDIERE"> <META NAME="Generator" CONTENT="WebExpert, Picture Publisher"> <META NAME="robots" CONTENT="index, follow">

Conception d’un site Web

129

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é &#192; &Agrave; &#193; &Aacute; &#194; &Acirc; &#195; &Atilde; &#196; &Auml; &#197; &Aring; &#198; &Aelig; &#199; &Ccedil; &#200; &Egrave; &#201; &Eacute; &#202; &Ecirc; &#203; &Euml; &#204; &Igrave; &#205; &Iacute; &#206; &Icirc; &#207; &Iuml; &#208; &ETH; &#209; &Ntilde; &#210; &Ograve; &#211; &Oacute; &#212; &Ocirc; &#213; &Otilde; &#214; &Ouml; &#215; &times; &#216; &Oslash; &#217; &Ugrave; &#218; &Uacute; &#219; &Ucirc; &#220; &Uuml; &#221; &Yacute; &#222; &THORN; &#223; &szlig; Caractère à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Code Iso &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#247; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255; Entité &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &divide; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

Conception d’un site Web

131

ANNEXE D CARACTERES SPECIAUX.
ar tous les navigateurs.
Caractères en code ISO 5589-1 (ISO-Latin 1)
Caractère Code Iso Entité • &#129; ‚ &#130; ƒ &#131; „ &#132; … &#133; † &#134; ‡ &#135; ˆ &#136; ‰ &#137; Š &#138; ‹ &#139; Œ &#140; &#141; Ž &#142; &#143; • &#144; ‘ &#145; ’ &#146; “ &#147; ” &#148; • &#149; – &#150; — &#151; ˜ &#152; ™ &#153; š &#154; › &#155; œ &#156; &#157; ž &#158; Ÿ &#159; Espace &#160; &nbsp; Caractère Code Iso Entité ¡ &#161; &iexcl; ¢ &#162; &cent; £ &#163; &pound; ¤ &#164; &curren; ¥ &#165; &yen; ¦ &#166; &brvbar; § &#167; &sect; ¨ &#168; &uml; © &#169; &copy; ª &#170; &ordf; « &#171; &laquo; ¬ &#172; &not; &#173; &shy; ® &#174; &reg; ¯ &#175; &masr; ° &#176; &deg; ± &#177; &plusmn; ² &#178; &sup2; ³ &#179; &sup3; ´ &#180; &acute; µ &#181; &micro; ¶ &#182; &para; · &#183; &middot; ¸ &#184; &cedil; ¹ &#185; &supl; º &#186; &ordm; » &#187; &raquo; ¼ &#188; &frac14; ½ &#189; &frac12; ¾ &#190; &frac34; ¿ &#191; &iquest;

Conception d’un site Web

132

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épond propre 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édiatemen caractè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 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

chargé

de

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

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close