Lab: Building and Using an HTML Help File | MCAD(s)MCSD Self-Paced Training Kit(c) Developing Web Applications With Microsoft Visual Basic. Net and Microsoft V[. .. ]0-315

Lab: Building and Using an HTML Help File

In this lab, you ll create a compiled HTML Help file containing several topics and contents, Index, and Search features. You ll then link the Help file to a Web application.

Estimated lesson time: 30 minutes

Exercise 1: Create a Help Project

In this exercise, you ll use the skills you learned in Lesson 2 to create a new HTML Workshop Help project, create five Help topic files, and add those files to the Help project. To keep this exercise simple, the content of the Help topic files is minimal, although you can supply any additional content you feel like creating.

To create a new HTML Help project

Start the HTML Help Workshop. Choose New from the File menu, select Project from the New dialog box, and then follow the New Project Wizard pages to create an empty project in a folder named HelpDemo on your computer.

Create five new HTML files titled Topic1 through Topic5. Add headings and save the files as shown in the following table:

Title	Heading	Save as
<title>Topic1</title>	<h1>Topic1</h1>	Topic1.htm
<title>Topic2</title>	<h2>Topic2</h2>	Topic2.htm
<title>Topic3</title>	<h3>Topic3</h3>	Topic3.htm
<title>Topic4</title>	<h3>Topic4</h3>	Topic4.htm
<title>Topic5</title>	<h2>Topic5</h2>	Topic5.htm

Add each of the topic files to the Help project. When complete, the HTML Help Workshop should appear as shown in Figure 14-16.

Figure 14-16. Creating a Help project

Exercise 2: Enable Contents, Index, and Search

In this exercise, you ll continue to use the skills you learned in Lesson 2 to automatically generate Contents, Index, and Search features when the Help project is compiled.

To enable Contents, Index, and Search features

In the Help project s Options dialog box, click the Files tab, select check boxes to automatically create a contents file and to include keywords in the index, and then type names for the contents and index files, as shown in Figure 14-17.

Figure 14-17. Creating contents and index files automatically
Click the New button on the HTML Help Workshop toolbar, and select Index file to create a new, empty index file. Save the file as Index.hhk. This file must exist in order for the Help compiler to build the index entries.
Click the Compiler tab, and select the Compile Full-Text Search Information check box, as shown in Figure 14-18. Click OK to close the dialog box.

Figure 14-18. Enabling full-text searches
On the Project tab of the HTML Help Workshop, click Save All Files And Compile. The Workshop builds the contents, index, and search information and then compiles the file and displays a log of the results, as shown in Figure 14-19.

Figure 14-19. Compiler log
Click View Compiled File on the HTML Help Workshop toolbar, enter the location and name of the HelpDemo.chm file in the View Compiled File dialog box, and then click View. The Workshop displays the compiled Help file, as shown in Figure 14-20.

Figure 14-20. Compiled Help

Exercise 3: Add Index Keywords

In this exercise, you ll add indexed keywords to the Help topic files and then recompile the Help file to create automatic index entries.

To add index keywords to topic files

In the HTML Help Workshop, open the Topic2.htm topic file, and insert a new line between the <body> </body> tags.
From the Edit menu, choose Compiler Information. The Workshop displays the Compiler Information dialog box.
Click Add, type Item1 as the name of the index keyword to add to the topic, and then click OK. Click OK again to close the Compiler Information dialog box and add the index entry to Topic2.htm. The following HTML shows the generated text that s added to Topic2.htm:
```
<Object type="application/x-oleobject"  class> <param name="Keyword" value="Item1"> </OBJECT>
```
Copy the preceding HTML to each of the other topic files. Add or change the keyword parameters to create different keywords. For example, the following HTML inserts three index keywords in a topic file:
```
<Object type="application/x-oleobject"  class> <param name="Keyword" value="Item1"> <param name="Keyword" value="new"> <param name="Keyword" value="improved"> </OBJECT>
```
If the Help file from Exercise 2 is open, close it. Recompile the Help project, and view the resulting index. It should appear similar to Figure 14-21.

Figure 14-21. Keywords in the index

Exercise 4: Link Help to a Web Form

In this exercise, you ll use the skills you learned in Lesson 3 to link the compiled Help you created in the preceding exercises to a simple Web form.

To link compiled Help to a Web form

Create a new, empty Web application project named vbHelpDemo or csHelpDemo.

Add the following HTML to Webform1 to instruct the user how to download the Help file and to provide a way to display Help on the Web form:

<p>To use Help with this Web form:</p> <ol> <li><a href="HelpDemo.chm">Click here</a> to download Help.</li> <li>Save the file to the c:/help folder on your computer.</li> <li>Then use the buttons below to display Help topics.</li> </ol> <INPUT type="button" value="Show Help" onclick="window.showHelp('c:\\help\\HelpDemo.chm')"> <br> <INPUT type="button" value="Show Topic3" onclick="window.showHelp('c:\\help\\HelpDemo.chm::/Topic3.htm')"> <br> <INPUT type="button" value="Show Topic5" onclick="window.showHelp('c:\\help\\HelpDemo.chm::/Topic5.htm')">

Copy the compiled Help file created in the preceding exercises to the Web application project directory.
Run the Web application. After you download the Help file, clicking the HTML Button controls display Help, as shown in Figure 14-22.

Figure 14-22. Displaying Help from a Web form