You would surely have come across sites in which one part of the page scrolls while the other stays put. This is achieved with frames. Frames divided a browser window into smaller windowpanes. Each of these smaller windows contains a HTML page. Thus, you have two or more HTML documents being loaded into one browser window.
Netscape introduced frames with version 2.0 of their browser. Web developers took up this new technology with much zeal and several framed websites suddenly appeared on the Internet, only to be removed as quickly. This was because of the many problems associated with frames. The sites using frames were difficult to bookmark, the back button of the browser did not work well with frames, and framed sites could not be printed.
All these problems have been sorted out now (sort of!) and frames have come under the HTML 4.0 standard. Let us look at frames in more detail.
A framed page consists of two or more HTML documents. Since each document is a separate entity with its own URL, it behaves independently of the others. Thus, scrolling or reloading of one document will not result in equivalent behavior in the others.
Here are a few advantages of using frames on your site.
- Frames prove to be an excellent navigational tool if used properly. Thus, one frame can be reserved for the navigational links, while the other may be dedicated for displaying the actual content.
- Site maintenance is relatively easier with frames. Suppose, you want to add another major section to your web site, you need to change only the navigational frame that contains the links.
- With frames, you can display contents of other web sites without letting your users leave your site. For example, you may display your logo and navigation links in one frame and load the pages of other web sites in another frame. (Note: If you plan to display your branding with pages from other web sites, be sure to take their permission).
- With <NOFRAMES> tag you can add alternative content for browsers which do not support the <FRAMES> tag.
- In the context of a two framed document with one page containing high quality (and thus large) navigation buttons and the other, the main content, display of content may be faster after the initial downloading. This is because only the frame containing the main content is changed; the navigational frame with its large graphics is not loaded again.
Now the disadvantages
- Framed sites are not indexed well by search engines. Further more, results of search engine might have your document displayed out of its frameset. You shall thus lose the navigational or other aspects which you so meticulously developed.
- Users cannot bookmark individual pages. This issue can be solve by first checking the properties of the page in question (right clicking on that frame) and opening it in another browser window. This is all good for the visitor but a nightmare for the developer who loses his navigational frame since the visitor bookmarks only the frame containing the main content.
- Frames are not supported by older browsers.
- Designing good-looking sites with continuity amongst various frames of a page is challenging.
Enough theory… let’s get down to the real thing
We shall look at a simple example of a two framed document (check image below). The left (pink colored) frame is the one that contains navigational links and the other (the blue one) displays the content. The latter changes whenever a link is clicked on the navigational frame. Also the navigational frame takes only 20% of space, the rest occupied by the main frame.
This framed document consists of two HTML files. The left frame loads menu.html while the right, main.html. The entire document is itself placed in another file, frames.html. The HTML code for frames.html is:
<HTML> <HEAD><TITLE>My first framed page</TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="menu.html"> <FRAME SRC="main.html"> </FRAMESET> <NOFRAMES> There is no frame support on your browser. </NOFRAMES> </HTML>
We come across three new tags here, <FRAMESET>, <FRAME> and <NOFRAMES>.
<FRAMESET>
The <FRAMESET> tags enclose <FRAME> tags, 2 in our case. The <FRAMESET> informs the browser that the document contains frames. The COLS attribute of this tag tells the browser to display the frames in columns. Value of this attribute might confuse you initially but it’s actually quite simple; it determines the amount of space allocated for each of the two frames. The first frame shall occupy 20% of the vertical window area while the other occupies 80%. We’ll come across more attributes of this in the coming sessions.
<FRAME>
This tag is quite similar to <IMG>. The only required attribute of this tag is SRC that specifies the document to be loaded in the frame.
<NOFRAMES>
As mentioned before, some old browsers do not support frames. This tag displays alternate content for such browsers. You can put any kind of HTML code (links et. al.) to help the users of non-frame browsers. Though the percentage of such browsers is negligible, it’s still a good HTML practice to include these tags.
