HTML Inline Frame (iframe) Tutoral

Here's the code for a very simple iframe:

<iframe src="YourFile.txt" 
 width: 260px; height: 130px;  
 name="#boogiejack">
Alternative Content
</iframe>

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...

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
</iframe>
</div>

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:

• Additional Iframe Tutorial