Vous souhaitez intégrer des contenus externes dans votre site Internet ? Les inlineframes (iframes) sont tout indiquées. Elles permettent d’héberger de façon élégante des contenus supplémentaires dans un document HTML. Dans le meilleur des cas, les visiteurs du site Internet n’ont pas conscience du fait que des contenus supplémentaires leur sont affichés. Comment intégrer une iframe ?
En principe, chaque site Internet est constitué d’un unique document HTML. Si vous souhaitez insérer d’autres éléments, il est nécessaire d’utiliser un frame. Celui-ci permet alors d’intégrer des documents, des images ou des vidéos supplémentaires dans le document HTML. Par le passé, on utilisait pour cela des frames HTML normaux. Aujourd’hui, ils ne sont plus utilisés et on leur préfère la balise iframe. Dans une inlineframe, les autres éléments sont présentés de façon isolée. Si la taille du contenu intégré le nécessite, il est ainsi possible de faire défiler l’inlineframe séparément.
C’est pourquoi les inlineframes sont généralement utilisés pour intégrer des objets d’autres sites internet dans un site. Parmi les exemples d’iframes, on peut citer les vidéos YouTube ou les cartes de Google Maps. Les plug-ins de réseaux sociaux ou les applications spécifiques, mais aussi des documents HTML peuvent également être intégrés à l’aide d’iframes.
Les inlineframes sont créés dans le code HTML à l’aide de la balise iframe.
<iframe>...</iframe>Il est nécessaire d’indiquer les attributs suivants pour remplir correctement la balise :
Outre ces attributs toujours d’actualité, il existe en pratique d’autres attributs qui ne sont plus supportés depuisHTML5. Pour ces fonctionnalités, il est nécessaire d’utiliser des solutions CSS.
Le contenu de l’iframe ainsi qu’une partie de la mise en page peuvent donc être paramétrés exclusivement à l’aide de ces attributs. Les parenthèses de la balise ne comportent en principe aucun contenu. En pratique, cet emplacement est utilisé pour indiquer un texte alternatif. Ce contenu est lu lorsqu’un navigateur est dans l’incapacité d’afficher une iframe. Toutefois, cela ne devrait normalement plus se produire de nos jours. Cette technologie est en effet supportée par les dernières versions de tous les navigateurs courants.
Une iframe valide peut par exemple ressembler à ce qui suit :
<iframe src="http://example.org/demo.html" height="400" width="800" name="demo">
<p>Votre navigateur ne supporte aucune iframe !</p>
</iframe>Dans cet exemple, notre document HTML renvoie à un autre site internet. Les balises iframe permettent toutefois également d’intégrer des documents HTML enregistrés sur votre serveur Web. Il vous suffit alors d’indiquer le nom du fichier et, le cas échéant, le chemin si le document ne se situe pas dans le même dossier.
Si vous souhaitez intégrer des vidéos YouTube dans votre site Internet, vous pouvez également utiliser les inlineframes. La plateforme de vidéos vous indique le code correspondant directement sur la page de la vidéo en question.
Afin de concevoir une balise iframe adaptée, il est nécessaire d’utiliser le CSS. Mais dans la plupart des cas, seul le frame peut être mis en page. Si le contenu provient d’une source externe, vous aurez rarement la possibilité d’adapter l’affichage sur votre propre site Internet. Il est également possible d’intégrer une iframe dans un responsive Web design à l’aide de quelques astuces CSS.
Les inlineframes sont utiles si vous souhaitez intégrer des éléments de sources externes sur votre propre site. Grâce aux iframes, l’utilisateur n’est pas envoyé sur l’autre domaine et peut naviguer en toute tranquillité sur votre site ce qui augmente grandement la convivialité. L’intégration peut en outre comporter des avantages techniques. Le contenu de l’iframe est chargé indépendamment du reste du site internet. L’utilisateur peut ainsi accéder aux contenus même si tous les éléments de la page ne sont pas encore chargés.
Les iframes sont toutefois de moins en moins utilisées, car elles présentent également certains inconvénients. Les éléments intégrés ne sont en effet pas traités de façon pertinente par les moteurs de recherche. Ceci peut impacter l’optimisation SEO et donc le référencement du site internet. Ce qui est nettement plus problématique, c’est toutefois le risque de sécurité lié aux iframes : lorsque l’on intègre des contenus externes, ces derniers peuvent avoir un effet négatif sur le système de l’utilisateur ou l’utilisateur lui-même. Le contenu de l’iframe peut par exemple contenir un plugin nuisible ou effectuer de l’hameçonnage sans que vous en ayez conscience en tant qu’exploitant du site Internet.
Les iframes font de plus en plus débat pour des raisons de protection des données. En effet, les inlineframes sont souvent utilisés pour les plug-ins de réseaux sociaux qui collectent des données utilisateur même si le visiteur du site internet n’interagit pas avec le bouton J’aime ou Partager et même si celui-ci n’est pas connecté au réseau correspondant.
Les inlineframes ont toujours un rôle à jouer dans la création de sites Internet. Dans de nombreux cas, l’effet souhaité peut toutefois également être atteint avec des technologies comme le CSS ou le JavaScript qui sont préférables.
HTML5 rend la mise en ligne de contenus vidéo plus facile que jamais. La nouvelle version du langage hypertexte définit un élément video natif et l’interface de programmation correspondante. Les exploitants de sites Web ont aussi la possibilité d’intégrer des contenus audiovisuels de plateformes vidéo telles que YouTube ou Vimeo sur leurs propres pages Web.
La feuille de style en cascade ou le langage CSS est l’un des outils les plus utiles de la Toile et est en constante évolution. Ce programme vous permet de séparer le contenu et la mise en page d’un site. Les snippets CSS facilitent la création de sites Internet et disposent de fonctions similaires à Photoshop voire à JavaScript. Notre article vous liste les astuces CSS les plus célèbres du...
Qu’est-ce qu’une sandbox ? Le mot anglais issu du domaine informatique signifie littéralement bac à sable. Dans le secteur du développement de logiciel et de la cybersécurité on parle de sandbox lorsqu’on parle d’un environnement isolé qui permet de lancer des logiciels de manière sécurisée. Cela permet d’éviter qu’un logiciel pas encore au point ou malveillant n’endommage ou ne modifie le système...
L’intégration de vidéos, d’images, de cartes ou d’un calendrier dans WordPress par exemple, consomme beaucoup de capacité de mémoire. Avec iFrame, vous pouvez intégrer du contenu provenant d’autres plateformes ou sites Web, sans pour autant surcharger votre médiathèque. Nous vous expliquons ici comment utiliser un iFrame dans WordPress via un plugin ou manuellement.
Offrez un service performant et fiable à vos clients avec l'hébergement web de IONOS.
Voir les packs
