This article originally appeared on the website "Professionals in Pajamas"
which has now been incorporated into Widget Inc.

HTML 101 - Part 4: I've Been Framed!

Roger L. Main

Ever notice those web pages that seem like they have lots of little windows on the same page? You know, the ones that have a panel you can scroll down on while there's a part that stays where it is? Maybe there's a menu down the side that has its own scroll bar and when you click on something the page in another window changes. Ever see those?

They're frames.

A webpage done in frames is much like any other webpage - in fact, any frame can be any web page including scripts (which is an entirely different subject and may be discussed at an entirely different time). They can include tables, links and in structure are like any other HTML page with <head> and <body> tags. The only difference is that they occupy the same page space as other web pages.

However, frames are defined on a parent page with has a different structure from your average, vanilla web page. Let's take a look at this structure:

<frameset rows='10%,*'>
  <frame src='topframe.htm'>
  <frame src='mainframe.htm'>

Notice there's that "src" attribute again. Whenever a web page is referring to a seperate document you will see that "src" attribute. Also, note that the <frameset></frameset> tags appear INSTEAD of the standard <body></body> tags. Now, it's very unusual that you will come across a web browser that doesn't support frames, but if you do then this structure will be ignored entirely and you will end up with nothing on the screen. That's why the HTML specification also includes the <noframe></noframe> tag combination. Used after the frameset specification, any browser that does not acknowledge frames will ignore the frame and frameset tags, will ignore the noframe tags and will treat anything inside them as standard HTML, so that's where you put your non-frames version. Any browser that recognises frames will also recognise the noframes tags and will ignore any of its content.

Okay. So far so good. Now, what about the attributes of the frameset? Well, 'rows' and 'cols' are the most important. They specify how many rows and how many columns are in the frameset (however, only one can appear in any given frameset). They are defined by a value indicating the size of the row/column, seperated by a comma (as seen in the example above). You can put three things here: you can put in an absolute screen width, for example, cols='100,200,*' meaning one column of 100 pixels and one of 200 pixels. You can put in a percentage, like the example above, meaning one row that is ten percent of the visible window height. Or you can use the asterisk (*) which means "and the rest" or, more accurately, whatever is left over.

Between the <frameset> and </frameset> tags are the actual frame definitions (as I'm sure you've guessed from the "src" attribute. Note, however, that each frame could, in itself be another frameset definition, as in the following example:

<frameset rows='10%,*'>
  <frame src='topframe.htm'>
  <frameset cols='10%,*'>
    <frame src='leftframe.htm'>
    <frame src='rightframe.htm'>

Or it could be a file name. It could also include a name for itself, like so:

<frame src='mainframe.htm' name='mainframe'>

This is crucially handy when it comes to inter-frame linking. Say you have a main frame which is where you're showing all of your primary content and, in the left (or top) frame you have a menu, then you link from the menu to the main frame by specifying a link as follows:

<a href='newpage.htm' target='mainframe'>

That way, when the user clicks on the item in your menu the page will show in the main frame and not in the menu frame.

Very handy things, frames. Microsoft, in their infinite wisdom, also realized that there might be occasions when you would want a frame that appears in the center of the screen, rather than to one side of it. Introducing the Iframe. The Iframe is an "independent" frame that appears inside a regular HTML script, much like a table. It is also a bracketed tag. "Why?" you may ask. It is true that the attributes of an Iframe include width and height and, if strategically placed inside a table, can appear anywhere on the page you like, so why would you need any content inside it? The reason is quite simple. Anything inside the <iframe> and </iframe> is much like the stuff between noframe tags. If your browser doesn't support Iframes (which most don't, Internet Explorer being the obvious exception) then that's what the user will see instead of the Iframe content.

Think about it - if your browser doesn't support Iframes, then it will ignore the <iframe> and </iframe> tags and will munch right on to the stuff between them. If it does, then it knows to ignore this content because the source in the Iframe will provide the necessary information for what to show in the Iframe. Let's look at an example:

<iframe src='myiframe.htm' width=100 height=100>
  Ha Ha, you don't support Iframes!

Again, there are a plethora of attributes that both standard frames (frameset type frames) and Iframes support. You can see a comprehensive listing at Index Dot HTML.

If you've been following along with Tech Notes then you should have all the ammunition you need to make a simple web page to at least get your home-based business on the web. Thus, we conclude HTML 101. Next we'll be taking a deeper plunge into the Internet world and I'll be looking at those illusive "scripts" that I've been constantly referring to.

Return to the main menu

© Copyright 2002-2007 Widget Inc.
All Rights Reserved

"Index Dot HTML" is copyright to Brian Wilson. Widget Inc. is not responsible for the accuracy of the content of this site. "Internet Explorer" is a registered trademark of Microsoft Corporation.