A la fin de ce chapitre, vous serez à même de concevoir un site internet en utilisant les frames pour votre mise en page ou pour en définir le gabarit. Aujourd'hui, il est vraiment recommandé de ne plus utiliser ce mécanisme de mise en page.
Auparavant, les navigateurs ne pouvaient afficher qu'un seul fichier HTML mais avec la technologie développée par Netscape, on peut désormais diviser en plusieurs zones la page affichée par le navigateur, ces zones ou fenêtres ou encore cadres se nomment frames. Les frames sont apparues avec la version html 3.0. Même si bon nombre de webmaster les utilisaient, elle n'étaient pas une composante officielle du langage. Aujourd'hui, même si on peut encore les utiliser, leur usage n'est pas du tout recommandé. Cependant il est toujours intéressant de maîtriser leurs fonctionnement. Par contre, on peut toujours utiliser la balise iframe.
La balise <frameset>prend la place du tag <BODY>, c'est elle qui dans un premier temps va définir les cadres, qu'ils soient verticaux ou horizontaux, et leurs dimensions (en % ou en pixels).
Voici deux exemples (les plus courants) ainsi que le code source.
1. Le premier contient deux cadres horizontaux appelés Zone 1 et Zone2.
2. Le deuxième contient aussi deux cadres horizontaux appelés Zone 1 et Zone2 et, un cadre vertical appelé Zone 3.
Exemple 1.
<FRAMESET ROWS="20%,80%">
<FRAME SRC="zone1.htm" NAME="ZONE1">
<FRAME SRC="zone2.htm" NAME="ZONE2">
</FRAMESET>
Exemple 2.
<FRAMESET ROWS="80%,20%">
<FRAMESET COLS="20%,80%">
<FRAME SRC="zone1.htm" NAME="ZONE1">
<FRAME SRC="zone2.htm" NAME="ZONE2">
</FRAMESET>
<FRAME SRC="zone3.htm" NAME="ZONE3">
</FRAMESET>
Les attributs ROWS et COLS définissent le type de cadre, qui peut être vertical (ROWS - rangée) ou horizontal (COLS - colonnes). Ils prennent une liste de valeurs séparées par des virgules. Ces valeurs sont, sous forme de pourcentage entre 1 et 100 (valeurs relatives) ou sous forme de pixels (valeurs absolues).
Deux remarques: si une valeur manque ou est remplacée par une étoile (*) la colonne ou rangée s'ajustera automatiquement, de plus la hauteur de toutes les rangées ou la largeur de toutes les colonnes doit correspondre à la hauteur ou à la largeur de la fenêtre du navigateur, sinon la dernière valeur ne sera pas prise en compte et la fenêtre ou rangée s'ajustera automatiquement à l'écran.
Cet attribut permet de déterminer si les cadres auront ou n'auront pas de bordure. Il à deux valeurs YES ou NO.
FRAMEBORDER=YES OU FRAMEBORDER=NOCet attribut permet de déterminer la taille des bordures entourant les cadres. Il peut prendre plusieurs valeurs ex: BORDER=n, n étant une valeur en pixels définissant la taille de la bordure. La valeur 0 indique aucune bordure.
BORDER=0 ou par exemple BORDER=5Cet attribut permet de déterminer la couleur de l'ensemble des bordures des cadres. Il suffit pour cela de spécifier une couleur sous forme de nom ou de sa valeur hexadécimale .
BORDERCOLOR="red" ou BORDERCOLOR="#FF0000"Cet attribut permet de déterminer un espace entre les cadres. Il peut prendre plusieurs valeurs ex: FRAMESPACING=n, n étant une valeur en pixels définissant l'espace entre les cadres. La valeur 0 indique aucun espace.
FRAMESPACING=0 ou par exemple FRAMESPACING=5La commande FRAME permet de définir un cadre à l'intérieur du conteneur <FRAMESET>. Elle a plusieurs attributs, les plus importants étant SRC et NAME.
Cet attribut indique l'URL (chemin) du document HTML qui sera affiché dans un cadre spécifique.
<FRAME SRC="zone1.htm">Cet attribut permet de donner un nom à un cadre, ce qui permettra ensuite de l'appeler avec l'attribut TARGET, attention majuscule différent de minuscule.
<FRAME SRC="zone1.htm" NAME="ZONE1">MARGINWIDTH permet de spécifier la grandeur des marges de gauche et de droite du cadre crée, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0.
MARGINHEIGHT permet de spécifier la grandeur des marges de haut et de bas du cadre crée, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0.
<FRAME SRC="zone1.htm" NAME="ZONE1" MARGINWIDTH=2 MARGINHEIGHT=2>Cet attribut permet de déterminer si les cadres auront ou n'auront pas de bordure. Deux valeurs YES ou NO.
<FRAME SRC="zone1.htm" NAME="ZONE1" FRAMEBORDER=NO>Cet attribut permet d'ajuster l'espace entre les cadres. La valeur doit être en pixels.
<FRAME SRC="zone1.htm" NAME="ZONE1" BORDER=2>En utilisant cet attribut vous interdisez à l'utilisateur de redimensionner les cadres. Par défaut les cadres peuvent être redimensionnés.
<FRAME SRC="zone1.htm" NAME="ZONE1" NORESIZE>Cet attribut permet d'attribuer ou non une barre de défilement (scrollbar) à un cadre. Il possède trois valeurs :
• YES : Indique que la barre de défilement sera toujours visible.
• NO : Indique que la barre de défilement ne sera jamais visible (à tester avant de l'utiliser).
• AUTO : Indique que le navigateur déterminera si la barre de défilement est nécessaire.
<FRAME SRC="zone1.htm" NAME="ZONE1" SCROLLING="AUTO">
Même si il est de plus en plus rare de trouver des navigateurs non compatibles il faut néanmoins ne pas négliger cet aspect sous peine de se passer de quelques visiteurs. La technique consiste à utiliser les balises <NOFRAME> et </NOFRAME>. Ces balises permettent de spécifier un texte HTML en version normale. Entre ces balises il faut donc théoriquement développer un deuxième site vous pouvez pour simplifier le travail (ouf !!) préciser des regrets polis et insérer des liens vers les sites officiels de Microsoft et Netscape pour que le visiteur opte pour une mise à jour.
<FRAMESET ROWS="20%,80%">
<FRAME SRC="zone1.htm" NAME="ZONE1">
<FRAME SRC="zone2.htm" NAME="ZONE2">
</FRAMESET>
<NOFRAMES>
<BODY>
Désolé mais ce site comme vous pouvez le voir utilise la technique des frames.
</NOFRAMES>
La technique des cadres locaux s'obtient avec la balise <IFRAME> elle permet d'insérer une fenêtre à n'importe quel endroit de votre document. Cette fenêtre fera référence à un autre document HTML, la balise <IFRAME> doit être dans le corps de votre document, c'est-à-dire entre les balises <BODY> et </BODY>. Attention cette balise est spécifique à I.Explorer malgré qu'elle a été approuvé e par le W3C. Elle a les même attributs que la balise <FRAME> c'est à dire :
BORDER; BORDERCOLOR; FRAMEBORDER; MARGINHEIGHT; MARGINWIDTH; NAME; NORESIZE; SCROLLING; SRC;
Elle possède en plus les attributs HEIGHT et WIDTH qui déterminent la hauteur et la largeur du cadre inséré dans votre page. Valeur en pixels. Note : Un texte de remplacement (pour Netscape) peut être mis entre <IFRAME> et </IFRAME>
<IFRAME SRC="iframe.htm" NAME="ZONE1" HEIGHT="80" WIDTH="150">
Désolé mais votre navigateur ne supporte pas les cadres locaux.
</IFRAME>
Normalement, les pages appelées par des liens s'affichent dans la frame où les liens ont été activés. L'attribut TARGET permet d'appeler un autre cadre par le nom défini avec l'attribut NAME précédemment. Mais il existe des noms réservés de frame cible, voici les différentes valeurs.
| Valeur | Signification |
|---|---|
| _self | L'URL cible va s'afficher dans la même frame que le lien. |
| _parent | L'URL cible va s'afficher dans la structure externe. |
| _blank | L'URL cible va s'afficher dans une nouvelle fenêtre ouverte par le navigateur. |
| _top | L'URL cible va s'afficher dans toute la fenêtre du navigateur et les frames disparaissent. |
<A HREF="page.htm" TARGET="ZONE2">
<A HREF="http://www.allhtml.com" TARGET="_top">
Les frames ont été très utilisé au départ de l'internet, en 1996 et 1997. Puis avec le développement de HTML 4.0, ils sont tombés en désuétude et ne sont plus utilisés avec HTML 5.0. Ce système offrait une certaine souplessse en séparant en plusieurs fichiers le contenu d'une page internet. Cependant, à l'utilisation, on s'aperçoit que la gestion des frames est assez complexe et de plus le référencement par les moteurs de recherche est très limité.