Let's look at the HTML-Kit Auto Complete feature. It would help if you have HTML-Kit open while you go through this so you can try this out as we go.

First, what is Auto Complete? Auto Complete allows you to type some text, normally the beginning of an html tag, press the spacebar and the rest of the text/tag is completed for you.

Let's try it out. In your favorite html editor (that's HTML-Kit in case you didn't know) type in:

<a

and press the spacebar. And like magic you end up with this (the | character inside the quotes of href is called a pipe, and it represents where the cursor is located at this point):

<a href="|" title="" ></a>

So how was this magic preformed? Easy, the '<a' is some predefined text listed in the Preferences Auto Complete section. Let's go see where this magic stuff is stored and I'll explain it once we're there.

From here on I'll be calling these Auto Complete entries Shortcuts. The main reason is that's how they're referred to on the screen.

From the menu select Edit | Preferences. Once the Preferences window displays click on the Auto Complete tab. It should look close to this:

There's a lot here so let's go slow so we don't miss anything. I've numbered portions of the image so you'll know where to focus when I'm talking about something. I'll use [1] to designate I'm talking about something at the number 1 spot, and so on.

At [1] make sure Auto Complete is enabled (we'll talk about Scroll lock later). By default this box should be checked. If you ever want to disable Auto Complete, just un-check it.

At [2] notice there are two groups available; Default and User. Default should be highlighted, if not, click on it once to select it. In Default are the standard shortcuts that come with HTML-Kit, User are the shortcuts you define (which we'll do later on, be patient).

Although you could enter new items into Default or even modify what's there, it is not recommended. If a new release or update of HTML-Kit ever came out your shortcuts could be overwritten. I'll show you a trick later on that you can use to work around the default set up.

Notice also that Default and User have checkboxes. You can disable or enable each group of Shortcuts by checking and unchecking these boxes. This can come in handy when you don't want to invoke one group or the other.

At [3] you see a list of all of the current shortcuts in Default. If you want, take a moment to look them over. Finished? Ok, the items under the Shortcut column is what you type in to get what you see in the Value column to the right.

So if you type in any of the Shortcuts as listed in the Shortcut column, click the spacebar, you end up with what's to the right of it. Notice the || looking characters? This represents where the Enter key has been used. What's behind one of these characters will end up on another line in the results. We'll do some of that later on.

Notice that each Shortcut has its own checkbox. You can enable or disable individual items by checking or unchecking these boxes.

Now let's go make our own shortcut. Click on User in area [2] so it's highlighted. Your Shortcut list in area [3] may be blank right now.

Now near [5] (under [2]) click on the Add Shortcut button.

In the input window type in:

<div>

and click the OK button.

It may appear that nothing happened but it really did. Our entry has been entered into the list. Notice that the cursor is now in area [4] (this is the Edit Shortcut Value area). Here is where we'll type in the results we want. In area [4] type in:

<div>|</div>

Notice the pipe character in between the div tags. The pipe character ( | ) tells HTML-Kit where to put the cursor in our resulting text.

Click OK at the bottom-right of the Preferences window to close it.

Click the New Documents icon on the toolbar or use menu File | New Document. In an appropriate place type in

<div>

and press the spacebar. You should have ended up with:

<div>|</div>

and your cursor located where the pipe character is located in the example text. If you didn't get the results above go back and double check what you've done.

Now you can add your own Auto Complete Shortcuts. Are you ready for some more? Then let's go...

Ok, let's get to it. We're going to talk about editing Shortcuts and things like that, then we're going to get into some of the finer points.

Let's modify our div tag Shortcut we made earlier. Remember, the Shortcut is what we use to get the results we want. The results, or Shortcut Value is something else. We'll talk about that later.

Open up the Preferences window and go to the Auto Complete tab.

Click on the User group in area [2]. Then click on the <div> Shortcut in area [3]. For our example, let's say we're tired of all the extra effort it takes to add the last '>' character.

With the <div> Shortcut selected, click the Edit button. Notice the <div> Shortcut is in edit mode. Remove the '>' character from the shortcut. Just click somewhere else on the screen to get out of edit mode.

Now all you have to do is type '<div' and press the spacebar to get '<div></div>'. Look at all the work you've just saved yourself typing in all those extra characters <grin>.

Another way to edit the Shortcut is to highlight the Shortcut, wait a second or two, then click on it again. Go ahead, try it.

Don't delete our <div> Shortcut yet, but just so you know, if you want to delete a Shortcut, just highlight it and click the Delete button and POOF! It's gone.

You know what? Our Shortcut needs some class, so let's give it some. If it isn't, highlight our <div> Shortcut by clicking on it. Area [4] is where we edit our results, or Shortcut Value.

In area [4] go in and modify the result so it looks like this (don't forget the pipe character)

<div class="|"></div>

Now when we invoke our Shortcut it will have some class. You can remove the class if you want to, we just did that for demonstration purposes.

Note that you can change the Shortcut Value at anytime by highlighting the Shortcut and just make the changes in the Edit Shortcut Value window at [4].

Now some of the finer points of Auto Complete.

At [1] notice the second checkbox 'Require Scroll Lock'. If you check this box the Scroll lock will need to be activated before Auto Complete will function. This is a quick way to turn Auto Complete On or Off without having to come back into Preferences.

At [6] we have the events that will trigger, or invoke Auto Complete. Basically what it says is "invoke Auto Complete when there is a blank space added behind the Shortcut (e.g. pressing spacebar) or if the F4 key is pressed." That's right, you can invoke Auto Complete by pressing the F4 key.

Also make note of the comment "except when the SHIFT key is down." This means you can keep Auto Complete from being invoked by holding down the SHIFT key when pressing the spacebar for example.

Although I personally advise against it you could remove the '\s\' to prevent Auto Complete from being invoked when the spacebar is pressed and only have it invoked when the F4 key is pressed.

Let's do one more User shortcut. Click the Add Shortcut button and type the following text in the Add Shortcut window and click OK.

 <dl> 

Now in the Edit Shortcut Value window ([4]) type in the following (don't) forget the pipe character to place the cursor)

<dl>
<dt>|</dt>
<dd></dd>
</dl>

Now when you type in <dl> and press the spacebar you'll end up with all of the related tags too. Cool.

One final piece of information before we quit. Let's say you want the title attribute in your anchor tags. You could just edit the Default Shortcut, but remember I said your values could be overwritten in the future? So here's what you do.

Highlight the Default group and uncheck the anchor Shortcut.

Highlight the User group and add your own anchor short like this

<a

Then in the Edit Shortcut Value window type in

<a href="|" title=""></a>

Now you've got your custom anchor tag Shortcut and you didn't have to change the Default settings.

A final word of caution. It is possible to introduce erroneous content and/or tags into your web page using Auto Complete, with the risk increasing as your list of User Shortcuts grows. This is especially true for beginners and/or people who don't validate their code.

What happens (or what could happen) is you're typing along and happen to type in some text that matches one of your Shortcuts. When you press the spacebar to continue on, the Shortcut Value is entered into your code.

For the more experienced who are aware of this potential issue it's not that big of a deal because they recognize it when it happens or catch it with some type of validator.

So be aware of this potential issue and validate your code!

Well I hope all of this has been worth it. Happy Coding!

Long Live HTML-KIT ! Woo Hoo !!!!!