Partagez | 
 

 Utilisation des iframes

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: Utilisation des iframes   Mer 13 Oct - 13:39

Dernière édition par Miettes le Lun 9 Mai - 16:35, édité 1 fois
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].
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: 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>
 

Utilisation des iframes

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants