Download - Site web pour la gestion de la bibliothèque
République Algérienne Démocratique et Populaire
Minis
Présent!!
Devant le
PEEE
tère de l’enseignement Supérieur et de la Recherche Scientifique
INSTITUT DES TELECOMUNICATIONS
ABDELHAFID BOUSSOUF - ORAN -Pour l’obtention du diplôme d’ingénieur d’état en télécommunications é par :
PROJET DE FIN D’ETUDES
M. NEZROUK ABDERRAHMANE M. ACHACHI NAMANE
jury composé de :
résident : M. SOUAG MOHAMED ncadreur : M. HACHEMANI RABAH xaminateur : M. SIDI-ALI-MEBAREK ZERROUK xaminateur : M. GASMI ABDELLAH
Promotion IGE 20 S 0
outenu en Juin 200
SOMMAIRE
INTRODUCTION GENERALE ………………………………………….… 2 CHAPITRE I INTRODUCTION …………………………………………………………………. 5 I.1 Historique de l'Internet …………………………………………………….. 5 I.2 Topologie et la gestion de l’Internet ..……………………………………. 6
I.2.1 Réseaux constituants …………………………………………….. 7 1.2.2 Les adresses sur le réseau Internet …………………………… 7 1.2.3 Le système de noms de domaine DNS ……………………….. 9
I.3 Types de services ……………………………………………………………10 I.3.1 Les services d’Internet …………………………………………… 11
I.4 Les protocoles réseaux ……………………………………………………. 12 I.4.1 TCP (Transmission Control Protocol) …………………………. 12 I.4.2 IP (Internet Protocol) ……………………………………………… 12 I.4.3 Interface entre TCP et IP ..……………………………………….. 13 I.4.4 Répartition des services entre TCP et IP …………………….. 14
CHAPITRE II Introduction ……………………………………………………………………… 16 II.1 Définition …………………………………………………………………….. 16 II.2 Les outils du Web ………………………………………………………….. 16
II.2.1 Les pages Web ……………………………………………………. 17 II.2.2 Les Hyperliens …………………………………………………….. 18
II.3 Structure du réseau WWW ……………………………………………….. 19 II.3.1 L’approche Client/Serveur ……………………………………… 19 II.3.2 Comment se connecter ? ……………………………………….. 21 II.3.3 Les informations du Web ……………………………………….. 22
II.4 Les Web chercheurs d’information ……………………………… 22
CHAPITRE III III.1 Historique …………………………………………………………………… 26
III.2 Généralités …………………………………………………………………. 26
III.2.1 L’évolution du langage HTML …………………………………. 27 a) Un langage à balises ………………………………………… 27 b) Format des balises …………………………………………… 27 c) Documents HTML …………………………………………….. 28 c.1) En-tête du document ………………………………………. 29 c.2) Corps du document ………………………………………… 30 c.3) Commenter un document …………………………………. 31 c.4) Options de base de la mise en forme …………………… 32
c.5 liaisons entre pages Web ………………………………….. 40 Liens internes ………………..…………………………… 42 Liens externes ……………………………………………. 42
c.6 Les images …………………………………………………… 43 Insertion d’un lien graphique …………………………… 44 Insertion d’image cliquable …………………………….. 45
c.7) Hypermédia …………………………………………………. 45 hypertexte et hypermédia ………………………………. 45
Création d’animation ………………………………….…. 46 Le son ………………………………………………………. 46 La vidéo …………………………………………………….. 47
c.8) Les formulaires HTML …………………………………….. 48 c.9 Les tableaux ………………………………………………….. 50 c.10) Cadre est mise en page interactive ……………………. 52 c.11) Les couleurs ……………………………………………….. 54
Le code RVB ………………………………………………… 54 Les 16 couleurs principales ……………………………… 55
CHAPITRE IV IV.1 Introduction ………………………………………………………………… 57 IV.2 Les éditeurs HTML ……………………………………………………….. 57
IV.2.1 Les éditeurs de texte ……………………………………………. 57 IV.2.2 Les éditeurs de tags …………………………………………….. 58
IV.2.3 Les éditeurs WYSIWYG ………………………………………… 59 IV.2.4 Microsoft FrontPage …………………………………………….. 60
IV.3 Devenir interactif sur le Web ……………………………………………. 60 IV.3.1 Programmation côté serveur ………………………………..… 60
IV.3.1.1 Les programmes ou les scripts CGI ………………... 61 IV.3.1.2 NSAPI et ISAPI ………………………………………… 61
IV.3.2 Programmation côté client …………………………………..… 62 IV.3.2.1 Java, le langage ………………………………………… 62 IV.3.2.2 Ce que nous pouvons faire avec des Applets ….… 63 IV.3.2.3 Adjuvants (Plug-in) …………………………………….. 65 IV.3.2.4 ActiveX …………………………………………………… 65 IV.3.2.5 Les langages de script ………………………………... 66 IV.3.2.6 La réalité virtuelle et le Web ………………………….. 71
IV.4 Gestion du site …………………………………………………………….. 72 IV.4.1 Faire connaître le site …………………………………………... 72 IV.4.2 Transfert des pages vers un serveur Web ………………….. 72
IV.4.3 Améliorer le site …………………………………………………. 73 IV.4.4 e-mail ….................................................................................... 73 IV.4.5 Compteur d’accès ……………………………………………….. 74 IV.4.6 Le formulaire de demande des renseignements …………... 74
CHAPITRE V V.1 Introduction …………………………………………………………………. 76 V.2 Les feuilles de style …………………………………………………..…… 76
V.2.1 Définition …………………………………………………………... 77 V.2.2 Feuille de style local ……………………………………………... 77 V.2.3 Feuille de style global …………………………………………… 78 V.2.4 Feuille de style lié ………………………………………………... 78
V.3 Attributs de style …………………………………………………………... 79 V.4 CLASSE, SELECTEUR ET GROUPES ………………………………… 79
V.4.1 CLASSES ………………………………………………………….. 79 a) Le sélecteur CLASS appliqué à tout marqueur HTML ………... 80
b) Le sélecteur ID ……………………………………………………….. 80 c) Pseudo-classes …………………………………………………….... 81
V.4.2 Sélecteurs ………………….……………………………………... 81 a) Sélecteurs simples ………………………………………………….. 81
b) Sélecteurs contextuels …………………………………………….. 81
V.4.3 GROUPES …………………………………………………………. 82 V.5 Animation des pages Web ……………………………………………….. 82
V.5.1 Principe …………………………………………………………….. 82
V.5.2 Qu'est-ce que le DOM? ………………………………………….. 83
V.5.3 Qu'est-ce que cela signifie pour les documents HTML? ..… 83
V.5.4 La structure du DOM …………………………………………….. 83 Qu'est-ce qu'une couche? …………………………………………….. 84 Les balises DIV, SPAN et LAYER …………………………………….. 85
CHAPITRE VI VI.1 Origine de XML ……………………………………………………………. 90 VI.2 Introduction de XML …………………………………………………….... 91
VI.2.1 De quoi se compose un document XML …………………….. 91 IV.2.2 Structure d'une feuille XML ……………………………………. 91
VI.3 XSL …………………………………………………………………………... 93 VI.4 Conclusion …………………………………………………………………. 93 CHAPITRE VII VI.1 Généralité ………………………………………………………………. …. 96 VI.2 caractéristiques …………………………………………………………… 96 VI.3 Programmation Orienté Objet (P.O.O) ………………………………… 96
VI.3.1 Introduction ………………………………………………….…… 96 VI.3.2 La programmation orientée objet (P.O.O) ………………….. 97
VI.4 la hiérarchie des objets ………………………………………………… 101 VI.4.1 L’objet window (fenêtre) ……………………………………….. 102 VI.4.2 L’objet location (emplacement) ………………………………. 103 VI.4.3 L’objet history (historique) ……………………………………. 104 VI.4.4 L’objet document ……………………………………………….. 105 VI.4.5 Les objets de la gestion des entrées utilisateurs ……….… 107 VI.4.6 Les objets de la gestion des liens hypertextes ……………. 112 VI.4.7 L’objet navigator (navigateur) ………………………………... 113
VI.4.8 Objet string (chaîne d …………………………… 114 VI.5 Structure de contrôle …………………………………………………… 114 VI.6 Opérateurs ………………………………………………………………... 115
VI.6.1 Comparaison ……………………………………………………. 115 VI.6.2 Arithmétique …………………………………………………….. 116 VI.6.3 Affectation ………………………………………………………. 116 VI.6.4 booléen …………………………………………………………... 116 VI.6.5 Niveau binaire ………………………………………………..…. 117 VI.6.6 Fonctions ……………………………………………………..…. 117
Chapitre VIII
Introduction ……………………………………………………………………. 119 VIII.1. Les Outils Utilisés ………………………………………………..…… 119
VIII.1.1. Microsoft FrontPage ……………………………………….... 119 VIII.2 Outils graphiques ……………………………………………………… 120
VIII.2.1 Création des Animations ……………………………………. 121 Animagic GIF …………………………………………………………… 121
VIII.3 Outil de traitement de son ……………………………………………. 122 V.3.1 Le magnétophone ………………………………………………. 122
VIII.4 Test des pages ……………………………………………………….… 122 VIII.5 Implémentation du site ………………………………………………... 124 CONCLUSION ………………………………………………………….... 126 ANNEXES ……………………………………………………………..…. 127 ANNEXE A ………………………………………………………………..…… 128 ANNEXE B ……………………………………………………………………… 129 ANNEXE C ……………………………………………………………………… 131
ANNEXE D …………………………………………………………………….. 132
Introduction
Conception d’un site Web 2
Introduction : Qui à besoin d’un site internet ? A priori tout le monde. Le développement
d’Internet a pris une telle ampleur que les amateurs pour appendre le langage HTML sont de plus en plus nombreux.
Les pages HTML constituent aujourd’hui le système de base de l’Internet. Elles offrent une grande variété d’applications allant de la page personnelle au service
commercial professionnel. Les sites Web peuvent inclure du texte ainsi que des graphiques animés, du son, de la vidéo ou des programmes interactifs complets. Des millions de page Web sont disponibles chaque jour sur des centaines de serveurs de
par le monde. Bref le Web est devenu une nouvelle méthode de dialogue innovante. Presque
toutes les publicités présentes dans les médias contiennent une adresse Web. Les journaux télévisés, la presse quotidienne, les universités et les magazines possèdent
eux-mêmes des sites Web.
Pour l’institut, c’est le catalogue disponible 24 heures sur 24, et mis à jour quotidiennement. C’est la documentation interne, acc
quelques minutes. Les sociétés, les universités et les écoles supérieures liées au marché de l’informatique fournissent les meilleurs exemples de création de sites Web.
Aujourd’hui, elles produisent tous des sites Internet et fournissent une multitude de renseignements théoriques et techniques à leurs utilisateurs. Une difficulté avec un
logiciel ?, les pages questions réponses, des cours en ligne, etc.
L’objectif de notre sujet qui est proposé par l’équipe réseaux de notre institut est d’étudier les éléments qui entrent dans la conception d’un site Web ainsi que de
son environnement de fonctionnement.
Les enjeux des différents chapitres sont : Chapitre I : Appréhende les protocoles de communications et les différents
services qui régissent Internet. Chapitre II : Ce chapitre explique en détaille le Word Wide Web.
Le Chapitre III est consacré à l’étude du langage HTML. Chapitre IV: Etude des différents éditeurs dédiés à l’écriture des pages
HTML ainsi que l’enrichissement des pages en utilisant javaScript et Java. Chapitre V: Etude des différentes fonctionnalités du DHTML.
Chapitre VI: Bref aperçu sur le langage XML.
Introduction
Conception d’un site Web 3
Chapitre VII : Syntaxe résumée de JavaScript ainsi qu’une petite introduction
sur la programmation orientée objet. Dans le Chapitre VIII: on implémente les démarches suivies lors de la
création du site web de la bibliothèque pour compléter le site de l’institut.
Chapitre I Généralité sur Internet
Conception d’un site Web 5
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,...).
Chapitre I Généralité sur Internet
Conception d’un site Web 6
I.2 Topologie et gestion de l’Internet :
La caractéristique la plus importante à retenir de l'Internet demeure sa topologie c'est à dire sa structuration. Il constitue un réseau décentralisé, composé de tronçons de capacités diverses, un peu comme un réseau routier. Internet n'propriétaire unique, ni une société à actions. C'est plutôt une communauté d'intérêt, une association d'utilisateurs qui défraient eux-mêmes les coûts d'entretien et de modernisation des infrastructures. La première conséquence de cette topologie est que personne n'est en mesure de contrôler le contenu qui circule dans l'ensemble du réseau, à moins que l'ensemble des utilisateurs se mettent d'accord. Il existe cependant certains organismes "chaperons". Mentionnons brièvement :
q IRS (Internic Registration Service), qui gère l'attribution des adresses
q IS (L'Internet Society), dédiée à la promotion et à la coordination du
Net. q NSF (National Science Foundation), qui gère la principale voie rapide
de l'Internet, mieux connue sous le nom de backbone. q ISOC (Internet Society), qui a pour mission « d’accompagner »
l’évolution technique de l’internet et de promouvoir son utilisation auprès des différentes communautés.
q IAB (Internet Architecture Board), qui est considérée comme l’autorité
suprême en matière de réseau et de technique. Elle fixe les règles d’attribution des adresses réseau, noms de domaine, donc un groupe technique qui supervise le développement de l’internet.
q IETF (Internet Engineering Task Force), qui est le principal
pourvoyeur de RFC (Request For comment). C’est un ensemble de groupes de travail ouverts qui proposent des évolutions techniques à court ou moyen terme sur les standards est les architectures.
q IANA (Internet Assigned Numbers Authority), qui a le bureau central d’enregistrement des numéros de ports, de réseaux IP,... sur l’Internet.
Chapitre I Généralité sur Internet
Conception d’un site Web 7
I.2.1 Réseaux constituants : L'Internet a intégré partiellement plusieurs réseaux plus anciens, comme Bitnet
(technologie IBM) ou le réseau UUCP (technologie UNIX). Ces réseaux utilisent d'autres conventions d'adressage que l'Internet (adresses IP) et sont en passe de
devenir obsolète, mais ils véhiculent encore beaucoup d'information.
: On trouve trois types d'adresse pour relier un service Internet ou une personne:
q Son adresse Internet. q Son numéro IP.
q Son adresse URL. Les trois méthodes sont équivalentes, la troisième est la plus en vogue
aujourd'hui.
a) Les adresses : Lorsque vous recherchez votre ami Dupont dans l'annuaire, vous regardez
d'abord la ville où il habite, puis s'il y a deux Dupont, vous départagez les Dupont par leur prénom. Dupont est donc identifié par son prénom, son nom et sa ville.
l'adresse: [email protected]
Réseaux constituants
Chapitre I Généralité sur Internet
Conception d’un site Web 8
Si vous ne recherchez pas Dupont mais le nom d'une société, vous n'avez que le nom de la société et sa ville à rechercher, sachant que dans la société en question Dupont travaille peut-être.
Sur Internet le nom d'un ordinateur centralisant plusieurs personnes est organisation.domaine
b) Les numéros IP : Il existe un équivalent des noms précédemment définis, c'est un numéro de 32
bits, que l'on écrit par quatre nombres séparés par trois points. Par exemple, 192.203.245.63 est une adresse TCP/IP donnée sous une forme
plus technique mais moins mnémotechnique que la précédente. Ce sont ces adresses que connaissent les ordinateurs qui communiquent entre eux. 0 8 16 24 31
0 1 0 ID. RESEAU ID. MACHINE
0 8 16 24 31
1 0 ID. RESEAU ID. MACHINE
0 8 16 24 31
0 ID. RESEAU ID. MACHINE
Là aussi on retrouve une certaine logique d'attribution de ces numéros. Le premier groupe de numéro peut être plus ou moins grand (on dit de classe A, B ou C), de telle sorte que plus on réserve de digits pour les premiers numéros, moins il en reste pour la
c) Les Adresses URL : Avec les dernières technologies, la tendance est de donner les adresses
directement sous la forme d'hypertexte ou d'URL. Donc une adresse URL est une adresse de la forme :
Classe A
Classe B
Classe C
service://machine/directory/fichier
Chapitre I Généralité sur Internet
Conception d’un site Web 9
Par exemple :
L'avantage de ce type d'adresse est qu'il englobe beaucoup plus d'informations que l'adresse, puisqu'il comprend:
q Le type de service. q L’emplacement sur le serveur. q Le nom du fichier.
Souvent le nom du répertoire d'accueil est omis ainsi que le nom du fichier, car le nom service://machine est non ambigu.
Ces adresses URL sont d'autant plus étonnantes qu'on les trouve au hasard dans la lecture des documents hypertextes.
Notons que par défaut votre lecteur de Web acceptera même des adresses URL sans les symboles http://. Ainsi l'adresse www.microsoft.com est suffisante pour se
rendre chez Microsoft. Ainsi on réservera les petits numéros de classe pour les très gros sous réseau
d'Internet et les grands numéros de classe pour les petits sous réseaux Internet. Ces numéros IP sont les numéros par lesquels les ordinateurs communiquent
entre eux. Mais ils ne peuvent pas être donnés arbitrairement puisque deux ordinateurs sur l'Internet ne peuvent pas avoir le même numéro.
C'est un organisme appelé NIC (Network Information Center) qui fournit les premiers numéros appelés racine du numéro IP, charge à l'administrateur de votre
réseau, de vous distribuer les numéros disponibles dans la plage de numéros attribués. Il est à noter que si vous avez une adresse qui vous identifie, par exemple
[email protected], les fournisseurs Internet qui possèdent un certain nombre d'accès inférieur à leur nombre de clients, peuvent vous attribuer une adresse
TCP/IP qui n'est pas fixe.
1.2.3 Le système de noms de domaine (DNS) : C’est un système de dénomination hiérarchique supporté par des serveurs de
noms qui reçoivent les données depuis une base de données distribuée. Sans le DNS nous serions sans doute obligés de taper à la place d’un nom, une
adresse numérique très compliquée. A l’heure actuelle, les serveurs de noms InterNIC (Internet Network
Information Center) supportent directement des nœuds, appelés domaines de plus haut niveau.
http://www.microsoft.com ftp://www.cern.fr/public
Chapitre I Généralité sur Internet
Conception d’un site Web 10
Par exemple : CODE PAYS OU SINIFICATION
Au Australie
Be Belgique
Fr France
De Allemagne
Dz Algérie
Ca Canada
Com Entre prise Commerciale
Edu Organisme éducatif
Gov Institution governmentale
Org Organisme non référé
Mil Site militaire
Net Prestataire des réseaux
Int Organisation internationale
I.3 Types de services : Il y a quatre façons principales d'utiliser l'Internet pour communiquer et
échanger de l'information, soit : q Le terminal d'ordinateur à distance. q Le courrier électronique. q Les groupes de discussions. q Le transfert de fichiers.
Le terminal d'ordinateur permet d'accéder à un ordinateur et de lui demander d'exécuter des logiciels, pour effectuer des tâches ou accéder à des banques de données.
Le courrier électronique est plusieurs fois plus rapide que le courrier ordinaire et a l'avantage d'être indirectement gratuit. Il est aussi possible de s'envoyer des fichiers (documents, images, sons), transformant un message en colis électronique. Le courrier électronique permet aussi de participer à des forums spécialisés sur les sujets les plus divers. Ils existent sous deux formes principales: les LISTSERVs et les NewsGroups.
Le transfert de fichiers permet l'échange de fichiers entre individus et la mise sur pied de serveurs publics pour la diffusion de logiciels et de documents.
Chapitre I Généralité sur Internet
Conception d’un site Web 11
I.3.1 Les services d’Internet : Internet offre plusieurs services à ses usagers, et pour y accéder, l’usager doit
disposer des logiciels-clients adéquats. Parmi ces services nous citerons: E-mail: La messagerie électronique est le service Internet le plus utilisé. Elle
représente environ 55% du trafic total. Chaque jour, des millions de messages sont envoyés vers des boites aux lettres numériques de tous les
Usenet : Il s'agit là d'un ensemble de sujets soumis à discussion. Ces groupes de
discussion (newsgroups ou groupes de news ) sont ouverts à tous, et les thèmes traités
Gopher : Un gopher est un système qui affiche un document et des répertoires
Internet comme des options de menus. Nous faisons un choix dans le menu et le Gopher affiche, soit un document, soit un autre menu, ou bien nous transfère sur un autre Gopher.
HTTP: Ce protocole commande l’échange des fichiers entre navigateur Web et
le serveur. Nous devons l’utiliser à chaque fois que nous voulons renvoyer à un autre document Web.
Telnet : Telnet est un protocole de connexion qui permet, à partir d'un micro-
ordinateur ou d'un terminal, de se connecter à distance sur un serveur pour une utilisation en mode local.
Telnet nous permet donc d'utiliser un ordinateur à distance. Il arrive souvent que les bibliothèques proposent ce service : nous nous connectons à l'ordinateur de la bibliothèque et nous consultons directement son catalogue. Pour des raisons de sécurité, les accès Telnet sont généralement privés et destinés aux administrateurs des serveurs et à certains utilisateurs.
FTP : Permet d'effectuer des transferts de fichiers sur une machine distante.
Cependant, certains sites acceptent la connexion d'utilisateurs non référencés : c'est le FTP anonyme. Un serveur FTP anonyme est une machine sur laquelle sont stockés des fichiers mis gratuitement à la disposition de tous les utilisateurs de l'Internet. FTP est le mécanisme idéal pour faire passer les fichiers HTML créés sur notre ordinateur à
Les fichiers stockés sur les sites FTP sont la plupart du temps compressés. Une
fois le fichier récupéré sur votre ordinateur, il va vous falloir le décompresser pour l'exploiter.
Chapitre I Généralité sur Internet
Conception d’un site Web 12
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.
Chapitre I Généralité sur Internet
Conception d’un site Web 13
q Certains paquets se perdent en route. q Certains paquets arrivent plusieurs fois.
À la base du fonctionnement de l'Internet, on trouve les deux protocoles de communication TCP et IP, l'usage est de parler de TCP/IP, toutes les machines
raccordées partagent ces protocoles. IP sert d'intermédiaire entre les protocoles applicatifs et les protocoles de
transmission de bas-niveau comme Ethernet, FDDI, HDLC...etc. IP peut donc
fonctionner sur des liaisons à faible ou à haut débit. L'information à transmettre est découpée en paquets de petite taille. Chaque paquet, outre l'information qu'il est chargé de délivrer, possède l'adresse de l'émetteur ainsi que celle du destinataire. Pour atteindre son destinataire, un paquet passera d’un routeur (commutateurs de paquets) à l’autre... jusqu'à destination. Les machines possèdent un identificateur unique (le
IP), il est représenté par quatre octets, un découpage logique interne permet de numéroter les réseaux, les sous réseaux et enfin les machines. Les plages de numéros
IANA ( Internet Assigned Number and naming Authority) par le
biais de relais nationaux. Il n'y a pas (en principe) un chemin unique pour acheminer les paquets d'un
émetteur vers la machine destinataire. Les routeurs du réseau gèrent des tables de routage pour créer des chemins vers les différents réseaux qui constituent l'Internet.
Les paquets destinés à une même application, peuvent emprunter des chemins différents, arriver dans le désordre, très exceptionnellement être perdus. IP assure la
traversée du réseau, mais n'assure pas le contrôle de la transmission. Une nouvelle version de l'adressage IP, connue sous le nom de IPNG ( IP New
Generation), devrait permettre à l'Internet de continuer sa croissance.
I.4.3 Interface entre TCP et IP : L’utilisateur de IP (en générale TCP ou UDP) dispose de deux primitives.
Emission et indication de réception q la primitive émission et accompagnée de principaux paramètres correspondant
aux divers champs du data-gramme IP :
§ Adresse source et adresse destinataire. § Numéro du protocole. § Services utilisés. § Identification du paquet. § Autorisation du paquet. § Durée de vie. § Longueur des données.
Chapitre I Généralité sur Internet
Conception d’un site Web 14
§ Options. § Données reçues.
q La primitive indication de réception fournit au récepteur les paramètres suivants : § Adresse source et adresse destinataire. § Numéro du protocole. § Indicateur de type de service. § Longueur de données reçues. § Options. § Données reçues.
I.4.4 Répartition des services entre TCP et IP : Le protocole TCP assure les fonctions suivantes :
q Transmission de données de taille quelconque en mode orienté connexion.
q Restitution des messages dans l ‘ordre. q Multiplexages de plusieurs communications sur une seule connexion. q Contrôle de flux. q Retransmission en cas d’erreur.
Le protocole IP assure les fonctions suivantes : q Transmissions de données en mode sans connexion. q Routage des données par l’intermédiaire de passerelles. q Fragmentation des données quand leur taille n’est pas limitée.
Chapitre II Le Web
Conception d’un site Web
16
Introduction :
le confond souvent avec l’Internet, alors qu’il n’en constitue qu’une ressource parmi Le mot Web désigne en anglais la toile d'araignée, donc World Wide Web
désigne la toile d'araignée mondiale. Le World Wide Web est la communauté des serveurs utilisant le protocole HTTP pour donner accès à des documents de type hypertexte écrits en format HTML. Il est, depuis 1993, le service Internet le plus populaire, en ce moment même de nouveaux clients et serveurs se raccordent au Web. Tous les services en ligne offrent ou offriront sous peu un accès WWW. Les dernières estimations attribuent 85% du trafic Internet au WWW.
Ce chapitre donne un bref aperçu des concepts de client, de serveur et de protocole utilisé pour le World Wide Web. Nous y découvrirons aussi le
II.1 Définition Le World Wide Web est un système de document Hypermédia distribué. Il a
été développé au CERN (centre européen de recherche en physique nucléaire) par Tim Berners-Lee en 1989. Ce système fonctionne en mode Client/Serveur. Les logiciels clients ou navigateur WEB ou encore browser en anglais utilisent le protocole de communication HTTP (Hypertext Transfert Protocol) pour accéder via le réseau Internet au document hébergé sur un serveur WEB distant. Ces documents sont représentés à l’aide d’un langage de description des pages, le HTML (Hypertext Markup Language). Ce langage, dit à balises, permet de doter certains mots ou images d'une propriété d'hyperlien. Ces liens sont indiqués visuellement sur la page d’écran, et un simple clics au-dessus permet de se connecter au site possédant l’information sous-jacente.
II.2 Les outils du Web Les outils clients d’accès au WWW sont Netscape, Internet Explorer et Mosaic
les plus connus pour les terminaux intelligents, mais il y en a d’autres, comme Cello, et Lynx pour les terminaux en mode ligne. Netscape, créé au NCSA (National Centre for Supercomputing Application) est comme Lynx de l’unlogiciel gratuit (freeware) et qui, comme le serveur WWW, tourne sur toutes les plates-formes et sous la plupart des systèmes d’exploitation existants. Netscape donne accès à des textes comportant des liens hypermédia, qui par cliquage, vont rechercher
Chapitre II Le Web
Conception d’un site Web
17
et afficher d’autres médias (textes, images, sons, vidéos) qui se trouvent soit sur le même ordinateur que celui où se trouve le texte d’origine soit peut-être sur un ordinateur situé dans l’hémisphère opposé. Les liens hypermédia peuvepermettre l’accès direct à une autre partie du même texte.
Les documents hypermédia se présentent comme des pages défilantes d’un livre électronique en ligne. Quand l’utilisateur est dans un document, il peut passer par un simple clic de la souris sur un mot ou groupe de mots à une autre partie de ce document "constituant ainsi un lien hypermédia" ou à un autre document situé dans le monde Internet, éventuellement près de chez lui ou peut-être dans un autre pays.
II.2.1 Les pages Web Une page Web appelée aussi page HTML, est un document qui sera chargé en
un seul bloc par le client Web puis affiché pour sa lecture. Une page Web peut être aussi longue qu’on le désire. Les pages Web peuvent être créées avec un éditeur de langage HTML ou simplement avec n’importe quel éditeur de texte. Lors de sa création, une page Web est sauvegardée sous le nom d’un fichier portant l’extension. HTML ou HTM.
a) L’URL, un principe de navigation Les URL (Uniform Resource Locators) sont les noms donnés aux hypertextes.
Un URL est le moyen unique pour localiser toute source d’information sur le WWW car chaque organisation possède son propre identificateur. Un URL peut être un serveur ftp, un fichier sur notre disque dur, un serveur gopher, une image, une adresse courrier, un serveur de News, un serveur telnet et bien sûr un serveur http ou un serveur Web.
b) La syntaxe des URL : Même s'il est invisible pour l'utilisateur, l'URL est essentiel pour le
fonctionnement du WWW. La syntaxe de l'URL est cependant simple et universelle, soit:
Bien que créé avant tout pour supporter les documents de type hypertexte, le
WWW est conçu pour donner accès à tous les services traditionnels de l'Internet, comme les News, le Gopher ou le FTP. Le premier élément de l'URL indique le nom du type de service. Cet élément doit se terminer par un deux-points.
Le second élément de l'URL est l'adresse de l'hôte. Il débute toujours par deux barres obliques, et se termine avant la prochaine barre oblique. Il peut parfois se
Chapitre II Le Web
Conception d’un site Web
18
terminer par un deux-points suivi d'un chiffre, indiquant alors une connexion sur un port non standard.
Le troisième élément de l'URL indique la localisation du document, relativement à la position du répertoire racine du serveur. Tout ce qui se trouve entre des barres obliques est un élément du chemin d'accès au document, tandis que ce qui se trouve après la dernière barre oblique constitue le nom du document.
Le nom du document se termine par une extension, qui indique de quel type de document il s'agit.
On peut aussi trouver un signe cardinal (#) suivi d'un mot après le nom du fichier. Cette indication est un pointeur vers une localisation particulière à l'intérieur d'un document. Le type de connexion, appelé aussi méthode de connexion, peut être :
q HTTP pour accéder à un serveur http Exemple : http : //www.ALLHTML.com/defaut.html q FTP pour transférer des fichiers. Exemple : ftp : // ftp.itoran. DZ /machine q NEWS pour les forums de discussion. Exemple : news : comp.infosystems.www.users q GOPHER pour les serveurs gopher. Exemple : gopher : //gopher.entreprise.dz q WAIS pour les interrogations de base de données Exemple : wais : // info.bib.dz
II.2.2 Les Hyperliens : Le Web utilise des liens graphiques interactifs. Chaque page Web est reliée
d’autres pages Web par des Hyperliens (mots, phrases, graphiques ou Images). Chaque hyperlien fait référence à une adresse Web d’une page, contenant des informations supplémentaires sur un sujet précis. En cliquant simplement sur une rubrique dans un Browser, il est possible d’accéder à la page sélectionnée. Quand on clique sur un hyperlien, une demande est transmise au serveur Web approprié pour une récupération instantanée d’informations, et cela n’importe où dans le monde.
La figure si-après donne un exemple sur les possibilités de navigation dans un document en utilisant la méthode des hyperliens.
Chapitre II Le Web
Conception d’un site Web
19
II.3 Structure du réseau WWW II.3.1 L’approche Client/Serveur : Le Web fonctionnant en client/serveur, il est nécessaire qu’un protocole
commun permette les échanges entre le logiciel client et le serveur Web. Ce protocole au-dessus des protocoles TCP et IP s’appelle le HTTP. Le principe est simple :
q Le client demande une connexion vers le serveur à l’aide d’une requête GET avec pour paramètre le document demandé.
q Le serveur accepte la connexion et fournit au client le document dont l’adresse est l’URL demandé.
q Le serveur coupe la connexion. Note : L’échange entre le serveur et le client est sans état. Il n’y a donc pas de
connexion permanente. Le client et le serveur n’occupent la ligne que durant le
a) Le Client Web : Le client Web, appelé aussi Navigateur ou Browser, peut être soit un PC, soit
un Macintosh ou une plate-forme Unix. Les requêtes sont lancées à partir du client Web, la réponse qui est constituée d’un document HTML sera analysée par le client Web puis affichée à l’utilisateur. Le client Web n’a pas besoin de connaître le nom du
hyperliens Une page
Navigation dans le Web
Chapitre II Le Web
Conception d’un site Web
20
système ou résident les informations. Du point de vue de l’utilisateur, la connexion s’effectue de façon totalement transparente.
b) Le Rôle du client : Un client à deux rôles essentiels :
q Il doit être capable, à partir d’une information concernant une adresse sur Internet, de localiser cette information ou d’opérer de la façon indiquée par le contenu du pointeur. En ce qui concerne les documents en hypertexte, cela signifie qu’il doit pouvoir parler au serveur au moyen du protocole HTTP. Comme le Web peut également gérer des informations de sites FTP, Gopher, etc. Il doit aussi être capable de parler leur langage.
q Il doit pouvoir traiter des documents en hypertexte. Chaque page Web chargée constitue un document isolé écrit dans un langage HTML qui renferme non seulement le texte du document proprement dit, mais aussi sa mise en page, sa structure, les liens éventuels vers d’autres documents, les images, les sons etc. Le client parle à un serveur Web sur le réseau et ce dernier lui envoie un document. S’il s’agit d’un fichier HTML, il interprète alors le code HTML contenu dans ce document pour formater, puis afficher, convenablement les informations qu’il vient de recevoir. De même, c’est lui qui va exploiter les liens vers d’autres serveurs.
c) Le serveur Web : Le serveur Web, dénommé aussi serveur HTTP-D (Hypertext Transfer Protocol
Daemon) est au sens d’Unix, un processus qui tourne sur une plate-forme (PC, Macintosh, Unix) et qui attend des requêtes en provenance du client Web.
Le serveur transmet au client des données au format HTML
Protocole HTTP
Demande de documents
Documents demandés : HTML, Texte,Images (GIF, JPEG), Applets Java, etc.
serveur client
Chapitre II Le Web
Conception d’un site Web
21
HTTP sert à transmettre des documents Web réclamés au serveur par le navigateur. Contrairement à FTP, la connexion ici est temporaire. Elle s’interrompt dès que la transmission est effectuée, sans demander confirmation à l’utilisateur. Il peut arriver que plusieurs liaisons HTTP mènent parallèlement au même ordinateur. C’est
ent le cas lorsqu’un document HTML contenant plusieurs « Inline Image » est chargé. Le document proprement dit, ainsi que chacune des images sont transmis par une connexion distincte. On peut régler, dans la plupart des navigateurs, le nombre maximal de connexions simultanées, ainsi établies. En principe, l’utilisateur d’un navigateur Web ne peut pas intervenir directement sur la connexion HTTP que le logiciel est en train d’établir. Les commandes permettant de guider la connexion HTTP restent le plus souvent cachées aux yeux de l’utilisateur Web. Le navigateur assure à lui seul la communication Internet. C’est ce qui rend le Web si convivial et indulgent. Le numéro de port donnant accès aux serveurs HTTP est 80.
La communication sur le Web peut être rés : q Le navigateur détermine l’URL. q Il demande au DNS l’adresse IP correspondante. q Le DNS renvoi cette adresse. q Le navigateur établit une connexion TCP avec le port 80 du
serveur de cette adresse. q Il envoie alors la commande GET du fichier demandé. q Le serveur envoi le fichier. q La connexion TCP est libérée. q Le navigateur interprète le fichier HTML et affiche la page. q Le navigateur demande une nouvelle connexion pour afficher
chaque image de cette page.
II.3.2 Comment se connecter ? Le Web est constitué de centaines de milliers de serveurs connectés entre eux
(figure suivante) Pour se connecter à ce réseau, il faut normalement passer par l’intermédiaire d’un fournisseur d’accès, accessible à travers la ligne téléphonique. Le WWW est un ensemble de clients et de serveurs qui admettent le protocole HTTP, comme protocole d'échange d'informations entre ses clients et ses serveurs. Il existe de nombreux fournisseurs d’accès susceptible de procurer au client un nom d’utilisateur et un mot de passe. La facturation se fait généralement selon le temps de connexion sur le serveur du fournisseur d’accès, point de passage obligé pour l’accès au réseau. Des services complémentaires sont souvent proposés comme une adresse de
gerie. La connexion à un fournisseur d’accès implique
Chapitre II Le Web
Conception d’un site Web
22
la disponibilité de certains logiciels sur le poste client, souvent proposés par le .
L’application essentielle pour accéder au Web est un explorateur ou navigateur Internet, application qui présente les pages du Web dans une fenêtre de Windows ou d’un autre système d’exploitation.
Les principaux explorateurs disponibles sont Internet Explorer de Microsoft et Navigateur Netscape.
Ces logiciels impliquent l’existence de couches de communication pour effectuer la connexion avec le fournisseur d’accès. Par exemple, sous Windows 95, ou Windows 98 on peut utiliser l’Explorateur Internet de Microsoft pour l’exploration, il est disponible gratuitement, et Microsoft Network, qui est livré avec Windows 98, pour réaliser la connexion au fournisseur d’accès Microsoft (MSN). La connexion peut aussi être réalisée avec le logiciel d’accès réseau à distance de Windows 98.
II.3.3 Les informations du Web Le Web supporte des documents Hypertextes et Hypermédias, y compris les
graphiques, les sons et la vidéo.
a) L’organisation des pages Web : Pour développer un serveur Web, il faut prendre en considération :
q La présentation Web : cette présentation constituée d’une ou plusieurs pages Web contenant du texte ou des images, liées entre elles de façon justifiée et qui globalement, proposent un ensemble d’informations qui donnent l’impression d’un ensemble cohérent.
q La page d’accueil : cette page est la racine du serveur Web. A partir de cette page, les lecteurs peuvent pénétrer dans le serveur Web. Elle contient généralement une vue d’ensemble de ce que nous allons trouver dans le serveur Web.
II.4 Les Web chercheurs d’information :
Il existe des Web spécialisés dans la recherche d'information sur l'Internet. Ces Webs sont couplés avec des bases de données qui sont alimentées en permanence.
Ils permettent de retrouver n'importe quel type d'information, que ces informations soient stockées sur un Web ou sur un serveur ftp. En pratique, ils sont presque exhaustifs dans le monde des Web, et encore assez pauvres dans le monde des serveurs ftp.
Chapitre II Le Web
Conception d’un site Web
23
Il est important que vous mettiez un de ces chercheurs dans notre liste de pages favorites après les avoir utilisés et choisi celui qui nous convenait le mieux.
a) Principe de fonctionnement Le but de cette section est de s'intéresser au mode de fonctionnement de ces
différents moteurs de recherches.
D’un point de vue théorique :
Les moteurs de recherche, au sens véritable du terme, sont ceux qui effectuent eux-mêmes la recherche et l'indexation des pages Web sans intervention humaine.
Les sites d'indexation automatique, comprennent tous : q Une base de données. q Un logiciel de mise à jour de cette base de données.
Ces logiciels de mise à jour, sont appelés Robots, nom qui indique bien qu'ils correspondent à des programmes automatiques.
Un robot est un programme simple dans le principe, mais que les optimisations rendent complexes dans leur programmation.
Serveur Web + indexeur
+moteur de recherche
Client Internet
Un moteur de recherche Internet
Données : Fichier HTML, Word, PDF, base de données, etc
Chapitre II Le Web
Conception d’un site Web
24
Tout d'abord, ces programmes ont deux missions essentielles : q Lire l'information et la gérer. q Chercher dans ces informations d'autres adresses où aller
chercher. La première de ces deux étapes est facilement compréhensible; elle permet de
faire de l'indexation textuelle qui revient à mémoriser des mots clés, éventuellement les phrases dans lesquelles ils apparaissent et surtout leur localisation, c'est-à-dire leur adresses URL.
La recherche des mots clés se fait par des logiciels comme Glimse, agrep ou free Wais qui sont plus ou moins performants et qui ont des fonctionnalités plus ou
Ces logiciels lisent donc un fichier et mettent dans un index les mots lus dans
le fichier. Dans cette lecture, ils analysent parmi les mots rencontrés, les adresses d'URL,
aître de nouvelles adresses de Web à explorer par la suite. Cette analyse doit être assez fine pour prendre en compte les aspects suivants :
q Mémoriser l'adresse IP du site trouvé et les noms des fichiers correspondants, pour éviter la redondance et le bouclage des noms de serveur.
q Ne pas appeler les programmes CGI, les pages ISINDEX afin de ne pas provoquer des requêtes intempestives. De même les URL mailto:, ou telnet: ne sont pas exécutées.
q Mémoriser les dates de visite des pages de manière à ne plus repasser pendant une durée paramétrée.
C'est ainsi que les programmes de recherche scrutent en permanence Internet. Et lorsque vous demandez à Lycos de chercher un mot clé, il effectue la recherche non pas sur Internet mais dans son fichier de recherche.
Chapitre III HTML
Conception d’un site Web
26
III.1 Historique World Wide Web (W.W.W.) est née à la fin des années 80 au
laboratoire européen de Physique des particules du CERN. L’objectif initial était de rendre le résultat des travaux de recherche accessibles du monde entier sur un réseau appelé à l’époque la "mère de tous les réseaux" : Internet. Les protocoles de communication existants comme Telnet et le FTP ne permettaient pas la mise en page des documents à transmettre car ceux-ci devaient être visuellement attrayants, pourvus
éments multimédias et accessibles en tant que documents Hypertextes. Jusqu’en 1990, l’accès aux informations de ce réseau exigeait une bonne
connaissance technique. Cette opération était tellement compliquée que même des physiciens rencontraient de grandes difficultés pour échanger des données. Un de ceux-ci, le célèbre Tim Berners-Lee, a créé une méthode pour relier avec facilité des documents à l’aide de lien hypertexte. L’idée n’était pas nouvelle mais son langage HTML simple a réussi là où des projets hypertexte ambitieux avaient échoué.
Jusqu’en 1993, près de cent ordinateurs furent équipés à travers le monde pour fournir des pages HTML. Ce progrès a permis de communiquer à l’aide du langage HTML dans des domaines aussi variés que l’éducation.
Les pages conçues avec le langage HTML ou Hyper Text Markup Longuage ou encore langage à balisage hypertexte constituent aujourd’hui le système de base d’Internet. Elles offrent une grande variété d’applications. Elles peuvent inclure du texte ainsi que des graphiques fixes ou animés, du son, de la vidéo et même des programmes interactifs complets (à l'aide de Java ou Java script). Le HTML ne se rencontre pas exclusivement sur le Web, celui ci est également utilisé pour les
-ROM multimédia et du nouveau format haute capacité DVD (Digital Versatile Disk).
III.2 Généralités : Le HTML n’est pas un langage de programmation, à proprement parlé, mais
plutôt un ensemble relativement simple de commandes de mises en forme de documents et de liens vers d’autres documents (texte images, vidéo, base de données ou programme quelconque) qui peuvent se trouver sur le même serveur ou sur un autre serveur.
Pour les serveurs peu importe le type d’ordinateur ou navigateur (browser en anglais) recevant les informations codées en HTML. Tous les navigateurs savent interpréter les balises HTML et s’en servir pour déterminer la structure du document en d’autres termes le titre, les sauts de paragraphes, l’emplacement des images …etc.
Chapitre III HTML
Conception d’un site Web
27
Un simple éditeur de texte ASCII suffit pour l’écriture ou la lecture d’un document HTML. Donc un document HTML n’est rien de plus qu’un texte ASCII dont le nom possède l’extension HTML ou HTM selon le système d’exploitation
: Le langage HTML a déjà une histoire donc plusieurs versions et à cet effet les
concepteurs professionnels identifient trois types de pages HTML : 1. Les pages de première génération qui utilisent l’ancienne version 1.0 de
HTML sont en principe constituées de texte aimages peu attractives.
2. Les pages de seconde génération qui utilisent quelques éléments de HTML 2.0, 3 et 3.2, comme les fonts de page, le cadrage du texte dans les tableaux et les formulaires de commandes en ligne.
3. Les pages de troisième génération qui correspondent au langage HTML 4.0 standard actuel au moment de la rédaction de ce projet.
a) Un langage à balises : Les commandes HTML sont appelées tags en anglais, ce qui est souvent traduit
par marqueur ou balise. Voici les différents types de balises HTML qu’on rencontre : q Balises de définition contenant des méta-informations telles que
<HEAD> ou <TITLE>. q Balises de mise en forme (formatage) du document telles que par
exemple <B> <I> ou <TABLE>. q Balises de liens telles que <A HREF>. q Balises d'insertions de fichier multimédia.
b) Format des balises : Une balise est constituée d’un ou plusieurs mots clés encadrés par les deux
: Aucun espace ne doit figurer à l’intérieur d’une balise. Ces derniè res peuvent
être écrites indifféremment en majuscules ou en minuscules. Il existe deux types de balise :
<TITLE>, <H1>, <P>,…etc.
Chapitre III HTML
Conception d’un site Web
28
q Les balises monolithiques qui apparaissent telles quelles, dans un contenu se suffisent à elles-même. Les balises de fermetures sont facultatives.
Par exemple :
Cette balise indique une rupture de paragraphe. q Les balises conteneurs formées d’une balise initiale et d’une balise
terminale, elles délimitent une partie du contenu et en spécifient l’aspect, la signification ou le traitement à y appliquer. Par exemple :
Le navigateur affichera le texte centré dans l’écran d’affichage. Les deux
balises extrêmes sont identiques à un détail près. Le mot clé de la balise terminale est
Certaines balises peuvent recevoir des paramètres, ceux-ci sont indiqués à l’intérieur des signes “<” et “>”, après le nom de la balise de début. Chaque paramètre comprend un nom, suivi du signe “=” et de sa valeur.
c) Documents HTML : L’ensemble du fichier est placé à l’intérieur d’un conteneur <HTML>. Il est
composé de deux grandes parties qui apparaissent dans cet ordre : q L’en-tête du document. q Corps du document.
Exemple :
<P>
<CENTER> Ce texte est centré </CENTER>
Chapitre III HTML
Conception d’un site Web
29
La balise < !DOCTYPE...> doit figurer avant la balise <HTML> du document principal (ou de chaque page du projet, mais ce n'est pas obligatoire). Elle permet d’indiquer le niveau de conformité du document avec la version du HTML. Voici quelques exemples de déclarations possibles :
Commande. Version HTML.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD Level1//EN"> HTML 1.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> HTML 2.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> HTML 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> HTML 4.0
c.1) En-tête du document : -tête du document est placé dans un conteneur <HEAD>. Il comporte des
données importantes sur le document lui-même, dont une seule information est affichée dans la barre du titre du browser (conteneur <TITLE>).
L’ensembles des balises essentielles qui peuvent figurer dans l’en-tête d’un document HTML sont :
� Balise <TITLE>
La balise <TITLE> permet de donner un titre à un document HTML. Il apparaît
dans une zone spéciale de la partie supérieure du browser (barre de titre). Nombre maximal de caractères est 100. Par exemple :
� Balise <BASE…> La balise monolithique <BASE> indique une adresse de base qui complètera
tous les chemins relatifs. Ses paramètres sont les suivants : q HREF indique l’URL du document. q TARGET indique le nom d’un cadre (frame).
� Balise <ISINDEX …>
La balise monolithique <ISINDEX> indique au logiciel client qu’il est possible d’effectuer une saisie pour interroger un programme externe. Les paramètres possibles sont :
<TITLE>Projet_site</TITLE>
Chapitre III HTML
Conception d’un site Web
30
q ACTION indique le nom de l’application ou de la DLL sur le serveur
permettant d’effectuer la recherche. q PROMPT permet d’afficher le texte du message devant les champs
de saisie. � Balise < META …> La balise < META > permet de fournir au serveur, des informations sur le site
Web par le biais de mots clés afin que les moteurs de recherche le référencent au mieux. Pour plus d’information voire annexe B.
� Balise < LINK …> La balise < LINK> permet de définir un lien entre un document et un autre. � Balise <NEXTID …>
Identificateur utilisé lors de la génération automatique de page HTML. Il Indique le document suivant.
c.2) Corps du document : Le corps du document, placé dans un conteneur <BODY>, comprend le contenu
significatif du document c’est à dire les données à afficher, tels que le texte, les images, les liens…etc.
Par défaut le fond du document est gris clair, les caractères sont noirs, les prises d’hypertextes sont bleues quand elles n’ont jamais été utilisées, violettes dans le cas contraire, rouge à l’instant de la sélection (dans le cas de NETSCAPE) .
Il est possible de modifier ces paramètres d’affichages en ajoutant à la commande BODY les attributs suivants :
ATTRIBUTS
ALIGN Permet de spécifier l'alignement du document (LEFT, CENTER,
RIGHT ou JUSTIFY). Uniquement I.Explorer.
ALINK Permet de spécifier la couleur des liens actifs.
BACKGROUND Permet de spécifier l'image d'arrière-plan (format gif ou jpeg).
BGCOLOR Permet de spécifier la couleur d'arrière-plan (voir annexe A pour la
codification des couleurs).
BGPROPERTIES Si la valeur est FIXED, le fond reste fixe lors du déroulement du
Chapitre III HTML
Conception d’un site Web
31
document. Uniquement I.Explorer.
CLASS Nom de la classe donnée à la feuille de style.
LEFTMARGIN Permet de spécifier une marge de gauche pour le document (en pixel).
LINK Permet de spécifier la couleur des liens.
SCROLL Permet de désactiver les barres de défilement du navigateur (valeur :
no). Uniquement I.Explorer.
STYLE Feuille de style intra-ligne.
TEXT Permet de spécifier la couleur du texte.
TOPMARGIN Permet de spécifier une marge supérieure pour le document (en pixel).
VLINK Permet de spécifier la couleur des liens visités.
EVENEMENT Spécifie un événement Javascript (HTML4.0) (OnClick,
OnMouseOver,...).
Exemple:
Resultat:
c.3) Commenter un document : On peut commenter le code source du document sans que le navigateur affiche
ce commentaire, cela peut s'avérer pratique quand plusieurs personnes travaillent sur le même projet. Cette instruction est aussi utilisée lors de l'écriture d'un script Javascript pour cacher le code aux navigateurs non compatibles.
Pour se faire on utilise le marqueur < !-- (ou <COMMENT>) indique le début d’un commentaire et --> (ou </COMMENT>) la fin du commentaire.
Par exemple :
<BODY BGCOLOR="#FF9900" TEXT="#0000FF" LINK="#FF0000" VLINK="#FF0000" ALINK="#FF0000">
Ici le fond est orange. Le texte est bleu.
<!-- Ceci est un commentaire. --> Ceci n’est pas un commentaire. <COMMENT> Ceci est aussi un commentaire </COMMENT>
Chapitre III HTML
Conception d’un site Web
32
c.4) Options de base de la mise en forme : Tout fragment de texte qu’on veut afficher avec un enrichissement doit être
placé dans un conteneur qui en délimite le début et la fin.
Mise en forme des paragraphes La balise monolithique <P> termine un paragraphe et insère une ligne vide
après le paragraphe (double saut de ligne). Elle peut être également utilisée pour insérer une ligne vide après une image. Elle possède l'attribut ALIGN qui sert à aligner le texte ou les images, il prend 4 valeurs :
1. LEFT : Aligne le texte sur la marge de gauche. 2. RIGHT : Aligne le texte sur la marge de droite. 3. CENTER : Centre le texte entre les marges. 4. JUSTIFY : Justifie le texte.
La balise <P> possède aussi les attributs suivant :
q CLASS : Nom de la classe donnée à la feuille de style. q STYLE : Feuille de style intraligne. q WIDTH : Permet de spécifier la largeur (en colonnes) de la page
HTML. q EVENEMENT : Spécifie un événement Javascript (HTML4.0)
(OnClick, OnMouseOver,...). L'attribut NOWRAP permet de ne pas effectuer de retour à la ligne. La balise monolithique <BR> effectue un retour à la ligne (simple espace) en
respectant les marges, elle possède l'attribut CLEAR, qui prend une des trois valeurs : LEFT, RIGHT, ALL, permettant d'insérer un retour à la ligne dès que la marge (gauche, droite ou les deux) est libre, il sert aussi à mettre des images autour du texte.
La balise <NOBR> … </NOBR> permet de ne pas effectuer de retour à la
ligne, elle indique au navigateur que la ligne ne doit pas être coupée, même si elle est trop longue, mais la commande <WBR> permet de forcer un retour de ligne dans un texte encadré par <NOBR>.
� Balise <HR …> La balise monolithique <HR> permet d’insérer des lignes horizontales ou filets
horizontaux, son utilisation s’avère très pratique pour séparer les différentes parties d’un document. Elle possède plusieurs attributs qui permettent de modifier la forme du trait :
Chapitre III HTML
Conception d’un site Web
33
q ALIGN : impose la position horizontale du trait (left/right/center). q SIZE : la largeur du trait en pixels (de 1 à 10). q WIDTH : Spécifie la largeur de la ligne (en pixels ou % de la
q NOSHADE : S'il est présent, l'effet d'ombre (3d) est annulé. q COLOR : Spécifie la couleur de la ligne (uniquement I.Explorer).
� Balise <CENTER> . . . . </CENTER>
La balise <CENTER> permet de centrer plusieurs éléments sur une page (titres,
textes, images, filets, ...). � Balise <DIV> La balise monolithique <DIV> permet de définir l'alignement de plusieurs
éléments. Elle possède l'attribut ALIGN qui prend 4 valeurs : (elle peut donc remplacer la balise <CENTER>.)
q LEFT : Aligne le texte sur la marge de gauche. q RIGHT : Aligne le texte sur la marge de droite. q CENTER : Texte centré. q JUSTIFY : Texte Justifié.
A noter que depuis la version 4.0 du HTML, la balise <DIV> accepte l'attribut STYLE (feuilles de styles).
� Balise <BLOCKQUOTE > . . . </BLOCKQUOTE > La balise <BLOCKQUOTE > permet de créer un retrait dans la marge de
gauche. Comme les balises <CENTER> et <DIV>, tout élément compris entre les balises d'ouverture et de fermeture bénéficiera de ce retrait.
� Balise <BLINK> . . . . </BLINK>
Pour faire clignoter le texte. En effet tout texte compris entre les balises <BLINK> et </BLINK> sera affiché avec clignotement.
� Balise <PRE > . . . . </PRE >
Les espaces (plusieurs à la suite), tabulations, retour chariot en HTML. Alors pour remédier à ce problème c’est à dire inclure un texte pré -formaté dans un document HTML on utilise la commande <PRE> . . . . . </PRE>. En effet tout texte compris entre les balises <PRE> et </PRE> sera transcrit de la même façon.
Chapitre III HTML
Conception d’un site Web
34
Cette balise possède l'attribut WIDTH qui permet de spécifier la largeur (en colonnes) de la page. Cet attribut peut prendre 3 valeurs :
1. 40 2. 80 (par défaut) 3. 132.
Mise en forme des caractères : Tailles de polices grasses : � Balise <Hn…> La balise <Hn> (Head) permet de définir le titre d'en-tête de H1 (premier
niveau de titre - texte plus large) à H6 (dernier niveau de titre - texte plus petit). Cette commande possède les mêmes attributs que la commande <P>. Un saut de page est
automatiquement généré après un titre. Par exemple :
Résultat avec I.Explorer :
Les polices de caractères :
� Balise <BASEFONT…>
<H1>Titre de niveau 1</H1> <H2>Titre de niveau 2</H2> <H3>Titre de niveau 3</H3> <H4>Titre de niveau 4</H4> <H5>Titre de niveau 5</H5> <H6>Titre de niveau 6</H6>
Chapitre III HTML
Conception d’un site Web
35
La balise monolithique <BASEFONT…> permet de définir la police standard
dans l’ordre utilisée dans le document, cependant pour que ce dernier soit visualisé correctement (c'est à dire avec la police définie), il faut essayer d'employer une police standard (Arial, courrier...) à toutes les plates-formes, sinon la police paramétrée par défaut sur le navigateur de chaque visiteur sera affichée.
La balise <BASEFONT > possède plusieurs attributs :
q FACE : Permet de définir par ordre de priorité, les noms des polices. q SIZE: Permet de définir la taille de la police de 1 à 7 (valeur par
A noter qu'il peut être utilisé de deux manières:
§ Absolue ex : SIZE=2 § Relative ex : SIZE= +2
q COLOR : Permet de définir la couleur du texte (soit avec le nom de la couleur ou la valeur hexadécimale correspondante).
Par exemple :
� Balise <FONT…> . . . . <FONT> La balise <FONT> permet elle aussi de modifier la taille ou la couleur de la
police de caractère, et elle emploie les mêmes attributs que la balise <BASEFONT>. En réalité elle est identique à la balise <BASEFONT> à un détail près.
suivant a le même effet que l’exemple précédent :
Mise en forme logique : A utiliser de préférence car elles laissent les logiciels clients WWW interpréter
le formatage du texte. Pour utiliser ces balises, il suffit d'entourer le texte avec la balise d'ouverture choisie et la balise de fermeture correspondante.
Voici toutes les commandes de mise en forme logiques : q <EM> texte < /EM> met le texte généralement en italique. q <STRONG> texte < /STRONG/> met le texte généralement en gras. q <CODE> texte < /CODE > pour l’utilisation d’une police à chasse
fixe. q <SAMP> caractère </SAMP> séquence de caractères littéraux. q <KBD> saisie < /KBD > pour mettre en évidence une saisie de
<FONT FACE="Impact, Verdana" SIZE=2 COLOR="green"> texte . . . </FONT>
<BASEFONT FACE="Impact, Verdana" SIZE=2 COLOR="green"> Text …
Chapitre III HTML
Conception d’un site Web
36
q <VAR> variable < /VAR > pour indiquer le nom d’une variable. q <DFN> définition </ DFN > pour mettre en évidence une sous
définition. q <CITE> citation </ CITE > pour mettre en évidence une citation
(généralement en italique).
Mise en forme physique : A utilisation déconseillée car ils ne laissent pas d’alternatives aux logiciels
clients WWW. Ces instructions dites physiques sont plus proches de l'auteur, en effet, avec ces balises ci-dessous c'est l’auteur qui décide ce que le navigateur affichera.
Voici toutes les balises de mise en forme physique : q <I> texte </I> met le texte en italique q <B> texte </B> met le texte en gras q <TT> texte </TT> pour l’utilisation d’une police à chasse fixe. q <U> texte </U> souligne le texte. q <STRIKE> texte </ STRIKE > cette commande permet de barrer
du texte. q <BIG> texte </ BIG > cette commande permet d’écrire le texte en
plus gros caractères que les caractères en cours. q <SMALL> texte </ SMALL > cette commande permet d’écrire le
texte en plus petits caractères que les caractères en cours. q <SUP> texte </ SUP > cette commande permet d’écrire le texte en
exposant. q <SUB> . . . </ SUP > cette commande permet d’écrire le texte en
indice.
Caractères accentués Pour inclure des caractères accentués dans un document HTML, on doit
remplacer la lettre accentuée par l'entité correspondante (code ISO 88-59-1 ou ISO Latin-1). Ceci avant tout pour permettre une harmonisation entre les différents systèmes d'exploitations et surtout entre les différentes particularités de chaque langue. (voir annexe C.)
Par exemple : Les caractères accentués.
Résultat : Les caractères accentués.
Chapitre III HTML
Conception d’un site Web
37
Caractères spéciaux Les caractères spéciaux sont aussi remplacés par des séquences
d’échappement.(voir annexe D.) Les caractères <,> et & sont interprétés par le langage HTML, pour apparaître
sans interprétation ils doivent être rempla : < pour <. > pour >. & pour &.
Mise en forme des listes : Les listes non ordonnées (avec puces) Ce type de liste est utilisé pour des paragraphes de plusieurs lignes. Elle
s'obtient avec la commande <UL> (Unordered List) qui permet d'avoir une liste
précédée d'une puce dont la forme varie suivant le niveau d’imbrication avec d’autres listes. La balise <UL> est définie avec <LI> qui représente un item. La balise <LH>
indique le titre de la liste. Voici les attributs de la balise <UL> :
ATTRIBUTS
ALIGN Permet d'aligner la liste (CENTER, LEFT, RIGHT).
CLASS Nom de la classe donnée à la feuille de style.
COMPACT Spécifie une liste compacte.
SRC Permet de spécifier une image qui représentera la puce. Seulement I.E.
STYLE Feuille de style intraligne.
TYPE Permet de spécifier la forme de la puce (DISC, CIRCLE, SQUARE) seulement Netscape.
EVENEMENT Spécifie un événement Javascript (HTML4.0) (OnClick, OnMouseOver,...).
Par exemple :
<UL> <LH>Titre <LI>Choix 1 <LI>Choix 2 </UL>
Chapitre III HTML
Conception d’un site Web
38
Résultat :
• Choix 1
• Choix 2
Les listes ordonnées : Une liste ordonnée s'obtient avec la commande <OL> (Ordered List) qui
permet d'avoir une liste numérotée qui s'incrémente automatiquement. La balise <OL> est définie avec <LI> qui représente un item. La balise <LH> indique le titre de la liste. La balise <OL> possède les attributs suivants :
ATTRIBUTS
ALIGN Permet d'aligner la liste (CENTER, LEFT, RIGHT).
CLASS Nom de la classe donnée à la feuille de style.
COMPACT Permet de réduire la liste.
START Permet de spécifier à quel chiffre la liste va démarrer.
STYLE Feuille de style intraligne.
TYPE Permet de spécifier la forme de la puce (chiffre romain ou arabe en majuscule ou minuscule : 1 - I - i - A - a ).
EVENEMENT Spécifie un événement Javascript (HTML4.0) (OnClick, OnMouseOver,...).
Par exemple : Résultat :
II. Choix 1 III. Choix 2 IV. Choix 3
<OL TYPE=I START=2> <LH>Titre <LI>Choix 1 <LI>Choix 2 <LI>Choix 3 </OL>
Chapitre III HTML
Conception d’un site Web
39
Les listes de définition : La commande est <DL> (Definition List). Elle permet de définir une liste avec
définition. Elle est utilisée avec la balise <DT> qui définie le terme et <DD> qui définie la définition du terme. Elle possède les attributs suivant :
Par exemple : Résultat :
Terme définition 1 définition 2 définition 3
Les listes type menu : La balise <MENU> permet d'avoir une liste menu. Chaque élément des listes
est précédé de <LI>. Elle ne possède que l'attribut COMPACT. Les listes imbriquées : Il est possible d’imbriquer différents types de liste. Par exemple :
ATTRIBUTS
ALIGN Permet d'aligner la liste (CENTER, LEFT, RIGHT).
COMPACT Permet de réduire l'espace occupé par la liste.
CLASS Nom de la classe donnée à la feuille de style.
STYLE Feuille de style intraligne.
EVENEMENT Spécifie un événement Javascript (HTML4.0) (OnClick, OnMouseOver,...).
<DL COMPACT> <DT>Terme <DD>définition 1 <DD>définition 2 <DD>définition 3 </DL>
Chapitre III HTML
Conception d’un site Web
40
Résultat :
I. item Terme
définition 1
c.5 liaisons entre pages Web : Un lien hypertexte permet l’obtention d’une autre page même si cette dernière
se situe au-delà de la page principale. En effet avec un simple clic de souris sur un lien suffit pour établir la connexion avec le fichier en question. Le navigateur Web analyse l’URL et essaye d’ouvrire le document indiqué.
La balise d’ancrage : Les liens hypertextes sont crées avec la balise <A> qui signifie ancrage (anchor
en anglais). Il peut soit définir la source d’un lien (texte ou image), soit indiquer une destination.
La balise d’ancrage débute avec "<A". elle est ensuite suivie d’une référence HREF "hypertext reference" puis du nom ou de l’URL (Uniform Resource Locator) de la page vers laquelle on veut créer le lien. Après la fermeture de la commande d’ancrage initiale ">", on saisit le texte qui s’affichera au format du lien hypertexte et clôturera avec la balise </A>. Par exemple :
Si on pose le pointeur de la souris au-dessus du texte "Découvrez All HTML",
il prend la forme d’une main, ce qui indique la présence d’un hyperlien dans le document HTML. Entre temps, le browser affiche l’URL du lien dans la barre d’état.
La balise <A> possède les paramètres suivants :
ATTRIBUTS
ACCESSKEY Permet de spécifier une touche (ou groupe) de raccourci.
<OL TYPE=I> <LI>item <DL> <DT>Terme <DD>définition 1 </DL> </OL>
<A HREF="http://www.allhtml.com">Découvrez All HTML</A>
Chapitre III HTML
Conception d’un site Web
41
CLASS Nom de la classe donnée à la feuille de style.
HREF Spécifie le type de lien, interne ou externe ainsi que le protocole.
NAME Spécifie une ancre à laquelle il est possible de faire référence dans un autre lien
STYLE Feuille de style intraligne.
TARGET Permet de spécifier le cadre (pour une frame) de destination.
TITLE Spécifie une aide (bulle) lors du passage de la souris sur le lien.
EVENEMENT 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.
2. Liaison absolue
C’est dans le cas où on utilise l’URL complet dans la définition d’un lien (adressage précis de la page). Ce type de liaison fournit un pointeur exact sur l’emplacement des informations avec lequel :
Catégories de liens hypertextes En principe, on distingue deux catégories de liens hypertexte :
q Les liens internes. q Les liens externes.
<A HREF="pagedeux.htm">Aller en page 2.</A>
<A HREF="http://www.jasc.com">Paint Shop Pro</A>
Chapitre III HTML
Conception d’un site Web
42
Liens internes
• Lien vers une partie du document courant : Ce type de liens permet de se déplacer à l'intérieur d'un fichier HTML sans que
le visiteur soit obligé de faire "scroller" la fenêtre. Le visiteur va donc cliquer sur un lien et il sera amené vers l'ancre. Pour cela deux étapes sont nécessaires :
1. <A NAME= "etiquette"> pour définir le point de branchement de nom :
etiquette. 2. <A HREF= " #etiquette">ancre</A> pour effectuer le lien sur le point
de branchement de nom ‘etiquette’, en cliquant sur la prise d’hypertexte: ancre.
• Lien vers un document local: La commande est : <A HREF="chemin/nomdefichier">ancre</A> pou effectuer le lien sur le
fichier de nom "nomdefichier", on clique sur la prise hypertexte : ancre. Eventuellement le chemin à partir du répertoire du document "maître". On peut aussi établir un lien vers une partie de ce document avec la commande ci-dessus :
<A HREF="chemin/nomdefichier#etiquette">ancre</A> pour effectuer le
lien sur le point de branchement de nom ‘etiquette’, du fichier "nomdefichier", on clique sur la prise d’hypertexte : ancre.
Liens externes
Les liens externes commencent comme les autres liens, c'est à dire avec la balise <A HREF="..., par contre suivant le protocole, le reste de la syntaxe varie. Exemples: Lien externe vers un site http.
Lien externe vers un serveur FTP.
Lien externe vers un serveur de news. Pour que ce lien soit valide il faut que le visiteur soit abonné à ce serveur de
news.
<A HREF="http://www.microsoft.com/internet">Microsoft Internet</A>
<A HREF="ftp://ftp.allhtml.com">FTP All HTML</A>
<A HREF="news:news.multimania">Les news Multimania!!</A>
Chapitre III HTML
Conception d’un site Web
43
Avec un lien externe vous pouvez également proposer un fichier (.EXE, .ZIP, son,
c.6 Les images : L’utilisation des images plus en moins animées rend un site non seulement
attrayant, mais aussi plus expressif, voire dynamique, Cependant, il faut bien faire attention car des problèmes de temps d’accès peuvent apparaître. Par conséquent, si l’emploi d’images est nécessaire, ces dernières doivent avoir impérativement une dimension modérée. Pour une page Web, la profusion de couleurs est inutile et un nombre maximal de 256 pour une belle image suffit amplement. De même, 16 couleurs suffisent souvent pour mettre en valeur un dessin. Si des images proviennent d’un scanner, là aussi il faut respecter des limites: une résolution de 72 points par pouce est suffisante. Avec ces restrictions, les résultats sont tout à fait satisfaisants et le volume des données transmises par le réseau reste toujours raisonnable. Cependant certains utilisateurs configurent leur navigateur afin de ne charger aucune image, toujours dans ce même souci de rapidité d’affichage. Pour que ces utilisateurs perdent le moins d’informations possibles, il faut prévoir de remplacer l’image par un texte la décrivant afin que l’utilisateur juge si c’est important ou non de
er. Ce texte est affiché à l’aide de l’attribut ALT de la balise <IMG>. On a
utilisé cet attribut pour permettre l’affichage d’infos bulle (sur les navigateurs récents) lorsque l’utilisateur déplace le curseur de sa souris sur l’emplacement de l’image.
Les deux commandes qui permettent l’insertion d’une image (gif ou jpg, ou encore png) sont :
Pour insérer une image locale, où "nom_image.gif" est le nom complet du fichier avec éventuellement son chemin relatif à partir du répertoire du document HTML.
Pour insérer une image distante. URL étant l’adresse complète du fichier image. Voici les attributs de la balise <IMG> :
<A HREF="film.mov">Cliquez ici pour télécharger un film</A>
1) <IMG SRC="nom_image.gif">
2) <IMG SRC="URL">
Chapitre III HTML
Conception d’un site Web
44
ATTRIBUTS
ALIGN Spécifie l'alignement de l'image par rapport au texte.
ALT Affichage d'un texte (ou légende) de l'image.
BORDER Permet de déterminer la largeur d'une bordure (en pixels).
HEIGHT Spécifie la hauteur (en pixels) de l'image.
HSPACE Spécifie l'espacement à laisser à droite et à gauche de l'image (en pixels).
LONGDESC Spécifie l'URL d'un document contenant une description complète de l'image.
LOWSRC Permet de spécifier le chemin d'une deuxième image (plus légère) pour un affichage plus rapide. Seulement Netscape.
NAME Nom de l'image (utile pour Javascript).
SRC Indique le chemin de l'image (ex: gif/image1.jpg).
STYLE Feuille de style intraligne.
VSPACE Spécifie l'espacement à laisser en haut et en bas de l'image (en pixels).
WIDTH Spécifie la largeur (en pixels) de l'image.
EVENEMENT Spécifie un événement Javascript (HTML4.0) (Onclick, Onabort...).
Les images peuvent aussi servir de prises hypertextes :
q Soit toute l’image réagit à un clic. q Soit l’image réagit en fonction de la zone où le clic s’est produit : on
parle dans ce cas là d’image cliquable ou réactive ou encore d’image sensible.
Insertion d’un lien graphique : La commande est la suivante :
Pour effectuer le lien sur le point de branchement de nom : etiquette du document courant, on clique sur l’image "nom_image.gif" qui est la prise d’hypertexte. Tout ce qui a été vu sur les liens est évidemment applicable ici.
<A HREF="#etiquette"><IMG SRC="nom_image.gif"></A>
Chapitre III HTML
Conception d’un site Web
45
Insertion d’image cliquable : La balise <MAP> permet de créer une image réactive (côté client) en HTML.
L'image réactive est utilisée généralement pour définir plusieurs liens (interne ou ge, elle est souvent utilisée pour des banderoles. La balise
<MAP> doit être utilisée avec la balise <AREA>. La balise <AREA> possède trois
attributs : q SHAPE qui peut prendre trois valeurs : § RECT pour un rectangle. § CIRCLE pour un cercle. § POLY pour un polygone.
q COORDS : § Indique les coordonnées des coins supérieurs gauche et inférieur droit
de la zone pour un rectangle RECT. § Indique les coordonnées de chaque angle du polygone si on opte pour
la valeur POLY. § Indique les coordonnées du centre du cercle et la dimension du rayon
de ce même cercle pour la valeur CIRCLE. q HREF définit la page de destination du lien correspondant à la zone. On
peut bien entendu, utiliser un lien interne ou externe. Exemple d'une image réactive composée d'un rectangle (zone1) et d'un cercle
(zone2). Chaque zone constitue un lien ver un paragraphe du document courant :
c.7) Hypermédia : hypertexte et hypermédia Hyper signifie plus ou au-delà. Hypertexte est appelé hypermédia dans la
mesure où il comporte des fichiers audio et vidéo. Les navigateurs font appel à des programmes externes, pour palier leur incapacité à traiter certaines formes de données. Par exemple, si un navigateur ne sait pas déployer une séquence vidéo il fait appel à
uate pour lire cette séquence. Bien évidemment il faut que cette application soit installée sur le micro-ordinateur de l’usager.
<MAP NAME="TESTMAP"> <AREA SHAPE="RECT" COORDS="5,5,90,40" HREF="#pargraphe1"> <AREA SHAPE="CIRCLE" COORDS="139,23,20" HREF="#paragraphe2"> </MAP> <IMG SRC="gif/area.gif" BORDER=0 WIDTH=191 HEIGHT=45 USEMAP="#TESTMAP" ALT="Exemple d’utilisation de le balise MAP">
Chapitre III HTML
Conception d’un site Web
46
Création d’animation Il existe plusieurs moyens d’apporter du mouvement à un site Internet. Les gifs
crée par Compuserve en 1989) sont certainement les plus efficaces et les plus faciles à mettre en œuvre pour faire bouger des icônes et ajouter des animations, et donc de l’intérêt, à une page Web. En effet une image au format
importants : 1. La transparence, pour intégrer parfaitement des logos à une page. 2. La possibilité de sauvegarder une chaîne d'image qui accompagnée
d'instructions permet de créer une animation. De nombreux utilitaires graphiques permettent de mettre en œuvr e un gif
animé. Certains sont disponibles en freeware et d’autres, aux fonctions complexes, sont commercialisés. La création d’un gif animé est tellement simple qu’elle peut se
: 1. Sélection de la série d’images qui va constituer la source. 2. Inclure les différents contrôles (commentaire, temporisation...) pour
Il est possible de préciser combien de fois l'animation sera jouée. Habituellement, elle se fait avec l’attribut LOOP (boucle) qui doit être fixée entre 0 et 32760. Dans cette technique, rien ne distingue un GIF animé d’un GIF classique, seul le contenu du fichier connaît les informations pour l’animation.
Les navigateurs telle que Netscape et I.Explorateur supportent le format gif89a de façon native. Donc pour la consultation, cette technique d’animation ne requiert
Le son : L'intégration d'un fichier son (.MIDI, .WAV, .AU ou .AIFF) dans une page
Web peut s'effectuer de différentes façons : 1. Soit avec la balise <BGSOUND> (spécifique à I.Explorer) 2. Soit avec la balise <A HREF> 3. Soit avec la balise <EMBED>
Le tag <EMBED>, en particulier, permet d’intégrer dans un document HTML
n’importe quel fichier son. Le format de fichier n’a aucune importance, car ce n’est pas le navigateur qui le lira mais un programme externe compatible. Voici comment procède le navigateur Web :
q Lorsqu’il rencontre un tag EMBED, il identifie le type du fichier intégré
Chapitre III HTML
Conception d’un site Web
47
q S’il ne reconnaît pas un format, il le signale sous forme d’icône
q Dans le cas contraire, il représente le fichier par son icône habituelle, à la demande de l’utilisateur, il active le programme associé auquel il
Voici un exemple d’utilisation de la balise <EMBED> :
q SRC indique le fichier son. q WIDTH indique la largeur de l’icône. q HEIGHT indique la hauteur de l’icône. q AUTOSTART indique si le fichier son est joué automatiquement.(Par
défaut il est égal à TRUE) L’alignement est défini avec le tag ALIGN . Les autres attributs de ce tag sont
également applicables
La vidéo Voici la dernière des merveilles du multimédia que le HTML peut nous offrir.
En effet Nous pouvons placer dans nos pages Web des liens vers des clips vidéo. Les assez conséquents, et les visiteurs qui souhaitent les
visionner devront être équipés de connexions rapides, s’ils ne veulent pas s’ennuyer à
charger des fichiers représentant plusieurs centaines de Kilo−octets. Voici les différents formats vidéo qu’on peut intégrer dans une page HTML :
q MOV : Il s’agit du format QuickTime développé au départ pour le Macintosh. C’est le format vidéo le plus répandu sur le Web.
q AVI : ce format a été introduit avec Vidéo for Windows, il est en standard dans Windows 95.
q MPG : Il s’agit d’un nouveau format des fichiers plus petits avec une
L'intégration d'un fichier vidéo peut s'effectuer de différentes façons : 1. Soit avec la balise <A HREF> 2. Soit avec la balise <EMBED>
Avec la balise <A HREF> la procédure consiste à appeler cette vidéo par un lien hypertexte. Exemple :
<EMBED SRC="win.wav" WIDTH="80" HEIGHT="50" AUTOSTART="FALSE">
<A HREF="video.avi">Cliquez ici pour voir un clip !!</A>
Chapitre III HTML
Conception d’un site Web
48
Comme pour les fichiers audio, la balise <EMBED> permet d’inclure
n’importe qu’elle vidéo. Exemple : L’attribut LOOP définit le nombre de boucle de la diffusion de la vidéo. En
outre, nous pouvons définir l’alignement avec le tag ALIGN : à gauche (LEFT), à droite (RIGHT)ou centré. Les autres attributs de ce tag sont également possibles.
c.8) Les formulaires HTML Le HTML est une route à double sens c’est à dire qu’on peut également
exploiter nos pages Web pour recueillir des informations provenant de nos lecteurs. En effet un formulaire HTML fait partie d’une page Web et comprend plusieurs champs dans lesquels le visiteur est invité à saisir une information ou à opter pour un choix. L'information est ensuite envoyée à l'aide de scripts sur le serveur qui héberge notre site puis renvoyée dans la plupart des cas sur l’adresse électronique de notre choix. Par exemple le bon de commande est une utilisation très répandu des formulaires en ligne.
Un formulaire commence par la balise <FORM> et se ferme par la balise
</FORM>. il peut se trouver n’importe où dans le corps du document HTML. La balise <FORM> reconnaît les attributs suivant :
1) ACTION : Indique l'URL (relative) du script CGI ou ISAPI (fourni par le serveur qui héberge vos pages), qui accepte l'information saisie dans le formulaire et vous le retourne suivant les paramètres définis.
2) METHOD : Indique la façon dont les données sont transmises au script ACTION. 2 valeurs sont proposées :
q POST : Pour un formulaire classique. q GET : Pour, par exemple définir un moteur de recherche sur
votre site. 3) ENCTYPE : Cet attribut spécifie le format des données envoyées dans
le cas où un protocole n'imposerait pas un format précis. Iplusieurs valeurs dont :
q "text/plain" : Valeur utilisée dans le cas d'un formulaire classique.
q "multipart/form-data" : Valeur utilisée dans le cas où le formulaire comprendrait un fichier attaché (<INPUT TYPE="file" ...>).
<EMBED SRC=" video.avi." WIDTH=200 HEIGHT=200 AUTOSTART="FALSE" LOOP=1>
Chapitre III HTML
Conception d’un site Web
49
4) TARGET : Permet d’indiquer le nom d’une fenêtre ou d’un cadre. Les données renvoyées par le serveur après traitement sont alors affichées dans ce cadre.
5) NAME : Indique le nom du formulaire. Les divers types de champs pouvant figurer dans un formulaire sont les
suivants : q Les champs de saisie de texte, sur une ligne (TEXT ou
PASSWORD) ou sur plusieurs lignes (TEXTAREA). q Les cases à cocher et les boutons d’option (CHECKBOX et
RADIO). q Les fichiers attachés. q Les listes ou les listes combinées (SELECT ET OPTION). q Les boutons de commande, comprenant plusieurs variantes : § SUBMIT : Pour soumettre le formulaire à l’application (le
script dont le nom est la valeur indiquée dans ACTION du marqueur <FORM>).
§ RESET : L’action de ce dernier réinitialise les différents champs du formulaire à leur valeur initiale. Contrairement au bouton SUBMIT, le bouton RESET ne provoque pas d’envoi au script distant.
§ IMAGE : ce paramètre permet de créer des boutons d'envoi et de remise à zéro personnalisés.
Voici un exemple concret de formulaire ainsi que le code source :
<HTML><HEAD><TITLE>Exemple de formulaire</TITLE></HEAD> <BODY> <H1><I><U>Exemple de formulaire</U></I></H1> <FORM ACTION="URL du script" METHOD="POST"> <I><B>Entrer votre nom:</B></I><INPUT NAME="nom" SIZE=30> <HR WIDTH="45%" ALIGN="left"> <B><I>Cocher la cas correspendant à votre cas :</I></B> <UL> <LI><INPUT TYPE="RADIO" NAME="age" VALUE="-20">Mois de 20 ans <LI><INPUT TYPE="RADIO" NAME="age" VALUE="20-40">De20 à 40 ans <LI><INPUT TYPE="RADIO" NAME="age" VALUE="+40">Plus de 40 ans </UL> <I><B>Quel est votre secteur d'activité :</B></I> <SELECT NAME="Menu"> <OPTION SELECTED>Etudiant <OPTION>Enseignant <OPTION>Secteur public
Chapitre III HTML
Conception d’un site Web
50
Résultat (avec I.Explorater) :
c.9 Les tableaux : Le tableau est l’un des outils créatifs les plus puissants et les plus utilisés de nos
jours dans la conception d’une page Web, car il permet d’organiser du texte et/ou des images sur plusieurs colonnes et lignes d’une façon captivante permettant d’attirer l’attention du lecteur, suffisamment longtemps pour qu’il assimile le message.
La création des tableaux se passe autour des balises suivantes : q La balise <TABLE> qui indique au navigateur la création d'un
tableau. q La balise <TH> identifie l'en-tête de chaque colonne.
<OPTION>Secteur privé </SELECT><P> <I><B>Faite votre choix :</B></I> <INPUT TYPE="CHECKBOX" NAME="Check1" CHECKED="true" VALUE="C2">Choix 1 <INPUT TYPE="CHECKBOX" NAME="Check2" VALUE="C2">Choix 2 <HR WIDTH="45%" ALIGN="left"> <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="Annuler"> </FORM></BODY></HTML>
Chapitre III HTML
Conception d’un site Web
51
q La balise <TR> définit une ligne de tableau contenant une ou plusieurs colonnes.
q La balise <TD> (table data ou données du tableau) définit une cellule.
Outre que ces balises on trouve aussi la balise <CAPTION> qui permet d’affiche le titre du tableau et qui possède deux attributs :
q TOP : Titre placé au-dessus du tableau (par défaut). q BOTTOM : Titre placé en dessous du tableau.
Bien évidemment, ces balises doivent êtres fermées pour indiquer au navigateur la fin du tableau, d'une colonne, et d'une cellule.
Par défaut, la taille du tableau et celle des cellules qui le composent s’adaptent automatiquement au contenu (texte ou image). Cependant on peut définir la taille du tableau ou la taille de chaque cellule ainsi que l'espacement des cellules et la taille de la bordure en jouant avec les attributs suivant :
q WIDTH : Spécifie la largeur du tableau ou d'une cellule, en pixels ou u navigateur.
q HEIGHT : Spécifie la hauteur du tableau ou d'une cellule, en pixels ou pourcentage de la fenêtre du navigateur.
q BORDER : Spécifie la taille en pixels (par défaut 1) de la bordure du tableau.
q CELLPADDING : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau.
q CELLSPACING : Spécifie l'espace en pixels entre les cellules du tableau.
q BGCOLOR : Spécifie la couleur d'une cellule. q BORDERCOLOR : Spécifie la couleur de la bordure du tableau. q BORDERCOLORLIGHT : Spécifie la couleur aux points culminants
de la bordure du tableau (effet 3d). q BORDERCOLORDARK : Spécifie la couleur de l'ombre de la
bordure du tableau (effet 3d). q BACKGROUND : Spécifie l'URL de l'image à afficher comme
image d'arrière plan du tableau (I.Explorer seulement). A noter que pour exploiter la technique des tableaux comme outil de mise en
page, on définit l’épaisseur de la bordure par 0, ce qui la rend invisible. Afin d’obtenir des cellules plus ou moins grandes pour accueillir des données, les lignes et les colonnes peuvent êtres fusionnées avec les attributs ROWSPAN (pour 2 cellules
Chapitre III HTML
Conception d’un site Web
52
adjacentes d’une même ligne ) et COLSPAN (pour 2 cellules adjacentes d’une même colonne).
En principe, tout élément placé dans une cellule de tableau est aligné à gauche et centré verticalement. Néanmoins on peut aligner le contenu d’une cellule ou toute une ligne à la fois horizontalement et verticalement à l’aide des attributs ALIGN (LEFT, RIGHTet CENTER) et VALIGN (MIDDLE, TOP, BOTTOM et BASELINE).
c.10) Cadre est mise en page interactive : Dans les versions précédentes du HTML, l’une des principales limitations était
que l’on ne pouvait afficher qu’une seule page à la fois. Les cadres (développés par Netscape) éliminent cette limitation en permettant le découpagenavigateur en plusieurs documents HTML. Ils représentent une solution similaire aux tableaux pour l’agencement du textes et/ou des images au sein de lignes et de colonnes.
La définition d’un cadre (frame) se fait dans une page "maîtresse" qui indique le découpage.
� Balise <FRAMESET > . . . </FRAMESET > La balise <FRAMESET> prend la place du tag <BODY>, c'est elle qui va
définir les cadres, qu'ils soient verticaux ou horizontaux, et leurs dimensions (en % ou en pixels).
Elle peut avoir les attributs suivants : q ROWS, COLS : définissent le nombre de cadre, qui peut être vertical
(ROWS - rangée) ou horizontal (COLS - colonnes), exprimés en % ou en pixels.
q FRAMEBORDER : Cet attribut permet de déterminer si les cadres
auront ou n'auront pas de bordure. Il a deux valeurs YES ou NO. q FRAMESPACING : permet d’ajouter un espace entre les cadres,
exprimés en pixels. La valeur 0 indique aucun espace. q BORDER : permet de déterminer la taille des bordures entourant les
cadres, exprimés en pixels. La valeur 0 indique aucune bordure. q BORDERCOLOR : permet de déterminer la couleur de l'ensemble
des bordures des cadres. Il suffit pour cela de spécifier une couleur sous forme de nom ou de sa valeur hexadécimale. Ex : BORDERCOLOR="red".
Chapitre III HTML
Conception d’un site Web
53
� Balise <FRAME > . . . </FRAME >
Cette balise permet de définir un cadre à l'intérieur du conteneur <FRAMESET>. Elle a plusieurs attributs :
q SRC : Cet attribut indique l'URL du document HTML qui sera
affiché dans un cadre spécifique. q NAME : Permet de donner un nom au cadre. ce qui permettra ensuite
de l'appeler avec l'attribut TARGET. q FRAMEBORDER : Même définition que pour la balise
<FRAMESET>. q BORDER : idem que la définition précédente. N’est valable que pour
Netscape. q MARGINHEIGHT, MARGINWIDTH : permettent de spécifier la
largeur des marges autour du cadre. q NORESIZE : sa présence indique que les dimensions du cadre ne
peuvent pas être modifiées par l’utilisateur. Par défaut les cadres peuvent être redimensionnés.
q SCROLLING : Cet attribut permet d'attribuer ou non une barre de
défilement (scrollbar) à un cadre. Il possède trois valeurs : 1. YES : Indique que la barre de défilement sera toujours visible. 2. NO : Indique que la barre de défilement ne sera jamais visible. 3. AUTO : Indique que le navigateur déterminera si la barre de
ent est nécessaire.
Navigateurs non compatibles
Dans la mesure où certains navigateurs ne sont pas compatibles avec les cadres, il est à la fois sage et prévenant de proposer le contenu d’une page Web sous une autre forme, en utilisant les balises <NOFRAMES> et </NOFRAMES>. Entre ces balises il faut donc théoriquement développer un deuxième site. L’avantage de cette solution est que tout les lecteurs pourront visiter le site.
Relier des cadres
L'attribut TARGET qui figure dans les balises A, AREA, BASE ou FORME permet d’indiquer le nom de la fenêtre dans laquelle le document doit être affiché. Voici les différentes valeurs des noms réservés pour les frames cibles :
q _self : Permet d’afficher le document dans la même fenêtre que le lien.
Chapitre III HTML
Conception d’un site Web
54
q _parent : Permet d’afficher le document dans la fenêtre parent du
document ou se trouve le lien. q _blank : Permet d 'afficher le document dans une nouvelle fenêtre
ouverte par le navigateur. q _top : Permet d 'afficher le document dans toute la fenêtre du
navigateur et les frames disparaissent. q _new : Identique à _blank.
Cadres locaux
La balise <IFRAME> (spécifique à I.Explorer) permet d'insérer un cadre local (une fenêtre qui fera référence à un autre document HTML) à n'importe quel endroit du document HTML. Elle doit figurer dans le corps du document, c'est-à-dire entre les balises <BODY> et </BODY>. Elle possède les mêmes attributs que la balise <FRAME> et en plus les attributs HEIGHT et WIDTH qui déterminent la hauteur et la largeur du cadre, (valeur en pixels).
c.11) Les couleurs : Plusieurs balises disposent de paramètres permettant d’indiquer une couleur.
Par exemple l’attribut TEXT du marqueur <BODY> indique la couleur de texte du
document. En HTML les couleurs peuvent être spécifiées de deux façons :
q Soit à l’aide de ses composantes rouge, vert et bleu. q Soit à l’aide d’un symbole.
Le code RVB
En effet on peut indiquer la couleur à l’aide de ses trois composantes rouge, vert et bleu, sous la forme suivante :
Le signe "#" introduit la définition d’une couleur. Rr, gg et bb indiquant respectivement la quantité de rouge (red), de vert (green) et de bleu (blue) dans la
évoluent selon un nombre à deux décimales en base 16. Chaque couleur peut donc prendre 256 nuances, de 00 (pas de couleurs) à FF (La combinaison des trois couleurs peut ainsi créer plus de 16 millions de couleurs mais le langage HTML n'en accepte que 216, notées en hexadécimal avec les proportions suivantes :
#rrggbb
Chapitre III HTML
Conception d’un site Web
55
00 33 66 99 CC FF
0 % 20 %
40 %
60 %
80 %
100 %
Le code d'une couleur en HTML s'écrit donc ainsi : "003366".
Les 16 couleurs principales
La seconde méthode pour indiquer une couleur fait appel à un nom symbolique reconnu par les navigateurs. Voici les 16 couleurs pouvant ainsi être utilisées :
Nom symbolique Couleur Nom symbolique Couleur BLACK Noir BLUE Bleu MAROON Marron ou rouge foncé FUCHSIA Violet vert GREEN Vert AQUA Bleu clair OLIVE Vert olive WHITE Blanc NAVY Bleu marine YELLOW Jaune PURPLE Violet LIME Vert clair TEAL Cyan foncé RED Rouge GRAY Gris SILVER Gris clair
Chapitre IV HTML et Le Web
Conception d’un site Web
57
VI.1 Introduction : Persuader le visiteur de revenir visiter régulièrement un site est la quête du
grand Graal de ceux qui publient sur le Web. La compétition est énorme. Les utilisateurs de jeux ou de programmes éducatifs, d’encyclopédie
sont habitués à des présentations de grandes qualités, les graphiques, les animations vidéo, le son concourent à des présentations de premier choix. Les documents HTML ont peu de moyens de concurrencer ce genre de produit. La mise en page des images et du texte est très rigide. Bref comparé avec tous ces documents multimédias, un document HTML ordinaire est plutôt plat, quelle que soit la qualité de son contenu.
Les développeurs de site Web sont dans une course effrénée, constamment à la nouveaux pour satisfaire l’enthousiasme des gens pour Internet et
pour le Web en particulier. Un des premiers besoins d’évolution à été de rendre les pages dynamiques en
améliorant le taux d’interactivité entre le document et l’utilisateur. En effet, le standard HTML ou le SGML (Standard Generalized Markup Langage) laisse le libre choix en ce qui concerne les moyens donnés aux programmeurs HTML pour contrôler leurs pages Web. Des éditeurs de navigateurs comme Netscap et Internet Explorer ont d’ailleurs anticipé les standards et mis en œuvre des possibilités pour donner plus de
Cela dit, le langage HTML n’est plus vu comme un simple langage de
formatage de document mais plutôt comme un langage évolutif qui s’enrichit de nouvelles balises et de nouveaux attributs au fil du temps.
Dans ce présent chapitre, on parlera des moyens qui facilitent l’écriture des pages Web ainsi que les possibilités qui concourent à la création des pages Web dynamiques et interactifs.
IV.2 Les éditeurs HTML : Il existe trois méthodes pour coder en langage HTML, du simple éditeur de
texte jusqu’aux environnements très complexes.
IV.2.1 Les éditeurs de texte : Les fichiers HTML sont des fichiers ASCII brut, donc le plus simple consiste à
avec un programme qui enregistre les fichiers par défaut au format texte tout en permettant d’attribuer une extension htm ou html. Par exemple on peut travailler avec le WordPad ou le Blocnotes de Windows 98.
Chapitre IV HTML et Le Web
Conception d’un site Web
58
Exemple de code source HTML écrit avec l’éditeur WordPad de Windows 98.
IV.2.2 Les éditeurs de tags : Les éditeurs de tags constituent une solution intermédiaire. Ce type d’éditeur
propose un environnement d’édition ASCII avec un support étendu pour les divers codes HTML.
Exemple d’un éditeur de tags HTML, le HotDogPRO.
Chapitre IV HTML et Le Web
Conception d’un site Web
59
IV.2.3 Les éditeurs WYSIWYG : Avec un éditeur WYSIWYG (What You See Is What You Get). Ce que vous
voyez (à l'écran) correspond au résultat. Ont peut créer un document HTML sans jamais avoir entendu parler de HTML. Les packages de ces logiciels nous permettent de voir directement ce qu’on va obtenir. Front page de Microsoft et Dreamweaver de Macromédia font partie de cette catégorie de logiciels. Les sociétés de production importantes qui travaillent avec HTML choisissent souvent ce type de programmes. Mais ne cachons pas les inconvénients de ces éditeurs.
Les éditeurs WYSIWYG limitent les possibilités créatives de l’utilisateur, ils ne proposent que les tags et les attributs qu’ils savent correctement traduire en code HTML. Des lacunes importantes apparaissent, notamment si l’on veut combiner plusieurs tags, et certaines combinaisons sont tout bonnement irréalisables. Le code produit n’est pas toujours correct. Donc la seule solution pour obtenir de bons résultats
e le code pour pouvoir réparer les erreurs.
Exemple d’un éditeur WYSIWYG : Microsoft FrontPage
Chapitre IV HTML et Le Web
Conception d’un site Web
60
IV.2.4 Microsoft FrontPage : Microsoft FrontPage permet la création et la maintenance rapide et facile de
sites Web extrêmement performants. Son utilisation est menus et des barres d’outils de Microsoft Word ou de Microsoft Excel. Il comprend un éditeur de page Web qui génère automatiquement le code HTML voulu, la conversion automatique d’images vers les format .GIF ou .JPG, un éditeur de points actifs pour transformer rapidement une image en Image map, la création de liens par glisser-déplacer, un éditeur de formulaire ainsi que des assistants et des modèles d’aide à la création de sites. Il permet aussi l’insertion de modules comme les classes Java, les contrôles ActiveX et les divers effets spéciaux et ce, de manière transparente pour l’utilisateur. Il est même possible d’afficher le contenu des Plug in et d’exécuter des
Il dispose d’élément WebBot qu’on peut insérer dans nos pages Web pour
effectuer des tâches interactives, comme les recherches de texte complet, le traitement de formulaires, et des barres de navigation. Il offre également des outils performants pour la maintenance, qui autorisent des vues multiples d’un site Web et une compréhension de l’interrelation. La section la plus importante est probablement le mode Navigation, qui aide à visualiser l’arborescence du site
IV.3 Devenir interactif sur le Web : IV.3.1 Programmation côté serveur Une façon très rependue d’étendre l’interaction entre l’utilisateur et le contenu
est de faire communiquer la page avec son serveur Web. Ce dernier doit être capable de gérer les fonctions de distribution de page HTML déjà existantes ou de création de pages en répondant à une requête définie. On distingue deux niveaux dans l’utilisation
: q Serveurs Web statiques q Serveur Web applicatifs
Les serveurs Web statiques appelés aussi serveurs http sont ceux qui, à la requête d’un client, renvoient des documents existants sans aucun travail préalable. C’est le cas de beaucoup de serveurs sur l’Internet.
Les serveurs Web applicatifs sont ceux qui, à la requête d’un client construisent une page Web répondant à la demande du client, à ses droits d’accès, à concernant dans la base, etc.
HTML et HTTP étant très limités dans leurs fonctionnalités. Ils ne savent pas traiter l’information comme le fait un programme informatique classique, ni d’accéder à une base de données. Un logiciel serveur est donc nécessaire. En effet pour permettre
Chapitre IV HTML et Le Web
Conception d’un site Web
61
au serveur d’exécuter des programmes sur la demande d’un client et de lui retourner une réponse sous forme d’une page HTML, on doit passer par un CGI ou NSAPI/ISAPI.
IV.3.1.1 Les programmes ou les scripts CGI : Les scripts CGI ou Common Geteway Interface (interface de passerelle) sont
des mini-applications développées généralement en C, C++, Perl et des scripts shell qui permettent d’établir un lien entre les applications de traitement et le serveur http. Par exemple, les sites de recherches comme Yahoo, WebCrawler et Lycos offrent la possibilité à l’utilisateur d’entrer un thème de recherche et de cliquer sur les options pour préciser la façon dont le moteur de recherche doit traiter la requête. Lorsque
eur clique sur le bouton d’envoi, le navigateur transmet vers le serveur les données saisies dans le formulaire. Sur le serveur, un script CGI formate les informations reçues, puis les transmet, pour traitement à une base de données ou un autre programme tournant sur le serveur. Les résultats reviennent au script CGI qui les oriente vers le navigateur du visiteur, parfois sous forme d’une nouvelle page, parfois sous forme d’informations s’inscrivant dans d’autres champs du formulaire encore
L’écriture des scripts CGI personnalisés peut se faire avec n’importe quel
langage de programmation. En outre, pour pouvoir les installer il faut que : 1) Le serveur soit configuré pour permettre de les exécuter. 2) L’administrateur système (notre hébergeur) nous donne l'autorisation
de les installer, y compris l’accès à des bases de données ou des programmes traitant l’information en provenance de l’utilisateur.
3) Nous sachions biensûr, les installer (et de les personnaliser suivant la configuration du serveur) et définir les permissions.
Quel que soit l’intérêt et l’utilité des scripts CGI qui résident dans la simplicité, leur emploi encombre les serveurs avec de nombreux traitement de requêtes, ce qui consomme beaucoup de ressources sur le serveur.
IV.3.1.2 NSAPI et ISAPI : NSAPI ou Netscape Server API représente la première technique qui à été mise
en œuvre pour remédier aux défauts des scripts CGI. Son principe consiste à remplacer l’exécution d’un programme à chaque appel par l’invocation d’une DLL (librairie dynamique) déjà présente en mémoire. On gagne ainsi en ressource sur le serveur puisqu’il n’est pas nécessaire de lancer un programme pour chaque client.
Chapitre IV HTML et Le Web
Conception d’un site Web
62
Malheureusement, l’écriture de ces DLL doit être en C++ et demande des connaissances importantes en programmation, ce qui est très coûteux, donc peu utilisé.
Microsoft à également développer sa propre solution qui est équivalente à NSAPI de Netscape et qui se nomme ISAPI.
IV.3.2 Programmation côté client IV.3.2.1 Java, le langage: Java est à la fo is un langage de développement orienté objet et une plate forme
de portabilité. Cela signifie qu’il est plus difficile à apprendre que le langage HTML, mais également plus puissant. Bref c’est un outil destiné aux professionnels. Il possède plusieurs points communs avec le C et le C++, mais les sources d’erreurs ou de confusions les plus courantes ont été supprimées ou contrôlées.
Développé par Sun Microsystem, Java a rencontré un grand succès dés son apparition au début de l’année 1995. Cela est dû à la rencontre entre :
q Un ingénieux mécanisme de portabilité. q Les technologies orientées objets q Le besoin de disposer d’une certaine intelligence sur le poste client
pour répartir les traitements entre ce dernier et le serveur.
La portabilité de Java : Java possède les avantages des langages interprétés et les performances des
langages compilés. En effet les programmes écrits avec Java sont compilés dans une forme intermédiaire, une sorte de pseudo-assembleur, appelée pseudo-code ou bytecodes. Cette forme intermédiaire peut être exécutée sur n’importe quelle machine,
La client formate et visualise les informations reçues
2
3
4
5
6
7
Le client envoie une requête au serveur
Le serveur exécute la requête
La passerelle peut faire appel à d’autres programmes
Le serveur retourne l’information au client
programme et retourne le résultat au serveur
Client Serveur
Passerelle Autres programmes
Programmation d’un CGI ou d’une ISAPI
1
Chapitre IV HTML et Le Web
Conception d’un site Web
63
si celle-ci dispose d’un noyau d’exécution Java. Ce noyau comprend deux parties importantes :
q La JVM (Java Virtual Machine), qui lit et exécute le p-code. q L’implémentation des interfaces de programmation (API) standard en
Java pour le système d’exploitation concerné. Ainsi le problème de la portabilité se résume à la disposition d’un noyau
d’exécution Java sur la machine cible.
Java et la sécurité : Les applets Java (petites applications Internet) qui s’exécutent dans des
navigateurs compatibles Java sont soumises à de sévères restrictions de sécurité, afin de protéger le poste client contre les agressions. L’innocuité des bytecodes trouvés sur le réseau est vérifiée. C’est la machine virtuelle implémentée dans le navigateur qui permet aux programmes Java de s’exécuter. Les différents browsers compatibles Java fournissent différents niveaux de sécurité lorsqu’il gèrent des applets Java. Le système de Netscape Navigator, très restrictif, a la réputation d’être particulièrement efficace. Avec lui, nous pouvons théoriquement faire tourner un programme en Java, cependant
IV.3.2.2 Ce que nous pouvons faire avec des Applets : Les applets insufflent de la vie dans nos pages HTML. Elles les rendent
réellement interactives. A titre d’exemple, avec des applets java on peut :
Noyau java pour
Solaris
Noyau Java pour
MacOs
Noyau java pour
Windows2000
Programme source
java
P-Code
Solaris MacOs Windows2000
Compilation en forme intermédiaire
"Machine virtuelle"
La portabilité d’un programme java
Chapitre IV HTML et Le Web
Conception d’un site Web
64
q Afficher des textes ondulés, des images ainsi que des animations. q Gérer des saisies au clavier. q Inclure des boutons, boutons radio, etc. q Inclure des champs de texte.
Sans oublier qu’une applet Java peut établir une connexion permanente avec le serveur depuis lequel elle à été téléchargée, ce qui nous permet de répartir les traitements entre ce dernier et le poste client.
Programmer en Java : Pour pouvoir programmer avec Java, il nous faut deux logiciels différents. Le
premier est le JDK (Java Development Kit), ou le kit de développement pour Java. Il contient tous les logiciels nécessaires pour écrire, compiler et tester des applets et des applications Java. Le second est un browser compatible Java. Ce dernier nous permet de tester les applets qu’on écrit ainsi que de visualiser les applets qu’on trouve sur le Web. En effet ces deux logiciels n’offrent pas la convivialité des derniers compilateurs Java, mais ils constituent de bons outils d’apprentissage du langage.
Développement d’applets à l’aide d’environnement Java
Si nous voulons écrire des applets java nous disposons d’un grand choix d’environnement de développement. La palette des compilateurs Java présentés plus bas va de la saisie manuelle du code source jusqu’aux outils de programmation graphiques qui permettent de tout faire ou presque sans avoir à écrire une seule ligne de code. Il existe même des interfaces de programmation qula saisie de lignes de code. L’offre, très diversifiée, permet donc à chacun de choisir son outil selon ses capacités et ses besoins.
Plusieurs éditeurs ont rapidement réagi à la déferlante Java et proposent des environnements graphiques :
q Symantec avec Cafe. q Aimtech avec Ljamba.
JVM
P-Code Code source Java Aperçue dans le Browser
Compilation
Les deux étapes d’exécution de code source Java
javac Appletviewer
Chapitre IV HTML et Le Web
Conception d’un site Web
65
q Borland avec Lette. q Microsoft avec Visuel J++.
Pour les petites applets, le développeur n’a le plus souvent pas besoin de mettre la main à la pâte, il peut recourir à des composants prêts à l’emploi ou à un assistant qui crée des applets à l’aide de menus.
IV.3.2.3 Adjuvants (Plug-in): Netscape grâce à son concept d’adjuvants, est parmi les premiers dans la course
à l’intégration. Le principe des adjuvants est simple : ils permettent d’étendre les capacités multimédias du navigateur à l’aide de module d’extension. Le plug-in est en fait soit :
q Un fichier librairie (extension .DLL). q Un ActiveX (extension .OCX). q Une application indépendante (relié par un type MIME ).
En effet, les serveurs http sont capables de transmettre toutes sortes de documents : textuel, visuel, audio ou encore vidéo. Réaliser un navigateur capable de maîtriser tous ces formats demanderait un travail énorme. Pour cela le navigateur doit être complété, à la demande, par des programme s capables de traiter un format donné.
Deux possibilités sont alors offertes à l’utilisateur :
• Installer des programmes complémentaires (ou utiliser des programmes déjà installés) et paramétrer le navigateur pour qu’il lance le
respondant au type du document automatiquement après avoir chargé celui-ci.
• Installer un module d’extension ou plug-in. Ce programme se branche sur le navigateur, et après chargement du document, ce dernier s’affiche directement dans la fenêtre du navigateur.
Ainsi, le chargement d’un fichier de format Acrobat pourra, suivant la façon dont on a installé les logiciels, lancer Acrobat Reader ou bien faire afficher le document dans la fenêtre du navigateur.
Notons cependant que ces modules d’extensions ne sont pas multiplates-formes.
IV.3.2.4 ActiveX : Contrairement à Java, ActiveX ne constitue pas une réelle révolution. La
technologie mise en œuvre n’est autre qu’une extension de la caractéristique de Microsoft Windows, appelée liaison et incorporation des objets, plus connue sous l’acronyme OLE (Object Linking Embedding). OLE permet à tout ou à une partie d’un programme d’être incorporé à un document créé à l’aide d’un autre programme. A titre
Chapitre IV HTML et Le Web
Conception d’un site Web
66
d’exemple, cette technique autorise le placement d’une feuille de calcul Microsoft Excel dans un document provenant d’un traitement de texte Microsoft word.
Lorsque Internet à révolutionné le monde de l’informatique au milieu des années 1990, Microsoft a adapté la technologie OLE afin qu’elle fonctionne sur les pages Web en ligne et l’a rebaptisée ActiveX.
Qu’est-qu’un contrôle ActiveX?
Conçue dans le but de concurrencer Java, ActiveX ne constitue pas vraiment un langage de programmation, mais plutôt un standard pour développer des applications, tournant sous Windows 32 bits, indépendamment du langage, du moment que ce dernier soit conforme aux mêmes protocoles.
Ce programme peut être développé avec n’importe qu’elle langage de programmation (C++, Visual Basic ou même Java). Du fait qu’un assistant lui attribue la propriété d’être un contrôle ActiveX.
Différence entre un contrôle ActiveX et une applet Java :
Contrairement aux applets Java, qui disparaissent après leur exécution, les contrôles ActiveX sont enregistrés sur le poste de travail de l’utilisateur, ce qui évite de les recharger à chaque utilisation. Notons aussi que le modèle de sécurité d’ActiveX et différent de celui de Java. Java permet de télécharger n’importe qu’elle applet, mais celle-ci n’a pas accès au disque dur de l’utilisateur. ActiveX permet aux cond’agir comme bon leur semble sur le poste client, mais le client peut exiger une identification des modules qu’il charge.
Pour les développeurs Internet, la technologie ActiveX est considérée comme plus rapide que l’emploi des applets Java. Cependant l’inconvénient est qu’on se limite uniquement aux plates-formes Windows 32 bits, ce qui n’est pas dans l’esprit de
IV.3.2.5 Les langages de script Il existe deux langages de script possibles : JavaScript (technologie Netscape) et
VBScript (technologie Microsoft). Ces derniers permettent d'indiquer aux navigateurs comment ils doivent réagir à certains événements, comme par exemple un clic de souris sur un bouton. On appelle ceci "la gestion par l'événement". Ce terme vient de
rogrammation d’interface graphique utilisateur, comme par exemple Windows pour les PC ou le System pour le Macintosh. Dans ces environnements, le système d’exploitation surveille constamment les périphériques d’entrée (clavier et
Chapitre IV HTML et Le Web
Conception d’un site Web
67
souris). Chaque fois que l’utilisateur enfance une touche ou déplace la souris, le system prend note de cette action : un événement s’est produit.
De même au niveau des scripts, le navigateur surveille constamment les éléments de document qui ont été conçus pour réagir aux actions
C’est le rédacteur du script qui détermine les éléments d’interface qui doivent répondrent aux actions de l’utilisateur et les actions qu’ils déclenchent.
JavaScript : JavaScript est aujourd’hui encore le moyen le plus courant qu’utilisent les
créateurs de pages HTML pour animer celles-ci. Contrairement à ce que pourrait laisser supposer son nom, JavaScript n’a rien à
avoir avec Java. Développé par Netscape, sous le nom de LiveScript en parallèle avec le logiciel serveur LiveWire. LiveScript a été conçu pour répondre à deux choses :
q De disposer d’un outil que les administrateurs de serveurs LiveWire pourraient exploiter pour gérer LiveWire.
q D’utiliser LiveScript comme moyen de communication entre les documents HTML et les applets Java.
Début décembre 1995, Netscape et Sun Microsystem pour des raisons de Marketing ont conjointement annoncé que le langage LiveScript prenait le nom de JavaScript. En outre, Sun Microsystem entrait dans l’équipe de développement du langage.
Les applications possibles de JavaScript Comparé aux langages de programmation, JavaScript est un langage pseudo
objet, il est à la fois simple et fort. Il ouvre aux auteurs Web de grandes perspectives car ses applications possibles sont nombreuses. Par exemple il permet :
q D’animer les bas de pages HTML en faisant défiler du texte en bas du navigateur.
q De réaliser de contrôle de saisie localement (pour contrôler la validité
q D’ouvrire de nouvelles fenêtres. q De réaliser des fonctions d’historique des q De créer des pages HTML à la demande du client. q De modifier les propriétés des documents affichés (couleur, titre, taille,
etc.). q De gérer les éléments graphiques qui sont interdépendants.
Chapitre IV HTML et Le Web
Conception d’un site Web
68
q De donner l’accès à de petites séries d’informations et fournir une interface conviviale vers ces données (proposer une mini-base de données).
Et maintenant explicitons cet exemple pour bien comprendre l’intérêt de JavaScript. Un auteur Web écrirait des instructions JavaScript pour s’assurer de la
des informations entrées par l’utilisateur dans le formulaire. Au lieu de forcer le serveur ou la base de données à réaliser la validation des données ce qui demande des échanges de données entre le navigateur et le serveur, donc une perte de temps.
JavaScript est fort répandu parmi les navigateurs. Néanmoins il présente
plusieurs inconvénients. Tout d’abord, la simplicité du langage a pour conséquence ses limites. Il n’est pas possible de manipuler des notions complexes dans ces pages et
tions élémentaires sont possibles. De plus l’interprétation de JavaScript est assez différente d’un navigateur à un autre et il est délicat de réaliser des pages qui fonctionnent correctement pour tous les navigateurs.
JavaScript a fait aussi l’objet de nombreuses critiques dues aux faiblesses que présente sa conception de la sécurité. Il était possible au début à un script JavaScript de lire ou d’écrire sur un disque dur du poste client, en exploitant certaines bogues du navigateur.
Les différentes version de JavaScript : Il existe à l'heure actuelle plusieurs versions de Javascript, implémentées plus
ou moins par les versions successives des navigateurs Netscape Navigator et Microsoft I.Explorer. Plus précisément, Microsoft emploie le terme Jscript pourlangage de script "ECMA 262" que supporte son navigateur. Jscript est un langage qui a de nombreux points communs avec JavaScript, mais dont l’évolution porte des noms différents. Voici un tableau résumant les différentes versions avec les navigateurs compatibles ainsi que la balise définissant la version.
Version Compatibilité Balise
JavaScript 1.0 I.Explorer 3.0 - Netscape 2.0
<SCRIPT LANGUAGE="JavaScript1.0">
Javascript 1.1 Netscape 3.0 <SCRIPT LANGUAGE="JavaScript1.1">
Javascript 1.2 I.Explorer 4.x - Netscape 4.x
<SCRIPT LANGUAGE="JavaScript1.2">
Chapitre IV HTML et Le Web
Conception d’un site Web
69
Pour simplifier, disons que Netscape Navigator et Microsoft I.Explorer supportent JavaScript de façon différente mais comparable en terme d’achèvement. A partir des versions 4 des navigateurs, les différences s’atténuent du langage, dont la standardisation a été confiée à un organisme de normalisation indépendant, l’ECMA. Cependant il reste toujours difficile de réaliser un code JavaScript qui fonctionne correctement sur des milieux hétérogènes.
Comment Intégrer un script JavaScript Pour intégrer un script JavaScript dans une page HTML, on introduit des lignes
de code qui sont repérées par les balises <SCRIPT> et </SCRIPT>. Ces lignes de code font partie de la page HTML et sont donc envoyées aules parties statiques de la page.
Les marqueurs <SCRIPT> et </SCRIPT> indiquent au navigateur qu’il doit interpréter en tant que scripte le texte qu’ils entourent. Et du fait que d’autres langages de scripts sont susceptible d’évoluer à l’avenir, on doit spécifier le nom précis du langage, dont lequel est écrit le code, avec l’attribut LANGUAGE. Lorsque le navigateur reçoit cette information indiquant que le script utilise le langage JavaScript,
égré JavaScript pour gérer le code. De plus on doit entourer les scripts par des balises de commentaires (<!-- 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 :
Chapitre IV HTML et Le Web
Conception d’un site Web
70
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.
<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>
<SCRIPT SRC="EmpJScript.js" TYPE="text/JavaScript">
Chapitre IV HTML et Le Web
Conception d’un site Web
71
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 pou3D 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 à causmathé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 micro-
Chapitre IV HTML et Le Web
Conception d’un site Web
72
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 :
On peut faire connaître notre site avec d’autres possibilités : q 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.
q 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.
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
http ://www.submit-it.com
Chapitre IV HTML et Le Web
Conception d’un site Web
73
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.
On peut aussi contacter l’un des réalisateurs de site, par la même procédure.
<A HREF="mailto : notre adresse e-mail">texte du lien</A>
Chapitre IV HTML et Le Web
Conception d’un site Web
74
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).
Chapitre V DHTML
Conception d’un site Web
76
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.
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
CSS (styles)
Scripts (JavaScript – VBScript)
DOM (Document Object
Model)
DHTML
Chapitre VI XML
Conception d’un site Web
90
VI.1 Origine de XML :
-textuels sur une immense échelle. Depuis 1995, les moteurs de recherche ont démontré la stupéfiante carecherche d'information rendue possible par le WWW.
Ainsi, avant l'apparition de XML (eXtensible Markup Language), existaient : • Un langage de balisage normalisé, riche en sémantique mais relativement
lourd à mettre en oeuvre et inadapté au Web, le SGML (Standard Generazed Markup Language).
• Un langage parfaitement adapté au Web (puisque développé uniquement pour cette application) mais dont les applications sont limitées par une bibliothèque de balises figée et réduite, le HTML. De plus il ne peunavigateurs.
Il convenait donc de définir un langage qui conserve les qualités d’HTML (simplicité d’apprentissage, contenu multimédia, gestion des liens hyper-textuels, utilisation du langage de script), et d’en gommer les défauts tout en offrant la richesse sémantique de SGML. C'est la raison d'être de XML.
XML est un sous-ensemble au sens strict de SGML, langage de description de structure de données, très complet utilisé en GED (Gestion électronique de documents).
XML a été développé par un groupe de travail XML Working Group (initialement connu sous le nom de comité d'examen éditorial SGML ou SGML Editorial Review Board), constitué sous les auspices du Consortium du World Wide Web (W3C) en 1996. Le GT était présidé par Jon Bosak de Sun Microsystems avec la participation active d'un groupe d'intérêt XML (XML Special Interest Group) auparavant connu sous le nom de groupe de travail de SGML (SGML Working Group) également organisé par le W3C.
Les objectifs de conception de XML sont les suivants : q XML devrait pouvoir être utilisé sans difficulté sur
Internet. q XML devrait soutenir une grande variété d'applications. q XML devrait être compatible avec SGML. q Il devrait être facile d'écrire des programmes traitant les
documents XML. q Les documents XML devraient être raisonnablement clairs
pour être très facilement lisibles. q La conception de XML devrait être préparée rapidement. q La conception de XML sera formelle et concise. q Il devrait être facile de créer des documents XML.
XML est en quelque sorte une version allégée de SGML : « il offre 80% des fonctionnalités de SGML pour seulement 20% de sa complexité! », prétendent ses auteurs.
XML peut être considéré comme un méta-langage permettant de définir d'autres langages. Sa force réside dans sa capacité à pouvoir décrire n'importe quel domaine de
Chapitre VI XML
Conception d’un site Web
91
données grâce à son extensibilité. Il va permettre de structurer, poser le vocabulaire et la syntaxe des données qu'il va contenir. XML se caractérise par les points suivants :
q Lisibilité. q Autodescriptif et extensible. q Une structure arborescente. q Universel et portable. q Déployable. q Intégration.
VI.2 Introduction de XML :
XML est un langage de marquage constitué de balises tout comme HTML. Il se -chemin entre SGML (le langage de référence en milieu professionnel pour
la gestion électronique des documents, le GED) et HTML que l'on rencontre tous les jours sur l'Internet.
XML est l'acronyme de eXtensible Markup Language, cela signifie que XML n'est pas un langage sémantiquement figé comme peut l'être HTML mais au contraire un langage ouvert. C'est à dire que l'auteur d'un document XML peut créer ses propres balises
Exemple : La balise <INSTRUMENT> peut être définie pour désigner un instrument de
musique. Cela s'écrirait de la façon suivante :
Dans un document XML, on s'efforcera de ne pas tenir compte de la mise en forme mais seulement du contenu de celui-ci; la mise en forme étant réalisée par la feuille de style.
Et puisque dans un document XML l'information pertinente est marquée par des balises portant des noms significatifs, il sera plus facile de retrouver l'information en s'appuyant sur le nom de ces balises pour effectuer des recherches. En effet, en HTML on ne sait faire actuellement que de la recherche plein-texte qui aboutit la plupart du temps à des documents qui n'ont rien à voir avec notre recherche de départ, c'est ce que l'on appelle le bruit.
VI.2.1 De quoi se compose un document XML : Principalement un document XML se compose de trois parties :
q La DTD (Document type Declaration) qui décrit la structure de données. q Les feuilles de style XSL (ou CSS) qui permettent le formatage des données. q Le document lui-même qui contient les données (texte, image, vidéo, etc.).
IV.2.2 Structure d'une feuille XML : Toute feuille XML est composée de la façon suivante :
q un prologue : il contient diverses déclarations facultatives mais recommandées q le contenu du document avec les balises associées q des commentaires éventuels
<INSTRUMENT>Guitare</INSTRUMENT>
Chapitre VI XML
Conception d’un site Web
92
Le prologue peut contenir une déclaration XML,des instructions de traitement et une déclaration de type de document
La déclaration XML est facultative mais fortement conseillée, Elle indique au processeur qui va traiter le document :
q La version du langage XML utilisée dans le document. q Le codage de caractères utilisé dans le document, si la valeur par défaut ne
convient pas, XML utilise les jeux de caractères définis par la norme ISO 10646, les processeurs XML doivent être capables de traiter au moins les codages UTF-8 et UTF-16.
q L'existence de déclarations extérieures au document qui doivent être prises en compte pour le traitement de celui-ci. Si l'attribut standalone a la valeur «yes», le processeur considère que toutes les déclarations nécessaires au traitement du document y sont incluses. Si cet Attribut a la valeur «rechercher des déclarations dans d'autres fichiers que celui qui contient cette déclaration XML, pour pouvoir traiter convenablement le document.
Exemple : Dans cet exemple, on a déclaré un document de type XML dans sa version
actuelle 1.0 qui utilise un encodage de type UTF-8 et qui ne possède pas de DTD. Chacune de ces trois informations, version du langage, codage des caractères
et complétude du document, est facultative mais doit apparaître dans cet ordre. DTD : La DTD est l'acronyme de Document Type Définition ou en français Définition
de type de document. Son rôle consiste à définir la structure interne d’un document XML. Elle permet de spécifier ces éléments ainsi que leurs ordres et leurs fréquences
feuille de sécurité sociale » qui décrit le contenu d’une telle feuille.
Il est à noter que l'utilisation d'une DTD est une caractéristique optionnelle d'un fichier XML. Dans le jargon XML, un document qui n'en possède pas est dit bien formé (Well-formed) si sa structure respecte les règles imposées par XML. A l'inverse s'il en utilise une le document sera dit valide.
La DTD peut prendre deux formes : • Soit interne, donc incluse dans la feuille XML • Soit externe c'est à dire qu'elle est dis sociée du contenu du document. C'est
sa forme la plus courante, ce qui permet de la réutiliser pour créer d'autre document qui devront avoir la même structure.
Une DTD commence toujours par <!DOCTYPE et se termine par ]>. La racine du document est renseignée après <!DOCTYPE et doit être également définie comme un ELEMENT de la DTD.
La DTD est donc construite à partir d'un ensemble de déclarations permettant de définir le type, la nature et les contraintes liés à chaque nouveau marqueur.
Exemple de document XML avec une déclaration de type de document :
<?xml version=’1.0’ encoding=’UTF-8’ standalone=’yes’?>
Chapitre VI XML
Conception d’un site Web
93
Document avec DTD externe : Document avec DTD interne :
VI.3 XSL : Le XSL Extensible Style Language est le langage utilisé pour définir les feuilles
de style qui seront associées aux documents XML. C'est le fichier XSL qui permettra de définir que tel élément XML doit être affiché avec telle fonte, de telle couleur, etc. Ces décisions seront, grâce à XSL, prises par le créateur du document qui aura ainsi un meilleur contrôle sur l'apparence de son document. Il pourra également faire référence à un fichier XSL public déjà existant. Le XSL s'inspire de 2 normes de feuilles de style, le Cascading Style Sheet, qui est utilisé avec des fichiers HTML et le DSSSL (Document Style Semantics and Specification Language) qui est une norme de feuilles de style plus complexe. Encore une fois les développeurs choisissent le moyen terme: XSL emprunte au CSS et au DSSSL. XSL est encore en développement, XSL n'est en effet qu'une "Note" du W3C, c'est à dire que XSL doit franchir les 3 autres étapes qui sont "brouillon", puis "recommandation proposée" avant de devenir une "recommandation officielle". (Notons toutefois que la réflexion sur les modèles de feuilles de style dont s'inspire le XSL est passablement avancéesa deuxième version. CSS2 est maintenant une recommandation officielle du W3C tandis que le DSSSL est déjà une norme ISO). VI.4 Conclusion :
Ces quelques lignes devraient suffire pour entrevoir la révolution qu'amène le format XML. XML est déjà supporté par Internet Explorer et Netscape Navigator. Il ne manque que les développements d'une masse importante de documents XML pour qu'on commence à profiter de cette richesse de balisage et des traitements qui seront possibles. Est-ce à dire que XML remplacera HTML? Non. HTML demeure et continue de se développer (HTML 4.0 est une recommandation officielle du W3C). HTML continue d'être utile pour des petits documents publicitaires ou pour des documents qui n'ont pas un cycle de vie très long. Par contre, pour les documents que l'on placera sur nos rayons virtuels, XML représente une percée technologique importante.
<?xml version="1.0"?> <!DOCTYPE accueil SYSTEM "hello.dtd"> <accueil>hello word!</accueil>
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE accueil [ <!ELEMENT accueil (#PCDATA)> ]> <accueil>Hello word!</accueil>
Chapitre V DHTML
Conception d’un site Web
77
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 :
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 :
IV.2.3 Feuille de style global :
<P STYLE="FONT : 14pt Arial; COLOR :green"> ce texte va s’afficher en couleur vert, en 14 points avec la police Arial. </P>
STRONG {font-weight:bold}
Chapitre V DHTML
Conception d’un site Web
78
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.
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 :
<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>
<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>
Chapitre V DHTML
Conception d’un site Web
79
Maintenant on peut lier à ce document autant de pages HTML qu’on souhaite, en employant seulement la syntaxe suivante :
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:
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:
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:
<HTML> <HEAD><TITLE>Feuilles de style externe</TITLE> <LINK REL="StyleSheet" HREF="style.css" TYPE="text/CSS" </HEAD>
H2{ font: 14pt Vernada; color:#0000FF; font-weight: bold; font-style: italic}
A {color:#FF0000; text-decoration: none}
[Marqueur HTML].[nom de la classe][déclaration]
Chapitre V DHTML
Conception d’un site Web
80
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:
Pour choisir entre ces deux classes dans notre page HTML, on utilise l'attribut
classe, de la manière suivante :
a) Le sélecteur CLASS appliqué à tout marqueur HTML : La syntaxe d'une classe potentiellement applicable à tous les marqueurs HTML
omme suit:
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
Notons que le symbole # est nécessaire. Par exemple, définissons l'attribut
ID suivant:
<STYLE TYPE="text/css"> <!-- H1.sans{font: 18pt Arial} H1.classique { color: blue; font-family: "Bookman Old Style"} --> </STYLE>
<H1 class= classique>bonjour! Messieurs</H1>
<STYLE TYPE="text/css"> <!-- .elegant { color: black; font-family: "Book Antiqua"} -->
#[nom d'identification] [déclaration]
Chapitre V DHTML
Conception d’un site Web
81
c) Pseudo-classes : Un ensemble d'éléments qui répondent à un même critère de contexte, forment
ce que l'on appelle une pseudo-classe. Ils sont spécifiés dans les feuilles de style, par
l'ajout de deux points (":") A:link {font-size:14px; color: royalblue} A:visited {font-size:16px; font-style: italic; color: maroon} A:active {color: red}
Parce que seules les ancres (Anchor) peuvent appartenir à active, link ou visited, on peut aussi les définir sans ajouter le A (qui spécifie les ancres) et donc, on
peut écrire l'exemple précédent par : :link {font-size:14px; color:royalblue} :visited {font-size:16px; font-style:italic; color:maroon} :active {color:red}
V.4.2 Sélecteurs : a) Sélecteurs simples : Un sélecteur simple associe un élément (par son type ou son attribut) à une
règle particulière et cela, quelle que soit la position qu'il occupe parmi les autres éléments. On peut grouper plusieurs sélecteurs simples, à une même règle de présentation, en les séparant par des virgules (",").
H1,H2 {color:navy} H3, H4, H5 {color:red} H6,H7 {color:green}
Dans cet exemple, les en-têtes H1 et H2 sont affichés en bleu, H3,H4 et H5 sont affichés en rouge, H6 et H7 sont affichés en vert.
b) Sélecteurs contextuels : Comme leur nom l'indique, les sélecteurs contextuels associent une règle
particulière à un élément, mais en fonction de sa situation. Par exemple, tous les
<STYLE TYPE="text/css"> <!-- #copyright {font-size: italic; font-size: smaller; color: red; } --> </STYLE>
Chapitre V DHTML
Conception d’un site Web
82
éléments <STRONG> de classe ex (CLASS="ex") situés dans des paragraphes (P) sont affichés en jaune. Si un élément <STRONG> n'est pas inséré dans un élément P
(SPAN, DIV...) ou un élément P de classe différente, la règle ne lui sera pas appliquée. On sépare par des espaces les sélecteurs contextuels que l'on veut grouper.
Par exemple :
Codes HTML et visualisation : Résultat :
Voici un élément strong situé dans un élément P de classe ex.
Chaque sélecteur peut faire référence à une CLASSE, un ID ou un TYPE d'élément.
V.4.3 GROUPES : La création des groupes est une technique qui permet de condenser les balises
de style et autres attributs. Par exemple voici un code qui n'utilise pas les groupes : Et voici comment il est possible de grouper cette classe : Les résultats sont les mêmes.
V.5 Animation des pages Web : V.5.1 Principe : L'animation des éléments présents sur une page Web se fait en modifiant leurs
propriétés (position, hauteur, largeur, visibilité, z-index, etc.) ou en utilisant leurs méthodes (fonctions associées à un élément). Cela ne peut se faire qu'à l'aide d'un code Javascript, permettant de modifier les propriétés des éléments, suite à des événements
utilisateurs (clic sur la souris, déplacement de la souris,...), et cela grâce à une structuration des éléments dans la page définie par le DOM (Document Object Model).
P.1{font: Arial; font-size: 12pt; line-height: 14pt}
P.1{font: 12/14pt Arial}
P STRONG.ex {color: green}
<P> Voici un élément <STRONG CLASS="ex">strong</STRONG> situé dans un élément P de classe <EM>ex</EM>. </P>
Chapitre V DHTML
Conception d’un site Web
83
V.5.2 Qu'est-ce que le DOM? : Le DOM est une spécification développée par le W3C, l'organisme chargé
d'élaborer des standards de l'Internet. DOM est l'abréviation de "Dynamic Object Model" ou "modèle objet du document". L'importance d'en connaître le principe vient du fait qu'il est déjà implanté dans Netscape Navigator 4 et Internet Explorer 4.
Bien que le nom soit moins populaire que DHTML, le DOM constitue la charpente sur laquelle repose la nature active d'un document. Jusqu'à maintenant, on a toujours constaté la nature passive des documents : ils ne contienneninertes. Par contre, le DOM vient bouleverser cette façon de voir, car celui-ci permet aux documents de devenir de réelles applications.
V.5.3 Qu'est-ce que cela signifie pour les documents HTML? : Le modèle objet du document rend maintenant possible la manipulation de
chacun des éléments HTML d'une page : il définit comment chacun des éléments est adressé et comment les styles leur sont appliqués. On ne pouvait espérer une telle flexibilité avant l'apparition des navigateurs 4. Son prinnavigateur et le document qui y est affiché comme une hiérarchie d'objets, possédant des propriétés intrinsèques et auxquels on peut accéder en décrivant la hiérarchie qui
Une autre caractéristique du DOM est à souligner : l'interaction, le contenu et la
structure du document sont tout à fait indépendants. Cependant il est à noter que DOM n’est qu’un modèle et que ce modèle doit être complété par une mise en œuvre concrète en JavaScript. Cette absence de précision conduit bien sûr à des différences entre les différents navigateurs supportant DOM et DHTML. En effet, les deux grands navigateurs (Internet Explorer 4.x et Netscape 4.x) ne sont pas entièrement compatibles. Internet Explorer 4.x donne beaucoup plus de possibilités d'action (par les scripts) sur les éléments du document HTML.
V.5.4 La structure du DOM : Il s'agit d'une structure en couches qui peut comporter un nombre infini de
nœuds. Tous les nœuds, excepté le nœud racine, possèdent un parent. De plus, chaque nœud est numéroté séquentiellement, de façon à l'identifier (il peut posséder également un nom). En somme, les couches du document consistent en une collection ordonnée d'éléments où chacun d'eux constitue un objet.
Qu'est-ce que cela représente en réalité pour un document HTML? Voyons à quoi ressemble la structure en couches pour les objets d'un document Web.
Chapitre V DHTML
Conception d’un site Web
84
Structure des principaux éléments HTML :
- window - location - frames - history - navigator - events - screen - documents
- links - anchors - images - filters - forms - applets - embeds - plug-ins - frames - scripts - all - selection - stylesheets - body
Chaque élément est accessible en parcourant la structure en couche ou en
l'adressant par référence à son numéro, son ID ou son nom. On constate de cette façon que les objets et les propriétés sont facilement manipulables à l'aide du JavaScript.
Qu'est-ce qu'une couche? :
Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des "couches"
contenant des éléments et pouvant être positionnés sur l'écran. Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes d'autres balises HTML, et dont les attributs sont entre-autres:
q La position par rapport au haut du navigateur q La position par rapport à la bordure gauche du navigateur
Chapitre V DHTML
Conception d’un site Web
85
q La largeur q La hauteur q Le Z-Index, c'est-à-dire le niveau de superposition de la balise.
En effet, on appelle ces conteneurs HTML "couches" car il s'agit d'éléments HTML pouvant être superposés à l'écran et pouvant être déplacés séfenêtre du navigateur grâce à du Javascript. De plus, le z-index définit l'ordre de
superposition des éléments, c'est-à-dire qui se trouve au-dessus des autres.
Les balises DIV, SPAN et LAYER :
Selon que l'on utilise Internet Explorer ou Netscape Navigator, la façon d'accéder aux propriétés des éléments est différente, ainsi que les propriétés elles-mêmes (il s'agira donc dans un premier temps de déterminer par l'intermédiaire du script le type de navigateur utilisé, puis adapter la notation en fonction du navigateur).
Les balises permettant de constituer des couches sont les balises LAYER, SPAN et DIV. La première (LAYER qui signifie justement couche) est une balise spécifique à Netscape Navigator. Les balises DIV et SPAN sont plus génériques mais sont
toutefois mieux supportées par Internet Explorer que Netscape Navigator. La balise LAYER :
Netscape permet d'accéder aux différentes couches en utilisant la syntaxe suivante:
ou
Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante:
Voici un tableau résumant les attributs de la balise LAYER :
Propriété Valeur Description
Name Chaîne de caractère Définit un identifiant unique pour la couche
document.layers['nom']. attribut
document.layers.nom. attribut
<LAYER NAME="IMG1" LEFT="20" TOP="30"> <IMG SRC="image.gif"> </LAYER> <LAYER NAME="IMG2" LEFT="25" TOP="35"> <IMG SRC="image2.gif"> </LAYER>
Chapitre V DHTML
Conception d’un site Web
86
Left valeur numérique entière distance en pixel à la bordure gauche
Top valeur numérique entière distance en pixel au haut de la page
Les balises DIV et SPAN :
Avec Internet Explorer (versions 4 et supérieures), le positionnement des on le concept des CSS-P, au moyen des balises DIV et SPAN.
Etant donné que le navigateur Internet Explorer 4 est apparu après Netscape Navigator 4, les possibilités "dynamiques" qu'il offre sont plus vastes que celles de Netscape, c'est-à-dire qu'il offre plus d'attributs au niveau de ses balises, pouvant être modifiées par l'intermédiaire d'un code écrit en Javascript après chargement de la page. Avec les balises DIV et SPAN, le positionnement peut se faire de trois façons : statique,
absolu et relatif. La mise en forme normale des documents HTML correspond au
positionnement statique, qui est appliqué par défaut.
Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (avec l’attribut top) et de gauche à droite (avec l’attribut left).
Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans les balises DIV ou SPAN seront
positionnés à la suite des éléments HTML. Internet Explorer définit un objet appelé "all" contenant tous les éléments DIV.
Ainsi, l'accès aux éléments se fait par la syntaxe suivante:
Exemple :
Actuellement, si tous les éléments du corps du document acceptent le positionnement relatif (et statique bien sûr), le positionnement absolu n'est reconnu
- APPLET - BUTTON - DIV - SPAN
- INPUT - OBJECT - SELECT – FIELDSET - IFRAME - IMG - TABLE - TEXTAREA
document.all.nom.attribut
<DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible;z-index : 2;"> éléments HTML </DIV>
Chapitre V DHTML
Conception d’un site Web
87
Voici un tableau résumant les attributs des balises DIV et SPAN :
Propriété Valeur Description
position Static absolute relative
Aucun mouvement par rapport au docu-ment positionnement par rapport au document par rapport à l'élément précédent
left Auto (par défaut) valeur numérique entière valeur en pourcentage (%)
distance à la bordure gauche automatique distance à la bordure gauche en pixels distance à la bordure gauche en pour -centage
top Auto (par défaut) valeur numérique entière valeur en pourcentage (%)
distance au sommet automatique distance au sommet en pixels distance au sommet en pourcentage
width auto valeur numérique entièrevaleur en pourcentage (%)
largeur automatique largeur de l'élément en pixels largeur de l'élément en pourcentage
height Auto (par défaut) valeur numérique entière valeur en pourcentage (%)
hauteur automatique hauteur de l'élément en pixels hauteur de l'élément en pourcentage
overflow
visible hidden auto scroll
affiche le contenu même s'il est trop grand cache le contenu superflu automatique affiche des barres de défilement
clip
auto bottom left right top
découpage automatique découpage en bas découpage à gauche découpage à droite découpage en haut
visibility inherit hidden visible
visibilité par défaut caché visible
z-index auto valeur numérique entière
superposition automatique valeur indiquant la profondeur
Enfin, voici un bref aperçu des actions réalisables en DHTML et la façon de les effectuer sur les deux navigateurs :
Chapitre V DHTML
Conception d’un site Web
88
Action Netscape Navigator Internet Explorer
Modifier l'image de fond
document.layers.nom.background document.all.nom.style.backgroundImage
Modifier la couleur du fond
document.layers.nom.bgColor document.all.nom.style.backgroundColor
Modifier le clipping
document.layers.nom.clip document.all.nom.style.clip
Modifier le contenu
document.layers.nom.open(); document.layers.nom.writeln();
document.all.nom.innerHTML
Modifier la distance à gauche
document.layers.nom.left document.all.nom.style.left
Accéder au nom objet.name objet.id objet.name
Modifier la visibilité
document.layers.nom.visibility document.all.nom.style.visibility
Modifier la distance au haut
document.layers.nom.top document.all.nom.style.top
Modifier le z-index
document.layers.nom.zIndex document.all.nom.style.zIndex
Chapitre VI XML
Conception d’un site Web
90
VI.1 Origine de XML :
-textuels sur une immense échelle. Depuis 1995, les moteurs de recherche ont démontré la stupéfiante carecherche d'information rendue possible par le WWW.
Ainsi, avant l'apparition de XML (eXtensible Markup Language), existaient : • Un langage de balisage normalisé, riche en sémantique mais relativement
lourd à mettre en oeuvre et inadapté au Web, le SGML (Standard Generazed Markup Language).
• Un langage parfaitement adapté au Web (puisque développé uniquement pour cette application) mais dont les applications sont limitées par une bibliothèque de balises figée et réduite, le HTML. De plus il ne peunavigateurs.
Il convenait donc de définir un langage qui conserve les qualités d’HTML (simplicité d’apprentissage, contenu multimédia, gestion des liens hyper-textuels, utilisation du langage de script), et d’en gommer les défauts tout en offrant la richesse sémantique de SGML. C'est la raison d'être de XML.
XML est un sous-ensemble au sens strict de SGML, langage de description de structure de données, très complet utilisé en GED (Gestion électronique de documents).
XML a été développé par un groupe de travail XML Working Group (initialement connu sous le nom de comité d'examen éditorial SGML ou SGML Editorial Review Board), constitué sous les auspices du Consortium du World Wide Web (W3C) en 1996. Le GT était présidé par Jon Bosak de Sun Microsystems avec la participation active d'un groupe d'intérêt XML (XML Special Interest Group) auparavant connu sous le nom de groupe de travail de SGML (SGML Working Group) également organisé par le W3C.
Les objectifs de conception de XML sont les suivants : q XML devrait pouvoir être utilisé sans difficulté sur
Internet. q XML devrait soutenir une grande variété d'applications. q XML devrait être compatible avec SGML. q Il devrait être facile d'écrire des programmes traitant les
documents XML. q Les documents XML devraient être raisonnablement clairs
pour être très facilement lisibles. q La conception de XML devrait être préparée rapidement. q La conception de XML sera formelle et concise. q Il devrait être facile de créer des documents XML.
XML est en quelque sorte une version allégée de SGML : « il offre 80% des fonctionnalités de SGML pour seulement 20% de sa complexité! », prétendent ses auteurs.
XML peut être considéré comme un méta-langage permettant de définir d'autres langages. Sa force réside dans sa capacité à pouvoir décrire n'importe quel domaine de
Chapitre VI XML
Conception d’un site Web
91
données grâce à son extensibilité. Il va permettre de structurer, poser le vocabulaire et la syntaxe des données qu'il va contenir. XML se caractérise par les points suivants :
q Lisibilité. q Autodescriptif et extensible. q Une structure arborescente. q Universel et portable. q Déployable. q Intégration.
VI.2 Introduction de XML :
XML est un langage de marquage constitué de balises tout comme HTML. Il se -chemin entre SGML (le langage de référence en milieu professionnel pour
la gestion électronique des documents, le GED) et HTML que l'on rencontre tous les jours sur l'Internet.
XML est l'acronyme de eXtensible Markup Language, cela signifie que XML n'est pas un langage sémantiquement figé comme peut l'être HTML mais au contraire un langage ouvert. C'est à dire que l'auteur d'un document XML peut créer ses propres balises
Exemple : La balise <INSTRUMENT> peut être définie pour désigner un instrument de
musique. Cela s'écrirait de la façon suivante :
Dans un document XML, on s'efforcera de ne pas tenir compte de la mise en forme mais seulement du contenu de celui-ci; la mise en forme étant réalisée par la feuille de style.
Et puisque dans un document XML l'information pertinente est marquée par des balises portant des noms significatifs, il sera plus facile de retrouver l'information en s'appuyant sur le nom de ces balises pour effectuer des recherches. En effet, en HTML on ne sait faire actuellement que de la recherche plein-texte qui aboutit la plupart du temps à des documents qui n'ont rien à voir avec notre recherche de départ, c'est ce que l'on appelle le bruit.
VI.2.1 De quoi se compose un document XML : Principalement un document XML se compose de trois parties :
q La DTD (Document type Declaration) qui décrit la structure de données. q Les feuilles de style XSL (ou CSS) qui permettent le formatage des données. q Le document lui-même qui contient les données (texte, image, vidéo, etc.).
IV.2.2 Structure d'une feuille XML : Toute feuille XML est composée de la façon suivante :
q un prologue : il contient diverses déclarations facultatives mais recommandées q le contenu du document avec les balises associées q des commentaires éventuels
<INSTRUMENT>Guitare</INSTRUMENT>
Chapitre VI XML
Conception d’un site Web
92
Le prologue peut contenir une déclaration XML,des instructions de traitement et une déclaration de type de document
La déclaration XML est facultative mais fortement conseillée, Elle indique au processeur qui va traiter le document :
q La version du langage XML utilisée dans le document. q Le codage de caractères utilisé dans le document, si la valeur par défaut ne
convient pas, XML utilise les jeux de caractères définis par la norme ISO 10646, les processeurs XML doivent être capables de traiter au moins les codages UTF-8 et UTF-16.
q L'existence de déclarations extérieures au document qui doivent être prises en compte pour le traitement de celui-ci. Si l'attribut standalone a la valeur «yes», le processeur considère que toutes les déclarations nécessaires au traitement du document y sont incluses. Si cet Attribut a la valeur «rechercher des déclarations dans d'autres fichiers que celui qui contient cette déclaration XML, pour pouvoir traiter convenablement le document.
Exemple : Dans cet exemple, on a déclaré un document de type XML dans sa version
actuelle 1.0 qui utilise un encodage de type UTF-8 et qui ne possède pas de DTD. Chacune de ces trois informations, version du langage, codage des caractères
et complétude du document, est facultative mais doit apparaître dans cet ordre. DTD : La DTD est l'acronyme de Document Type Définition ou en français Définition
de type de document. Son rôle consiste à définir la structure interne d’un document XML. Elle permet de spécifier ces éléments ainsi que leurs ordres et leurs fréquences
feuille de sécurité sociale » qui décrit le contenu d’une telle feuille.
Il est à noter que l'utilisation d'une DTD est une caractéristique optionnelle d'un fichier XML. Dans le jargon XML, un document qui n'en possède pas est dit bien formé (Well-formed) si sa structure respecte les règles imposées par XML. A l'inverse s'il en utilise une le document sera dit valide.
La DTD peut prendre deux formes : • Soit interne, donc incluse dans la feuille XML • Soit externe c'est à dire qu'elle est dis sociée du contenu du document. C'est
sa forme la plus courante, ce qui permet de la réutiliser pour créer d'autre document qui devront avoir la même structure.
Une DTD commence toujours par <!DOCTYPE et se termine par ]>. La racine du document est renseignée après <!DOCTYPE et doit être également définie comme un ELEMENT de la DTD.
La DTD est donc construite à partir d'un ensemble de déclarations permettant de définir le type, la nature et les contraintes liés à chaque nouveau marqueur.
Exemple de document XML avec une déclaration de type de document :
<?xml version=’1.0’ encoding=’UTF-8’ standalone=’yes’?>
Chapitre VI XML
Conception d’un site Web
93
Document avec DTD externe : Document avec DTD interne :
VI.3 XSL : Le XSL Extensible Style Language est le langage utilisé pour définir les feuilles
de style qui seront associées aux documents XML. C'est le fichier XSL qui permettra de définir que tel élément XML doit être affiché avec telle fonte, de telle couleur, etc. Ces décisions seront, grâce à XSL, prises par le créateur du document qui aura ainsi un meilleur contrôle sur l'apparence de son document. Il pourra également faire référence à un fichier XSL public déjà existant. Le XSL s'inspire de 2 normes de feuilles de style, le Cascading Style Sheet, qui est utilisé avec des fichiers HTML et le DSSSL (Document Style Semantics and Specification Language) qui est une norme de feuilles de style plus complexe. Encore une fois les développeurs choisissent le moyen terme: XSL emprunte au CSS et au DSSSL. XSL est encore en développement, XSL n'est en effet qu'une "Note" du W3C, c'est à dire que XSL doit franchir les 3 autres étapes qui sont "brouillon", puis "recommandation proposée" avant de devenir une "recommandation officielle". (Notons toutefois que la réflexion sur les modèles de feuilles de style dont s'inspire le XSL est passablement avancéesa deuxième version. CSS2 est maintenant une recommandation officielle du W3C tandis que le DSSSL est déjà une norme ISO). VI.4 Conclusion :
Ces quelques lignes devraient suffire pour entrevoir la révolution qu'amène le format XML. XML est déjà supporté par Internet Explorer et Netscape Navigator. Il ne manque que les développements d'une masse importante de documents XML pour qu'on commence à profiter de cette richesse de balisage et des traitements qui seront possibles. Est-ce à dire que XML remplacera HTML? Non. HTML demeure et continue de se développer (HTML 4.0 est une recommandation officielle du W3C). HTML continue d'être utile pour des petits documents publicitaires ou pour des documents qui n'ont pas un cycle de vie très long. Par contre, pour les documents que l'on placera sur nos rayons virtuels, XML représente une percée technologique importante.
<?xml version="1.0"?> <!DOCTYPE accueil SYSTEM "hello.dtd"> <accueil>hello word!</accueil>
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE accueil [ <!ELEMENT accueil (#PCDATA)> ]> <accueil>Hello word!</accueil>
Chapitre VII JavaScript
Conception d’un site Web
96
VII.1 Généralités :
version 2.0.
L’emploi de JavaScript n’est pas limité au Web. Il est adapté à tout réseau utilisant la technologie Internet, le protocole http et les documents HTML.
Dans notre travail nous avons utilisé JavaScript comme un outil pédagogique pour mieux présenter l’interface des pages web, ainsi nous avons intégré des codes en JavaScript dans les frames afin d’obtenir des pages web sophistiquées et faciles à utiliser. Nous avons aussi utilisé JavaScript pour faire quelques tâches au niveau de la machine cliente avant l’envoi du formulaire au serveur.
Ce présent chapitre à deux buts : donner un bref aperçu sur les concepts de la programmation orientée objet, et établir quelques références du langage JavaScript VII.2 Caractéristiques :
JavaScript est un langage sécurisé, incapable d’écrire sur le disque de l’utilisateur ou d'exécuter toutes autres actions susceptibles d’être utilisées par un virus pour endommager le système. Les caractéristiques les plus importantes de JavaScript sont :
q JavaScript est un langage interprété, son code source est téléchargé et traduit en instructions que l’ordinateur peut comprendre au moment où
q JavaScript est à base d’objets ; les programmes écrits en JavaScript utilisent des objets pré-définis. Autrement dit ; nous sommes limités en termes de création d’objets propres.
q JavaScript implique un typage faible des variables ; autrement dit, les variables peuvent contenir tout type de données.
q Le code JavaScript est intégré ; il fait toujours partie d’un fichier HTML.
VII.3 Programmation Orienté Objet : POO VII.3.1 Introduction : Aujourd’hui, il existe beaucoup de langages hybrides, ou des langages à
procédures avec quelques fonctionnalités orientées objet. A un niveau fondamental, ces langages ont été élaborés d’abord pour nous fournir une structure pour créer des
par l’ordinateur (d’où le terme "procédure"), et aussi pour nous permettre d’organiser et de manipuler les données.
Chapitre VIII Conception
Conception d’un site Web 119
Introduction
:
VIII.1. Les Outils Utilisés
VIII.1.1. Microsoft FrontPage Microsoft FrontPage 98 est un outil de création et de gestion des sites
Web expérimentés. Il comprend l’Explorateur FrontPage, qui permet de créer, concevoir et gérer l’ensemble du site Web et l’éditeur Fmodifier une page Web. Grâce à l’Explorateur FrontPage on peut créer la structure ou l’agencement du site Web, appliquer des thèmes graphiques à ses pages, organiser ses fichiers et dossiers, importer et exporter des fichiers, tester et réparer des liens hypertexte, administrer des privilèges d’accès, assurer le suivi des tâches, et lancer l’Editeur FrontPage. L’Editeur FrontPage permet de créer, concevoir et modifier des pages Web. A mesure que nous ajoutons des textes, des images, des tables, des champs de formulaires et d’autres éléments dans la page, l’Editeur FrontPage les affiche tels qu’ils apparaîtraient dans un navigateur Web.
Bien qu’il s’agisse d’un outil puissant, l’Editeur FrontPage est d’une utilisation facile en raison de son interface largement répandue, similaire à un traitement de texte. On n’a pas besoin d’insérer le code HTML pour utiliser l’Editeur FrontPage puisque ce dernier le crée automatiquement.
Il est possible de modifier directement le code HTML à l’aide du mode HTML de l’Editeur FrontPage. Dans ce mode, on peut modifier du texte, modifier des balises HTML ou du code de script.
FrontPage appartient à la famille des produits Microsoft Office et il intègre de nombreuses fonctionnalités propres à Microsoft Word et Microsoft Excel, telles que la bibliothèque des cliparts Microsoft, la vérification d’orthographe, le dictionnaire de synonymes et la modification facile des tableaux .FrontPage gère également les liens hypertexte créés dans des documents Microsoft Office.
Chapitre VIII Conception
Conception d’un site Web 120
L’Explorateur de FrontPage
L’Editeur de FrontPage
VIII.2 Outils graphiques
Nos pages Web doivent contenir plus que les textes, des images. Il n’est pas nsérer des graphiques mais la difficulté consiste à trouver la bonne qualité
Modes Affichage
Les Dossiers
Barre d’outils
Barre d’outils formulaires
Barre d’outils D’Images
Barre d’Etat
Barre d’outils Tableau
Barre d’outils Fonctions avancées
Barre d’outils Mise en Forme
Barre d’outils Standard
Chapitre VIII Conception
Conception d’un site Web 121
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
Chapitre VIII Conception
Conception d’un site Web 122
Animagic GIF
VIII.3 Outil de traitement de son
Sans le son, une page Web n’est pas complètement multimédia. Comme dans le graphique il nous a fallu un logiciel pour enregistrer et modifier des fichiers sons.
VIII.3.1 Le magnétophone Windows disposent déjà d’un outil simple et efficace :
Le magnétophone de Windows 98
VIII.4 Test des pages Il nous a fallu tester les pages crées avec l’éditeur FrontPage avec différents navigateurs, car chaque Browser (navigateur) réagit différemment, et pour cette raison on a utilisé :
Bouton d’enregistrement
Chapitre VIII Conception
Conception d’un site Web 123
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.
Chapitre VIII Conception
Conception d’un site Web 124
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.
Chapitre VIII Conception
Conception d’un site Web 125
Page d’accueil
Recherché
Nouveautés
Infos pratiques
Autres liens
Cours en ligne
Retour
Heures d’ouverture
Comment s’inscrire
personnel
Comptoir du prêt
Chapitre VII JavaScript
Conception d’un site Web
97
VII.3.2 La programmation orientée objet (POO) : "Orienté objet" est une expression largement employée pour décrire des langages
des styles de programmation, des interfaces utilisateurs. D’un point de vue conceptuel, la POO est souvent décrite comme la manière dont nous modélisons des objets réels (des
maisons, des gens, des machines, des ordinateurs, etc.) en utilisant des objets informatiques dans un langage orienté objet.
Qu’est ce qu’un objet ? La POO est fondée sur le concept d’objet, à savoir une association des données et
des procédures (qu’on appelle alors méthodes) agissant sur ces données. On pourrait dire POO est :
Mais cette association est plus qu’une simple juxtaposition. En effet, dans ce que
POO "pure", on réalise ce que l’on nomme une encapsulation
des données. Cela signifie qu’il n’est pas possible d’agir directement sobjet ; il est nécessaire de passer par l’intermédiaire de ses méthodes qui jouent ainsi le rôle d’interface obligatoire. On traduit parfois cela en disant que l’appel d’une méthode est en fait l’envoi d’un "message" à l’objet.
Le grand mérite de l’encapsulation est que, vu de l’extérieur, un objet se caractérise uniquement par les spécifications de ses méthodes, la manière dont sont réellement implantées les données étant sans importance. On décrit souvent une telle situation en disant qu’elle réalise une "abstraction des données".
Objet & Classe : En POO, apparaît généralement le concept de classe. Ce dernier correspond
simplement à la généralisation de la notion de type que l’on rencontre dans les langages classiques. Une classe, en effet, n’est rien d’autre que la description d’un ensemble d’objets ayant une structure de données commune et disposant des même méthodes. C’est essentiellement un plan qui indique à l’ordinateur comment construire un objet lorsqu’on le lui demande. Les objets apparaissent alors comme des variables d’un type.
Par exemple on décide d’écrire un programme qui gère des fenêtres. Pour cela on définit une classe appelée Fenêtre qui décrit toutes les propriétés d’un tel objet comme par exemple ses quatre coins (Haut, Gauche, Bas, Droite ), figure si-dessous.
Méthodes+Données = Objet
Chapitre VII JavaScript
Conception d’un site Web
98
Note : en POO, un objet créé à partir d’une classe est appelé "instance" de la classe.
Ainsi d’autres termes comme types d’objets, gabarits ou templates sont utilisés pour
Données membres : Les données membres sont des données enregistrées à l’intérieur d’un objet ou d’une classe. Elles sont parfois considérées comme des propriétés, ou, si elles sont dans un objet issu d’une classe, des variables d’instance. On définit quelles variables membres font partie d’une classe lors de la définition de la classe. De nouvelles occurrences de ces variables sont créées chaque fois qu’un nouvel objet de cette classe est créé. Cela signifie que toutes les occurrences d’une classe contiendront les même type de données, mais le contenu de ces variables différera d’un objet à l’autre. Un objet qui ne contient que des données membres peut être considéré comme fonctionnant quasiment comme une structure C ou RECORD Pascal qui aurait été a Dans l’exemple précédent, on peut voir que l’objet Fenêtre contient quatre variables membres, appelées Haut, Gauche, Bas, et Droite. Bien que cela impose que ces variables soient présentes dans n’importe qu’elle objet créé la valeur contenue dans chaque objet n’est pas imposée.
Méthodes
Classe : Fenêtre
Haut Gauche
Bas Droite
Objet : Fenêtre : 1
Haut 5 Gauche 100
Bas 20 Droite 125
Objet : fenêtre : 2
Haut 10 Gauche 30
Bas 30 Droite 50
issus de cette classe
Chapitre VII JavaScript
Conception d’un site Web
99
Dans les paragraphes précédents, on à vu comment les données sont contenues dans les objets dans les langages de programmation orientés objet, dans cette partie, on va voir de quelle manière le code est lui aussi inclus dans les objets d’un POO. Dans un langage traditionnel à procédures, on travaille avec des procédures et des fonctions, et l’endroit où on insère ce code dans nos programmes dépend principalemDans un langage orienté objet, les fonctions et les procédures sont remplacées par des méthodes, et chaque méthode est associée à une classe particulière. Dans l’exemple précédent, on à vu comment définir la classe Fenêtre. Maintenant dessinons cet objet, et voyons comment il pourrait changer de taille. Pour cela on dénote deux méthodes pour la classe Fenêtre : Dessin et Taille. Figure si-dessous.
Chaque objet créé à partir de la classe Fenêtre contiendra les méthodes Dessin et Taille. L’appel d’une méthode peut être considéré comme l’envoi d’un message à l’objet qui contient la méthode. Par exemple, l’appel de la méthode Dessin est assimilable à l’envoi d’un message Dessin à cet objet. Les méthodes sont principalement utilisées comme des fonctions ou des procédures comme le C, avec quelques différences importantes. Ainsi, lorsqu’une méthode est invoquée, chaque référence à une variable membre dans le code de la méthode correspondra en réalité à une variable membre de
la méthode est un membre.
Héritage : Un autre concept important en POO est celui d’héritage. Il permet de définir une
nouvelle classe à partir d’une classe existante (qu’on réutilise en bloc !), à laquelle on ajoute de nouvelles données et de nouvelles méthodes. La conception de la nouvelle classe, qui hérite des propriétés et des aptitudes de l’ancienne, peut ainsi s’appuyer sur des réalisations antérieures parfaitement au point et les spécialiser à volonté. Comme on
ilite largement la réutilisation de produits existants, et ceci
Classe : Fenêtre Haut
Gauche Bas
Droite
Dessin Taille
La classe Fenêtre avec les deux méthodes : Dessin et taille
Chapitre VII JavaScript
Conception d’un site Web
100
d’autant plus qu’il peut être réitéré autant de fois que nécessaire (la classe C peut hériter de B, qui elle-même hérite de A).
Terminologie orientée objet :
Souvent les auteurs ou les langages utilisent différents termes pour décrire des processus identiques. Par exemple l’appel d’une méthode dans un objet peut être considéré comme une invocation de la méthode, ou comme l’envoi d’un message à l’objet. Pour cela et pour achever notre petite introduction sur la POO on propose quelque terminologie de la POO :
Les variables d’un objet Variables d’instance.
Variables membres.
Propriétés.
Les méthodes d’un objet Méthodes. Fonctions membres.
Les méthodes d’appel d’un objet Appeler une méthode.
Envoyer un message. Invoquer une méthode.
Créer un objet Allouer un objet.
Instancier un objet. Créer un nouvel objet.
Créer une instance d’une classe.
Une classe dérivée d’une autre classe Sous-classe. Classe dérivée.
Classe enfant. Classe descendante.
Une classe dont dérivent d’autres classes
Classe parent.
Chapitre VII JavaScript
Conception d’un site Web
101
Classe de base.
Super classe. Ancêtre.
Dériver une nouvelle classe d’une classe existante :
Sous-classer une classe. Créer une sous-classe.
Créer une Classe dérivée. Dériver une classe.
VII.4 La hiérarchie des objets dans javaScript : Les objets sont classés en trois catégories suivant leurs fonctionnalités.
Notamment, les objets utilisés pour obtenir les entrées de la part des utilisateurs, les objets liés aux liens hypertextes et les objets de contrôle de l’écran. Au début nous commençons par la hiérarchie globale des objets.
La figure si-dessous montre la hiérarchie complètes des objets JavaScript. Notons que l’objet window (fenêtre) est l’objet le plus haut dans la hiérarchie.
Dans la suite de ce chapitre, on présentera en bref les objets window (fenêtre), location (emplacement) et history (historique). L’objet document, l’objet JavaScript le
document
window
history location
frames self top parent
link form anchor
radio
checkbok
select
button
submit
reset password
textarea
text
Hiérarchie des objets JavaScript
Chapitre VII JavaScript
Conception d’un site Web
102
VII.4.1 L’objet window (fenêtre): Propriétés Méthodes Gestionnaires
d’événements frames parent selt top status defaultStatus window
alert() close() confirm() open() prompt() setTimeout() clearTimeout()
onLoad= onUnload=
Création d’une fenêtre :
Accession aux propriétés ou méthodes de la fenêtre :
Propriétés : Propriétés Valeur Lisible Modifiable status string(chaîne) Oui Oui defaultstatus string(chaîne) Oui Oui self Objet fenêtre Oui Non parent Objet fenêtre Oui Non top Objet fenêtre Oui Non frames Objet fenêtre Oui Non window Objet fenêtre Oui non
Méthodes :
Syntaxe Valeur de retour alert(message) Aucune
Nom de l’objet fenêtre = window.open( [paramètres] )
window. propriété | méthode( [paramètres] ) self. propriété | méthode( [paramètres] ) nom de l’objet fenêtre. propriété | méthode( [paramètres] )
Chapitre VII JavaScript
Conception d’un site Web
103
confirm(message) true ou false (vrai ou faux) prompt(message, réponse par défaut) Chaîne de texte entrée par
l’utilisateur ou valeur nulle open("URL", "nom de la fenêtre" [, "caractéristiques de la fenêtre" ] )
Aucune
close() Aucune setTimeout("expression", temps alloué en millisecondes)
Valeur d’identification, à employer éventuellement avec la méthode window.clearTimeout()
clearTimeout(numéro d’identification fourni par setTimeout)
Aucune
VII.4.2 L’objet location (emplacement) :
Propriétés Méthodes Gestionnaires
d’événements hash host hostname pathname port protocol search href
Aucun Aucun
Affecter un nouvel emplacement à la fenêtre actuelle :
Accéder aux propriétés de l’objet emplacement :
Propriétés :
Propriété Valeur Lisible Modifiable
[window].location = " URL"
[window].location. propriété
Chapitre VII JavaScript
Conception d’un site Web
104
href Chaîne (string) Oui Oui hast Chaîne (string) Oui Oui host Chaîne (string) Oui Oui hostname Chaîne (string) Oui Oui pathname Chaîne (string) Oui Oui port Chaîne (string) Oui Oui protocol Chaîne (string) Oui Oui search Chaîne (string) Oui Oui
Les propriétés d’un objet location (emplacement) se rapportent essentiellement au : serveur hôte, protocole utilisé, etc. par exemple :
Voici à quoi correspondent les propriétés de l’objet location. Elles contiennent en :
Propriétés Valeur protocol "http" hostname "www.ito.com" port "80" host "www.ito.com:80" pathname "#debut" hash "http://www.ito.com:80/projet" href "index.html#debut"
VII.4.3 L’objet history (historique) Propriétés Méthodes Gestionnaires
d’événements lenght back()
forward() go()
Aucun
Accéder aux propriétés ou aux méthodes de l’objet historique :
Propriétés:
Propriété Valeur Lisible Modifiable length Nombre Oui Oui
http: // www.ito.com: 80 / projet /index.html #debut
[ window].history.propriété | méthode ( [paramètres] )
Chapitre VII JavaScript
Conception d’un site Web
105
Méthodes :
Syntaxe Valeur de retour back() Aucune forward() Aucune go(nombre relatif | "URL ou titre") Aucune
VII.4.4 L’objet document : Propriétés Méthodes Gestionnaire d’événements alinkColor anchors bgColor cookie fgColor forms lastModified linkColor links location referrer title vlinkColor
clear() close() open() write() writeln()
Aucun
Propriétés : Propriétés Valeur lisible Modifiable forms Tableau (array) Oui Oui location Chaîne (string) Oui Oui title Chaîne (string) Oui Non lastModified Chaîne (string) Oui Non anchors Tableau d’objet
anchor Oui Non
referrer Chaîne (string) Oui Non links Tableau d’objet link Oui Non cookie Chaîne (string) Oui Oui alinkColor vlinkColor bgColor fgColor
Triple hexadécimal ou une constante
Oui
Oui
Chapitre VII JavaScript
Conception d’un site Web
106
linkColor
Methods: Syntaxe Valeur de retour write("chaîne de caractères") Booléen true en cas de succès writeln("chaîne de caractères") Booléen true en cas de succès open( ["type Mime"] ) Aucune close() Aucune clear() Aucune
Dans tout document HTML/JavaScript, l’objet document est le plus important. Cet objet est défini par les balises <BODY>…</BODY> dans le fichier. Tous les autres objets sont compris à l’intérieur de l’objet document.
Un niveau en dessous, on trouve l’objet form. Un document peut contenir un ou plusieurs formulaires. La propriété forms de l’objet document fournit un tableau indexé de tous les objets form à l’intérieur du document. La notation :
document.forms[x]
Offre accès au xième formulaire dans le document, et la notation :
document.forms.length
Renvoie le nombre total de formulaire dans le document.
Chaque formulaire peut contenir d’autres objets de divers types. Ces objets sont généralement liés aux entrées de l’utilisateur et comprennent des zones pour l’entrée de texte, des boutons d’option et des choses du même genre. Chaque objet form possède une propriété length qui renvoie le nombre d’objets sur le formulaire, ainsi qu’une
element qui fournit un tableau indexé de ces objets. Ainsi la notation :
document.form[0].length
Renvoie le nombre d’objet sur le premier formulaire dans le document en cours, et ;
document.write(document.form[1].element[1].value)
Renvoie la propriété value du deuxième objet sur le deuxième formulaire dans le document.
VII.4.5 Les objets de la gestion des entrées utilisateurs : Tous les objets liés aux entrées utilisateur commencent par le mot-clé INPUT,
suivi du paramètre type qui spécifie l’objet particulier. Celui-ci est suivi d’un nombre variable de paramètres supplémentaires spécifiques de l’objet. Les objets liés aux entrées utilisateurs sont :
Chapitre VII JavaScript
Conception d’un site Web
107
ü Button :
L’objet Button génère l’affichage dans le document d’un bouton rectangulaire comportant un libellé, et ressemblant beaucoup aux boutons de commandes. La syntaxe pour un objet bouton est la suivante :
• Name est une constante de type « chaîne de caractère » spécifiant la propriété NAME de l’objet.
• Text correspond à une constante qui spécifie le texte à afficher sur le bouton ( sa propriété VALUE).
• Handler spécifie le code JavaScript qui est exécuté quand on clique sur le bouton. Il s’agit généralement, mais pas nécessairement, du nom d’une fonction. Il est à noter que la spécification d’un traitement onCLICK est optionnelle.
Cet objet possède deux propriétés, name et value. Il est lié à une seule méthode, Click(). L’exécution de cette méthode produit le même effet que l’utilisateur qui click sur le bouton.
ü Checkbox :
L’objet Checkbox génère l’affichage d’une petite case carrée dotée d’un libellé adjacent. L’utilisateur peut cliquer sur la case pour l’activer ou la désactiver. La syntaxe pour cet objet est la suivante :
• Name est une constante de type « chaîne de caractère » spécifiant la propriété NAME de l’objet. On utilise ce nom pour se référer à l’objet dans le code.
• Value spécifie la valeur à retourner au serveur lorsque le formulaire contenant la case à cocher est soumis.
<INPUT
type="Button"
name="name"
value="texte"
[OnliCk="handler"]>
<INPUT
type="Checkbox"
name="name"
value="value"
[CHECKED]
[onClick="handler"]
>text
Chapitre VII JavaScript
Conception d’un site Web
108
• CHECKED, s’il est inclus, spécifie que la case doit être initialement affichée en mode active.
• Handler spécifie le code JavaScript qui est exécuté lorsqu’on clique sur la case à cocher.
• Text est le texte qui s’affiche à coté de la case à cocher.
L’objet Checbox possède la propriété checked qui renvoie la valeur true lorsque la priété name qui renvoie la valeur la valeur de l’attribut de nom
affecté dans la balise Checkbox et la propriété value qui est utilisée pour obtenir l’attribut de valeur de l’objet ou pour le modifier. Il existe une seule méthode pour cet objet : Click(). L’exécution de cette méthode produit le même effet que l’utilisateur qui clique
ü Form :
L’objet Form constitue le point névralgique de bon nombre de choses que nous voudrons faire avec le HTML et JavaScript. Les objets d’entrée utilisateur, tels que « Text » et « Checkbox », doivent être placés sur un formulaire. On peut également utiliser des formulaires pour envoyer des données sur un serveur ou pour en récupérer. La syntaxe de l’objet Form est la suivant :
• Windowname correspond au nom de la fenêtre ou du cadre du navigateur dans lequel les réponses aux entrées sur le formulaire doivent être
• Server URL spécifie l’URL du serveur sur lequel des informations entrées dans le formulaire doivent être envoyées.
• Méthode indique comment les informations sont envoyées au serveur. Ce paramètre implique deux valeurs possibles : GET et POST.
• Enctype spécifie l’encodage MIME du formulaire.
• Handler indique le code JavaScript à exécuter lorsque le formulaire est soumis. Ce code de traitement peut controler si le formulaire est soumis ou non en renvoyant, respectivement, la valeur « true » ou « false ». généralement, ce code se compose du mot-clé return suivi d’un appel à une fonction de vérification qui renvoie la valeur souhaitée. Exemple :
<Form
name="formname"
target="windowname"
action="serverURL"
methode=methode
enctype="enctype"
[onSubmit="handler"]>
Chapitre VII JavaScript
Conception d’un site Web
109
Password:
L’objet Password est identique à l’objet Text. A ceci prés que sa valeur est masquée du fait de l’affichage d’astérisques à la place des caractères saisis. Pour définir un objet Password. On utilise la syntaxe HTML standard :
L’objet Password possède la propriété defaultvalue qui reflète l’attribut VALUE, la propriété name qui reflète l’attribut de nom de l’objet et la propriété value qui renvoie le contenu actuel de l’objet. Il existe trois méthodes pour cet objet : focus() place le point d’insertion sur l’objet, blur() retire le point d’insertion de l’objet et la méthode select() qui sélectionne, ou met en valeur, le texte affiché dans l’objet.
ü Radio :
L’objet Radio est utilisé pour l’affichage d’un ensemble d’au moins deux boutons d’options sur un formulaire. La syntaxe de création d’un objet Radio est la suivante :
Cet objet possède les propriétés checked, defaultChecked, length, name et value. La seule méthode pour cet objet est : Click() qui produit le même effet que qui clique sur le bouton.
ü Reset :
L’objet Reset génère l’affichage d’un bouton sur un formulaire, qui quand on clique dessus, remet tous les éléments du formulaire à leur valeur par défaut. La syntaxe de cet objet est la suivante :
<FORM…onsubmit="return VerifyData(this) ">
<INPUT
Type="password"
NAME=name
VALUE="value"
SIZE=size>
<INPUT
TYPE="radio"
NAME="name"
VALUE="value"
[CHECKED]
[onClick="handler"]>text
<INPUT
TYPE="reset"
NAME="name"
VALUE="button Text"
Chapitre VII JavaScript
Conception d’un site Web
110
Cet objet possède les propriétés name et value et une méthode Click().
ü Select :
L’objet Select est utilisé pour afficher une liste déroulante ou une liste de sélection. Pour définir un objet Select, on utilise la syntaxe HTML suivante :
Les propriétés de l’objet select sont : lengeth, name, option, et selectindex.
Cet objet ne possède pas de méthode.
ü Submit :
L’objet submit génère l’affichage d’un bouton qui , quand on clique dessus, engendre la soumission du formulaire. La syntaxe de cet objet est la suivante :
Les propriétés de cet objet sont : name et value.
Une méthode clik() produit le même effet que l’utilisateur qui clique sur le bouton Submit.
<SELECT
NAME="name"
SIZE="size"
[MULTIPLE]
[onBlur="BlurHandler"]
[onFocus="ChangeHandler"]>
<OPTION VALUE="value"[SELECTED]>text
</SELECTED>
<INPUT
TYPE=" submit"
NAME="name"
[onClik="handler"]>
Chapitre VII JavaScript
Conception d’un site Web
111
ü text :
L’objet text génère l ‘affichage d’une zone de texte pour la présentation et l’entde données sur un formulaire HTML. Il est identique à l’objet Text HTML standard, avec en plus l’ajout de gestionnaires d’événements. la syntaxe est la suivante :
ü textarea:
Un objet Textarea est similaire à un objet Text, à ceci prés qu’il pe ut contenir plusieurs lignes de texte. Il permet à l’utilisateur d’entrer plus de données. La syntaxe est la suivante :
Les propriétés de cet objet sont : defaultvalue, name et value. Les méthodes focus() et blur() sont utilisées respectivement pour placer le point d’insertion sur l’objet Textarea et pour l’enlever. La méthode select() sélectionne le contenu de l’objet.
VII.4.6 Les objets de la gestion des liens hypertextes : ü Anchor :
Pour définir un objet anchor ; on utilise la syntaxe HTML standard :
<INPUT
TYPE="text"
NAME="name"
VALUE="value"
SIZE="talle"
[onBlur="blurhandler"]
[onChange="ChangeHandler"]
[onFocus="selecthandler">
<TEXTAREA
NAME="name"
ROWS=rows
COLS=cols
[onBlur="BlurHandler"]
[onChange="ChangeHandler"]
[onFocus="FocusHandler"]
[onSelect="SelectHandler"]>text
</TEXTAREA>
<A HREF ="locationOrURL"
NAME = "name"
TARGET = "window">
Anchor Text
</A>
Chapitre VII JavaScript
Conception d’un site Web
112
• LocationOrURL identifie une ancre de distination ou une URL. Si cet attribut est présent l’objet anchor est égalemnet un objet LINK.
• Name spécifie la balise qui devient une cible hypertexte valide dans le document en cours.
• Window spécifie la fenêtre dans laquelle le lien est chargé. Cet attribut est requis uniquement si l’on spécifie locationOrURL.
• Anchor Texte spécifie le texte à afficher au niveau de l’ancre. L’objet anchor ne posséde ni propriétés ni méthodes.
ü LINK :
Un objet LINK est un texte ou une image qui sert de lien hypertexte. Lorsqu’on clique sur le lien la cible de ce dernier est chargée dans la fenêtre appropriée. Un lien peut également être un objet anchor. Pour définir un lien on utilse la syntaxe HTML standard, en ajoutant les gestionnaires d’événement OnClick et OnMouseOver.
L’objet link possède les propriétés suivantes: Elles permettent l’extraction de
• Hash spécifie le nom de l’ancre, éventuellement, dans l’URL cible. Il ci de la partie optionnelle de URL, qui suit le symbole # qui identifie un
endroit spécifique dans le document.
• Host spécifie la portion horstname : Port de URL cible. Si l’URL ne comprend pas de port, alors la propriété host est identique à la propriété hostname.
• Hostname spécifie l’hôte et le nom de domaine ou l’adresse IP de
• Href spécifie l’URL cible en entier.
<A HREF = " locationOrURL"
NAME = "name"
TARGET ="window"
OnClic = "ClickHandler"
OnMouseOver = "MouseOverHandler">
Text
</A>
Chapitre VII JavaScript
Conception d’un site Web
113
• pathname spécifie la portion URL/chemin d’accés de l’URL cible.
• Port spécifie le port de communication indiqué dans l’URL cible.
• Protocol spécifie le protocole de début de l’URL cible éventuellement. Donc il s’agit d’une chaîne de caractères commençant par un
• Target reflète l’attribut TARGET spécifie dans la balise de lien.
L’objet LINK ne possède pas de méthodes.
VII.4.7 L’objet navigator (navigateur) : Propriétés Méthodes Gestionnaire
d’événements appName appVersion appCodeName userAgent
Aucun Aucun
Accession aux propriétés de l’objet navigateur :
Propriétés : Propriétés Valeur Lisible Modifiable appName appVersion appCodeName userAgent
Chaîne (string)
Oui
Oui
VII.4.8 Objet string (chaîne de caractères) :
Propriété : Propriété valeur Visible Modifiable length Entier (integer) Oui Oui
Méthodes :
Syntaxe Valeur de retour Chaine.toLowercase() La chaîne en minuscules Chaine.toUpperCase() La chaîne en majuscules
Navigator.propriété
Chapitre VII JavaScript
Conception d’un site Web
114
Chaine.indexOf( chaîne de recherche [, index de démarage ] )
Position à laquelle commence la chaîne recherchée dans la chaîne analysée.
Chaine. lastindexOf( chaîne de recherche [, index de démarage ] )
Position dans la chaîne analysée, du dernier caractère de la chaîne recherchée
Chaine.charArt( index ) Le caractère se trouvant à la position index dans la chaîne analysée
Chaine.substring( indexA, indexB ) Les caractères se trouvant de la position 1 à la position 2 (non incluse)
Chaine.anchor( " nom de l’ancrage") Aucune Chaine.big() La chaîne en grands caractères Chaine.blink() Clignotement de la chaîne Chaine.bold() La chaîne en caractères gras Chaine.fixed() Espacement fixe Chaine.fontcolor( valeur de couleur ) Aucune Chaine.fontsize( entier de 1 à 7 ) Aucune Chaine.italics() La chaîne en italique Chaine.link( emplacement ou URL ) Chaine.small() La chaîne en petits caractères Chaine.strike() La chaîne barrée Chaine.sub() La chaîne en indice Chaine.sup() La chaîne en exposant
VII.5 Structure de contrôle :
If (condition) { Instructions si vrai }
If (condition) { Instructions si vrai } else { instructions si faux }
Variable = (condition) ? valeur1 : valeur2
For ( [expression initiale] ; [condition] ; [expression finale]) { Instructions }
Chapitre VII JavaScript
Conception d’un site Web
115
VII.6 Opérateurs :
VII.6.1 Comparaison :
= = Egale != Différent de > Supérieur à
>= Supérieur ou égal à < Inférieur à
<= Inférieur ou égale à
VII.6.2 Arithmétiques :
+ Plus - Moins * Multiplication / Division % Modulo ++ Incrémentation -- Décrémentation
-valeur Négation
For (variable in objet ) { Instructions }
While (condition) { Instruction }
With (objet) { Instructions }
Chapitre VII JavaScript
Conception d’un site Web
116
VII.6.3 Affectation :
= Affectation += Ajoute la valeur de droite à la variable de gauche -= Soustrait la valeur de droite de la variable de gauche *= Multiplie la valeur de gauche par la valeur de droite /= Divise la valeur de gauche par la valeur de droite %= Affecte à la valeur de gauche le modulo de cette variable avec la valeur
de droite <<= Décalage, vers la gauche, de la variable de gauche, du nombre de fois
>>= Décalage, vers la droite, de la variable de gauche, du nombre de fois
>>>= Décalage, vers la droite, de la variable de gauche, du nombre de fois
indiqué par la valeur de droite. Les bits de gauche décalés vers la droite
&= Réalise au niveau binaire un ET avec la variable de gauche ^= Réalise au niveau binaire un OU avec la variable de gauche != Réalise au niveau binaire un OU exlusif avec la variable de gauche
VII.6.4 booléen :
&& ET logique
|| OU logique ! NON logique
VII.6.5 Niveau binaire :
& ET | OU exclusif ^ OU
<< Décalage à gauche >> Décalage à droite >>> Décalage à droite avec remplissage de zéros à gauche
VII.6.6 Fonctions :
Function nom de la fonction ( [paramètre1] … [paramètreN] ) { Instructions }
Conclusion
Conception d’un site Web 126
logiciels et du manque du matériel, on est arrivé dans une courte durée avec l’aide de
Le travail de réalisation du site nous a éclairé sur les aspects théoriques et techniques rencontrés pendant nos études universitaires.
La simplicité apparente de la conception des pages Web cache derrière elle une multitude de difficultés exigeant une connaissanprotocoles de communications ainsi que des derniers logiciels WYSIWYG, de
traitement d’image, du son et de la vidéo. Les pages construites restent statiques, et parmi les possibilités que nous
proposons citons, l’insertion d’une base de données pour augmenter le taux d’interactivité et afin d’intégrer toutes les possibilités fournis par l’utilisation des bases
Enfin, le travail sur ce sujet, qui est proposé par l’équipe réseaux, nous a
un domaine de renommé mondiale qui touche tous les secteurs d’activités de nos jours, cet atout est considérable pour un ingénieur qui se
préparent à rentrer dans le monde de la recherche.
Serveur Web Outils et techniques [Jonathan Magid, R.DouglasMatthews, poul Jones] [Thomson] 1996.
LE GRAND POCHE HTML 4 [Dick Oliver, Molly Holzschlag] [S&SM] décembre 1997.
Généralités sur Internet [A.GASMI] [ITO] 1998
Le projet Intranet [Frédréc ALJN, Denis Lafont, Jean-Françoit Macary] [Eyrolles] Deuxième tirage 1999
INTERNET (LES Fondamentaux) [John R, Levine, Carol Baroudi] Traduction de Etienne Cazin [Thomson] 1996
Tout pour monter son site Web [louis Kahn, Loura Logan] [Microsoft PRESS] 3etirage 1997
PC POCHE JAVA [Rolf Maurers, Kai Baufeldt] Traduction de Christophe Stehly [micro application] 2ème Edition – mars 1997
LE GRAND POCHE Site Internet Conception & réalisation [Eric Charton] [Simon & Schuster Macmillan] novembre 1997
Internet [Michel Dreyfus] [Simon & Schuster Macmillan] 1997
Programmer en Langage C++ [Claude Delannoy] [CHIHABE-EYROLLES] 1995
http://www.oclc.org:5046/~emiller/talks/dc5-rdf-talk/ http://www.inria.fr/koala/colas/ http://www.ensta.fr/~doc/h21/doc/doc4/www.page-web.com/tutor/feuilles.html http://www.siteexperts.com/dhtml/chapter1.asp http://www.amazon.com/exec/obidos/ISBN=1572316861/insidedynamichtmA http://dobitel.cnet.fr/ http://vote.weborama.fr/fcgi-bin/vote.fcgi?7675 http://www.w3.org/TR/2000/REC-xhtml1-20000126 http://www.ietf.org/rfc/rfc2046.txt http://www.ensicaen.ismra.fr/~delestre/VRML3.html http:// www.webdeveloppeur.com\index.html http://www.polymers.com/dotcom/polycon/ http://www.rtlsoft.com/animagic/regfaq.html http://www.citeweb.net/apetitje/xml/exemples/hellol.xml
http://www.datachannel.com/developers/webbroker/XMLSeattle/index.html http://www.imaginet.fr/ime/javascri.htm http://developer.netscape.com/library/documentation/ http://www.w3.org/ http://www.insidehtml.com/ http://www.webdeveloppeur.com/ http://www.page-web.com/ http://heuss.techfak.uni-bielefeld.de/www/mreinsch/dsssl http://www.dugratuit.com/telechargement/index.htm http://www.biblio.usherb.ca/peb/peb.htm http://www.cuslm.ca/biblio/bibg_education.htm http://www.multimania.com/webtheque http://www.umontreal.ca/ http://www.bib.umontreal.ca/ http://www.cuslm.ca/index.htm http://www.geocities.com/Heartland/Pointe/5013/index.html
ANNEXE A
Conception d’un site Web 128
La palette des 216 couleurs : Voici la liste des 216 couleurs sous forme de codes hexadécimaux
compatibles avec tous les navigateurs du marché. Exemple d'utilisation : <FONT COLOR="#FF0000">Couleur</FONT>
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
ANNEXE B
Conception d’un site Web 129
Liste des balises META :
<META NAME="xxx" CONTENT="xxx">
<META NAME="xxx" ... > Description Caractères
maxi Exemple
Description Description du site en une phrase de
préférence. 200
<META NAME="Desciption" CONTENT="All HTML, l'autre vision du
html">
Mots clés Liste de mots clés 500 <META NAME="Keywords"
CONTENT="html, xml, sgml, tags">
Author Auteur du site - <META NAME="Author"
CONTENT="Cyrille CLEDIERE">
Identifier-URL URL de votre site - <META NAME="Identifier-URL"
CONTENT="http://www.allhtml.com">
Date-Creation-yyyymmdd Date de la création
de votre site -
<META NAME="Date-Creation-yyyymmdd" content="19990525">">
Date-Revision-yyyymmdd Date de la dernière
modification - <meta name="Date-Revision-yyyymmdd"
content="19990717">
Reply-to Votre e-mail - <META NAME="Reply-to"
CONTENT="[email protected]">
revisit-after Indique la revisite du robot après n
jours -
<META NAME="revisit-after" CONTENT="15 days">
Category Catégorie de votre
site (annuaire) -
<META NAME="Category" CONTENT="Internet">
Publisher Celui qui publie
votre site - <META NAME="Publisher"
CONTENT="Cyrille CLEDIERE">
Copyright Copyright(s) de
votre site - <META NAME="Copyright"
CONTENT="Cyrille CLEDIERE">
Generator Logiciels utilisés
pour la création de votre site
- <META NAME="Generator"
CONTENT="WebExpert, Picture Publisher">
robots Diriger le robot - <META NAME="robots" CONTENT="index,
follow">
ANNEXE C
Conception d’un site Web 131
CARACTERES ACCENTUES. Voici une petite liste des principaux caractères accentués. Il suffit d'insérer le
code du caractère pour l'obtenir dans nos pages Web. Avec cette manipulation nous garantissons que l'accent sera reconnu correctement par tous les navigateurs.
Caractères en code ISO 5589-1 (ISO-Latin 1)
Caractère Code Iso Entité Caractère Code Iso Entité À À À à à à Á Á Á á á á Â Â Â â â â Ã Ã Ã ã ã ã Ä Ä Ä ä ä ä Å Å Å å å å Æ Æ &Aelig; æ æ æ Ç Ç Ç ç ç ç È È È è è è É É É é é é Ê Ê Ê ê ê ê Ë Ë Ë ë ë ë Ì Ì Ì ì ì ì Í Í Í í í í Î Î Î î î î Ï Ï Ï ï ï ï Ð Ð Ð ð ð ð Ñ Ñ Ñ ñ ñ ñ Ò Ò Ò ò ò ò Ó Ó Ó ó ó ó Ô Ô Ô ô ô ô Õ Õ Õ õ õ õ Ö Ö Ö ö ö ö × × × ÷ ÷ ÷ Ø Ø Ø ø ø ø Ù Ù Ù ù ù ù Ú Ú Ú ú ú ú Û Û Û û û û Ü Ü Ü ü ü ü Ý Ý Ý ý ý ý Þ Þ Þ þ þ þ ß ß ß
ÿ ÿ ÿ
ANNEXE D
Conception d’un site Web 132
CARACTERES SPECIAUX.
ar tous les navigateurs.
Caractères en code ISO 5589-1 (ISO-Latin 1)
Caractère Code Iso Entité Caractère Code Iso Entité •  ¡ ¡ ¡ ‚ ‚ ¢ ¢ ¢ ƒ ƒ £ £ £ „ „ ¤ ¤ ¤
… … ¥ ¥ ¥ † † ¦ ¦ ¦ ‡ ‡ § § § ˆ ˆ ¨ ¨ ¨
‰ ‰ © © © Š Š ª ª ª ‹ ‹ « « «
Œ Œ ¬ ¬ ¬ �  ­ ­ Ž Ž ® ® ® �  ̄ ¯ &masr; •  ° ° ° ‘ ‘ ± ± ± ’ ’ ² ² ² “ “ ³ ³ ³ ” ” ´ ´ ´ • • µ µ µ – – ¶ ¶ ¶
— — · · · ˜ ˜ ¸ ¸ ¸
™ ™ ¹ ¹ &supl; š š º º º › › » » » œ œ ¼ ¼ ¼ �  ½ ½ ½ ž ž ¾ ¾ ¾ Ÿ Ÿ ¿ ¿ ¿
Espace  
GLOSSAIRE
A : Active X : Langage de programmation développé par Microsoft et qui concurrence java.
Adresse : Désignation unique de l'emplacement de données ou identité d'un équipement intelligent ; chaque équipement sur une même ligne de communication peut répondpropre message. Adresse électronique : Code conventionnel au moyen duquel l’Internet identifie un utilisateur et lui permet de recevoir de courrier. Adresse Internet : Adresse d’un site d’information sur le réseau Internet. Cette adresse est
ifiée sous forme numérique (199.99.99.99) ou logique www.les-goudes.fr. Applet : Abréviation de petite application Internet. Applet java : Programme écrit en java, et qui s’exécute à l’intérieur d’une page HTML.
ARPA : Advanced Research Projects Agency ; organisme qui a développé le premier grand réseau à commutation de Arpanet : Réseau d’ordinateurs créé en 1969 par le ministère de la Défense aux Etats-Unis, c’est ancêtre de l’Internet fut démantelé quelques années plus tard. ASCII : (American Standard Code for Information Interchange ). Code à 7 bits très utilisé, en particulier sur l’Internet, ce qui explique pourquoi les caractères accentués sont rarement transmis correctement. B : Base de données : Collecte de données ordonnées pour faciliter leur consultation. Balise : Constituée d’un ou plusieurs mots clés encadrés par les deux signes “<” et “>” Berner-Lee : ( Tim ) Ingénieur informaticien du CERN à l’origine du Web.
Bit : Binary digIT ; La plus petite unité d'information dans un système binair"0". Bps : (bits par second)Unit de mesure du débit d’une voie de transmission caractérisant ce
vitesse » d’un modem. Ne pas confondre avec baud. Browser : (en français : Routeur, explorateur, fureteur, butineur…et surtout : Navigateur.). Programme d’exploration du Web. C : CERN : Centre Européen de Recherche Nucléaire, Genève (Suisse). Chemin d’accès : Emplacement d’un ficher sur un disque. Il se compose des noms de dossiers et de sous-dossiers. Client : Application pour accéder aux informations détenues par un serveur. Client/Serveur : (modèle), Type d’architecture dont laquel le Web fonctionnant en client/serveur, il est nécessaire qu’un protocole commun permette les échanges entre le
GLOSSAIRE
logiciel client et le serveur Web. Ce protocole au-dessus des protocoles TCP et IP s’appelle le http. Com : (commerciale) Nom de domaine de haut nivaux. Compresser : Réduire la taille d’un ficher informatique sans diminuer le nombre
D : DHTML : Dynamique HTML, Extension du langage HTML pour crée des pages Web
DNS : (Domain Name system), service Internet qui traduit les noms de domaine en numéros IP. Domaine : Nom officiel d’un ordinateur sur l’Internet, qui figure immédiatemencaractère @. Dans [email protected], le nom du domaine est monserveur.fr. DVD : (Digital Versatile Disk). nouveau format des CD haute capacité E : E-mail : Electronique mail ou Adresse électronique. Elle se compose d’un nom d’utilisateur. Et d’un nom de domaine séparé par @. F : Frame : Une page Web peut se diviser en plusieurs fenêtres, on les appelle frame du nom de la commande HTML. Fichier : Collection d’informations considérée comme une unité de traitement par ordinateur. Forum : Dans le sens le plus général, groupe de news ou discutions. Fournisseur d’accès : Entreprise commercial disposant d ‘une connexion directe à l’Internet et par l’intermédiaire de laquelle vous devez passer pour vous accorder vous-même au Net lorsque vous ne disposez que d’une ligne téléphonique ordinaire du RTC. FTP : (File transfert Protocole) protocole de communication pour échanger des fichiers entre ordinateurs. G : Gif : (Graphics inter change Format ), Format de fichier image (comme le JPEG), reconnu par les navigateurs. Gopher : Système de recherche d’informations par mot clé.
GLOSSAIRE
H : Hôte : Désigne un ordinateur sur lequel on peut se connecter. HTTP: (hypertext transport protocol), Protocole de communication qui défini la façon dont les pages web circulent de serveur en serveur. HTML : ( HyperTexte Markup Language ). Langage standard, sur Internet, de description de documents hypermédias, ce langage est constitué de marqueurs ou balises, spécifiant la forme
HTML dérivé de SGML (Standard generalized Markup Language). Hypermédias : Type de document virtuel riche, pouvant contenir texte, son, image ou vidéo, constitué de texte propre et de références ( liens ) à des documents externes, sur le réseau. HyperTexte : Type d’organisation de documents, permettant de parcourir l’information de
-linaire (figée ), en se déplaçant de lien en lien à l’intérieur ou à l’extérieur du document. I : Intranet : Réseau interne à une entre-prise, qui fonctionne et s’utilise comme Internet. Internaute : Utilisateur d’internet. Internet : L’Internet est un système global d’information résultant de l’interconnexion de milliers de réseaux logiquement reliés par un système d’adresses uniques. IP : (Internet Protocol). Protocole utilisé sur l’Internet pour acheminer les informations sur
ISP : (Internet Sevice Provider). J : JPEG : (Joint Photographic Experts group), Format de fichier image (comme le GIF) reconnu par les navigateurs Web. JAVA : langage de programmation, proche du C , pour développer des applications qui s’exécutent indifféremment sur n’importe quel type de machine . Souvent utilisé pour écrire des applets qui se placent à l’intérieur des pages HTML.C’est un langage compilé. Donc plus puissant et plus rapide que java Scripte. JAVASCRIPT : langage de programmation, sorte de Basic, dont le code est inscrit dont les pages HTML. C’est un langage interprété ; chaque fois qu’une page HTML contenant du java script est chargé le navigateur Web décode les commandes. K :
GLOSSAIRE
L : Lien : Un lien est un mot actif, en cliquant dessus on se retrouve ailleurs dans le document ou dans un autre document. M : Mail : Courrier. Modem : Acronyme de "modulateur-démodulateur" dispositif électronique chargé de convertir des signaux électriques entre ordinateur et une ligne téléphonique. Moteur de recherche : site qui aide à retrouver d’autres sites. N: Navigateur Web : Logiciel qui aide à visualiser les pages web. Par exemples Microsoft Internet explorer ou Netscape Navigateur. Net : Signifie réseau en anglais (network) on abrège souvent Internet par Net. Netscape : société qui développe Netscape Communicator, le navigateur Web concurrent de Microsoft, Internet Explorer. Newsgroup : Forum de discussion sur le réseau Usenet. Netscape Navigateur : Browser de qualité remarquable ayant largement contribué à la popularité du Web. News : Ordinateur raccordé à l’Internet et dont la mission consiste à distribuer les news. Non de domaine : Nom qui indique l’adresse d’un serveur internet. Exemple WWW.yahoo.com Numéro IP : Lors de chacune de nos connexions le réseau nous attribue un numéro IP,(sorte de numéro de téléphone temporaire composé de quatre nombres). Les serveurs disposent d’un
O : P : Page : Chaque adresse Web correspond une page Web (un fichier HTML) la première page
Page d’accueil : Page web qui s’affiche lorsque vous ouvrez voutre navigateur.
GLOSSAIRE
Paquet : Groupe de bits (comprenant des signaux de données et de contrôle d'appel) transmis à la fois sur un réseau à PDF : (Portable Document Format) les documents enregistrés au format PDF peuvent être visualisés dans leur exacte mise en page quel que soit l’ordinateur sur lequel on les consulte pour lire les fichiers PDF il faut installer Acrobat Reader. Police de caractère : Une police définit un dessin pour chaque caractère. Elle est identifiée par un nom par exemple : Arial ou times. Protocole : Règles est conventions qui déterminent la façon dont deux ordinateurs dialoguent. Provider : Fournisseur d’accès Internet. Société qui propose des abonnements Internet (abonnement forfaitaire, mensuel, ou en temps passé). Q : R : Ressources : Appellation des sites aidant à retrouver les autres sites ou une information. Requête : Instruction de consultation de la base de donnée. Réseau : Interconnexion de plusieurs machines en vue d’échanger des informations. Routeur : Equipement utilisé dans l’Internet pour guider un message de donné à travers le
seau de donné jusqu’à la destination demandée. RTC : Réseau téléphonique commuté. S : Serveur : Ordinateur qui dispose d’informations qui viendront consulter des ordinateurs Clients. Serveur FTP : Serveur sur lequel on récupère des fichier à l’aide du protocole FTP, on peut aussi enregistrer des données sur certains serveur, les serveur d’hébergement (utile pour publier des page Web). Site Web : Ensemble des pages Web. Site miroir : Copie conforme d’un site sur un serveur installé généralement dans un notre pays, intérêt diviser le flux de communication. Site portail : Site qui rassemble divers types d’informations dans le but d’attirer les internautes.
Système d'exploitation : Logiciel permettant l'exécution d'un certain nombre d'opérations de base (exécutions de
GLOSSAIRE
T : TCP/IP : (Transmission Control protocol/Internet Protocol), noms d’une famille de protocoles de communication, il en existe plus d’une centaine. Téléchargement : Récupérer des données de puis un serveur à laide du protocole FTP. Telnet : Protocole Internet pour piloter à distance un ordinateur. Les utilisateurs Telnet fonctionnent généralement en mode texte. Topologie de réseau : Relation physique et logique entre les nœuds d'un réseau ; schéma d'organisation des liaisons et des nœud U : Usenet : Réseau qui rassemble les serveurs de newsgroups, ces serveurs ne sont souvent pas directement connectés à Internet. URL : (Uniform Ressource Locator), chaque page Web dispose d’une URL qui commence par http://(pages web), ftp://(fichier à télécharger). V : VRML : (Virtual Reality ModeLing Language ), langage pour décrire des objets en 3D. W : Web : Abréviation de World Wide Web qui signifie toile d’aréniez mondiale en français ; est le service le plus populaire d’Internet, il permet de publier des pages (HTML) contenant des textes, des images, des sons, etc. WebBot : petits programmes (CGI) facilement intégrables à des pages Web pour la réalisation de fonctions spécifiques (gestion de formulaires, appels de moteurs de recherche, etc.). Webcam : Caméra vidéo directement connectée à un serveur et qui envoie tous ce qu’elle filme sur Internet. Web Casting : Action d’émettre sur Internet de l’information en continu. Webmaster : Personne qui supervise un site Web. L’adresse e-mail du Webmaster est généralement indiquée sur la page d’accueil du site. Windows : Système d’exploitation multitâche à fenêtrage crée par Microsoft pour les PC. WWW : Voir Web. X : XML : (eXtensible Markup Language), extension de HTML pour réaliser des mises en page bien plus précises.
GLOSSAIRE
Y : Yahoo : Moteur de recherche sur le Web accessible sur l’URL http://www.yahoo.com