Creating HTML Help

HTML Files

Now we need to create our first HTML File. Click New from the File Menu, and select HTML File. Click OK, and set the Title to "Test Help Home". Now, you will need to enter some HTML from scratch, or use a tool like FrontPage, and then copy in the HTML. For the moment, just use the code below:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<Title>Test HTMLHelp Home</Title>
</HEAD>
<BODY>
<H1>Welcome to Notepad Help</H1>
<p>This is our test home page that we will use
to show you how to create your own HTML Help Project</p>
</BODY>
</HTML>

Now, click File | Save As... and save the file in the html directory that we created earlier as home.htm. As this page will be both the default and the home page, go back to the Window Types dialog, and set Default and Home as htmlhome.htm. Then, switch back to the Project tab, click the Add/Remove Files button. Then, click Add, and select the home.htm file you have just saved. 

Click the SaveAll button , and then the compile button . Click Compile, and after a few moments your compiled help file will appear (if it does not, check the log that is displayed for errors.). You can also display it by selecting View | Compiled file. You have now successfully completed your first HTML Help file! Your program should look something like this:

Because we have not specified a contents or index file, the Contents and Index tabs are not displayed. We will create these in the next section. As we will need more than one file in order to show you how to use the HTML Help Workshop, create two more html files, using the source below:

Test Topic 1 (save as Test_Topic_1.htm in the html folder):

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<Title>Test Topic 1</Title>
</HEAD>
<BODY>
<H1>Test Topic 1</H1>
<p>This is Test Topic number 1</p>
</BODY>
</HTML>

Test Topic 2 (save as Test_Topic_2.htm in the html folder):

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<Title>Test Topic 2</Title>
</HEAD>
<BODY>
<H1>Test Topic 2</H1>
<p>This is Test Topic number 2</p>
</BODY>
</HTML>

Don't forget to switch back to the Project tab, click the Add/Remove Files button. Then, click Add, and select the test_topic_1.htm and test_topic_2.htm files you have just created. You can select them both at the same time by holding down SHIFT, and clicking them.

You will also need to map Topics to ID's, and use Style Sheets if you wish.

You might also like...

Comments

About the author

James Crowley

James Crowley United Kingdom

James first started this website when learning Visual Basic back in 1999 whilst studying his GCSEs. The site grew steadily over the years while being run as a hobby - to a regular monthly audien...

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Most software today is very much like an Egyptian pyramid with millions of bricks piled on top of each other, with no structural integrity, but just done by brute force and thousands of slaves” - Alan Kay