Software

This page describes a range of software which can help you progress from using solely KompoZer, to using text editors via the Handcoder extension, to working largely with text editors and related tools.

KompoZer

KompoZer LogoYou can download the latest stable version of KompoZer (currently 0.7.10) at the official homepage where you can find Windows, Mac and Unix versions. Installation is simple - just create a new folder (directory) where you normally install your software and expand the package into that. While that is standard practice for Mac and Unix users, it is less typical for Windows so this installer has been created to make the process more intuitive. Note that there is a new (0.8) version of KompoZer being developed (see here for details) but for now these instructions pertain to 0.7.10.

Handcoder

Handcoder is an "extension" that was developed to link KompoZer to text editors. Obviously you need to select and install a text editor to use this extension - see some examples below. To install this go to the Handcoder home page and click on the relevant flag in the top left box. Download the extension (Handcoder-0.3.4-en.xpi) to the same folder as KompoZer. Open KompoZer and go to the Extensions option in the Tools menu, click the install button and navigate to the handcoder.xpi. That done restart KompoZer and go to the Tools Menu, select Handcoder and then Options and link it to the text editor of your choice. You are ready to go! Open an html file, (possibly hit Save), then go Tools - Handcoder - Text Editor and you should see your code displayed in a much easier fashion to edit than in the Source View of KompoZer.

Note that there is also an option to link HTML Tidy (see below) to KompoZer but my recommendation is that you do not do that and instead use this utility inside the text editor.

Text Editors

Despite the superficial similarities, text editors are rather different beasts to the more familiar word processors. The focus is switched firmly from modifying the appearance of the text to providing an environment to facilitate computer coding - in our case HTML and CSS but you will usually find that most editors are set up to handle many different computing languages. From our viewpoint two of the most important tools are "syntax highlighting" where the program automatically colours the HTML and CSS code for easy visualization and having an embedded versions of the program HTML Tidy which renders messy code into something far more readable.

PSPad screen capture

Looking at this screen capture from the use of the PSPad Editor, you can see that the program has coloured all the HTML tags purple (and, not shown, if you highlight an opening tag it will highlight the corresponding closing tag regardless of how far away it is in the document); made links, ids, classes etc. blue; and picks out the php include header file in green. These colours don't get assigned until the tag etc. is complete so you get an error check at the same time as the visualization. We'll discuss the use of Tidy in more detail later but for now rest assured that I didn't make all those nice indents in the code as I was typing, Tidy did it for me!

Windows

If you are running a version of Windows then the built-in text editor, NotePad, will work with Handcoder to give you a means to edit the code directly. However, the experience will be greatly enhanced by using a more advanced alternative which offers a better interface and extra tools. Two good, and free, alternatives are:

PSPad Logo
PSPad
This is my usual choice when working on Windows. Although not open source the program is freeware and has had a number of extensions written for it. There's an easy to use, and relatively easy to configure, version of HTML Tidy enclosed.
PSPad Homepage
Notepad++ Logo
Notepad++
Notepad++ is also free, can be extended and has an HTML Tidy version.
Notepad++ Homepage

Mac

In the Mac OS X sphere I've had difficulty getting the native TextEdit to work well with Handcoder but again I can recommend two excellent free / inexpensive alternatives, namely;

Smultron Logo
Smultron
This program is my choice when working in OS X. It was something of a poster child for the Open Source movement on the Mac until development was dropped for a while - in a similar scenario to KompoZer, the lead developer had to get on with life. It has recently resurfaced as an inexpensive app on the Mac App Store.
In addition to syntax highlighting there's a HTML preview feature (where you see what your page will look like in a separate window as you type in your code, something of a half-way house from WYSIWYG) and a nice "snippets" feature where you can store regularly used pieces of code for quick pasting.
Free older versions are available as is Fraise an unofficial fork, however I recommend you consider the current incarnation of Smultron.
Smultron Homepage
TextWrangler Logo
TextWrangler
A free offering from Bare Bones Software who make BBEdit, a premium commercial HTML editor. Again syntax highlighting is on offer and there is a built-in FTP function.
TextWrangler Homepage

Neither of these editors have Tidy as part of their base installation but you can get around that by using Tidy Service which makes the utility accessable to most OS X applications. More about that in the following section.

HTML Tidy

Tidy was originally developed by Dave Raggett, one of the pioneers of web, and is now supported by a group of developers at SourceForge. The program is a godsend to those editing HTML by hand (or working with the code generated by KompoZer) as it safely reformats messy code into something much easier to follow with the human eye, correcting minor errors such as empty tags along the way. In the "out-of-the-box" unconfigured state the program does have some foibles that I don't like, principally: 1) a propensity to change the code for some special characters (e.g. ©) into the entity it is coding for (in this case ) which can then create further problems; and 2) being set up to change the Doctype from Strict to Transitional if it encounters some minor validation error (which could be as trivial as having some text not contained by a paragraph or other container). Fortunately it is usually easy to reign in such issues by altering the configuration file. I'll give ways of doing that below with reference to my recommended version of Tidy for each operating system.

Windows

PSPad Logo
Tidy in PSPad
As mentioned above PSPad comes with a recent version of Tidy already embedded in the program. I recommend that (having made a back up copy) you open the configuration file (TiDyCFG.ini - using PSPad to edit the file) which can be found in the same folder as PSPad and add the lines "doctype:strict" and "preserve-entities:yes" (without the quotes) to the file.

Mac

Balthisar Logo
Balthisar Tidy
This is a stand alone interface for Tidy which works separately from a text editor. To use it you save and close the file from the text editor and open it with this program then run the Tidy routine. That sounds, and indeed is, rather cumbersome but the great advantage is the incredibly easy to manipulate configuration setting which are right there in the interface rather than in some obscure file elsewhere.
Balthisar Tidy Homepage
Tidy Service Logo
Tidy Service

Despite the merits of Balthizar this is my version of choice for the Mac. Being a Service you can run the one version in any text editor which supports Mac services (which is pretty much all of them, you could even run it in an email program if you felt so inclined, although I wouldn't recommend it). Just do a Select All then call Tidy up from the Services Menu and run it (you could even set up a shortcut keystroke to do this for you). Configuring Tidy is easy too, just create a file (for example using Smultron) called TidyService.conf in your Home folder (the one called your username in the Users folder) and paste in your desired configuration. I use this:

bare:no char-encoding:raw
clean:no
doctype:strict
fix-bad-comments:yes
fix-backslash:yes
indent:yes
indent-attributes:no
indent-spaces:2
preserve-entities:yes
replace-color:yes
wrap:80
wrap-asp:yes
wrap-jste:yes
wrap-php:yes
write-back:yes
Tidy Service Homepage