There are many ways to make webpages. You can make a page, like you start writing a document in Open Office or Koffice. The word processor will add whitespace where required to make a nicely formatted printed page. Do the same with an HTML page and you're in for a surprise: the webserver will ignore spaces and linebreaks. You end up with a flat text that is jammed against the sides of the viewframe. Not pretty to read.

Tables

A first improvement is to use tables. Inside a table, there is the parameter "cellpadding" which defines how many pixels of white space there must be between the content of the table cell (text, pictures) and the actual wall of the cell. This makes reading a lot easier on your eyes. At least, for me.

I-frames

One step further is the 'I-frame'. This is a complex table (in many cases) consisting of

a top section with some intricate header
a links section with clickable navigation pointers
a body section containing the actual content of the HTML document

Many I-frames are very cunningly constructed. People are prepared to invest hundreds of hours in making a very nice top-section and just about as much time in making a links section.
The disadvantage of the I-frame is that the cunningly crafted top section scrolls off the screen within seconds and the links-section goes out of focus just as fast if the page is longer than one or two screens of text. I-frames force the user to scroll back and forth all the time when they want to navigate your site. But single-frame visitors just simply adore the I-frame.

CSS

And there is CSS (since HTML 4) which let you define a padding and a margin and a box and a lot more than you care to know. Still, with some minor CSS code you can do a lot. These pages are being converted from Table based to CSS based. CSS just looks better (when used sensibly) although not all is possible. Here is part of my CSS file:

body	{ font-family		: sans-serif;
	  color			: black;
	  background-color	: white;
	  padding		: 8px;
	}

red	{ color			: red;
	  font-weight		: bold; }

li	{ padding-bottom	: 5px; }

pre	{ font-family		: monospace;
	  font-weight		: bold;
	  color			: blue;
	  background-color	: #FFFFE0;
	  padding-left		: 25px;
	}

If you skip the frames, you need to litter your pages with ' ' or else you end up in a big mess. This br command is illegal but it is the only one that works ALWAYS and is easy on the mind.

Frames

In my opinion the best method is to use frames. A frame is a set of webpages, each in it's own tiled viewscreen. Just look at the webpage on your screen: THIS is a framed webpage. The frame based webpage has the following characteristics:

One viewscreen is called a FRAME
Frames have names
A set of one or more viewscreens is called a FRAMESET
Framesets can be nested
Each frame is defined in its own HTML file
The (set of) frameset(s) is defined in ONE specific HTML page. This page also defines which files are to be used for each frame
Subsequent HTML pages can be loaded directly into a specific, named, frame.
All frames have independant scroll bars

I always use frames. I'm called old fashioned by all other webpage makers. Still, I don't want to make pages that force the user to compensate for my lazyness. So I make three frames:

The top frame shows the topic of the current section. This frame stays put as long as you are browsing this topic of subject. If you get lost, just take a look at the top frame and you get a hint of what it's all about.
This frame has no name.
The rightmost frame (the right side of the table is where the mouse lives) contains the vast majority of the clickable links. On my sites you know in advance: when I want to navigate I need the navigator frame. No need for links in the subject frame.
This frame is named "sidebar" but it is only used in some heavily loaded sections, like "Modula-2".
The leftmost and biggest part of the screen is for the actual payload of the subject. This big frame contains the stuff that matters. Only very few links. This section is for reading and studying. It's located at the left, since the vast majority of people start reading on the left side of a line or screen. One more reason to put the navigator screen on the right side.
This frame is called "main" and it is referred to in many many cases.

The screen you are watching now, is made with the following files:

