FRANCAIS francophone2.gif ANGLAIS

 

 

Created the, 12/06/2019

 Updated the, 02/01/2020

Visiteurs N°  


Home
Back to Main Sites New Blog Novelty Search engine Your Shopping Cart For Shopping Your Member Area Bookmarks, Your Favorite Games Static Welcome Page Site in French Web Site in English
Summaries
Basic Electronics Fundamental Technology Test your Knowledge Digital Theoretical Electronics Digital Practical Electronics Digital Electronic Lexicon Data book TTL Data book CMOS TVC Troubleshooting Mathematical
Microcomputers
Theoretical of Microcomputers Test your Knowledge Practical Microcomputers Computer Glossaries
Physical
The light Field of Action Electromagnetic Radiation
Technologies
Classification of Resistances Identification of Resistances Classification of Capacitors Identification of Capacitors
Mathematical Forms
Geometry Physical 1. - Electronic 1. 2. - Electronic 1. 3. - Electrical 1. 4. - Electromagnetism
Access to all our Products
E. T. F. - Volume I - 257 Pages E. T. F. - Volume II - 451 Pages E. T. F. - Volume III - 611 Pages E. T. D. - Volume I - 610 Pages N. B. M. - Volume I - 201 Pages E. T. M. - Volume I - 554 Pages Business at Home Books 34 free pages Our E-books Geometry Software Electronic Components Software
Overview of all our Products
E. T. F. - Volume I - 257 Pages E. T. F. - Volume II - 451 Pages E. T. F. - Volume III - 611 Pages E. T. D. - Volume I - 610 Pages E. T. M. - Volume I - 554 Pages Geometry Software Electronic Components Software
Our Lessons in PDF Formats
Basic Electronics Fundamental Technology Digital Theoretical Electronics Digital Practical Electronics Theoretical of Microcomputers Mathematics
Data Processing
Troubleshooting Win98 and WinXP PC Troubleshooting Glossary HTML and Programs PHP and Programs JavaScript (in progress) Creation of several Sites
Forums
Electronic Forum and Infos Electronic Forum and Poetry
Miscellaneous and others
Form of the personal pages News XML Statistics CountUs JavaScript Editor Our Partners and Useful Links Partnership Manager Our MyCircle Partners Surveys 1st Guestbook 2nd Guestbook Site Directories




Signets :
  Leçons suivantes        Leçons précédentes     Bas de page
  Création de Frames   FRAMESET   FRAME
  NOFRAMES   Utilisation des Frames   Les Frames et JavaScript
  Aperçu de l'Annuaire ou Formulaire   Découpage de l'Annuaire   Test de Frames, Exemple 3
  Test de Frames, Exemple 4   Test de Frames, Exemple 5   Frames avec Changement d'Images
  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet


Les Frames HTML :


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 "Apercu_1_de_Frame.html", dont le code HTML ci-dessous :

<HTML>

           <HEAD>

               <TITLE> Exemple d'un Annuaire </TITLE>

           </HEAD>

                    <FRAMESET ROWS="235, *">

                    <FRAME SRC="Annuaire.html" MARGINWIDTH="25" MARGINHEIGHT="25" NORESIZE>

                    <FRAMESET COLS="48%, 50%">

                    <FRAME SRC="images/Livre.png" NAME="LISTE" MARGINWIDTH="35" MARGINHEIGHT="35">

                    <FRAME SRC="images/Livre.png" NAME="DETAIL" MARGINWIDTH="35" MARGINHEIGHT="35">

                    </FRAMESET>

                    <NOFRAMES>

                    Ce document contient des frames et votre browser est incapable de les g&eacute;rer ...

                    </NOFRAMES>

                    </FRAMESET>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 1]. Dont nous expliquerons en détail au cours de nos leçons, car, en réalité, il y a 6 pages HTML.

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 "Annuaire.html". 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 "Annuaire.html", dont le code HTML ci-dessous faisant parti du même document HTML, en [Exemple 1] ci-dessus :

