Please read Chapter Six about Frames

Web Page Design and Layout

 

The third technique for layout is to use frames. Frames can be used to divide a webpage into different regions, each displaying the content of a different source document.

Frames are best used to display a table of content at all times.

The layout document uses two new elements: frameset and frame. The document must have the right Document Type Declarations (DTD) preceding the <html> tag. The frameset is used to specify how to divide a page into frames. 
<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www/w3/org/TR/xhtml/11/DTD/xhtml1-frameset.dtd">
<html>
<head>
</head>
<frameset rows="25%, 45%, 30%">
</frameset>
</html>
The above frameset element divides the window into three rows, the first having the height of 25% of the window, the second having a height of 45%, and the third having a height of 30%. We can also specify pixels instead of percentages, for example:

<frameset cols="80, *, 80">

where the first column is 80 pixels wide, the third column also 80 pixels wide, and the second column having a width of whatever is left of the overall window width after 160 pixels have been subtracted. The <frame> element is used to specify the content to be filled into the frame structure. 

<frameset cols="40%, 60%">
<frame id="leftframe" src="WelcomePage.htm"/>
<frame id="rightframe" src="ContentList.htm"/>
</frameset>
The above frameset defines two columns. The two frame elements specify the content of the two columns. The id attribute gives a name to a frame. We can then link to this frame using this id as follows:

<a href="Doc1.htm target="rightframe"> click here to view document </a>

The target attribute tells the browser to display the document Doc1.htm inside the frame named rightframe.

Note: For some browser you need to use 'name' rather than 'id' to display a document inside a named frame. Otherwise a new window is opened to display the document.