Utilisation des iframes

Bonjour mes p'tits bouchons !

Dans ce tutoriel, nous allons voir un truc important et surtout bien utile. Nous allons parler de iframe. Je vous entends déjà : "Rhooo mais quel mot barbare !" Mais non enfin ! Je vais vous expliquer son fonctionnement, et après ça, vous verrez que ça ne vous fera plus peur Smile

Les iframes qu'est ce que c'est ?

Avant de nous lancer dans des explications sur le code, mettons nous d'accord sur ce que sont les iframe et sur leur utilisation Smile

Une iframe est un code html tout simple que l'on insère dans une page html et qui permet d'appeler une autre page dans celle-ci avec une taille définit.

Par exemple :

Comment ça fonctionne ?

Dans cette partie, nous allons voir les balises que l'on peut utiliser pour créer une iframe Smile

Tout d'abord, la balise se présente ainsi :

Code:

Et peut avoir plusieurs attributs (nous ne verrons ici que les principaux) :

Donner un nom à notre cadre (ou iframe) :
Code:
name="le nom du cadre"

Indiquer le lien de la page à afficher (la source) :
Code:
src="lien"

Indiquer la hauteur (height) et la largeur (width) du cadre à afficher :
Code:
width="XXpx" height="XXpx"

Aligner le cadre : top (en haut), middle (au milieu verticalement), bottom (en bas), left (à gauche), center (au milieu horizontalement), right (à droite) :
Code:
align="valeur"

Indiquer si vous autorisez ou non le défilement (scrollbar = ascenseur). 3 valeurs possibles ici : auto (si le contenu est plus grand que le cadre, la barre s'affichera), yes (afficher la barre de défilement même si le contenu est plus petit que le cadre), no (aucune barre de défilement)
Code:
scrolling="valeur"

Donc, si on se résume, notre code ressemble à ça :

Code:

Des exemples ?

Voici un premier exemple de iframe.

Code:

Nous allons maintenant essayer de le faire nous même. Pour cela, créer une page html contenant ceci :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tuto iframe</title>
</head>

<body>

<p style="background-color:#e26e26">Juste un test pour vous montrer comment fonctionne les iframes</p>

</body>
</html>

C'est un code tout simple : on va afficher un paragraphe (p) avec une couleur de fond (background-color)

Ensuite, on va créer notre iframe :

Code:

Ce qui nous donne :

Facile non ?

Si vous avez des questions, n'hésitez surtout pas Smile

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]