1. Description de la balise <iframe>

La balise HTML <iframe> est utilisée pour incorporer une autre page web ou un contenu externe au sein d'une page web principale. L'acronyme "iframe" signifie "Inline Frame" (cadre en ligne), ce qui reflète son rôle de création d'un cadre intégré à l'intérieur d'une page web. L'utilisation de <iframe> est courante pour l'intégration de contenu tiers, tels que des vidéos YouTube, des cartes Google Maps, des widgets de médias sociaux, etc. Elle offre une manière puissante d'ajouter des fonctionnalités externes à une page web tout en maintenant la sécurité et la séparation du contenu.

2. Liste des attributs de la balise <iframe>

La balise <iframe> est dotée de nombreux attributs permettant de personnaliser le comportement et l'apparence de l'iframe ainsi que de contrôler son interaction avec la page parente. Veuillez noter que certains attributs peuvent avoir des valeurs spécifiques pour des utilisations particulières, comme l'intégration de vidéos ou de cartes.

1. src : Spécifie l'URL de la ressource web à incorporer dans l'iframe.
2. width : Définit la largeur de l'iframe, généralement en pixels (px), en pourcentage (%) ou dans d'autres unités de mesure.
3. height : Définit la hauteur de l'iframe, généralement en pixels (px), en pourcentage (%) ou dans d'autres unités de mesure.
4. title : Fournit un texte descriptif pour l'iframe, principalement utilisé pour l'accessibilité et les moteurs de recherche.
5. frameborder : Spécifie si une bordure doit être affichée autour de l'iframe. La valeur "0" signifie aucune bordure, tandis que "1" signifie une bordure visible.
6. scrolling : Contrôle l'affichage de la barre de défilement dans l'iframe. Les valeurs possibles sont "yes" (afficher la barre de défilement), "no" (masquer la barre de défilement) et "auto" (afficher la barre de défilement uniquement si nécessaire).
7. sandbox : Permet de définir un environnement de bac à sable sécurisé pour l'iframe, limitant certaines fonctionnalités potentiellement dangereuses.
8. seamless : Cet attribut permet de rendre l'iframe "transparente" pour qu'elle s'intègre parfaitement dans la page parente en supprimant les bordures et les marges par défaut.
9. allowfullscreen : Généralement utilisé pour les vidéos incorporées, cet attribut permet aux utilisateurs de passer en mode plein écran pour la ressource incorporée.
10. name : Spécifie un nom pour l'iframe, qui peut être utilisé comme cible pour les liens ou les formulaires dans la page parente.
11. srcdoc : Permet de spécifier le contenu HTML de l'iframe directement dans l'attribut, au lieu de référencer une URL externe.
12. longdesc : Fournit une description longue de l'iframe, principalement utilisée pour l'accessibilité.
13. width et height (avec des valeurs en pourcentage) : Vous pouvez également spécifier la largeur et la hauteur de l'iframe en pourcentage de la largeur et de la hauteur de la page parente.
14. loading : Cet attribut spécifie comment l'iframe doit être chargée. Les valeurs possibles sont "auto" (chargement automatique), "eager" (chargement précoce) et "lazy" (chargement tardif).
15. referrerpolicy : Définit la politique de transmission de l'en-tête Referer lors de l'accès à la ressource de l'iframe.

3. Exemples d'usages de la balise <iframe>

Voici une série d'exemples permettant d'eclaircir les principaux usages et caractéristiques de la balise <iframe> :

Exemple

Exemple (width et height)

Exemple (title)

Exemple (frameborder)

Exemple (allowfullscreen)

Exemple (sandbox)

Exemple complet

Voici un exemple complet d'utilisation de la balise <iframe> avec la source:
src=https://www.tresfacile.net/cours-html/ pour incorporer une page web dans une autre :

Explication :

1. Document de base: Nous avons créé un document HTML de base avec une page principale.
2. La balise <iframe> : est utilisée pour incorporer la page web située à l'URL https://www.tresfacile.net/cours-html/
3. width et height : Nous avons spécifié une largeur de 800 pixels et une hauteur de 600 pixels pour l'iframe.
4. Title : Un titre "Cours HTML" est fourni pour l'iframe à des fins d'accessibilité et de référencement.
5. Contenu de la page : Le contenu de la page principale peut être placé avant et après l'iframe.

Lorsque vous ouvrez cette page HTML dans un navigateur, vous verrez la page principale avec l'iframe incorporée à l'intérieur. Elle affichera le contenu de la page web https://www.tresfacile.net/cours-html/ à l'intérieur de l'iframe avec les dimensions spécifiées.

Voici un aperçu du résultat:

 

 
 

Younes Derfoufi
CRMEF OUJDA