Frameset HTML Tutorial
- Like most HTML elements, "frameset" consists of an opening tag (<frameset>) and a closing tag (</frameset>). In between the two tags are the frames themselves, called by a series of "frame" elements. (Frame elements don't require closing tags, but end each of their tags in "/>" which "self-closes" them.)
Since framesets take over the entire page, they are used as a replacement for the "body" element; you're not allowed to use the "body" element if you're using a frameset.
The following code would feature a page that is split down the middle with two frames, located at frame1.html and frame2.html:
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="50%,50%">
<frame src="frame1.html" />
<frame src="frame2.html" />
</frameset>
</html> - Frameset Example
The above example uses a "cols" attribute in the opening frameset tag to tell the browser how to split up the web page--in this case, into two columns that both take up 50 percent of the page. You can also use a "row" attribute. Used in conjunction, you can easily break your page into grids.
The following code would create the page grid that you can see accompanying this step:
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="30%,70%" rows="15%,30%,45%,10%">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame3.html" />
<frame src="frame4.html" />
<frame src="frame5.html" />
<frame src="frame6.html" />
<frame src="frame7.html" />
<frame src="frame8.html" />
</frameset>
</html>
As you can see, frames are always ordered from left to right and from top to bottom. In other words, the first frame you state will always appear in the top-right corner.
Also remember that you can give each frame whatever file name you want, and place whatever you want in it. For this example, each separate frame file simply had a different bright background color and a paragraph that read "This is frameX.html." - Row and column sizes can be denoted in either percentages, like above, or pixels. In the latter case, you need to simply state a number, as in:
col="300,250"
Since you're never sure how wide or tall a browser window is going to be, you can use an asterisk at the end of your row or column attribute that basically means "everything else." For example, row="400,75,*" would create a top row that is 400 pixels high, a middle row that is 75 pixels high, and a bottom row that takes up whatever space is left.
Finally, in practice, you'll notice that users can actually adjust the size of the frames themselves by clicking and dragging on the frame borders. You can prevent this by adding the "noresize" attribute to each frame:
<frame src="frame1.html" noresize="noresize" />
