Building HTML Frames: An Example

Now you've have a solid background in frame concept. It's time for building a simple and complete frame-based Web page. Using this as an example, you can start building your desired framed Web site.

Example:
Assume that we'd like to create a frame-based Web page with two columns or frames. The left columns or frame is about all neccessary links for whole contents of your Web page. The right columns or frame is for displaying the contents of the left-hand links. So we will have three HTML files:
1. An HTML file for displaying an two-frame Web page: main.html
2. An HTML file for the left frame or column:  menu.html
3. An HTML file for the right frame or column: content.html

Our task now is to create the three above HTML files. You may visit An Introduction to HTML for detailed instructions on how to create an HTML Web page.

1)Create the first main HTML file: main.html

<HTML>
<HEAD>
<TITLE> A Simplest Frame-based Web Page</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%" BORDER="1">
<FRAME SRC="menu.html" NAME="menu"   MARGINWIDTH="5" MARGINHEIGHT = "5" FRAMEBORDER = "NO"  SCROLLING="AUTO">

<FRAME SRC="content.html" NAME="content" MARGINWIDTH = "5"  MARGINHEIGHT="5" FRAMEBORDER ="NO" SCROLLING = "AUTO">
<FRAMESET>
</HTML>

2)Create the HTML file for the left frame: menu.html

<HTML>
<HEAD>
<TITLE>Menu page goes here</TITLE>
</HEAD>
<BODY>
<A href="textfile.html" target="content">Click here and the content of the file textfile.html will be display on the right side.</A>
</BODY>
</HTML>

3)Create the HTML file for the right frame: content.html

<HTML>
<HEAD>
<TITLE>Content  page goes here</TITLE>
</HEAD>
<BODY>
<P>The content of the page goes here
</BODY>
</HTML>

After creating and saving the three above HTML files, open your Web browser, and open the HTML file main.html on the browser. You will see a two-frame Web page. Right now, I guess you know how the frame concept works. It's time for you to work around with your frame projects. Good luck!