Comment afficher une page web dans une autre page avec iframe en HTML - Letecode
Suivez nous
Table de matière
  1. Tutoriels
  2. Tutoriel HTML5
  3. HTML iFrame
Chapitres

HTML iFrame

Dernière mise à jour : 07/02/2022

Dans ce tutoriel, vous apprendrez à utiliser une iframe pour afficher une page Web dans une autre page Web.

Qu'est-ce qu'un iframe

Un iframe ou un cadre en ligne est utilisé pour afficher des objets externes, y compris d'autres pages Web dans une page Web. Un iframe agit à peu près comme un mini navigateur Web dans un navigateur Web. De plus, le contenu à l'intérieur d'un iframe existe entièrement indépendamment des éléments environnants.

La syntaxe de base pour ajouter un iframe à une page Web peut être donnée avec :

<iframe src =" lien "> </iframe>

L'URL spécifiée dans l'attribut src pointe vers l'emplacement d'un objet externe ou d'une page Web.

L'exemple suivant affiche le fichier "hello.html" à l'intérieur d'un iframe dans le document actuel.

<iframe src="hello.html"></iframe>

Réglage de la largeur et de la hauteur d'un iFrame

Les attributs height et width sont utilisés pour spécifier la hauteur et la largeur de l'iframe.

<iframe src="hello.html" width="400" height="200"></iframe>

Vous pouvez également utiliser CSS pour définir la largeur et la hauteur d'un iframe, comme illustré ici :

<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>

Veuillez consulter le tutoriel sur les styles HTML pour apprendre les méthodes d'application de CSS aux éléments HTML.

Remarque : Les valeurs des attributs width et height sont spécifiées en pixels par défaut, mais vous pouvez également définir ces valeurs en pourcentage, telles que 50%, 100%, etc. La largeur par défaut d'une iframe est de 300 pixels, tandis que la hauteur par défaut est de 150 pixels.

Suppression de la bordure de cadre par défaut

L'iframe est entouré par défaut d'une bordure. Cependant, si vous souhaitez modifier ou supprimer les bordures de l'iframe, le mieux est d'utiliser la propriété CSS border.

L'exemple suivant affichera simplement l'iframe sans aucune bordure.

<iframe src="hello.html" style="border: none;"></iframe>

De même, vous pouvez utiliser la propriété border pour ajouter les bordures de votre choix à une iframe. L'exemple suivant affichera l'iframe avec une bordure bleue de 2 pixels.

<iframe src="hello.html" style="border: 2px solid blue;"></iframe>

Utiliser un iFrame comme cible de lien

Un iframe peut également être utilisée comme cible pour les hyperliens.

Un iframe peut être nommé à l'aide de l'attribut name. Cela implique que lorsqu'un lien avec un attribut target avec ce nom comme valeur est cliqué, la ressource liée s'ouvrira dans cet iframe.

Essayons un exemple pour comprendre comment cela fonctionne fondamentalement:

<iframe src="letecode.html" name="monFrame"></iframe>
<p><a href="https://www.letecode.com" target="monFrame">Ouvrir Letecode.com</a></p>

 

Comment créer des formulaires en HTML Syntaxe de la déclaration HTML doctype