La technique des cadres locaux s'obtient avec la balise inline <iframe> (pour inline frame).
Cette balise permet d'insérer à n'importe quel endroit de votre document une fenêtre qui fera référence à un autre document HTML.
La balise <iframe> doit être placée dans le corps de votre document, c'est-à-dire entre les balises <body> et </body>.
La balise <iframe> partage avec la balise <frame> les attributs qui sont présentés dans la liste ci-contre :
Elle possède en plus les attributs height et width qui déterminent la hauteur et la largeur du cadre inséré dans votre page.
Attention, la balise <iframe> n'est pas redimensionnable par l'utilisateur.
À l'origine, la balise <iframe> est une balise "propriétaire" d'Internet Explorer, elle a été interprétée par l' Explorer Internet
MS à partir de la version 3.x. Par contre elle n'était pas affichée dans les navigateurs de Netscape la marque concurrente d'Internet Explorer.
Depuis la balise <iframe> a été retenu par le W3C comme standard dans les spécifications du html 4.0 et elle interprétée par Netscape à partir de
sa version 6.
Dans cet exemple nous affichons une image PicCabaliros.jpg de 5640*400px. Elle est placée dans le dossier ImgIframe lui même
placé dans le dossier AnnexesIFrame au même niveau que cette page.
La largeur de l'élément <iframe> est de 700px, on lui applique un comportement de block ce qui permet de le centrer par marges automatiques.
Sa hauteur de 417px a été calculée de façon à éviter l'apparition d'une barre de défilement vertical.
Les attributs marginwidth="0" marginheight="0" permettent d'afficher l'image dans le cadre sans marges internes.
Entre les deux balises <iframe> , vous pouvez insérer du texte ou des images alternatifs qui seront affichés dans les navigateurs n'affichant pas les cadres locaux. Voir le code html ci-dessous.
Cliquez sur la loupe pour afficher l'image en vrai grandeur et faites la défiler avec la barre de défilement horizontal.
Nous allons profiter de cet exemple pour afficher une page de documentation sur le conteneur iframe. Nous afficherons depuis le site http://bernard.quevillier.pagesperso-orange.fr/toposnew, la page /iframe.htm dans une fenêtre de 1100px*600px sans perdre le contact avec la page principale. La barre de défilement vertical permet de faire défiler la partie mobile de la page iframe.htm.
Comme dans l'exemple précédent, l'application d'un comportement de block permet de centrer l'élément <iframe> par marges automatiques.
Un texte alternatif placé entre les deux balises <IFRAME>, s'affichera dans les navigateurs n'affichant pas les cadres locaux.
Voir le code html ci-dessous.