Header
Partagez | 

Utilisation des iframes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: Utilisation des iframes   Mer 13 Oct - 13:39

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:
<iframe ...></iframe>

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:
<iframe name="le nom de mon cadre" src="le lien de mon cadre" scrolling="valeur" height="valeur en px" width="valeur en px" align="valeur"></iframe>

Des exemples ?



Voici un premier exemple de iframe.



Code:
<iframe name="Deezer" src="http://www.deezer.com/fr/" scrolling="auto" height="200px" width="400px" align="center"></iframe>

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:
<iframe name="tuto" src="http://www.school-of-pub.net/Tuto-iframe-h1.htm" scrolling="auto" height="200px" width="300px" align="right"></iframe>

Ce qui nous donne :




Facile non ?




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].


Dernière édition par Miettes le Lun 9 Mai - 16:35, édité 1 fois
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: Re: Utilisation des iframes   Dim 22 Juil - 15:37

Questions Fréquentes


comment peut-on enlever l'effet de cadre autour de l'iframe


Il suffit juste de rajouter dans votre iframe :
Code:
frameborder="0"

Comme ceci :
Code:
<iframe src="lien" frameborder="0"></iframe>
Revenir en haut Aller en bas
Utilisation des iframes
Page 1 sur 1
 Sujets similaires
-
» Kaspersky utilisation ? ( résolu )
» [Résolu] Utilisation de REGCLEANER (sauvegarde)
» Première utilisation 1490T
» [RESOLU] Modification de la taille de la police du manuel d'utilisation DEZL
» Demande d'aide après utilisation du logiciel ZHP Diag
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+