HTML Les cadres et frame

Les FRAMES

Cette fonctionnalité permet d’afficher plusieurs documents HTML distinctement dans des cadres d’une même page.

Chaque document HTML sera associé à un cadre par l’intermédiaire de son adresse URL.

Les attributs COLS et ROWS permettent de déterminer si les cadres doivent être présentés horizontalement ou verticalement.

Dans le document HTML contenant les FRAMES, vous devez remplacer les balises <BODY> et </BODY> par les balises <FRAMESET> et </FRAMESET>.

Vous devez d’ailleurs déclarer le document comme étant un document contenant des FRAMES, donc, commencer l’écriture du code par la syntaxe suivante :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"

"http://www.w3.org/TR/REC-html40/frameset.dtd">

Un exemple :

<HTML>

<HEAD>

<TITLE>Page d'accueil</TITLE>

</HEAD>

</FRAMESET>

<body>

<H1>Erreur</H1>

<P>Désolé, votre navigateur ne vous permet pas d’afficher les cadres</P>

</NOFRAME>

</BODY>

</HTML>

Description de l’exemple :

Dans la balise FRAMESET, nous avons d’abord défini l’attribut ROWS pour que les deux cadres soient affichés verticalement. Si l’on avait souhaité afficher les cadres horizontalement, l’un à côté de l’autre, il aurait fallu employer l’attribut COLS.

Ensuite, à cet attribut, nous avons défini la valeur 50% pour la proportion de l’écran à occuper pour le premier document, et une valeur identique pour le deuxième document. L’écran sera donc partagé équitablement entre les deux cadres.

La syntaxe qui aurait permis d’afficher le premier document dans le premier quart de la page, et le second document dans les autres trois quarts, est la suivante :

Toutefois, vous pouvez utiliser des valeurs exprimant les proportions de la page en pixel, il vous suffit d’omettre le signe « % ».

Ensuite, viennent les déclarations de pages à insérer dans les FRAMES.

Chaque page doit être déclarée dans une balise FRAME, et contient 2attributs, SRC et NAME.

SRC est la source, donc l’adresse URL et le nom de la page à insérer.

Name est le nom que l’on donne à la zone qui va afficher le document HTML, c’est-à-dire le FRAME.

Ainsi, le nom du FRAME sera utilisé ultérieurement comme attribut dans la balise <A>.

<NOFRAME> permet d’afficher un message d’erreur dans le cas où le navigateur n’est pas en mesure d’afficher des FRAMES.

Cependant, le bloc de <NOFRAME> jusqu’à </NOFRAME> est facultatif.

L’attribut TARGET :

Vous venez de constater que l’on pouvait nommer une zone, donc un FRAME, et ce, à l’intérieure de la balise <FRAME>.

Ainsi, lorsque vous utiliserez la balise <A> pour faire afficher une page HTML dans un FRAME, vous pourrez spécifier dans quel FRAME la page doit être affichée, et ce, par l’intermédiaire de l’attribut Target.

En effet, si à partir d’une page HTML, vous appelez une autre page par l’intermédiaire d’un lien, la page appelée s’affichera dans le FRAME courant, à la place de la page HTML contenant le lien. Par conséquent, l’attribut Target à la faculté de rediriger l’affichage de la page hyper liée dans un autre Frame que le Frame courant.

La syntaxe :

Dans l’exemple qui suit, nous avons une page HTML intitulée Accueil.htm qui contient 2 FRAMES.

Dans le premier FRAME, intitulé sommaire, nous souhaitons afficher en permanence le sommaire de la page, c’est-à-dire la page HTML intitulée index.htm.

Dans le second FRAME, intitulé principal, nous souhaitons afficher par défaut la page HTML intitulée presentation.htm, et en fonction des choix que réalisera l’utilisateur dans le sommaire, faire afficher l’une des 3 autres pages, mars.htm, jupiter.htm ou saturne.htm.

Par conséquent, le premier FRAME, sommaire, contiendra toujours index.htm.

