HTML en 5 leçons

Partie 3 Frames

Leçon 1 Leçon 2 Leçon 3 Leçon 4 Leçon 5

Eric@netline.be
 

La notion de "frame", que nous baptiserons cadre en français, a mis longtemps pour faire partie des spécifications HTML. Elle a été inventée par Netscape dans la version 2.0 de son navigateur pour subdiviser la fenêtre principale du browser en une série de zones dont le contenu de certaines peut être conservé de manière constante pendant que le contenu d'autres est remplacé ou déroulé. Ces zones, ou frames, constituent un ensemble de sous-documents séparés et qui peuvent être contrôlés individuellement. Le concept de cadres a réjoui tous les metteurs en page même s'il s'écarte considérablement de la philosophie de base du langage HTML. En effet, comment voulez vous représentez des cadres dans un navigateur pensé pour les mal voyants ?

D'abord chasse gardée de Netscape, le concept de frame n'est apparu officiellement que dans la version 4 des spécifications du langage HTML.

Pour créer une page HTML constitué d'une série de sous-documents HTML, il faut d'abord faire appel à la balise "frameset" où nous allons définir l'agencement et le nombre de frames constituant la page principale.

<Frameset> viendra en lieu et place de la balise <body> qui marquait jusqu'à présent le début du corps du document.

Nous placerons ensuite une série de balises <frame> entre les balises <frameset> et </frameset>. Enfin, il ne faudra pas oublier de penser à tous ceux qui, faute d'un navigateur récent, n'auront pas accàs à nos jolis cadres et qu'il faudra avertir de notre problème de compatibilité.

Frameset contrôle la mise en page des sous documents HTMl dans la fenêtre principale du navigateur. Il permet la division de la fenêtre en une série de lignes et de colonnes à la taille dynamique. Plussieurs frameset peuvent être imbriqués.

Puisque la balise <frameset> vient se substituer à l'élément <body> habituel, il a fallu penser à la compatibilité descendante et introduire la balise <body> à l'intérieur d'une balise <noframes> Les navigateurs supportant les frames ignoreront ainsi la balise <noframes> tandis que les navigateurs plus anciens allergiques aux frames ignoreront les balises <frameset>, <frame> et <noframes> pour ne retrouver que la balise <body> qu'ils attendent.

Attention, ne jouez pas de trop avec les frames. Beaucoup d'utilisateurs y sont allergiques, se plaignat par exemple de la lenteur de représentation et de la surcharge de travail à l'intérieur des navigateurs. Le cadrage des frames est trop sensible à la résolution d'écran et ne sera probablement pas idéal dans toutes les tailles d'écran.

Frameset

Chaque balise FRAMESET peut contenir des attributs ROWS et COLS, ROWS indiquant que la fenêtre sera découpée en zones horizontales tandis que COLS procède à un découpage vertical.

Si aucun des attribus ROWS et COLS n'est employé, le frameset sera constitué d'une seule ligne horizontale occupant toute la largeur de l'écran.

Voici notre premier exemple

<html>
<
head>
<
title>Frames Example</title>
<
/head>
<frameset ROWS="40,25%,*">
<frame SRC="frame1.html" NAME="frame1">
<frame SRC="frame2.html" NAME="frame2">
<frameset COLS="30%,*">
<frame SRC="frame3.html" NAME="frame3">
<frame SRC="frame4.html" NAME="frame4">
</frameset>
<noframes>
<body>
<p>This browser does not support frames.</p>
</body>
</noframes>

</frameset>
</html>

En gros, nous avons défini un premier cadre de 40 pixels de haut et un second prenant 25 % de la hauteur de la fenêtre. Le reste de la hauteur est allouée au dernier cadre qui est lui-même un frameset imbriqué constitué de deux cadres occupant respectivement 30 et 70 % de la largeur de la fenêtre. Chaque frame doit pointer sur une page HTML ordinaire. Par exemple, la page frame4.html incluse dans le frameset et visible dans l'illustration ci-dessous contient le code HTML suivant

<html>
<head>
<title>Frame 4</title>
</head>

<body>
<p align="center">4</p>
</body>

</html>

Enfin, notez la balise <body> insérée dans <noframes> qui affichera une page alternative pour les navigateurs non compatibles.

Image1.jpg (38520 bytes)

Border

Cet attribut optionnel permet de définir l'épaisseur des cadres inclus dans le frameset. Il accepte toute valeur entière correspondant à un nombre de pixels. BORDER=0 est équivalent à l'attibut NOFRAMEBORDER.

BorderColor

Tout aussi optionnel, l'attribut BorderColor définit la couleur à utiliser pour dessiner le bord des cadres. Comme nous l'avons vu dans la leçon 2, l'attribut est défini sous forme d'un triplet de valeurs RGB ou par le nom d'une couleur.

