Introduction au langage HTML© 2005 Vatteville ingénierie
15. Cadres
<FRAMESET >
<FRAME >
<IFRAME >
Les cadres (frames) permettent de partitionner une page HTML en plusieurs zones rectangulaires qui contiennent chacune un document HTML différent. On peut ainsi avoir, sur une même page, des zones fixes et des zones qui défilent sous le contrôle d’un ascenseur.

La balise FRAMESET s’emploie à la place de la balise BODY. Elle définit des lignes et des colonnes. À chaque case correspond une balise FRAME qui indique le document HTML à y afficher.

Remarque : la directive DOCTYPE, première ligne d’un document HTML, qui est utilisée par l’outil de validation validator.w3.org, devient
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd" >

Exemple :
<FRAMESET rows="100,*" cols="100,*">
  <FRAME src="A.html" name="A">
  <FRAME src="B.html" name="B">
  <FRAME src="C.html" name="C">
  <FRAME src="D.html" name="D">
  <NOFRAMES>

    Prévoir ici un contenu de remplacement
    pour les navigateurs n’affichant pas les cadres.
  </NOFRAMES>
</FRAMESET>
produit :
Exemple de cadres 2x2

<FRAMESET>
rows="100,*" divise la page en deux zones séparées par un trait horizontal, la première, c’est à dire celle du haut, d’une hauteur de 100 pixels, la seconde occupant la hauteur restante.
cols="100,*" divise la page en deux colonnes, celle de gauche d’une largeur de 100 pixels, celle de droite s’étendant jusqu’au bord droit de la fenêtre.
Au lieu d’une dimension en pixels, on pourrait également indiquer un pourcentage de la hauteur ou de la largeur de la fenêtre.
FRAMESET a beaucoup de points communs avec BODY, en particulier les gestionnaires d’événements onLoad et onUnload. Une différence importante est que la balise FRAMESET n’est pas nécessairement unique dans un document. En particulier, en ensemble de cadres peut contenir un autre ensemble de cadres.

<FRAME>
src="…" désigne le document (HTML ou autre) à inclure dans le cadre.
name="…" attribue au cadre un nom dont l’usage est décrit plus bas.
scrolling=AUTO (le défaut), YES ou NO autorise ou pas le défilement dans la fenêtre.
Remarque : différences entre AUTO et YES. La valeur YES entraîne l’affichage d’un ascenseur vertical, vide si la page ne déborde pas de la fenêtre, avant la disposition du contenu de la fenêtre. Si le contenu en hauteur excède la taille de la fenêtre, cet ascenseur se voit doté d’une barre de défilement, sans modification de l’affichage. À l’inverse, la valeur AUTO peut amener, si le document le nécessite, ou si le visiteur rapetisse la fenêtre, l’affichage d’un ascenseur vertical qui va perturber l’agencement de la page et nécessiter un ascenseur horizontal, généralement peu souhaitable.
NORESIZE en l’absence de cet attribut, les bordures entre cadres adjacents sont sensibles au glisser/déplacer à la souris
Exemple :

<FRAMESET rows="160,*">
  <FRAMESET cols="300,*">
    <FRAME src="Aresize.html">
    <FRAME src="B.html">
  </FRAMESET>
  <FRAMESET cols="300,*">
    <FRAME src="Anoresize.html" NORESIZE>
    <FRAME src="B.html">
  </FRAMESET>
</FRAMESET>

produit :

frameborder=1 (le défaut) ou 0 indique au navigateur de dessiner une bordure entre le cadre et les cadres adjacents.
Exemple :

<FRAMESET rows="130,*">
  <FRAMESET cols="300,*">
    <FRAME src="Aborder.html" frameborder=0>
    <FRAME src="B.html" frameborder=0>
  </FRAMESET>
  <FRAMESET cols="300,*">
    <FRAME src="A.html">
    <FRAME src="B.html">
  </FRAMESET>
</FRAMESET>

produit :

marginwidth=# nombre de pixels des marges gauche et droite de la fenêtre.
marginheight=# nombre de pixels des marges superieure et inferieure de la fenêtre.

<IFRAME>
La balise IFRAME (Inline Frame cadre en ligne)permet d’insérer une page web à l’intérieur d’une autre page web, qu’elle utilise ou non des cadres. Par son rôle et la syntaxe de ses attributs, cette balise ressemble à la balise IMG, mais insère une page web au lieu d’une image.
Les attributs src, name, scrolling, frameborder, marginwidth et marginheight ont les mêmes fonctions et syntaxes que pour la balise FRAME.
Les attributs width, height, align, hspace et vspace ont le même rôle que pour la balise IMG.
Exemple :

<IFRAME src="http://www.lemonde.fr" width=530 height=360>
Prévoir ici un contenu de remplacement pour les
navigateurs qui ne supportent pas cette balise.
</IFRAME>

produit :
Attention : cette incorporation d’une page d’un site dans la page d’un autre est soumise à l’accord du responsable du site ainsi incorporé.

Programmes javascript en rapport avec les cadres.
Lexique
frame=cadre, column=colonne, height=hauteur, margin=marge, pixel (picture element)=point de l’écran, resize=redimensionner, row=rangée, scrolling=déroulement, set=ensemble, width=largeur

Introduction au langage HTML© 2005 Vatteville ingénierie