Example of HTML Frames
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<frame src="header.html" id="header" name="header" />
<frame src="menu.html" id="menu" name="menu" />
<frame src="body.html" id="body" name="body" />
<frame src="footer.html" id="footer" name="footer" />
Your browser do not support frames. Please upgrade your browser
HTML Frames is a technique to divide the browser window into multiple sections. Each of these sections can load a separate HTML document.
Frameset technique emerged as a solution where the data in only one or two parts of a page needs to be changing and all other remain static. For example in any web page, the page header, navigation bar, footer section and sidebars are static for almost all pages. To avoid unnecessary loading of these parts HTML frames appears to be promising.
You can use HTML frames to divide a browser window into multiple parts. The collection of these frames is known as frameset.
Look at the image above; the gray shaded part is a HTML Frameset that contains 4 frames. The white rectangles, namely, Frame_1, Frame_2, Frame_3 and Frame_4 are the different frames.
Why HTML Frames are not popularly used in webpage designing?
Well, the straight answer is because we got better methods to deal with the problem rather than using Framesets. If we look closer, we can find following drawbacks with using frrames. Nowadays, you are never recommended to use frames in your web pages. Let’s look at some of those disadvantages:
- Incompatible: Many smaller devices can not support frames because their screen is not big enough to divide into multiple parts.
- Inconsistency: Your pages may be displayed differently on different computers because of the various screen resolution. It is virtually impossible to have a uniform look and feel of your webpage.
- Unpredictable Behavior of Back Button: Your users are accustomed of back button in certain way but when you have multiple frames in a page each with different HTML pages, the browser back button may not work as your users expect.
- Browser Support: There are many browsers that do not support frame technology altogether.
How to create frames
Creating frames is very simple. We use <frame> tag to create frames and it takes a few mandatory and optional attributes. We’ll talk about all the attributes we can use in <frame> tag later, but for now lets see some examples:
<frame name="left" src="/static/menu.html">
The above statement creates a frame named left and loads menu.html file.
Note: <frame> tag is nested inside frameset tags.
The name attribute assigns a name for the frame. This name proves useful later when you need to load other HTML documents in this frame. For example the hyperlink
<a href="/static/member_menu.html" target="left">Member's Options</a>
can load the member_menu.html file in the frame named left.
The src attribute specifies which HTML document should be loaded in the frame. It can take any value that is URL. In above example the document menu.html which is inside /static/ folder will load in that frame.
<frame name="left" src="/static/menu.html" frameborder="1">
The frameborder attribute specifies whether to display the frame border or not. The value 1 indicates that the borders should be displayed and 0 to hide them.
There are few other attributes for frame tag. We’ll talk about them after a while.
How to create framesets?
As you know, frameset is the collection of various frames in a page, and, you learned how to create frames in above section. Now, in this section we’ll learn to create framesets.
The tag to create frameset is <frameset> which takes a some attributes to define it properly.
The <frameset > and </frameset> tags encloses <frame> tags.
Let’s see some examples:
Define Frameset to create 3 horizontal frames
<frameset rows="20%, 70%, 10%">
Above example defines a frameset with three horizontal frames. The first frame covers 20% of the screen height, second covers 70% and third one also covers 10% of the screen height.
The rows attribute defines how many horizontal frames you need and the height of each frame. In above example, 20% is the first value of rows attribute, and thus it is the height for first frame. 70% is the second value for rows attribute, so it specifies the height for second frame of the set. Finally, 10% is the third value of rows attribute and it tells the height for third frame.
If you need four horizontal frames you’d compose frameset tag as follows:
<frameset rows="15%, 60%, 15%, 10%">
The values of rows attributes can be in percentage or in pixels or you can use wildcard characters. There are some different methods to specify the row height of frames that we’ll discuss after some time.
Define Frameset to create 3 vertical frames
You learned how to create horizontal frames. It was rows that tells how many and how large the horizontal frames should be, wasn’t it?
Now for vertical frames, the attribute we need to use is cols! Let’s look at following example:
<frameset cols="10%, 80%, 10%">
Because there are three values for cols attribute, it will create 3 columns, i.e. three vertical frames! The width of frames is controlled by those values of cols. In above example example, the first and third frame will occupy 10% of screen width and the second frame will cover 80%.
Attributes of Frameset tag
Following are the different attributes you can use to specify the settings for Frameset tag to better fulfill your requirement.
Cols attribute: Specifies the number of columns (vertical frames) and width of each frame. You can specify absolute value in pixel such as cols=”100, 500,100″ or a percentage of the browser window like, cols=”20%, 70%,10%”; use wildcard symbol such as cols=”15%,*,10%”, or finally the relative widths like cols=”3*,2*,1*”
Rows attribute: specifies the number of rows (horizontal frames) and height of each frame. You can specify the height of each frames exactly as explained above for vertical frames.
Border attribute: This attribute specifies the width of the border for each frame in pixel. For example border=”3″ will display border of 3 pixels for each frames. A value of Zero means no border.
Frameborder attribute: whether to display or not a three dimensional border between frames. The value 1 enables the 3D border while 0 turns them off.
Framespacing attribute: Framespacing attribute of <frameset> tag indicates the gap between frames. For example framespacing=”15″ will place a 15 pixel gap between frames.
Attributes of Frame tag
Src attribute: tells which document should be loaded in frame. It can take any URL as value.
Name attribute: This attribute is used to name a frame. This name is useful to indicate which frame a document should be loaded into.
Frameborder attribute: You can enable or disable the frame border using this attribute. If frameborder attribute is set in <frameset> tag, it will override that value.
marginwidth attribute: It allows you to specify the width of the margin between vertical frames.
marginheight attribute: This attribute specifies the height of margin between horizontal frames.
noresize attribute: Frames are resizable by default. That means you can click and drag to change the size of frames. You can use this attribute to restrict users from resizing the frames you’ve defined. For example noresize=”noresize”.
scrolling attribute: Scrolling=”yes” or scrolling=”no” can determine whether to display or not the scrolling bars on frames.
What happens if browser does not support Frames?
As we already discussed, all browsers may not support frames. In such situations, your page may turn blank for those visitors. Though we could not display the content on those browsers, it is good idea to inform the visitors that it is their browser issue.
We have <noframes> </noframes> tags for such browsers. The messages like “Your browser does not support frames. Please upgrade your browser” can be placed between those <noframes> and </noframes> tags.