HTML Iframes

Un iframe HTML est utilisé pour afficher une page web à l'intérieur d'une autre page web.

Syntaxe de l'Iframe HTML

La balise HTML <iframe> spécifie un cadre en ligne.

Un cadre en ligne est utilisé pour intégrer un autre document dans le document HTML actuel.

Syntaxe

<iframe src=" url " title=" description "></iframe>

Conseil : Il est recommandé d'inclure un attribut title pour le <iframe> . Cela est utilisé par les lecteurs d'écran pour décrire le contenu de l'iframe.

Iframe - Définir la Hauteur et la Largeur

Utilisez les attributs height et width pour spécifier la taille de l'iframe.

La hauteur et la largeur sont spécifiées en pixels par défaut :

Exemple

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
Essayez-le vous-même »

Vous pouvez également ajouter l'attribut style et utiliser les propriétés CSS height et width :

Exemple

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
Essayez-le vous-même »

Iframe - Supprimer la Bordure

Par défaut, un iframe a une bordure autour de lui.

Pour supprimer la bordure, ajoutez l'attribut style et utilisez la propriété CSS border :

Exemple

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
Essayez-le vous-même »

Avec CSS, vous pouvez également changer la taille, le style et la couleur de la bordure de l'iframe :

Exemple

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>
Essayez-le vous-même »

Iframe - Cible pour un Lien

Un iframe peut être utilisé comme cadre cible pour un lien.

L'attribut target du lien doit faire référence à l'attribut name de l'iframe :

Exemple

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.formation-ti.org" target="iframe_a">formation-ti.org</a></p>
Essayez-le vous-même »

Résumé du Chapitre

  • La balise HTML <iframe> spécifie un cadre en ligne
  • L'attribut src définit l'URL de la page à intégrer
  • Incluez toujours un attribut title (pour les lecteurs d'écran)
  • Les attributs height et width spécifient la taille de l'iframe
  • Utilisez border:none; pour supprimer la bordure autour de l'iframe

Balise HTML iframe

Balise Description
<iframe> Définit un cadre en ligne

Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des Balises HTML .

Vidéo : Iframe HTML