Learn HTML: Framing your Site

Adding Frames

Well, you've learned the most basic codes for HTML, enough to make a pretty decent page. But, people love the navigational freedom of frames. Things are going to get a little more complicated now. Be sure you've mastered the basics of creating and naming a page, as well as linking to other pages.

Frames consist of three pages. frame.html, page2.html and page3.html.
frame.html is the frame set. page2.html is the left side, the side containing the links. page3.html is the right side, the "target" page. You need to create and name these three pages.

First, lets make frame.html. Open a new text document and save it to your folder as frame.html.

Now, create the title bar by typing the head tags:

<HTML>
<HEAD>
<TITLE>type the title of your homepage here</TITLE>
</HEAD>

Now, type the tags for your frameset:

This code seems to be compatible with both Netscape and Internet Explorer. Internet Explore gives you a lot more freedom than Netscape. I've tried several variations of this code, added rows on top and eliminated the grey borders and more, and all of these things worked well with Internet Explorer, but Netscape refused every variation except this one.You're going to want a code that can be seen by both of those browsers, so stick with the one above for now.

To make the Left Column bigger or smaller, vary the 30%,70% to your liking, just make sure the two numbers always add up to 100.

Now, save and open frame.html with your browser. You'll only see a blank frame set for now, but that's ok. After all, you haven't created page2.html or page3.html yet.

Let's tackle page2.html, first. You need to create it using a text editor just as you've been doing all along. Save it, give it a title, etc. When you get to the BODY, you are going to create links with an added target code. The target code will cause the pages to appear in the right hand column and I'm going to show you how to make those links below:

First, this is how your newest page should look so far:

<HTML>
<HEAD>
<TITLE>type any title here</TITLE>
</HEAD>
<BODY BGCOLOR="#insert a color code here" TEXT="#insert a color code here">

You can also choose what colors your links appear as by adding this code to the BODY tag:

LINK="#(insert color code here)" and VLINK="#(insert color code here)" for visited links.

eg: <BODY BGCOLOR="#E9C2A6" TEXT="#2F2F4F" LINK="#FFFFFF" VLINK="#856363">

Now let's add some links. You should already know how to create text and image links, so let's start bossing them around a little. To get the link to send the page to the right column of the frame set, add TARGET="right" to the code.

eg: <A HREF="mypage.html" TARGET="right">My home page</A>

Remeber: When you are done typing all the links you want, be sure to finish the page off by adding </BODY> and </HTML>

Now create page3.html. This page will automatically be loaded by the frameset whenever people view it. It will appear in the right column so make it a pleasant welcome page with information about your site. This will be a great place to tell people about changes and updates you've made. It will be replaced whenever people click a link in the left column, so leave a link for it in the left column so they can call it back whenever they want to.

eg: <A HREF="page3.html" TARGET="right">Opening page</A>

Now, create some great pages of your own that you can link to, or, until you can make some of your own, throw in some links to your favorite sites for now. When you're done editing, don't forget to upload all your new pages to your space on the Internet.

Remember: Your new URL will end in frame.html. (If that's the page you want people to see first. If not, just leave a link to your new framed page on your original home page.)

Back to

Created using WordPad by ~Marie