<HTML>

           <HEAD>

               <TITLE> Annuaire </TITLE>

       <STYLE TYPE="text/css"> /* Style interne */

                <!-- A { color:#993300; text-decoration:none; }

                A:hover { color:#005500;text-decoration:underline; } -->

       </STYLE>

            </HEAD>

          <BODY BGCOLOR="#E2E2E2" LINK="#FF0000" ALINK="#FF00FF" VLINK="#800008">

          <CENTER> <H1> FORMULAIRE &nbsp;&nbsp; - &nbsp;&nbsp; <a href="Sommaire_HTML_Programmes.php" TARGET="_TOP">Retour au sommaire PHP</a> </H1>

          <FORM ACTION="Apercu_1_de_la_Frame_Gauche.html" METHOD="GET" TARGET="LISTE">

          <p> <font face="Arial" size"4" color="#005500"> <b> Votre Pr&eacute;nom : </b>

          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE="text" NAME="LISTE" VALUE="" SIZE="22"> <BR>

          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b> Votre Nom : </b>

          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE="text" NAME="DETAIL" VALUE="" SIZE="22"> <BR>

          <b> Votre Adresse : </b>

           &nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE="text" NAME="recherche" VALUE="" SIZE="22"> <BR> </font> </p>

           &nbsp;&nbsp;&nbsp;&nbsp; <BUTTON TYPE ="SUBMIT"> <img src="images/Fleche_Gauche.PNG"> </BUTTON>

          </CENTER>

          </FORM>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 2]. Découpage de notre document frame.

On remarque toutefois un nouvel attribut pour la balise <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.

Création de frames :

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 <BODY> ... </BODY>. Dans le cas des frames, le corps du document est systématiquement inséré dans les balises <FRAMESET> ... </FRAMESET>, <FRAME> et <NOFRAMES>.

Nous attirons votre attention que si vous mettez une balise <BODY> dans une frame par exemple, avec une balise <FRAMESET>, cela ne pourra pas fonctionner.

Exemple de document classique contenant l'information à afficher à l'utilisateur (texte, images, formulaires ...)

<HTML>

           <HEAD>

               <TITLE> . . . . . . </TITLE>

           . . . . . .

           </HEAD>

          <BODY>

          . . . . . .

          </BODY>

</HTML>

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

<HTML>

           <HEAD>

               <TITLE> . . . . . . </TITLE>

           . . . . . .

           </HEAD>

                    <FRAMESET . . . >

                            <FRAMESET . . . >

                                      . . .

                            </FRAMESET . . . >

                                      . . .

                                           <FRAMESET . . . >

                                                     <FRAME . . . >

                                    </FRAMESET . . . >

                                                     <FRAME . . . >

                                    </FRAMESET . . . >

</HTML>

<FRAMESET> :

<FRAMESET> est la balise d'ouverture permettant de diviser une zone en sous-zone, 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 :

  • n : la valeur de n indique la hauteur de la sous-zone en nombre de pixels ;

  • n% : n indique ici la hauteur de la sous-zone exprimée en pourcentage de la taille de la zone mère ;

  • n* : ici, n est optionnel ; le caractère * indique au browser qu'il doit donner à la sous-zone la place encore disponible. Lorsque plusieurs éléments de la liste utilisent ce format, la place sera encore disponible est répartie entre les sous-zones correspondantes. n pourra alors être utilisé pour indiquer au browser qu'une sous-zone doit recevoir une proportion n fois surpérieure de la place encore disponible.

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 <FRAMESET> . . . </FRAMESET>, on ne peut trouver que les trois balises suivantes :

  • <FRAMESET> . . . </FRAMESET>, qui permet de rediviser une sous-zone ;

  • <FRAME . . . > qui est utilisée pour caractériser une sous-zone ;

  • Et enfin, <NOFRAME> . . . </NOFRAME>, qui permet d'afficher un texte à la place des frames si le browser n'est pas capable de les gérer.

Aucune autre balise HTML ne peut être acceptée.

<FRAME> :

<FRAME> est la balise utilisée pour caractériser les sous-zones définies à l'aide de la balise <FRAMESET>. 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 NAME est 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.

<NOFRAMES> :

<NOFRAMES> 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 <FRAMESET>, </FRAMESET>, <FRAME> et également <NOFRAMES> et </NOFRAMES>. Or, si on retire toutes ces balises d'un document contenant des frames, on voit qu'il ne reste plus que le texte qui était compris entre les balises <NOFRAMES>. . . </NOFRAMES>

Au contraire, un browser capable de gérer des frames interprétera les balises <NOFRAMES> . . . </NOFRAMES> 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 Test_Frames.html utilisé pour renseigner l'attribut SRC des balises <FRAME> est un fichier HTML classique.

Premier exemple ; ce qui donne ceci :

Pour visualiser l'aperçu, en cliquant ici. [Exemple 3].

Exemple d'utilisation d'une page intitulée "Test_Frames_2.html", dont vous trouverez une partie du code HTML ci-dessous, correspondant uniquement aux frames ... :

Deuxième exemple ; ce qui donne ceci :

<HTML>

           <HEAD>

               <TITLE> 2&egrave;me Exemple d'un Test Frame </TITLE>

           </HEAD>

                    <FRAMESET ROWS = "*, *, *">

                    <FRAME SRC = "Name_Haut_1.html">

                    <FRAMESET COLS ="3 *, *">

                    <FRAME SRC ="Name_Sous_Haut_Gauche.html">

                    <FRAME SRC ="Name_Droite_1.html">

                    </FRAMESET>

                    <FRAMESET COLS = " *, *, 2 *">

                    <FRAME SRC = "Name_Gauche.html">

                    <FRAME SRC = "Name_Sous_Gauche.html">

                    <FRAME SRC = "Name_Droite.html">

                    </FRAMESET>

                    <NOFRAMES>

                    Ce document contient des frames et votre browser est incapable de les g&eacute;rer ...

                    </NOFRAMES>

                    </FRAMESET>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 4].

