Programmation en HTML

   

chapitre 2

 

Les cadres

     
   

1. Les cadres : C'est quoi?

2. Le conteneur <frameset> </frameset>

3. Les attributs du conteneur <frameset> </frameset>

4. La balise<frame>

5. Liens vers d'autres cadres

6. Certains navigateurs ne sont pas compatibles avec les cadres



1. Les cadres : C'est quoi?

Les premiers navigateurs ne pouvaient afficher qu'un seul fichier HTML.
Avec la technologie développée à l'origine 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 en anglais. Les frames sont apparues avec la version 3.0 des navigateurs. Bon nombre de Webmasters les utilisaient, elles n'étaient pas encore une composante officielle du langage HTML.

2. Le conteneur <frameset> </frameset>


Le tag <frameset> prend la place de la balise <body> </body>, c'est elle qui va définir les cadres.

<html>
<head>
<title>Le titre de la page</title>
</head>

<FRAMESET >

<FRAME> la page HTML à charger.
<FRAME>la page HTML à charger.

</FRAMESET>
<NOFRAMES>

<body>

Les textes, liens & images...
(lisibles par les navigateurs qui ne comprennent pas les cadres)

</body>

</NOFRAMES>

</html>

Exemple de page avec deux cadres horizontaux (rows - rangées)

<html>
<head>
<title>Le titre de la page</title>
</head>

<FRAMESET ROWS="200,*">

<FRAME SRC="cadre1.htm"> (la page HTML cadre1.htm à charger.)
<FRAME SRC="cadre2.htm"> (la page HTML cadre2.htm à charger).


<NOFRAMES>

<body bgcolor="FFFFCC">

Les textes, liens & images...
Votre navigateur ne comprend pas les cadres

<!-- les commentaires -->
</body>

</NOFRAMES>

</FRAMESET>

</html>

Pour voir cette page cliquer ici

 

_______________________________________________

Exemple de page avec deux cadres verticaux (cols - colonnes)

<html>
<head>
<title>Le titre de la page</title>
</head>

<FRAMESET COLS="200,*">

<FRAME SRC="cadre1.htm"> (la page HTML cadre1.htm à charger.)
<FRAME SRC="cadre2.htm"> (la page HTML cadre2.htm à charger).

</FRAMESET>
<NOFRAMES>

<body bgcolor="FFFFCC">

Les textes, liens & images...
Votre navigateur ne comprend pas les cadres

<!-- les commentaires -->
</body>

</NOFRAMES>

</html>

Pour voir cette page cliquer ici

_______________________________________________

Page avec trois cadres          

Nous pouvons commancer comme si nous avions deux cadres verticaux

<FRAMESET COLS="200,*">

<FRAME SRC="cadre1.htm"> (la page HTML cadre1.htm à charger.)
<FRAME SRC="cadre2.htm"> (la page HTML cadre2.htm à charger).

</FRAMESET>

Mais on remplace <FRAME SRC="cadre2.htm"> par

<FRAMESET ROWS="200,*">

<FRAME SRC="cadre2.htm"> (la page HTML cadre2.htm à charger.)
<FRAME SRC="cadre3.htm"> (la page HTML cadre3.htm à charger).

</FRAMESET> pour diviser la partie restante à droite en deux cadres horizontaux ce qui donne :

<html>
<head>
<title>Le titre de la page</title>
</head>

<FRAMESET COLS="200,*">

<FRAME SRC="cadre1.htm"> (la page HTML cadre1.htm à charger.)
<FRAMESET ROWS="200,*">

<FRAME SRC="cadre2.htm"> (la page HTML cadre2.htm à charger.)
<FRAME SRC="cadre3.htm"> (la page HTML cadre3.htm à charger).

</FRAMESET>

</FRAMESET>
<NOFRAMES>

<body bgcolor="FFFFCC">

Les textes, liens & images...
Votre navigateur ne comprend pas les cadres

<!-- les commentaires -->
</body>

</NOFRAMES>

</html>

Pour voir cette page cliquer ici

3. Les attributs du conteneur <frameset> :

Les attributs rows et cols
Ces attributs définissent le type des cadres, qui peut être verticaux (cols - colonnes) ou horizontaux (rows - rangée) . Ils prennent une liste de valeurs séparées par des virgules.
Ces valeurs sont exprimées :

