HTML help

Todd Burstain, January 1, 2001

First of all what is HTML Help. HTML help is a new concept that combines standard HTML with an active-x object called HHCTRL.ocx. he HHCTRL.ocx control has several subitems if you will. These include a table of contents, index file, related topics, splash screen, shortcut, Winhelp (window or popup)...

The tools

Here’s what you’ll need. The HTML help workshop (version 1.0 beta) available at ww.microsoft.com/workshop/author/htmlhelp/betapage.htm." This has the hhctrl.ocx control, the dll it needs, the hhw.exe application (HTML Help Workshop) and the Flash.exe (Screen Capture and usemap editor). You will also need a good HTML editor such as FrontPage by MS, a word processor that can read RTF, like MS Word or WordPerfect, or even WordPad, MS Internet Explorer 3.0 or later, and the Webbrowser.ocx control http://www.microsoft.com/intdev/sdk/docs/iexplore/webrowse.htm.

The steps

Edit the file that comes with the HTML help workshop called start_fr.htm. This is the main HTML document that serves as the base page for your new HTML help. You can adjust column widths etc. I like to rename the left and right frames to left and right and the top to top or nav. Save this to a separate directory under your name of choice.

Next edit the file called nav.htm. This controls the navigation buttons in the top frame. You can add buttons by copying the HTML text and altering as needed. I found the forward button as well as things like shortcuts and glossary to be good buttons to have on a navigation bar. Edit the text and the command to do the task you wish. For more on this see the HTML guides on the internet on syntax for push buttons.

Now you need to start building your table of contents. Create a blank HTML document and use the HTML Help Workshop wizard (under tags menu) to add a hhctrl Table of Contents function to it. Set the default frame for the HTML to be left via the properties button. Load the RTF file your old hlp file was based on into the word processor. Print out the footnotes (or better yet export them to a file). Use the $ footnotes as a basis to start your new table of contents. Create a new table of contents file (hhc extension). Make sure each entry has the default frame set to right. NOTE: the hhc file is really just a fancy html document with multiple hhctrl objects in it. You can use code to import all your $ footnotes into table of contents entries automatically. Look at the syntax for entries by editing the hhc file and then add the entries via code. Finally tidy up the Table of Contents by adding headers and dividing up into appropriate sections.

Sample of Table of Contents

Next create your index file. Create a blank HTML document and use the HTML Help Workshop wizard (under tags menu) to add a hhctrl Index function to it. Set the default frame for the HTML to be left via the properties button. Load the RTF file your old hlp file was based on into the word processor. Print out the footnotes (or better yet export them to a file). Use the K footnotes as a basis to start your new index. Create a new index file (hhk extension). Make sure each entry has the default frame set to right. NOTE: the hhk file is really just a fancy html document with multiple hhctrl objects in it. You can use code to import all your K footnotes into index entries automatically. Look at the syntax for entries by editing the hhk file and then add the entries via code. Finally tidy up the Index by adding headers and dividing up into appropriate sections.

Sample of Index

Now copy each page of your help file into its own HTML file. For elegance use a standard template and then paste in the text. Save the files to the names used by the table of contents/index entries. For added features then edit the HTML files with the HTML Help Workshop wizard (under tags menu) to add a hhctrl Related Topics function the end of each page. NOTE: the Related Topics function in the html document can be added via code to import all your K footnotes into Related Topics entries automatically. Look at the syntax for entries by editing the html file and then add the entries via code.

Samples of Related Topics

Window Menu Style

Popup Menu Style

After all this you now will have an HTML help file. You can now embellish it with any HTML feature you wish (aka endless hours of "perfecting" a perfect page). Some nice ideas are to use the Flash program to capture screens from your app, create usemaps from them and then link the sites on the map to corresponding html help pages. This creates a pictoral help guide.

Now to build in context sensitivity of your VFP app to your new HTML help file. First create a table with 2 character fields, one topic (10 or so) and one href. (make sure the href field is at least 80 characters long). Fill the table from your $ footnotes into the topic and the html document names into the href field. Index the table on the topic field. Create a form called myhelp.scx. On the form put the webbrowser.ocx control. In the init event of the form put in the following code

1. use the help table
2. seek to the topic (can store to the _variable that holds the topic value that way your old set topic to commands will work in your app)
3. set the webbrowser.navigate method to load up your main help file (the one derived from the start_fr.htm)
4. issue a second navigate to load the value in the href field into the left frame of the main help file.

YOU’VE DONE IT !! You now have context sensitive HTML help for your VFP app.

PS: If you need specific code for this let me know and I will try and post it. The purpose of the article was more as a white paper guide, rather than a technical source.

For a sample HTML help system, look at the help file that comes with the HTML Help workshop. It will give you lots of ideas.