Sample.htm

This is a sample input file that could be created with any program that produces html files, such as Word, Frontpage, etc.    

Using your editor, you edit your web pages as usual.  Include special  "dot commands" in your text to indicate which sections of your HTML file should be initially collapsed when it is viewed with a web browser.

The .SC command ("start collapsed") indicates that the following text should be initially collapsed, up to the .EC command ("end collapsed").  Both of these markup commands should be on a line by themselves with no preceding text in front.  The title of that section of collapsed text (which itself is not collapsed) is on the next line.   The .SC and .EC commands can be nested up to 9 levels deep.   Sections to be collapsed can be as large as you wish, and can include any HTML code or graphics.

The CollapseHTML program will ask for the name of the input file (in this case "sample.htm").  The name of the output file will be the same as the input file, but with "_c" appended to the filename name prefix (e.g., in this case, the output file will be named "sample_c.htm").

The output file (e.g., "sample_c.htm") is viewed with Internet Explorer (or another Cascading Style Sheet (CSS) compatible web browser).   A collapsed section of text will be indicated with a right arrow "" icon ("rightarr.gif") and the section title.   The icon will change to a down arrow "" icon ("downarr.gif") when the text is expanded.  Clicking on the down arrow will collapse the section.  
Also, when a section is expanded, at the bottom of the expanded section will be an up arrow icon, "".  Clicking on the up arrow ("uparr.gif") will re-collapse the expanded section above. 

You may wish to use a different font, font size and/or font color for each expanding/collapsing section. In addition, indenting each level will make it both easier for you to keep track of where you are when editing, and it will make it easier for the reader as well.  For example:  

.SC 
SECOND LEVEL HEADING

This is text that is initially collapsed.  Note that we are using a different font (Times Roman) and a different text color to distinguish the text at this level from text at other levels.

.SC
THIRD LEVEL HEADING

This is a nested collapsed section.   Again, we use a different color and font to distinguish the text at this level.

.EC

This is text at the second level  text again.

.SC
ANOTHER THIRD LEVEL HEADING

Sometimes you may wish to use different size fonts to indicate the level of a section.   Note that nested levels must have their own closing .EC (end collapsed) tag.

.EC

.EC

.SC
ANOTHER SECOND LEVEL HEADING

This is text that is initially collapsed.  Note that we are using a different font (Times Roman) and a different text color to distinguish the text at this level from text at other levels.

.SC
AND ANOTHER THIRD LEVEL HEADING

Note how the indentation is helpful when you are editing.

 

.SC
HERE IS A 4th LEVEL HEADING

Four levels down -- getting deep...

.EC

.EC

.EC

Click the "Back" button on your browser.