This is accomplished with the <FRAMESET> tag. For example, if you wanted a web page to have 2 frames, it would involve the use of, not 2, but 3 web page (HTML) documents: the page that will go in the first frame, the page that will go in the second frame, and a third page called the top-level document. The top-level document is the one which contains the <FRAMESET> tag and defines how the frames will be set up. <FRAMESET> is used in place of the <BODY> tag. Here is an example top-level document called "top.html":
<HTML> <FRAMESET ROWS="70%,*"> <FRAME SRC="ex1_top.html"> <FRAME SRC="ex1_bottom.html"> </FRAMESET> </HTML>A single <FRAMESET> tag will divide a web page into two sections. The <FRAMESET> tag above uses the attribute ROWS which says that the page will be divided horizontally (into two rows.) Alternatively, one could use the attribute COLS which would divide the page vertically (into two columns.) The "70%,*" means that the first frame will take up 70% of the browser window, and the * means that the second frame will take up the remaining space (30%). You can change the percentage to whatever you want.
The next new tag is the <FRAME> tag. <FRAME> specifies the web pages which get loaded into the two newly created frames by using the SRC (source) attribute. The first (top) frame will have the file "ex1_top.html" loaded into it, and the second (bottom) frame will have the file "ex1_bottom.html" loaded into it. One <FRAME> tag is required for each frame you have. Let's actually load top.html to see how it looks. If you wish, you can take a look at the individual web pages in the frames as well: ex1_top.html and ex1_bottom.html (though you normally wouldn't load these directly if you were using frames.)
First, we'll set up our top-level document. This time we'll use COLS instead of ROWS to make two vertical sections. We'll also give names to our frames. We'll need these later so that the links in the menu will know which frame to load the pages into:
<HTML> <FRAMESET ROWS="20%,*"> <FRAME SRC="menu.html" name="left"> <FRAME SRC="home.html" name="right"> </FRAMESET> </HTML>
The names of the frames are made up by you. I've named my two frames left and right. "home.html", along with "personal.html" and "work.html", are the names of the web pages which can be loaded into the right frame via the menu frame. These three pages were created normally. All that is left to do is to create the menu web page, called "menu.html", which will contain the links to these three pages. We use standard anchor tags for the links, but include the target attribute, which will tell the link which frame to load the page into. "menu.html" looks like this:
<HTML> <BODY> <a href="home.html" target="right">Home</a> <a href="personal.html" target="right">Personal</a> <a href="work.html" target="right">Work</a> <P> <a href="../frames.html" target="_top">Back to tutorial</a> </BODY> </HTML>
By using target="right" in the first three links, we indicate that we want those pages loaded into the frame we named "right" back in the top-level document. The last link, which exits the example, uses target="_top". "_top" is a reserved word which tells the browser to load the new page in the full browser window, without frames. This is the standard way to leave the frame format. Note that the underscore before top is mandatory.