Introduction aux iframes en HTML

Les iframes en HTML ne sont rien d'autre que des cadres en ligne qui sont utilisés comme document HTML pour y ajouter un autre document HTML. Il est principalement utilisé dans les pages Web ou les processus de développement Web pour inclure un autre contenu via une autre source, comme des publicités sur cette page Web.

La plupart des concepteurs Web utilisent Iframe pour présenter des applications interactives sur le site Web ou dans des pages Web. Cela est rendu possible en utilisant javaScript ou en utilisant l'attribut cible en HTML.

L'objectif principal d'Iframe est d'afficher une page Web dans une autre page Web. Le cadre en ligne doit être affiché à l'aide d'une balise appelée

  • Il est également possible de donner une hauteur et une largeur spécifiques à notre Iframe au format pixels comme suit:
  • Dans la syntaxe ci-dessus, toutes les choses iront de la même façon, en plus, nous pouvons spécifier la hauteur et la largeur au format pixels définissant comme

Exemple:

  • Une autre méthode pour définir la hauteur et la largeur de l'iframe à l'aide de valeurs via CSS est illustrée dans la syntaxe ci-dessous:
  • Toutes les choses sont les mêmes que ci-dessus, juste en modifiant les valeurs spécifiées.

Exemple:

  • Une autre fonctionnalité est ajoutée à iframe: nous pouvons supprimer les bordures déjà définies du cadre en utilisant la propriété border none. La syntaxe est la suivante:
  • Avec l'aide de CSS, il est également possible de faire beaucoup de choses avec la bordure, comme changer la taille de la bordure, appliquer de la couleur à la bordure, etc.

Iframe peut être utilisé comme cible pour un lien en utilisant la syntaxe:

  • Dans la syntaxe ci-dessus, src est notre URL normale, ici l'attribut cible du lien qui fera référence à l'attribut name dans notre balise iframe.

Exemple:

Attribut de balise Iframes

Il existe différentes balises d'attribut utilisées dans les iframes, comme suit:

  • Src: cet attribut est utilisé pour insérer un fichier qui doit être inclus dans le cadre. L'URL spécifie la page Web cible à charger dans un iframe.
  • Nom: le nom est un attribut utilisé pour donner un nom d'identification à la trame. C'est particulièrement utile lorsque vous créez un lien pour ouvrir une autre page Web.
  • allowfullscreen: cet attribut vous permet d'afficher votre cadre dans le format pleine largeur. nous devons donc définir la valeur true pour que cette fonction se produise
  • Frameborder: Il s'agit d'un attribut utile qui vous permet d'afficher ou non la bordure du cadre. La valeur 1 correspond à la bordure et 0 à la non-bordure du cadre.
  • Marginwidth: permet de définir l'espace entre le côté gauche et le côté droit du cadre
  • Marginheight: permet de définir un espace entre le haut et le bas du cadre.
  • Défilement: ces attributs permettent de contrôler si la barre de défilement va s'afficher ou non sur le cadre. les valeurs incluses sont «oui» ou «non» ou «auto».
  • Hauteur: Permet de définir la hauteur du cadre. Météo en% ou en pixels
  • Largeur: Permet de définir la largeur du cadre. Météo en% ou en pixels
  • Longdesc: À l'aide de cet attribut, vous pouvez lier à une autre une page contenant une longue description du contenu de votre cadre.

Exemples d'iframes en HTML

Voici quelques exemples d'Iframes en HTML qui sont expliqués ci-dessous:

Exemple 1

Prenons un exemple dans lequel nous allons montrer comment créer un iframe avec une hauteur et une largeur spécifiques.

Code:

Démonstration des iframes HTML


Ici, nous montrons un exemple d'Iframe contenant une hauteur et une largeur spécifiques au format pixels

Production:

Exemple # 2

Prenons un autre exemple dans lequel nous allons montrer comment créer un iframe avec une hauteur et une largeur spécifiques. Mais dans cet exemple, nous spécifions la hauteur et la largeur via CSS. Ici, nous pouvons voir que la barre de défilement est ajustée en fonction de la taille du contenu.

Code:

Démonstration des iframes HTML


Ici, nous montrons un exemple d'Iframe contenant une hauteur et une largeur spécifiques au format pixels

Production:

Exemple # 3

Ici, nous considérons un exemple dans lequel nous allons ajouter une bordure à iframe en ajoutant des propriétés CSS supplémentaires pour montrer un changement dans la taille de la bordure, un changement de couleur de la bordure, etc. Nous pouvons donc ajouter autant que style à notre iframe.

Code:

Démonstration des iframes HTML


Ici, nous montrons un exemple d'Iframe contenant une bordure avec quelques propriétés CSS supplémentaires

Production:

Exemple # 4

Prenons un autre exemple dans lequel nous allons montrer comment l'attribut cible pour ouvrir un lien d'une page Web à l'aide d'un iframe.

Code:

Démo cible Iframe pour un lien


EDUCBA

Lorsque la cible d'un lien correspond au nom d'un iframe, le lien s'ouvre dans l'iframe.

Production:

Sortie cible:

Comme indiqué ci-dessus, nous pouvons cliquer sur le lien cible EDUCBA pour ouvrir la page Web suivante ci-dessous.

Conclusion

De toutes les informations ci-dessus, il a conclu que iframe est un cadre en ligne qui inclut un autre document HTML en lui-même. Il est considéré comme l'élément HTML le plus puissant à des fins de conception Web. Avec l'aide de celui-ci, vous pouvez également ajouter du contenu provenant d'une autre source. Il utilise différents types d'attributs HTML comme les attributs globaux, les attributs d'événement, certaines pages connexes, etc.

Articles recommandés

Ceci est un guide des Iframes en HTML. Nous discutons ici de la syntaxe, de l'attribut tag des iframes en HTML ainsi que des divers exemples et de l'implémentation du code. Vous pouvez également consulter les articles suivants pour en savoir plus -

  1. Commandes de sélénium
  2. Cadres HTML
  3. Lien texte HTML
  4. Créer des tableaux en HTML

Catégorie:

Outils de développement Web