La version française de cette traduction est :
http://www.la-grange.net/w3c/html4.01/

Traducteur : J.J.Solari dans le cadre de l'effort de la liste de discussion w3c-translators.fr@w3.org
La version française peut contenir des erreurs. La version anglaise de cette note est l'unique version normative. Version originale : http://www.w3.org/TR/1999/REC-html401-19991224


16 Les cadres

Sommaire

  1. Introduction aux cadres
  2. La disposition des cadres
    1. L'élément FRAMESET
    2. L'élément FRAME
  3. La spécification des informations du cadre cible
    1. L'établissement de la cible par défaut des liens
    2. La sémantique de cible
  4. Le contenu de remplacement
    1. L'élément NOFRAMES
    2. Les descriptions longues des cadres
  5. Les cadres en-ligne : l'élément IFRAME

16.1 Introduction aux cadres

Les cadres HTML permettent aux auteurs de présenter les documents selon des vues multiples, qui peuvent être des fenêtres indépendantes ou bien des sous-fenêtres. Les vues multiples offrent aux concepteurs les moyens de garder visibles certaines informations, tandis que d'autres vues sont défilées ou remplacées. Par exemple, dans la même fenêtre, un cadre pourrait afficher une bannière statique, un deuxième cadre afficher un menu de navigation et un troisième le document principal qui peut défiler ou être remplacé au gré de la navigation via le deuxième cadre.

Voici un document avec des cadres simple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec un jeu d'encadrement simple</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
  <FRAMESET rows="100, 200">
      <FRAME src="contenu_du_cadre1.html">
      <FRAME src="contenu_du_cadre2.gif">
  </FRAMESET>
  <FRAME src="contenu_du_cadre3.html">
  <NOFRAMES>
      <P>Ce document avec un jeu d'encadrement contient :
      <UL>
         <LI><A href="contenu_du_cadre1.html">Un contenu sympa</A>
         <LI><IMG src="contenu_du_cadre2.gif" alt="Une image sympa">
         <LI><A href="contenu_du_cadre3.html">D'autres contenus sympas</A>
      </UL>
  </NOFRAMES>
</FRAMESET>
</HTML>

ce qui pourrait créer la disposition de cadres suivante :

---------------------------------------
|         |                             |
|         |                             |
| Cadre 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Cadre 3            |
|         |                             |
|         |                             |
|         |                             |
| Cadre 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
---------------------------------------

Si l'agent utilisateur ne peut pas afficher les cadres ou bien n'est pas configuré pour le faire, alors il restituera le contenu de l'élément NOFRAMES.

16.2 La disposition des cadres

Le document HTML qui décrit la disposition des cadres (appelé document avec jeu d'encadrement [ndt. frameset document]) obéit à une structure différente de celle du document HTML sans cadres. Le document standard possède une section HEAD et une section BODY. Le document avec jeu d'encadrement possède une section HEAD et une section FRAMESET à la place de BODY.

La section FRAMESET du document spécifie la disposition des vues dans la fenêtre principale de l'agent utilisateur. En outre, la section FRAMESET peut contenir un élément NOFRAMES afin d'offrir un contenu de remplacement aux agents utilisateurs qui ne reconnaissent pas les cadres ou bien ne sont pas configurés pour afficher ces cadres.

Les éléments, qui normalement seraient placés dans la section BODY, ne doivent pas apparaître avant le premier élément FRAMESET, sinon cet élément FRAMESET sera ignoré.

16.2.1 L'élément FRAMESET

<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- subdivision de fenêtre -->
<!ATTLIST FRAMESET
  %coreattrs;                          -- id, class, style, title --
  rows        %MultiLengths; #IMPLIED  -- liste de longueurs,
                                          par défaut : 100% (une seule rangée) --
  cols        %MultiLengths; #IMPLIED  -- liste de longueurs,
                                          par défaut : 100% (une seule colonne) --
  onload      %Script;       #IMPLIED  -- tous les cadres ont été chargés  --
  onunload    %Script;       #IMPLIED  -- tous les cadres ont été retirés --
  >
]]>

Définition des attributs

rows = liste-de-longueurs-multiples [CN]
Cet attribut spécifie la disposition des cadres horizontaux. Sa valeur est une liste de longueurs en pixels, en pourcentages ou relatives, séparées par des virgules. La valeur par défaut est "100%", c'est-à-dire une seule rangée.
cols = liste-de-longueurs-multiples [CN]
Cet attribut spécifie la disposition des cadres verticaux. Sa valeur est une liste de longueurs en pixels, en pourcentages ou relatives, séparées par des virgules. La valeur par défaut est "100%", c'est-à-dire une seule colonne.

