Einführung in Iframes in HTML

IFrames in HTML sind nichts anderes als Inline-Frames, die als HTML-Dokument verwendet werden, um ein weiteres HTML-Dokument hinzuzufügen. Es wird meistens in Webseiten oder Webentwicklungsprozessen verwendet, um andere Inhalte über eine andere Quelle einzuschließen, beispielsweise Werbung auf dieser Webseite.

Die meisten Webdesigner verwenden Iframe, um interaktive Anwendungen auf der Website oder auf Webseiten zu präsentieren. Möglich wird dies durch die Verwendung von JavaScript oder durch die Verwendung des target-Attributs in HTML.

Der Hauptzweck von Iframe besteht darin, eine Webseite innerhalb einer anderen Webseite anzuzeigen. Der Inline-Frame sollte mit einem Tag namens angezeigt werden

  • Es ist auch möglich, unserem Iframe eine bestimmte Höhe und Breite im Pixelformat wie folgt zuzuweisen:
  • In der obigen Syntax werden alle Dinge gleich sein. Zusätzlich können wir Höhe und Breite im Pixelformat angeben, das als definiert ist

Beispiel:

  • Eine weitere Methode zum Definieren von Höhe und Breite für den Iframe mithilfe von Werten über CSS ist in der folgenden Syntax dargestellt:
  • Alle Dinge sind die gleichen wie oben, nur dass Sie Änderungen an den angegebenen Werten vornehmen.

Beispiel:

  • Eine weitere Funktion, die iframe hinzugefügt wird, besteht darin, dass wir bereits definierte Rahmen aus dem Frame entfernen können, indem wir die Eigenschaft border none verwenden. Die Syntax hierfür lautet wie folgt:
  • Mit Hilfe von CSS ist es auch möglich, viele Dinge mit dem Rand zu tun, z. B. die Größe des Randes zu ändern, etwas Farbe auf den Rand anzuwenden usw.

Iframe kann mithilfe der folgenden Syntax als Ziel für einen Link verwendet werden:

  • In der obigen Syntax ist src unsere normale URL, hier das Zielattribut des Links, das auf das Namensattribut in unserem iframe-Tag verweist.

Beispiel:

IFrames-Tag-Attribut

In den IFrames werden verschiedene Attribut-Tags verwendet, die wie folgt lauten:

  • Quelle: Dieses Attribut wird zum Einfügen von Dateien verwendet, die in den Frame aufgenommen werden müssen. URL gibt die Zielwebseite an, die in einem iframe geladen werden soll.
  • Name: Name ist ein Attribut, das verwendet wird, um dem Frame einen Identifikationsnamen zu geben. Dies ist am nützlichsten, wenn Sie einen Link erstellen, um eine andere Webseite zu öffnen.
  • Allowfullscreen: Mit diesem Attribut können Sie Ihren Rahmen in voller Breite anzeigen. also müssen wir den Wert true setzen, um diese Funktion auszuführen
  • Rahmenrahmen: Dies ist ein nützliches Attribut, mit dem Sie den Rahmen anzeigen oder nicht anzeigen können. Der Wert 1 zeigt den Rahmen & 0 an, um den Rahmen nicht anzuzeigen.
  • Randbreite: Hier können Sie den Abstand zwischen der linken und rechten Seite des Rahmens definieren
  • Randhöhe: Hier können Sie den Abstand zwischen dem oberen und unteren Rand des Rahmens definieren.
  • Bildlauf : Mit diesen Attributen wird gesteuert, ob die Bildlaufleiste für den Frame angezeigt wird oder nicht. Eingeschlossene Werte sind "Ja" oder "Nein" oder "Auto".
  • Höhe: Hiermit wird die Höhe des Rahmens definiert. Wetter in% oder in Pixeln
  • Breite: Hiermit wird die Breite des Rahmens definiert. Wetter in% oder in Pixeln
  • Longdesc: Mit Hilfe dieses Attributs können Sie eine andere Seite verlinken, die eine lange Beschreibung des Inhalts Ihres Frames enthält.

Beispiele für Iframes in HTML

Hier einige Beispiele für Iframes in HTML, die im Folgenden erläutert werden:

Beispiel 1

Betrachten wir ein Beispiel, in dem gezeigt wird, wie ein Iframe mit einer bestimmten Höhe und Breite erstellt wird.

Code:

HTML Iframes Demo


Hier zeigen wir ein Beispiel für einen Iframe, der eine bestimmte Höhe und Breite im Pixelformat enthält

Ausgabe:

Beispiel # 2

Betrachten wir ein weiteres Beispiel, in dem gezeigt wird, wie ein Iframe mit einer bestimmten Höhe und Breite erstellt wird. In diesem Beispiel geben wir Höhe und Breite über CSS an. Hier können wir sehen, dass die Bildlaufleiste an die Größe des Inhalts angepasst wird.

Code:

HTML Iframes Demo


Hier zeigen wir ein Beispiel für einen Iframe, der eine bestimmte Höhe und Breite im Pixelformat enthält

Ausgabe:

Beispiel # 3

Hier betrachten wir ein Beispiel, in dem wir iframe einen Rahmen hinzufügen, indem wir einige zusätzliche CSS-Eigenschaften hinzufügen, um eine Änderung der Größe des Rahmens, eine Änderung der Farbe des Rahmens usw. anzuzeigen. Wir können also so viel wie möglich hinzufügen Style zu unserem Iframe.

Code:

HTML Iframes Demo


Hier zeigen wir ein Beispiel für Iframe, das Rahmen mit einigen zusätzlichen CSS-Eigenschaften enthält

Ausgabe:

Beispiel # 4

Betrachten wir ein weiteres Beispiel, in dem gezeigt wird, wie das Zielattribut einen Link einer Webseite mithilfe eines Iframes öffnet.

Code:

IFrame-Demo-Ziel für einen Link


EDUCBA

Wenn das Ziel eines Links mit dem Namen eines Iframes übereinstimmt, wird der Link im Iframe geöffnet.

Ausgabe:

Zielausgabe:

Wie im obigen Beispiel gezeigt, können wir auf den Ziellink EDUCBA klicken, um die nächste unten gezeigte Webseite zu öffnen.

Fazit

Aus all diesen Informationen wurde der Schluss gezogen, dass iframe ein Inline-Frame ist, der ein anderes HTML-Dokument in sich enthält. Es gilt als leistungsstärkstes HTML-Element für Webdesign-Zwecke. Mit dessen Hilfe können Sie auch Inhalte aus einer anderen Quelle hinzufügen. Es werden verschiedene Arten von HTML-Attributen wie globale Attribute, Ereignisattribute, einige verwandte Seiten usw. verwendet.

Empfohlene Artikel

Dies ist eine Anleitung zu den Iframes in HTML. Hier diskutieren wir die Syntax, das Tag-Attribut von iframes in HTML sowie die verschiedenen Beispiele und die Code-Implementierung. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

  1. Selen-Befehle
  2. HTML-Frames
  3. HTML Text Link
  4. Erstellen Sie Tabellen in HTML

Kategorie:

Web-Entwicklungstools