[Link]
com Anciennes publications archivées
HTML 6 : Les frames
Publié par Stéphane le 30/03/2005
Le sixième tutorial html, il concerne les frames.
Découpage de l'écran
• Vertical
• Horizontal
Les attributs de la balise <frame>
• src
• noresize
• frameborder
• scrolling
• marginwidth et marginheight
• name
Les attributs de la balise <frameset>
• framesapcing
La balise <noframes>
Les cadres sont maintenant remplacés par le php mais avant leurs utilisations étaient très rependu.
Les cadres sont des fenêtres qui permet de visualiser plusieurs choses en même temps sur une même page,
comme placer un sommaire dans un cadre et le contenu dans l'autre a visualiser.
Découpage de l'écran
Pour utiliser les frames, il faut savoir où chaque cadre se situera dans la fenêtre du navigateur.
Pour définir un ensemble de cadre, on va utiliser la balise du type conteneur <frameset>.
Il faut alors spécifier un attribut pour la découpe de la fenêtre, entre découper la fenêtre dans le sens horizontal, ou
dans le sens vertical.
Les deux attributs :
• rows pour spécifier le nombres de lignes
• cols pour spécifier le nombres de colonnes
URL d’origine : [Link] Page 1 sur 9
[Link] Anciennes publications archivées
On peut bien sur utiliser ces deux attributs en même temps, mais cela peut vite donner de multiples fenêtre assez
brouillon.
On doit ensuite indiquer les largeurs des colonnes (ou lignes) séparées par des virgules, par nombres de cadre
utiliser.
Les dimensions peuvent être exprimées en pixels et donc les cadres gardent les mêmes dimensions quelle que soit la
dimension de la fenêtre ou bien en pourcentage % à la fin de la valeur, avec le pourcentage la largeur (ou hauteur)
du cadre sera calculé en fonction de la taille de la fenêtre du navigateur.
On va utiliser la balise du type marqueur dans pour plus de fonction, elle possède de nombreux attributs que nous
détaillerons plus tard.
Il faut une balise par cadre.
Exemple pour un découpage vertical :
<html>
<head>
<title>Exemple de frame vertical</title>
</head>
<frameset cols="50%,*">
<frame>
<frame>
</frameset>
<body>
</body>
</html>
Résultat
La portion qui définit les cadres n'est pas écrite la partie d'en-tête <head></head>, ni dans le corps du document
<body></body>; mais entre la balise <frameset> qui est une nouvelle section.
Exemple pour un découpage horizontal :
<html>
<head>
<title>Exemple de frame horizontal</title>
</head>
<frameset rows="50%,*">
<frame>
<frame>
</frameset>
<body>
</body>
</html>
Résultat
URL d’origine : [Link] Page 2 sur 9
[Link] Anciennes publications archivées
On peut inclure des ensembles de cadres les uns dans les autres et mêler les découpages horizontaux et verticaux :
<html>
<head>
<title>Exemple de frame mêler</title>
</head>
<frameset rows="50%,*">
<frame>
<frameset cols="50%,*">
<frame>
<frameset rows="50%,*">
<frame>
<frame>
</frameset>
</frameset>
</frameset>
<body>
</body>
</html>
Résultat
Autre Résultat
Les attributs de la balise <frame>
src
La valeur src va permettre de remplir les cadres.
<html>
<head>
<title>Exemple de frame avec src</title>
</head>
<frameset rows="94, *">
<frame src="[Link]
<frameset cols="625, *">
<frame src="[Link]
<frame src="[Link]
</frameset>
</frameset>
<body>
</body>
</html>
Résultat
URL d’origine : [Link] Page 3 sur 9
[Link] Anciennes publications archivées
noresize
On peut tout à fait empêcher le redimensionnement en plaçant l'attribut noresize dans la balise <frame> du cadre
choisi.
Cet attribut n'a pas besoin de valeur.
Exemple :
<html>
<head>
<title>Exemple de frame avec noresize</title>
</head>
<frameset rows="50%,*">
<frame noresize>
<frameset rows="50%,*">
<frame noresize>
<frameset cols="50%,*">
<frame noresize>
<frame noresize>
</frameset>
</frameset>
</frameset>
<body>
</body>
</html>
Résultat
frameborder
Cet attribut permet d'afficher une bordure (ou pas) autour du cadre. La valeur est :
• 0 Aucune bordure
• 1 Bordure
Exemple :
<html>
<head>
<title>Exemple de frame sans bordure</title>
</head>
<frameset rows="50%,*">
<frame frameborder="0">
<frame frameborder="0">
</frameset>
<body>
</body>
</html>
URL d’origine : [Link] Page 4 sur 9
[Link] Anciennes publications archivées
Résultat
Résultat
Scrolling
On peut choisir de faire apparaître une barre de défilement sur les côtés du cadre avec l'attribut scrolling. Les
valeurs :
• auto laisse le choix au navigateur, option par défaut.
• yes en affiche quoi qu'il arrive.
• no n'en affiche pas, même si c'est nécessaire.
Reprenons l'exemple de la page d'index du site et complétons avec ces nouveaux attributs :
<html>
<head>
<title>Exemple de frame avec scrolling</title>
</head>
<frameset rows="94, *">
<frame src="[Link] noresize
frameborder="0" scrolling="no">
<frameset cols="625, *">
<frame src="[Link]
noresize frameborder="0" scrolling="auto">
<frame src="[Link]
noresize frameborder="0" scrolling="auto">
</frameset>
</frameset>
<body>
</body>
</html>
Résultat
marginwidth et marginheight
Ces deux attributs définissent les marges à laisser entre les bords du cadre et le début du document.
Les valeurs sont à fournir en pixels.
URL d’origine : [Link] Page 5 sur 9
[Link] Anciennes publications archivées
Complétons encore l'index :
<html>
<head>
<title>Exemple de frame avec marginwidth et marginheight</title>
</head>
<frameset rows="94, *">
<frame src="[Link] noresize
frameborder="0" scrolling="nono" marginwidth="10" marginheight="10">
<frameset cols="625, *">
<frame src="[Link]
noresize frameborder="0" scrolling="no">
<frameset cols="260, *">
<frame src="[Link]
noresize frameborder="0" scrolling="no" marginwidth="30" marginheight="10">
<frame src="[Link] noresize
frameborder="0" scrolling="no">
</frameset>
</frameset>
</frameset>
<body>
</body>
</html>
Résultat
name
L'attribut name sert a nommer un cadre, le lier, sinon on ne pourra pas afficher un document là où on le veut.
Dans l'exemple suivant, le lien est ouvert dans le même cadre :
Code du document du cadre de Gauche(il se nomme "fond") :
<html>
<head>
</head>
<body>
<a href="[Link]
Cliquez-ici</a>
</body>
</html>
URL d’origine : [Link] Page 6 sur 9
[Link] Anciennes publications archivées
Code du document créant les cadres :
<html>
<head>
</head>
<frameset cols="60%,*">
<frame src="[Link]
<frame>
</frameset>
<body>
</body>
</html>
Résultat
L'image est bien ouverte dans le même cadre. Maintenant nous allons la faire s'ouvrir dans un autre cadre en
attribuant un nom à ces deux cadres avec l'attribut name.
Le cadre gauche, et celui de droite.
Il va falloir utiliser ce nom dans lier l'image en utilisant l'attribut target.
C'est lui qui va contenir le nom du cadre où ouvrir le lien.
Code du document du cadre de Gauche(il se nomme "fond2") :
<html>
<head>
</head>
<body>
<a href="[Link] target="droite">
Cliquez-ici</a>
</body>
</html>
Code du document créant les cadres :
<html>
<head>
</head>
<frameset cols="40%,*">
<frame name="[Link]
<frame name="droite">
</frameset>
<body>
</body>
</html>
Résultat
URL d’origine : [Link] Page 7 sur 9
[Link] Anciennes publications archivées
On peut diriger les liens vers une même fenêtre sans devoir préciser a chaque fois, on utilise alors la balise de type
marqueur <base>. Et donc définir une cible commune à tous les liens d'un document. Et là encore la balise target
sera utilisée. La balise <base> doit se situer dans la section d'en-tête du document (entre <head> et </head>).
On pourrait donc modifier le code du document de gauche ainsi ("fond3") :
<html>
<head>
<base target="droite"</base>
</head>
<body>
<a href="[Link]
Cliquez-ici</a>
<a href="[Link]
Cliquez-la</a>
<a href="[Link]
Ou ici</a>
<a href="[Link]
Ou la</a>
</body>
</html>
Code du document créant les cadres :
<html>
<head>
</head>
<frameset cols="40%,*">
<frame name="gauche" src="[Link]
<frame name="droite">
</frameset>
<body>
</body>
</html>
Résultat
Vous pouvez attribuer n'importe quel nom à un cadre, pour peu qu'il n'appartienne pas au 4 noms
ci-dessous. Les noms ci-dessous ont des fonctions particulières :
• _parent désigne la fenêtre (ou le cadre) directement supérieur.
• _top désigne la fenêtre de départ.
• _self désigne le propre cadre. Utile avec la balise <base>.
• _blank créer une nouvelle fenêtre pour le document.
URL d’origine : [Link] Page 8 sur 9
[Link] Anciennes publications archivées
Les attributs de la balise <frameset>
framespacing
La balise <frame> ne possède qu'un seul attribut : framespacing. Il reçoit une valeur en pixels qui définit
'espacement à maintenir entre les différents cadres.
La balise <noframes>
Certains navigateurs sont incapables d'utiliser les cadres. Pour que la personne ne se retrouve pas devant une page
blanche, il faut utiliser la balise du type conteneur <noframes>. Le contenu de cette balise n'est affiché que si le
navigateur ne reconnait pas les cadres. Sinon, il est ignoré.
Il doit entourer la balise <body>, comme dans l'exemple suivant :
<html>
<head>
<title>Navigateur noframes</title>
</head>
<frameset cols="40%,*">
<frame>
<frame>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
URL d’origine : [Link] Page 9 sur 9