-- 1 --
-- 3 -- -- 4 --

The ANT_HTML Toolbar

If your browser supports JavaScript, you can click on any of the tools on the Toolbar above to move to the section which describes the tool. Regardless of whether your browser supports JavaScript or not, clicking any of the icons below will transport you back to the top of this page.

Converting and Saving Documents

CONVERT AND SAVE TOOL

The tool will convert any new or any previously coded document and save it with whatever name you choose to give it and an .HTM extension. You will be given the option of saving or not saving your original document in the process.

If you choose to close the .HTM document after converting and saving it, Word will display a dialog box with the following message:

    The document contains formatting that cannot be saved in text format.
    Do you want to save changes to (your .HTM document )

Answer "NO" to this question. Your document will be saved in the correct format
(The Ant template will display a dialog box reminding you of this if you choose to save it immediately after the conversion.)

After clicking the CONVERT AND SAVE TOOL, a dialog box will appear which contains conversion options. You may choose whether or not you wish to have each entry checked for tags. If you are creating a new HTML document, the settings you'll need are already set as the defaults. If you have imported a previously coded HTML document, and the HTML tags are just the way you want them, you may wish to choose the Quick Save option. The file will be saved "as is" with an .HTM extension.

(Word imports all text in HTML documents as "Normal" style, so headings, list items and other entries which do not require < P> tags will automatically receive < P> tags if you are editing a previously coded document and do not use the Quick Save option. You may just delete them and select File, Save after the conversion, if you don't wish to use the Quick Save option.)

If you experience any temporary embogglement at the apparent complexity of the options, please note that they're easier done than said. Try them.. Some HTML editors do not permit any editing of HTML documents and thus happily avoid the necessity of presenting the user with explanations and descriptions of possible choices. I hope the options and features of the Ant template will compensate.

The CONVERT AND SAVE TOOL now provides an option to either view or to hide the conversion process.

The CONVERT AND SAVE TOOL also automatically converts superscripts and subscripts.

Word .DOCs and HTML documents are very different beasts
Back to Index

Viewing the Hidden Codes

You may toggle (turn on or off) the hidden codes using the VIEW HIDDEN CODES TOOL provided on the toolbar (shaped to look as much like spectacles as possible) or by using any standard Word method.


Headings and Styles

HEADINGS 1 - 6. TOOLS and TITLE TOOLS:

If you place the cursor anywhere in a paragraph and click the tool, the contents of the entire paragraph will be automatically selected and formatted with codes. If there is no text in the paragraph at the cursor location, the beginning and ending codes will be inserted on each side of the cursor.

If there is more than one paragraph selected, the codes will be placed at the beginning and at the end of all the text in your selection.

ADDRESS STYLE:

The ADDRESS TOOL formats selected text within paragraphs with codes. If there is no text in the paragraph at the cursor location, the beginning and ending codes will be inserted on each side of the cursor. (The Address Style is not available via the StyleBox because Word for Windows StyleBox styles format entire paragraphs, thus prohibiting < Address> tags from being used in conjunction with other paragraph styles.)

If there is more than one paragraph selected, the codes will be placed at the beginning and at the end of all the text in your selection.

NORMAL STYLE

The NORMAL TOOL changes paragraph formatting to "Normal" Style. (You may also use Word's Style Box.)

You may also select headings, styles, as well as numbered or unnumbered lists via Word's

STYLE BOX.

Use the Styles in the Style Box as you normally do. The codes won't be inserted until you choose the CHECK STYLES FOR HTML CODES TOOL described below.

When you use styles from the Word Style Box (to the left of the font selections on Word's standard formatting toolbar), you may quickly insert heading and style codes by choosing the

CHECK STYLES FOR. HTML CODES TOOL

It installs the appropriate codes around each style if they aren't there already.
(If some codes are already inserted, it will ignore them so you may use this tool as many times as you wish while preparing your document.)

Back to Index
Back to Lists

In addition to the above options, a

STYLE TOOL

provides a dialog box with a range of style choices including
<HEAD>.. <BODY>.. <BLOCKQUOTE>.. <COMMENT>.. <DIRECTORY>.. <CITE>.. <CODE>.. <FIXED>.. <KEYBOARD>.. <SAMPLE>.. <STRONG> & <VARIABLE>.
The BACKGROUNDS AND COLORS TOOL enters the beginning < body > tag along with your background graphics and color preferences, if you want it to.

When an option is chosen, the codes will automatically be inserted at the cursor location. If no text is selected, the codes surround the cursor, so you can begin typing your entry immediately. If text is selected, the codes will surround the text. Use whatever method you find the most convenient.

If there is more than one paragraph selected, the codes will be placed at the beginning and at the end of all the text in your selection.

Note: If you use the style called CODE, Word changes some entries like "<code> & lt; </code> ". Word reads it as....{yes, you guessed it}, CODE!

Back to Index

PRE

The PRE ("Preformatted") style is useful for sections of text that require columns and fixed width formatting. It's frequently used to create tables for viewing in browsers that don't support tables. (The HTML language requires that you remove the formatting (i.e. the table itself) from your Word table. [If you find this somewhat unsettling, go and have a toddy or a hot bath or both and concentrate on all the things the HTML language does permit one to do. This is just a suggestion and not a formal instruction, however. You are expected to bathe and toddy at your own risk.])

Word .DOC to HTML Table conversions.

PRE uses a fixed width font. The PRE TOOL inserts the code "<PRE> " and "</PRE> " tags around whatever text is selected. If there is no text in the paragraph at the cursor location, the beginning and ending codes will be inserted on each side of the cursor.

If there is more than one paragraph selected, the codes will be placed at the beginning and at the end of all the text in your selection.

Spacing (tabs, indents, etc. will be determined to some degree by Web browsers, so you may wish to preview your work in a browser before finalizing your document. Most browsers don't recognize tabs or indents at all. The ones that do, generally prefer spaces better than tabs and like tabs much better than indents. The PRE font looks like this:

            This is a PRE Entry:           4567           8910
            This is the second line:       7654           0198

Horizontal Rule

Horizontal Rule is a style which inserts a line across the entire width of the page. It can be inserted either by clicking the tool or by choosing Horizontal Rule in Word's Style Box. Because of the way Word moves horizontal lines down the page, it's easy to insert text into a paragraph formatted with a line and not know it. the Ant attempts to alert you that you have either accidentally or intentionally formatted in the Horizontal Rule Style by making the paragraph marker gold. (A difference in shading is also visible in monochrome monitors.)

New FANCY <HR> TOOL allows a variety of Horizontal Rule tag options.

Back to Index


Two font styles: "Directive Text" and "URL Text" are used by the macros to facilitate the application of character attributes...to hide the directives and to show the URL links. You will not need them unless you hate red hidden text and would prefer some other color. You may alter the color in the Format Styles menu.


P Tool

Inserts a < P> tag (i.e. code) at the cursor location.
If you are creating a new document, you won't need it. The CONVERT AND SAVE TOOL will add these for you. ( Don't worry,.. it will not do any harm if you use it. )

BR Tool

Inserts a <BR> code and a Word line break at the cursor location or at the end of each line in a selection and changes each selected paragraph to single line spacing. The <BR> code at the end of a line acts as a line break in hypertext documents. (If you use this in conjunction with any of the other tools, use the BR TOOL first.)

The CONVERT AND SAVE TOOL or the CHECK STYLES FOR HTML CODES TOOL will insert these for you wherever you have inserted a line break (SHIFT+ENTER) if the <BR> tags are not already there.

Back to Index

Entering Graphics


When you select the GIF TOOL four options are presented.

    1... Inserts the appropriate .gif (graphic) reference and a graphic placeholder into the current document. (You can select this option and later delete the placeholder if you wish.

    2... Inserts the appropriate .gif reference and the actual picture into the current document. Note that certain graphic filter requirements must be met or the application can crash. Save often! (The placeholders should not present this problem.)


    In the two options above, if your .DOC has been saved and given a name, the Ant will automatically calculate and insert the "Relative Path" (e.g. the path between the .DOC and the .GIF or other graphic file) for you. For more information about graphic paths, see Graphics Files and Paths, below.

    3... NEW AND IMPROVED VERSION 3.0.
    If you choose to enter your own custom graphic path (because the HTML files will reside on the Web server and the directory structure on your computer may be different than the directory structure of the Web server), you can...

      * Enter whatever path you like into the textbox.
      * Then, click OK.
    The tool will allow you to select any graphic on your computer. The appropriate HTML tag containing your custom path and the name of the graphic file you've selected (ex. "mygif.gif") plus the graphic itself will be inserted into your .DOC file.

    Your custom path preference will be stored and reappear in the textbox so that the next time you click the tool, you donít have to reenter it. The custom setting can be deleted or changed at any time. If an entry in this textbox exists, it takes precedence over the options described in # 1 and 2 above.)

    4... Permits you to type (or copy and paste) the name of the .gif and the path into a text box, then inserts the appropriate codes. This option does not automatically insert a placeholder. You can insert a placeholder in several ways should you wish to do so. Create your own or place the cursor next to your .gif reference and click on the PLACEHOLDER TOOL. (If you type (or copy and paste) an entry into this textbox, the entry takes precedence over any of the other options.)

The GIF TOOL offers options (non-WYSIWYG) for...

  • Alignment - None, Left, Right, Top, Texttop, Middle, Absmiddle, Baseline, Bottom, Absbottom
  • Width
  • Height
  • Vspace
  • Hspace and
  • Border preferences.

The tools default setting is ".GIF" because that's the only graphic format that all Web browsers can display. You can, however, enter any graphic you like. To choose a .JPG or any other format, select the "List Files of Type" entry in the dialog box and after the Ant calculates the path and installs the HTML tag, replace the ".GIF" with whatever format is appropriate.

Gif Tip
Sometimes importing .gif files and other graphics into a Word document can cause the entire application to crash.. The ANT-HTML options, provide two alternatives that eliminate this problem. If your application is prone to crashing because of the .gifs, choose to use a placeholder or refer to the file using "text only" as described in the GIF TOOL options.

Graphics Files and Paths
The Ant program supports any graphics formats that Word supports. Graphics files and HTML files are entirely different files. (Web browsers use the graphics tag to know where to find and where to display any particular graphics file. If for some reason, the graphic isn't displayed when you view your HTML file in a Web browser, it may be a "path" problem. What is probably happening is that the browser can't find the .gif file. It's easily solved. Perhaps it will sound more difficult than it is, though. To try and make what might be a long story short, the path in the .gif tag must tell the browser where the .gif file is stored.

If you are viewing files on your computer and both the HTML file and the .GIF file reside in the same directory, the .GIF tag would read:

<IMG SRC="mygraphic.gif">

but if the .GIF file is in a different directory, the path in the .GIF tag must accurately point the way. For example if the directory structure looks like this:

C:\
  - MYDOCS
  - MYHTMLS
     - current              <- this directory contains myhtml.htm
          - graphics        <- this directory contains mygraphic.gif
     - former
          - oldgifs
  - WINWORD
Then, the tag in the HTML document (i.e. "myhtml.htm") should read:

<IMG SRC="graphics/mygraphic.gif" >

(This is standard DOS computer path info.)

The Ant programs automatically calculate the path for you if you choose to insert the image or a placeholder when you click the Insert GIF Tool. This is only valuable for viewing files on your computer, though. Frequently when HTML files and graphics files are placed on a Web server, the directory structure isn't identical to that of the computer the files are created on.

If both the HTML file and the graphic file that is to be displayed by the browser reside in the same directory (on your computer and / or on the server), the tag need only contain the filename (the name of the graphic file) itself and no path will be required.

Back to Creating A Hypertext Document
Back to Tips and Notes
Back to Index

Hypertext Links

URL World Wide Web Anchors

( URL Links to locations outside the document or set of local documents)
URL LINK TOOL

Inserts the appropriate Universal Resource Locator code around selected text. This tool offers multiple options including opening a dialog box so that you may point and click on any filename on any drive or directory on your computer. The Ant will enter the HTML tag, the path and the filename - or, if you prefer - just the tag and the filename. You may also copy and paste (or type) any URL you wish and the appropriate HTML tag will be inserted into your document.

      For example, if you choose to type an entry into the dialog box, type

          http://galaxy.einet.net/galaxy.html

      and choose OK

Back to Index

Local Anchors

(Links within documents and to other local documents):
You can create a hotword (or phrase) called a LOCAL ANCHOR REFERENCE
to point to a specific destination called a
LOCAL ANCHOR DESTINATION
within your document or in another local document.

TO CREATE A LOCAL LINK:

    • Type the word or phrase you want the reader to click on, like "Go to the Razamatazz section now?"
    • Select the phrase and click on the LOCAL ANCHOR REFERENCE TOOL
    • Invent a name to be assigned to the hidden spot in your document the reader will be transported to.
    • Type it in the in the dialog box presented.

You'll be offered the option of actually installing the anchor destination either now or later.
    • If you choose "NO, LATER", you may click on the LOCAL ANCHOR DESTINATION TOOL when you're ready.
    • If you choose "YES, NOW", the tool will help you search the document (or another local document) for the destination location you want.
You may combine local anchor references and destinations. For example:
          < A NAME = Whatzit
          A HREF = "OtherDocumentName#Gizmo"> </A>

    "Whatzit" serves as an anchor destination. "Gizmo" is the anchor reference (hotlink) word in the "Other Document."
    Notice that the bracket is omitted in front of "A HREF"
      For best results:
    • Place anchor destination codes at the left margin.
    • Omit or delete any spaces between the quotation marks.
    • One word anchor destinations seem more reliable.
    • The anchor names ARE case sensitive.

All this is easier done than said. Just try it.

For more information, see Resources


Back to Index

Numbered and Unnumbered (bullet) Lists

NUMBERED LIST TOOL

or

UNNUMBERED LIST TOOL

If the text you select is already a list style, the tools change the level of the list. All text to be converted to a list should be included when you make your selection.

Each paragraph in the selected text is converted to a list item

Allow the template to enter the <LI> tag to each list item entry for you. If you insert it yourself, the appropriate <OL> or <UL> tags may not be inserted.

(Use Word's Style Box styles if you prefer, or a combination.)

Or... you can insert the list tags you want as you go by using the FORMAT LIST ENTRY TOOL.

Back to Index

Discursive Lists

The DISCURSIVE LIST TOOL inserts <DL>,<DD> and </DL> codes either at the cursor location or around selected text. You will be prompted and asked whether you wish to add a Descriptive Title entry, a <DT>. If so, you may enter the text in the space provided or you may simply click OK and add the text immediately after the <DT> code in your document.

Below is an example of a Discursive List entry:

This is the title

This is the first paragraph of a Discursive list entry. It wraps around like this: and just goes on and on and on and on and on and on forever almost and on and on and on and on and on and on and on and on and on and on and on.

And on and on and on and on till the words have no more meaning and so on and on and on and on and on until you realize that okay, enough is enough.

Back to Index

Forms

Also see: "Form Thing", the HTMLForm Toolbar

The original FORM TOOL presents a dialog box with a list you can scroll to choose a form tag. The tool inserts the tag into a text box which you can edit if you like. You may alter or add to any of the entries inside the dialog box, or add text later, after the tag has been inserted into your document. (If you wish to alter or add to the form entries before inserting them into your document, you may either type the text you want or paste it directly into the form tag.) An optional < P> tag can be automatically inserted at the end of the form entry if you so choose. The template contains a comprehensive list of possible form tag entries.

A simple fill-out form with two text entry fields and no default value looks like this:

A single text entry field goes here:

Another text entry field goes here:

To submit the query, press this button:

The HTML code for the fill-out form above looks like this:

<FORM METHOD="POST" ACTION="http://www.your.site/somebin-post/post query">
A single text entry field goes here: <INPUT NAME="entry1" > <P>
Another text entry field goes here: <INPUT NAME="entry2" > <P>
To submit the query, press this button: <INPUT TYPE="submit" VALUE="Submit Query" > <P>
</FORM>


A checkbox form with three user options:

A single text entry field goes here:

Another text entry field goes here:

To submit the query, press this button:

To reset the checkboxes to their default states, press this button:

The HTML code for the checkbox form with three user options looks like this:

<FORM METHOD="POST" ACTION="http://www.your.site/somebin-post/post query">
A single text entry field goes here: <INPUT NAME="entry1" > <P>
Another text entry field goes here: <INPUT NAME="entry2" > <P>
<OL>
<LI> <INPUT TYPE="checkbox" NAME="box1" VALUE="activated" CHECKED>
<LI> <INPUT TYPE="checkbox" NAME="box2" VALUE="primed" >
<LI> <INPUT TYPE="checkbox" NAME="box3" CHECKED>
</OL>
To submit the query, press this button: <INPUT TYPE="submit" VALUE="Submit Query" > <P>
To reset the checkboxes to their default states, press this button: < INPUT TYPE="reset" VALUE="Reset To Default Values"><P>
</FORM>

The first checkbox above is on by default.
The second checkbox is off by default.
The third checkbox is on by default.

  • The VALUE within an INPUT tag of TYPE "text" specifies the default value of that text field.
  • The VALUE within an INPUT tag of TYPE "checkbox" specifies the value that checkbox takes when it's on. If it's left blank, the default is "on".
  • CHECKED specifies that the checkbox is on by default.
  • INPUT tags of TYPE"submit" and "reset" are special buttons.
For more information and an online series of examples, see "Form Entries" in Resources
Back to Index

Converting HTML files to WYSIWYG

Click the HTML to WYSIWYG TOOL and revise or print your document. (You can easily remove all HTML tags afterwards, if you wish, with the "Zap Codes from Entire Document" tool. The HTML TO WYSIWYG Tool assumes that lists are not nested (i.e. inside each other). It also assumes that for each beginning HTML tag in the document, an ending tag exists.

The HTML to WYSIWYG TOOL now provides an option to either view or to hide the conversion process.

The HTML to WYSIWYG TOOL also automatically converts superscripts and subscripts.


The ANT Tool

When clicked...displays Ant info.

Back to Index
Back to Top

© Copyright 1996. All Rights Reserved.