Hello. In this tutorial, I will show you how to include iframe inside HTML page. iframe is an HTML element that can display an external document inside HTML page. Check the following links, and notice how the below iframe content gets changed regarding the the link that you click on.
The way we did the previous iframe is simple. In HTML there are <iframe> </iframe> tags that are used to specify the part of the HTML page that will display a different document or source. The first step is to include the <iframe> </iframe> tags like the following code.
The main attributes of the iframe that were used in the previous code are:
Now, let's create a link that will target the iframe we created, and display the content of the targeted link inside the iframe.
Go to Google
The updated code is:
When you clik on the link (Go to Google), the body of the iframe will display Google homepage.
We saw how to use an iframe with links.
One more thing is that you can include more than one iframe in HTML page like the following:
The code for the above iframes is:
Every iframe has a different value for the src attribute.
At this point, I have reached the end of this tutorial, and I hope that you learned something valuable.
The way we did the previous iframe is simple. In HTML there are <iframe> </iframe> tags that are used to specify the part of the HTML page that will display a different document or source. The first step is to include the <iframe> </iframe> tags like the following code.
<iframe width="100%" height="400" src="http://www.google.com" name="new_iframe">
</iframe>
- width: specifies the width of the area that the iframe will occupy
- height: specifies the height of the area that the iframe will occupy
- src: specifies the source of the content inside the iframe that can be text file, image, or different webpage
- name: specifies the name of the iframe that can be used in links to direct to the iframe
Now, let's create a link that will target the iframe we created, and display the content of the targeted link inside the iframe.
Go to Google
The updated code is:
<a href="http://www.google.com" target="new_iframe">Go to Google</a>
<iframe width="100%" height="400" src="" name="new_iframe">
</iframe>
<iframe width="100%" height="400" src="" name="new_iframe">
</iframe>
When you clik on the link (Go to Google), the body of the iframe will display Google homepage.
We saw how to use an iframe with links.
One more thing is that you can include more than one iframe in HTML page like the following:
The code for the above iframes is:
<iframe height="200" src="http://www.google.com" width="100%"></iframe><br/>
<iframe height="200" src="http://www.msn.com" width="100%"></iframe><br/>
<iframe height="200" src="http://www.yahoo.com" width="100%"></iframe><br/>
<iframe height="200" src="http://www.msn.com" width="100%"></iframe><br/>
<iframe height="200" src="http://www.yahoo.com" width="100%"></iframe><br/>
Every iframe has a different value for the src attribute.
At this point, I have reached the end of this tutorial, and I hope that you learned something valuable.
No comments:
Post a Comment