Utilisation des frames :

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 <A> et <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 :

<A HREF="/dossier.html" TARGET="zonedossier">Voir le dossier</A>

L'attribut est là pour indiquer au browser qu'en réponse à un clic, il doit afficher le document dossier.html dans la frame dont le nom est "zonedossieré" (c'est-à-dire la frame qui a été définie par la balise <FRAME NAME="zonedossier"... >). De la même façon, la soumission du formulaire défini par :

<FORM ACTION="Apercu_1_de_la_Frame_Gauche.html" METHOD="GET" TARGET="LISTE">

</FORM>

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 :

  • _blank, qui est utilisé pour indiquer au browser qu'il doit créer une nouvelle fenêtre (c'est-à-dire un nouveau browser) afin d'afficher le document. Le nouveau browser est une frame qui ne porte pas de nom et ne peut donc pas être la cible d'un autre lien hypertexte ;

  • _self, qui indique que le document sera chargé dans la même zone que celle dans laquelle se trouve le lien hypertexte. Il s'agit de la valeur par défaut lorsque l'attribut TARGET n'est pas renseigné ;

  • _top, qui indique au browser de supprimer toutes les frames existantes et d'afficher le document de façon classique, en occupant toute la surface du browser ;

  • _parent, qui indique au browser d'afficher le document, en occupant toute la surface de la zone dans laquelle a été affiché le document contenant le lien. Cette notion n'a de sens que lorsque les différents niveaux de frames proviennent de l'imbrication de documents et non de l'imbrication des balises <FRAMESET>. Dans ce cas, un lien situé dans la frame "basdroite" par exemple, et ayant un attribut TARGET="_parent" provoquera l'affichage du document correspondant dans la frame "bas". Le document recouvrera dans les deux frames "basdroite" et "basgauche". dans ce cas précis, le même résultat aurait été obtenu avec un attribut TARGET="bas".

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 "Plus_Bas.html" 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 :

