Frames

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
         About frames
         Frameset
         Frame source & name
         Nesting Frames
         Target & Noframes
         Frameset borders, etc.
         Scrolling & Resizing
         Margin width, borders
         IFrame
         Should you? Try it
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

IFrames!!!

If you can't see boxes to the right of the screen, you need to get on internet explorer to look at this page. IFrame is not available on some versions of Netscape.

This may be my favorite thing to do with frames. Sadly, not all browsers can do this. It's still useful and quite attractive if done right.

This is IFrame. IFrame puts a frame onto a regular page. You can align it like a picture, re-size it like a picture, and put it in a table like a picture. Additionally, you can scroll and change it like a frame! Nifty, eh?

The I in IFrame stands for inline. This makes it so you can put a frame within a standard page. You do not need any <frameset> tags to do this, and the code can be put right on a regular page.

You can also get the page to change or change back at will.

There are also ways to modify the frame. Most of these are similar to the ways you modify images.

Here is the way I made the frame above:
<iframe src="cool.html" name="woot" width=260 height=200 align=right>
</iframe>
Pretty cool for only two lines of text.

Modifying the IFrame

As you can tell by the demonstration, you can change the width and height of the IFrame. You can give it a name, and align it just like a picture or table. Ther are other modifications you can make on an IFrame as well.

Frameborder
You can set the border of the IFrame to any width you'd like. You can have a border of zero, one, or any number. Let's look at two of these.
<iframe src="cool.html" name="woot" width=260 height=200 frameborder=0 align=right>
</iframe>
<iframe src="cool.html" name="woot" width=260 height=200 frameborder=30 align=right>
</iframe>


Marginwidth, Marginheight
You can increase the padding around the information in your IFrame. You do this by setting the marginwidth and marginheight. Let's look at the IFrame again, but this time we'll set the margins within the frame to 1 in the first example and 30 in the second example.
<iframe src="cool.html" name="woot" width=260 height=200 marginwidth=1 marginheight=1 align=right>
</iframe>
<iframe src="cool.html" name="woot" width=260 height=200 marginwidth=30 marginheight=30 align=right>
</iframe>


Scrolling
Like any other frame, you can specify whether you want the frame to scroll or not. Like you learned with ordinary frames, you can set the scrolling to YES, NO, or AUTO. Here's the same IFrame with no scrolling.
<iframe src="cool.html" name="woot" width=260 height=200 scrolling=NO align=right>
</iframe>


Hspace and Vspace
Finally, the last way you can modify an IFrame is by adding space around the frame. This can keep your text from running into it. Here's an example:

<iframe src="cool.html" name="woot" width=260 height=200 hspace=1 vspace=1 align=right>
</iframe>



<iframe src="cool.html" name="woot" width=260 height=200 hspace=30 vspace=30 align=right>
</iframe>


Well, that's about it for IFrames. They're handy to use and look great, if used correctly. Congratulations, you're done with frames!