HTML Kit Tutorial

HTML Kit Tut

Hi, I am going to try and explain the little that I have learned about using HTML Kit as an HTML Editor.

HTML Kit is free. You can download it here.

Drag this arrow along with you to keep track of where you are in the tutorial.

It looks rather scary when you first open it and you don't really know where to start. I am hoping to try and make using it simple as it really is to use. For now we will stick with the default colors that is set up when you open HTML Kit.

I made this screen shot and I think that it is what you see when you first install HTML Kit on your computer and you open it up. It has been a while since I first set it up. Looks overwhelming doesn't it? I will try to explain what each part is about.

HTML Kit Overview

The main Menu: The items in the main menu are about the same as any window on the computer.

The Tool Bar: The items in the tool bar are pretty much the same as any window on the computer.

The Actions Bar: Now this is where things start to look different than any other bar that you might have encountered on the computer. I find that I use only the tools and the document buttons.

HTML Kit Overview

On the document tab you will find at the end of the tab is a button that showes a comment tag, you can just click on that boutton and you have a comment voila, just like that.

Change upper and lower case

On the tools tab you will find a button that allows you to change between upper and lower case when you look at the drop down menu.

The Workspace:You can open and close the workspace window as you please. It contains your templates and snippets.

You can access the work space window from the drop down menu under view.

You can also open it from the task bar on the left hand side. The second last button that is hard to read is the one that opens your workspace for your snippets. At the bottom of the widow you will see that I put an arrow just past untitled.

Work Space Tab 2

I have my workspace undocked. I keep it up in the top right hand corner. When I want to use a snippet, I just hover over the bottom of it until the double sided arrow show and drag it down so I can see what is there. I have a screen shot below.

Comment Tag

Some people are having trouble with their workspace not showing properly. There is a place that you can reset your toolbars and your menus. I do not know if this works to get your workspace to show properly or not. I hope that some one lets me know please. There is a screen shot below of where to reset your toolbars and your menus.

Reset toolbars

The Editing Windwow: Now that is where the work is done for our scripting lessons.

The Message window: I close with the little x in the top left corner, I have never found a use for it yet with our myself.

The Task Bar: Tells you what you have open. Right now in the screen shot, I have four lessons open and I am looking at lesson 3a.

Overview of my open HTML Kit

Next I think that we should talk about the Preferences that you can set up the way you like.

This screen shot shows one way to find the preferences tab.

See my arrow, click on that tab and your preferences dialog window will show up. It looks like this. We will not change the settings in all the tabs. We are starting with the General tab. The screen shot below is how I have mine set up.

This is how I have my start up page set up.
You can put your base script in as your default script in the top right hand corner.

You can change the size and color of your font in HTML Kit in your preferences as shown below in the screen print.

General tab

How to save Snippets

To save a snippet, highlight the text that you want saved as a snippet. Go to the save icon, as shown above, and click the drop down arrow and choose "Save Selection as Snippet ".

A window comes up and askes you to name the snippet. Give it a name as shown in the screen shot below, put your name for the author and select user from the drop down list on the bottom right hand corner. Then click "ok" and your snippet is saved.

Name Snippet

Now, if you want to put your snippets into folder so that you can mannage them better, you can do that too.

Right click on a white space in your workspace. Scroll down about one third of the way to new and choose "Create new folder". Another window will show up as shown below and you can give your folder a name.

Create New Folders

Now, the only way that I have found to put your snippets into one of your folders is to use Windows Explorer and move them in there. It is show below in a screen shot.

Go to your C drive/Program Files/Chami/HTML Kit/Snippets/User and you will find your snippets and be able to move them around.

Create New Folders

This is what I have done so far on our HTML Kit tutorial.

Termi