Cols

Cet attribut précise que l'espace de travail va être découpé en colonnes. Les valeurs de cet attribut sont séparées par des virgules et représentant les largeurs horizontales de chaque cadre inclus dans le frameset. Les valeurs sont exprimées en pixel ou en pourcentage de la largeur du frameset, le joker * peut également être utilisé pour occuper le reste de la largeur disponible.

FrameBorder

Cet attribut permet de décider si les cadres du frameset disposeront ou non d'un bord visible. Attention, les valeurs admises sont Yes et No chez Netscape, 1 et 0 chez Microsoft.

FrameSpacing

L'attribut FrameSpacing sert à définir l'espace entre les cadres. Il s'exprime en valeurs positives correspondant à des pixles.

 

Rows

Cet attribut définit un espace de travail découpé en lignes. Les valeurs de cet attribut sont séparées par des virgules et représentant les hauteurs de chaque cadre inclus dans le frameset. Les valeurs sont exprimées en valurs absolues ou en pourcentage de la hauteur du frameset, le joker * peut également être utilisé pour occuper le reste de la hauteur disponible.

 

Frame

A l'intérieur d'un FRAMESET, chaque FRAME permet de définir l'URL et les attributs d'un cadre. Chaque FRAME porte un nom qui l'identifie de manière à pouvoir devenir la cible qui va accueillir le résultat d'un hyperlien.


BorderColor

Contôle la couleur utilisée pour le bord d'un cadre. Cette valeur, un triplet RGB ou un nom de couleur annule la couleur préalablement définie dans le FRAMESET.

FrameBorder

Annulant l'instruction FRAMEBORDER du FRAMESET, cet attribut contrôle l'affichage d'une bordure autour du cadre. Les valeurs admises sont Yes et No chez Netscape, 1 et 0 chez Microsoft.

 

MarginHeight

MarginHeight offre au créateur d'une page HTML la possibilité de définir la taille en pixels des marges supérieures et inférieures du cadre.

MarginWidth

De la même manière, MarginWidth permet de contrôler la taille des marge gauches et droite du cadre courant.

Name

Très important, cet attribut va nous permettre de désigner chaque frame par un nom symbolique que nous pourrons exploiter par la suite avec l'attribut TARGET des balises A, AREA, BASE, et FORM . Le nom doit impérativement commencer par un caractère alphanumérique.

NoResize

Cet attribut s'emploie sans valeurs pour interdire à l'utilisateur de modifier la taille du cadre courant.

Scrolling

L'attribut Scolling permet de jouer sur la présence ou non des barres de défilement horizontale et/ou verticale. Les valeurs admises sont Auto [ valeur par DEFAUT, le navigateur décide lui-même], Yes [toujours une barre de défilement] et No [jamais de scrollbar]

Src

L'attribut SRC attend comme argument l'adresse URL du document HTML à insérer dans ce cadre.


Poursuivons l'exemple de tout à l'heure avec les nouvelles instructions que nous venons de rencontrer

<html>

<head>

<title>Frames Example</title>

</head>

<frameset rows="116,48%,*">

<frame SRC="frame1.html" NAME="frame1" scrolling="yes">

<frame SRC="frame2.html" NAME="frame2" scrolling="no" noresize>

<frameset cols="30%,*">

<frame SRC="frame3.html" NAME="frame3" scrolling="auto" marginwidth="50" marginheight="50">

<frame SRC="frame4.html" NAME="frame4" bordercolor="#FF0000">

</frameset>

<noframes>

<body>

<p>This browser does not support frames.</p>

</body>

</noframes>

</frameset>

</html>

En voici le résultat

Image2.jpg (36755 bytes)

Remarquez que nous avons imposé une scrollbar dans la cadre 1 avec l'instruction scrolling="yes". L'instruction noresize dans le cadre 2 nous empêche maintenant de manipuler la taille du cadre 2. Pour la cadre 3, notre navigateur a décidé d'afficher une scrollbar et a utilsé des marges importantes suite à nos instructions scrolling="auto" marginwidth="50" marginheight="50". Enfin, notez au passage le bord rouge du cadre 4 résultant de notre commande bordercolor="#FF0000"

Noframes

FrontPage 97 générait du code <NOFRAMES> incorrect. J'ai donc vu passer une génération de graphistes ayant appris l'HTML avec FrontPage et exploitant incorrectement cette balise. De même, une erreur assez courante est le recours aux incorrects <NOFRAME> or <NO FRAMES> qui sont sans conséquence tant que notre navigateur reconnaît les frames. Evitez les phrases du genre "votre navigateur ne supporte pas les frames, cliquez ici pour en obtenir un". Certains utilisateurs préfèrent ne pas utiliser les frames ou n'ont pas la possibilité de le faire sinon ils auraient déjà acquis un navigateur plus récent. Ne les frustrez pas davantage, créez leur plutôt grâce à la balise <BODY> une page qui leur permet d'accéder à votre site quel que soit leur bon vieux Netscape 1.3 ou Explorer 2.0.

 

