Improved Web Design
using HTML-Kit

by
Peter Lavin

Originally Published on the DevArticles web site

Overview

HTML-Kit is a free text editor that will allow you to have complete control over the code you create and will also help speed up web page development.

Coding a web page can become quite complex especially when you are using a variety of technologies. Unlike the C programmer who may create an application using one language, the web developer is often required to integrate different technologies. HTML-Kit has a number of unique features and plug-ins that help simplify this process.

To follow this discussion some knowledge of HTML and other web technologies is required.

Introduction

HTML-Kit, is a free, full-feature HTML editor available for download at http://www.chami.com/htmlkit/. Unfortunately for those of you who like to do your development work under different operating systems, HTML-Kit only runs under windows. The compressed file of this application is fairly small (3.1 MB) so it should download quickly regardless of your connection type. Despite its small size, HTML-Kit is an excellent application with many built-in features and optional plug-ins that make creating web pages easier. However, I should emphasize that it is not a graphic development tool such as FrontPage or Dreamweaver. HTML-Kit is still a text editor, albeit a very powerful one.

At the download site you will find a basic user manual and a number of tutorials that detail many of HTML-Kit’s features. For instance, if you have trouble installing the application, you’ll find help on this subject. I won’t duplicate any of that information here but simply refer you to the URL, http://www.chami.com/html-kit/support/refs/. Users unfamiliar with HTML editors might benefit by first reading the introductory tutorial at the above URL. What I intend to do in this article is highlight some of the unique features of this editor in order to get you off to a flying start.

Change Settings

To be most productive with HTML-Kit you’ll need to change the default settings. This is done from the “Preferences” menu option. You’ll find “Preferences” by choosing the “Edit” menu option and then going to the very last menu item. Open this item and you’ll see a bewildering number of choices. This can be very intimidating especially when you’re first starting with HTML-Kit. Don’t worry we’ll only be dealing with a limited number of them.

At the outset it is usually a good idea to turn off the auto complete feature. This is a powerful and useful feature but while you are learning to use HTML-Kit it can be rather disconcerting. To turn it off find the “Auto Complete” tab in the preferences window and make sure that the “Enable Auto Complete” box is not checked.

Now choose the “Startup” tab in the preferences window. Have a look at the text area on the right. Those are the default values for your (X)HTML page when you open a new document. If you don’t feel comfortable changing anything right now leave it, but in the future you will find this feature invaluable for setting default values for your (X)HTML pages.

If you are behind a proxy server you can easily copy your Windows proxy server settings by choosing the “Proxy” tab from the preferences window and then clicking the button labeled “Configure Windows Proxy Settings”.

You might also want to find the “Save” tab and have a look at the “maximum files in the Most Recently Used Files list”. I found the default number much too high and adjusted it down to “6”.

Those are really the only default settings that may need adjustment right away. One of the major attractions in using this tool is that it is highly configurable. Remember how to get to preferences because once you get comfortable using HTML-Kit you will want to return.

Getting Started

Graphic development tools have their place but most web developers want a configurable text editor that allows them to manipulate web pages at the code level. While there are definite advantages to using a text editor to create your HTML code most of us need a little help along the way. Who remembers all the attributes of all the tags or what the hex code is for a specific colour? And who writes perfect code each and every time? HTML-Kit can provide help for all these situations.

Can’t remember the attribute you are looking for? Type the opening angle bracket, the tag and then a space. Wait a half second and a drop down box of attributes appears. Choose the one you want by selecting it. Press enter and it will be copied into your page at the cursor location.

Sometimes you’ll find that your page is not displaying properly and you can’t figure out why. In this case HTML-Kit’s capability of finding matching tags can come in useful. Check out the “Tags” and “Navigate” menu options to utilize this feature.

At other times, your pages display perfectly but you know there are bugs. HTML-Kit can also be very helpful for debugging code. There are a couple of ways to do this.

First, you can invoke HTML Tidy through the options “Actions”, “Tools”, ”HTML Tidy”. This will split the screen and also open a message window at the bottom of the application. Read what appears in the message window and you’ll see what HTML Tidy thinks is wrong with your code. If you agree you do not need to manually type in the changes. The split screen that opened up on the left has incorporated the suggested corrections. Overwrite your original file by right clicking the left screen and choosing “Copy Output to Editor”. Unsplit the screen by clicking the “Editor” tab and all the changes will have been made. Don’t forget to save your changed file.