"index.html" which contains the layout specification for the total visible screen. This is how it looks like:
```
<!doctype html>
<html lang="en">

 <head> 
 <meta charset = "utf-8">
 <title>Fruttenboel MAIN</title> 
 </head>

 <frameset rows = "60, *" frameborder = "0">
 <frame src = "maintop.html" scrolling = "no" noresize="noresize">
 
 <frameset cols = "*, 16%" frameborder = "0">
 <frame src = "main.html" name = "main" marginheight = "0" marginwidth = "0"> 
 <frame src = "maincontent.html" name = "sidebar">
 </frameset>
 
 </frameset>

</html>
 
```
As you can see, there are two nested framesets. The first one splits the screen in two horizontal sections (rows). The top row is 60 pixels high and the second row may use the remaining pixels.
The next line declares the source for the uppermost frame (the one 60 pixels tall) which in this case is "maintop.html".
Then, the bottom row is split in two vertical sections (columns) and in the subsequent lines these frames are specified for source and name.

"maintop.html" is the file that defines the white on black letters in the top 60 pixel lines of the viewable screen. This is how it looks like:

<!doctype html>
<html lang="en">

 <head>
  <meta charset	= 'utf-8'>
  <meta name = 'author'	content = 'Jan Verhoeven'>
  <meta name = 'generator' content = 'Jan, Jed and some common sense'>
  <title>TOP main</title>
  <style type="text/css">
  body {
    color		: white;
    background-color	: black;
    padding 		: 0px;
    margin		: 0px;
    font-weight		: bold;
    font-size		: 150%;
    font-family		: monospace;
       }
  </style>
 </head>
 
 <body>
  <table cellspacing="3" cellpadding="3" width="100%" height="45">
   <tr>
    <td align="center">
     Welcome to   F R U T T E N B O E L   mainpage.
    </td>
    <td width="16%">
     <span class="center">
      <a href="http://www.slackware.com" target="_blank">
       <img src="etc/SWyellow.jpg">
      </a>
     </span>
    </td>
   </tr>
  </table>
 </body>

</html>

This is just plain HTML with some CSS and you probably will be familiar with it by now. You need to keep in mind that this frame is only 60 pixels high so don't make your letters too tall and don't use more than one or two lines of text. Some experiments will be required...

"maincontent.html" is the file that constructs the navigator frame. This is a very important file. Withour it, you are a sitting duck and can only view the one frame that is filling the screen. Below is a part of the navigator frame:
```
<!doctype html>
<html lang="en">

 <head>
 <meta charset = "utf-8">
 <meta name="Author" content="Jan Verhoeven">
 <title>Navigator MAIN</title>
 <link type="text/css" rel="stylesheet" href="frutt.css">
 </head>

 <body style = "font-family : monospace;">
 
 Navigator:
 
 
 # <a href="index.html"			target="_top">Main page</a>
 
  o <a href="filosof.html"		target="main">Philosophy</a>
 
 
 # Subjects:
 
 
  o <a href="EEE/index.html"		target="_top">Asus EEE</a>
 
  o <a href="Murus/index.html"		target="_top">Murus</a>
 
  o <a href="various/index.html"		target="_top">Various</a>
 

 
 # <a href="http://www.verhoeven272.nl"	target="_blank">Personal site</a>
 

 <img src="dpinguin.gif">
 
 </body>
</html>
 
```
I removed major sections from this file. If you need to study my navigator frame, just issue a
```
 'wget http://fruttenboel.verhoeven272.nl/maincontent.html'
 
```
command from within a command shell. If you are a sponsor for Bill gates you just ran out of luck. :o)
The way to read this file:
- If you click on 'Main page' the file called "index.html" is loaded into the frame called "_top". "_top" is a reserved frame name and it refers to the total viewscreen, i.e. it overrides the current frameset.
- Click on 'New items' and the file "mainnew.html" is loaded into the frame called "main". We know "main": it's the bottom left frame we defined in our current index.html file.
- Click on some link and you direct all traffic from that website to a new frameset called "_blank". Also "_blank" is a reserved word. It refers to the full viewscreen, but it doesn't overwrite the curtrent one. It opens up a new and empty viewscreen that is being filled with whatever the WISclub site has to offer.
By specifying the right name in the "target" field, you can direct the files to be placed in any frame.
"framestomp.html" is the name of this particular file. It is loaded in the frame called "main". This file is just too big to publish it here. But you get the message.