Descendre.html, Plus_Haut.html, Plus_Bas.html, A_Droite.html et A_Gauche.html

Le fichier Descendre.html est un document constitué de deux frames horizontales de même taille. La frame supérieure affiche le document Plus_Haut.html et la frame inférieure, le document Plus_Bas.html :

<HTML>

           <HEAD>

               <TITLE> DESCENDRE </TITLE>

           </HEAD>

                    <FRAMESET ROWS = "*, *">

                    <FRAME SRC = "Plus_Haut.html">

                    <FRAME SRC = "Plus_Bas.html">

                    </FRAMESET>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 5].

Le fichier Plus_Bas.html possède uniquement un lien hypertexte qui, lorsqu'il est activé, affiche dans la frame où il se trouve le document Descendre.html. Ceci a pour résultat de diviser la frame en deux sous-frames horizontales de taille égale.

Voici le code correspondant du document Plus_Bas.html :

<HTML>

           <HEAD>

               <TITLE> PLUS_BAS </TITLE>

           </HEAD>

          <BODY BGCOLOR="#373737" LINK="#FF0000" ALINK="#00FFFF" VLINK="#FF40FF"> <BR>

          <H2> <center> <font color="#FFFFFF"> "PLUS_BAS.HTML" <a href="http://www.electronique-et-informatique.fr/Electronique-et-Informatique/HTML_et_Programmes/Sommaire_HTML_Programmes.html" TARGET="_TOP">Retour au Sommaire HTML</a> </font> </center> </H2>

          <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <font face="Arial" size="4"> <a href="Descendre.html">Plus bas</a> </font> </p>

          </BODY>

</HTML>

Le Fichier A_Droite.html est un document constitué de deux zones verticales de même taille. La frame de gauche affiche le document Plus_Haut.html et la frame de droite affiche le document Plus_Bas.html, en voici le code ci-après :

<HTML>

           <HEAD>

               <TITLE> ZONE GAUCHE </TITLE>

           </HEAD>

                    <FRAMESET COLS = "*, *">

                    <FRAME SRC = "Plus_Haut.html">

                    <FRAME SRC = "Plus_Bas.html">

                    </FRAMESET>

</HTML>

Le Fichier A_Gauche.html est un document constitué de deux zones horizontales de même taille. La frame de haut affiche le document Plus_Haut.html et la frame du bas affiche le document Plus_Bas.html, en voici le code ci-après :

<HTML>

           <HEAD>

               <TITLE> ZONE HAUTE </TITLE>

           </HEAD>

                    <FRAMESET ROWS = "*, *">

                    <FRAME SRC = "Plus_Haut.html">

                    <FRAME SRC = "Plus_Bas.html">

                    </FRAMESET>

</HTML>

Le dernier fichier, Plus_Haut.html, 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 Descendre.html ou A_droite.html ou encore A_Gauche.html. Il s'agit en quelque sorte d'un sous-document du document Descendre.html ou A_Droite.html ou encore celui A_Gauche.html. Pour un lien du fichier Plus_Haut.html, 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 Descendre.html ou A_Droite.html ou encore A_Gauche.html) pour afficher le document correspondant aux liens hypertexte. On remplace ainsi le document Descendre.html ou A_Droite.html ou celui de A_Gauche.html par un autre document.

Examinons maintenant en détail les quatre liens du fichier Plus_Haut.html 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 (Descendre.html ou A_Droite.html ou encore celui de A_Gauche.html par un document classique (Plus_Bas.html) ;

2°) - Le deuxième, Au Sommet, permet d'afficher le document Plus_Bas.html, 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 Descendre.html par le document A_Droite.html (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 Descendre.html par le document A_Gauche.html (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.html :

