Web page Editors
Web page design and web page authoring are two aspects of successful web site production.
This XHTML tutorial is concerned with web page authoring, and we presuppose the
existence of an initial design. The design can be reproduced using WYSIWYG authoring
tools such as DreamWeaver and FrontPage, but unless the author has taken care the
resulting XHTML will be difficult to maintain and possibly non-standard and not
accessible. The approach we take in this tutorial concentrates on a clean XHTML
implementation of a design structure, which will have the visual presentation elements
created using CSS. Since we don't need complex XHTML to reproduce most design, a
simple XHTML aware text editor is sufficient. There are several 'free' text editors
which fit this bill, among them:
- NoteTab Light
- NoteTab Light is the free version of NoteTab Pro and provides pretty much all the
file editing functionality you will need to learn and use XHTML (and CSS). The Pro version is $20 and includes
extra features, such as syntax highlighting and unlimited undo, but nothing that
you can't live without. It also integrates with the
W3.org HTML Tidy tool for performing built in XHTML conformance checking.
- ConTEXT
- Only comes as a free version and
provides syntax highlighting and templates for many different languages including
XHTML and CSS. However, the templates need to be used with care, and in some cases
edited, to make sure you do not produce non-standard code.
- Crimson
Editor
- A free editor with much the same functionality as ConTEXT. This
one also needs some work to make it produce standards compliant XHTML.
All of the above editors provide a multiple document interface, so you can have
an entire web site open and perform search and replace functions across all the
pages.
Using NoteTab Light
NoteTab Light is probably the easiest to configure for XHTML support, and can produce
lots of versions of HTML/XHTML. However, if you want to create XHTML-Strict code
you need
to perform some initial configuration. You will need to download copies
of NoteTab Light, HTML Tidy and an HTML Template file. The most recent copies of
NoteTab Light and HTML Tidy can be obtained using the links above. However, the
links below provide compatible versions as of Dec 24th 2005:
Installing NoteTab light
- Download the three files above into a temporary folder.
- Run NoteTab_Setup.exe.
- Follow the instructions, accepting the defaults as they appear.
- Extract the Tidy.exe file from the Tidy-051106-exe.zip file into the folder C:\Program
Files\NoteTab Light.
NoteTab light is now setup. You will now need to configure it to make the default
behaviour appropriate for use for this tutorial.
When you first run NoteTab Light you will see some standard files opened. These
can be closed straight away. You will see a set of tabs at the bottom of the window,
one of which is labelled HTML. You should select this Tab and this provides a set
of predefined actions for working with HTML documents.
There are several other settings which need to be changed to make your life easier while
working with NoteTab Light. All of these can be accessed from the Options Dialog
which can be opened from View|Options...
- Select the 'HTML Files' tab. Make sure that the Create XHTML Tags option is selected
and the Use Upper Case tags is cleared.
- Select the 'File Filters' tab. Select 'HTML Files' and press the Move Up button
to bring it to the top of the list.
- Optional: Select 'Wild Cards', remove the entries for *.php3 and *.php4 at the end of the line and add ';*.aspx' without
the quotes at the end of the line.
- Select the 'Toolbar' tab and select the 'Save All' option in the 'Show in Toolbar'
list.
- Optional: Select the 'Close' and 'Close All' options from the 'Show in Toolbar'
list.
- If you want to confine yourself to creating standard XHTML web pages you should
copy the HTML Template file (HTML.tpl) from HTML.zip in your temporary download folder to C:\Program
Files\NoteTab Light\Templates. (You may want to rename the existing version, should
you wish to revert to the default later.)
You may find other options useful to you, but the ones mentioned above are geared
specifically towards editing multiple XHTML documents. There is a Print options
dialog in the View menu. You may also want to customise how NoteTab prints your
documents.
If you have copied the HTML Template, when you select New Web Page you will be able
to select Transitional or Strict XHTML, choose from a range of Character sets and
a limited number of languages. The replacement HTML template has been modified so
that it produces fully standards compliant XHTML. The default template that comes
with NoteTab Light does not handle XHTML properly, as it generates non-standard
code.