Iframes in HTML sind nichts anderes als Inline-Frames, die als HTML-Dokument verwendet werden, um ein weiteres HTML-Dokument hinzuzufügen. Es wird hauptsächlich in Webseiten oder Webentwicklungsprozessen verwendet, um andere Inhalte über eine andere Quelle einzubinden, beispielsweise Werbung auf dieser Webseite.
Die meisten Webdesigner verwenden Iframe, um interaktive Anwendungen auf der Website oder Webseiten zu präsentieren. Dies wird durch die Verwendung von JavaScript oder dem Zielattribut in HTML ermöglicht.
Der Hauptzweck eines Iframes besteht darin, eine Webseite innerhalb einer anderen anzuzeigen. Der Inline-Frame sollte mit einem Tag namens
Syntax
<iframe src ="URL"></iframe>
Beispiel:
<iframe src ="www.educba.com" ></iframe>
<iframe src ="URL" height="value" width="value"></iframe>
Beispiel:
<iframe src ="www.educba.com" height="300" width="300"></iframe>
<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>
Beispiel:
<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
<iframe src ="URL" style="border : none;"></iframe>
Der Iframe kann als Ziel für einen Link verwendet werden, indem die Syntax verwendet wird:
<iframe src ="URL" name="iframe_a"></iframe>
Beispiel:
<iframe src ="www.educba.com" name="iframe_a"></iframe>
In Iframes werden verschiedene Attribut-Tags verwendet. Diese lauten wie folgt:
Hier sind einige Beispiele für Iframes in HTML, die im Folgenden erläutert werden:
Betrachten wir ein Beispiel, in dem wir zeigen, wie man einen Iframe mit einer bestimmten Höhe und Breite erstellt.
Code:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe> </body> </html>
Ausgabe:
Betrachten wir ein weiteres Beispiel, in dem wir zeigen, wie man einen Iframe mit einer bestimmten Höhe und Breite erstellt. Aber in diesem Beispiel geben wir Höhe und Breite über CSS an. Hier können wir sehen, dass die Bildlaufleiste je nach Inhaltsgröße angepasst wird.
Code:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe> </body> </html>
Ausgabe:
Here we are considering one example in which we will add a border to the iframe by adding some extra CSS properties to show a change in the border’s size, change in the border color, etc. So we can add as much style to our iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p> <iframe src="C:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe> </body> </html>
Output:
Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>Iframe Demo- Target for a Link</h2> <iframe height="200px" width="100%" src="C:\Users\Sonali\Desktop\iframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html>
Output:
Target Output:
As shown above, for example, we can click on the target link EDUCBA so that it will open the following web page shown below.
An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.
Das obige ist der detaillierte Inhalt vonIframes in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!