Cours de HTML - Les cadres (frames)

version 1.10, dernière mise à jour le 18 juillet 2005.

  

Table des matières (TdM)

  1. I. Généralités
    1. Fonction
    2. Avantages/Inconvénients
    3. Structure de la page HTML
      1. Un nouveau type de document
      2. Le squelette d'une page-cadre
      3. La balise <noframes>
  1. II. La balise <frameset>
    1. Définition du découpage de la page: les attributs rows et cols
    2. Jeux de valeurs possibles
    3. Découpage irrégulier
  1. III. La balise <frame>
    1. Utilisation de la balise
    2. Les attributs
  1. IV. La balise <iframe>
    1. Utilisation de la balise
    2. Les attributs
  1. V. L'attribut target
    1. L'attribut target en HTML Transitionnel
    2. L'attribut target avec des cadres
    3. Exercice : Construire des frames

Retour au menu

Contenu du cours

I. Généralités

1. Fonction

Les cadres (frames dans la terminologie anglo-saxonne) découpent la fenêtre principale en autant de petits cadres, chacun d'eux jouant le même rôle qu'une fenêtre : document HTML propre, barres de défilement indépendantes...

Ces frames peuvent être chargés de manière totalement indépendante : un cadre sera modifié et l'autre maintenu. Ils peuvent interargir entre eux : un choix dans un premier cadre pourra provoquer le chargement d'une nouvelle page dans un deuxième.

Examiner l'exemple au bout de ce lien.

Puis admirer la magnifique réalisation du Site officiel du musée du Louvre http://www.louvre.fr/ : Observer la navigation.

>Retour à la TdM

2. Avantages/Inconvénients

Les cadres permettent de créer rapidement une mise en page simple pour un site. L'utilisation classique consiste ainsi à présenter sur un cadre à gauche une liste de liens vers les différentes parties d'un site, qui s'affichent dans la fenêtre principale au centre. Cela facilite de plus la maintenance des différentes pages.

Cependant, les moteurs de recherche indexent les pages à l'intérieur des cadres autant que les autres. Il y a donc un risque pour qu'une page indexée de la sorte soit "orpheline", et ne donne pas accès au reste du site. Plus généralement, une telle page ne se suffit souvent pas à elle-même (il y manque parfois les outils de navigation à l'intérieur du site). Enfin, la présence de cadres s'accompagne souvent de celles de barres de défilement horizontales.

>Retour à la TdM

3. Structure de la page HTML

a. Un nouveau type de document

Nous avions déjà rencontré les déclarations de type de document suivantes :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

L'appel à des cadres ne peut se faire qu'à l'aide de balises qui nécessitent une troisième forme de déclaration :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Ce type de document étant une extension de la recommandation HTML Transitionnel, les balises de présentation sont également acceptées, même s'il vaut mieux éviter de faire appel à elles.

>Retour à la TdM

b. Le squelette d'une page-cadre

Une page destinée à recevoir plusieurs cadres a une structure légèrement différente d'une page "habituelle". Cette dernière, on s'en souvient, possède la structure suivante...

<html>
  <head>
    <title>Premiers pas</title>
  </head>
  <body>
(contenu de la page)  </body>
</html>

Cette fois-ci, la balise <body> est remplacée par la balise <frameset> :

<html>
  <head>
    <title>Premiers pas</title>
  </head>
  <frameset>
(déclaration des cadres)     <noframes>contenu alternatif pour les navigateurs ne supportant pas les cadres.</noframes>
  </frameset>
</html>

>Retour à la TdM

c. La balise <noframes>

L'objectif est d'avertir l'utilisateur d'une vieille version de navigateur (2), ou bien d'un navigateur ne supportant pas les cadres (navigateur texte ou PDA) qu'il n'a pas accès au contenu du document sous la forme de cadres. le contenu de cet élément doit fournir une méthode alternative d'accéder à l'intégralité des informations contenues dans les cadres.

La balise <noframes> est fille de la balise <frameset>. Un navigateur reconnaissant </frameset> ignore le contenu du conteneur <noframes>. Cette balise peut contenir un élément <body>. Réciproquement, un navigateur de vieille version sautera les balises dont il ne connaît pas la signification : <frameset>, <frame>, <noframes> et affichera la suite du document. Le cas est prévu dans l'exemple. Examiner son source.

>Retour à la TdM

II. La balise <frameset>

1. Définition du découpage de la page: les attributs rows et cols

Les attributs rows et cols définissent un quadrillage dont chaque élément sera un cadre (frame). rows définit le découpage horizontal et cols le découpage vertical. Exemples (l'illustration est au bout de chaque lien) :

>Retour à la TdM

2. Jeux de valeurs possibles

Les valeurs peuvent s'exprimer par :

De manière générale, si le jeu de paramètres est incohérent, le navigateur trouve toujours un moyen de les ajuster (ce qui peut produire une apparence parfois fluctuante au gré des interprétations !).

>Retour à la TdM

3. Découpage irrégulier

Le découpage peut ne pas être un quadrillage mais un simple pavage de rectangles. Ce pavage est obtenu en insérant une nouvelle fois la balise <frameset> à l'intérieur du conteneur <frameset></frameset>. La structure de l'exemple est la suivante :

<frameset cols="218,*">
  <frame name="menu" src="Cadre_ex11.htm"></frame>
  <frame name="bandeau" src="Cadre_ex12.htm"></frame>
  <frame name="principal" src="Cadre_ex13.htm"></frame>
</frameset>

>Retour à la TdM

III. La balise <frame>

1. Utilisation de la balise

Il doit y avoir autant de conteneurs <frame> qu'il y a de régions définies dans la balise <frameset>. L'ordre est imposé de gauche à droite, puis de haut en bas (voir les numérotations des régions dans les exemples précédents).

>Retour à la TdM

2. Les attributs

Attribut

Effet

Valeur(s)

src

URL du document à charger initialement dans le cadre.

Une URL. Facultatif, le chargement peut avoir lieu plus tard.

name

Nom du cadre.

Une chaîne de caractères. Obligatoire si son contenu doit être modifié après le chargement initial. Répond à l'attribut target de l'appel de lien <a>.

longdesc

Renvoie vers un fichier contenant une "longue" description du contenu de la fenêtre.

Une URL.

frameborder

Présence d'une bordure de séparation entre les cadres. Reprendre le premier exemple.

1 (présence) ou 0 (absence). Valeur par défaut 1.

marginwidth, marginheight

Marge entre le contenu et le bord du cadre.

Un nombre de pixels.

noresize

Gère le redimensionnement du cadre.

Si noresize="noresize", l'utilisateur ne peut pas redimensionner le cadre.

scrolling

Gère l'apparition des barres de défilement.

  • yes : le navigateur crée toujours des barres.

  • no : les barres sont interdites.

  • auto : le navigateur crée des barres si besoin. Valeur par défaut.

Table 1. Attributs de la balise <frame>.

>Retour à la TdM

IV. La balise <iframe>

1. Utilisation de la balise

Il ne s'agit plus du quadrillage de la fenêtre du navigateur de la balise <frameset> mais d'une petite lucarne insérée dans le document HTML. Le document lui-même garde la structure habituelle : entête (<head>) et corps (<body>).

>Retour à la TdM

2. Les attributs

Attribut

Effet

Valeur(s)

src

URL du document à charger initialement dans le cadre.

Une URL. Facultatif, le chargement peut avoir lieu plus tard.

name

Nom du cadre.

Une chaîne de caractères. Obligatoire si son contenu doit être modifié après le chargement initial. Répond à l'attribut target de l'appel de lien <a>.

longdesc

Renvoie vers un fichier contenant une "longue" description du contenu de la fenêtre.

Une URL.

frameborder

Présence d'un encadrement.

1 (présence) ou 0 (absence). Valeur par défaut 1.

marginwidth, marginheight

Marge entre le contenu et le bord du cadre.

Un nombre de pixels.

scrolling

Gère l'apparition des barres de défilement.

  • yes : le navigateur crée toujours des barres.

  • no : les barres sont interdites.

  • auto : le navigateur crée des barres si besoin. Valeur par défaut.

align

Détermine la position du cadre par rapport au texte qui l'entoure. Le cadre peut suivre le flot du texte ou être enveloppée par ce texte. Par défaut la valeur est à bottom.

  • left (valeur par défaut)

  • right

  • top : l'alignement se fait par rapport au sommet du cadre.

  • bottom : l'alignement se fait par rapport au bas du cadre.

  • middle : l'alignement se fait par rapport au centre du cadre.

width, height

Largeur et hauteur du cadre.

Un nombre de pixels ou un pourcentage.

Table 2. Attributs de la balise <iframe>.

>Retour à la TdM

V. L'attribut target

1. L'attribut target en HTML Transitionnel

La balise <a> permettant de créer un lien possède en HTML Transitionnel un attribut supplémentaire, target ("cible" en anglais), qui permet de spécifier la fenêtre dans laquelle le document lié doit s'ouvrir.

target ne peut prendre qu'une seule valeur pertinente possible en HTML Transitionnel, la valeur target="_blank". Cela permet d'ouvrir le lien dans une nouvelle fenêtre. Par exemple, <a href="http://dam.cicrp.jussieu.fr" target="_blank"> permet d'ouvrir une seconde fenêtre du navigateur, à l'intérieur de laquelle s'affiche le document spécifié par l'attribut href, ici la page d'accueil du DEUST.

>Retour à la TdM

2. L'attribut target avec des cadres

Par défaut, l'appel de lien par la balise <a href="url_du_source"> charge la fenêtre courante par le document désigné par href.

L'attribut target permet de spécifier dans quel cadre (au sens large) va se charger le document. Il peut prendre quatre valeurs prédéfinies, ou bien une valeur déterminée par l'auteur.

>Retour à la TdM

Exercice 1. Construire des frames

Énoncé
Correction

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu