Comment centrer un iFrame

Publié: 2022-04-20

Si vous avez déjà ajouté un iFrame à une page Web, vous savez à quel point il peut être frustrant de constater que le contenu ne s'affiche pas comme vous le souhaitez. Ceux qui connaissent HTML comprennent probablement cette lutte, ainsi que le désir d'inclure des iFrames en premier lieu.

Si vous n'êtes pas familier avec les iFrames, il s'agit d'un élément HTML qui affiche le contenu d'une page Web sur une autre . Vous avez probablement déjà vu un iFrame en visitant un site Web, même si vous ne le saviez pas. De nombreux iFrames sont des publicités qui affichent des informations provenant du site Web de l'annonceur. D'autres intègrent des vidéos, des publications et même des cartes. Que vous éditiez du HTML tout le temps ou que vous commenciez tout juste votre parcours de codage, cet article vous apprendra tout ce que vous devez savoir pour centrer un iFrame.

Tout d'abord, nous expliquerons en détail ce qu'est un iFrame et pourquoi vous voudriez en centrer un. Ensuite, nous couvrirons quelques notions de base sur HTML et comment ils utilisent les iFrames. Enfin, nous vous guiderons à travers les étapes de centrage d'un iFrame sur votre page Web à l'aide de l'attribut align.

iframe html

Table des matières

Qu'est-ce qu'un iFrame ?

Un iFrame est le terme abrégé pour un Inline Frame. Les cadres en ligne sont des éléments HTML qui peuvent afficher d'autres éléments HTML ainsi que du code provenant d'autres sites Web comme Facebook ou YouTube. En termes plus simples, un iFrame est une fenêtre dans une page Web qui vous permet d'afficher le contenu d'une autre page Web. Les iFrames peuvent être un excellent moyen d'intégrer rapidement et facilement quelque chose dans votre page Web. Bien qu'ils nécessitent des connaissances en HTML, ils peuvent constituer un moyen très simple d'améliorer votre page Web. Les entreprises en particulier peuvent bénéficier de l'utilisation d'iFrames sur leur site Web. Les iFrames au lieu de liens ou d'images statiques peuvent rendre le site Web de votre entreprise plus professionnel. Ils peuvent même être une source de revenus s'ils sont utilisés pour afficher des publicités d'autres entreprises.

Les iFrames peuvent être utilisés pour incorporer des publicités , des vidéos YouTube, des publications sur les réseaux sociaux et même des cartes en ligne dans des pages Web. L'utilisation d'un iFrame inclut ce contenu directement sur la page Web, ce qui signifie que vous n'aurez pas à constamment mettre à jour les informations. Au lieu de cela, il sera automatiquement mis à jour avec le matériel source. Par exemple, l'utilisation d'un iFrame pour inclure une publication sur les réseaux sociaux permet aux lecteurs d'accéder directement à la publication. Si la publication est supprimée, modifiée ou gagne de nouvelles interactions, l'iFrame le reflétera. Les captures d'écran peuvent afficher certaines informations, mais elles ne seront pas aussi dynamiques qu'un iFrame. Une capture d'écran n'inclura pas non plus de lien vers le contenu lui-même. Souvent, cliquer sur un iFrame vous amène directement à sa source. L'un des rares inconvénients d'un iFrame, cependant, est le fait que les iFrames peuvent perdre l'accès au contenu s'il est supprimé.

Pourquoi voudrais-je utiliser un iFrame sur ma page Web ?

Les iFrames améliorent l'apparence générale de votre page Web en permettant aux utilisateurs d'accéder directement au contenu. Par exemple, les vidéos YouTube intégrées à l'aide d'iFrames sont lues directement sur la page Web. Il n'est pas nécessaire d'attendre que la page Web suive un lien ou de rechercher la vidéo. De cette façon, les lecteurs peuvent regarder une vidéo sans avoir à quitter votre page. Cela peut également réduire le temps de chargement en incluant la vidéo en tant que page dans votre page. Le temps qu'il faut à une page pour se charger peut sérieusement affecter la quantité de trafic qu'un site Web reçoit .

L'intégration d'éléments tels que Google Maps peut fournir des itinéraires facilement sans avoir à les rechercher. Étant donné que les iFrames accèdent directement à d'autres pages Web, les instructions seront toujours à jour. Cela peut être un ajout utile à toute page Web qui se concentre sur un lieu spécifique, comme un article sur une attraction touristique. De même, les entreprises peuvent souhaiter inclure une épingle de leur adresse dans Google Maps sur leur site Web. L'utilisation d'un iFrame de Google Maps donne aux visiteurs la possibilité d'afficher rapidement des itinéraires en cliquant sur l'iFrame.

centrer une iframe

Centrer une iFrame

Les iFrames sont destinés à améliorer la fonction et l'apparence d'une page Web, il est donc très important de les intégrer correctement. Votre vidéo YouTube ou votre publication sur les réseaux sociaux peut sembler étrange si elle n'est pas centrée sur une page Web. Les entreprises doivent particulièrement tenir compte de l'apparence de leur site Web. Étant donné que le contenu peut considérablement améliorer votre site Web , vous devez vous assurer qu'il s'affiche correctement. Sinon, votre site Web pourrait ne pas avoir l'air très professionnel ou bien fait. Heureusement, le centrage d'un iFrame est simple. Tout ce dont vous avez besoin est une connaissance HTML de niveau superficiel.

HTML iFrame

