HTML eingebettete HTML-Seite

Einführung

Das <iframe>-Tag wird verwendet, um eine Webseite in eine andere Webseite einzubetten. In diesem Lab werden Sie lernen, wie Sie das <iframe>-Tag verwenden, um eine andere Webseite innerhalb Ihrer aktuellen Webseite anzuzeigen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Hinzufügen des <iframe>-Tags zu Ihrer HTML-Datei

Um ein <iframe> zu Ihrer HTML-Datei hinzuzufügen, müssen Sie die öffnenden und schließenden <iframe>-Tags verwenden und das src-Attribut hinzufügen, das die URL der anzuzeigenden Webseite angibt. Hier ist ein Beispiel für ein <iframe>-Tag:

<iframe src="https://www.example.com"></iframe>

Einstellen der Höhe und Breite des <iframe>

Sie können die height- und width-Attribute verwenden, um die Größe des <iframe> nach Ihren Anforderungen anzupassen. Die height- und width-Attribute nehmen Werte in Pixeln, Prozent oder Em an. Hier ist ein Beispiel:

<iframe src="https://www.example.com" height="500" width="500"></iframe>

Steuerung von Anzeige-Features mit den Attributen sandbox und allow

Sie können die Attribute sandbox und allow verwenden, um verschiedene Features des <iframe> zu steuern, wie z. B. das Erlauben der Vollbildanzeige und das Aktivieren der Skriptausführung innerhalb des <iframe>. Hier ist ein Beispiel:

<iframe
  src="https://www.example.com"
  sandbox="allow-modals allow-forms"
></iframe>

Verwenden von alternativen Inhalten

Es wird empfohlen, <iframe>-Tags mit einem alternativen Inhalt zu verwenden, der angezeigt werden soll, wenn der Browser keine Inline-Frames unterstützt. Sie können den alternativen Text zwischen den öffnenden und schließenden <iframe>-Tags hinzufügen, der dann angezeigt wird, wenn das <iframe>-Tag nicht unterstützt wird. Hier ist ein Beispiel:

<iframe src="https://www.example.com" height="500" width="500"
  >Ihr Browser unterstützt keine Inline-Frames.</iframe
>

Zusammenfassung

Herzlichen Glückwunsch! Sie haben gelernt, wie Sie das <iframe>-Tag verwenden, um eine andere Webseite innerhalb Ihrer aktuellen Webseite anzuzeigen. Denken Sie daran, das src-Attribut auf die URL der Webseite zu setzen, die Sie anzeigen möchten, und verwenden Sie die height- und width-Attribute, um die Anzeige nach Ihren Anforderungen anzupassen. Sie können auch die Attribute sandbox und allow verwenden, um verschiedene Features des <iframe> zu steuern. Darüber hinaus sollten Sie sicher sein, dass Sie alternativen Inhalt für Browser hinzufügen, die das <iframe>-Tag nicht unterstützen.