This chapter describes tools and techniques you might consider using in HTML implementation. It presents instructions for downloading and gives examples of how to put these tools to use.
This chapter then describes techniques for implementing HTML files. These techniques use templates and scripts to generate HTML files based on style parameters.
The first technique is fairly simple and has been around since probably the first programmer ever touched a text editor: creating webs with templates. Despite the relative lack of sophistication involved in this technique, it nonetheless can be a fairly powerful way to quickly implement simple webs.
The second technique involves generating web page-based scripts
and head and foot templates with parameters. This technique is
potentially more powerful, yet it requires just a simple scripting
language to implement.
| Updates on Tools and Techniques |
Tools and techniques for implementing a web are always coming on-line. I keep the implementation page of the Web Development support web updated at http://www.december.com/web/develop/implement.html. Check there for links to the latest reference information on tools and techniques for implementation. |
You can use a variety of tools to create, translate, or manage HTML documents. Many of these tools can save you a great deal of time if you gain a proficiency in using them. These tools fall into these categories, roughly in the order of increasing sophistication and complexity: converters, templates, editors, development environments, and languages. I'll talk about each of these categories, list the major tools that are out there in each category, and describe in detail how a specific tool in each category works to illustrate the kind of support each tool offers.
HTML converters (or filters) translate one format of a document to another. You might have a collection of documents in LaTeX, for example-a markup language used for text processing. Instead of changing the LaTeX tags to HTML tags by hand, you can use converter programs that do this automatically. Similarly, HTML documents can be translated into other kinds of documents. These programs sometimes are called filters because of the way they can change a document from one form to another (this term is influenced by the UNIX pipes and filters concept).
Templates are fill-in-the-blank services or tools that
help developers create a page of HTML. These often are useful
for tutorials or for people just getting started using
the Web.
HTML editors are software programs that help developers create and edit hypertext. Many of these editors offer a what-you-see-is-what-you-get (WYSIWYG) way to create and edit HTML files. These editors vary in the quality and validity of the HTML they produce. They can be useful for people who don't know HTML and don't want to learn it.
Development environments are more elaborate than just an editor, but provide a fully integrated toolset for developing webs. The sophistication of currently available development environments is limited. Examples of these are discussed in Chapter 18, "Development and Language Environments."
Language environments provide a way to create new forms of interaction when used with a Web browser. These are just coming into use. VRML is one example (see Chapter 28, "Virtual Reality Modeling Language"). Java is another (see Chapter 18).
A professional Web information developer should be aware of what kinds of tools are available and have some of these tools on hand for both development and user support.
Developers of webs familiar with markup languages quickly saw that HTML was very close to what they had been working with before. A good example of a filter that was a "natural" for being created is a converter from the LaTeX to HTML. LaTeX is a close match to HTML in the way a document's structure and elements are marked with tags. Formats of other kinds of documents might not be as close to HTML, so a perfect conversion to HTML, or from HTML to another document format, isn't always possible.
Converters, as described in the example I give here for a LaTeX-to-HTML converter, often rely on libraries of support code to operate. A popular programming language for text manipulation is Perl (http://www.yahoo.com/Computers/Languages/Perl/), so a professional web information developer should consider obtaining and installing Perl.
Because HTML has risen to such a prominent place in on-line information presentation, a wide variety of tools convert documents in a variety of formats to HTML.
Table 17.1 lists document formats and the conversion programs
they use. The locations of these conversion programs follow this
table.
| Conversion Program | Document Format |
| C++ | c++2html |
| FOLIO .NFO | nse2html |
| FrameMaker | Cyberleaf, FasTag, fram2html, if2html, mifmucker, miftran, WebMaker |
| Interleaf | Cyberleaf, FasTag, TagWrite |
| LaTeX | hyperlatex, latex2html, tex2rtf |
| Lotus Notes | InterNotes, Tile |
| Microsoft Word | Assistant for Word, Cyberleaf, FasTag, TagWrite |
| Mosaic Hotlist | hl2html |
| nroff/troff | mm2html, ms2html |
| PageMaker | Dave |
| Plain text | asc2html, charconv, striphtml, txt2html |
| PostScript | ps2html (http://www.yahoo.com/Computers /World_Wide_Web/HTML_Converters/Postscript/) |
| Quark
Rich Text Format (RTF) | qt2www HLPDK, rtftohtml, tex2rtf, TRFTOHTM |
| Scribe | scribe2html |
| SGML | dtd2html, TagWrite |
| Tex | hyperlatex, latex2html, tex2rtf |
| Texinfo | texi2html |
| UNIX man page | bbc_man2html, rosetta-man (http://www.yahoo.com/Computers/ World_Wide_Web/HTML_Converters/ Man_Pages/) |
| Ventura Publisher | TagWrite |
| WordPerfect | Cyberleaf, FasTag, sptohtml, TagWrite, wp2x |
Here are the conversion programs:
asc2html
ftp://src.doc.ic.ac.uk/computing/information-
systems/www/tools/translators/
bbc_man2html
ftp://src.doc.ic.ac.uk/computing/information-systems/www/tools/translators/
c++2html
http://www.atd.ucar.edu/jva/c++2html.html
charconv
ftp://src.doc.ic.ac.uk/computing/information-systems/www/tools/translators/
Cyberleaf
(a commercial document package from Interleaf, Inc.)
http://www.ileaf.com/ip.html
Dave
http://www.bucknell.edu/bucknellian/dave/
dtd2html
http://www.oac.uci.edu/indiv/ehood/perlSGML.html
FasTag
www.interleaf.com
frame2html
ftp://src.doc.ic.ac.uk/computing/information-systems/www/tools/translators/
HLPDK
(files hdk115a.zip, hdk115b.zip, hdk115l.zip)
ftp://garbo.uwasa.fi/pc/programming/
HLPDK
(file hl2html)
http://www.oac.uci.edu/indiv/ehood/
hyperlatex
http://www.cs.ruu.nl/people/otfried/html/hyperlatex.html
latex2html
http://cbl.leeds.ac.uk/nikos/tex2html/doc/latex2html/latex2html.html
mif2html
(a commercial product of Quadralay)
http://www.quadralay.com/
mifmucker
http://www.oac.uci.edu/indiv/ehood/mifmucker.doc.html
miftran
http://cbl.leeds.ac.uk/nikos/tex2html/doc/latex2html/latex2html.html
mm2html
ftp://bells.cs.ucl.ac.uk/darpa/
ms2html
http://iamwww.unibe.ch/~scg/Src/
nse2html
ftp://src.doc.ic.ac.uk/computing/information-systems/www/tools/translators/
ps2html
ftp://src.doc.ic.ac.uk/computing/information-systems/www/tools/translators/
qt2www
http://the-tech.mit.edu/~jeremy/qt2www.html
rosetta-man
ftp://ftp.cs.berkeley.edu/ucb/people/phelps/tcltk/rman.tar.Z
RTFTOHTM
ftp://ftp.cray.com/src/WWWstuff/RTF/
rtftohtml
ftp://src.doc.ic.ac.uk/computing/information-systems/www/tools/translators/
striphtml
http://www.oac.uci.edu/indiv/ehood/
tex2rtf
ftp://skye.aiai.ed.ac.uk/pub/tex2rtf/
texi2html
ftp://src.doc.ic.ac.uk/computing/information-systems/www/tools/translators/
Tile
http://www.tile.net/tile/info/index.html
txt2html
http://www.cs.wustl.edu/~seth/txt2html/
http://www.seas.upenn.edu/~mengwong/txt2html.html
WebMaker
http://www.cern.ch/WebMaker/
wp2x
ftp://src.doc.ic.ac.uk/computing/information-systems/www/tools/translators/
Many converters are available between a variety of formats and HTML. This section discusses one, a LaTeX-to-HTML converter, as an example, showing the detail sometimes required to set up a program for conversion.
A look at a sample LaTeX source file demonstrates its close match to HTML in structure, as Listing 17.1 shows.
Listing 17.1. A LaTeX source file.
\documentstyle[12pt]{article}
\pagestyle{empty}
\begin{document}
\section{HTML Tools}
There are many HTML tools available to help
developers. These tools include:
\begin{itemize}
\item Converters
\item Templates
\item Editors
\item Environments
\item Languages
\end{itemize}
\subsection{Obtaining Tools}
The best way to find these tools is to use the Web
to search. The online collection at Yahoo,
{\tt http://www.yahoo.com/Computers/World\_Wide\_Web/}
is a good place to start.
\end{document}
A developer can obtain LaTeX2HTML, a Perl script written by Nikos Drakos, which is a flexible system for converting LaTeX documents to HTML. A developer could convert a LaTeX file to HTML using text editor commands to replace instances of LaTeX markup (such as \item) to HTML tags (such as <LI> and so on), but LaTeX2HTML goes beyond simple textual correspondences. LaTeX2HTML can convert tables of contents and figures, and even change mathematical equations to inline images for use in HTML (perhaps future extensions will include converting directly to HTML 3's support of mathematical equations).
You can find more information about LaTeX2HTML at http://cbl.leeds.ac.uk/nikos/tex2html/doc/latex2html/latex2html.html, and the LaTeX2HTML source itself is available at ftp://ftp.tex.ac.uk/pub/archive/support/latex2html/.
The source code can be obtained via anonymous FTP:
$ ftp ftp.tex.ac.uk
Connected to ftp.tex.ac.uk.
220 ouse.cl.cam.ac.uk FTP server ready.
Name (ftp.tex.ac.uk:decemj): anonymous
331 Guest login ok, send your complete e-mail address as password.
Password:yourid@yourhost.yourdomain
ftp> cd pub/archive/support/latex2html/
ftp> prompt
Interactive mode off.
ftp> mget *
ftp> quit
Note that the developer also needs to make a directory called styles and obtain those files:
$ mkdir styles
$ cd styles
$ ftp ftp.tex.ac.uk
ftp> cd pub/archive/support/latex2html/
ftp> cd styles
ftp> mget *
ftp> quit
Because LaTeX2HTML is based on Perl, a user first must find where Perl is installed on the system (if it is installed). To do this, the user enters this at the UNIX prompt:
$ which perl
perl is /dept/acm/bin/perl/
$
Following the installation instructions in README, the user then needs to replace the obtained Perl location in the files latex2html, install-test, and texexpand, changing the first line of these files from
#!/usr/local/bin/perl
to, for example,
#!/dept/acm/bin/perl
The user also has to set these variables:
$LATEX2HTMLDIR = ".";
$PBMPLUSDIR = ".";
$USENETPBM = 0;
$LATEX = "latex"; # LaTeX
$DVIPS = "dvips"; # Dvips
$ENV{'GS'} = "gs"; # Ghostscript
The user then can specify the other path names for applications in the file latex2html.config: latex, dvips, and ghostscript. The user then makes the install-test script executable and runs it, as Listing 17.2 shows.
Listing 17.2. Installing the LaTeX2HTML converter.
$ chmod +x install-test
$ install-test
LaTeX2HTML program in . was found.
Main script installation was successful.
Testing availability of external programs...
Perl version 4.0.1.8 at patch level 36 is OK.
texexpand was found.
Checking for availability of DBM or NDBM (Unix DataBase Management)...
DBM was found.
DVIPS version 5.55 is OK.
pstogif was found.
Looking for latex...
latex was found.
Looking for gs...
gs was found.
.
.
.
In the LaTeX file itself, the user needs to include the HTML style file:
\documentstyle[12pt,html]{article}
Finally, the user can convert the file:
$ latex2html memo.tex
This is LaTeX2HTML Version 95 (Thu Jan 19 1995) by Nikos Drakos,
Computer Based Learning Unit, University of Leeds.
OPENING /tmp/go/memo.tex
Reading ...
Processing macros ...
Translating ...0/3......1/3.....2/3.......3/3.....
Doing section links .......
Unknown commands:
Done.
The results are placed in a subdirectory called memo in the directory in which latex2html was run. Four files were generated: memo.html, node1.html, node2.html, and node3.The file memo.html serves as a root file, as shown in Listing 17.3.
Listing 17.3. The converted HTML root file.
<!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 2.0//EN">
<!Converted with LaTeX2HTML 95 (Thu Jan 19 1995) by Nikos Drakos (nikos@cbl.lee
ds.ac.uk), CBLU, University of Leeds >
<HEAD>
<TITLE>No Title</TITLE>
</HEAD>
<BODY>
<meta name="description" value="No Title">
<meta name="keywords" value="memo">
<meta name="resource-type" value="document">
<meta name="distribution" value="global">
<P>
<BR> <HR><A NAME=tex2html1 Href="node1.html"><IMG ALIGN=BOCODEOM
ALT="next" SRC="http://
cbl.leeds.ac.uk/nikos/figs//next_motif.gif"></A>
<IMG ALIGN=BOCODEOM ALT="up" SRC="http
://cbl.leeds.ac.uk/nikos/figs//up_motif_gr.gif">
<IMG ALIGN=BOCODEOM ALT="previous" SRC
="http://cbl.leeds.ac.uk/nikos/figs//previous_motif_gr.gif"> <BR>
<B> Next:</B> <A NAME=tex2html2 Href="node1.html"> HTML Tools</A>
<BR> <HR> <P>
<BR> <HR>
<LI> <A NAME=tex2html3 Href="node1.html#SECTION00010000000000000000"> HTML Tool
s</A>
<UL>
<LI> <A NAME=tex2html4 Href="node2.html#SECTION00011000000000000000"> Obtaining
Tools</A>
</UL>
<LI> <A NAME=tex2html5 Href="node3.html#SECTION00020000000000000000"> About
this document ... </A>
</UL>
<BR> <HR>
<P><ADDRESS>
<I>John Arthur December <BR>
Fri Jun 2 21:05:11 EDT 1995</I>
</ADDRESS>
</BODY>
Figure 17.1 shows the opening document generated as a result of the conversion, memo.html, as displayed in Netscape. This file is essentially a table of contents for the information in the original memo.tex file.
Figure 17.1 : Conversion from LaTeX to HTML.
Figure 17.2 shows the contents of the main section of the document. This main section is placed in a file named node1.html, with a link to the subsection information in file node2.html, as shown in Figure 17.3.
Figure 17.2 : Node 1 main section text from LaTeX-to-HTML conversion.
Figure 17.3 : Node 2 subsection text from LaTex-to-HTML conversion.
Note that, in all the files, the navigation cues are double-coded: there are icons for Next, Up, and Previous, as well as names defined for those links where possible.
Finally, Figure 17.4 shows the final subsection, "About this document…".
Figure 17.4 : Node 3 section containing document information.
This example of conversion shows some of the specialized skills and tools that are required for conversion. In this case, Perl had to be installed on the system, as well as a variety of applications (LaTeX, ghostscript, and dvips). Therefore, installing conversion programs isn't free of complications. The overhead of putting together the pieces, though, can pay off in translating a large stock of documents of other formats into HTML.
There are many formats for storing documents. Converters from these types to HTML (and vice versa) are being developed all the time. Major information sources for converters follow:
Yahoo!'s list of HTML converters
http://www.yahoo.com/Computers/World_Wide_Web/HTML_Converters
W3C's filters lists
http://www.w3.org/hypertext/WWW/Tools/Filters.html
http://www.w3.org/hypertext/WWW/Tools/html2things.html
UIUC's converters list and discussion
http://union.ncsa.uiuc.edu/HyperNews/get/www/html/converters.html
Earl Hood's collection
http://www.oac.uci.edu/indiv/ehood/
Another approach to helping people create HTML documents is fill-in templates. These can give people a way to quickly make a home page and get started with HTML. Many HTML editors and higher-level tools include a template method for generating web pages. The idea is that a person simply fills out a form that asks all the pertinent information for the page-for example, a company name, product list, brief description, and so on. This form could include icons as well. When a user clicks a button, the tool generates a hypertext page. The performance of these tools follows the template method of HTML page implementation I describe in more detail in the section "Techniques for Implementing Webs," later in this chapter.
Sam Hopkins offers an on-the-fly home page creator at http://the-inter.net/www/future21. This application asks the user to answer a series of questions and then generates a page based on the answers.
Template tools are useful for beginning users or users who don't want to learn HTML or a more sophisticated tool. It is unlikely that template-based tools will meet all the needs of professional web implementers.
The next level of tool complexity is the HTML editor, which helps users create and edit HTML documents. These editors try to achieve a WYSIWYG graphical user interface, although true WYSIWYG is not possible. HTML itself is not a language meant to define a page's appearance, so the editors can show only a typical rendering of an HTML page. Editors are a convenient way to create HTML documents without having to deal with syntax. Many of these editors have converter utilities built into them and use many GUI features (including template approaches) to help users create HTML pages.
HTML editors are being developed very rapidly in both shareware and commercial versions. Major on-line information sources about HTML editors follow:
Yahoo!'s list of HTML editors
http://www.yahoo.com/Computers/World_Wide_Web/HTML_Editors/
Falken's Cyberspace Tools list
http://cybertools.thru.net/tools.shtml
Stroud's CWSApps list-HTML editors for Windows 95
http://www.cwsapps.com/95html.html
HyperNews' list of HTML editors
http://union.ncsa.uiuc.edu/HyperNews/get/www/html/editors.html
By far, the more popular HTML editors are commercial products. Although some creative editors are available out there as shareware or freeware, you'll probably find that commercial products save you time and money. Here's a quick survey of the popular HTML editors for popular platforms:
HotDog (http://www.sausage.com/dogindex.htm) A popular editor that people have been talking about for a long time on the Web (more than a year!). It runs on Windows 95, 3.1, and NT. It supports Netscape extensions to HTML, the latest HTML elements, and features such as a background color reality checker (which alerts you to color combinations that won't work well together) and spell checker. HotDog is well worth checking out if you have a Windows platform.
FrontPage (http://www.microsoft.com/frontpage/ProductInfo/Brochure/default.htm) An editor for Windows 95 or later designed for nonprogrammers (at least that is what the information at www.microsoft.com says). The idea behind FrontPage is that you can use the Microsoft Windows interface to drag and drop features such as hyperlinks and graphics onto a Web page. You never actually have to "touch" the underlying HTML, and you can use Windows-like help systems such as Wizards. This software is integrated with Microsoft's Office suite of products.
PageMill (http://www.adobe.com/prodindex/sitemill/main.html) A Macintosh-based editor that you can use to drag and drop features for web-page creation. This product is from Adobe, and is part of SiteMill-software you use to manage a Web site.
Webmaster Pro (http://www.heyertech.com/) From HeyerTech, Inc., this product has a more professional approach to web implementation. This product specifically addresses issues such as generating content from databases.
Many HTML editors have been developed to help users create HTML files. Although simple text editors can be used to create HTML files, users often find it frustrating to remember the HTML elements, entities, and tags. Although HTML editors can be very helpful, familiarity with the HTML details is still essential for professional information developers. This section traces through a sample HTML editor, asWedit, developed by Dr. Andrzej Stochniol. This editor is available free for educational users (http://www.w3.org/hypertext/WWW/Tools/asWedit.html) and illustrates the kind of functionality currently available in many low-cost HTML editors.
asWedit is an HTML editor for level 2 and (draft) level 3 HTML. It uses the X Window System and the Motif Window Manager. asWedit currently is implemented on platforms such as IBM RS/6000 with AIX 3.2.x, SGI with IRIX 4.x or IRIX 5.x, Sun Sparc with SunOS 4.x or SunOS 5.x, HP9000 series 700/800 with HP-UX 8.x or 9.x, Data General AViiON with DG/UX, and DEC Alpha with OSF/1.
Although not truly a WYSIWYG editor, asWedit easily can be used side by side with a browser so that the user immediately can see how the browser will render an HTML file.
asWedit is available via anonymous FTP on the host src.doc.ic.ac.uk, in the directory packages/www/asWedit/:
$ ftp src.doc.ic.ac.uk
Connected to phoenix.doc.ic.ac.uk.
Name (src.doc.ic.ac.uk:decemj): anonymous
331 Guest login ok, send your complete e-mail address as password.
Password:
230- The Archive - SunSITE Northern Europe
230- ========================================
230 Guest login ok, access restrictions apply.
ftp> cd packages/www/asWedit/
ftp> bin
200 Type set to I.
ftp> get asWedit-1.1-sparc.sunos4.tar.Z
ftp> quit
The binary versions available for many platforms can be downloaded directly and then uncompressed:
$ uncompress asWedit-1.1-sparc.sunos4.tar.Z
$ tar -xvf asWedit-1.1-sparc.sunos4.tar
asWedit can be run in HTML mode at levels 2 or 3, as well as in plain text mode (in which it serves as a text editor only). To run asWedit in default (HTML 3) mode, use this code:
$ asWedit -helpdir help_file_path
Here, help_file_path is the directory in which the helpfile asWedit.hlp has been installed. If it is the same as the directory in which it is being run, this path can be the single period (.). To run asWedit in HTML level 2 and text-only modes, respectively, use this code:
asWedit -helpdir help_file_path -html2
asWedit -helpdir help_file_path -nohtml
The default opening screen is shown in Figure 17.5. asWedit offers many of the familiar graphical user interface features available in many software programs, using a title bar menu of options and a customizable set of icons as a toolbar.
Figure 17.5 : The asWedit opening screen.
This example demonstrates asWedit's functionality by creating a simple HTML file similar to the sample memo converted from LaTeX to HTML earlier in this chapter:
| Tip |
If you want to enter many lists, it would be tedious to make a three-level selection |
You can view this file in a browser installed on the system. Choose View | Browser to select from among Netscape, Mosaic, Arena, or Lynx (obviously, these have to be installed on your system in order for the preview operation to work).
You can choose View | Preview to bring up the browser selected earlier, with the file in the editor displayed as shown in Figure 17.8.
Figure 17.8 : The asWedit sample file previewed in Netscape.
The preceding session demonstrated some key features of asWedit:
The rest of the features of asWedit are similar to what you would expect in any editing application. asWedit offers these menus and options:
File menu Includes these options: New, Open, Close, Save, Save as, Insert, Print, and Exit.
Edit menu Includes these options: Undo, Redo, Cut, Copy, Paste, Clear, Edit Tag, and Delete Tag.
Search menu Offers standard options, such as Find, Find Next, Change, and Go to Line. Also offers Bookmark, a feature for creating an invisible placeholder in the file during editing, and a Search option for matching delimiters.
View menu Enables you to toggle on and off the toolbar, status line, and word wrap feature. Also offers Preview and Browser (to identify the browser to be used for previewing).
Tools menu Enables you to operate on blocks of text highlight using the cursor, pressing the left mouse button, and dragging the cursor.
Spell Check Checks the spelling in the document and alerts you to words that were not found in the dictionary.
Sort Lines Sorts the highlighted lines alphanumerically. This is not a desirable function to perform on the entire document, because it will scramble the document's head and body.
Format Moves the highlighted text right or left, with indents or a specific width.
Change Case Enables you to change highlighted text to all uppercase, all lowercase, or all headline-style caps (initial words capitalized). Also enables you to toggle cases (change uppercase to lowercase and vice versa).
Commands Displays in the file the current directory, date, or host name.
Filters Enables you to count words, delete blank lines, remove extra spaces, or doublespace the highlighted lines.
Allows you to set options for the overall operation of the editor.
HTML Mode Toggles on and off the capability to work with HTML elements and tags. When this mode is off, the editor works only for functions on the text of the file. When it is toggled on, the title bar selections for the Layout, Markup, and Html3 menus are visible.
Icons in Toolbar Toggles the toolbar to be in the form of words or icons.
Edit Toolbar Enables you to customize the contents of the toolbar, adding and deleting icons tied to title bar selections.
Other Toolbar Enable you to set tabs, specify font appearance, and save preference.
Layout menu Includes functions dealing with the document's overall structure and segmentation into paragraphs and sections separated by horizontal lines or linebreaks. This is the selection for getting an initial document template, headings, and lists. A selection here also allows for comments.
Markup menu Offers options for textual elements and markup-for example, logical and physical character formatting and blocks of text such as quotations. Included also are selections for adding hyperlinks, images, and entities. Choosing the Entities option brings up a complete menu of the Latin 1 character entities.
Html3 menu Used for several more advanced HTML features; options include Forms, Caption, Figures, Table, Note, and Math.
Help menu Provides on-line documentation about the editor as well as HTML.
Many other HTML editors are available, with new ones introduced to the market almost daily. Here are some of the major ones, many of which are shareware.
Symposia
(an authoring and browsing tool for UNIX/Motif, Windows, and Macintosh freeware; professional versions also available)
http://symposia.inria.fr/
NaviPress
(commercial software for authoring; available for UNIX/Motif, Windows, and Macintosh)
http://www.navisoft.com/index.htmTT>
For a current list of Macintosh editors and reviews, see http://www.comvista.com/net/www/htmleditor.html. Here's some of the better editors that are available:
BBEdit
(shareware version: BBEdit Lite, commercial version: BBEdit 3)
http://www.york.ac.uk/~ld11/BBEditTools.html
HTML Editor
(shareware from Rick Giles)
http://dragon.acadiau.ca/~giles/HTML_Editor/Documentation.html
HTML Grinder
(free demo version: purchase wheels)
http://www.matterform.com/grinder/
Simple HTML Editor (SHE)
(uses HyperCard or HyperCard Player)
http://www.lib.ncsu.edu/staff/morgan/simple.html
Site Writer Pro
(built with HyperCard 2.2)
http://www.rlc.dcccd.edu/Human/SWPro.htm
Web Weaver
(shareware from Miracle Software)
http://www.miracleinc.com/Web.Weaver/HTMLWW.html
Here are some of the more popular Windows editors out there (see also http://www.sausage.com/ for HotDog, mentioned earlier in this chapter).
HoTMetaL
(product from SoftQuad)
http://www.sq.com/
HTML Assistant
http://cs.dal.ca/ftp/htmlasst/htmlafaq.html
InContext Spider
(commercial product from InContext)
http://www.incontext.ca/
Live Markup
(shareware, registered users get Pro version)
http://www.mediatec.com/mediatech/
Microsoft Internet Assistant
http://www.microsoft.com/msword/
A Simple HTML Editor (ASHE)
ftp://ftp.cs.rpi.edu/pub/puninj/ASHE/README.html
asWedit
(an HTML editor)
http://www.w3.org/hypertext/WWW/Tools/asWedit.html
City University (London) HTML Editor: X Window System Andrew toolkit
http://web.cs.city.ac.uk/homes/njw/htmltext/htmltext.html
Cyberleaf
(commercial publishing environment from Interleaf, Inc.)
http://www.ileaf.com/ip.html
Phoenix
(Tk-based, SunSolaris)
http://www.bsd.uchicago.edu/ftp/pub/phoenix/README.html
tkHTML
(based on Tcl script language and Tk toolkit for X11)
http://www.ssc.com/~roland/tkHTML/tkHTML.html
HTMLjive
(an HTML editor written in JavaScript)
http://www.cris.com/~raydaly/htmljive.html
Although implementing webs has been an activity that people have been doing for more than a half-decade, there are still only a few tools that address the unique challenges of developing hypermedia content. There's a wide variety of fairly primitive HTML filters and editors that can help you put together a single page or a set of hypertext pages. These tools can be useful for beginners or for people who don't have very many web pages to maintain.
Many HTML editors, such as HTML Grinder from Matterform Media (http://www.matterform.com/grinder/), are approaching the most important concept in HTML implementation: You are creating a web of pages, not just single pages; you are working with hypertext links, not pages that will be typeset for printing. In HTML implementation, you'll only get so far if you use primitive tools and techniques. Hand-crafting HTML pages worked well for webs with a few pages; once you develop a more sophisticated site, though, you'll need more sophisticated techniques. I'll describe two techniques that don't rely on any particular HTML tool (however, some HTML tools use these same techniques).
It doesn't take too long to figure out that most HMTL pages in a web use the same lines over and over. In fact, all HTML files, when written with correct syntax, contain the basic skeleton elements HTML, HEAD, BODY, and usually paragraph text.
People implementing HTML quickly saw that they could create a basic template for the skeleton of an HTML file, as shown in Listing 17.4.
Listing 17.4. An HTML skeleton template.
<HEAD>
<TITLE>XX-TITLE</TITLE>
</HEAD>
<BODY>
<P>
XX-CONTENT
<P>
</BODY>
</HTML>
They then could copy this template and modify it for every other HTML file they created-no need to keep typing that HTML skeleton.
Moreover, they could copy and modify this skeletal template to create more specialized templates: one for their home page, one for a company web, one for a list of their professional resources, and so on. Each template acts as a parent for a long line of child templates that make it more specialized. Using this type of inheritance, web implementers can create a fairly powerful system of templates for their own use fairly quickly.
I might decide that my web style will require that authors include their e-mail address at the bottom of each page in an ADDRESS element. I therefore copy over my minimal template file and modify it to that shown in Listing 17.5.
Listing 17.5. An HTML template with required phrases.
<HTML>
<HEAD>
<TITLE>XX-TITLE</TITLE>
</HEAD>
<BODY>
<P>
<H1>XX-TITLE</H1>
<P>
XX-TEXT
<P>
<HR>
<P>
<ADDRESS>
<A Href="XX-AUTHOR-URL">XX-AUTHOR-NAME</A>
(XX-AUTHOR-EMAIL) / XX-DATE
</ADDRESS>
</BODY>
</HTML>
This template then might serve as the "parent" for all other pages in the web; implementers would be expected to fill in the information beginning with XX-.
Using this idea, I can keep specializing my templates until they get fairly elaborate. I can create a template for a look and feel particular to my own pages I provide at http://www.december.com/john/, for example. I create a file called johnplate.html that contains a fairly elaborate skeleton for a web page-including repeated icons and a table to align content. Listing 17.6 shows the HTML source.
Listing 17.6. HTML file showing page style.
<HTML>
<!-- Author: john@december.com -->
<!-- Template Date: 07 July 1996 -->
<!-- File Date: XX-DATE -->
<!-- Purpose: template demonstration -->
<!-- Description: demonstrates a template with a specific look and feel -->
<HEAD>
<TITLE>John December: XX-TITLE</TITLE>
<LINK Rev="made" Href="mailto:john@december.com">
</HEAD>
<BODY Text="#000000" BGcolor="#FFFFFF" ALink="#00FF7F">
<TABLE Border="0" Cellpadding="3">
<TR>
<TD Align="center" Width="110">
<P><A Href="http://www.december.com/john/"><IMG Border="0"
Width="40" Height="40" Alt=" "
Src="http://www.december.com/images/jd.gif"></A></TD>
<TD><FONT Size="3" Color="brown">XX-TITLE</FONT>
<BR><HR Size="3" Noshade></TD>
</TR>
<TR>
<TD Width="110">
<FONT Size="2" Color="brown">XX-ANNOTATION</FONT>
</TD>
<TD>
<!-- BEGIN CONTENT ---->
XX-CONTENT
<!-- END CONTENT ---->
</TD></TR>
<TR><TD VAlign="bottom" Align="center" Width="110">
<P><A Href="http://www.december.com/"><IMG Border="0" Width="40"
Height="40" Alt=" " Src="http://www.december.com/images/d.gif"></A>
</TD>
<TD Valign="top">
<HR Noshade>
<FONT Size="2" Color="brown">
<EM>© <A Href="http://www.december.com/">December
Communications, Inc.</A>
(<A Href="mailto:john@december.com">john@december.com</A>)
<BR>
<FONT Size="2" Color="brown">http://www.december.com/john/XX-FILE
XX-DATE</EM></FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure 17.9 shows the display of this johnplate.html skeleton.
Figure 17.9 : Display of the johnplate.html template.
Whenever I want to create a new page of my personal information, all I have to do is copy johnplate.html to a new file and start modifying all the parts where I have left holders, beginning with XX-.
Before I do any copying and modifying, though, I spend a lot of time tweaking my template, verifying it in an HTML checker, and getting it just right; after all, every file that inherits its characteristics from my template will contain the same error. Similarly, I'd better make sure that I like the color scheme in my template, because all child files of the template will have it.
This simple concept of using templates, when transformed to automated means, is the basis for the next technique: generating HTML files.
If I have my johnplate.html file from the preceding section, what happens when I want to change my header colors to green instead of brown? Better yet, what happens when HTML style sheets are available so that I won't even have to hard code style information into my HTML source files? In these cases, my templates aren't of much help. I could do simple things like color changes from brown to green by doing a global search and replace for all occurrences of Color="brown" to Color="green". But any changes in the layout of the look and feel of my files requires me to basically redo my parent template and then rework every file on which it was based-a tedious process if I have a lot of files.
I need to be able to generate my HTML files based on a higher level of abstraction than templates. I can do this first by noticing that my template really consists of three parts:
The header information, all the way down to the comment <!--
BEGIN CONTENT ---->
The content of the file
The footer information, starting with the comment <!--
END CONTENT ---->, and continuing to the end of
the file
Instead of copying and modifying templates, I need to keep the contents in one file and then generate the final HTML file based on my header and footer files, which I might modify for a different look and feel at any time.
I create these files:
johnhead.html Contains all the HTML source from johnplate.html up to and including the line <!-- BEGIN CONTENT ---->
johnfoot.html Contains all the HTML source from the line <!-- END CONTENT ----> to the end of the file
I create a generator script to sandwich content files I want to create between the head and footer files. I'm using a UNIX system, so I create a script to do this (in DOS, you create a batch script that does the equivalent). I organize my directory with the johnhead.html and johnfoot.html content HTML files in a directory called src. I place my scripts in a directory called bin, and I will place my generated HTML files in a directory called gen. I use a script to generate files, as shown in Listing 17.7.
Listing 17.7. A script to generate HTML files with common style.
#!/bin/csh -f
#--------------------------------------------------
# script: makejohn
# author: john@december.com
# date: 07 July 1996
# version: 1.0
# purpose: demonstrate file generation in HTML
# usage: makejohn filename
#--------------------------------------------------
# Echo the input to announce the script is running
echo "makejohn on" $*
# This is where I'll store the generated file
set GENLOC="../gen"
# This is where I keep the source files
set SRCLOC="../src"
# I start off with the head
cat $SRCLOC/johnhead.html > $GENLOC/$1
# I add the contents right after the head
cat $SRCLOC/$1 >> $GENLOC/$1
# I now add the foot
cat $SRCLOC/johnfoot.html >> $GENLOC/$1
# I remind myself where the generated output is.
echo "generated in $GENLOC/"$1
For every file in my personal directory, I don't store header or footer information-just the content in the src directory. I place my hobbies.html file, without header or footer information, in src, for example, as shown in Listing 17.8.
Listing 17.8. A sample HTML content file.
<UL>
<LI>Writing about the Internet
<LI>Rollerblading
<LI>Traveling
<LI>Reading
</UL>
To generate the complete hobbies.html file, I first adjust my style files (src/johnhead.html and src/johnfoot.html) to whatever I want. Then I run makejohn on the content file hobbies.html:
$ makejohn hobbies.html
makejohn on hobbies.html
generated in ../gen/hobbies.html
Figure 17.10 shows the resulting ../gen/hobbies.html file.
Figure 17.10 : Display of the generated hobbies file.
Notice that I've improved my implementation system because I'm no longer tied to a fixed header and footer for each file. I can always switch headers and footers and regenerate the file. I could move the generated file from ../gen to the Web server space, or I could just generate the file with the GENLOC variable set in my script to the appropriate place.
Notice, though, that I still have some parts missing-some of the XX- information. I could replace this by hand in each generated file, but then this would be work that I'd have to repeat if I change my head or footer styles later. Besides, I already know some of this information-like the date I'm generating the file and the file name itself. If I could pass the title of the file and its annotation string as arguments, I could generate the complete file. The script makejohn1.1 generates the code shown in Listing 17.9.
Listing 17.9. A script to generate an HTML file and substitute for date and file name.
#!/bin/csh -f
#--------------------------------------------------
# script: makejohn
# author: john@december.com
# date: 07 July 1996
# version: 1.1
# purpose: demonstrate file generation in HTML
# includes XX- replacements
# usage: makejohn filename "title" "annotation"
#--------------------------------------------------
# Echo the input to announce the script is running
echo "makejohn on" $*
# This is where I'll store the generated file
set GENLOC="../gen"
# This is where I keep the source files
set SRCLOC="../src"
# I grab off the arguments and name them
set FILE="$1"
set TITLE="$2"
set ANNOTATE="$3"
set DATE=`date`
# I start off with the head and replace the XX- strings
cat $SRCLOC/johnhead.html | sed -e "s/XX-TITLE/$TITLE/g" -e "s/XX-ANNOTATION/$ANNOTATE/g" > $GENLOC/$FILE
# I add the contents right after the head
cat $SRCLOC/$FILE >> $GENLOC/$FILE
# I now add the foot and replace the XX- strings
cat $SRCLOC/johnfoot.html | sed -e "s/XX-FILE/$FILE/g" -e "s/XX-DATE/$DATE/g" >> $GENLOC/$FILE
# I remind myself where the generated output is.
echo "generated in $GENLOC/"$FILE
Now I run this script:
$ makejohn1.1 hobbies.html "My Hobbies" "These are things I do when I have some spare time..."
makejohn on hobbies.html My Hobbies These are things I do when I have some spare time...
generated in ../gen/hobbies.html
The result is shown in Figure 17.11.
Figure 17.11 : Generated HTML file with date and file name.
Notice that all the information has been filled in by the parameters I passed to the makejohn1.1 script. I'll need to run this command every time I change my header or footer files. I don't want to have to type in all the parameters to the makejohn1.1 script every time I have to do this, so I create a script called makejohnweb that contains this line as its first line:
makejohn1.1 hobbies.html "My Hobbies" "These are things I do when I have some spare time..."
Then, as I get more content pages, I can simply add lines to the makejohnweb file:
makejohn1.1 hobbies.html "My Hobbies" "These are things I do when I have some spare time..."
makejohn1.1 resume.html "Resume" "About me..."
makejohn1.1 travels.html "FAQ" "These are questions
that I frequently get asked (with answers)..."
To regenerate my entire web, I simply run the makejohnweb script. I'm pretty happy, but I realize that my site has many other kinds of files besides just my personal files. I might not want them to have that same header and footer. I probably want to have some way to parameterize the icons that I place on the page and other features. I can do this by moving up still another level of abstraction and making another parameter called style. Listing 17.10 shows the script that does this: makestyle.
Listing 17.10. A script to generate an HTML file based on the style parameter.
#!/bin/csh -f
#--------------------------------------------------
# script: makestyle
# author: john@december.com
# date: 07 July 1996
# version: 1.0
# purpose: demonstrate file generation in HTML
# includes XX- replacements
# and style argument
# usage: makestyle filename style "title" "annotation"
#--------------------------------------------------
# Echo the input to announce the script is running
echo "makestyle on" $*
# This is where I'll store the generated file
set GENLOC="../gen"
# This is where I keep the source files
set SRCLOC="../src"
# I grab off the arguments and name them
set FILE="$1"
set STYLE="$2"
set TITLE="$3"
set ANNOTATE="$4"
set DATE=`date`
set HEADFILE=$STYLE"head.html"
set FOOTFILE=$STYLE"foot.html"
# I start off with the head and replace the XX- strings
cat $SRCLOC/$HEADFILE | sed -e "s/XX-TITLE/$TITLE/g" -e "s/XX-ANNOTATION/$ANNOTATE/g" > $GENLOC/$FILE
# I add the contents right after the head
cat $SRCLOC/$FILE >> $GENLOC/$FILE
# I now add the foot and replace the XX- strings
cat $SRCLOC/$FOOTFILE | sed -e "s/XX-FILE/$FILE/g" -e "s/XX-DATE/$DATE/g" >> $GENLOC/$FILE
# I remind myself where the generated output is.
echo "generated in $GENLOC/"$FILE
Now I can create new style files. I create header and footer files for book information that differ from the header and footer files from the john information, for example. Listing 17.11 shows the file bookhead.html.
Listing 17.11. An HTML head template with a specialized look and feel.
<HTML>
<!-- Author: john@december.com -->
<!-- Template Date: 07 July 1996 -->
<!-- File Date: XX-DATE -->
<!-- Purpose: template demonstration -->
<!-- Description: demonstrates a template with a specific look and feel -->
<HEAD>
<TITLE>Books: XX-TITLE</TITLE>
<LINK Rev="made" Href="mailto:john@december.com">
</HEAD>
<BODY Text="#000000" BGcolor="#FFFFFF" ALink="#00FF7F">
<TABLE Border="0" Cellpadding="3">
<TR>
<TD Align="center" Width="110">
<P><A Href="http://www.december.com/works/books.html"><IMG Border="0"
Width="40" Height="40" Alt=" "
Src="http://www.december.com/images/book.gif"></A></TD>
<TD><FONT Size="4" Color="green">XX-TITLE</FONT>
<BR><HR Size="3" Noshade></TD>
</TR>
<TR>
<TD Width="110">
<FONT Size="2" Color="green">XX-ANNOTATION</FONT>
</TD>
<TD>
<!-- BEGIN CONTENT ---->
Listing 17.12 shows the file bookfoot.html.
Listing 17.12. An HTML foot template with a specialized look and feel.
<!-- END CONTENT -->
</TD></TR>
<TR><TD VAlign="bottom" Align="center" Width="110">
<P><A Href="http://www.december.com/john/"><IMG Border="0" Width="40"
Height="40" Alt=" " Src="http://www.december.com/images/jd.gif"></A>
</TD>
<TD Valign="top">
<HR Noshade>
<FONT Size="2" Color="green">
<EM>© <A Href="http://www.december.com/john/">John December</A>
(<A Href="mailto:john@december.com">john@december.com</A>)
<BR>
<FONT Size="2" Color="green">http://www.december.com/works/XX-FILE
XX-DATE</EM></FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
I create a content file, called hcu.html, that contains descriptive information for this book and runs the makestyle script:
$ makestyle htm.html book "HTML and CGI Unleashed" "This book helps you in all stages of Web development"
The result is shown in Figure 17.12.
Figure 17.12 : The HTML and CGI Unleased page.
The look and feel for the book style is very similar to the john style. With some more creative changes, I could go a level of abstraction further and parameterize the XX- strings I include in the header and footer files. I could have cascading styles, in which a particular style borrows elements from several other styles-perhaps the head from one style and the foot from another.
Eventually, style sheets in HTML might be able to implement many of the look and feel decisions that I'm currently placing in the header and footer files and scripts. If so, I can modify my scripts to generate these style sheets and put that style information in HTML elements in the head and foot file. In fact, I could use different generation techniques to generate a text-only version of my web, a frames version, or a version with only particular HTML elements; it is simply a matter of changing my scripts or the head and foot files.
The kind of file-generation scheme I suggest in this chapter is
taken to an even higher level of abstraction in Chapter 27,
"Creating and Managing Dynamic Web Sites: Differentiating
Data from Display." Instead of generating the HTML pages
of a web beforehand, this chapter discusses a scheme to generate
them at the time of the user's request. Advanced schemes
such as these for web implementation are crucial for professional
developers who maintain large sites.
| HTML File-Generation Techniques |
You can read about my template- and file-generation techniques and obtain the source code and updates for the examples in this chapter at the HTML Station (http://www.december.com/html/tech/make.html). |