 |
| HTML and CSS tutorial for beginners in English |
In our previous lesson we saw how to display a table in a web page.
Today we will study what is HTML <iframe> and how it works.
HTML iframe tag
<iframe> tag is used to display another web page in a web page. We can embed second web page in our web page. Iframe is inline frame. Its syntax is<iframe src=“urlname of web page to be embeded" width="500" height="300" ></iframe>
This tag has attributes "src", "width"and "height". We already know what these attributes do. "src" attribute is used to specify the name of web page which we are going to embed in the web page. Width and height specify the dimensions in which this web page will be displayed in the web page.
Let us write a script using <iframe>,
Open a new Notepad file. In this file copy text from first line of lesson-16 to <body> tag.
Under this write an h3 element as follows:
<h3>
In this lesson we have have learned how to embed another web page in our web page. We have embedded our web page from lesson-09. We have shown it in two different sizes to get more clear idea.
</h3>
Now write following line:
<iframe src= "Lesson-09-Inserting images.html" height=500 width=700>
</iframe>
<iframe src= "Lesson-09-Inserting images.html" height=400 width=300>
We have renamed our "Lesson-09.html" as "Lesson-09-Inserting images.html" only for our convenience.
Save this file as "Lesson-17" and "Lesson-17.html". See following figure. Click on figure shown below for PDF file of source code.
 |
| Figure 17-1 HTML iframe tag, display another page in a web page |
Now double click on HTML document and see the output. Output of Lesson-09 is embedded in our web page.
 |
| Figure 17-2 HTML iframe, display anther web page in a web page |
We have embedded this web page in two sizes, so that we can understand the concept more clearly.
Note that: "Lesson-17" and "Lesson-09-Inserting images.html" are in the same folder. Therefore we have just mentioned name of web page to be embedded in <iframe> tag. If these two files are in different folders then we need to specify path of embedded file. If embedded page is from some other website then we should specify the url of that page.
Important Points:
1. <iframe> is used to display another web page in a web page.2. We give name of embedded web page in "src" attribute. We need to mention path of file which contains web page or url appropriately.
3. We should always specify "width" and "height" in which embedded page is displayed so that web browser can display this page appropriately.
Lesson-16 Lesson-18