- en pourcentage entre 1% et 100% (valeurs relatives)
- en pixel (valeurs absolues)
- remplacée par une étoile (*) (la colonne ou rangée s'ajustera automatiquement)
- si une valeur manque (la colonne ou rangée s'ajustera automatiquement)
par exemple : <frameset cols="20%,80%"> ou
<frameset rows="50,*">
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 colonne ou rangée s'ajustera automatiquement à l'écran.


L'attribut frameborder.
Cet attribut permet de déterminer si les cadres auront ou n'auront pas de bordure. Il a deux valeurs yes ou no. frameborder=yes ou frameborder=no

L'attribut border.
Cet 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, par exemple border=3
La valeur 0 indique aucune bordure. border=0

L'attribut bordercolor.
Cet 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"

L'attribut framespacing.
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 par exemple framespacing=5 .
La valeur 0 indique aucun espace. framespacing=0

exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="143,*" border="0" framespacing="0" frameborder="NO">
<frame src="cadre2.htm" noresize scrolling="NO" marginwidth="0" marginheight="0" frameborder="NO" name="menu">
<frame src="cadre3.htm" name="page" marginwidth="0" marginheight="0" scrolling="AUTO" noresize>
<noframes>
</frameset>
<body>

</body>
</noframes>
</html>

Pour voir cette page cliquer ici

4. La balise <frame>

La commande frame permet de définir un cadre à l'intérieur du conteneur <frameset>. Elle a plusieurs attributs, les plus importants sont src et name.

L'attribut src.
Cet attribut indique l'URL du document HTML qui sera affiché dans un cadre spécifique.
<frame src="cadre1.htm">

L'attribut name.
Cet attribut permet de donner un nom à un cadre, ce qui permettra ensuite de l'appeler avec l'attribut target .
<frame src="cadre1.htm" name="cadre1">
(nota :un nom de cadre en majuscule est différent d'un nom en minuscule, utiliser de préférence les minuscules)

L'attributs marginwidth .
- marginwidth permet de spécifier la grandeur des marges gauche et droite du cadre créé, la valeur doit être exprimée en pixels, elle peut avoir comme valeur 0.
<frame src="cadre1.htm" name="cadre1" marginwidth=3>

L'attributs marginheight.
- 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="cadre1.htm" name="cadre1" marginheight=3>

L'attribut frameborder.
Cet attribut permet de déterminer si les cadres auront ou n'auront pas de bordure. Deux valeurs yes ou no.
<frame src="cadre1.htm" name="cadre1" frameborder=no>

L'attribut noresize.
cet attribut, interdit à l'utilisateur de redimensionner les cadres. Par défaut les cadres peuvent être redimensionnés.
<frame src="cadre1.htm" name="cadre1" noresize>

L'attribut scrolling.
Cet attribut permet d'attribuer ou non une barre de défilement (scrollbar) à un cadre.
Trois valeurs sont possible :
- 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="cadre.htm" name="cadre1" scrolling="auto">

L'attribut border (Netscape uniquement).
Cet attribut permet d'ajuster l'espace entre les cadres. La valeur doit être exprimée en pixels.
<frame src="cadre1.htm" name="cadre1" border=2>

5. Liens vers d'autres cadres

En général, les pages appelées par des liens s'affichent dans le cadre où les liens ont été activés.

L'attribut target permet d'appeler un autre cadre. Le nom du cadre est défini avec l'attribut name vu précédemment. Mais il existe des noms de cadre cible réservés.

Noms de frame cible réservés
_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
               (les frames disparaissent)
_new       Identique à _blank (nouvelle fenêtre)


Exemple de lien vers un autre cadre. (voir le lien6)

<a href="cadre3.htm" target="cadre2">Lien</a>

Exemple de lien externe avec la valeur _top. (voir le lien7)

<a href="http://www.allhtml.com" target="_top">Lien</a>

6. Certains navigateurs ne sont pas compatibles avec les cadres

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, en particulier, les navigateurs pour les personnes mal-voyantes. La technique consiste à utiliser les balises <noframes> et </noframes>. 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. Il est aussi possible pour simplifier le travail de 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.

Exemple d'utilisation des balises <noframes> et </noframes>.

<frameset rows="20%,80%">
<frame src="cadre1.htm" name="cadre1">
<frame src="cadre2.htm" name="cadre2">

<noframes>
<body>
Désolé mais ce site comme vous pouvez le voir utilise la technique des frames. Merci de faire la mise à jour de votre navigateur.
</body>
</noframes>


</frameset>


     
 
Introduction | Découvrez le HTML | La page HTML | Les liens hypertextes | Formater le texte
Mettre des images | Les tableaux | Les listes & définitions | Les formulaires | Le multimédia | Les cadres