IFRAMES

Iframes are one of the most useful tools when it comes to designing your page's layout. They work perfectly if you want to cram a lot of content into one little space, or as a substitute for actual frames which are often quite ugly. Throughout the course of this tutorial we are going to cover how to create a basic Iframes and implement it in your website.

Firstly lets take a look at what an Iframes can look like, below I have listed two versions of a Iframes, we will later discuss the different ways these were achieved.

Now we have two Iframes above, the Iframes on the left side has a scroll feature however the Iframes on the right doesn't have one. This is fairly easy to control, so lets go ahead and take a look at the code for the first Iframes (with the scroll feature):

<Iframes src="iframe-sample1.html" name="Sample Iframes 1" scrolling="auto" width="250" height="200" frameborder="0">Your browser doesn't support Frames. Please upgrade to a later install of Netscape or Internet Explorer.</Iframes>

Lets break this code down, first we have the src attribute (src="iframe-sample1.html"), this specifies which file should be displayed inside the Iframes. An Iframes will accept any file that will work on your server (HTML, PHP, ASP, XML and so on). If you wanted to use a page from another website, you could just put in its full URL. After that we used the name attribute (name="Sample Iframes 1") to give the Iframes a name. This comes in useful if you wish to use the Iframes as a place to display the main content, you can then simply point the target of all links to that Iframes by using the specified name. Now after that we specify if we would like this Iframes to scroll or no. For this example we set scrolling to be automatic (scrolling="auto"), in total there are three different options for this attribute, they are yes, no and auto. By default if you do not specify the scrolling attribute the browser sets itself to auto.

Next we specify the Iframes size using the width and height attributes (width="250" height="200"). The width and height attributes can be denoted as either pixel widths or percentages, in the case of this example I have used pixels. Lastly we set the border of the Iframes to 0 (frameborder="0"). By setting the border to 0 you rid of the border completely, thus allowing the page to seamlessly integrate with your main page. Possible values are 1 (yes) and 0 (no), you cannot give it a bigger border.

Any code that is inserted before the closing Iframes tag will display only for browsers that do not support frames.

The code for the second Iframes is almost the same as the coding for the previous one, the only real difference is that for this Iframes I have given it a frame border to show the difference between the two settings.

<Iframes src="http://www.geocities.com/jehanzeb_manzoor/Iframe_Sample2.html" name="Sample Iframe 2" scrolling="no" width="250" height="200" frameborder="1">Your browser doesn't support Frames. Please upgrade to a later install of Netscape or Internet Explorer.</iframe>

And that's the end of this tutorial, by now you should be familiar with how to use the <iframe> tag. If there is still something you do not understand don't hesitate to ask me.