Home / HTML / Examples of Different Frames

Examples of Different Frames

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
 
Example:
This example will display empty frames.
 
<html>
<frameset rows=”20%,50%,30%”>
<frame>
<frame>
<frame>
</frameset>
<head>
<title> Frames</title>
</head>
</html>
 
 
so now lets do some Practical.
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
 
Example:
This example will display three frames with different pages.
 
<html>
<frameset rows=”20%,50%,30%”>
<frame src=”c:\html\list_tags.html” name=”frame1″ noresize=”noresize”>
<frame src=”c:\html\basic.html” name=”frame2″ >
<frame src=”c:\html\link_media.html” name=”frame3″ >
</frameset>
<head>
<title> Frames</title>
</head>
</html>
 
Page in browser will look like:
 
 
Note:
You do not have to worry if the second example does not display the any page in the frames. It is because path of file defined in the src attributes of the <frame> tag does not exist or files in the directory c:\html does not exists.
 
How To Create Vertical Frames
To create such type of vertical frames you do not have to do much more just write “cols” in place of “rows” in the <frameset> tag.
 
Example:
<frameset cols=”20%,50%,30%”>
also test them in the browser.
 
Example:
This example will display three frames with different pages.
<frameset cols=”20%,50%,30%”>
<frame src=”c:\html\list_tags.html” name=”frame1″ noresize=”noresize”>
<frame src=”c:\html\basic.html” name=”frame2″ >
<frame src=”c:\html\link_media.html” name=”frame3″>
</frameset>
<head>
<title> Frames</title>
</head>
</html>
 
Page in browser will look like:
 
 
 
How To Create Mixed Frames
To create the mixed frames, concept of nesting is used, in mixed frames we use the nesting of <frameset>. See how nesting of <frameset> is done
 
Example:
<html>
<frameset cols=”20%,80%”>
<frame src=”c:\html\list_tags.html” name=”frame1″>
<frameset rows=”20%,80%”>
<frame src=”c:\html\link_media.html” name=”frame2″>
<frame src=”c:\html\basic.html” name=”frame3″>
</frameset>
</frameset>
</html>
 
Page in browser will Look Like:
 
 
 
In this example you see how first <frameset> tag divides the browser into two frames i.e. of 20% and 80%. then first frame1 is defined but the second frame is again divided into the two new horizontal frames using the second <frameset> tag of inside the first <frameset> tag.
so now lets do some Practical.
 
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
 
Note:
You do not have to worry if the second example does not display the any page in the frames. It is because path of file defined in the src attributes of the <frame> tag does not exist or files in the directory c:\html does not exists.
 
Click here! to see the Animation of how to create different types of frames.
 
 
How to Create Inline Frame
Inline frames are created using the <iframe> tag. This tag is used inside the body of the HTML file.
So lets have an example:
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks:
 
Example:
<html>
<body>
<iframe src=”c:\html\list_tags.html”></iframe>
<p>Some older browsers don’t support iframes.</p>
<p>If they don’t, the iframe will not be visible.</p>
</body>
</html>
 
Page in browser will Look Like:
 
 
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.