Custom Search

HTML Lesson 6

by Caroline Seawright

 

Here's HTML Lesson 6! If you've missed out, here is HTML Lesson 1 and HTML Lesson 2 and HTML Lesson 3 and HTML Lesson 4 and HTML Lesson 5 (don't worry - they will open in new windows, so you won't lose your place!)

It's time from another HTML lesson! This time, we will be exploring frames (by request - this one's for you, Rob!)

Frames aren't the easiest things in the world to do, and are somewhat complex, but we'll see how we can make it easier for you...

As a caution, people tend to dislike frames. Most people want only one page - they find frames either annoying or too much to bother with! (Especially when people are using frames within frames within frames!) My personal site uses one frameset, and people still think that's too much!!

Anyway, on to the lesson!

You can look at my person site (http://www.thekeep.org/~kunoichi/) to see frames in action!

Vertical frameset

<html>
<head>
<title>Frameset Title</title>
</head>
<frameset rows="106,*" frameborder="no" border=0>
    <frame src="top_page.html" name="top" scrolling="no" marginheight=0 marginwidth=0 noresize="yes">
    <frame src="bottom_page.html" name="bottom" scrolling="auto" marginheight=0 marginwidth=0 noresize="yes">
</frameset>
<noframes>
<body bgcolor="#ffffff">
Sorry, your site doesn't use frames, but here are the other pages so you can navigate my site:
<p>
<a href="top_page.html">Top Page</a><br>
<a href="bottom_page.html">Bottom Page</a>
</body>
</noframes>
</html>

Notice how you will have to make up three pages? I'd call the frameset caroline.html, in this case. The other two pages (frames) I'd have to make would be top_page.html and bottom_page.html. These two pages are done just like any other normal HTML page.

Rows and Cols

But see how we've set the height of the rows (or cols) to 106,*? These settings can be any number you like... (The numbers are pixel heights, in this case.) You don't have to have the attribute one as a number - the second one could be the number, and the first a *! The * is a wildcard - We don't know how tall everyone's screen will be, so we don't assign a number to it... we just use the *!

Frameborder and Border

Frameborder can be "yes" or "no", but this is only used in conjunction with border. If border is anything more than 0, you'll be able to see the changes that frameborder makes.

Horizontal Frameset

This is similar to the vertical frameset:

<html>
<head>
<title>Frameset Title</title>
</head>
<frameset cols="106,*" frameborder="no" border=0>
    <frame src="left_page.html" name="left" scrolling="no" marginheight=0 marginwidth=0 noresize="yes">
    <frame src="right_page.html" name="right" scrolling="auto" marginheight=0 marginwidth=0 noresize="yes">
</frameset>
<noframes>
<body bgcolor="#ffffff">
Sorry, your site doesn't use frames, but here are the other pages so you can navigate my site:
<p>
<a href="left_page.html">Left Page</a><br>
<a href="right_page.html">Right Page</a>
</body>
</noframes>
</html>

Make a couple of pages, and link them with framesets. Try making both framesets, and linking one frameset through the original one! For instance, save the original frameset code as caroline.html, and the second one as bottom_page.html ... then make the other three pages as normal HTML pages!

Extra Frames in One Frameset

Try adding a third frame to one of your frameset and see what happens!

If you're unsure of what I mean, here is an example:

<html>
<head>
<title>Frameset Title</title>
</head>
<frameset cols="106,*,106" frameborder="no" border=0>
    <frame src="left_page.html" name="left" scrolling="no" marginheight=0 marginwidth=0 noresize="yes">
    <frame src="middle_page.html" name="middle" scrolling="auto" marginheight=0 marginwidth=0 noresize="yes">
    <frame src="right_page.html" name="right" scrolling="no" marginheight=0 marginwidth=0 noresize="yes">
</frameset>
<noframes>
<body bgcolor="#ffffff">
Sorry, your site doesn't use frames, but here are the other pages so you can navigate my site:
<p>
<a href="left_page.html">Left Page</a><br>
<a href="middle_page.html">Middle Page</a><br>
<a href="right_page.html">Right Page</a>
</body>
</noframes>
</html>

Targeting with Frames

Notice the name for each new page we've specified? Whenever you target a link, you can target it to this name! If you want a link to only replace the left frame, target the link to the name of your left hand frame (eg. "left"). These names can be anything you want (they don't have to be "left", "right", etc! You could call them "fred" or "apple"!), but make them unique names (otherwise you'll confuse the browsers and things won't work the way you want them to).

If you want to have a link that replaces all of your framesets, use "_top". If you want one to open a brand new window, target your link to a name that you haven't used before, or "_new"! See how the links work by testing them out with your own framesets!

Scrolling

What's all this scrolling, then? You can have "yes", "no" or "auto". This means that you will use scrolling a certain your frame, you won't use scrolling, or you'll let the browser decide if it needs scrolling or not. Play around with this, and see what happens on your own pages!

Marginheight and Marginwidth

Marginheight and marginwidth are more attributes that can be changed by putting in various numbers. See if you can see what happens when you change either attribute to have a large number.

Noresize

Noresize is an attribute that you don't have to have in the frameset. This stops the user from changing the frame from the spot you specified. If you take this away, the users will be able to move your frameborder around the screen! Instead of them having it set at 106 (as in the examples) the user can 'pick' up your frameborder, and move it to wherever they want it.

Noframes

Noframes are set for all of the people with browsers that aren't compatible with framesets, such as the non-graphic lynx browser. Don't cut out a large portion of your audience by missing out on noframes! And be wary of not adding links to the noframe section... without these, many people will not be able to have access to the rest of your site at all!

Anyway, there's a quick rundown on frames for you. Try them out for yourself!

End of Lesson 6

That's it for this lesson! I hope this helps! ^_^


© Caroline 'Kunoichi' Seawright 2000 - present

If you enjoyed this page, please join my Egyptology & Archaeology Essays Mailing List.

Or contact me on Twitter:

comments powered by Disqus