Frames have some very strong advantages:

Easy maintenance. All links are in one file. If you need to change a URL or links you only need to change one file
Quick navigation on large sites due to the fact that all links are accessible at all times
Uniform look

And also some rather annoying disadvantages:

It is not always clear which frame has the focus (useful when browsing by cursor keys).
Printing frame based content can be a problem unless you run Netscape.
The viewscreen gets smaller (not a problem anymore since WideXGA came to the market)
When you enter a framebased site from a search engine, chances are you get trapped on that single page since you cannot navigate anymore.

Especially the last example is a real problem. You can get away by changing the URL bar such that the file ending in 'html' is cleared backward until the last slash ('/'). But this must be done manual. And there is one motto among webmakers: ONLY trust the server!

I 'solved' this problem for years by putting a clickable link in each content frame so that the full frameset would be reloaded, thereby throwing away the page you were visiting at that moment. But this is also not compliant with the motto...

Some advantages of using the Frame Stomper (or Google Buster) are:

Framed websites are loaded in a controlled way
No more orphaned frames
Software runs on the webserver, not on the client (like with JavaScript look-alikes)
Google's cache is busted!

Argument IV might sound silly at first. We all love Google's cache to outsmart the silly kind of webpage builders. Google will keep a stripped copy of all your old webpages and when someone needs to read some backdated data, (s)he can just load the cached page from a Google server. This is data that YOU, the owner of it, wanted to disappear from the web. And Google is here to remind you of all your errors.
But NOT anymore when you have a framestomper on your page! What ahappens is the following:

You ask for the cached webpage by clicking 'in cache'
Google will serve the cached page in a frame of it's own
The FrameStomper will notice it is in a separate frame and it will kick in:
So the latest version of that file is retrieved from the webserver, accompanied by it's related frames. Bye bye Google Cache.

So I invented the Google Stomper. But since Google is just one search engine and they have patented their name, I changed the name to FrameStomper and hen once more to GoogleBuster. Try it. Go to a search engine and find one of these pages. Then load it. You will not get a single marooned frame anymore. You get the full set and you also get the file you wanted. The Frame Stomper does this by building a custom index.html file which is loaded with a target="_top". Below is an example of the FrameStomper:

<!doctype html>
<html lang="en">

 <head>
  <script>
   <!--
    if (parent.location.href == self.location.href)
     { window.location.href =
      'http://verhoeven272.nl/cgi-bin/FS?fruttenboel&Fruttenboel+main&maintop&framestomp&maincontent'
     }
   // -->
  </script>
  <meta charset	= 'utf-8'>
  <meta name = 'author'	content = 'Jan Verhoeven'>
  <meta name = 'generator' content = 'Jan, Jed and common sense'>
  <meta name="Description" content="Benefits of the framestomper">
  <meta name="Keywords" content="google,frame,framestomper,altavista,search,engine">
  <title>The Google Buster</title>
  <link type="text/css" rel="stylesheet" href="frutt.css">
 </head>

On the left you see the effect of using the framestomper. I installed the stomper early April. And that's when the webserver started to serve more data. This partly caused by the Stomper itself: three to four files are served now, even when just one file is requested. This was the effect visible until April 15. Then, the other effect kicked in.

The main reason the statistics go up so incredibly is the fact that people requesting just one page, are confronted with a full website: content, header and navigator are loaded as one unit. And since the content on my pages is above average, people also want to sample other pages.

So the Frame Stomper will stomp out the search engines and present full content to all visitors. Thereby increasing the visibility of your site.
The column for May is not completed yet (as can be seen below, in the datefield) so you need to multiply it's length with a factor 1.2 (approximately).

Page created on 24 April 2006 and

Page equipped with GoogleBuster technology!