═══ 1. Introduction ═══
HTML Wizard is an editor designed to make writing HTML documents for WWW pages
a lot easier. The original version was written purely for my own use and was
not distributed. The arrival of Web Explorer lead a lot of OS/2 users to ask
about a native HTML editor, so I released an early version of HTML Wizard that
showed signs of being a program written for one person's use (no way to resize
the window, almost no configurability, etc.). Since then, a lot has changed and
the program is now much more powerful and configurable. I thank the many users
of the program for their suggestions for improvements.
Many people have asked about a preview function and support for rules. Both of
these functions will require an enormous amount of coding. The preview function
is not hard to do when HTML Wizard is used in conjunction with Web Explorer as
explained in the "How Do I..." section. If you are online, you can have the
syntax of your document checked by the WebLint server. This is also explained
in the "How Do I..." section.
═══ 2. Installation ═══
Installation of HTML Wizard is simple and straightforward. Unzip the HTML
Wizard archive in its own directory. Then run install.cmd by typing "install".
The install program will create an HTML Wizard object on your desktop. To run
the program successfully, VROBJ.DLL has to either be in your HTML Wizard
directory or be in a directory specified in the LIBPATH statement in your
CONFIG.SYS file. What I do is make a directory called \USR\DLL and put all my
application dll's in there. Then all you have to do is add \USR\DLL to the
LIBPATH and reboot. If you don't like the idea of messing with CONFIG.SYS, just
copy VROBJ.DLL to the \OS2\DLL directory or leave it in your HTML Wizard
directory if you have no other applications built with VX-REXX. You can then
run HTML Wizard by double-clicking it or dropping an HTML document onto it.
═══ 3. Options Menu ═══
This section explains the various program settings in the "Options" menu.
═══ 3.1. Insert Tags as Uppercase ═══
This setting determines whether the tags that are inserted are done as upper or
lowercase text. Note that this does not apply to tags for special characters,
which are case sensitive.
═══ 3.2. Word Wrap ═══
Select this setting if you want long lines to be wrapped around the screen to
the next line. Deselect it if you want long lines to continue off the screen to
the right and be visible by using the horizontal scrollbar.
═══ 3.3. Auto-insert Paragraph Tags ═══
If this item is selected, text imported using the "Insert File" command will
have paragraph tags inserted automatically if:
A line is blank
A line begins with either a space or a tab
═══ 3.4. Insert
Tags in Selected Lists ═══
This item controls whether
tags will be automatically inserted in text
that is selected when using the OL or UL tag buttons (ordered or unordered
lists). If this option is selected, each line in the selected text will have
the
inserted at the beginning. Note that "line" here means a true line
defined by a CR/LF pair. It is best to turn Word Wrap off to see true lines.
═══ 3.5. Vertical Tagbar ═══
Toggles the Tagbar between horizontal and vertical orientation.
═══ 3.6. Hide Tagbar ═══
Toggles the Tagbar between visible and hidden.
═══ 3.7. Translate Non-English Characters ═══
This feature enables users of non-English code pages to type HTML documents
with special characters directly from the keyboard, rather than having to use
the "Characters" menu or multiple keystrokes. With this feature enabled, all
files are passed through a translator program when opened or saved. On input,
HTML entities for special characters (e.g., ò) are converted into the
character appropriate for the user's code page and displayed as that character
in the editing window. On output, the characters are converted into the
corresponding HTML entity. The key file for this is "trans.def" in the HTML
Wizard directory. This file tells the program which characters in the user's
character set go with a particular HTML entity. I have supplied two files,
cp850.def (code page 850) and latin1.def (ISO Latin-1) which will cover the
people who have requested this feature. (The trans.def file that is in the ZIP
archive is for code page 850.) If you are using code page 850, copy cp850.def
to trans.def, or copy latin1.def to trans.def if you are using ISO Latin-1. If
you are using another code page, you will have to build a .def file for that
page. Look at the supplied files to see how it is done. Basically, the file has
two columns: the first is the character number on that code page, and the
second is the corresponding HTML entity. The included utility DefEdit is
designed for editing these files. It is a PM program that allows you to
create/modify .def files very easily. Start it up, and load a .def file, and it
will be pretty obvious how to use it. If you do create a .def file for another
code page, I would appreciate it if you would send me a copy, so that I can
include it in future releases of HTML Wizard.
═══ 4. How Do I... ═══
This section explains how to do various things with HTML Wizard.
═══ 4.1. Use HTML Wizard? ═══
Start the program by double-clicking the HTML Wizard icon or by dropping an
HTML document onto it. If you double-click the icon, the program will start up
and load an HTML skeleton template in the file DEFAULT.HTM and you can modify
that file to suit your needs. You can then write your HTML document by typing
in the edit window and using the Tagbar or Tags menu items to insert tags. If
you have some text that you would like to put inside a tag, select that text
with the mouse and click on the tag button or menu item. HTML Wizard will then
put the tag around the text. If you insert a tag with no text selected, HTML
Wizard will simply place the tag at the insertion point and place the cursor in
the appropriate place to enter text for the tag. Once you are done, you can
save the HTML file with the "Save" or "Save As" items under the "File" menu. If
you want to start a new HTML document choose "Close" under the "File" menu, and
a fresh template will be loaded.
═══ 4.2. Insert HTML tags? ═══
To insert tags, there are three options. First, you can insert tags by clicking
on the appropriate buttons in the Tagbar. Or, you can choose the tag you want
from the "Tags" menu. A final way is to right-click in the edit window,
bringing up the tags menu. In all cases if text is selected before the tag is
inserted, the tag will be placed around the selected text (where appropriate,
of course). Inserting a tag with no text selected places the tag at the
insertion point and puts the cursor at the place where text can be typed in the
tag.
═══ 4.3. Program the user-definable tags? ═══
To program a user button, right-click on it and a window will pop up. In the
top entry field enter the "Hint" text for that button. (This is the message
displayed in the status area at the bottom of the Tagbar when the mouse passes
over a button. Use this to remind yourself what the tag is for.) The bottom
entry field is the tag itself. If your tag should enclose text that has been
selected, move the cursor to the point in the tag where the selected text
should be placed. For example, let's say you have a tag like . If
the user selects text in the editing window, and this text should go within the
tag, you would position the cursor like this: | before hitting the
OK button. You can then immediately begin to use your new tag by left clicking
on the button you just progammed.
═══ 4.4. Preview with Web Explorer? ═══
Previewing with Web Explorer is as simple as selecting "Preview Document" from
the "File" menu, or by pressing F10. If Web Explorer is not running, HTML
Wizard will start it and load the HTML document you are editing. If Web
Explorer is already running, HTML Wizard simply forces it to load the present
version of your HTML document (rather than starting another session of Web
Explorer). For this feature to work properly, the Web Explorer executable
(explore.exe) must be in your PATH. If you use the default Web Explorer
installation, it will be in \TCPIP\BIN.
You can also preview your HTML document at any time by dragging the little
square where the vertical and horizontal scroll bars meet and dropping it on
the Web Explorer window.
═══ 4.5. Check the HTML syntax of my document with WebLint? ═══
If you are online, selecting "Check Document with Weblint" (or pressing F7)
will send your HTML document to the WebLint web site (www.unipress.com) for
syntax checking. If all goes well, the results of the syntax check will be sent
back and automatically loaded into Web Explorer. This function runs on a
separate thread, so you can continue to edit your document, but be aware that
the line numbers reported back by WebLint refer to the line numbers as they
were when you sent the file (Weblint will send back the HTML code you sent to
be checked with the line numbers labelled.). REMEMBER, THIS FUNCTION ONLY WORKS
IF YOU ARE CONNECTED TO THE NET! Eventually I will add the ability to run
WebLint locally for those people that have Perl installed (available from
hobbes.nmsu.edu in the Unix directory).
═══ 4.6. Insert accented/special character tags? ═══
There are three ways of inserting tags for accented/special characters if you
are not using the "Translate Non-English Characters" option (see the "Options"
section for more details).
Choose the character you want from the "Characters" menu.
Type the character you want to accent, say "a", then select the accent
you want from the "Accents" menu.
Type the character you want to accent, then press:
- Alt-a for acute
- Alt-g for grave
- Alt-u for umlaut
- Alt-c for circumflex
- Alt-s for slash
- Alt-t for tilde
The general pattern for the hot keys is Alt for accents and Ctrl for inserting
certain characters. (Like Ctrl-Shift-& for the ampersand).
═══ 4.7. Pay for this great program? ═══
HTML Wizard is distributed as shareware which means you have 25 free uses to
try it out and see how it works. If you want to continue to use it after that,
you must register the program. The registration fee is $20 US. I can accept
checks drawn on US banks, or International Money orders. Please include an
email address when you send in your registration so that I can put you on the
registered users' mailing list. The registration fee should be sent to:
Dirk Terrell
510 SW 34th St. Apt. #6
Gainesville, FL 32607
(USA)
If you receive HTML Wizard after August 1996, there is a distinct possibility
that I may have moved. The best thing to do is send e-mail to
algol@genie.geis.com (or ALGOL if you are on GEnie) and find out where I am.
For those of you who would like to use a credit card for faster service, you
may order HTML Wizard from the fine folks at BMT Micro:
Mail Orders To: BMT Micro
452 Horn Road
Wilmington, NC 28412-2411
U.S.A.
Voice Orders: 9:00am - 7:00pm EST (-5 GMT)
(800 414-4268 (orders only)
(910) 791-7052
Fax Orders: (910) 350-2937 24 hours / 7 Days
Online Orders via modem: (910) 350-8061 10 lines, all 14.4K
(910) 799-0923 Direct 28.8K line
Ordering and general ordering questions:
Via AOL: bmtmicro
via Compuserve: Thomas Bradford, 74031,307
via Internet: tbrad@wilmington.net
We accept Visa, Mastercard, Discover, American Express, Money Order,
Cashiers Check, Personal Check. Please do not send cash in the mail.
Personal checks are subject to clearance.
═══ 4.8. Contact the author of this program? ═══
If you have problems or suggestions for improvements, send them to
terrell@gnv.fdt.net (preferred address before August, 1996) or
algol@genie.geis.com (ALGOL if you are on GEnie).
═══ 5. Help on HTML Tags ═══
This section contains help on the HTML tags supported by HTML Wizard
═══ 5.1. Heading Tags ═══
The heading tags ... are used to separate an HTML document
into sections and subsections.
is the topmost heading, with the next level
being
, and so on. Text placed between the tags will be displayed as the
title text for that section. For example
HTML Wizard for OS/2 Home Page
might be displayed as:
HTML Wizard for OS/2 Home Page
═══ 5.2. Typeface tags ═══
These tags control the appearance of text in an HTML document by changing
fonts.
═══ 5.2.1. Bold ═══
Use this tag to cause the text to be displayed in a bold font.
This text is bold.
might be displayed as:
This text is bold.
═══ 5.2.2. Emphasis ═══
Use this tag to cause the text to be emphasized. This is usually preferable to
using the bold or italic tag.
This text is emphasized.
might be displayed as:
This text is emphasized.
═══ 5.2.3. Italic ═══
Use this tag to cause the text to be displayed in an italic font.
This text is in italics.
might be displayed as:
This text is in italics.
═══ 5.2.4. Underline ═══
Use this tag to cause the text to be underlined when rendered by the browser.
This text is underlined.
might be displayed as:
This text is underlined.
═══ 5.2.5. Typewriter ═══
Use this tag to cause the text to be displayed in a typewriter (fixed-width)
font.
This text is rendered with a fixed-width font.
might be displayed as:
This text is rendered with a fixed-width font.
═══ 5.3. List tags ═══
The HTML list tags are used to create, amazingly enough, lists of items. There
are three list types in HTML:
Ordered (numbered) lists
Unordered (bulleted) lists
Descriptive lists
═══ 5.3.1. Ordered Lists ═══
The ordered list tags are used to create lists that are numbered,
rather than bulleted as in the unordered list tags. These tags are used in
conjunction with the list item tag
. The tags surround a series
of
tags to produce the ordered list. For example:
Item 1
Item 2
Item 3
might be displayed as
1. Item 1
2. Item 2
3. Item 3
You can also nest lists to make outlines as in:
Item 1
Sub-item 1
Sub-item 2
Item 2
Item 3
which might be rendered as:
1. Item 1
a. Sub-item 1
b. Sub-item 2
2. Item 2
3. Item 3
Finally, if you would like to make the list more compact by eliminating the
spaces between each item, as the COMPACT modifier to the tag like this:
Item 1
Sub-item 1
Sub-item 2
Item 2
Item 3
which might be rendered like this:
1. Item 1
a. Sub-item 1
b. Sub-item 2
2. Item 2
3. Item 3
HTML Wizard Time Saver:
If you already have the text for the items loaded into HTML Wizard (say, from
a file import), you can create lists quickly by selecting the text (making
sure that there is one list item per line), then choosing the Tagbar
button or corresponding Tags menu option. If you have "Auto-insert
tags
in Lists" checked in the "Options" menu, HTML Wizard will place the outer
and tags around the text and place the
tag in front of each list
item.
═══ 5.3.2. Unordered Lists ═══
The unordered list tags
are used to create lists that are bulleted,
rather than numbered as in the ordered list tags. These tags are used in
conjunction with the list item tag
. The
tags surround a series
of
tags to produce the ordered list. For example:
Item 1
Item 2
Item 3
might be displayed as
Item 1
Item 2
Item 3
You can also nest lists to make outlines as in:
Item 1
Sub-item 1
Sub-item 2
Item 2
Item 3
which might be rendered as:
Item 1
- Sub-item 1
- Sub-item 2
Item 2
Item 3
Finally, if you would like to make the list more compact by eliminating the
spaces between each item, as the COMPACT modifier to the
tag like this:
Item 1
Sub-item 1
Sub-item 2
Item 2
Item 3
which might be rendered like this:
Item 1
- Sub-item 1
- Sub-item 2
Item 2
Item 3
HTML Wizard Time Saver:
If you already have the text for the items loaded into HTML Wizard (say, from
a file import), you can create lists quickly by selecting the text (making
sure that there is one list item per line), then choosing the
Tagbar
button or corresponding Tags menu option. If you have "Auto-insert
tags
in Lists" checked in the "Options" menu, HTML Wizard will place the outer
and
tags around the text and place the
tag in front of each list
item.
═══ 5.3.3. Descriptive Lists ═══
Descriptive (or definition) lists are useful when you want to make a list that
has item names and a description of each item, as in the following:
Item 1
This would be some text that describes item number 1.
Item 2
This would be some text that describes item number 2.
Descriptive lists are created with the
tags surrounding a series of
and
tags with appropriate text. The
tag marks the text that is
to be shown as a list item (Think of it as descriptive title.), and the
tag marks the descriptive text that goes with the preceding list item. The
above example would be coded as:
Item 1
This would be some text
that describes item number 1.
Item 2
This would be some text
that describes item number 2.
═══ 5.3.4. Directory Lists ═══
The directory tag is used to create a directory list. Items within
the list are marked with the list item tag. The COMPACT modifier may be used
with this tag.
═══ 5.3.5. List Items ═══
The list item tag
is used to mark the text in each item of an ordered,
unordered, or directory list.
═══ 5.4. Formatting tags ═══
These tags control the formatting of text in an HTML document.
═══ 5.4.1. Address ═══
The address tag is used to mark text as being an email
address. It is frequently used to indicate the author of a Web page like this:
This Web page produced by Dirk Terrell using HTML Wizard.
which might be rendered as:
This Web page produced by Dirk Terrell using HTML Wizard.
═══ 5.4.2. Block Quote ═══
The block quote tag is used to set off text that is
being quoted. Most browsers do this by indenting the text between the tags.
═══ 5.4.3. Line Break ═══
The line break tag is used to force the HTML browser to continue text on
the following line. This tag is very useful in Tables.
HTML Wizard Time Saver:
If you select text before pressing the line break Tagbar button, HTML Wizard
will insert line break tags in the selected text when:
A line is blank
A line begins with a tab or a space
═══ 5.4.4. Paragraph ═══
The paragraph tag
is used to mark the beginning of a new paragraph.
Notice that this sentence is separated
from the following one even though we typed
all of the text together.
This is caused
by the use of the paragraph tag.
might be rendered as:
Notice that this sentence is separated from the following one even though we
typed all of the text together.
This is caused by the use of the paragraph tag.
HTML Wizard Time Saver:
If you select text before pressing the paragraph Tagbar button, HTML Wizard
will insert paragraph tags in the selected text when:
A line is blank
A line begins with a tab or a space
═══ 5.4.5. Pre-formatted ═══
The pre-formatted tag
is used when you do not want the HTML browser
to change the formatting of the enclosed text. All spacing and line breaks will
be preserved, and most browsers will display the text in a fixed-width font.
This text is not surrounded by pre-formatted tags, so
line breaks and spaces are not
preserved.
On the other hand, this text is
enclosed in pre-formatted tags, so line
breaks and spaces are preserved.
might be rendered as:
This text is not surrounded by pre-formatted tags, so line breaks and spaces
are not preserved.
On the other hand, this text is
enclosed in pre-formatted tags, so line
breaks and spaces are preserved.
═══ 5.5. Forms Tags ═══
These tags are used in creating HTML documents for Web pages with forms. Forms
enable you to create a Web page that allows users to fill out entry fields and
submit a document to your Web server for processing. You might use this if you
wanted to be able to allow searching of a database on your Web server. The user
would fill out the form and submit it. Your server would process the request
and send the results back to the user.
The following tags are used to implement forms: