Les Frames HTML :
Nous avons vu jusqu'à présent que, avec HTML, il est possible de créer des tableaux complexes, dont chaque cellule peut contenir indifféremment du texte, un formulaire, une image et bien d'autres encore Nous allons voir que les frames, introduites par certains browsers, et maintenant disponibles sur les principaux browsers du marché, apportent des fonctionnalités voisines des tableaux, encore plus puissantes. Le concept est simple. Comme avec les tableaux, il consiste à diviser l'écran du browser en plusieurs zones, appelées frames. Chacune d'elles est capable d'afficher du code HTML, comme c'est le cas dans les cellules d'un tableau. Il existe cependant une différence majeure. Dans un tableau, toutes les cellules font partie du même document HTML. Elles sont toutes issues d'un même fichier ou d'un même script CGI. Dans le cas des frames, chaque zone de l'écran est un document HTML propre. On voit donc simultanément, sur la même fenêtre d'un browser, la mise en page correspondant à plusieurs fichiers HTML différents. Un lien hypertexte peut alors mettre à jour certaines zones du browser sans modifier les autres. Chaque zone possédant un nom unique, il est simple d'indiquer quelle zone un lien hypertexte doit être modifié.
La notion de frame supprime l'une des limitations du Web. Auparavant, chaque nouveau document venait écraser le précédent, et obligerait bien souvent l'utilisateur à user et abuser de la commande "précédent" des browsers (back en anglais). Désormais, il est possible de dédier certaines zones du browser à des tâches bien précises. On peut imaginer, par exemple, une zone qui contienne une barre de menus et qui ne soit presque jamais rechargée. Ou encore, une autre zone utilisée pour afficher une aide contextuelle, sans que l'utilisateur perde la page sur laquelle il travaille.
Pour mieux comprendre ce nouveau concept, examinons un exemple. La page proposée est composée de trois zones (on parlera indifféremment dans cette leçon de zone ou de frame). La zone supérieure contient un formulaire de recherche. Celle de gauche affiche les résultats de la recherche. Quant à celle de droite, elle permet d'obtenir plus d'informations concernant un élément dans la liste des résultats. La soumission du formulaire de la zone supérieure met à jour la zone de gauche sous forme d'une liste de valeurs dont chaque élément est un lien hypertexte. Chaque lien hypertexte de la liste des résultats modifie la zone de droite. Cet écran permet donc de gérer simultanément trois documents HTML.
Pour donner un premier aperçu de la syntaxe utilisée, voici le cde HTML à l'origine de cet exemple :
Exemple d'utilisation d'une page intitulée"",dont le code HTML ci-dessous :
         Â
              Exemple d'un Annuaire
         Â
MARGINHEIGHT="25" NORESIZE>
MARGINWIDTH="35" MARGINHEIGHT="35">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
                   Ce document contient des frames et votre browser est incapable de les gérer
Il est intéressant de noter que ce document ne contient aucune des informations qui vont être présentées à l'utilisateur. En fait, il ne contient que des informations destinées au browser. Avec ce document, le browser sait en effet quelles sont les frames qu'il doit créer et avec quels documents il doit les remplir. Si l'on regarde de plus près, par exemple, la définition de la zone ou frame supérieure, on note qu'elle doit recevoir le code HTML du document "". Ce document est un document HTML classique, qui contient l'information à afficher à l'utilisateur. En voici le détail ci-après :
Exemple d'utilisation d'une page intitulée"",dont le code HTML ci-dessous faisant parti du même document HTML, en [Exemple 1] ci-dessus :
...
On     remarque    toutefois     un     nouvel     attribut    pour    la        balise
Top of Form
Bottom of Form
,
l'attribut TARGET, qui indique tout simplement le nom de la zone dans laquelle sera affiché le résultat de la soumission du formulaire.
A noter: Si vous voulez changer les noms des pages HTML, il faudra également envisager de changer les noms dans le code HTML.
:
En fait, seules trois nouvelles balises ont été ajoutées au langage HTML afin d'apporter cette nouvelle fonctionnalité. Cependant, la structure générale d'un document divisé en plusieurs frames diffère de celle d'un document classique. Dans un document classique, le corps est inséré dans les balises . Dans le cas des frames, le corps du document est systématiquement inséré dans les balises ,
et
Nous attirons votre attention que si vous mettez une balise dans une frame par exemple, avec une balise , cela ne pourra pas fonctionner.
Exemple de document classique contenant l'information à afficher à l'utilisateur (texte, images, formulaires )
Exemple de document de définition de frames ne contenant aucune information destinée à l'utilisateur, mais uniquement des informations destinées au browser (géométrie des différentes frames et document HTML associé).
est la balise d'ouverture permettant de diviser une zone en souszone, soit verticalement, soit horizontalement. Si aucune zone n'est encore définie, les divisions s'appliquent à la zone initiale formée par l'ensemble de la fenêtre du browser. Cette balise possède les attributs suivants :
ROWS est utilisé pour diviser la zone en sous-zones horizontales. La syntaxe est la suivante :
ROWS="hauteur_zone_1, hauteur_zone_2, hauteur_zone_n"
ROWS est une liste de valeurs entières séparées par des virgules. Le nombre d'éléments de la liste correspond au nombre de sous-zones horizontales à créer. Chacune des valeurs de la liste peut être donné selon l'un des trois formats suivants, dans lesquels n est un nombre entier :
COLS est utilisé pour diviser la zone en sous-zones verticales. La syntaxe est en tous points identique à celle de l'attribut ROWS :
COLS="largeur_zone_1, largeur_zone_2, largeur_zone_n"
Voici par exemple deux manières identiques de diviser une zone en trois. Les deux sous-zones supérieures sont de taille identique, égale à la moitié de la zone inférieure :
FRAMEBORDER est utilisé pour indiquer si la frontière entre deux frames doit avoir un effet 3D (un effet d'ombre). La valeur par défaut est "yes", si bien que les bordures de frames possèdent en général un effet 3D. La syntaxe est la suivante :
FRAMEBORDER="NO/YES"
BORDER indique, dans le cas où FRAMEBORDER vaut "no", la largeur de la bordure entre deux frames. La valeur 0 supprime les bordures de frames. La syntaxe est la suivante :
MARGINWIDTH="n"
BORDERCOLOR indique, dans le cas où FRAMEBORDER vaut "yes", la couleur des bordures de frames. La syntaxe est la suivante :
BORDERCOLOR="couleur"
Insérées entre les balises . . . , on ne peut trouver que les trois balises suivantes :
Aucune autre balise HTML ne peut être acceptée.
:
est la balise utilisée pour caractériser les sous-zones définies à l'aide de la balise . Cette caractérisation est réalisée à l'aide de six attributs :
SRC indique l'URL du document qui doit être affiché dans cette zone. Si cet attribut n'est pas précisé, la zone reste vide. La syntaxe est la suivante :
SRC="URL"
NAME est utilisé pour nommer la zone afin qu'elle puisse devenir la cible de n'importe quel lien hypertexte. Sinon, cela ne peut fonctionner. Les noms prédéfinis, _blank, _top, _parent, _self ainsi que tous les noms commençant par le "caractère de suite" '_' ne peuvent pas être utilisés pour renseigner cet attribut. La syntaxe de l'attribut NAMEest ci-après :
NAME="nom_de_la_zone"
MARGINWIDTH est utilisé pour préciser le nombre de pixels entre les frontières gauche et droite de la zone et le document HTML à afficher. La syntaxe est la suivante :
MARGINWIDTH="n"
MARGINHEIGHT est utilisé pour préciser le nombre de pixels entre les frontières haute et basse de la zone et le document HTML à afficher. La syntaxe est la suivante :
MARGINHEIGHT="n"Exemple :
SCROLLING indique si la zone doit posséder une barre de défilement (SCROLLING="yes") ou non (SCROLLING="no"), ou encore si ce choix est laissé au browser (SCROLLING="auto"). La syntaxe est la suivante :
SCROLLING="yes/no/auto"
NORESIZE n'a pas de valeur. Sa présence indique uniquement au browser qu'il doit empêcher toute modification de la taille d'une zone. Lorsque cet attribut n'est pas précisé, il est toujours possible de déformer une zone, en déplaçant sa frontière à l'aide du pointeur de la souris.
:
est une balise qui indique à tout browser ne soit incapable de gérer les frames le texte qu'il doit présenter à l'utilisateur à la place de la frame. ce texte est bien sûr ignoré par un browser capable de gérer les frames. En fait, le fonctionnement de cette balise est simple. Les browsers Web ne tiennent compte que des balises qu'ils connaissent. Un browser qui ne sait pas gérer les frames ignorera donc les balises , , et également
Au contraire, un browser capable de gérer des frames interprétera les balises
et saura qu'il doit ignorer le texte compris entre ces balises.
Voici deux exemples illustrant la facilité d'utilisation des frames. On suppose que le fichier utilisé pour renseigner l'attribut SRC des balises est un fichier HTML classique.
Premier exemple ; ce qui donne ceci :
Exemple d'utilisation d'une page intitulée "", dont vous trouverez une partie du code HTML ci-dessous, correspondant uniquement aux frames :
Deuxième exemple ; ce qui donne ceci :
2ème Exemple d'un Test Frame
Ce document contient des frames et votre browser est incapable de les gérer:
Maintenant que nous avons vu en détail, comment créer des documents divisés en frames, nous allons voir comment créer des liens hypertexte utilisant ces frames.
L'attribut TARGET :
En plus des trois nouvelles balises décrites ci-dessus, un nouvel attribut a été créé. Il concerne les balises caractérisant des liens hypertexte, en particulier les balises et
Top of Form
.
Bottom of Form
Il s'agit de l'attribut TARGET, qui permet de préciser le nom de la zone qui doit recevoir le document correspondant au lien. Considérons par exemple le lien hypertexte suivant :
L'attribut est là pour indiquer au browser qu'en réponse à un clic, il doit afficher le document dans la frame dont le nom est "zonedossieré" (c'est-à -dire la frame qui a été définie par la balise ). De la même façon, la soumission du formulaire défini par :
Affichera ses résultats dans la frame dont le nom est "LISTE".
On peut isoler trois cas pour décrire les valeurs possibles de l'attribut TARGET.
Dans le premier cas, l'attribut TARGET a une valeur qui correspond au nom d'une frame existante. Le document associé au lien hypertexte est alors affiché dans la frame en question.
Dans le deuxième cas, l'attribut TARGET a une valeur qui ne correspond à aucune des frames existantes. Le browser crée alors une nouvelle fenêtre (un nouveau browser) et y affiche le document. Cette nouvelle fenêtre est considérée comme une frame portant le nom de l'attribut TARGET à l'origine de sa création.
Dans le dernier cas, l'attribut TARGET prend une de ces quatre valeurs prédéfinies :
Afin de bien cerner la signification de ces valeurs prédéfinies (notamment celle de la valeur _parent, qui peut paraître un peu obscure à priori), voici un court exemple. Pour le comprendre plus vite, il est conseillé de créer sur votre serveur (ou plus simplement sur la machine où se trouve votre browser), les cinq fichiers qui composent cet exemple, puis d'ouvrir le document "" avec un browser capable d'afficher des frames (Internet Explorer, Google Chrome, Opéra et bien d'autres encore).
Voici les cinq fichiers en question :
, Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â , Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â ,
et
Le fichier est un document constitué de deux frames horizontales de même taille. La frame supérieure affiche le document et la frame inférieure, le document :
DESCENDRE
Le fichier possède uniquement un lien hypertexte qui, lorsqu'il est activé, affiche dans la frame où il se trouve le document . Ceci a pour résultat de diviser la frame en deux sous-frames horizontales de taille égale.
Voici le code correspondant du document :
...
Le Fichier est un document constitué de deux zones verticales de même taille. La frame de gauche affiche le document et la frame de droite affiche le document , en voici le code ci-après :
              ZONE GAUCHE
Le Fichier est un document constitué de deux zones horizontales de même taille. La frame de haut affiche le document et la frame du bas affiche le document , en voici le code ci-après :
ZONE HAUTE
Le dernier fichier, , est un peu particulier. Il n'apparaît dans aucun des liens hypertexte des autres fichiers. Il est utilisé uniquement pour remplir une sous-frame du document ou ou encore . Il s'agit en quelque sorte d'un sous-document du document ou ou encore celui . Pour un lien du fichier , l'attribut TARGET="_parent" a alors un sens. Il indique au browser d'utiliser la frame du sur-document (dans notre cas, il s'agira de la frame contenant le document ou ou encore ) pour afficher le document correspondant aux liens hypertexte. On remplace ainsi le document ou ou celui de par un autre document.
Examinons maintenant en détail les quatre liens du fichier comme ci-après :
1°) - Le premier, Plus Haut, permet de remonter d'un cran dans la hiérarchie des zones. En effet, il remplace, grâce à l'attribut TARGET="_parent", un document composé de deux frames ( ou ou encore celui de par un document classique () ;
2°) - Le deuxième, Au Sommet, permet d'afficher le document , en occupant tout l'espace de la fenêtre du browser (TARGET="_top"). On retombe ainsi dans un affichage classique, sans frame ;
3°) - Le troisième, Zone Verticale, permet de remplacer le document par le document (toujours à l'aide de l'attribut TARGET="_parent"). Les deux documents ayant le même nombre de frames, la hiérarchie des frames n'est pas modifiée. Cela a juste pour effet de transformer la séparation horiziontale de la frame en une séparation verticale.
4°) - Le dernier, Zone Horizontale, permet de remplacer le document par le document (toujours à l'aide de l'attribut TARGET="_parent"). Les deux documents ayant le même nombre de frames, la hiérarchie des frames n'est pas modifiée. Cela a juste pour effet de transformer la séparation verticale de la frame en une séparation horizontale.
Voici le code correspondant du document :
PLUS_HAUT
Voici quelques enchaînements obtenus à partir de cet exemple. Les flèches indiquent l'effet d'un clic sur un lien hypertexte. Pour plus de lisibilité, toutes les possibilités n'apparaissent pas sur le schéma ci-dessous :
:
La frame dispose des mêmes caractéristiques que l'objet window que l'on verra par la suite de nos leçons (la Classe Window).
Exemple : Choisir dans quelle frame l'image apparaîtra
L'exemple suivant montre comment on change l'image d'un point à l'autre, en cliquant sur Haut ou sur Bas, on change le TARGET d'un lien (ici une frame). Lorsque l'on effectue ce choix, rien ne se passe dans les fenêtres ; c'est seulement lorsque l'on clique sur l'image que celle-ci apparaît dans la zone choisie.
Le fichier (découpage du browser, fichier appelé que l'on cliquera sur ce dernier) :
Le menu est chargé dans la frame de gauche (Frame_Menu) et des fichiers vides sont chargés dans les deux autres frames (Frame_Haut et Frame_Bas) dont nous évoquerons les codes HTML ci-après ainsi que leurs fonctions :
Fichier , voici le code suivant :
Déplacement d'une Image
Le fichier (création du menu, appelé par ) :
MENU
                      Â
En ChangeTarget('Frame_Haut')> Haut de la Frame ou
         Vers le ChangeTarget('Frame_Bas')> Bas
....
Le fichier (appelé lorsque l'on clique sur " l'image ") :
[Revenir en arrière]
Le fichier (appelé par ) :
DOCUMENT VIDE
Nous terminons ainsi les exemples des frames, nous allons résumer cette leçon.
Résumé :
Le découpage d'une fenêtre, en frames est réalisé à l'aide d'un document HTML spécial construit à partir de trois nouvelles balises.
. . . va permettre de préciser la géométrie des différentes frames. Il s'agit en quelque sorte d'une balise de déclaration. Elle possède deux attributs :
est la balise de définition des frames déclarées à l'aide d'une balise . Elle possède six attributs :
est utilisé pour indiquer le texte que doivent afficher les browsers incapables de gérer les frames.
Enfin, un nouvel attribut a été créé de façon à pouvoir indiquer dans quelle frame doit être affiché le document associé à un lien hypertexte :
Ceci donnera par exemple :
Top of Form
. . .
Bottom of Form
Exercice HTML : Frames, fenêtres de navigateur, iframes
Thème
Réalisation de frames HTML (partage de la fenêtre du browser Web en sous-fenêtres), et manipulation de fenêtres de navigateur.
La technique des frames (cadres) est principalement utilisée lorsque l'on veut mettre en place des barres de navigation ou lorsque l'on veut réaliser des mises en page complexes.
Remarque : les frames HTML sont supportés à partir des versions de browsers Netscape 2 et IExplorer 3
Attention cependant aux limites des frames :
Comme alternative aux frames pour faire usage, dans un ensemble de pages Web, de code HTML commun à ces pages (barres de navigation ), on utilisera la technique du Server Side Include (SSI) ou l'un des mombreux systèmes de templating sous PHP (FastTemplate, PHPlib, Smarty ).
Balises et JavaScript relatifs aux frames
 pixels ou %, " | COLS="pixels ou %,
"
    BORDER="nb.pixels" FRAMEBORDER="0|1">
{NORESIZE}
                   MARGINWIDTH="pixels"          MARGINHEIGHT="pixels">
       (l'URL peut être celle d'une page HTML ou d'une image !) ou, pour browser (ou robot !) ne supportant pas les frames :
 texte à afficher
(pour mettre à jour plusieurs frames à la fois, voir la technique
JavaScript décrite plus bas) ou formulaire provoquant mise à jour d'un frame :Â
Top of Form
target name"
Bottom of Form
METHOD= >
Remarques
bloc qui n'existe pas
Usage de JavaScript dans la manipulation des frames de fenêtres
1)    définir le JavaScript suivant (dans le bloc ) :
Â
2)    puis définir ainsi le lien qui devra charger les pages "" et "" respectivement dans les frames définis par les cibles "frame1" et "frame2" :
 <A
HREF="javascript:TwoFrames('','frame1','',
'frame2');">lien
1)    si l'on défini les fonctions JavaScript suivantes (dans le bloc ) :
Â
2)    on peut alors faire ouvrir une fenêtre sans aucun attribut (palette de navigation) à partir du lien hypertexte suivant (attention à bien englober tous       les        paramètres,       depuis toolbar jusqu'à screenY entre    deux apostrophes !) :
      ouvrir
3)    et l'on peut faire refermer cette fenêtre à partir du lien hypertexte suivant :
 fermer
