Improved Web Design
Originally Published on the DevArticles web site
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.
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.
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.
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
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
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.
Creating a web page can involve a variety of different
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.
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
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.
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
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.