Import from HTML

Importing From HTML

ClickHelp allows importing content from HTML files. 

To do this, follow the steps below:

• Go to the Portal Dashboard page and hover the mouse pointer over the plus button.
• Click Import Existing Manual.
  
  
• Choose HTML zipped from the list of formats and pick whether you want to create a new project or add the imported topics to an already existing one.
   
  If you've chosen to create a new project, give this project a new name and URL of your choice.
• Click Next.
• Drag&drop your archive or browse your way to it. It will appear on the list of uploaded files.
   
  
• Set up the import details.
  

  If you are importing an HTML archive into an existing Project , you'll be offered to decide where to store the imported images. Consider creating a separate folder for your imported images to improve your Project's file structure and make it easier to handle it in future.

      
• Choose the correct Topics Encoding on the right side of the Wizard or just leave the Auto Detect setting.
   
• Choose the way how the imported document will be split into topics.
  
  
• Click Next and wait for the Wizard to complete importing your documents.
• Click Next to open the final step of the import process - you will see the links to your imported project and style files.
  

This is how you can configure and complete your HTML documents import in ClickHelp .

Preparing HTML For Import And TOC Hierarchy

To prepare your content for the import, you need to create a .zip archive with all the necessary files included (HTML, CSS, JS, images).  

The TOC created by ClickHelp depends on the hierarchy of folders containing the HTML files in the archive you are importing. It means that your TOC can be organized differently based on the archive folders. Let's take a look at some import examples:

• All the HTML files are on the same level, in one folder of the archive:
  
  introduction.html
  support.html
  system-requirements.html
  upload.png
  style.css
  
  The resulting TOC will have no hierarchy levels. It will look like this:
   
  
  
• Some of the HTML files reside in a sub folder. In our example, the Introduction folder contains the introduction.html and support.html files.
  
  Introduction
  ---- introduction.html 
  ---- support.html 
  system-requirements.html 
  upload.png 
  style.css 
  
  After the import, the new Project will have one folder-type node without a topic (corresponds to the Introduction folder) with two child nodes - Introduction and Support.
   
  
  
• In case you want to create a parent node with some content inside rather than having folder-type nodes without a topic, you need to rename the HTML file to be turned into the parent node to index.html.
  
   Introduction
  ---- index.html
  ---- support.html 
  system-requirements.html 
  upload.png 
  style.css 
  
  In this case, the Introduction node will become a regular topic, and its content will be taken from the index.html file.
   
  

HTML Character Encoding

To make sure the HTML content is processed correctly, it is strongly recommended to specify the Character Set in your source HTML files.

There are various character encodings. One and the same character can look different in different character sets. It is a general recommendation for HTML coders to specify the character set of their file in the file content. This can be done easily by adding a special meta tag to the HTML file:

HTML4 : <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

HTML5 : <meta charset="UTF-8">

To learn more on HTML character sets, check this W3Schools document: http://www.w3schools.com/html/html_charset.asp

If you see some strange characters after the  HTML or CHM import, this means that the character set is not specified in the source files. Specifying it will help ClickHelp process all the characters correctly.

If no character set is specified, UTF-8 is assumed by default.