Frame target

Classiquement, nos cadres vont surtout nous servir à conserver à l'écran un menu immuable que nous ne devrons pas recréer pour chaque item de ce menu. Prenons le cas ci-dessous où nous optons pour la plus classique des présentations Web

Image3.jpg (36480 bytes)
 
Notre fenêtre du navigateur est divisée en deux cadres, le premier utilisant 12 % de la largeur totale, le second le reste de cette largeur. Notre page complète s'appelle index.htm. Elle fait appel dans le cadre de gauche baptisé "framel" à une page HTML "frameg.html". Le cadre droit , appelé "framer" accueillera dans un premier temps la page frameone.html et servira de cible à tous les hyperliens lorsque nous sélectionnerons un URL dans le cadre de gauche.
 

<html>

<head>

<title>Frames Example</title>

</head>

<frameset cols="12%,*">

<frame SRC="frameg.html" NAME="framel" scrolling="no" marginwidth="5" marginheight="5"

noresize>

<frame SRC="frameone.html" NAME="framer" scrolling="auto">

<noframes>

<body>

<p>This browser does not support frames.</p>

</body>

</noframes>

</frameset>

</html>

Notre page frameg.html contient elle ceci

<html>

<head>

<title>New Page 1</title>

</head>

<body>

<p align="left"><a href="frameone.html" target="framer"><big><big>Lien 1</big></big></a></p>

<p align="left"><a href="frametwo.html" target="framer"><big><big>Lien 2</big></big></a></p>

<p align="left">&nbsp;</p>

</body>

</html>

 

Classiquement, quand nous cliquons sur un hyperlien, son contenu remplace le contenu existant dans la même fenêtre du navigateur. Ici, avec nos cadres, nous avons désormais plusieurs documents dans une seule fenêtre et nous allons pouvoir définir vers quel cadre l'hyperlien sera redirigé en fonction du nom symbolique que nous lui avons attribué. Cette redirection sera opérée par l'attribut TARGET suivi du nom de notre cadre. Cet attribut TARGET est utilisable dans les balises A, AREA, BASE et FORM

Conventional behavior when clicking on a hyperlink or submitting a form was to have the result load on top of the current document in the browser window. With frames, we now have multiple documents in a single browser area. It makes sense to be able to address specific frames in a FRAMESET structure in such actions. The assignment of frame identity is accomplished via the NAME attribute in the FRAME tag. The addressing of these frames occurs when a user initiates an action command with a TARGET attribute that specifies the NAME of a frame to use as a destination for its action.

Le nom de cadre vers lequel pointe TARGET doit impérativement commencer par un caractère alphanumérique. Les noms commençant par un caractère de soulignement "_" sont des noms spéciaux réservés.

TARGET="_blank"

Avec cette cible spéciale, la page hyperlien sera toujours chargée dans une nouvelle fenêtre vide.

TARGET="_self"

Cette cible permet de charger le document dans la fenêtre elle-même où l'hyperlien a été sélectionné. C'est la valeur par défaut.

TARGET="_parent"

Cette cible provoque le chargement de la page dans le document qui sert de parent au FRAMESET courant. Si le document n'a pas de parent, le comportement sera identique à celui provoqué par TAREGET = "_self".

TARGET="_top"

Cette cible va faire en sorte de charger la page HTML dans le corps de la fenêtre principale et sera très pratique si votre page de cadres boucle sur elle-même.

 

BASE

La balise <BASE> exploite elle aussi le même attribut TARGET. <BASE> se place dans l'en-tête d'une page HTML entre <HEAD> et </HEAD>. Elle permet de fournir un point de référence pour interpréter tous les hyperliens relatifs inclus dans un document. Imaginez par exemple un lien relatif tel celui-ci

< A HREF="/pub/mypage.htm"> Ma page </A>

ou celui-ci

<IMG SRC="my.gif">

Ces liens ne sont pas absolus puisqu'ils ne mentionnent pas l'adresse du site de base mais juste un chemin d'accès relatif par rapport à la racine de ce site. Si quelqu'un sauve votre page localement en en copiant le code HTML, le lien relatif ne fonctionnera plus à moins que vous ne forciez avec la balise <BASE> le chemin absolu vers le site original.

 

Attributs

Href

L'attribut HREF suit impérativement la balise BASE pour désigner l'URL de base qui va servir à recréer un lien absolu vers vos documents

Target

