Iframes in HTML are nothing but inline frames used as an HTML document to add another HTML document into it. It’s mostly used in web pages or web development processes to include other content through another source like advertisements on that webpage.
Most web designers use Iframe to present interactive applications on the website or web pages. It’s made possible using JavaScript or the target attribute in HTML.
The main purpose of an Iframe is to display a web page within another. The inline frame should be displayed using a tag called
Syntax
<iframe src ="URL"></iframe>
Example:
<iframe src ="www.educba.com" ></iframe>
<iframe src ="URL" height="value" width="value"></iframe>
Example:
<iframe src ="www.educba.com" height="300" width="300"></iframe>
<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>
Example:
<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
<iframe src ="URL" style="border : none;"></iframe>
The iframe can be used as Target for a link by using the syntax:
<iframe src ="URL" name="iframe_a"></iframe>
Example:
<iframe src ="www.educba.com" name="iframe_a"></iframe>
There are different attribute tags used in Iframes. Those are as follows:
Here are some examples of Iframes in HTML, which are explained below:
Let’s consider one example where we will show how to create an iframe with a specific height and width.
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>
Output:
Let’s consider another example where we will show how to create an iframe with a specific height and width. But in this example, we are specifying height and width through CSS. Here we can see the scroll bar is being adjusted per content size.
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>
Output:
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.
The above is the detailed content of Iframes in HTML. For more information, please follow other related articles on the PHP Chinese website!