top left
The HTML Source Logo

Top Right
 Getting StartedHow Do I...TroubleShootingPromotionContact Us
advanced search

Getting Started
HTML Cheat Sheet
Webmaster Tools
HTML Help Forum
Color Codes
Link to us


How to make a basic frame

They key to creating frames, is understanding how they work. Once you have that down, its pretty simple.

A basic framed page is made up of 3 separate web pages:
The first one is the left.html, this is the web page that makes up the left frame in the window.
The second one is the right.html, this is the web page that makes up the right frame in the window.
The last one is the index.html, this is where all the magic happens, this is the page that puts the first to pages together.

When you put them all together, you get a framed page, like this:

frame example

Lets get started:

Your first step is to create your left.html and right.html pages. These are 2 normal web pages, and you can put anything you want on them. Usually the left.html is the one with the links, or navigational menu, and the right.html is your main web page.

The next step is putting these 2 web pages into a single window. We do this with the index.html. The index.html does not have any text, images, or anything else that you can see, all this page does is put the 2 web pages into a single window.

To create an index.html, you first have to create a new web page, and name it, yea you guessed it, index.html.

In your index.html place the following code:

<title>Your Web Page Title</title>
<frameset cols=20%,80%>
<frame src="left.html" name="leftside">
<frame src="right.html" name="rightside">
Now its just a matter of editing this code to fit your web page. You can edit everything that is in BOLD print.

cols in the above code stands for columns. The web page we are creating is made up of 2 columns, a left one, and a right one. The 2 percentages after that (20%,80%) are the percentages of the browser window each column will take up. Meaning, the left.html will take up 20% of the window, and the right.html will take up 80% of the window. You can change these to what you think looks best.

You can also use the word rows in place of the word cols. This will make the frames horizontal, instead of vertical.

Now you have to name your frames, in the above code, left.html is named leftside and the right.html is named rightside. You can edit these to whatever you want.

When all of this is done, place all of these page into the same directory, and view your index.html page. Your frames should look like this:

Click here to see an example

Company   |   Careers   |   Partners   |   Advertising   |   Help
Privacy Policy   |   Trademark Notices   |   User Agreement
2001, INC. All Rights Reserved.

Site hosted by Build your free website today!