BESTE WEBSITE FÜR WEBENTWICKLER
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django WIE MAN W3.CSS AI Mehr 🔍 ◑ Bücher VERWEISE ÜBUNGEN
HTML5-Lektionen für Anfänger

Ua En Es Fr

HTML Iframe

❮ Prev Next ❯

Ein HTML-Iframe wird verwendet, um eine Webseite innerhalb einer Webseite anzuzeigen.

HTML Iframe Syntax

Das HTML-Tag <iframe> gibt einen Inline-Frame an.

Ein Inline-Frame wird verwendet, um ein anderes Dokument in das aktuelle HTML-Dokument einzubetten.

Syntax

<iframe src="url" title="Beschreibung"></iframe>

Tipp: Es empfiehlt sich, immer ein title-Attribut für den <iframe> einzufügen. Dies wird von Screenreadern verwendet, um den Inhalt des Iframes vorzulesen.

Iframe - Legen Sie Höhe und Breite fest

Verwenden Sie die Attribute height und width, um die Größe des Iframes anzugeben.

Höhe und Breite werden standardmäßig in Pixel angegeben:

Beispiel

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Beispiel"></iframe>
Try it Yourself »

Oder Sie können das Attribut style hinzufügen und die CSS-Elemente verwenden height und width-Eigenschaften:

Beispiel

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Beispiel"></iframe>
Try it Yourself »

Iframe - Entfernen Sie den Rand

Standardmäßig ist ein Iframe von einem Rahmen umgeben.

Um den Rahmen zu entfernen, fügen Sie das Attribut style hinzu und verwenden Sie die CSS-Eigenschaft border:

Beispiel

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Beispiel"></iframe>
Try it Yourself »

Mit CSS können Sie auch Größe, Stil und Farbe des Iframe-Rahmens ändern:

Beispiel

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Beispiel"></iframe>
Try it Yourself »

Iframe — Ziel für einen Link

Ein Iframe kann als Zielframe für einen Link verwendet werden.

Das Attribut target des Links muss auf das Attribut name des Iframes verweisen:

Beispiel

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Beispiel"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Try it Yourself »

Kapitelzusammenfassung

  • Das HTML-Tag <iframe> gibt einen Inline-Frame an
  • Das Attribut src definiert die URL der einzubettenden Seite
  • Fügen Sie immer ein title-Attribut ein (für Bildschirmleseprogramme)
  • Die Attribute height und width geben die Größe des Iframes an
  • Verwenden Sie border:none;, um den Rahmen um den Iframe zu entfernen

HTML Übungen

Testen Sie sich mit Übungen

Übung:

Erstellen Sie einen Iframe mit einer URL-Adresse, die zu führt https://www.w3schools.com.

<iframe ="https://www.w3schools.com"></iframe>

HTML iframe Tag

Tag Beschreibung
<iframe> Definiert einen Inline-Frame

For a complete list of all available HTML tags, visit HTML Tag Reference on our website W3SchoolsEn. The Best.

HTML — Iframe — W3Schools-Video

In diesem Video werden Iframes und deren Verwendung auf Ihrer Website erläutert.

Teil einer Reihe von Video-Tutorials zum Erlernen von HTML für Anfänger!

❮ Prev Next ❯

✍ Kommentare