Quant au second FRAME, principal, il contiendra presentation lors de l’ouverture de accueil.htm, et pourra basculer entre mars.htm, jupiter.htm ou saturne.htm selon sur lequel lien cliquera l’utilisateur à partir du sommaire.

Voici l’exemple :

Le document accueil.htm :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"

"http://www.w3.org/TR/REC-html40/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Page d'accueil</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Le document index.htm :

<HTML>

<HEAD>

<TITLE>Le sommaire</TITLE>

</HEAD>

<BODY>

<H1>Faites votre choix ici :</H1>

<P>Que voulez-vous visiter ?</P>

<P></P>

<P><A HRef="jupiter.htm" Target="principal">La planète JUPITER ?</A><,</P>

<P><A HRef="saturne.htm" Target="principal">La planète SATURNE ?</A></P>

<P>Mais au fait, <A Href="mars.htm" Target="principal">qui était le dieu MARS ?</A></P>

</body>

</HTML>

Le document presentation.htm :

<HTML>

<HEAD>

<TITLE>Qui sommes-nous ?</TITLE>

</HEAD>

<BODY>

<H1>Bonjour</H1>

<P>Ici nous allons nous présenter...</P>

<P>En fait, nous sommes des apprentis du langage HTML</P>

<P>Pour l'instant, il faut bien le reconnaître, ça se passe plutôt bien...</P>

</BODY>

</HTML>

Le document mars.htm :

<HTML>

<HEAD>

<TITLE>je vous souhaite la bienvenue chez MARS</TITLE>

</HEAD>

<BODY>

<H1>Bonne visite...</H1>

<P>

mythologie romaine, dieu de la Guerre, identifié à l’Arès

des Grecs.

Fils de Junon, qui l’aurait conçu après avoir touché une fleur, Mars compte parmi les divinités les plus importantes du panthéon romain. Sa figure est couramment associée

à celle de l’ancien dieu sabin Quirinus.

Les animaux qui lui sont associés sont le loup et le pivert.

</BODY>

</HTML>

Le document jupiter.htm :

<HTML>

<HEAD>

<TITLE>je vous souhaite la bienvenue sur la planète jupiter</TITLE>

</HEAD>

<BODY>

<H1>Bonne visite...</H1>

<P>

Jupiter (astronomie), planète, la plus grande et la plus massive du Système solaire, située en cinquième position à partir du Soleil et portant le nom du

maître des dieux dans la mythologie romaine. Jupiter est 1 400 fois plus volumineuse que la Terre (son diamètre est 11 fois plus important), pour une masse de 318 fois celle de la Terre. La densité moyenne de Jupiter est d'environ le quart de celle de la Terre : il s'agit d'une des planètes géantes du Système solaire, constituée majoritairement de gaz (plutôt que de métaux et de roches comme les autres planètes plus proches qu'elle du Soleil, dont la Terre).

</BODY>

</HTML>

Le document saturne.htm :

<HTML>

<HEAD>

<TITLE>je vous souhaite la bienvenue sur la planète saturne</TITLE>

</HEAD>

<BODY>

<H1>Bonne visite...</H1>

<P>

Saturne, située entre Jupiter et Uranus,

elle est la sixième planète à partir du

Soleil et occupe la deuxième position en taille et en masse (après Jupiter). Elle est entourée d'un système d'anneaux caractéristique et possède au moins dix-huit satellites.

</BODY>

</HTML>

L’élément FRAMESET peut contenir des attributs, je vous les présente :

Marginwidth : Précise la largeur des marges latérales (nombre de pixels.)

Marginheight : Précise la hauteur des marges haute et basse (nombre de pixels.)

Scrolling : Précise si l’on souhaite un ascenseur ou non, les valeurs sont : Yes, No ou Auto (valeur par défaut.)

Noresize : Indique que la taille des zones ne peut pas être modifiées par l’utilisateur.

Frameborder : Indique si le cadre doit être séparé des autres cadres, 1 pour oui (valeur par défaut,) 0 pour non.

Voici un exemple :

</FRAMESET>

Philippe BOULANGER