search engine optimization articles do it yourself seo hiring search engine experts html and search engine optimization web site analysis and submission service

HTML Inline Frame (iframe) Tutoral

Browser Support

Internet Explorer Firefox Opera Safari Chrome

The iframe allows for a "window" in a web page that can display a second document within its border.

Here's the code for a very simple iframe:

<iframe src="YourFile.txt" 
 width: 260px; height: 130px;  
Alternative Content

The "src" is the name of the page you want displayed inside the iframe. The width and height can be set to whatever size you need.

The name attribute is so you can target links to load into the iframe.

Lastly, where it says "Alternative Content" is where you place content for browsers that do not support the iframe. They'll see whatever content you place there. Often, a webmaster just links to the content he or she is trying to display in the iframe.

Here's how an iframe looks on a web page:

The iframe can be "prettied up" a little bit using CSS if you don't like the default look. You can change the border or frame it in with a graphic, and of course, you can do whatever you like with the page that loads in the iframe.

Speaking of the page that loads in the iframe, it doesn't have to be an HTML page. It can be a text file, a graphic, a PDF file, or anything else a browser can display.

In case you're curious about framing an iframe with a graphic, here's the same iframe as above only framed with a graphic I quickly made...

That's a little nicer, don't you think? It looks best in Firefox because you can remove the iframe border completely, but IE doesn't let you do that. Not version 8 on Windows XP Pro anyway.

You might be able to make a much better graphic and make it look even nicer.

Here's the code for that:

<div style="width: 360px; height: 240px; 
   background-image: url(images/showcase.gif);   
   text-align: center;">
<iframe src="featured-products.html" 
   style="width: 340px; 
   height: 180px; 
   border: 0px; 
   margin-top: 30px;">
Alternative Content

This trick uses an image for a division background with the iframe more or less centered in the division. You just have to play around with the margins and iframe size until it fits right.

Based on your interest in this tutorial you might also be interested in:

This concludes the HTML Inline Frames Tutorial.
Back | HTML Tag Chart | HTML Index | Web Design Tutorials
search engine optimization course
If you want your web site to rank high in the search engines . . . what are you going to do to get it there? Check out my search engine optmization guide, SEO for YOU: Search Engine Optimization for Ordinary Everyday People!

Check out SEO for YOU now!

Almost a Newsletter

Subscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:

First Name:

Privacy Policy

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)