Quick & Easy Inline Frames (iFrames)

If you are not familiar with the functionality of an Inline Frame, let me first explain the concept. In summary, an Inline Frame or iFrame as it is commonly called, is a window that pulls information into a web page from another web page. This is done without the need of SSI (server side includes), PHP or other type include web programming language. Be aware that old browsers cannot comprehend the iFrame tags, and so therefore, your visitors may not see what you intended them to see or (in this tutorial), they will be required to click one extra time.

Use iFrames for information that is not critical. Do not use iFrame tags without giving your visitors an alternative route if their browser cannot render the code.

Copy and paste the code below into your HTML source code. It is best to place this code into a table cell for more precise alignment on your page. Change the properties as indicated to suit your needs. Also, it is VERY important that you have the HTML page that you are pulling into your web page on your server or this feature will not work. You will get that ugly 404 error page we all hate to see.

<iframe src="yourwebpage.html" name="anyname" width="200" height="150" align="default">Your browser is not capable of rendering the iFrame feature. <a href="yourwebpage.html" target="_blank">Click here to view the page.</a></iframe>

Properties to change:

src="yourwebpage.html" ... this is the name of your webpage you will be pulling into the page containing the iFrame code

name="anyname" ... name your iframe whatever you wish

width="200" ... change this to the width of the iFrame you need; experimentation may be required

height="150" ... change this to the height of the iFrame you need; experimentation may be required

align="default" ... change the alignment to other options: "left", "right", or "center"

Click on the "View Live Example" icon near the top of this article to see the iFrame demonstration. The web page this iFrame is pulling in discusses concave colored scrollbars. For information on how to make colored scrollbars with CSS and a comparison of convex and concave scrollbars effect, check out this week's CSS Tip, "Concave Colored Scrollbars with CSS?

Related Article: "Custom Error 404 Page"