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