<HTML>

           <HEAD>

               <TITLE> PLUS_HAUT </TITLE>

           </HEAD>

          <BODY BGCOLOR="#292929" LINK="#FF0000" ALINK="#00FFFF" VLINK="#FF40FF"> <BR>

          <H2> <center> <font color="#FFFFFF"> "PLUS_HAUT.HTML" &nbsp;&nbsp;&nbsp; <a href="http://www.electronique-et-informatique.fr/Electronique-et-Informatique/HTML_et_Programmes/Sommaire_HTML_Programmes.html" TARGET="_TOP">Retour au Sommaire HTML</a> </font> </center> </H2>

          <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <font face="Arial" size="4" color="#FFFFFF"> <a href="Plus_Bas.html" TARGET="_parent"> Plus Haut</a> &nbsp; (<I>_parent</I>) </font> </p> <BR>

          <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <font face="Arial" size="4" color="#FFFFFF"> <a href="Plus_Bas.html" TARGET="_top"> Au Sommet</a> &nbsp; (<I>_top</I>) </font> </p> <BR>

          <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <font face="Arial" size="4"> <a href="A_Droite.html" TARGET="_parent"> Zone Verticale</a> </font> </p> <BR>

          <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <font face="Arial" size="4"> <a href="A_Gauche.html" TARGET="_parent"> Zone Horizontale</a> </font> </p>

          </BODY>

</HTML>

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 :

