HTML Kit 292 has long been my HTML editor of choice.  A few years back they stopped development on the standard editor and released HTML Kit Tools.  HTML Kit Tools is an appropriate editor for beginners to use.  It also contains advanced functionality for more skilled developers.  My review will focus on elements important for the beginner.  Four additional blog posts will follow focusing on some “how-tos”.

The latest version of HTML Kit Tools is version 20110721.

HTML Kit Tools is not free.  I know, I know, I try hard to save you money!  It used to be a mere $25 (this was while it was still in Alpha phase).  The cost is now $79.  Pay attention to the registration page as discounts are offered.  By registering you get to download HTML Kit Tools, receive all program updates and have access to several of the other resources created by Chami.  You can download a trial to see if it is the right editor for you.

An Editor for the Aspiring Hand Coder

There are essentially two kinds of HTML Editors.  WYSIWYG editors allow users to drag and drop elements on the screen to arrange the structure of a web page.  The code is hidden from the creator.  ”Text” based editors are for those who want to hand code their websites.  While WYSIWYG editors might be suitable for beginners, I cannot advocate them.  WYSIWYG editors are limiting and will stunt you’re ability to learn.  If you are serious about creating your own website and making your own web pages, it is worth the effort to understand the HTML code.  HTML Kit Tools is my recommended HTML editor for those seeking to hand code their own web development.  HTML Kit Tools employs a number of features to make the job of hand coding easier!  Some will be discussed below.

Why for Beginners?

Beginners need to learn in as pure an environment as possible.  Advanced users need clear access to the code plus additional functionality to speed up the process.  HTML Kit Tools accomplishes both.  There are several “text” based commercial html editors that really are WYSIWYG editors in disguise.  They allow users to switch back and forth between the code and design view.  However, a lot of the built in functionality in some of those tools creates a fair amount of their own code.  In the end, it is messy (very very messy, sometimes almost impossible to debug and troubleshoot)!  With HTML Kit Tools, the beginner has the ability to clearly see their code.  It is a relatively clean interface that offers direct transparency into the code while providing the developer a set of tools that can make their job easier.

The Start Tab

The interface is quite simple.  A ribbon bar at the top.  Function tabs on the right.  Below is a screenshot of the interface.  Nothing cluttered.  Nothing messy.

On the right is a series of tabs.  The default to be displayed is the Start tab.

From here a developer see recently opened projects, folders and files.  The user can access templates as well as set of Getting Started wizards.  A set of commonly used commands is available as well.

The Project Tab

The Project Tab is another useful tab.

From here the developer can access all their files organized by project or folder.  This includes files on a local drive, a network drive or one of my favorite features: on a FTP server.  You can connect to your FTP server and directly edit your files.  A great time saver!

The Start Ribbon

The ribbon at the top of HTML Kit Tools is in the style of Microsoft Office 2007.  If you are new to HTML Kit Tools, you can  learn to navigate pretty easily.

From here developers can:

• Create new documents
• Open Files
• Show Projects
• Save
• Upload
• Print
• Customize the HTML Kit Tools interface
• Add Code Snippets
• Find various help resources

The Edit Ribbon

The edit ribbon offers all the standard kinds of editing functionality.

• All the various copy and paste functions
• The Copy Paste Pad – which I love.  Beats opening up Notepad to hold text that you have copied out of some code and need to hold it to the side for awhile.
• Delete
• Undo
• Various Document Viewing options: view hidden characters, create duplicate documents, expand and collapse code elements, word wrap, etc.
• Find/Search
• Create a document structure view that looks like a Mind Map
• Create tags within your code for easy navigation
• Insert Comments
• Wide variet of keyboard shortcut setups

There are some pretty cool little functions on the Edit bar that are nice little time saving touches.  Beneath some of this functionality is an advanced layer that allows for a custom setup of the HKT workspace.

The Tools Ribbon

The Tools Ribbon provides some of the meat and potatoes to HTK functionality.

• Text Tools – various functions that can transform text to all UPPERCASE or convert special characters to HTML entities
• Compare Documents
• Color Picker
• Check the response of web servers
• File Watcher
• Preview document in IE,  Firefox, Opera, Safari or Chrome
• Preview and Active Preview (see changes to your page while you type)
• HTML Tidy validation
• W3C arkup validation
• W3C CSS Validation
• Spell Check

In short, the Tools Ribbon provides what you need to proof and preview your pages.

The HMTL Ribbon

The HTML Ribbon provides tools to enable you to code more quickly.

• Add document sections, headings or comments
• Create paragraphs, bold, italic, blockquotes and line breaks
• Add order and unordered lists
• Add links and anchors
• Add images, objects and parameters
• Add forms, tables, divs, spans and inline styles

With this ribbon, the beginner can pickup all the basic HTML elements quickly and easily.  Combined with the preview mode, beginners can play, change things around and learn how each element affects a web page.

All in all, HTK provides an interface and the toolset that is beginner friendly.  A newbie should be able to use HTK to produce very basic pages and grow into the tool to develop more advanced code.

View the video below to take a tour of HTML Kit Tools.  The video will give you a better idea of all the functionality available.

If you are considering HTK as your editor of choice, remember to double check the software registration page often to check for discounts.

HTML Kit 292 is my recommended free html editor and HTML Kit Tools is my recommended commercial html editor.