HTML-"Compiler":
Do it yourself!

(IE only)


Compiling several HTML-files to one, that can be done by any purchased HTML-compiler. Incurring some disadvantages. Or you can do it yourself. Just by clever HTML-coding and a few lines of JavaScript.

Click to go to chapters:
Bracket Parts in  <DIV> … </DIV>  Tags
JavaScript function  LinkTo 
Table of Contents
Pseudo-Link back to TOC
Try Yourself!

In some applications you have information split up in quite a few HTML-files, but you are expected to deliver it all in one big HTML-file. You can do that easily:

  1. Place all the contents in one HTML-file,
  2. bracket the parts in  <DIV> … </DIV>  tags with some additional attributes,
  3. provide a JavaScript function to display only one part at a time.
  4. It will make sense to provide an additional 'Table of Contents' with a list of internal links to each part.

In some applications, you are required to deliver all information in one HTML-file, regardless of all its constituent parts (e.g. the help file of a software package).

You could do that by purchasing a HTML-compiler. There are many offerings out there on the Internet - yet they all have some disadvantages:

  • File type: They are producing an .exe-file. That's arousing the suspicion of some firewalls. If you try to attach it to an email, chances are that it will be not accepted.


  • Limited execution: Some HTML-compilers you can purchase are not capable to interpret JavaScript-functions or advanced HTML-code correctly. The resulting file, though called .exe, cannot execute it all perfectly.


  • File size: The file coming out from a HTML-compiler is frequently much bigger than the sum of all the part files going into it. (Reason: …)

    Simply for that reason you could never e.g. attach it to an email.



  • Price/performance: After all, it's taking money to purchase it. Reasonably priced HTML-compilers use to generate a poor-quality code. Good HTML-compilers are quite expensive.
But as well you can do that yourself - with just a minor extra effort:
  1. Place all the contents in one HTML-file,
  2. bracket the parts in  <DIV> … </DIV>  tags with some additional attributes,
  3. provide a JavaScript function to display only one part at a time.
  4. It will make sense to provide an additional 'Table of Contents' with a list of internal links to each part.

In some applications, you have a bundle of HTML-files. Yet you just have to deliver it all combined to one file. That's easy by a few lines of HTML-coding and one function in JavaScript. First, lump all parts together in one big HTML-file. Then:

Bracket Parts in  <DIV> ... </DIV>  Tags

Simply bracket each part to be displayed separately in  <DIV> … </DIV>  tags with some additional attributes:

<DIV ID="page0">
	    :
	   TOC
	    :
</DIV>

<DIV ID="page1" STYLE="display:none">
	    :
	  part 1
	    :
</DIV>

<DIV ID="page2" STYLE="display:none">
	    :
	  part 2
	    :
</DIV>

     :
Note that all the DIV's have an attribute  ID="…" , with the identifier being  pagex. The index  x  is 1, 2, 3, … for the parts and 0 for the Table of Contents. All the parts (but not the Table of Contents!) have also an attribute STYLE="display:none" .

top of article

JavaScript function  LinkTo 

Before the  </HEAD>  tag you should provide the following JavaScript function:

function  LinkTo (n)
{
   for (i=0; obj = document.all.item(i);  i++) // hide all objects
   {
      if (obj.id == '')  continue;
      if (obj.id.substr(0,4) != 'page')  continue;
      obj.style.display = 'none';
   }
   eval ('page' + n).style.display = '';       // display object "page_n"
   return false;                               // disable pseudo-link
}
You see, first there is a loop over all the document's objects. If there are objects without any  ID="…"  they are ignored, as well if they don't have any  ID="pagex" . All the remaining objects' attribute style.display is set to  'none' .

Then only the object with  ID="pagen"  is displayed.

By the final return false it is assured that the pseudo-link is disabled.

top of article

Table of Contents

The Table of Contents is a list of pseudo-links of the following coding scheme:

<A href="#" onclick="return LinkTo(1)">page 1</A><BR>
<A href="#" onclick="return LinkTo(2)">page 2</A><BR>
                                          :

By  href="#"  the link  <A … > link text </A>  is made to behave like a pseudo-link, i.e. jumping to nowhere when the link text is clicked. In fact, that's not necessary: By the attribute  onclick="return LinkTo(x)"  all parts are hidden with the exception of the one with  ID="pagen" .

By  onclick="return LinkTo(...)"  only that one page is displayed and the browser is signalled not to execute the scrolling normally associated with  <A … > .

If you want to combine the function  LinkTo  with a real bookmark (such as in the menu below), code the hyperlink like this:

<A HREF="#…bookmark…" ONCLICK="LinkTo(x)"> … link text … </A>

 …bookmark…  is the name of the bookmark you want to jump to. It can be any name, just be sure not to use any  "pagen". 

 x  is the index of the page comprising that bookmark.

Note that function  LinkTo  is called now  ONCLICK="LinkTo(x)" , without a  return . (Reason … )

top of article

Pseudo-Link back to TOC

 To make it really useful, you should give the reader an easy way to jump back to the Table of Contents. (Why … ?)

You can do that simply by another pseudo-link at the end of each page, e.g.:

<A HREF="#" ONCLICK="return LinkTo(0)">TOC</A>

Try Yourself!

The following is a list of pseudo-links to three different pages. Click any of them, and the respective page will appear on screen - that page only! (Note …)

page 1
page 2
page 3

When you want to get back to all the text you read till now, move the cursor to the FollowMenu in the top-right corner of your screen. The sectionmenu will drop down. From there you can jump to any section you like. As well, all sections are active again when you close your browser and open this article one more.

top of article