Web Info and IT Lessons Blog...

Saturday 11 October 2014

Iframe tag in html

The previous lesson of html lessons series was about 3 column layout of a web page. In this lesson we will learn to use the iframe tag in html.

iframe or an inline frame is used to include another document in our current Html document.

iframe

How to include an iframe in a web page?

We can include an iframe of another web page in our web page by using the iframe tag (<iframe></iframe>). The src attribute of the iframe tag is used to specify the web address (url) of the page whose iframe we want include in our web page. For example: if we want to include the iframe of bol.com in our web page, this is how we can do it:


<iframe src="http://www.bol.com/"></iframe>



Note: You may not be able to include iframes of all websites because of the restrictions imposed by the owner of the website.

You may notice that the iframe we included above has default scrolling and default dimensions. The reason is that if we do not specify any dimensions and scrolling attributes of the iframe, it will take the default values. To specify different dimensions of the iframe, we can use the width and height attributes i.e


<iframe src="http://www.bol.com/" width="500" height="300"></iframe>



To remove the scrolling of the iframe we can use the scrolling attribute i.e

<iframe src="http://www.bol.com/" width="500" height="300" scrolling="no"></iframe>



For the default value of scrolling set the scrolling attribute to auto i.e scrolling="auto".

When do we use iframes mostly?

The correct use of iframes is not to embed a whole web page into another but they can be used to include a part of a web page into another. iframes are mostly used by video sharing sites like youtube, dailymotion etc. Video sharing web sites provides iframes of their videos which can be included by anyone to display their videos. iframes can also be used to include pdf documents etc.

Related Posts
Basics of Html
Html Text Tags
Html Image and Anchor Tags
Html Form Elements
Html Tables
Row and Column Span in html
Simple 2 column layout of a web page
3 column layout of a web page

No comments:

Post a Comment