HTML frames are a way to make more intricate web pages. But you should be aware that HTML frames are obsolete in the HTML5 specification. They are only in HTML 4.01.
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 index.html.
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">;
<html>
<head>
<title>My First Framed Page</title>
</head>
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:
<frameset cols="200,*">
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 FRAMESET element.
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:
<frame src="navigation.html">
<frame src="main.html">
Step 5: Write the Noframes Section
Finally, you should have a noframes section so that your site is accessible. I like to link to the primary page of the site in my noframes area:
<noframes>
<p>
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>.
</p>
</noframes>
Step 6: Close the Frameset
All you need now is to close the frameset and the HTML page:
</frameset>
</html>
Then you are done with the first part of building a framed web page.
