Exit tutorial


HTML Tutorial
Web Design: Frames - Page 4 of 5
How To Add An Inline Frame To An HTML Page

Version HTML 4.0 brought us the ability to use inline frames, which are frames all by themselves in the middle of a page. Of course, everyone will have to be surfing with recent browsers to see this nifty little trick. Well, wanna see an inline frame? Here you go:

Pretty neat, isn't it? So how did I get this on here? Here is the code:

<IFRAME src="page1.htm" width="350" height="200" frameborder="10"> </IFRAME>

That's it! Almost like a normal frame tag, but it shows up inside your page. Here's what all this does:

  1. <IFRAME>
    This is the tag that tells the browser an inline frame will go here.

  2. src="page1.htm"
    This lets you specify the url of the document in the frame. See what type of stuff you can get placing one of your pages inside another one!

  3. width="350"
    Lets you give the frame a length, in pixels.

  4. height="200"
    Lets you give the frame its height, in pixels.

  5. frameborder="10"
    Allows you to give the frame a border. Set this as large or as small as you like.

Also, this frame uses links just like any other frame. You can give the inline frame a name, and target the frame with a link on your page outside the frame! Here's How:

First, add the name command to your IFRAME tag:

<IFRAME src="iframe1.htm" name="inside_frame" width="350" height="200" frameborder="10">
</IFRAME>

Now, place links on your page to show up in the frame:

<A HREF="iframe2.htm" target="inside_frame">Change The Content from lime to purple</A>

<A HREF="iframe1.htm" target="inside_frame">Change The Content from purple to lime</A>

Here's an example of this at work, click on the links below the frame to change its contents:




You can also add the scrolling="no" command to keep the frame from scrolling.

So, go ahead and play around with it for a while.

[Back to the Stage 3 Index]