Skip navigation

Using Inline Frames

How to add an inline frame to your HTML page
Note: Inline frames may not display in older browsers.

Inline frames are frames all by themselves in the middle of a page. Well, wanna see an inline frame? Here you go:

Pretty neat, isn't it? You could actually use the links inside that frame to navigate through all of my HTML tutorials! So how did I get this on here? Here is the code:

<iframe src="whatsnew.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="whatsnew.htm"
    This lets you specify the URL of the document in the frame.
  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="1"
    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="whatsnew.htm" name="inside_frame" width="350" height="200" frameborder="1">
</iframe>

Now, target a link on your page to show up in the frame:

<a href="linkus.htm" target="inside_frame">Link to us!</a>

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


Link to us!

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. Have fun!

Now, let's go on to the next section, where you will see how to Change 2 Frames With One Click.

 

Other Topics: ASP/PHP | DHTML | Java | Site Survey | Contact Us | Privacy Policy

Copyright © 1997-2009 The Web Design Resource. All rights reserved. Disclaimer.