HTML, ou Hypertext Markup Language , est l'information qui indique à un navigateur Web comment afficher une page particulière d'un site Web. Il est composé d'une longue chaîne de code qui peut être éditée et modifiée en ajoutant ou en supprimant des sections de code. Ces changements affectent la façon dont la page Web est affichée et sa fonction.

HTML est composé de balises, d'éléments et d'attributs. Les balises sont le code de début et de fin autour d'un élément. Ils indiquent au navigateur Web où un élément commence et se termine. Cela permet à l'élément d'être exprimé correctement et complètement sans qu'il ne se perde parmi d'autres codes. Les éléments sont les structures qui seront exprimées dans une page Web. Par exemple, les iFrames sont un élément HTML. Lorsqu'il est placé entre deux balises, un élément iFrame dans un code HTML affichera un iFrame sur votre site Web. Enfin, les attributs affectent la façon dont un élément est affiché. Ceux-ci peuvent affecter la taille, la position ou même inclure du texte ajouté sur les images.

La modification du code HTML d'un site Web modifie son apparence et sa fonction. L'édition HTML peut impliquer un éditeur HTML comme NotePad ou KompoZer. Dans ces programmes d'édition, vous pouvez apporter des modifications à votre code HTML en modifiant directement son code. C'est un excellent moyen de créer ou de développer votre site Web si vous êtes particulièrement féru de technologie. Modifier vous-même votre HTML vous donne la possibilité d' inclure des images , de modifier du texte et d'incorporer des iFrames.

comment centrer une iframe

Utiliser iFrame sur votre site Web

La première étape pour intégrer un iFrame dans votre site Web consiste à trouver le contenu que vous souhaitez afficher. Si vous cherchez à inclure une vidéo YouTube, cliquez sur le bouton "partager". Cela devrait vous fournir quelques options pour partager la vidéo. Cliquez sur l'option qui dit "intégrer" . Cliquez sur ce bouton pour afficher le texte HTML iFrame exact que vous souhaitez inclure. Maintenant, tout ce que vous avez à faire est de copier et coller ces informations dans votre code HTML. De même, les publications sur les réseaux sociaux auront également des options pour intégrer une publication.

Pour les autres types de contenu, il peut être plus simple d'utiliser un lien vers un site Web dans votre code HTML. Pour intégrer ce type d'iFrame dans votre site Web, commencez par ouvrir votre éditeur HTML préféré. Dans votre éditeur, trouvez le code où vous souhaitez ajouter votre iFrame. Commencez par taper "<iframe src=". Le "src" signifie ici source, donc tout ce qui suit est censé être la source du contenu affiché dans l'iFrame. C'est ici que vous voudrez copier et coller le lien vers le contenu que vous souhaitez afficher. Le lien doit être entre guillemets qui se terminent là où se trouve le lien.

Après avoir inclus la source entre guillemets, incluez la hauteur et la largeur souhaitées pour l'iFrame. La hauteur et la largeur d'un iFrame sont généralement mesurées en pixels, mais elles peuvent également être mesurées en pourcentages. Enfin, fermez cette balise iFrame en tapant "iFrame>". Si vous avez fait cela correctement, vous devriez avoir un iFrame réussi affiché sur votre site Web ! Maintenant que vous avez créé un iFrame, assurez-vous qu'il est centré sur votre page.

Centre d'alignement iFrame

Le centrage d'un iFrame est une partie très importante de l'apparence de votre page Web. Il peut être incroyablement frustrant de passer par l'effort de créer un iFrame, seulement pour qu'il soit légèrement décalé. Heureusement, centrer un iFrame est encore plus facile que d'en créer un à partir de rien ! Comme pour créer un iFrame, cela nécessite que vous éditiez votre code HTML.

Ouvrez votre éditeur HTML et trouvez l'iFrame que vous cherchez à centrer. Dans le code de cette iFrame, tapez "align=center". Cela indiquera à votre page de centrer l'iFrame. Vous pouvez également centrer l'image en modifiant sa hauteur et sa largeur sur la page. Encore une fois, ceux-ci peuvent être mesurés en pixels ou en pourcentages.

Vous pouvez même aligner votre iFrame différemment si vous ne voulez pas qu'il soit centré. Au lieu de center, tapez "left", "right", "bottom" ou "top" après "align=". Votre iFrame sera placé en conséquence en fonction de ce texte. L'outil utilisé pour cela s'appelle « l'attribut d'alignement ». L'attribut align permet de changer la position de votre iFrame très simplement. Bien que le centrage des iFrames soit idéal pour le contenu important, certains iFrames comme ceux utilisés pour afficher des publicités pourraient être mieux adaptés sur le côté d'une page Web.

iframe aligner le centre

Centrage des iFrames

Les iFrames sont un excellent moyen d'intégrer du contenu dans votre site Web, mais il peut être difficile de lui donner une apparence parfaite. Ouvrez simplement le code iFrames et ajoutez "align=center" à l'élément. Vous pouvez maintenant avoir plus de contrôle sur la façon dont votre page Web affiche son contenu. Le contenu affiché dans les iFrames peut être une amélioration considérable de l'apparence et de la fonction globales de votre page Web. Étant donné que les iFrames servent de fenêtres sur les informations d'un autre site Web, votre page Web peut mettre toutes sortes d'informations importantes au même endroit. Les publicités, les vidéos et les cartes peuvent toutes être facilement ajoutées à votre page Web via HTML.