Authoring Indexes and Topics

Visual Help highlights complex or unusual application features. It does not need to discuss every task a user can perform in a specified context.

To create effective visual Help:

Use the specified HTML tags as described in this section.
Where possible, limit topics to three lines to avoid scrolling.
Limit indexes to 10 topics or less.
Use a title and bitmaps to provide additional information.
Use the bitmaps provided for faceplate keys.
When you use a bitmap, provide alternate text for the TTS engine.

Windows CE for the Auto PC uses a subset of standard HTML tags for authoring visual Help. Using this subset ensures that visual Help displays correctly on an Auto PC. Each topic or index is authored in a separate HTML file with an .html extension. The following table shows the HTML tags that visual Help supports.

HTML	Description
<HTML></HTML>	Begins and ends the file
<HEAD></HEAD>	Defines the file heading
<TITLE></TITLE>	Defines the title for Help indexes and topics
<BODY></BODY>	Defines the body of the file
<IMG>	Positions bitmaps; Only the SRC and ALT attributes are supported
<A HREF></A>	Jumps to topics from the Help index
<MENU></MENU>	Lists the Help index jumps
<LI></LI>	Lists each jump
<BR>	Breaks a topic text line
<TABLE></TABLE>	Creates a table.

The Help index is a list of links to visual Help topics for an application screen. A visual Help topic can be text only, text with inline bitmaps, a full-screen bitmap, or a table with bitmap bullets or numbered steps. Windows CE for the Auto PC automatically adds navigational arrows to the visual Help screen based on the active keys for an index or topic.

Inline bitmaps for faceplate keys are included in Windows CE for the Auto PC and can be used in Help. For the bitmap file names, see the section “Bitmaps.”

All HTML files and bitmaps must be installed in the same directory as the application executable file.

To code a Help index

Enclose the index title in <TITLE> tags.
Enclose the list of links in <MENU> tags.
Use an <LI> tag to start each link as a list item.

The following code example show how to code an index in HTML.

<HTML>
<HEAD>
<TITLE>Radio Help Tips</TITLE>
</HEAD>
<BODY>
<menu>
<li><a href="rad-main-am.html">Change radio bands</a>
<li><a href="rad-main-intro.html">Seek for a station</a>
<li><a href="rad-main-manual.html">Enter station numbers</a>
<li><a href="rad-main-preset.html">Add a preset station</a>
<li><a href="rad-main-goto-preset.html">Go to a preset station</a>
<LI><a href="com-goto-audio.html">Change audio settings</a>
<li><a href="rad-main-off.html">Turn off the radio</a>
<Li><a href="com-menu-show.html">Show program options</a>
<Li><a href="com-menu-dismiss.html">Hide program options</a>
</menu>
</BODY>
</HTML>

To code a text Help topic

Enclose the topic title in <TITLE> tags.
Enclose the topic text in <BODY> tags.
Be sure no spaces or carriage returns appear before the first line of text.
Check that lines of text wrap correctly on the emulator or a device, adding a <BR> tag where necessary to force wrapping.

To code a Help topic with inline bitmaps

Enclose the topic title in <TITLE> tags.
Enclose the topic text in <BODY> tags.
Be sure no spaces or carriage returns appear before the first line of text.
Use an <IMG> tag to include inline bitmaps.
In the <IMG> tag, provide the source file (SRC) and alternate text strings (ALT). Be sure the alternate text you provide makes a complete sentence for the TTS engine.
Use Nbsp.bmp to include a space after a bitmap.
Check that lines of text wrap correctly on the emulator or a device, adding a <BR> tag where necessary to force wrapping.

The following code example shows how to code a topic with text and inline bitmaps in HTML.

<HTML>
<HEAD>
<TITLE>Change to AM or FM</TITLE>
</HEAD>
<BODY topmargin=0 leftmargin=0>
Press <img src="entr.bmp" alt="the enter key">.<br>
Or, say <img src="lftvce.bmp">AM<img src="rtvce.bmp"><img src="nbsp.bmp"> or <img src="lftvce.bmp">FM<img src="rtvce.bmp">.
</BODY>
</HTML>

Note This example shows line breaks for clarity. The HTML engine does not support line breaks or spaces before the first line of text in the topic body.

To code a Help topic with a full-screen bitmap

Enclose the topic title in <TITLE> tags.
Include one or more full-screen bitmaps in the <BODY> tag. In the <IMG> tag provide the source file (SRC) and alternate text strings (ALT). Be sure the alternate text you provide makes a complete sentence for the TTS engine.

The following code example shows how to code a topic that is a full-screen bitmap in HTML.

<HTML>
<HEAD>
<TITLE>CD Player keys</TITLE>
</HEAD>
<BODY topmargin=0 leftmargin=0>
<img src="dp-main-keys-1.bmp" border=0 width=223 height=44 alt="To play or pause, press Enter. To enter a track, press the number keys.">
</BODY>
</HTML>

Note You can perform preliminary testing of the visual Help in an Internet browser.

To code a Help topic with numbered steps or bullets

Enclose the index title in <TITLE> tags.
Enclose a two-column table in <BODY> tags.
Using <TABLE> tags provides a consistent text indent. Specify the width of the table as 220 and the width of the columns to add up to 220. For numbered steps or bullets, use column widths of 15 and 205.
Place a bitmap bullet or step numbers in the left column, and place the procedure text in the right column.
Do not use symbols as bullets.
Use an <IMG> tag to include inline bitmaps.
In the <IMG> tag, provide the source file (SRC) and alternate text strings (ALT). Be sure the alternate text you provide for the TTS engine is a complete sentence.
Use Nbsp.bmp to include a space after a bitmap.
At the end of each step, add the Pau.bmp bitmap with alternate text to force a pause from the TTS engine.
The Pau.bmp bitmap is 1 x 1 pixel and black and should not be visible in visual Help. The following code example shows how to add this bitmap.
```
<img src="pau.bmp" alt="\pau=800\">
```
If a numbered step ends with a bitmap, you can add the \pau=800\ code to the end of the alternate text for that bitmap.
Check that lines of text wrap correctly on the emulator or a device, adding a <BR> tag where necessary to force wrapping.

The following code example shows how to code a topic with numbered steps in HTML.

<HTML>
<HEAD>
<TITLE>Go to a program</TITLE>
</HEAD>
<BODY topmargin=0 leftmargin=0>
<TABLE valign=top cellspacing=0 cellpadding=0 BORDER=0 WIDTH=220>
<TR>
<TD valign=top height=44 WIDTH=15>1.</TD>
<TD valign=top height=44 WIDTH=205>Press <img src="wince.bmp" alt="the Start key"><img src="nbsp.bmp"> to move to a program icon.<br>
Or, press <img src="lftrt.bmp" alt="the left and right arrow keys \pau=800\">. </TD>
</TR>
<TR>
<TD valign=top height=44 WIDTH=15>2.</TD>
<TD valign=top height=44 WIDTH=205>Press <img src="entr.bmp" alt="the Enter key"><img src="nbsp.bmp"> to go to that program.</TD>
</TR>
</TABLE>
</BODY>
</HTML>