html frames tutorial how to make frames.

How to make webpages with the use of frames.

HTML Frames Tutorial
How to make webpages using frames

Summary: Frames make it easy to change one page and seeing that change occur over your entire website. But today frames are being slowly phased out for easier to use code such as css, server side includes and dynamic scripting.

Bookmark This Page

How to make frames

When your visiting a site with frames you see the left frame and the right frame . There is also a hidden index page that keeps these two pages in their frames.

The index page tells your frames what to do. It won't have any text or images on it that your visitor can see. Your index page is set up tell your visitor if their browser does not support frames and gives them a link to your main page.

The first step to making a framed page is to make2 regular pages saved as left.html and right.html

left.html is the page that will appear in the left frame.
right.html is the page that will appear in the right frame

Click here to see an example of my left.html

Click here to see an example of my right.html

Then make a page called index.html and insert the html script below. Parts of the script shown in red may be substituted for your own preferences.

<html>
<head>
<title>Your Page</title>
</head>
<frameset cols=160,*>
<frame src="left.html" name="leftside">
<frame src="right.html" name="rightside">
</frameset>
<body>
</body>
<noframes>
<a href="your main page.html">Your browser does not support frames. Click Here to enter my main Page</a>
</noframes>
</html>

In the 5th line, "160" is the width of the first frame (left or top). You can make this any pixel size you want. The second number is replaced with an asterisk. The asterisk tells the right frame to stretch all the way across the screen. This will make your frames compatible with all monitor / resolution sizes.

Click here to see an example of how your frames should look when you view your index.html

How to make a frameset with a top frame

To make a frameset with a top frame, call your two frame pages, top.html and bottom.html
Then change the 6th and 7th lines in the script to :

<frame src="top.html" name="top">
<frame src="bottom.html" name="bottom">

Related Tutorials

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name

web hosting and domain registration

NEW!
Blog for Webmasters

Website Design

Refer A Friend

Your Email
Your Name
Friends Email
Friends Name

Crop, sharpen, make pictures pop.

Picasa helps you edit and add effects to your photos with a few simple clicks.

It is free and takes seconds to install.

Home