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.
Now the disadvantages
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>.
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.
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.
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.
Adobe Flash had humble beginnings in a drawing program called SmartSketch before the onset of WWW. This application was ported to Windows and Mac to create animations that could run on web pages. This new product was called FutureSplash Animator. [more...]