Les frames en-ligne (IFRAME)
Standardisée sous HTML 4.01, la notion de "frame en-ligne" (inline frame, iframe) est appliquable depuis les versions de navigateur Mozilla 1, Netscape 6, IE 4. Un peu à la façon de la balise OBJECT pour l'insertion d'objets en-ligne dans une page, cette technique implémentée coté client permet d'inclure une ressource Web (page HTML statique ou dynamique ) dans un bloc à l'intérieur d'une page (analogie à la technique coté serveurSSI, Server Side Include).
       SRC="URL" WIDTH="largeur" HEIGHT="hauteur"    MARGINWIDTH="marge horizontale" MARGINHEIGHT="marge verticale"
       ALIGN="top|middle|bottom|left|right"        SCROLLING="yes|no|auto" FRAMEBORDER="0|1">code alternatif que verront les navigateurs n'implémentant pas les iframes
Références
Donnée de l'exercice
Réaliser le "frameset" illustré par la copie d'écran ci-dessous :
Corrigé de l'exercice
Fichier ""Â
    Exercice HTML : Définition d'un frameset
MARGINHEIGHT="1" MARGINWIDTH="1"
    NAME="pied">
     Attention : ce document contient des "frames" que votre navigateur WWW n'est      pas capable d'interpréter. Utilisez Netscape Navigator