This tutorial will take you through the steps to create a web page with two frames: a narrow left margin “navigation” frame, and a wider right “main” frame. You can then take what you learned to build the frameset you want for your site.
Step 1: Open Your Page in a Text Editor
Open your favorite text editor, or text-based HTML editor to a blank page. Save this page as
Step 2: Add the Correct DOCTYPE
HTML frames use a different DOCTYPE from standard HTML pages. Framesets also don't use the body tag, but you should still have a head with a title, so type in the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<title>My First Framed Page</title>
Step 3: Determine the Number of Frames on the Page
The first thing to do when creating a framed web page is to decide how many frames you want, where they will be located, and their size. As I said above, this page will have two frames in two columns. The left frame will be narrow, around 200 pixels, and the right frame will take up the rest of the page.
To do this, you will need a frameset with two columns. Frames are defined from left to right and top to bottom. So two columns would be defined as:
The cols attribute indicates that you want your frames in columns. The first column will be
200 pixels wide and the second will be
* pixels wide. The
* quality tells the browser to use the rest of the space for that pane.
One thing you should notice is that the HTML does not have a
BODY element. This is correct. If you write a framed web page, you should not include the
BODY element, only the
Step 4: Point at the Frame Web Pages
Once you've decided on your frames, you need to tell the browser where to find them. It's a good idea to name the pages in relation to how they fit in the frameset. Here are your two frames:
Step 5: Write the Noframes Section
Thank you for visiting my First Framed Page. Since your browser doesn't support frames, you will need to go <a href="main.html">directly to my main page</a>.
Step 6: Close the Frameset
All you need now is to close the frameset and the HTML page:
Then you are done with the first part of building a framed web page.