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.
You 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 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.
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.
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!
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:
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;
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.
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.
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:yesTidy Service Homepage