Attributs définis ailleurs

L'élément FRAMESET spécifie la disposition de la fenêtre principale de l'utilisateur selon des subdivisions rectangulaires.

Les rangées et les colonnes 

La spécification de l'attribut rows définit le nombre de subdivisions horizontales dans un jeu d'encadrement. La spécification de l'attribut cols définit le nombre de subdivisions verticales. Les deux attributs peuvent être utilisés simultanément pour créer une grille.

Si l'attribut rows est absent, chaque colonne occupe la hauteur entière de la page. Si l'attribut cols est absent, chaque rangée occupe la largeur entière de la page. Si aucun de ces attributs n'est présent, alors le cadre occupe exactement les dimensions de la page.

Les cadres sont créés de gauche à droite pour les colonnes et de haut en bas pour les rangées. Quand les deux attributs sont spécifiés, les vues sont créées de gauche à droite dans la rangée supérieure, de gauche à droite dans la rangée suivante, etc.

Le premier exemple divise l'écran en deux verticalement (i.e., crée une moitié supérieure et une moitié inférieure).

<FRAMESET rows="50%, 50%">
...le reste de la définition...
</FRAMESET>

L'exemple suivant crée trois colonnes. La deuxième a une largeur fixe de 250 pixels (qui peut servir, par exemple, à contenir une image dont les dimensions sont connues). La première reçoit 25% de l'espace disponible et la troisième les 75% restant.

<FRAMESET cols="1*,250,3*">
...le reste de la définition...
</FRAMESET>

L'exemple suivant crée une grille de 2×3 subdivisions.

<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...le reste de la définition...
</FRAMESET>

Pour l'exemple qui va suivre, on suppose que la fenêtre du navigateur fait 1000 pixels de haut. La première vue se voit allouer 30% de la hauteur totale (300 pixels). La seconde vue est fixée pour avoir exactement 400 pixels de haut. Il reste 300 pixels à répartir entre les deux autres cadres. La hauteur du quatrième cadre est définie comme étant "2*", il est donc deux fois plus haut que le troisième cadre, dont la hauteur n'est que de "*" (équivalant à "1*"). Ainsi, le troisième cadre fera 100 pixels de haut et le quatrième 200 pixels de haut.

<FRAMESET rows="30%,400,*,2*">
...le reste de la définition...
</FRAMESET>

Les longueurs absolues dont le total n'est pas égal à 100% de l'espace disponible réel devraient être ajustées par l'agent utilisateur. Quand ce total est inférieur à 100%, l'espace restant devrait être alloué proportionnellement à chaque vue. Quand il est supérieur, chaque vue devrait être réduite en fonction de la proportion de l'espace total qui lui est spécifiée.

Les jeux d'encadrement imbriqués 

Les jeux d'encadrement peuvent s'imbriquer à n'importe quel niveau.

Dans l'exemple suivant, l'élément FRAMESET externe divise l'espace disponible en trois colonnes égales. L'élément FRAMESET interne partage alors la deuxième en deux rangées de hauteur inégale.

<FRAMESET cols="33%, 33%, 34%">
     ...le contenu du premier cadre...
     <FRAMESET rows="40%, 50%">
        ...le contenu du deuxième cadre, première rangée...
        ...le contenu du deuxième cadre, seconde rangée...
     </FRAMESET>
     ...le contenu du troisième cadre...
</FRAMESET>

Le partage des données entre les cadres 

Les auteurs peuvent partager des données entre plusieurs cadres en incluant celles-ci au moyen de l'élément OBJECT. Les auteurs devraient inclure l'élément OBJECT dans l'élément HEAD du document avec jeu d'encadrement et nommer cet objet avec un attribut id. Tout document qui est le contenu d'un cadre dans le jeu d'encadrement peut se référer à cet identifiant.

L'exemple suivant illustre la manière dont un script pourrait appeler un élément OBJECT défini pour le jeu d'encadrement entier :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Voici un jeu d'encadrement avec un OBJECT dans HEAD</TITLE>
<!-- Cet OBJECT n'est pas restitué ! -->
<OBJECT id="monobjet" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
    <FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>

