Basic Working Procedures > Links, Anchors, Macros, Scripts and HTML

The Insert HTML Code Object tool in Write > Insert Object allows you to add special features or formatting to your topic pages with HTML code. For example, you can write dynamic HTML code with JavaScript to add features not available directly in Help & Manual.

This function "injects" HTML code into your topic at the point where you insert it. The code is entirely your responsibility and is not checked or parsed by Help & Manual in any way, so you need to be familiar with HTML coding.

Productivity Tip

You can resize the HTML code objects in your topics to make their contents visible. You can also the code object editor for editing larger blocks of code.

HTML code objects are supported in all HTML-based output formats. However, Windows Exe eBooks only support plain HTML code and basic CSS, any scripts will be ignored because the embedded eBook viewer does not support JavaScript. The ePub eBooks standard includes scripting but most ePub readers do not so it should be avoided as it will hardly ever work,

If you want to use this feature in projects that will also be published to formats where it is not supported you need to use Help & Manual's conditional output features to create alternative text for those versions.

Note that the Insert HTML Code Object tool inserts the code directly in the body of your topic. If you want to insert scripts in the <head> section of your topic page you must do so in the HTML template, either directly or by reference. See below for more information on this.

1.Click in the editor at the point where you want to insert the plain HTML code and select the HTML Code Object tool in Write > Insert Object.

DLG_Insert_HTML

2.Type your code in the editing window displayed. You can resize the window for easier editing by dragging on the lower right corner.

The Load from File and Save to File functions allow you to save blocks of code in external text files for reuse.

If you reference external files in your plain HTML code you are entirely responsible for making sure that the files are included in your output. Help & Manual does not parse or check the code and it will not do this for you. There are two ways to make sure that referenced files are included in your project:

Method 1: Adding the files to the Baggage Files

This is the simplest solution. The Baggage Files function provides a quick and easy way to integrate external files in your project and make sure that they are available to the compiler and included in your output.

•See Using Baggage Files for details on using this function.

•See Graphics references for more details on referencing graphics files. Since graphics files are often large it is not always a good idea to add them to the Baggage.

Method 2: Integrating the files in your output manually

This is not really necessary since it is much easier to add any referenced files to your Baggage. The following instructions are just included for the sake of completeness.

•In WebHelp you must manually copy the files to your output directory if you have not added them to the Baggage Files (see above).

•In HTML Help you need to tell the HTML Help compiler to add the files to the .chm file. Proceed as follows:

1.Copy the external file(s) to your project folder (the folder containing your .hmxz or .hmxp project file).

2.In the Project Explorer open Configuration > Publishing Options > HTML Help > Extended HHP Settings.

3.In the editing box add the following entries, replacing the dummy filenames in the examples with your own files (one file per line):

[FILES]
..\donald.js
..\mickey.asp

Don't add a second [FILES] header if one already exists. Enter each external filename on its own line below the [FILES] header and precede it with the ..\ relative path reference.

This example assumes the files are stored in your project directory. (This is necessary because the project is published from a temporary subdirectory in the project directory, so files in the project directory are one level up.) If your files are located anywhere else you need to adjust the ..\ relative path reference accordingly.

If you reference JavaScript or other script code in your HTML code objects you may want to insert scripts containing the functions to be executed in the <head> section of your HTML topic page that you then reference and run from the code objects inserted in the body of your topics. You can't do this directly in the topic page because this only inserts the code between the <body> and </body> tags in the final HTML page.

The code for the sections of your HTML pages above and below the <body> and </body> tags is provided by your HTML topic page templates, which you can access and edit in the Project Explorer. You can add script code and references to external script files to the <head> section of your pages by editing these templates. By default you have one HTML topic page template called Default, which is used for all topics. However, you can create as many different templates as you like and assign them to individual topics in the tab behind the editor.

In addition to this you can use HTML variables that you can redefine in individual topics to add different script and code to the <head> section of every single topic. To do this you insert the variables in your template and then redefine their content for individual topics in the tab behind the editor.

See Using HTML Templates for general information on how to access and edit your HTML topic page templates. See The power of editable variables for details on how to use HTML variables to insert individual code in your templates on a per-topic basis.

Inserting HTML code objects

Inserting HTML code objects

Method 1: Adding the files to the Baggage Files

Method 2: Integrating the files in your output manually