You may remember that in normal frames pages, the <frameset>
</frameset> tags define how the page should be divided. These
tags replace or precede the <body> tag, and look something
like this (each "?" would define the size and number of columns):
Then
the <frame> tag is used to describe each frame and pull in the
HTML source document. It looks something like this:
<frame src="blah.html" name="blah">
Now, iframes are obviously a little different than your run-of-the-mill
frame. First of all, they're defined entirely by the
<iframe> tag, which fulfills the functions of both the
<frame> and <frameset> tags. Second, the
<iframe> tag can be placed directly inside the
<body> </body> tags, like an image. (In fact, the
<body> tag can define some iframe attributes, but I'll get
to that later.)
Let's start off by defining the size of your iframe. The
<iframe> tag can define the width and height using pixel
values:
<iframe width=150 height=200> </iframe>
Or percentages:
<iframe width=40% height=%60> </iframe>
Keep in mind that percentages will scale to accommodate the space available
on the user's monitor, while pixels are more restrictive and less responsive
to the individual needs of a user. What's perfect on a laptop screen may be far
too small for a 21-inch workstation monitor, and vice versa.
Also, note that I've added the </iframe> tag after every
<iframe>. This is necessary because it closes the floating
frame.
Looks like to me like we're off to a good start. But as my grandma used
to tell me, "Son, if you ain't got content, you ain't got diddly." Never
being a fan of diddly, that never really bothered me. But in retrospect, the
old girl had a point. Without content, you kinda just got yourself a blank
page.
So next we'll learn how to give the iframe some guts.
next page»
