PageResource.com - Web Development Tutorials

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="http://www.google.com" 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="http://www.pageresource.com"
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="http://www.pageresource.com" 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="http://www.google.com" target="inside_frame">Yahoo</a>

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


Microsoft

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.


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy