top left
The HTML Source Logo


html		 Top Right
    
Getting StartedHow Do I...TroubleShootingPromotionContact Us
html
HTML
SEARCH THE SITE
advanced search

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








































bottom
HTML HTML HTML HTML

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:
left.html
The first one is the left.html, this is the web page that makes up the left frame in the window.		 left.html
right.html
The second one is the right.html, this is the web page that makes up the right frame in the window.		 right.html
index.html
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.		 index.html

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:

<html>
<head>
<title>Your Web Page Title</title>
</head>
<frameset cols=20%,80%>
<frame src="left.html" name="leftside">
<frame src="right.html" name="rightside">
</frameset>
</html>
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 TheHTMlSource.com, INC. All Rights Reserved.


Site hosted by Angelfire.com: Build your free website today!