You can also check the syntax of your code by using one of the online validation services. Choose the menu options “Action” and “Online” and you’ll find that you can validate your HTML or CSS code.

Previewing and Uploading Files

One of the nicest features of HTML-Kit is the ability to preview your files without having to exit or without having to run an external application. To preview the current file all you need to do is click the “Preview” tab at the bottom of the “Editing Window”. The application defaults to showing how your page will look in Internet Explorer.

In preview mode you’ll notice that there is also a Gecko option. Choosing this option will show you how your page will appear in Netscape/Mozilla. Following the instructions at the URL, http://www.chami.com/html-kit/support/docs/pages/h000157.html and you can enable this capability. Even though Netscape/Mozilla does not have a very high percentage of market share these days it is well worth the effort to aim for cross-browser compatibility. Besides, some errors in your code will show up under Netscape/Mozilla but not under Internet Explorer.

You don’t have to get out of HTML-Kit to preview your HTML files and nor do you to FTP them to your server. You can do this by choosing the menu option “Workspace” and then “Add Folder/FTP Server”. In almost all cases you only need to type in the server address and the user name and password.

Uploading files is just as easy. You can make your workspaces visible in a separate window on the left by choosing the “View” and “Workspace” menu options. Double clicking a workspace will open it. Pick up the icon to the left of the “Split View” tab of the editing window and simply drop it where you want to upload it.

Plug-ins

Creating a web page can involve a variety of different technologies. A single page may require HTML, Javascript, PHP, SQL and CSS. The various plug-ins available for HTML-Kit address this issue and create one development environment that makes it very easy to use these disparate technologies. Again, I’m not going to document all the plug-ins available and their various features since this information is available online. I’ll just mention a few of them here.

If you want a quick Javascript reference you can download the twJavascript plug-in. A couple of PHP references are also available. A general one and a more specialised one that deals with PHP and MySQL. You can even integrate a spellchecker right into your editor.

You don’t even have to leave HTML-Kit to download plug-ins. Go to the “Help” menu and you’ll find an online link there.

Other Tips and Tricks

Need to quickly convert a Word document into an HTML file but you don’t want all that extraneous code that is generated? HTML-Kit can help you here. Save your Word document as HTML and then open it in HTML-Kit. Choose the menu options, “Actions”, “Tools”, “HTML Tidy” and finally “Strip surplus tags in Word 2000”. You may want to further edit by hand but most of the work will have been done for you.

If you decide to upgrade your HTML files to be XHTML compliant, again you’ll find that HTML-Kit can automate the procedure for you. This feature is also available under the “HTML Tidy” menu option.

If you find that you are often repeating the same piece of code you can save it as a “snippet” and insert it when needed. To do this copy the code you want to save into a separate document window and then choose “File”, “Save as Extra” and “Save as Snippet”. The code is then simply inserted by using the “File”, “Insert” and “Insert Snippets” menu options.

Like most people you are probably overwhelmed by the sheer number and variety of options and tasks available in HTML-Kit. You may find that you know a certain feature is available but you’ve forgotten which menu options to choose. Well, HTML-Kit has a way of handling this too. Add commonly used tasks to the “Favorites” tab on the “Actions Bar” (the tabbed strip below the tool bar) and they are only one click away. Do this by first making sure that the “Actions Bar” is showing by clicking “View”, “Actions Bar”. If you right click any button on any tab of the “Actions Bar” a pop-up menu allows you to add this item to your favourites.

Conclusion

Given the complexity and the variety of technologies used to create web pages using something more than a plain text editor is desirable. Because of its many options and plug-ins HTML-Kit can help relieve the developer’s burden.

Only a limited number of the capabilities of HTML-Kit have been touched on here but I think you can see that there are some very compelling reasons to use it as your HTML editor.

Look for a discussion of advanced features of HTML-Kit in a future article.

About the Author

Peter Lavin runs a Web Design/Development firm in Toronto, Canada. He has been published in a number of magazines and online sites, including UnixReview.com, php|architect and International PHP Magazine. He is a contributor to the recently published O'Reilly book, PHP Hacks and is also the author of Object Oriented PHP, published by No Starch Press.

Please do not reproduce this article in whole or part, in any form, without obtaining written permission.