Les frames et JavaScript :

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 INDEX.HTML (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 :

Pour visualiser l'aperçu, en cliquant ici. [Exemple 6]. Nous allons continuer à examiner cet exemple :

Fichier INDEX.HTML, voici le code suivant :

<HTML>

           <HEAD>

               <TITLE> D&eacute;placement d'une Image </TITLE>

           </HEAD>

           <!-- Si une frame n'est pas charg&eacute;e avec un fichier,

il semble que le nommage de la frame ne se fasse pas, car elle ne peut pas &ecirc;tre adress&eacute;e.

En cons&eacute;quence m&ecirc;me, si la frame doit &ecirc;tre vide &agrave; l'origine, il est n&eacute;cessaire de la charger avec un document vide (Vide.html) -->

                    <FRAMESET COLS = " *, 2 * ">

                    <FRAME NAME = "Frame_Menu" SRC = "Menu.html">

                    <FRAMESET ROWS = " *, * ">

                    <FRAME NAME = "Frame_Haut" SRC = "Vide.html">

                    <FRAME NAME = "Frame_Bas" SRC = "Vide.html">

                    </FRAMESET>

                    </FRAMESET>

</HTML>

Le fichier MENU.HTML (création du menu, appelé par INDEX.HTML) :

<HTML>

           <HEAD>

           <!-- Cet exemple montre :

           1 - l'adressage des liens d'un document, en tableau :

                         links[0] = Haut

                         links[1] = Bas

                         links[2] = L'image

           2 - La possibilit&eacute; de changer le TARGET D'UN LIEN :

                         a - Si on clique sur l'affichage sans avoir cliqu&eacute; sur le lien hypertexte Haut

                               ou sur le lien Bas de l'Image, elle remplace le MENU.

                         b - Si on clique pr&eacute;alablement sur le lien hypertexte Haut de l'Image, elle vient

                               dans la frame du Haut &agrave; droite.

                         c - Si on clique pr&eacute;alablement sur le lien hypertexte Bas de l'Image, elle vient

                               dans la frame du Bas &agrave; droite.

           3 - L'adressage des frames -->

               <TITLE> MENU </TITLE>

                        <SCRIPT>

                             function ChangeTarget (NewTarget) {

                                 document.links[2].target=NewTarget;

                        }

                        </SCRIPT>

           </HEAD>

          <BODY BGCOLOR="#292929" LINK="#FF0000" ALINK="#00FFFF" VLINK="#FF40FF"> <BR> <BR> <BR>

          <CENTER> <font face="Arial" size="5" color="#FFFFFF"> <i> O&ugrave; voulez-vous mettre l'image &nbsp; ? </i> <p> <BR>

          En <a href=javaScript:ChangeTarget('Frame_Haut')> Haut de la Frame</a> ou <BR> <BR>

          Vers le <a href=javaScript:ChangeTarget('Frame_Bas')> Bas</a> <p> <BR> </font>

          <font face="Arial" size="7"> <i> <a href="Image.html" target=""> l'image</a> </i> </font> <BR> <BR> <BR> </p>

          <p> <HR> <BR> <BR> <font face="Arial" size="4"> <a href="Index.html" target="_parent"> [Recommencer]</font></a> </p>

          </CENTER>

          </BODY>

</HTML>

Le fichier IMAGE.HTML (appelé lorsque l'on clique sur " l'image ") :

<HTML>

           <HEAD>

               <TITLE> IMAGE </TITLE>

           </HEAD>

               <BR> <BR> <CENTER>

          <BODY BGCOLOR="#454545">

          <a href="Sommaire_HTML_Programmes.html" target="_top"> <font size="5" color="#FFFFFF"> [Retour au Sommaire HTML]</font></a> <BR> <BR>

          <a href="Index.html" target="_parent"> <font size="5" color="#FFFFFF"> [Revenir en arri&egrave;re]</font></a> <BR> <BR> <BR>

          <img border="0" width="120" height="120" src="images/Globe.gif"> <BR> <BR> <BR>

          <img boder="0" src="images/W.gif" width="105" height="86">

                </CENTER>

          </BODY>

</HTML>

Le fichier VIDE.HTML (appelé par INDEX.HTML) :

<HTML>

           <HEAD>

               <TITLE> DOCUMENT VIDE </TITLE>

           </HEAD>

          <BODY>

          <!-- Si une frame n'est pas charg&eacute;e avec un fichier,

          il semble que le nommage de la frame ne se fasse pas,

          car elle ne peut pas &ecirc;tre adressée -->

          </BODY>

</HTML>

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.

<FRAMESET> . . . </FRAMESET> 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 :

  • ROWS="hauteur_1, hauteur_2, ... hauteur_N" définit la hauteur des différentes frames en cas de découpage horizontal ;

  • COLS="largeur_1, largeur_2, ... largeur_N" définit la largeur des différentes frames en cas de découpage vertical.

<FRAME> est la balise de définition des frames déclarées à l'aide d'une balise <FRAMESET>. Elle possède six attributs :

  • SRC="URL" indique le document à afficher dans la frame ;

  • NAME="nom" indique le nom de la frame de telle sorte que cette frame puisse être utilisée comme cible d'un lien hypertexte ;

  • MARGINWIDTH="n" définit l'espace entre le document et les frontières verticales de la frame ;

  • MARGINHEIGHT="n" définit l'espace entre le document et les frontières horizontales de la frame ;

  • SCROLLING="yes/no/auto" indique si la frame doit ou non posséder une barre de défilement ;

  • NORESIZE indique qu'il est impossible à l'utilisateur de redimensionner la frame.

<NOFRAMES> . . . </NOFRAMES> 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 :

  • TARGET="nom_de_la_frame"

Ceci donnera par exemple :

<A HREF="URL" TARGET="nom_de_la_frame"> . . . </A>

<FORM ACTION="URL" TARGET="nom_de_la_frame"> . . . </FORM>

<AREA HREF=". . .">

Fin de cette treizième leçon, la prochaine sera consacrée aux Méta-informations concernant le langage HTML.









Nombre de pages vues, à partir de cette date : le 27 Décembre 2019

compteur visite blog gratuit


Mon audience Xiti



Send an email to Corporate Webmaster for any questions or comments about this Web Site.

Web Site Version : 11. 5. 12 - Web Site optimization 1280 x 1024 pixels - Faculty of Nanterre - Last modification : JANUARY 02, 2020.

This Web Site was Created on, 12 JUNE 2019 and has Remodeled, in JANUARY 2020.