Monday, 10 April 2017

Creating Frames in HTML

HTML Frames: HTML FRAMES are used to divide your browser window into different sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. the window is divided into frames in a similar way the tables are organized into rows and columns.
Frames are useful as sometimes you may to display another web page at the same time. thus can be easily done by dividing the screen into small sections where each can be used for a separate webpage.


Frameset Tag:
                   To use frames on a page we use < frameset > tag instead of < body > tag. the < frameset > tag defines how to divide the window into frames. the rows attribute of < frameset >tag defines horizontal frames and cols attribute defines vertical frames. the < frame > tag define which HTML document shall open in the frame.

For Example : To create three frames, we first need to create three different web pages to be displayed as given below:

Frame1.html

<html>
<head>
<title>first frame</title>
</head>
<body bgcolor="green">
<h1>frame 1</h1>
</body>
</html>

Frame2.html

<html>
<head>
<title>Second frame</title>
</head>
<body bgcolor="yellow">
<h1>frame 2</h1>
</body>
</html>

main.html

<html>
<head>
<title>first frame</title>
</head>
<body bgcolor="pink">
<h1>Main page</h1>
</body>
</html>

Frame tag:
                The < frame > tag defines what we should display in each frame. it is an empty tag. Now lets see how we can use these tags in different ways to create the frames in our webpage.

<html>
<head>
<title>frameset</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html">
<frame src="main.html">
<frame src="frame2.html">
</frameset>
</html>

The output can be seen below. we have three vertical frames as we have used the cols attribute. we divided the web page by defining the width of each frame in percent. so the first and last column each take up 25% of browser screen, while the middle one takes up 50%.




No comments:

Post a Comment