Tous droits réservés pour tous pays. All rights reserved.
| Serveur © IRCAM - CENTRE POMPIDOU 1996-2005. Tous droits réservés pour tous pays. All rights reserved. |
3. Les documents composés
Dans tous ces cas, le document original fait référence à
d'autres documents, qui seront, eux, chargés soit simultanément avec ce
document original, soit à la demande.
Les navigateurs (Mosaic, Netscape, ...) ont certaines
compétences: ils peuvent mettre en page du texte, ils peuvent aussi
afficher des images (d'un certain type). Ils n'ont pas toutes les
compétences sur tout type de document. Ainsi, si un document en HTML
fait référence à un document sonore, l'outil de consultation fera en
général appel à une "compétence externe" pour le diffuser: une
application destinée à jouer un fichier sonore à l'aide de la carte son
de l'ordinateur (par exemple: PLANY sur PC).
Il en va ainsi pour les images; les outils de consultation ont, en
général, une compétence adéquate pour certains types d'images (les
formats XBM, GIF et JPEG), ce qui permet de constituer des documents
dans lesquels ces images sont mêlées au texte (comme dans les exemples
mentionnés ci-dessus). Mais dans le cas d'autres formats (TIFF,
Postscript, etc.), le navigateur devra faire appel à une
"compétence extérieure" (par exemple: LVIEW), qui affichera cette image
dans une autre fenêtre que celle dans laquelle le navigateur affiche le
texte.
Quant à la vidéo, elle est disponible sous divers formats
(incompatibles, évidemment...) et il est toujours nécessaire de
posséder une application experte afin de pouvoir la regarder.
Comment est-ce que le navigateur sait quelle application experte il lui
faut appeler pour afficher un document qu'il ne sait traiter? Cette
connaissance est configurée "à la main" lors de l'installation du
navigateur dans les Options (ou Préférences).
Le protocole est la méthode qu'emploie le navigateur pour
accéder à l'information. Comme pour une ligne téléphonique, où l'on
peut, au choix, parler, transférer une télécopie ou faire du Minitel,
il en va de même sur l'Internet, où des informations peuvent transiter
de façon différente, selon leurs utilisation, par exemple: le courrier
électronique ne "passe" pas de la même façon que l'interrogation à
distance d'une base de données.
L'adresse indique où se trouve, sur l'Internet, l'ordinateur possédant
l'information que l'on cherche à lire ou à voir. Elle est composée
d'une ou plusieurs parties séparées par des points, indiquant
l'ordinateur, l'organisme auquel il appartient, et le pays ou le
secteur d'activité (éducation/recherche, militaire, etc.). Il est de
plus en plus courant de donner le nom
Enfin, le chemin d'accès à l'information indique en général dans quel
répertoires et sous-répertoires elle se trouve, et sa dernière
composante est le nom du fichier dans lequel elle est stockée, selon
les conventions que nous avons vues ci-dessus.
On peut souvent omettre une partie des renseignements; si, par exemple,
un document référence un autre document qui se trouve sur le même
serveur, il est inutile de spécifier à nouveau l'adresse du serveur.
Ainsi on peut voir des adresses:
Le répertoire-racine du serveur du Centre comprend la page d'accueil en
français, appelée index.html (nom utilisé par convention, pas par
nécessité) et sa version en anglais, index-e.html, ainsi que quelques
autres fichiers.
Il comprend aussi plusieurs répertoires: les images réutilisées dans
plusieurs documents (comme le logo) y sont stockées dans un
sous-répertoire appelé images, les sons dans un répertoire appelé sons,
ce qui n'empèche pas de stocker des sons ou des images ailleurs. Un
autre répertoire est consacré à la revue Tr@verses.
S'il référence l'article de la page 18, il pourra utiliser comme
adresse:
Le / initial dans
Divers compléments d'information existent, notamment pour l'alignement;
ainsi
On remarquera que la directive d'insertion d'image n'a pas de champ
d'action: elle a un effet immédiat, l'insertion de l'image à cet
endroit précis.
Le texte environnant n'est pas sensible, lui, à ce mécanisme, qui
emploie donc une directive qui a, comme champ d'action, le texte que
l'on veut rendre sensible (l'hypertexte), et qui indique où se trouve
le document externe:
Quant au second exemple, on a en HTML:
On peut ainsi référencer un autre document en HTML, du son, de la
vidéo, etc.: tout ce qui possède une adresse et qui peut être récupéré
au travers du réseau.
Inversement la partie sensible peut être constituée d'un seul mot,
d'une phrase, voire d'un paragraphe entier. Mais elle peut aussi
inclure une image! Ainsi, on aurait pu rendre la photo dans la
page d'accueil de l'Ircam
sensible au toucher, et faire en sorte qu'en cliquant
dessus on passe au descriptif de l'Ircam. Il aurait pour cela fallu
écrire:
Prenons l'exemple d'un musée qui souhaite offrir en ligne un catalogue
illustré de certaines de ses oeuvres. Une façon intelligente de
le faire est de présenter des onglets (petites images) permettant
de choisir la, ou les, images détaillées que l'on souhaite regarder.
La première raison en est purement une question d'efficacité: plus
une image est grande, plus les données en sont volumineuses, et le
temps de récupération long. Cela permet de se faire une idée avant
que d'y investir son temps.
Une autre raison pourrait en être économique: le musée pourrait offrir
les onglets gratuitement, mais les images détaillées contre paiement.
Cette exemple s'applique bien évidemment à d'autres types de documents
(sonores, vidéo, etc.) pouvant offrir des extraits de basse qualité
permettant de faire un premier choix, avant que de choisir le document
de qualité.
Voyons comment réaliser l'exemple suivant:
Comme cet onglet est un lien - en cliquant dessus on cause le chargement d'un
autre document (l'image détaillée) - il est inséré dans une directive d'hypertexte:
HTML offre la possibilité de désigner non seulement un document, mais des parties
internes de ce document. Ainsi, la sélection du lien Les tableaux
dans le sommaire ci-contre chargera la page se référant aux directives de structuration
(dont l'adresse est
Cette capacité est obtenue en étendant le concept d'adresse et permettant d'y spécifier
des ancres ("points d'accroche") à l'intérieur d'un document, de même que l'on peut
spécifier, dans une adresse postale, le numéro de l'appartement.
Il faut donc apprendre deux concepts: comment déterminer des ancres dans un document
(comment mettre des numéros sur des appartements d'un immeuble...) et comment dénoter
cette ancre dans la référence hypertextuelle (comment l'écrire sur l'enveloppe du courrier).
Il s'avère quelque fois utile d'offrir dans un document un lien vers une autre
partie du même document. Par exemple:
Une autre application de l'utilisation d'une ancre interne est la référence à des notes
de bas de page:
2e édition, © Ircam 1995, 1996
Les références externes
L'une des particularités les plus importantes de HTML est la capacité de
construire des documents composites, sans que le lecteur soit obligé
d'en connaitre la structure interne. Deux principales possibilités sont
offertes:
Une troisième possibilité, non standard mais fort utile, permet de
composer à l'écran des cadres (frames): la fenêtre du navigateur
est subdivisée en sous-fenêtres, dans lesquelles peuvent être affichés
des documents indépendamment les uns des autres (c'est le cas de la
présentation de cette introduction-ci).
Nature des documents
Jusque là, nous avons vu des documents-texte: le document source est du
texte accompagné de directives en HTML, le résultat s'affichant à
l'écran est du texte. Or il existe d'autres formats de production de
documents-texte sur informatique (WORD, Postscript, etc.), et on peut
aussi créer des images, du son et de la vidéo.
Adresses
La référence se fait par le mécanisme des URL (Uniform Resource
Locator). Celui-ci indique "l'adresse" du document référencé et la
méthode à utiliser pour le récupérer (le "protocole"). Par exemple:
La première partie est le protocole (http, ftp, telnet, mailto, ...);
la seconde est l'adresse du serveur (l'ordinateur qui fournit
l'information) et la troisième le chemin d'accès au document dans le
serveur.
www aux ordinateurs offrant des
informations en HTML.
/images/logo.gifsur le même serveur part2.htmldans le même répertoire http://www.culture.fr/page d'accueil d'un serveur Chemins d'accès
Tous les documents fournis par un serveur (par exemple: celui du
Centre) sont organisés sur ce serveur dans un répertoire de base
(appelé racine) et des sous-répertoires, permettant ainsi au
gestionnaire de ce serveur de s'y retrouver.
Tous les fichiers et répertoires dans le répertoire racine sont
référencés avec le signe 
/ ("slash") précédant leur nom:
Le contenu du répertoires des images contient, lui, quelques fichiers:
/index.html
/index-e.html
/calendrier.html
/images
...
5etage.gif est la photo sur la page d'accueil du Centre, et logo.gif le
bandeau noir utilisé en tête de chaque page sur ce serveur et
comprenant le logo du Centre:
Tous les fichiers et répertoires dans ce répertoire sont référencés par
l'adresse du répertoire les contenant (dans ce cas: 
/images), suivi de
/ puis du nom du fichier:
Quant au répertoire
/images/logo.gif
/images/5etage.gif
/images/lemaitre.jpg
/images/traverses.gif
traverses, il contient un index général de tous les
numéros, ainsi qu'un répertoire pour chaque numéro (chacun de ces
répertoires contenant les articles):
On y référence les fichiers et répertoires selon le même principe:
Enfin, examinons le répertoire 92-4 contenant les articles du 4e numéro
de l'année 92:
/traverses/index.html
/traverses/92-1
...
On y montre quelques articles (
p18.html indique l'article paru à la
page 18 de la version papier...), le sommaire de ce numéro (index.html)
ainsi qu'un répertoire qui contient les images (l'iconographie) de ce
numéro. Le nom des fichiers et répertoires suit le même principe:
À la différence des exemples précédents, un niveau s'est rajouté, ce
qui est normal, puisque les articles se trouvent dans le répertoire
92-4 qui est lui-même inclus dans le répertoire traverses (cf.
diagramme ci-dessous, indiquant la structure hiérarchique de ces
répertoires et fichiers).
/traverses/92-4/index.html
/traverses/92-4/p18.html
/traverses/92-4/p110.html
/traverses/92-4/p120.html
/traverses/92-4/images
Si le sommaire (ainsi que les articles) de ce numéro veut inclure le
logo du Centre, il utilisera comme URL (=adresse):
Le
/images/logo.gif
/ initial indique qu'il faut partir de la racine, puis passer dans
le répertoire images, puis arriver au fichier logo.gif.
ce qui signifie: à partir de la racine, entrer dans le répertoire
traverses, puis dans le sous-répertoire 92-4, puis arriver au fichier
/traverses/92-4/p18.html
p18.html. Mais ce fichier se trouvant dans le même répertoire que le
sommaire, celui-ci n'a pas besoin d'indiquer comment y arriver, et il
lui suffit d'employer comme référence:
sans / initial et sans autre information, de même que lorsqu'on envoie
une lettre en France il est inutile (mais possible) d'écrire "France"
sur l'enveloppe, et, par le passé, lorsque l'on expédiait une lettre
dans la même ville, il suffisait d'indiquer "E.V." (en ville) sur
l'enveloppe.
p18.html
/images/logo.gif est primordial: il indique qu'il
faut démarer la recherche du fichier à la racine. S'il était absent, on
rechercherait à partir du répertoire local (92-4)! Or, celui-ci
possède aussi un sous-répertoire intitulé images, et pour peu que
celui-ci contienne une image appelée aussi logo.gif (sans que ce soit
forcément le même logo), il y aura confusion...
Noms des fichiers
Il est convenu de donner aux fichiers des noms indiquant le format
utilisé, par exemple:
La partie suivant le point s'appelle l'extension. Sur les PC (DOS, Windows 3.1), elle est
limitée à 3 lettres, et on y verra par exemple
text.pspour un document texte en Postscript intro.htmlpour un fichier en HTML fontaine.gifpour une image au format GIF berlioz.aiffpour un son au format AIFF intro.htm et berlioz.aif
Les images dans le corps du texte
Les navigateurs sont en général capables d'afficher des images
dans le corps d'un texte (voir les deux exemple mentionnés ci-dessus).
Pour cela, il faut que:
La directive servant à insérer une image est:
L'image s'affichera à l'endroit où apparait cette directive, et
l'affichage du texte continuera après.
ALIGN=TOP
signifie que le texte suivant cette directive apparaîtra à la suite
(donc à droite de l'image), aligné à son sommet. Par exemple:
produira l'effet suivant:
<IMG SRC="/images/ircam.gif" ALIGN=TOP>Voici l'IRCAM
On peut évidemment choisir un autre alignement, ou carrément couper
après l'image pour faire en sorte que le texte suivant l'image
apparaisse en dessous.
Voici l'IRCAM
Autres formats
Enfin, si le format de l'image n'est pas reconnu par le navigateur
(par exemple: du TIFF), une îcone indiquera sa présence. Voici comment
Netscape aurait affiché l'exemple ci-dessus, si l'image avait été au
format TIFF plutôt que GIF:
Le graphisme suggère une "image brisée".
Voici l'IRCAM
Les références hypertextuelles
Un document en HTML peut faire référence à un autre document en
utilisant des mécanismes hypertextuels: le texte faisant référence au
document externe s'affichera à l'écran dans une police, couleur ou
forme distincte du reste du texte, par exemple:
Appuyer ici pour voir le calendrier de l'Ircam.
ou encore:
La notion de timbre est illustrée par cet extrait de la Symphonie
Fantastique d'Hector Berlioz.
Cette partie du texte sera "sensible à la souris": le lecteur pourra
positionner le curseur sur ce texte et appuyer sur le bouton de gauche.
À cet instant, le nouveau document sera chargé dans l'ordinateur et
s'affichera à l'écran (texte et/ou image), ou sera diffusé dans les
enceintes (son).
Ainsi, le premier exemple ci-dessus est réalisé de la façon suivante:
La directive a pour champ d'action le mot
Appuyer <A HREF="cal95.html">ici</A> pour voir le calendrier de l'Ircam.
ici qui, du coup, est affiché
sous une forme distincte du reste, et devient sensible à la souris. La
directive donne aussi l'adresse (URL) du document cal95.html qui
s'affichera à l'écran, si et quand le lecteur choisira de le faire, en
cliquant sur le mot ici.
Le document externe
La notion de timbre est illustrée par <A HREF="/sons/berlioz.aiff">cet
extrait de la Symphonie Fantastique</A> d'Hector Berlioz
/sons/berlioz.aiff est un fichier audio, qui sera
récupéré et diffusé dans les enceintes si et quand le lecteur le
demandera en cliquant sur l'un des mots cet extrait de la Symphonie
Fantastique.
que l'on décortique de la façon suivante: (1) début de directive
d'hypertexte, qui référence le document
<A HREF="/visite.html.html">
<IMG SRC="/images/ircam.gif">
</A>
/visite.html; (2) affichage de
l'image /images/ircam.gif, qui est donc "sensible à la souris"; (3)
fin de directive d'hypertexte.
Exemple: interface iconique
Supposons qu'un serveur HTML offre une suite de documents, des articles
d'un journal ou d'une conférence ou des chapitres d'un livre, par
exemple, et que l'on souhaite permettre au lecteur de passer au
document précédent ou suivant, ou même au sommaire, à l'aide d'icônes,
en affichant au bas de chaque document:
En cliquant sur la flèche de gauche, on doit obtenir le document
précédent, sur celle du milieu le sommaire, et sur celle de droite le
document suivant. Si, dans cet exemple, les documents s'intitulent
sommaire.html, chapitre1.html, chapitre2.html, ... on devra mettre au
bas du chapitre 10 les directives suivantes:
La première ligne se lit ainsi: début d'hypertexte référençant le
chapitre 9; insertion d'image (une petite flèche tournée vers la
gauche); fin d'hypertexte. Ainsi, en cliquant sur la petite flèche
tournée vers la gauche, c'est le chapitre 9 qui sera chargé à l'écran.
<A HREF="chapitre9.html"><IMG SRC="left.xbm"><A>
<A HREF="sommaire.html"><IMG SRC="up.xbm"><A>
<A HREF="chapitre11.html"><IMG SRC="right.xbm"><A>
Exemple: catalogue d'images
On peut utiliser ce principe d'incorporation d'une image dans un
lien hypertextuel pour mener, non pas vers un texte (comme dans
l'exemple précédent), mais vers une autre image, plus grande.
Hieronymus Bosch: «La tentation de St. Antoine»
Chaque onglet est d'abord une image. Par exemple, le premier onglet
est:
1. 
2. 
3. 
«Polytriptyque de St. Vincent»
1. 
2. 
3. 
4. 
5. 
6. 
Images © 1995 Instituto Português de Museus
L'onglet est donc à l'adresse
<IMG SRC="/images/bosch-tenta1.gif" ALIGN=CENTER>
/images/bosch-tenta1.gif.
L'option ALIGN=CENTER sert à faire en sorte que l'image soit alignée
verticalement par le milieu avec le texte avoisinant (dans ce cas, les numéros).
dans laquelle à la place des
<A HREF="..."><IMG SRC="/images/bosch-tenta1.gif" ALIGN=CENTER></A>
"..." on a l'adresse de l'image détaillée, qui,
dans ce cas, est /images/bosch-tenta1.jpg. On aura donc:
L'exemple dans sa totalité réplique cette ligne à peu de choses près, et est laissé
au lecteur diligent et à la lectrice assidue.
<A HREF="/images/bosch-tenta1.jpg"><IMG SRC="/images/bosch-tenta1.gif" ALIGN=CENTER></A>
Les références internes
Nous avons vus, jusqu'ici, comment un lien hypertextuel pouvait référencer un autre
document. La sélection de ce lien remplace le premier document par le second.
directives.html) en la positionnant sur le paragraphe
qui traîte des tableaux.
Spécification des ancres internes à un document
On peut placer des ancres à n'importe quel endroit d'un document. Ceci se fait par
la directive:
dans laquelle on remplace les <A NAME="...">
... par un nom arbitraire que l'on donne
à cette ancre: un numéro, une chaîne de caractères, etc. Dans notre exemple ci-dessus,
tous les paragraphes ont été identifiés par une ancre numérique, celle de la
section "tableaux" ayant reçu le numéro 2.11. On a donc, dans la page
directives.html:
L'ancre est donc accollée au titre (niveau 2) du paragraphe parlant des
tableaux.
<H2 ALIGN=CENTER><A NAME="2.11">Les tableaux</H2>
Ceux-ci sont des extensions récentes - et fort utiles - du langage
HTML, et le standard ne s'est pas encore vraiment stabilisé.
Référence à une ancre interne à un document
On verra maintenant comment un lien hypertextuel peut mentionner non seulement
le document dans lequel se trouve ce paragraphe (dont l'adresse, en l'occurrence,
est directives.html) mais aussi cette ancre particulière. Pour le faire,
on utilise la syntaxe suivante:
On accolle à l'adresse du document un <A HREF="directives.html#2.11">Les tableaux</A>
# suivi du nom de l'ancre.
A l'écran, on verra le lien Les tableaux (comme dans le sommaire
ci-contre), et en le sélectionnant, on occasionnera le chargement du document
directives.html et son positionnement à l'écran à l'ancre 2.11.
(description des séparateurs)
Pour le faire, on mettra une ancre juste avant la description,
et la référence hypertextuelle plus loin fera référence à cette ancre:
...
voir ci-dessus la description.
La première ligne définit une ancre dont le nom est <A NAME="descr">
(description des séparateurs)
...
voir <A HREF="#descr">ci-dessus</A> la description.
descr,
tandis que la dernière mentionne un lien hypertextuel sans nom de document -
ce qui indique qu'on reste dans le même document - mais avec le nom de l'ancre,
uniquement, et précédé de # (si ce signe était absent, on pourrait
penser que le lien fait référence à un document externe appelé descr
plutôt qu'à une ancre interne).
Le langage HTML[1] sert à rédiger des pages WWW
La réalisation en est laissée au lecteur assidu et à la lectrice diligente.
...
________
Notes:
[1] HyperText Markup Language
Les images sensibles
Dans les documents hypertextuels que nous avons vus jusqu'ici, des parties
arbitraires du texte (lettre, mot, mots, voire une image dans sa totalité, comme
dans l'exemple catalogue d'images ci-dessus)
peuvent être "sensibles à la souris",
comme nous l'avons vu plus haut, à propos des références
hypertextuelles).
Un mécanisme semblable par ses effets existe pour les images incorporées au texte, et permet d'associer avec des zones de l'images des documents externes (textes, images, son, ...). Voici un exemple (qui utilise le nouveau standard proposé pour HTML 3.2[1], et qui fonctionne seulement pour une partie des navigateurs): certaines zones de l'image sont associées à des rubriques du serveur décrivant les activités qui s'y tiennent.
La réalisation de cet exemple est relativement simple. Elle nécessite la description des zones sensibles et l'association de chacune de ces zones avec un document externe, d'une part, et l'affichage de l'image (le plan) dans le texte.
On décrit le polygone en spécifiant les coordonnées de ses (quatre) coins, successivement, en commençant par n'importe quel coin, passant à l'un de ses deux voisins et ainsi de suite, dans un système d'axes X-Y ancré au coin supérieur gauche de l'image. X va donc de gauche à droite, Y de haut en bas.
L'outil qui a servi à créer l'image permet en général de déterminer ces coordonnées, que nous avons rajoutées à l'image. La description du polygone se fait alors comme suit:
<AREA SHAPE="POLYGON"
COORDS="37,214, 163,331, 263,302, 130,195"
... >
La directive AREA sert à décrire une zone. L'option
SHAPE indique quel type de zone, dans notre cas un
polygone (il y a d'autres possibilités, cercle, par exemple). Enfin,
l'option COORDS spécifie les (quatre) sommets du
polygone.
Il faut encore associer à ce polygone l'URL (l'adresse) du document qui s'affichera lorsque l'on sélectionnera cette zone. On le fait de la façon suivante:
<AREA SHAPE="POLYGON"
COORDS="37,214, 163,331, 263,302, 130,195"
HREF="http://www.ircam.fr/visite/espro.html">
La ligne qui a été rajoutée comprend l'adresse du document.
On décrit de la même façon les autres polygones, et on enrobe le tout dans une directive qui indique que ce qui suit est la description d'une image sensible. On donne un nom à cette description pour pouvoir y faire référence ultérieurement:
<MAP NAME="plan-ircam">
<AREA SHAPE="POLYGON"
COORDS="37,214, 163,331, 263,302, 130,195"
HREF="http://www.ircam.fr/visite/espro.html">
<AREA SHAPE="POLYGON"
COORDS="212,169, 241,192, 276,184, 247,162"
HREF="http://www.ircam.fr/activites/recherche/psycho.html">
...
<AREA SHAPE="POLYGON"
COORDS="232,218, 271,251, 305,242, 264,210"
HREF="http://www.ircam.fr/activites/creation/creation.html">
</MAP>
Le nom plan-ircam n'est pas l'adresse d'une image, mais
le nom que l'on a choisi pour la description des zones de l'image.
Il suiffit de rajouter à cette directive les informations suivantes:<IMG SRC="/images/plan.gif">
L'option<IMG ISMAP SRC="/images/plan.gif" USEMAP="#plan-ircam">
ISMAP indique que cette image a des zones sensibles,
tandis que l'option USEMAP donne l'URL (adresse) de la description
des zones sensibles, telle que nous l'avon vu plus haut, en utilisant
le nom de cette référence en tant qu'ancre interne, plan-ircam.
La description (<MAP ...> ... </MAP>)
peut se trouver dans le même document qui référence l'image, auquel
cas l'adresse dans le champ USEMAP ne comprendra rien
avant le #. Si, par contre, elle se retrouve ailleurs,
on précédera le # du nom du document. Un exemple
d'utilisation: supposons que nous ayons deux pages décrivant la viste
de l'Ircam, une en français (visite.html) et l'une en
anglais (visite-e.html). Il suffit de décrire une seule
fois l'image, comme il a été fait ci-dessus, et de mettre cette description
dans le fichier français, par exemple. L'image, elle, apparaîtra dans
chacun des deux fichiers, et fera référence à cette seule et unique
description. On aura donc:
Dans le fichier visite.html, on aura l'image et sa description:
<MAP NAME="plan-ircam">
<AREA SHAPE="POLYGON"
COORDS="37,214, 163,331, 263,302, 130,195"
HREF="http://www.ircam.fr/visite/espro.html">
...
<AREA SHAPE="POLYGON"
COORDS="232,218, 271,251, 305,242, 264,210"
HREF="http://www.ircam.fr/activites/creation/creation.html">
</MAP>
...
Veuillez sélectionner la zone que vous souhaitez visiter:
<IMG ISMAP SRC="/images/plan.gif" USEMAP="#plan-ircam">
tandis que dans le fichier visite-e.html il suffira d'avoir
l'image:
dans laquelle nous avons rajouté à l'adresse de la description le nom du fichier externe dans laquelle elle se trouve.Please select the area you wish to visit: <IMG ISMAP SRC="/images/plan.gif" USEMAP="visite.html#plan-ircam">
La fenêtre est subdivisée en quatre cadres, auquels nous allons donner les noms suivants, suggérant leurs fonctions:
Deux principes caractérisent l'utilisation des cadres:
Ainsi, dans l'exemple ci-contre, le texte qui apparaît dans
la fenêtre body est le produit du fichier en HTML
http://mediatheque.ircam.fr/nouveautes/body.html,
qui est tout à fait standard, et ne contient absolument rien qui indique
son utilisation (dans une fenêtre normale ou dans un cadre).
Ainsi, on peut l'utiliser soit dans une fenêtre normale (non subdivisée
en cadres) soit dans un cadre. Le fait qu'il ait presque le même nom
que le cadre n'est pas fortuit: il est destiné à être affiché dans
le cadre appelé body, mais peut être affiché dans
n'importe quel autre cadre.
Lorsque l'on sélectionne un lien hypertextuel (<A HREF=... >),
le document référencé s'affichera a priori dans le même
cadre. Par exemple, la sélection du second lien dans le cadre body,
A. Hirschberg et al.: Shock Waves in Trombonescausera le remplacement du contenu du cadre
body par l'article en
question. Si la liste avait été affichée dans le cadre services au lieu
du cadre body,
la sélection de ce lien aurait causé l'affichage de l'article
dans ce cadre-là (services).
menu affectera non pas le contenu du cadre dans lequel ce menu apparaît,
mais celui du cadre body. De même, le choix du lien
L'OEil du Système
dans le cadre services affectera la fenêtre principale (tous les cadres
en même temps).
La spécification en HTML est la suivante:
La directive<FRAMESET ROWS="20%,*"> rangée supérieure rangée inférieure </FRAMESET>
<FRAMESET> ... </FRAMESET>
encadre un ensemble («set», en anglais) de subdivisions de même type,
et la décrit: ROWS indique que c'est une subdivision
horizontale, en rangées («rows», en anglais), dont les tailles suivent:
la rangée supérieure (qui ne comporte que le cadre entete)
fait 20% de la taille verticale de la fenêtre, et la rangée inférieure
fait le reste (* indique une taille non spécifiée, déterminée
par le reste qui est dévolu ou par la taille des contenus.
La rangée supérieure est un cadre indivisible, dont le nom est
entete. On aura donc:
tandis que la rangée inférieure est un regroupement de cadres, la séparation étant verticale, cette fois-ci:<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" ...> rangée inférieure </FRAMESET>
ce qui donne:
Cette fois-ci, la colonne de gauche, qui fait 17% de la largeur de cet ensemble, est elle-même un regroupement de cadres, tandis que la colonne de droite est un cadre indivisible, le cadre<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" ...> <FRAMESET COLS="17%,*"> colonne de gauche colonne de droite </FRAMESET> </FRAMESET>
note:
Quant à la colonne de gauche, voici à quoi elle ressemble:<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" ...> <FRAMESET COLS="17%,*"> colonne de gauche <FRAME NAME="note" ...> </FRAMESET> </FRAMESET>
une subdivision horizontale ne comprenant que deux cadres, dont on spécifie cette fois-ci uniquement la taille du cadre inférieur (le second):
On peut bien évidemment subdiviser un ensemble en plus de deux cadres. Il faut que le nombre d'éléments dans la liste<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" ...> <FRAMESET COLS="17%,*"> <FRAMESET ROWS="*,35%"> <FRAME NAME="menu" ...> <FRAME NAME="services" ...> </FRAMESET> <FRAME NAME="note" ...> </FRAMESET> </FRAMESET>
ROWS ou COLS
reflête le nombre de sous-cadres.
Il n'est pas nécessaire de spécifier la largeur ou hauteur des cadres. Cette spécification est permise là où on veut en contrôler la taille. On peut donc écrire:
pour un cadre de quatre rangées de taille automatiquement intéderminées.<FRAMESET ROWS="*,*,*,*"> 1ère rangée 2ème rangée 3ème rangée 4ème rangée </FRAMESET ROWS="*,*,*,*">
services s'affichera le fichier services.html.
Cette association se fait de la façon suivante:
ce qui veut dire: la "source" de l'information qui s'affichera dans le cadre dont le nom est<FRAME NAME="services" SRC="services.html">
services
se trouve à l'adresse services.html. Dans ce champ peut apparaître tout URL (adresse): pas
forcément du texte, pas forcément une adresse locale: on peut constituer à l'écran une page composée de
textes et d'images venant des quatre coins du monde.
Nous allons maintenant compléter notre exemple avec toutes les associations de fichiers:
Tout le texte ci-dessus va aller dans un fichier distinct des quatre fichiers<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" SRC="entete.html"> <FRAMESET COLS="17%,*"> <FRAMESET ROWS="*,35%"> <FRAME NAME="menu" SRC="menu.html"> <FRAME NAME="services" SRC="services.html"> </FRAMESET> <FRAME NAME="note" SRC="note.html"> </FRAMESET> </FRAMESET>
entete.html,
menu.html, services.html, note.html. Appelons-le index.html. Il devra
comprendre, outre les directives ci-dessus, "l'enrobage" que nous avons vu:
L'intitulé (entre<HTML> <HEAD> <TITLE>IRCAM - Nouveautés sur le serveur Médiathèque </TITLE> </HEAD> <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" SRC="entete.html"> <FRAMESET COLS="17%,*"> <FRAMESET ROWS="*,35%"> <FRAME NAME="menu" SRC="menu.html"> <FRAME NAME="services" SRC="services.html"> </FRAMESET> <FRAME NAME="note" SRC="note.html"> </FRAMESET> </FRAMESET> </HTML>
<TITLE> ... </TITLE>) n'est pas le texte
que l'on voit dans l'entête ci-dessus, mais s'affichera en général dans le bandeau
de la fenêtre dans laquelle le navigateur affiche les pages HTML, et servira aux
"robots d'indexation" (logiciels qui parcourrent le réseau pour répertorier des pages).
Par exemple, la sélection du
lien INTRODUCTION dans la fenêtre menu
ci-contre affectera le contenu du cadre note uniquement, tandis que la sélection
du lien Catalogue dans la fenêtre services
affectera toute la fenêtre du navigateur en changeant tous les cadres en même temps.
Cet effet d'un lien se spécifie en mentionnant dans la directive du lien l'endroit où l'on veut que s'affiche le résultat de sa sélection. Ainsi, le lien hypertextuel pour l'introduction est réalisé comme suit:
Ce qui veut dire: la sélection du lien INTRODUCTION dans le cadre<A HREF="intro.html" TARGET="note"> INTRODUCTION </A>
menu
en bleu chargera le fichier intro.html dans le cadre note. L'option
TARGET dans la directive indique donc la destination de l'affichage. Si
on ne l'avait spécifiée, la page serait apparue dans le même cadre où se trouve le lien,
donc dans le cadre menu...
Pour affecter toute la fenêtre et ses cadres, on aura par exemple, pour le lien
Catalogue du cadre services:
Le document dont l'URL (adresse) est<A HREF="/catalogue/" TARGET="_top"> Catalogue </A>
/catalogue/ s'affichera dans la fenêtre principale,
dont le nom est _top (qui est donc un mot réservé). Ce document là peut lui-même
être composé ou non de cadres, et s'il l'est, ils peuvent être semblables en forme ou différents.
____________________________
Serveur © IRCAM-CGP, 1996-2008 - document mis à jour le 23/06/1999 à 14h46m27s.