HTML -Iframes
Ein HTML-Iframe wird verwendet, um eine Webseite innerhalb einer Webseite anzuzeigen.
HTML-Iframe-Syntax
Das HTML <iframe>-Tag 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="description"></iframe>
Tipp: Es empfiehlt sich, immer ein
titleAttribut für die <iframe>. Dies wird von Screenreadern verwendet, um den Inhalt des Iframes vorzulesen.
Iframe - Legen Sie Höhe und Breite fest
Verwenden Sie die Attribute heightund width, um die Größe des iframe anzugeben.
Höhe und Breite werden standardmäßig in Pixel angegeben:
Beispiel
<iframe src="demo_iframe.htm" height="200" width="300"
title="Iframe Example"></iframe>
Oder Sie können das Attribut hinzufügen styleund das CSS heightund die width
Eigenschaften verwenden:
Beispiel
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"
title="Iframe Example"></iframe>
Iframe - Entfernen Sie den Rand
Standardmäßig hat ein Iframe einen Rahmen um sich herum.
Um den Rahmen zu entfernen, fügen Sie das styleAttribut hinzu und verwenden Sie die CSS-
borderEigenschaft:
Beispiel
<iframe src="demo_iframe.htm" style="border:none;"
title="Iframe Example"></iframe>
Mit CSS können Sie auch die Größe, den Stil und die Farbe des Iframe-Rahmens ändern:
Beispiel
<iframe src="demo_iframe.htm" style="border:2px solid red;"
title="Iframe Example"></iframe>
Iframe - Ziel für einen Link
Als Zielframe für einen Link kann ein Iframe verwendet werden.
Das targetAttribut des Links muss auf das nameAttribut des Iframes verweisen:
Beispiel
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Kapitelzusammenfassung
- Das HTML
<iframe>-Tag gibt einen Inline-Frame an - Das
srcAttribut definiert die URL der einzubettenden Seite - Immer ein
titleAttribut einschließen (für Screenreader) - Die Attribute
heightundwidthgeben die Größe des Iframes an - Verwenden Sie
border:none;, um den Rahmen um den Iframe zu entfernen
HTML-Übungen
HTML-Iframe-Tag
| Tag | Description |
|---|---|
| <iframe> | Defines an inline frame |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .