Archives
la balise IFrame
par Gold77 le, 07-08-2005Les IFRAME permettent d'insérer une page html dans une autre page Html sans avoir besoin de Frameset, qui est d'ailleurs pas très bon pour le référencement.
La balise IFRAME est une fenêtre avec ou sans scrolling qui peut être insérée n'importe ou dans une page Web et qui se place entre les balises <body> et </body>.
Cette balise peut se placer dans une cellule de tableau, voire même deux cellules l'une à côté de l'autre ou l'une en dessous de l'autre.
A l'endroit que vous aurez choisi insérez le code suivant:
<IFRAME src="page.htm" width="50" height="50"></IFRAME>
Ce code affichera la page.htm à l'endroit que vous aurez choisi avec une hauteur de 50 pixels et une largeur de 50 pixels.
Si vous souhaitez ajouter une bordure ajouter l'élément frameborder="1" pour indiquer l'épaisseur de la bordure
Si selon votre page qui doit s'afficher dans l'autre page html, et que celle ci est plus longue que en hauteur de ce que vous avez défini vous pouvez ajouter l'élément scrolling="yes".
Ce qui donne le code complet:
<IFRAME frameborder="1" src="page.htm" scrolling="yes" width="50" height="50"></IFRAME>
Vous pouvez à partir d'une page ou vous avez inséré une IFRAME, créer un lien texte ou avec une image vers une page qui s'affichera dans cette IFRAME, pour cela, vous devez donner un nom à l'IFRAME.
Voici le code source avec l'IFRAME nommée.
<IFRAME Border="0" SRC="index.htm" NAME="cadre1" WIDTH="650" HEIGHT="1200"></IFRAME>
Voici maintenant le code du lien vers cette IFRAME:
<img src="images/flecheverte.gif" width="13" height="13" border="0"><a href="optimisation.htm" target="cadre1">Optimisation</a>
Les attributs de la balise IFRAME
name="..." : nom du cadre
src="..." : source à afficher dans le cadre
frameborder="..." : active/désacrive la bordure entre les cadres (0,1)
marginwidth="..." : définit l'espacement horizontal dans le cadre entre la bordure et le contenu
marginheight="..." : définit l'espacement vertical dans le cadre entre la bordure et le contenu
scrolling="..." : détermine la présence d'une barre de défilement (auto, yes, no )
align="..." : deprecated. Contrôle l'alignement ( left, center, right, justify )
height="..." : hauteur du cadre
width="..." : largeur du cadre