<!-- Dans le document bianca.html -->
<HTML>
<HEAD>
<TITLE>La page de Bianca</TITLE>
</HEAD>
<BODY>
...le début du document...
<P>
<SCRIPT type="text/javascript">
parent.monobjet.propriété
</SCRIPT>
...le reste du document...
</BODY>
</HTML>

16.2.2 L'élément FRAME

<![ %HTML.Frameset; [
<!-- Les noms de cadre réservés commencent par le caractère souligné « _ »,
     sinon ils commencent par une lettre -->
<!ELEMENT FRAME - O EMPTY              -- sous-fenêtre -->
<!ATTLIST FRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- lien vers une description longue
                                          (en complément de l'attribut title) --
  name        CDATA          #IMPLIED  -- nom du cadre à viser --
  src         %URI;          #IMPLIED  -- source du contenu du cadre --
  frameborder (1|0)          1         -- bordure de cadre ou non ? --
  marginwidth %Pixels;       #IMPLIED  -- les marges horizontales en pixels --
  marginheight %Pixels;      #IMPLIED  -- les marges verticales en pixels --
  noresize    (noresize)     #IMPLIED  -- autoriser le redimensionnement du cadre ? --
  scrolling   (yes|no|auto)  auto      -- ascenseurs ou non --
  >
]]>

Définition des attributs

name = cdata [CI]
Cet attribut assigne un nom au cadre courant. Ce nom peut être utilisé comme cible pour les liens suivants.
longdesc = uri [CT]
Cet attribut spécifie un lien vers une description longue du cadre. Cette description devrait suppléer à la brève description fournie à l'aide de l'attribut title, elle peut être particulièrement utile aux agents utilisateurs non-visuels.
src = uri [CT]
Cet attribut spécifie la localisation du contenu initial à placer dans le cadre.
noresize [CI]
Quand il est présent, cet attribut booléen indique à l'agent utilisateur que le cadre ne doit pas être redimensionnable.
scrolling = auto|yes|no [CI]
Cet attribut spécifie une indication pour le défilement de la fenêtre du cadre. Les valeurs possibles sont :
  • auto : cette valeur indique à l'agent utilisateur de fournir un mécanisme de défilement pour la fenêtre du cadre quand cela est nécessaire. C'est la valeur par défaut ;
  • yes : cette valeur indique à l'agent utilisateur de toujours fournir un mécanisme de défilement pour la fenêtre de cadre ;
  • no : cette valeur indique à l'agent utilisateur de ne pas fournir de mécanisme de défilement pour la fenêtre du cadre.
frameborder = 1|0 [CN]
Cet attribut donne à l'agent utilisateur une indication sur la bordure du cadre. Les valeurs possibles sont :
  • 1 : cette valeur indique à l'agent utilisateur de dessiner une séparation entre ce cadre et chacun des cadres adjacents. C'est la valeur par défaut ;
  • 0 : cette valeur indique à l'agent utilisateur de ne pas dessiner de séparation entre ce cadre et chacun des cadres adjacents. Remarquez que des séparateurs peuvent néanmoins être dessinés à côté de ce cadre, s'ils sont spécifiés par d'autres cadres.
marginwidth = pixels [CN]
Cet attribut spécifie la quantité d'espace à laisser entre le contenu du cadre et ses marges gauche et droite. La valeur doit être supérieure à zéro (en pixels). La valeur par défaut dépend de l'agent utilisateur.

errata-02

marginheight = pixels [CN]
Cet attribut spécifie la quantité d'espace à laisser entre le contenu du cadre et ses mages haute et basse. La valeur doit être supérieure à zéro (en pixels). La valeur par défaut dépend de l'agent utilisateur.

errata-02

Attributs définis ailleurs

L'élément FRAME définit le contenu et l'apparence d'un seul cadre.

L'établissement du contenu initial d'un cadre 

L'attribut src spécifie le document initial que le cadre va contenir.

Soit l'exemple de document HTML suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contenu_du_cadre1.html">
      <FRAME src="contenu_du_cadre2.gif">
  </FRAMESET>
  <FRAME src="contenu_du_cadre3.html">
  <FRAME src="contenu_du_cadre4.html">
</FRAMESET>
</HTML>

celui-ci devraient produire une disposition des cadres semblable à :

------------------------------------------
|Cadre 1     |Cadre 3       |Cadre 4       |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
-------------|              |              |
|Cadre 2     |              |              |
|            |              |              |
|            |              |              |
------------------------------------------

ainsi qu'il va entraîner l'agent utilisateur à charger chaque fichier dans une vue séparée.

Le contenu d'un cadre ne doit pas se trouver dans le même document que la définition de ce cadre.

EXEMPLE ILLÉGAL :
La définition de jeu d'encadrement suivante n'est pas légale pour HTML, parce que le contenu du deuxième cadre se trouve dans le même document que le jeu d'encadrement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
  <FRAME src="contenu_du_cadre1.html">
  <FRAME src="#ancre_dans_le_meme_document">
  <NOFRAMES>
  ...un texte...
  <H2><A name="ancre_dans_le_meme_document">Passage important</A></H2>
  ...un texte...
  </NOFRAMES>
</FRAMESET>
</HTML>

La restitution visuelle d'un cadre 

L'exemple suivant illustre l'utilisation des attributs décoratifs de l'élément FRAME. On spécifie que le cadre 1 n'aura pas de barre de défilement. Le cadre 2 laissera un espace autour de son contenu (initialement, un fichier d'image) et ne sera pas redimensionnable. Aucune bordure ne sera dessinée entre les cadres 3 et 4. Des bordures seront dessinées (par défaut) entre les cadres 1, 2 et 3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contenu_du_cadre1.html" scrolling="no">
      <FRAME src="contenu_du_cadre2.gif"
                marginwidth="10" marginheight="15"
                noresize>
  </FRAMESET>
  <FRAME src="contenu_du_cadre3.html" frameborder="0">
  <FRAME src="contenu_du_cadre4.html" frameborder="0">
</FRAMESET>
</HTML>

16.3 La spécification des informations du cadre cible

Remarque : Pour des renseignements au sujet des pratiques actuelles pour déterminer la cible d'un cadre, veuillez consulter les remarques sur les cadres en appendice.

Définition des attributs

target = cadre-cible [CI]
Cet attribut spécifie le nom du cadre dans lequel ouvrir un document.
En assignant un nom à un cadre via l'attribut name, l'auteur peut s'y référer comme « cible » des liens définis par les autres éléments. L'attribut target peut se placer sur les éléments qui créent des liens (A, LINK), des images cliquables (AREA) et des formulaires (FORM).

Veuillez consulter la section sur les noms des cadres cibles pour des précisions sur les noms de cadre reconnus.

Cet exemple illustre la manière dont l'attribut target autorise la modification dynamique du contenu d'un cadre. Nous définissons d'abord un jeu d'encadrement dans le document "frameset.html suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
   <FRAME name="fixe" src="init_fixe.html">
   <FRAME name="dynamique" src="init_dynamique.html">
</FRAMESET>
</HTML>

Ensuite, dans le document "init_dynamique.html" suivant, nous effectuons une liaison vers le cadre nommé « dynamique ».

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Un document ayant des ancres avec des cibles spécifiques</TITLE>
</HEAD>
<BODY>
...commencement du document...
<P>Maintenant vous pouvez aller à la
    <A href="diapo2.html" target="dynamique">diapositive 2.</A>
...more document...
<P>Vous vous débrouillez bien. Allez à la
    <A href="diapo3.html" target="dynamique">diapositive 3.</A>
</BODY>
</HTML>

L'activation de l'un ou l'autre lien entraîne l'ouverture d'un nouveau document dans le cadre nommé « dynamique », tandis que l'autre cadre nommé « fixe » conserve son contenu initial.

Remarque : La définition d'un jeu d'encadrement ne change contrairement au contenu de l'un de ses cadre qui peut changer. Une fois que le contenu initial d'un cadre a changé, la définition du jeu d'encadrement ne reflète plus la situation courante de ses cadres.

Pour l'instant, il n'existe aucun moyen pour coder le statut complet d'un jeu d'encadrement dans un URI. C'est pourquoi, nombre d'agents utilisateurs ne permettent pas de placer un signet [ndt. bookmark] sur un jeu d'encadrement.

Les jeux d'encadrement peuvent rendre la navigation d'avant en arrière, par le biais de l'historique de l'agent utilisateur, plus compliquée pour les utilisateurs.

16.3.1 L'établissement de la cible par défaut des liens

Quand, dans le même document, plusieurs liens désignent la même cible, il est possible de spécifier la cible une seule fois et de se passer de l'attribut target de chaque élément. On réalise ceci en définissant l'attribut target sur l'élément BASE.

Revenons à l'exemple précédent, cette fois par la mise en facteur des informations de cible, en les définissant dans l'élément BASE et en les supprimant des éléments A.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Un document ayant un élément BASE avec une cible particulièret</TITLE>
<BASE href="http://www.mycom.com/diapos" target="dynamique">
</HEAD>
<BODY>
...commencement du document...
<P>Maintenant vous pouvez aller à la <A href="slide2.html">diapositive 2.</A>
...suite du document...
<P>Vous vous débrouillez bien. Allez à la
       <A href="slide3.html">diapositive 3.</A>
</BODY>
</HTML>

16.3.2 La sémantique de cible

Les agents utilisateurs devraient déterminer le cadre cible, dans lequel charger une ressource reliée, selon la préséance suivante (de la priorité la plus élevée à la plus basse) :

  1. Si l'attribut target d'un élément vise un cadre connu, quand l'élément est activé (i.e., un lieu est suivi ou un formulaire est soumis), la ressource désignée par l'élément devrait se charger dans le cadre cible ;
  2. Si cet élément n'a pas d'attribut target et, par contre, l'élément BASE en a un, c'est l'attribut target de l'élément BASE qui détermine le cadre ;
  3. Si ni cet élément ni l'élément BASE ne se réfèrent à une cible, alors la ressource désignée par l'élément devrait se charger dans le cadre qui contient l'élément ;
  4. Si un attribut target se réfère à un cadre « C » inconnu, l'agent utilisateur devrait créer une nouvelle fenêtre et un nouveau cadre, puis assigner le nom « C » au cadre et enfin charger la ressource désignée par l'élément dans le nouveau cadre.

Les agents utilisateurs devraient fournir aux utilisateurs un mécanisme pour surclasser l'attribut target.

16.4 Le contenu de remplacement

Les auteurs devraient fournir un contenu de remplacement pour les agents utilisateurs qui ne reconnaissent pas les cadres ou qui sont configurés pour ne pas les afficher.

16.4.1 L'élément NOFRAMES

<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">
]]>

