Comment insérer un iframe en HTML: un exemple d'utilisation

À l'aube de la construction du site, les ressources Web utilisaient abondamment des cadres pour afficher des parties individuelles de pages. Mais avec l'arrivée de la nouvelle version de HTML 5, tout a changé. Éléments de balisage <cadre>, <jeu de cadres> et <noframes> sont considérés comme obsolètes. Les remplacer était une seule étiquette - <iframe>. Comment ajouter au html <iframe>? L'exemple ci-dessous sera compréhensible même pour un débutant en programmation.

Quels sont les cadres?

Un cadre est la base de la plupart des premières pages Web. Si vous traduisez littéralement, ce mot signifie "cadre", c'est-à-dire que le cadre est une petite partie de la page dans le navigateur. L'utilisation répandue des cadres dans le passé peut s'expliquer par la faible qualité et le coût élevé du trafic Internet. En règle générale, le site a été divisé en 3-5 parties, dont chacune remplissait un certain but:

"Cap" (le cadre supérieur sur la largeur de la page) - affiche le nom de la ressource;
gauche / droite "verre" - sortie de menu;
le cadre central est l'affichage du contenu du site.

Diviser la page en plusieurs parties permet de ne surcharger qu'une certaine partie lors de la mise à jour. Par exemple, l'utilisateur a cliqué sur un élément de menu et le nouveau contenu a été téléchargé sur le cadre central.

Cadres modernes en HTML 5

Pourquoi utiliser HTML <iframe>? Un exemple est l'insertion de contenu à partir d'une ressource tierce. Une situation classique est lorsqu'un développeur web veut montrer la position d'un objet sur une carte. Comment être? Dessiner un plan de terrain à partir de zéro? Non - il existe une solution plus simple: intégrer un élément de Google Map, Yandex Maps ou 2GIS sur la page. Le problème est résolu en quatre actions.

Vous devez vous rendre sur le site de tout service cartographique.
Trouvez l'objet désiré. Connaissant l'adresse exacte, vous pouvez l'entrer dans la boîte de recherche.
Utilisez la fonction « Enregistrer et obtenir le code » (pour « Yandex.Maps ») ou « Terminer » (Google Maps) pour obtenir le code à insérer.
Il reste à entrer les balises de marquage générées sur la page.

De plus, vous pouvez sélectionner la taille de la carte et configurer d'autres options d'affichage.

Comment puis-je utiliser HTML <iframe>? Un exemple est l'insertion de matériel vidéo à partir d'une ressource Youtube. La technologie multimédia attire les internautes, ce qui fait que le contenu vidéo est si populaire. Avec l'installation du développeur vidéo va faire face rapidement.

Vous devriez télécharger votre propre vidéo sur Youtube ou trouver un fichier tiers pour la diffusion.
Obtenez le tag en sélectionnant le bouton "HTML"
L'action finale consiste à insérer dans le code HTML <iframe>. Un exemple du contenu de l'étiquette sera discuté ci-dessous.

Les deux exemples utilisés automatiquegénération de code, mais les développeurs professionnels devraient être capables de le composer eux-mêmes. Premièrement, cela leur permettra de comprendre la mise en page de la page et, si nécessaire, de la modifier. Deuxièmement, pas toujours le balisage des éléments du site (même s'ils appartiennent à une ressource externe) est formé sans la participation d'un webmaster. Voici la haute qualification du développeur.

Syntaxe

Alors avant de commencer la page vorstke, balise iframe (html) doit prendre en compte: ce qu'elle est et comment l'utiliser.

Tout d'abord, il convient de noter que l'étiquette est appariée. Entre les éléments d'ouverture et de fermeture, spécifiez le contenu qui sera affiché dans les navigateurs qui ne supportent pas cet élément de mise en page. Les principaux attributs de la balise: