Introduction
The iFrame is a rather new tag, which enables you to include files, from anywhere on the web, on your pages. Unfortunately iFrames will not work in Netscape Navigator 4.xx or lower. Though the percentage of people who are using that browser is quite small.
iFrames act in some way just like regular frames, but yet they can be put anywhere on a page: in a table, in a frame, between text,... . You can also control the sizes and looks of iFrames. In this tutorials you will learn it all...
Basics
The iFrame is a HTML tag like any other and needs to be opened and closed. <iFrame>
</iFrame>
Between the two tags you don't have to put anything. Attributes will all be added in the first tag. This code by itself won't display anything. We need to set which frame it should load.
src="http://website.com"
Note: Change http://website.com to the url to the page it should load. Add this piece of code in the <iFrame> tag. (ie: <iFrame src="http://website.com">)
Now this will display the page, but it won't look very 'neat'. Anyway before we move to 'how to change the looks' we are going to give the iFrame a name...
name="iFrame1"
Note: Change iFrame1 to the name you want to give the frame. Do NOT use spaces in the name. Add this piece of code in the <iFrame> tag. (ie: <iFrame name="iFrame1">)
Now you'll be able to tell the browser to open a link in that frame from a link outside the frame by using the target="iFrame1" in the anchor tag.
Controlling the looks
Now we should take a look on how to control the iFrame so it looks just how we want it to look like. Let's start with setting the sizes.
width="222" height="222"
Note: Change both 222 into the width or height in pixels you want the iFrame to be. Add this piece of code in the <iFrame> tag. (ie: <iFrame width="222" height="222">)
Even though you have changed the sizes it still looks kind of kinky with that border and the scrollbars. Let's get into the border size first.
border="0"
frameborder="0"
Note: Change 0 into the size in pixels you want the border of the iFrame to be in both attributes. In this example this would be no border because we set the size at 0. Add this piece of code in the <iFrame> tag. (ie: <iFrame border="0" frameborder="0">)
Now over to controlling the scroll bars...
scrolling=no
Note: Change no into the preferred value. No will disable scroll bars and yes will enable scroll bars. Add this piece of code in the <iFrame> tag. (ie: <iFrame scrolling=no>)
Now we are able to control some general options of the iFrame. Yet there are more things we can control.
Advanced
These options are less used, but can still be handy. First let's start with margins we give to the iFrame.
marginwidth="0"
marginheight="0"
Note: Change 0 into the size in pixels you want the margins of the iFrame to be in both attributes. In this example there would be no margin because we set the size at 0. Add this piece of code in the <iFrame> tag. (ie: <iFrame marginwidth="0" marginheight="0">)
And now the only attribute we still haven't discussed are the ones who set the amount of white space around the iFrame.
vspace="0"
hspace="0"
Note: Change 0 into the size in pixels you want the hspace (space on the left and right of the iFrame) and the vspace (space above and under the iFrame) to be in both attributes. In this example there would be no spaces around the iFrame because we set the size at 0. Add this piece of code in the <iFrame> tag. (ie: <iFrame vspace="0" hspace="0">)
That was it for the iFrame. It can be quite useful if you think of it, but also has one major problem which is that it is not compatible with older browsers. Though in the future the iFrame might replace the regular frame