<!ENTITY % noframes.content "(%flow;)*">

<!ELEMENT NOFRAMES - - %noframes.content;
 -- enveloppe du contenu de remplacement pour une restitution sans cadres -->
<!ATTLIST NOFRAMES
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Attributs définis ailleurs

L'élément NOFRAMES spécifie le contenu qui ne devrait être affiché que par les agents utilisateurs ne reconnaissant pas les cadres ou non configurés pour les afficher. Les agents utilisateurs qui reconnaissent les cadres doivent seulement afficher le contenu d'une déclaration NOFRAMES que s'ils sont configurés pour ne pas afficher les cadres. Les agents utilisateurs qui ne reconnaissent pas les cadres doivent afficher le contenu de l'élément NOFRAMES dans tous les cas.

L'élément NOFRAMES fait partie à la fois des DTD transitoire et de jeu d'encadrement. Dans un document qui fait appel au DTD de jeu d'encadrement, l'élément NOFRAMES peut s'utiliser à la fin de la section FRAMESET du document.

Par exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
     "http://www.w3.org/TR/html4/frameset.dtd">
  <HTML>
  <HEAD>
  <TITLE>Un document avec jeu d'encadrement et NOFRAMES</TITLE>
  </HEAD>
  <FRAMESET cols="50%, 50%">
     <FRAME src="principal.html">
     <FRAME src="table_des_matieres.html">
     <NOFRAMES>
     <P>Voici la <A href="principal-noframes.html">
              version sans cadres du document.</A>
     </NOFRAMES>
  </FRAMESET>
  </HTML>

On peut utiliser l'élément NOFRAMES, par exemple, dans un document qui est la source d'un cadre et qui utilise le DTD transitoire. Cela permet aux auteurs d'expliquer l'objet du document, au cas où celui-ci serait vu indépendamment du jeu d'encadrement, ou avec un agent utilisateur qui ne reconnaît pas les cadres.

16.4.2 Les descriptions longues des cadres

L'attribut longdesc permet aux auteurs de rendre les documents avec des cadres plus accessibles aux personnes utilisant des agents utilisateurs non-visuels. Cet attribut désigne une ressource qui fournit une description longue du cadre. Les auteurs devraient remarquer que les longues descriptions associées aux cadres sont attachées aux cadres, et non au contenu de ceux-ci. Étant donné que le contenu peut varier au cours du temps, la description longue initiale va vraisemblablement devenir inadéquate pour les contenus ultérieurs du cadre. En particulier, les auteurs ne devraient pas inclure une image comme seul contenu d'un cadre.

Le document avec jeu d'encadrement suivant décrit deux cadres. Le cadre de gauche contient une table des matières et celui de droite contient initialement l'image d'une autruche :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement mal fait</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_des_matieres.html">
   <FRAME src="autruche.gif" longdesc="autruche-desc.html">
</FRAMESET>
</HTML>

Remarquez que l'image est incluse dans le cadre indépendamment de tout élément HTML, de sorte que l'auteur n'a pas d'autres moyens pour spécifier un texte de remplacement que l'attribut longdesc. Si le contenu du cadre de droite change (par exemple, l'utilisateur choisi un serpent à sonnettes dans la table des matières), les utilisateurs n'auront aucun accès textuel au nouveau contenu du cadre.

Les auteurs ne devraient donc pas mettre une image directement dans un cadre. L'image devrait plutôt être spécifiée dans un document HTML séparé dans lequel elle sera annotée avec le texte de remplacement adéquat :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement bien fait</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_des_matieres.html">
   <FRAME src="autruche-conteneur.html">
</FRAMESET>
</HTML>
<!-- Dans le document autruche-conteneur.html: -->
<HTML>
<HEAD>
<TITLE>L'autruche rapide et puissante</TITLE>
</HEAD>
<P>
<OBJECT data="autruche.gif" type="image/gif">
Ces autruches ont vraiment bon go&ucirc;t !
</OBJECT>
</HTML>

16.5 Les cadres en-ligne : l'élément IFRAME

<!ELEMENT IFRAME - - (%flow;)*         -- sous-fenêtre en-ligne -->
<!ATTLIST IFRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- lien vers une description longue
                                          (complément de l'attribut title) --
  name        CDATA          #IMPLIED  -- nom du cadre pour ciblage --
  src         %URI;          #IMPLIED  -- source du contenu du cadre --
  frameborder (1|0)          1         -- request frame borders? --
  marginwidth %Pixels;       #IMPLIED  -- marges horizontales en pixels --
  marginheight %Pixels;      #IMPLIED  -- marges verticales en pixels --
  scrolling   (yes|no|auto)  auto      -- scrollbar or none --
  align       %IAlign;       #IMPLIED  -- alignement vertical ou horizontal --
  height      %Length;       #IMPLIED  -- hauteur du cadre --
  width       %Length;       #IMPLIED  -- largeur du cadre --
  >

Définition des attributs

longdesc = uri [CT]
Cet attribut spécifie un lien vers une description longue du cadre. Cette description devrait suppléer la brève description fournie à l'aide de l'attribut title, elle est particulièrement utile pour les agents utilisateurs non-visuels.
name = cdata [CI]
Cet attribut assigne un nom au cadre courant. Ce nom peut être utilisé comme cible pour les liens qui suivent.
width = longueur [CN]
La largeur du cadre en-ligne.
height = longueur [CN]
La hauteur du cadre en-ligne.

Attributs définis ailleurs

L'élément IFRAME permet aux auteurs d'insérer un cadre dans un bloc de texte. L'insertion d'un cadre en-ligne dans un passage textuel revient un peu à y insérer un objet via l'élément OBJECT : ces éléments permettent tous deux l'insertion d'un document HTML au sein d'un autre, ils peuvent tous deux être alignés sur le texte environnant, etc.

Les informations qui doivent être insérées en-ligne sont désignées par l'attribut src de cet élément. Par contre, le contenu de l'élément IFRAME ne devraient être affiché que par les agents utilisateurs qui ne reconnaissent pas les cadres ou qui sont configurés pour ne pas les afficher.

Pour les agents utilisateurs qui reconnaissent les cadres, l'exemple suivant placera un cadre en-ligne, entouré par une bordure, au milieu du texte.

  <IFRAME src="foo.html" width="400" height="500"
             scrolling="auto" frameborder="1">
  [Votre agent utilisateur ne reconnaît pas les cadres ou n'est pas
  configuré pour les afficher pour l'instant. Cependant, vous pouvez visiter le
  <A href="foo.html">document concerné.</A>]
  </IFRAME>

Les cadres en-ligne ne peuvent pas être redimensionnés (et donc n'acceptent pas l'attribut noresize).

Remarque : On peut également incorporer un document HTML dans un autre document HTML avec l'élément OBJECT. Voir la section sur les documents incorporés pour des précisions.