|Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Member Perks | Member Login|
HTML Inline Frame (iframe) Tutoral
Browser SupportThe 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; 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:
This concludes the HTML Inline Frames Tutorial.
Check out SEO for YOU now!
Almost a NewsletterSubscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:
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 ]
Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects