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.
Comments