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

CRACKERJACK USER'S GUIDE

Section 2 - CJ_HTML Toolbar Tools and Features

Although this guide contains many HTML tips and formatting suggestions, it is not intended as an instruction guide for HTML. If you are already familiar with HTML coding, the features will (I hope) seem "intuitive" and enable you to click on a tool and achieve the expected result.

The CJ_HTML Toolbar contains the following tools:

If your browser supports JavaScript, you can click on any of the tools on the CJ_HTML 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. After clicking the CONVERT AND SAVE TOOL, a dialog box will appear which contains conversion options.
  1. You may choose whether or not you wish to have the document checked.
    If selected this option...
    • Checks the file for <HTML> and </HTML> tags and installs them at the beginning and end of the document if they're not already there.
    • Checks for the three special characters, left angle brackets, &lt; (<), right angle brackets, &gt; (>), ampersands, &amp; (&). If any of these three characters appear in your document but the proper HTML code hasn't yet been installed, Crackerjack will find them and present a dialog box offering you the option of converting these characters into ones which Web browsers can display. If you choose "OK", the appropriate codes will be entered for you.
  2. You may choose either to view or to "hide" the conversion process.
  3. 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 Crackerjack template will display a dialog box reminding you of this if you choose to save it immediately after the conversion.)

Back to Index
Top

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.

Back to Index
Top

Headings and Styles

HEADINGS 1 - 6. TOOLS and TITLE TOOLS:

When clicked, these tools surround the selected text with the appropriate HTML tags. 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 so that you can immediately begin typing the text for the entry.

ADDRESS STYLE:

The ADDRESS TOOL surround selected text with <ADDRESS> </ADDRESS> tags. 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 text within the tags will be displayed as italic text in most Web browsers. Also see the standard Italic tags (<I> </I>).

In addition to the above options, the...

STYLE TOOL

provides a dialog box with a range of style choices including:
  • <HEAD>
  • <BODY>
  • <QUOTE>
  • <COMMENT>
  • <DIRECTORY>
  • <CITE>
  • <CODE>
  • <FIXED>
  • <KEYBOARD>
  • <SAMPLE>
  • <STRONG> &
  • <VARIABLE>

NOTE: 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.

Another 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.

Crackerjack's Word .DOC to HTML Table conversions.

PRE uses a fixed width font and is provided in WYSIWYG form in the Crackerjack program (e.g. the font will be displayed as a fixed width font.) The PRE TOOL inserts the code <PRE> and </PRE> tags around whatever text is selected. If there is no text selected, the beginning and ending codes will be inserted on each side of the cursor.

Spacing (tabs, indents, etc. will be determined to some degree by HTML 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 behave more predictably if you use spaces between columns, instead of tabs or indents. The PRE font looks like this:
 

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

Horizontal Rule

If you want a standard <HR> tag to be inserted into the document, just click OK when the dialog box opens. Besides the standard tag, this tool offers Size, Width, Alignment and Shading options. You can enter whatever values you like.

  • Sizes 1 - 6
  • All alignments - None, Left, Center and Right
  • Width
  • Standard shading or "NOSHADE"

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.

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.

Back to Index
Top

Entering Graphics


When you select the GIF TOOL several options are presented.

    1... Permits you to search the drives and directories on your computer for a graphic file and when a file is selected, the path from the .DOC to the graphic is automatically calculated and the appropriate path and filename is entered into the document along with your choice of alignment and other specifications.

    If your .DOC has been saved and given a name, Crackerjack 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.

    2... Permits you to type or copy and paste the name of the graphic filename and path into a text box, then inserts the appropriate codes including your choice of alignment and other specifications. Your custom entry will be stored and reappear in the textbox so that the next time you click the tool, you donÆt have to reenter the path and just want to change the name of the graphic. 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 above.)

The GIF TOOL offers options 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 substitute ".JPG" or any other format you like.

Graphics Files and Paths
Regardless of what software you use, HTML files do not and cannot contain graphics. Graphics files and HTML files are entirely different files. (HTML 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 Crackerjack programs automatically calculate the path for you if you choose that option when you click the 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
Top

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. Crackerjack 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

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
Top

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 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 and on and on and on and on and on and on until you realize that okay, enough is enough.

Format List Entry Tool

This tool quickly formats an entire list by inserting your choice of "Numbered" (<OL>) or "Unnumbered" list (<UL>) tags around whatever text you've selected and inserts the "List Item" (<LI>) tag at the beginning of each paragraph in your selection.

    Level 1 List - Unnumbered (Bulleted)
  • First Entry
  • Second Entry
  • Third Entry
      Level 2 List - Unnumbered (Bulleted)
    • First Entry
    • Second Entry
    • Third Entry
        Level 3 List - Numbered
      1. First Entry
      2. Second Entry
      3. Third Entry
          Level 4 List - Numbered
        1. First Entry
        2. Second Entry
        3. Third Entry

Back to Index
Top

The CRACKERJACK Tool

When clicked...displays Crackerjack program info.

Back to Guide Index
Section 3: CJ_USER and CJ_SUP Tools and Features
Section 4: HTML Tips and Miscellany
The "Form Thing"
Top

Created and developed by Tela Communications
© Copyright 1996, All Rights Reserved.