HTML frames divide the browser window into panes into which separate HTML documents can be loaded.
A common use is a 3 frame layout with a top frame to hold the logo, a left frame to hold the navigation and a right frame to hold page content. The idea is that only the content frame need be reloaded to display each page.
But frames have problems.
Because each frame is held within a frameset structure, it's the frameset URL that gets bookmarked which doesn't take the user to the actual frame they last viewed.
Search engines list the content frames as pages that are then viewed without the navigation frame.
If you print the page from the browser you'll get a print of whichever frame is in focus - which may not be the content frame.
Scrollbars on every frame not only look terrible but are also bad for usability. You can hide the scrollbars but then you have to make sure that all the content will be visible on the lowest screen resolution.
If you still want to implement frames after all that then here's how. First a frameset is created which defines the number of frames and their positions within the frameset. Second each frame is created to hold an HTML document.
The <frameset> Element
The <frameset> element is a container that holds the <frame> elements and defines their behaviour. The <frameset> element has a closing tag and must be the first element after the <head> element.
The <body> element should not appear in the frameset document unless a <noframes> element is used (to display content to browsers that don't support frames).
The Basic Structure of a Frameset
<html>
<head>
</head>
<frameset>
<frame>
<frame>
<frame>
<!- Optional noframes section -->
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
<!- End of optional noframes section -->
</frameset>
</html>
The <frameset> element has three main attributes.
The cols attribute defines the number and size of columns that will appear in the browser window. It takes the form cols="column_list" where "column_list" is a string containing the width of each column expressed in pixels, as a ratio or as a percentage of the browser window.
When defining in pixels, because the resolution of the display screen is unknown, an asterisk can be used in place of a value to tell the browser to apportion the remaining width to that frame. (asterisk can also be used with percentage and ratio).
e.g. cols="100,200,*" produces a three column layout with the first frame 100 pixels wide, the second frame 200 pixels wide and the third frame the width of whatever is left over.
When defining in percentages the asterisk can also be used.
cols="20%,*,*" produces a three column layout with the first column 20% of the width of the browser window and the remaining 80% divided equally between the second and third column.
The asterisk is used when defining the frameset in ratios of browser window width.
e.g. cols="1*,4*,1*" produces a three column layout with the first column 1 sixth of the browser window width, the second column 4 sixths (2 thirds) and the third column 1 sixth.
The rows attribute defines the number and height of the rows that will appear in the browser window. It takes the form rows="rows_list" where "rows_list" is a string containing the height of each row expressed in pixels, as a ratio or as a percentage of the browser window. This is same way as with the cols attribute.
The class attribute tells the browser to render the frameset in a named style and takes the form <frameset class="my_frameset_style"> where "my_frameset_style" is a previously defined style.