L'attribut TARGET est facultatif et s'emploie de la même façon qu'avec FRAMESET

Example

<base HREF="http://www.foo.com" TARGET="_top">

 

META

Comme la balise <BASE>, le tag <META> s'emploie à l'intérieur de l'en-tête du document HTML entre les balises <HEAD> et </HEAD>. META est un élément extensible, contenant toujours une paire Nom/Valeur, et permettant de préciser des meta-informations sur les contenus qui vont suivre et qui vont pouvoir être exploités par le serveur ou le client HTTP.

Ses usages les plus courants sont les suivants

Client Pull:

Cette commande META va pouvoir être utilisée pour charger un document après un certain nombre de secondes en utilisant l'attibut HTTP-EQUIV et la valeur REFRESH. L'attrubut CONTENT sera soit une valeux X représentant le nombre de sondes à attendre avant de réactualiser la page courante où une combinaison des valeurs X en secondes et URL de la page à charger séparés par un point virgule.

Syntaxe 1:

<meta HTTP-EQUIV="refresh" CONTENT="[N]">
Syntaxe 2:

<meta HTTP-EQUIV="Refresh" CONTENT="5; URL=http://www.foo.com/x.htm">

Dans ce deuxième exemple, la page actuelle disparaîtra automatiquement après 5 secondes au profit d'une nouvelle page http://www.foo.com/x.htm
 
 

Editor Identification:

La valeur GENERATOR est très courante dans les pages HTML et sert à désigner le type d'éditeur qui a généré le code HTML

Syntaxe: <meta NAME="GENERATOR" CONTENT="[Editor Name]">

Search Engine Identification:

Deux commandes META vont nous être très utiles pour faciliter l'indexation de nos documents par des moteurs de recherche internes ou externes.

La valeur KEYWORDS est suivie d'une liste de mots-clés, séparés par des virgules, et représentant une sélection des mots les plus importants du document.

La valeur DESCRIPTION, sera ignorée par votre navigateur, mais sera très prisée par les robots chargés d'indexer votre site et qui vont y trouver un descriptif général de votre page HTML

Syntaxe 1: <meta NAME="Keywords" CONTENT="[Search Engine Keywords]">
Syntaxe 2: <meta NAME="Description" CONTENT="[Search Engine Description]">

Browser Cache Override:

La valeur EXPIRES va permettre de donner une date de péremption à notre document. Les navigateurs ne doivent plus conserver cette page dans leur cache au delà de la période d'expiration

Syntaxe 1: <meta HTTP-EQUIV="Expires" CONTENT="[Date Value]">

PICS Identification

 

Une commande META permet aux parents ou gestionnaires de sites d'attribuer une cote morale aux contenus
de pages Web selon la norme PICS (Platform for Internet Content Selection) avalisée par le consortium W3

Voici par exemple, la balise META trouvée sur le site www.playboy.com pour éviter à nos petits chérubins de s'encanailler sur le WEB.

<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" for "http://www.playboy.com" on "1996.05.04T06:51-0800" r (n 4 s 3 v 0 l 4))'>
 
En gros, cela signifie qu'une cote morale a été définie pour ce site par le Recreational Software Advisory Counsil en date du 4 juin 1996

Nudité 4 (maximale)

Sexualité 3

Violence 0

Crudité du langage 4

A vous maintenant de paramétrer votre navigateur pour bloquer tout accès à des pages qui dépasseraient votre seuil acceptable. Dans l'Internet Explorer 4 ou 5, choisissez le menu Tools/Internet Options puis l'onglet Contents et le bouton Content Advisor. Vous tomberez sur ceci.

Image4.jpg (39060 bytes)

Inter-page Transition Filter Effects

Une syntaxe spéciale, uniquement connue d'Internet Explorer 4 et 5, permet de placer des effets de transition entre vos pages HTML

Syntaxe:

<meta HTTP-EQUIV="[event]" CONTENT="RevealTrans(Duration=[Seconds],Transition=[Transition Type])">
avec [event] égal à Page-Enter, Page-Exit, Site-Enter, ou Site-Enter
et [Transition Type] un entier de 0 à 23 représentant un effet particulier

Exemple

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)>

<META http-equiv="Page-Exit" CONTENT="RevealTrans(Duration=2.500,Transition=6)">

Values

0 Box in
1 Box out
2 Circle in
3 Circle out
4 Wipe up
5 Wipe down
6 Wipe right
7 Wipe left
8 Vertical blinds
9 Horizontal blinds
10 Checkerboard across
11 Checkerboard down
12 Random dissolve
13 Split vertical in
14 Split vertical out
15 Split horizontal in
16 Split horizontal out
17 Strips left down
18 Strips left up
19 Strips right down
20 Strips right up
21 Random bars horizontal
22 Random bars vertical
23 Random