Introduction

HTML Assistant Pro ©1993-1996 by Howard Harawitz and Brooklyn North Software Works, Inc., All Rights Reserved

HTML Assistant Pro has Context Sensitive Help–When using the program, press the F1 key for help with a selected control

HTML Assistant Pro is a simple text editor with extensions to assist in the creation of HTML hypertext documents.  HTML documents are used to access a variety of information sources with a World Wide Web browser.

The Automatic Page Creator included with HTML Assistant Pro permits very rapid creation of HTML text pages for use with WWW browser programs.   Minimal knowledge of HTML is required, and attractive screens with your own selected hypertext links can be created in a few seconds.

HTML Assistant Pro's other features include:

Ability to quickly convert formatted word processor files to HTML

Tool bar support for HTML 2 and HTML 3 features including forms, backgrounds and tables

Automatic creation of frame pages with a powerful QuickFramesTM feature

A built-in HTML viewer plus the capability to test your work with a browser at the click of a button – without leaving the editor

An image map editor that makes it easy to create graphics with embedded hypertext links

A user defined tool bar that permits creation and use of new HTML tags as they become available

Support for sound and video tags that add multimedia excitement to your Web pages

An automated publishing feature that puts your Web pages online quickly and easily

Support for ActiveX and other objects

Point and click creation of HTML hypertext markings

Ability to load and edit files of any size

The ability to remove HTML markings and reformat text to create readable documents from HTML files.

File search features–you can search for and load files containing key words which you select.

A multiple document interface (more than one file may be opened at one time)

Automatic conversion of browser Bookmark, Mosaic '.INI' and URL text files to hypertext documents

Easy transfer of URLs from browser Bookmark files  to your own HTML files

An option to make UNIX text files more readable by converting them to DOS text

An option to save DOS text files as UNIX text

Ability to print HTML text files


Subscribe to the HTML Assistant Newsletter

For continuing updates and news about HTML Assistant software, you can subscribe to an Email publication, the HTML Assistant Newsletter.  Published "semi-irregularly", and delivered (free!) directly to your (virtual) door, the Newsletter includes announcements, bug reports and news about HTML Assistant software.  It also is a source of information of general interest to users of the World Wide Web -- including text and HTML pages about learning HTML, interesting WWW sites, commentaries on the use of the Web, feedback and suggestions from users, etc.

To subscribe, send Email, with the word "subscribe" (quotes are not necessary) in the 'Subject:" field, to: news@brooknorth.com.  You may also include comments or suggestions in the text field of your message.

To find out what's new, be sure to check our Web site:

<URL: http://www.brooknorth.com>


Software Installation and Registration

Before installing HTML Assistant Pro, be sure to backup the original program diskette(s).

Because the installation procedure may change, installation instructions are supplied separately.  Follow the instructions to install the software.

This would also be a good time to fill out and send off the registration form.  You can register via Email by sending an Email message that includes all the information requested in the form.  Be sure to send the version, version date and serial number as shown on the diskette label.  You can also register on-line at the Brooklyn North Web site (http://www.brooknorth.com).


Setting your Test Browser

You can begin using HTML Assistant Pro as soon as it is installed and running.  To start working on an HTML document, select the "New" option from the "File" menu.

As you create and edit an HTML document, it's a good idea to test it periodically to see what it will look like online. To test a document, you start your Web browser from within HTML Assistant Pro.

You can use any Web browser with HTML Assistant Pro. In fact, you may want to view an HTML document with two or more browsers to test it for compatibility. To specify the browser you want to use, choose "Select test browser" from the "File" menu. Select the browser you want from the Browser List dialog box that appears. The dialog box also has controls that let you add and remove browsers to and from the list.

When you select a browser using this method, it becomes the default for future tests.


Preamble

Be aware that the Internet is always changing.  Because the World Wide Web is so new, and growing so quickly, it is even more susceptible to the vagaries of change than are other aspects of Internet life.

The unusually rapid growth of the Web means that you will encounter (virtually) lots of people who are experimenting and learning, just as you are.

Most companies, schools, individuals and other agencies are beginners at setting up WWW sites.  Some of them may change service providers from time to time.  They will be working on their sites a lot. They will move things around.

This can result in the disappearance of documents and their mysterious reappearance in different directories or even on servers in other parts of the world

Fledgling HTML writers are creating many of the pages that you will want to access.  Due to their errors as beginners, some of the links on those pages may not work as you might expect -- or they might not work at all

It may be hard to believe, but even the authors of HTML editors are still learning, and can be responsible for inadvertent errors that creep into HTML documents found on the Web!

When it comes to working with the World Wide Web most of us are newbies.

So, please have patience–

with those who display WWW documents

with your Internet service provider

with software authors (!)

with everyone else you encounter as a result of your decision to explore the World Wide Web

And, of course, have patience with yourself.


Introducing HTML

Note:  This guide was prepared so that HTML beginners could get a quick-start at creating HTML documents.  It is by no means a complete exposition of what can be done with HTML.

For more information about advanced HTML features, check the World Wide Web itself, along with the increasing number of books on the subject that are appearing on bookstore shelves.

World Wide Web browsers use hypertext to access and display information available on the World Wide Web.  Hypertext is text that incorporates pointers to additional information.  Microsoft Windows "Help" files are examples of hypertext documents.

The hypertext documents used by World Wide Web browsers are ordinary text files that include special markings.  These markings tell the browser software something about how the text should appear to the user, as well as how to retrieve information when the user requests it.

The language, or code, used for these special markings is "Hypertext Markup Language", abbreviated as "HTML".


An Example

A very simple HTML document would look like this when displayed  in a text editor:

<title>An elementary HTML document</title>

<h1>The Main Heading for the Document<h1>

This is the text that would follow the heading. It is plain text and must be separated from the following paragraph with a special tag. <p>

This is the following paragraph. <p>

A browser might display the above HTML text as follows :

An elementary HTML document

The Main Heading for the Document

This is the text that would follow the heading. It is plain text and must be separated from the following paragraph with a special tag.

This is the following paragraph.

The HTML markings indicate only what the function of the text is, (i.e., a heading, plain text, a link to a document, etc.) not how it will appear.

The browser determines what the text will look like.

The same HTML document may look very different when displayed by different browsers (or even the same browser as configured by another user).


HTML Tags

The markings used in HTML documents are called "tags."

An HTML tag consists of a left angle bracket (<), called  a "less than" symbol,  followed by some text, and ends with a right angle bracket (>), called a "greater than" symbol.

Tags are most often used in pairs, i.e., <H3> and </H3>.

The most significant exception to this has been the tag that separates paragraphs, the "<P>" tag.  In the original HTML specification  there is no ending, "</P>", tag.  However, this may change in the future.

In the example, the starting tag, "<h1>" tells the browser that a heading is about to begin.  The end tag, "</H1>" lets the browser know that the end of the heading has been reached.

It should be noted that HTML tags may be displayed in either upper or lower case (or a mixture of the two).  "<H1>" is equivalent to "<h1>". HTML is not case sensitive.


The Document Title

Every HTML document needs a title.

A title, bracketed by its tag pair, looks like this:

<TITLE>This is the document title</TITLE>

The function of the title is to identify and describe the document (for use by searching programs, for example) rather than as a display element ("Heading" tags are used for display purposes).

There should only be one title in an HTML document.


Headings

Headings are used to separate and call attention to different parts of a document.

HTML incorporates six levels of headings.  They are numbered 1 through 6, with heading level 1 being the highest level and the most prominently displayed.

Headings are displayed with larger, bolder typefaces than normal text.  A heading is displayed on its own line and does not need a paragraph tag to separate it from the following text.

Normally, the first heading in a document should be tagged as a level 1 heading, e.g.,

<h1>This is the First Heading</h1>.

The text portion of the heading tag is "H" followed by the heading level.  If "n" represents the level, a properly tagged heading looks like this:

<Hn>This is a heading<Hn>

where  "n" represents a number between 1 and 6.


Paragraphs and Text Formatting

Beginners are often confused by the way that HTML treats white space and carriage-returns (newlines) in the text.

Browsers generally ignore carriage-returns and white space in your HTML documents.  When your file is displayed, repeating  spaces may be shown as a single space and line breaks can occur anywhere.  That is why each paragraph in an HTML document must end with the <p> tag.

Without paragraph tags, what looks like a well formatted text file will be displayed by a browser as a single continuous paragraph!


Preformatted Text

To display text so it is formatted the way it looks when viewed with an ordinary text editor, you need to use a special tag to indicate that the text is "preformatted".

The tag looks like this: <pre>.  The closing tag is: </pre>.

Use of this tag will cause the text to be displayed with spaces, new lines and (usually) tab characters as they have been entered., that is, as it has already been formatted.   A fixed width font (i.e., Courier) is normally used.


Overview of Lists

You can use HTML to display lines of text as a list.

Text may be displayed as a numbered or an unnumbered list.

A list is bounded by an opening and a closing tag.  Numbered and unnumbered lists have different tags.

Paragraph separators are not required to separate the individual list items.  Each list item begins with its own tag that serves as a separator.  This "list item" tag is the same for numbered and unnumbered lists.


The HTML for an unnumbered list looks like this:

<UL>

<LI> List item one

<LI> List item two

<LI> List item three

</UL>

A browser might display the unnumbered list as follows:

•   List item one

•   List item two

•   List item three

The HTML for a numbered list (also called an "ordered" list) looks like this:

<OL>

<LI> List item one

<LI> List item two

<LI> List item three

</OL>

A browser might display the numbered list as follows:

1.   List item one

2.   List item two

3.   List item three

Lists may be nested, that is, lists within lists are permitted.


Text Formatting by Function

Using HTML, you can indicate formatting for several different kinds of text functions.

The following are some text functions and the HTML tags used to display them:

•	Extended quotation (usually several lines of quoted text):

<BLOCKQUOTE> </BLOCKQUOTE>

•	Address (usually an Email address):

<ADDRESS> </ADDRESS>

•	Citation (as in referring to another document):

<CITE> </CITE>

•	Strong (indicates text is important):

<STRONG> </STRONG>


A browser might display this HTML text,

<ADDRESS>sales@brooknorth.com</ADDRESS>

like this:

sales@brooknorth.com


Text Formatting by Font Style

You can also indicate formatting by font style, as you would in a word processor. That is, text can be displayed as italic, bold, etc.  Formatting by font style may be discontinued in future versions of the HTML specification.

Some of the styles you can use, along with their HTML tags are as follows:

•	Bold (text is displayed in bold face type):

<B> </B>

•	Italic (text is displayed in italic type) :

<I> </I>

•	Underline (text is displayed as underlined):

<U> </U>

•	Fixed width (text is displayed in a fixed width font):

<TT> </TT>

This line:

An example of <I>italic text.</I>

would be displayed as:

An example of italic text.


Links to Other Documents

HTML documents are "hypertext" documents.  This means that they contain text that permits browsers to access additional information when the user requests it.

Browsers indicate that text is linked to more information by displaying it in a different color, underlining it, displaying it in a box, or some combination of these.  With a graphical browser like Netscape or Microsoft Internet Explorer, a mouse is used to "click" on the highlighted text.  This tells the browser to retrieve the information associated with the link.

HTML uses a left-angle bracket, followed by the "anchor" code, "A", to indicate the beginning of a hypertext link.

The word "HREF", following the anchor character is used to indicate that the anchor is sensitive text.  The displayed text is linked to other information and will respond to user input such as a mouse click.

For example, a link that would instruct a browser to fetch and display another HTML hypertext page looks like this:

<A HREF= "http://www.brooknorth.html/order.html"> View the Brooklyn North order form</a>

The browser would display the text between the first right-angle bracket and the "</A>" end tag.  The user would see only the words, "View the Brooklyn North order form".  It would be highlighted to indicate that it was a link.

Clicking on the text would display the document referred to by the quoted text below:

"http://www.brooknorth.html/order.html".

The above text (within the quotations) is a "Uniform Resource Locator",  and would not be displayed by the browser.  Uniform Resource Locators are pointers to information.  In this case the Uniform Resource Locator points to another hypertext document.


URLs

"URL" is an abbreviation for "Uniform Resource Locator".

URLs are the pointers to information to be retrieved when a hypertext link is activated by the user.  They tell the browser how the information is to be obtained and where it is located.

URLs enable a single WWW browser program to incorporate many of the functions that normally require several other software packages, including FTP, news, Email and gopher.

The general format of a URL is :

prefix host.domain[:port]/path/filename

Note: The space after the word, "prefix", is used only for clarity.  In a URL, there is no space following the prefix.

The port number may be omitted from the URL, unless it differs from the recognized standard port for the indicated service.

The following are some of the prefixes that are commonly used, along with their function:

ftp://  [retrieves a file from an FTP server]

http:// [retrieves a file from a World Wide Web server]

file://localhost/  [retrieves a file that resides on the same computer as the browser - a "local" file]

gopher://  [retrieves a file from a Gopher server].


Some URLs do not use the double slash (//).

mailto:  [requests the browser to enable the transmission of an Email message]

news:  [retrieves a Usenet news message]

The following are examples of properly constructed URLs:

"ftp://ftp.cdrom.com/pub/simtel/net/win95/html/
pro97demo.zip",

would be used in an HTML document to enable a browser to retrieve the file "pro97.zip" from an FTP site;

"file://localhost/c:/www/myfile.txt",

would cause the browser to retrieve and display the file "myfile.txt" from the user's local disk drive;

"http://www.cfn.cs.dal.ca/Media/News/TodaysNews.html",

would result in the retrieval and display of an HTML file from a WWW server.


Linking to Anchors Within the Same Document

There is an anchor that can be used to permit text within an HTML document  to be the destination of a link.  This is useful for creating links that refer to text inside the current document.  A "point and click" table of contents, for example, is created by using internal links.

In destination anchors, the word, "NAME", follows the anchor character ("A") as shown below:

<A NAME=math>Algebra</a> is a very old branch of mathematics.

This would give the word "Algebra" the anchor name, "math".

The following HTML code creates a link to the anchor referenced by that anchor name:

<A HREF="#math">Click here to learn about algebra</a>

Clicking on the displayed text, "Click here to learn about algebra", would move the browser's viewing cursor to the place in the current document beginning with the word, "Algebra", because it has the anchor name "math".

The "#" sign is used to indicate that a link is a reference to a named anchor within a document.

Using named anchors is useful for creating a table of contents.  The table of contents would have "href" links to the appropriately named anchors that mark topics within the body of the document.

The first word in the table of contents could itself be a named anchor.  This would permit links further down in the text to return the user to the table of contents.


Displaying In-line Images

An important feature of World Wide Web browsers is their ability to display images.

The "IMG" element is used to allow the display of "in-line" images.

In-line images are images displayed by the browser on the browser page itself, as opposed to the display of images by special display programs called "viewers."  HTML permits both kinds of displays.

Most browsers can display in-line images stored in "graphic interchange format" (referred to as "gif" files).  Other image formats such as "tiff", "jpeg" and "xbm" can be displayed in-line by some browsers.

An in-line image, from a local disk drive,  may be included in a document by using the following code:

<IMG SRC="file://localhost/C:/images/sailboat.gif">

Execution of the above HTML code by the browser would cause the file, "sailboat.gif", residing on the user's disk drive, to be displayed as an in-line image.

Note that the image element has no closing tag.

Text that is adjacent to an image is by default aligned to the bottom of the image.

The "align" attribute can be used to alter the placement of adjacent text.

The HTML code,

<IMG ALIGN=top SRC="file://localhost/C:/sailboat.gif"> The good ship Lollipop

will cause the text, "The good ship Lollipop",  to be displayed aligned at the top of the image.  Use of "align=middle" will result in text alignment at the image's vertical center.

Use of the "alt" attribute is used for alternative text that will be displayed by browsers that are unable to display images.

For example, the following HTML,

<IMG SRC="file://localhost/C:/sailboat.gif" ALT="Picture Here">,

will cause the words "Picture Here" to be displayed by browsers having only text capability.

Both the "alt" and "align" attributes may be used at the same time with the same image element.


Displaying Images With a 'Viewer'

Sometimes it is desirable to display an image outside the browser in another window.

You can cause an image to be opened in a separate window, using a program called a "viewer", with the following HTML text:

<A HREF="file://localhost/c:/images/prince.gif">The Prince of Norway lighting the Olympic Torch</A>.

When the user clicks on the highlighted text, "The Prince of Norway lighting the Olympic Torch", a GIF viewer will be launched and the picture will be displayed.

For this to work properly, the browser must be set up to find and run the appropriate viewer for GIF images. Check your browser's instructions for the specifics.

Viewers for video and sound files are called up in the same way as are viewers for images.  Again, the browser's initialization file must be set up properly in order for this to work.


Using In-line Images as Links

External viewers are often used to display a larger image when the user clicks on an in-line, but smaller, version of the same picture, called an "icon".

This is possible because in-line images can be used in anchors, as follows:

<A HREF="big_image.gif"><IMG SRC="small_icon.gif"></A>

The line above would cause the file, "small_icon.gif", to be displayed as an in-line image which is also an active link.  When the user clicks on the icon, the file "big_image.gif" would be loaded to a viewer and displayed.

Similarly, the following code,

<A HREF="ftp://ftp.cdrom.com/pub/simtel/new/win95
/html/pro97demo.zip"><IMG SRC="button.gif"></A>,

would result in the retrieval of a file from an FTP site when the user clicked on the "button.gif"  in-line image.


A Brief Tour of Forms

As the World Wide Web is being used more and more by companies for on-line business transactions, the use of forms is becoming more prevalent. HTML forms allow the Web page designer to create input screens that are used for such things as questionnaires, product ordering forms, and so on. An example appears below.

Web page with a form

How are the special items on this form created? There are a number of different types of fields which can appear on forms, including text entry fields, lists, radio buttons, check boxes, and buttons. HTML tags are provided to define each of these field types in a document.

Each form must be enclosed by <FORM...> ... </FORM> tag pair. A number of attributes are required to specify how the data in the form is processed when it is submitted.  For example, the above form might use the following FORM tag:

<FORM METHOD=POST
ACTION="http:/oranges.com/orders">
...
Remainder of form definition goes here.
...
</FORM>

When a user fills in a form and submits it for processing, the data is encoded in a special format called CGI (Common Gateway Interface).  The data is then sent to the server and passed onto the program or "gateway script" specified by the ACTION attribute. Unfortunately, it is beyond the scope of this tutorial to describe how these scripts are written. Suffice it to say that the general function of these scripts is to decode the form data which it receives and based on the information it extracts, determine what actions to take.

To further elaborate this example, this form has five main fields: a list, a text field, a set of radio buttons, and submit and reset buttons.

A list such as the one in this form is created using the SELECT element of HTML. This particular example might look like this:

<FORM METHOD=POST
ACTION="http:/oranges.com/orders">
<P>Products to order:<BR>
<SELECT NAME="products" MULTIPLE>
<OPTION>Milk
<OPTION>Butter
<OPTION>Eggs
<OPTION>Juice
<OPTION>Apples
<OPTION>Oranges
</SELECT>
...
Remainder of form definition goes here.
...
</FORM>

A <SELECT> ... </SELECT> tag pair can only contain multiple <OPTION> tags defining the elements which make up the list. The exact manner in which the form is rendered is determined by the browser. Some present it as a scrollable list and others as a pop-up list. The MULTIPLE attribute further defines the behavior of the list. If specified, it allows the user to select more than one item from the list; if omitted, only a single item can be selected. The value specified with the NAME attribute is used during the encoding phase when the form data is submitted for processing.

The next field is called a TEXTAREA. Such fields allow multiple lines of text to be entered by the user. In this particular example, the following HTML code would be used to create the text field:

<P>Shipping Address:<BR>
<TEXTAREA NAME="address" ROWS=4 COLS=35>
</TEXTAREA>

This creates a text field 35 characters wide by 4 lines high. The exact manner in which this field is rendered is determined by the browser. Often, horizontal and vertical scroll bars are included to allow the user to scroll the text as it is entered. If text is included between the <TEXTAREA> ... </TEXTAREA> tags, it is used to set the initial contents of this field. As with the SELECT tag, the NAME attribute is used during the encoding phase.

Following the text field is a standard set of radio buttons. Only one of these can be on at any one time. The following code is used to create these buttons:

<P>Payment Method:
<INPUT NAME="pay" TYPE=RADIO VALUE="visa">
VISA
<INPUT NAME="pay" TYPE=RADIO VALUE="mc">
Master Card
<INPUT NAME="pay" TYPE=RADIO VALUE="cod">
COD

The INPUT tag is used to create a number of different field types, as specified by the TYPE attribute. The VALUE attribute is used for encoding purposes, as is the NAME attribute. This attribute is also used to define the grouping of the radio buttons.  Any RADIO type input field with the same value for NAME as another RADIO type field is considered to belong to the same group.  This implies that only one of those radio buttons can be selected at one time.

The form ends with two standard looking buttons, one labeled "Send Order" and the other "Reset". These buttons are defined using the following HTML code:

<P><INPUT VALUE="Send Order" TYPE=SUBMIT>
<INPUT TYPE=RESET>

A RESET type input field creates a button called "Reset". If this button is clicked by the user, any values entered into any field of the form are cleared and the form's initial state is restored.

A SUBMIT type input field creates a button as well. By default, a submit button is called "Submit Query", although in this case the VALUE attribute is used to provide the button with an alternative name. When the user clicks a submit button, the current data existing in the form is encoded into CGI format and submitted to the form's specified gateway script for processing.


Creating Tables

This section gives an overview of how tables are created in HTML. The basic approach is to define a structure which provides information about each row of a table and each cell in that table. Tables can also have headers, both for the table itself (called the caption) as well as for the rows and columns. HTML tags are used to describe all this information. Here's an example:

Sample table

This demonstrates a simple table listing products stored in two separate warehouses, along with the total number of products in each warehouse as well as the combined grand total.

All tables must be enclosed in <TABLE> ... </TABLE> similar to forms. All other tags must appear inside these enclosing tags. The above table has a title or "caption" associated with it. This is an optional element which can appear inside a table definition:

<TABLE BORDER>
<CAPTION>Product Inventory</CAPTION>
...
Remainder of table definition goes here.
...
</TABLE>

The BORDER attribute of the TABLE tag specifies whether borders should be drawn around the cells of the table. A value can also be supplied with BORDER to specify the width of the border when the table is rendered. The default is 1; if BORDER is omitted, it is the same as specifying BORDER=0.

The individual rows of a table are each enclosed inside <TR> ... </TR> tags. There are options which control how the data in each cell of a row is aligned within the cell horizontally and vertically and how it is formatted.   Whether or not the text can be wrapped in the cell over multiple lines is an example. It is also possible to specify how many columns and rows an individual cell spans. Netscape adds a few other options, such as being able to specify the exact width of a cell in pixels.

The first row of the sample table consists entirely of table headers. It is defined with the following HTML code:

<TR>
   <TH>Product</TH>
   <TH>Warehouse 1</TH>
   <TH>Warehouse 2</TH>
</TR>

Each header cell is defined with <TH> ... </TH> tags. Each such tag pair appearing within a row definition represents a cell in that row. Text enclosed by this pair is automatically boldfaced and centered within the cell when the table is rendered.

Other table cells are created in a similar manner, using the table data <TD> tag instead of the <TH> tag. The second row of the table, for example, can be defined using the following HTML code:

<TR>
   <TH>Milk</TH>
   <TD ALIGN=CENTER>8</TD>
   <TD ALIGN=CENTER>12</TD>
</TR>

The <TD> tag can take optional attributes specifying characteristics about an individual cell. In this case, the ALIGN attribute is used to center the contents of the cell. Without this option, cell data is left aligned. This differs from header cells defined with <TH> tags which are centered by default. Each <TD> ... </TD> appearing in a row definition represents a cell in that row. The total of  table header tags and table data tags in a row definition represents the number of cells in that row.

The other rows in the sample table are defined in exactly the same way, with only the data changing as required. The exception is the last row, which contains just two cells instead of three. One of the attributes which can be specified with a cell definition is the number of columns it takes up. In this case, the second cell of the last row, containing the grand total value, has been defined to take up two columns of the table instead of the normal single column. This is done as follows:

<TR>
   <TH>Grand Total</TH>
   <TD ALIGN=CENTER COLSPAN=2>99</TD>
</TR>

The COLSPAN attribute in the <TD> element above specifies that this cell should span two columns.  A cell can also be modified with the ROWSPAN attribute to specify the number rows the cell spans, and both COLSPAN and ROWSPAN can be used at the same time.


Creating Image Maps

An image map is a variation on the basic in-line image introduced earlier.  Unlike the standard in-line imagewhich is purely passivean image map contains "hot spots" that respond when you click them. To create an image map, you define the hot spots and associate a hypertext link with each one.

For example, a small company's web page might have a group photograph of all the employees.  It would be easy to use the photo as an image map by placing a clickable hot spot over the face of each employee.  When the user clicks on an employee, the result might be a hypertext jump to the employee's resume or personal home page.

The HTML code for an image map has two parts. The first part specifies the file that contains the graphic image. This part uses the <IMG> tag. Here's an example:

<IMG SRC="e:group.gif"

WIDTH=361 HEIGHT=237

USEMAP="#photo">

This variation on the <IMG> tag introduces a couple of options.  The HEIGHT and WIDTH attributes specify the dimensions of the graphic image in pixels.  The USEMAP option identifies the image map data associated with this graphic.

The second part of an image map begins with the <MAP> tag.  The tag contains a NAME option that specifies the corresponding graphic image. Here's an example that matches the previous tag:

<MAP NAME="photo">

<AREA SHAPE=RECT COORDS="63,12,131,83"    	HREF="dan.html">

<AREA SHAPE=CIRCLE COORDS="164,119,49"  	HREF="lisa.html">

</MAP>

Notice the <AREA> tags within the body of the map data. Each <AREA> tag identifies one of the clickable hot spots on the image map. This map has two hot spots: a circle and a rectangle. The COORDS option defines the boundary coordinates of each hot spot. For example, the first two coordinates of the circular hot spot define its center, which is roughly in the middle of the image. The last value gives the circle's radius, which is 49 pixels.

The HREF option gives the corresponding hypertext link for each hot spot. For example, if the user clicks within the circle, the result is a hypertext jump to the document lisa.html.


The Structure of an HTML Document

The HTML specification requires that HTML documents be composed of structural elements that are bounded by special tags.

The entire document must be bracketed by the "HTML" tag pair as follows:

<HTML>

Document contents

</HTML>

Within the HTML pair, three other pairs of tags are obligatory.  First, the "head" pair.  Within the head pair, a title with its tag pair must be used.  The remainder of the document should be bracketed by the "body" pair.


The following is a template for a properly structured HTML document:

<HTML>

         <HEAD>

            <TITLE>Document Title goes
            here</TITLE>

         </HEAD>

         <BODY>

            The actual content of the
            document goes here.

         </BODY>

</HTML>


To Learn More About HTML

While the above is by no means an exhaustive tutorial, it includes sufficient information for a beginner to create useful, interesting and attractive HTML documents.

Several books that can help you to learn more about  HTML are available at most book shops that stock computer books. This manual is only a preliminary guide to the use of basic HTML tags.  To learn more, check your local bookstore.

Use the Web to obtain additional information.  Check the major WWW home pages, i.e., W3O (home of the World Wide Web), Microsoft, Netscape Communications or NCSA (home of Mosaic) – along with search engines and indexes such as Yahoo.  If you follow the links to "HTML",  "Learning HTML", "Creating WWW Documents" or similar subjects, you will find tutorials, information on specialized uses of HTML (i.e., forms, tables, image maps, etc.),  along with guides to good HTML style.

An excellent way to learn how to use HTML effectively is to get the source code for documents that have features of interest to you.  Most  browsers will permit you to save the HTML tagged documents you are viewing.  You can then examine the document's HTML code to see how particular kinds of displays have been created.

Finally, for a thorough and up to date treatment of the subjects covered here, use the Web to acquire the current HTML and URL specifications.


Before You Begin

Before you start to create a document, you should become familiar with the elements and structure of HTML.  The section of the HTML Assistant Pro Manual titled "Beginners' Guide to HTML" provides all the background information you need to make interesting and informative HTML pages.  If you have not already done so, please read it before going any further.

Once you have learned something about the syntax of HTML, you can use this section to learn how to use HTML Assistant Pro to actually build an HTML document.

The text that follows is a step-by-step guide to HTML document creation.  It is meant be used while you are working at your computer and having started the HTML Assistant Pro software.


Opening a Document Window

To create a new document, open an empty document window by clicking the button containing a picture of a blank sheet of paper.  This is the "New file" button and can be found at the left end of the tool bar.  Alternately, you can select the "New" option from the "File" menu.  Using the button is quicker, but both methods accomplish the same thing. An new document window is created as a result of this action.


New HTML document

The new document may be blank or it may contain a skeleton HTML document known as a "template". You can specify how you want a new window. On the "File" menu, select or clear the "Insert start template in new document" option.

HTML Assistant Pro document windows behave very much like the text window in the Notepad text editor included with Microsoft Windows.  You can enter, select (using the mouse), and delete text. You can also cut or copy text and paste it to other parts of a document.

If you are in doubt about the function of any control on HTML Assistant Pro's tool bars, document windows, or special function windows, simply move the mouse pointer over the control.  A description of its function will appear in the "Status Bar" at the bottom of the main window.


Set Up a Standard Document Template

After opening the document window, open the "Command" menu and select "Display standard document template".

This will cause the following text to appear at the top of your document:

<HTML>

<HEAD>

<TITLE> </TITLE>

<META NAME="EDITOR"

CONTENT="HTML Assistant Pro 97 - http://www.brooknorth.com/">

</HEAD>

<BODY>

</BODY>

</HTML>

These tags, which delineate the sections and boundaries of an HTML file, are required in all your documents.


Create a Title

To create a title for your document, type the title text between the title tags:

<TITLE>Test Document Number 1</TITLE>


Add a Heading

The "body" tags define the boundaries of your document's contents. The remainder of your document, including the main heading,  should be created between the starting and ending body tags.

Within the body tag pair, type "My First HTML Page" (omit the quotations).  It should look something like this:

<BODY>

My First HTML Page

</BODY>

To make the text into a heading, first select it with the mouse by pressing the left mouse button and dragging the cursor across the text.  The text will be highlighted to indicate that it has been properly selected.

Next, use the left mouse button to 'click' on the small button with the number "1" on it in the "Heading" section of the tool bar.

The heading text will be bracketed by "Heading 1" tags as follows:

<H1>My First HTML Page</H1>

That's all there is to it.

If you select the wrong tool and erroneous HTML tags are inserted, click the "Undo" button on the document window.


Testing your Work

You can test your work-in-progress at any time. "Testing" means viewing your work with a browser so that you can see how it will look to people in your intended audience when they retrieve it. Before you test your document, you may need to provide information about your browser to HTML Assistant Pro.

In order to display your file, the test browser loads your HTML document from a disk file.  Therefore, you must always save the file before testing it for the first time.  For the same reason,  before testing again, you need to save any changes that have been made to the text.

To save your new HTML document, click the "Save" button on the document window.  If the document has not yet been saved, you will be prompted for a file name.  Select a path name from the list boxes and enter a filename like "Test1.htm".  The suffix, ".htm" is chosen to let HTML Assistant Pro (and you) know that this is an HTML file.

After saving the file for the first time, click the "Test" button on the document window (the button with the picture of an eye). In a few seconds the browser will be loaded and your file will be displayed. You should see the title and the properly formatted main heading.

Note: If you have two or more browsers installed on your system, you can select the one that you want to use for testing. Right-click the "Test" button and choose a browser from the pop-up list that appears.

When you have finished viewing your work, you can bring your editing window to the front again, make whatever changes you require, then again test the changes in your browser.

If you have changed the document between tests, you will be reminded to save it again unless you have already done so (by clicking the save button).  After the file has been saved once, it will be resaved with the same name whenever the "Save" button is clicked.

HTML Assistant Pro can automatically resave your file for you whenever you select the "Test" button.  To use this feature, simply select the "Autosave file before test" item from the "Options" menu.


Updated Contents of a File are not Displayed

Sometimes, when retesting the same file, the browser will not display the updated contents.  Instead, it redisplays a previously tested version.

This usually happens when the browser is not closed and reloaded between tests -- i.e., when using the editor's Dynamic Data Exchange feature, or when loading and reloading the file from a browser menu.

This occurs because most browsers use a technique called "caching" to avoid accessing the same information more than once.  When caching is used,  if a file on a remote machine, or your own, has already been loaded by the browser, it will redisplay the copy of the file that is already in its memory. That is, it will not reload the file.

This usually works to your advantage.  If a large file has already been downloaded from a remote server, the browser does not need to take up either your time or Internet bandwidth to retrieve it again.  However, when testing and retesting your own files this can be a problem.

Presently, most browsers are equipped with a feature that will permit you to manually cause them to retrieve the file again.   In the future, browsers will probably offer an option to turn caching off.

Whenever a browser used for testing fails to display the changes you have made to your file, use the browser's file reloading option.


Adding Text

Next, add some text to your document.  Type a paragraph, starting on a line following the heading.  When you are finished, position the cursor at the end of your paragraph and click on the large tool bar button with the "Paragraph" symbol (a backward "P") on it. This will cause a "<P>" tag to be inserted at the end of your text.  You need to do this at the end of every paragraph.

Type another paragraph and add its "<P>" tag.

To speed things up you can add the "<P>" tag by entering the shift-Enter key combination.  That is, press the "Shift" key and hold it down just before you press the "Enter" key -- as if you were typing an upper case letter.

At this point, your document should look something like this:

<HTML>

<HEAD>

<TITLE>Test Document Number 1</TITLE>

</HEAD>

<BODY>

<H1>My First HTML Page</H1>

This is the first text paragraph. It can be as long as you like. Be sure to enter the paragraph tag.

<P>

This is the second paragraph. Remember, white space and blank lines are irrelevant as far as your browser is concerned.  Extra lines will be ignored. That is why you need to tag the end of each paragraph. You can even run all your paragraphs together. As long as a paragraph tag is inserted between them, they will be displayed properly. Note that the paragraph tag can be on its own line, or on the last line of the text.  You can even skip lines if you like.<P>

</BODY>

</HTML>


Creating Lists

HTML Assistant Pro makes it easy to create formatted lists with HTML.

Before you begin this section you might want to review the section on lists in the "Beginners Guide to HTML".

To create a list,  add a few more lines of text as shown below.  Press the "Enter" key after each one.  Your text should look like this:

List item one

List item two

List item three

Next,  use the mouse to select all three lines.  Be sure that no empty lines are selected.

After selecting the lines that are to be formatted as a list, click on the small button on the left half of the tool bar that has the numbers 1, 2 and 3 and some lines on it.  This will format the selected text as a "numbered" or "ordered" list.

The result will look like this:

<OL>

<LI> List item one

<LI> List item two

<LI> List item three

</OL>

Next, retype the same three lines (without the HTML markings) immediately following the numbered list.  Select the text and click the toolbar button located just below the one you used to create the ordered list.  This button will create an "unnumbered" or "bulleted" list.

The resulting HTML code is:

<UL>

<LI> List item one

<LI> List item two

<LI> List item three

</UL>

Test your code with a browser to see how the two types of lists are displayed.


Linking to Another HTML Document

Next, let us create a link to an HTML document at NCSA in Chicago, home base for the Mosaic browser.

The link has two components.  One is the actual pointer to the document, called a "URL", an abbreviation for "Uniform Resource Locator" .  The other is the text that users can "click" when they want to retrieve and display the document.

To set up a link, start by entering the "clickable" text on an empty line.  Type, "NCSA Home Page". Then, using the mouse, select the text you just typed.

Next, click the "Link" button on the main toolbar. A dialog box, shown below, will appear with several controls on it.  In the lower half of the dialog box is a text box, labeled "URL Text", where you can enter the URL for the document that is to be accessed with your link.

Link dialog box

For purposes of this exercise, we want to start from scratch, so delete whatever text may be in the text box.

Next, select the URL prefix.  Click on the down arrow on the right hand side of the control labeled "URL prefix".  A list of prefixes will drop into view (the control is called a "drop down list box").  Select the item, "http://", and the text will appear in the URL text box below.

The "http://" prefix tells the browser to retrieve a document from a World Wide Web (or "HTTP") server.  ("HTTP" stands for "Hypertext Transport Protocol.")

Now, add the location of the document to the URL by entering its Internet address and file path. For the Internet address type: "www.ncsa.uiuc.edu" (omit the quotation marks).

The partially completed URL should look like this:

http://www.ncsa.uiuc.edu

Finally, add the file path and name, "/SDG/Software/Mosaic/NCSAMosaicHome.html" (without the quotations).

Note that case is important. Unlike MS-DOS and Windows, file and directory names on the Internet are case sensitive.

Type carefully.

"Software" is not the same as "software"!

The complete URL is:

http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html

When the URL entry is finished, click the "OK" button to return to your document.

Note that HTML Assistant Pro has created the following HTML code for you:

<A HREF="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html">NCSA Home Page</A>

(Note: Ignore any line breaks shown here in the HTML code.)

Insert a paragraph tag at the end of the line.  This will ensure that it will be separated from additional lines of text that may be added later.

Your page should now look just about like this:

<HTML>

<HEAD>

<TITLE>Test Document Number 1</TITLE>

</HEAD>

<BODY>

<H1>My First HTML Page</H1>

This is the first text paragraph. It can be as long as you like. Be sure to enter the paragraph tag.

<P>

This is the second paragraph. Remember, white space and blank lines are irrelevant as far as your browser is concerned.  Extra lines will be ignored. That is why you need to tag the end of each paragraph. You can even run all your paragraphs together. As long as a paragraph tag is inserted between them, they will be displayed properly. Note that the paragraph tag can be on its own line, or on the last line of the text.  You can even skip lines if you like.<P>

<A HREF="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html">NCSA Home Page</A><P>

</BODY>

</HTML>

This would be a good time to test your file to see what it looks like when displayed by a browser.  If you are connected to the Internet, and the URL for the NCSA home page is still valid, clicking anywhere on the text, "NCSA Home Page", should result in the display of the NCSA Home Page by your browser.  Do not worry if it does not work.  There are many reasons why a properly formatted link may fail.


Displaying an In-line Image

The following sections, about displaying images, require that you have an image file in Graphic Interchange Format (GIF) on your local disk drive.  GIF files have the suffix, ".gif". (How to obtain or create "*.gif" image files is beyond the scope of this text.)

To cause a GIF file on your hard drive to be displayed as an in-line image, start by positioning the text cursor on the next empty line in the "body" section of your new HTML document.

Next, click on the "Image" button near the center of the HTML Assistant Pro tool bar. A dialog box, shown below, will appear.

Inline image dialog box

If you don't see all the options on this dialog box, click the button with the blue arrow.

Delete whatever text is in the "Image URL" textbox.

Use the down arrow on the "URL Prefix" drop down list box to view the available prefixes.  Select the prefix, "file://localhost/" by clicking on it, and the text will appear in the URL text box below.  The cursor should be positioned immediately following the URL prefix, without any spaces.

The "file://localhost/" prefix tells the browser to retrieve a file from your local disk drive.  Next, add the location of the GIF image you want to display by clicking the "Browse..." button near the bottom of the dialog box. When the file dialog box appears, use the list boxes to select the image file you want to display.  When you have selected your file, click the "OK" button.

If the "Preview" check box is selected, a preview window is opened to let you view the image you have selected. Click OK in this window to accept the image or Browse to select another image.

When you have selected an image, the file name will be appended to the URL prefix already in the URL textbox.

The full URL should look something like this:

file://localhost/C:/graphics/my_pic.gif

Notice that the slashes in the DOS file path are forward slashes rather than back slashes.  That is because most browsers prefer forward slashes.  If you want to use the familiar MS-DOS back slashes, deselect the default, "Forward slashes in path name." option, by clicking on its check box. If you don't see this option, click the blue arrow button in the upper right corner of the dialog box.

When you are satisfied that the URL is correctly formatted, click the "OK" button.

The following HTML code will appear at the cursor in your file:

<img src= "file://localhost/C:/graphics/my_pic.gif">

Notice that there is no closing "</img>" tag.

Try typing text after the image code, with and without inserting a </P> tag in front of it.   Remember, the text can be on the next line in the editor, as long as there is no "<P>" tag, it is displayed on the same line as the image.   Now, use the "Test" button to view the result.

The inline image dialog box has a variety of options that let you control the appearance of the image. For example, you might want to experiment with the width and height options or alignment option.  Of course, for the alignment property to be meaningful,  the image must not be so wide that there is no room for the text.

The "Alternate text" field is for entering text to be displayed by browsers that are unable to display images -- i.e., "text only" browsers.  Bring up the image dialog, type some text there (a short description of the image, for example), and see what happens to the HTML code.  The text will have no effect with browsers, like Netscape or Internet Explorer, which can display in-line images.


Displaying an Image with a Viewer

To display an image on your local drive with a viewer, use the "Link" button on the tool bar.  You may want to refer to the instructions for Linking to another HTML document, above.

Proceed as follows:

Before selecting the "Link" button, enter the "clickable" text, i.e., the text the user will click on to cause the image to be displayed.  For example, you might use, "See the Good ship Lollipop".

Select the text with the mouse.  Then, click on the "Link" button to bring up the link dialog.

In the link dialog, from the "URL Prefix" drop-down listbox select the "file://localhost/" prefix.

Use the "Browse..." button to select your image file.

After clicking the "OK" button on the link dialog, your HTML code should look like this:

<A HREF="file://localhost/C:/sailboat.gif">See the Good ship Lollipop</A>

Remember that in order to view in-line images, you must setup your browser to use the appropriate viewer.  See the instructions that came with the browser software for information on how to accomplish this.

When you test your file and click on the text "See the Good ship Lollipop", the "GIF" viewer you selected for your  browser will be loaded.  It will display the image in its own window.


Going Further

If you read the tutorial information in this help system and the manual, you will have enough information to create simple HTML documents which include headings, plain text, lists, images, forms, tables, and active links to other information.

This document does not cover all the available features of HTML. For more complete information, we suggest you check your local bookseller for a recent book that includes information on the latest HTML features.

Moreover, the most current information is available on the World Wide Web. You can use one of the search options available with your browser to find it. Start your search with one of the following terms (or something similar): "HTML", "HTML Authoring", "WWW Authoring".

You should also look at the HTML code for documents you see which have features that you do not yet know how to implement. You can use your browser's "View source" (or equivalent) option to accomplish this.


Overview of Internet Organization

Keeping an accurate record of Internet journeys is not a trivial task.  In fact, one of the major criticisms of the Internet is that information is not well organized and it is difficult to retrace your steps if you want to repeat a search.  Many (if not most) Internet users have found themselves using computers to scan the Internet for information while keeping a pencil and paper handy.

Some Gopher and WWW browser packages permit saving place markers by using "bookmarks" or a "hot list" to collect address information.  As useful as this is, after several searches or browse sessions these collections quickly become a pot pourri of tags, markers and pointers to a varied assortment of Internet places that have no particular relationship to each other.

By making it easy to create your own browser pages, HTML Assistant Pro provides a way to organize and keep track of your Internet journeys.


Collecting URLs

World Wide Web browsers use Uniform Resource Locators (URLs) to find and access all forms of information on the Internet.  This includes text files, news groups, mail lists, gopher directories, HTML documents, program files, images, sounds, and movies, etc.

To use HTML Assistant Pro as an aid to organizing your WWW experience, you first need to begin collecting the URLs that point to the WWW sites that interest you.

Most browsers permit transferring the URLs which they use for Internet access to the Windows clipboard.  Check the instructions that came with your browser to find out how to do this. From the Clipboard the URLs can easily be copied to any Windows text editor.

Once the URL text is in the clipboard it can be "Pasted" into a text file using a simple text editor like MS Notepad (supplied with Windows) or HTML Assistant Pro.  Be sure that there is an End-of-Line following the URL. An End-of-Line is a carriage-return/linefeed pair which is added when you press the "Enter" key after inserting text. That is all that is required to begin collecting URL links for use by HTML Assistant Pro.

Alternatively,  as you explore with a browser, you can save URLs by creating "bookmarks". HTML Assistant Pro's URL file editor will permit you to convert your browser bookmark files to HTML Assistant URL files.  In this way, HTML Assistant permits you to create URL files that combine information collected with several browsers.

Files containing URLs should be saved with the suffix, ".URL".   While this is not absolutely necessary, it does make it easier for you (and HTML Assistant Pro) to identify them.


Editing and Organizing URLs

Once you have collected  URLs that point the way to the places you have visited, the next step is to select and organize them into separate files that suit your particular needs.  For example you might want to create a file containing URLs that can help you learn about Internet resources, or interesting art exhibits, or information on animal breeding.

HTML Assistant Pro provides two ways to do this.  Use whichever works best for you.

The most familiar way for most people will be to open a new edit window for each subject.  This may be done by selecting "New" from the "File" menu.  Copy and then paste selected URLs (and their optional comments) from your general URL collection or other URL files to the new one.

The second method involves using the URL file edit popup window that can be viewed by selecting  "Edit/Build URL Files" from the "URL" menu. This window is shown below. This permits you to combine commented URLs from different sources and to use scrolling lists for editing.

URL Manager


Building Browser Pages

The URLs you have collected are pointers to the places you  have visited on your Internet journeys.   The final step in organizing your personal Internet experience is to incorporate selected URLs into HTML documents to be used as WWW browser pages.  These pages will be the tour guides for yourself and others who want to retrace your steps.   With HTML Assistant Pro you can quickly create browser pages with titles, headings and descriptive text for the displayed URL links.

HTML Assistant Pro's Automatic Page Creator makes this part of the job very easy. It guides you through the process of creating a title, headings and descriptive text for your page.  Of course, it enables you to incorporate a list of URLs (from a file of your choice) which will become the links to the places you want to visit.  With the click of a button  your new page is automatically created and displayed in an edit window ready for saving as an HTML document.  Your new page can then be tested with a WWW browser of your choice without leaving HTML Assistant Pro.

If you wish,  the Automatic Page Creator will append additional descriptive material and/or URL links to the newly created page.  In this way you can allow HTML Assistant Pro automatically to build pages with any number of different formats and degrees of complexity.  Of course, the resultant page can be edited using any of the other tools provided with HTML Assistant Pro.


Using Local Files with HTML

As you create your own HTML files with links to remote sites, you may also want to create other browser pages consisting of links to these local files.  By doing this with successive generations of locally created files you can create a hierarchical system of  "menu pages" for organizing and indexing your work.

For example, you may have built separate files (with remote links) concerning the following subjects:

Using HTML

WWW and related FAQs

Selected sites via CERN

You might want to create a menu file concerned with general WWW topics that includes the above files as selectable links.

Creating a Menu Page

You can build such a file one step at a time, by opening a new edit window and creating a local file link for each file using the "Link" button.  When the link popup appears, select the "file://localhost/" prefix from the prefix listbox.

Next, enter the name of a file, or use the 'Browse' button to select a file name from a file select dialog box.

Clicking the "OK" button (on the link popup) will cause HTML Assistant Pro to create (and insert into the edit window) the URL for a link to the file you selected. It will look something like:

file://localhost/C:/html/myfile.htm

You can continue in this manner to add additional URL links.  Using HTML Assistant Pro's list formatting capability, you can select and format the file links as one or more lists (numbered or unnumbered).

When the process of adding and formatting file links is finished you can complete your menu page by using HTML Assistant Pro's tools to add a title, headers and explanatory text to your display.

Another way to create a Menu Page

Another way to create a menu page for your local files is to create a URL file and use that file with the Automatic Page Creator to build your menu display page.

HTML Assistant Pro will insert a URL in the active edit window if you select the "Create Local File Reference..." option from the "Command" menu and select a file from the file select dialog that appears.  You can add the link display text (the "clickable" text) as a comment after the URL has been displayed (insert a comma following the URL before you enter the comment).

You may also create a URL file by selecting the "Edit/Build HTML Assistant URL Files..." option from the "URL" menu.

Once the URL file has been created and saved, you can open the Automatic Page Creator and use it to create your HTML display file.


Overview of menus

Note:  Not all menus or menu options are visible upon startup.  The menu bar, and the contents of most menus, changes when at least one document window is open.  To view all the menus, if they are not already visible, either open a file or a new document.

HTML Assistant Pro's menus may seem formidable at first.  There are a number of them, and each one presents many options.

While this bewildering array of choices can be confusing, once you become familiar with the menu structure, you will learn that they present many opportunities for you to simplify and speed up the creation of your HTML documents.

Many of the options, such as those in the "File" and "Edit" menus, will already be familiar to you.  They are similar to those found in commonly used word processors and text editing software.

The fastest way to learn to use any of the menu options is to try them.  Just be sure that you have another, saved copy of the document with which you are experimenting.

Most of this section will be devoted to explaining how to use the menu features that are unique to the creation of HTML documents with HTML Assistant Pro. Menu items that are self-explanatory or are common in many applications are not described here.


Open

This option permits you to open an existing document file. You can also open a file by clicking the button with an open folder icon. This control is directly beneath the new document button.

When the file is opened, a backup copy will automatically be saved in HTML Assistant Pro's backup subdirectory, "proback", which resides in the HTML Assistant Pro program directory. The backup file will have the same name as the opened file, but the suffix will be changed to ".BAK".

To conserve disk space, the backup file will be replaced each time a document with the same file name is opened.

This means that if, for any reason, you want to use the previous (i.e., backup) version of your file, you must either rename or copy the ".BAK" file to another directory before reopening the existing file!


Insert Start Template in New Document

If this option is checked (clicking on it will toggle the check mark) the section bounding tags (shown below) which are required in most HTML documents will be automatically inserted whenever a new document is started.

<HTML>

<HEAD>

<TITLE> </TITLE>

<META NAME="EDITOR"

CONTENT="HTML Assistant Pro 97 - http://www.brooknorth.com/">

</HEAD>

<BODY>

</BODY>

</HTML>

This is equivalent to manually selecting the "Display standard document template" option in the "Command" menu.


Import Word Processor (RTF) File

Selecting this option permits you to import and automatically convert formatted word processor text to HTML. Before importing it, the text must be saved as "Rich Text Format", an option that is provided by most Windows word processors.


Automatic File Save

Selecting this option will reveal a sub-menu with two items. The first, "Automatically save when closing", when checked, will cause any work you have done to be automatically saved when the program is closed.  If it is not checked, and if text has been modified, upon closing the file, a dialog box will be presented asking if you want to save the file.

The second option, "Automatically save every five minutes",  will cause any files that have been modified between saves to be resaved  automatically within five minutes.

Automatic file saving prevents excessive loss of work in the event of an abnormal program termination – due to a system crash or power failure, for example. Should abnormal termination occur, the next time the program is started, it will notify you so that you may retrieve any automatically saved work. It is highly recommended that you work with this option selected -- it is selected by default when HTML Assistant Pro is installed.

Files that already have file names will be saved in their existing locations, with their existing file names.  They will replace the files in the same way they would if they had been saved manually. New files that have not yet been manually saved will be given temporary names and saved with the suffix ".SAV" in HTML Assistant Pro's backup subdirectory, "proback", which resides in the HTML Assistant Pro program directory.


Clear Backup Directory

Choose this option to delete all the files in the backup directory for HTML Assistant Pro.


Multiple File Replace

Selecting this option will bring up the "Multiple file replace" dialog window.

You can enter the text to be searched for, and the replacement text in the text boxes at the top of the dialog. You have the option of selecting a case sensitive search and/or searching for whole words only.

The left side of the dialog window represents the files on your disk drive(s). Using the list boxes, you can select the drive, subdirectory and file types (i.e., *.htm, *.txt, etc.) you wish to select from. The right side of the dialog has a list box which will hold the names of the files to be searched. File names may be quickly and easily transferred from your disk drive to the search list.

Clicking on a file name in the file list box (on the left side of the dialog near the bottom) will cause it to be selected. Double-clicking on the filename will cause it to be copied to the list of files to be searched.   You may select more than one file name to be copied by pressing the <Ctrl> key when clicking. Dragging the mouse across several file names (with the left button pressed) will also result in multiple selections.  Clicking on the "Transfer all" button will cause all files in the file list (which means all files in the selected subdirectory) to be copied. Clicking on the button with the arrow on it, just below the file list box, will also cause any selected file names to be copied to the search list.

Once the files to be searched have been added to the search list, and the search and replace text has been entered, click on the "Replace" button, in the upper right corner of the dialog box.  This will cause every instance of the search text, in each file on the search list, to be replaced.

Backup files, if you have selected the "Create backups" option, will be created for each file. They will be in the same directory as the original file, and will have the suffix, ".BAK". When a backup file is created, it replaces any existing backup file with the same name and directory location.

You may halt the search at any time by using the "Stop search" button, or pressing the <Esc> key.


Text Search

The "Text search..." option on the "File" menu permits you to search a single subdirectory (not the full subdirectory tree), for files containing a user selectable text string.

When this option is chosen, the "Text Search" dialog window will appear, as shown below. Type the text to be searched for in the text box at the top of the dialog window.

Find Text dialog box

Use the "File Pattern" combo box to let the search routines know what files to search.  This works the same way that any MS-DOS or Windows directory listing file pattern works.

That is, use "*.*" to search all files in the directory.  To search all  HTML files, use "*.htm".  To search all files starting with "K", enter "K*.*", etc.

Use the "Select drive" and "Select directory" listboxes to specify the subdirectory that contains the files to be searched.

Click the "Search" button to begin the search.  You may interrupt the search at any time by clicking the "Stop" button.

Full path names of all the files containing the specified text will be inserted into the listbox on the right side of the dialog window.

If you want to edit or view one or more of the files that have been found, simply click on the file name in the listbox.  You may select more than one file by pressing the control key (usually marked "Ctrl") while clicking additional file names.  To select a continuous section of the list, click on the first file, then, while holding down a "Shift" key, select the last item in the section which is to be included.

Use the "Open file(s)" button to edit or view the selected files.

Use the "Exit" button to end the search without viewing files.

Note on viewing multiple files

You are not required to select all the files you want to view, before you view any one of them.  That is, if you want to look at several files without opening too many windows, you can select just one before you click the "Open file(s)" button.

The next time you use the "Text search..." option from the "File" menu, the "Text Search" dialog will open with the previous list already in place, and ready for you to select other files as you need them.

You can do this is many times as you like.

However, in order for the file list to be "remembered", you must select and open at least one file!


File Search

The "File search..." option on the "File" menu permits you to search a full subdirectory tree, for files (rather than text within files) with a specified file name pattern.

This option is useful, for example, if you want to locate all HTML files anywhere on your "C"  disk drive.

When the "File search..." option is selected, the "Find File" dialog window, shown below, will appear.

Find File dialog box

Use the "File Pattern" combo box to let the search routines know what filename pattern to search for.  This works the same way that any MS-DOS or Windows directory listing file pattern works.

That is, use "*.*" to list all files in the directory.  To search for all  HTML files, use "*.htm", etc.

Use the "Select drive" and "Select directory" list boxes to specify the subdirectory that is to be the outermost branch of the tree which is to be searched.

The routines will search that entire subdirectory and all its branches for files of the type specified.

For example, to search your entire "C" drive for all HTML files starting with "K", you would enter "k*.htm" (file patterns for MS-DOS or Windows are not case sensitive) in the "File Pattern" combo box.  Next, using the drive selection listbox, select the "C: " drive. Finally, use the directory list box to select the root directory, i.e.,"C:\".

Click the "Search" button to begin the search.  You may interrupt the search at any time by clicking the "Stop" button.

Full path names of all the files having the selected file specification will be inserted into the listbox on the right side of the dialog window.

If you want to edit or view one or more of the files that have been found, simply click on the file name in the listbox.  You may select more than one file by pressing the control key (usually marked "Ctrl") while clicking additional file names.  To select a continuous section of the list, click on the first file, then, while holding down a "Shift" key, select the last item in the section which is to be included.

Use the "Open file(s)" button to edit or view the selected files.

Use the "Exit" button to end the search without viewing files.


Note on viewing multiple files

You are not required to select all the files you want to view, before you view any one of them.  That is, if you want to look at several files without opening too many windows, you can select just one before you click the "Open file(s)" button.

The next time you use the "File search..." option from the "File" menu, the "File Search" dialog will open with the previous list already in place, and ready for you to select other files as you need them.

You can do this is many times as you like.

However, in order for the file list to be "remembered", you must select and open at least one file!


Insert File at Cursor

The "Insert file at cursor..." option in the "File" menu permits you to load and insert another file into your document at the cursor position.

This is most useful for inserting "boilerplate" text that appears in several documents. For example, you might want to insert information about how to contact you by Email, into a series of HTML pages.

When you select this option, a file select dialog box will appear. Simply select the file you want to insert and click the "OK" button to insert the file.


Select Test Browser(s)

Use this command to specify the World Wide Web browser you want to use for testing your HTML documents. When you choose this command, you see the Browser List dialog box. This list shows the currently available browsers on your system. The ones marked with an asterisk were detected and automatically added to the list by HTML Assistant Pro.

Click the "Add browser" button to add another browser to the list. To remove a browser, select it in the list and then click "Remove from  list." To select the default browser for testing, choose it in the list and click the Close button.

To view the current HTML document using the default browser, click the Test button (the button with the picture of an eye). If you want to view the document with a browser other than the default, right-click the Test button. You see a list of all the available browsers. Choose the browser you want from the list.


Print Setup

Select this option if you want to choose a printer, specify paper size, or make other printing selections.


Print

Choose this option to print the contents of the currently active document window within HTML Assistant Pro.


Undo/Redo

HTML Assistant Pro offers 255 levels of undo and redo. This means that the editor will remember up to 255 edits to a document which can be "undone" by the user during a given editing session. This is useful to allow the user to make changes to a document to test alternative designs and be able to restore the document to its original form.


Paste as HTML

This option is one of two that let you convert formatted text from a word processing document into HTML code. The other option is the Import Word Processor (RTF) File item on the File menu. Although the Import option is quite powerful, it assumes that you want to import an entire document and that the document is in RTF format.

The Paste as HTML option is more flexible. You can import any part of a document using the Cut or Copy functions of your Windows 95 word processor. Furthermore, the source document doesn't have to be an RTF file.

To import formatted text using the clipboard:

1.	Mark the text you want to import in your word processor.

2.	Select the Cut or Copy function in the word processor.

3.	In HTML Assistant Pro, place the cursor at the point where you want the imported text to appear.

4.	Choose Paste as HTML from the Edit menu.

HTML Assistant Pro adds the appropriate HTML tags to the imported text. When you display the imported text in your Web browser, it should have the same font and other layout characteristics as the original.


The "Options" Menu

Items in the "Options" menu are generally concerned with the behavior of general program features that affect the user's interaction with the software.

Options settings are "remembered" by the program between sessions, so you need not reset them each time you run HTML Assistant Pro.


Autosave File Before Test

Selecting the "Autosave file before test" item in the "Options" menu will cause any changes in your file to be saved automatically before it is tested.  In order for you to give the file a name, new files must be saved manually before they can be tested the first time.


Use Internal Browser as Default

Use this option to select the default browser for new documents. If you select this option, you see a check mark in the With internal viewer box on the toolbar of a new document. When you click the Test button, the document appears in the HTML Assistant Pro browser.

If you want to use another browser as the default viewer for new documents, clear this option. Select it from the Options menu to remove the check mark by its name.

You can specify one or more external browsers using the Select Test Browser(s) option on the File menu. As an alternative, HTML Assistant Pro prompts you for the name of a browser the first time you test a document without using the internal viewer.


Advanced

The Advanced option lets you select the method that HTML Assistant Pro uses to communicate with an external browser. If you've configured HTML Assistant Pro for use with an external browser, you can invoke it by clicking the Test button or choosing Test from the File menu. Either action starts the browser, if it isn't already running, and passes it the current document for viewing.

When you select the Advanced option, you see a sub-menu with the following four choices:


Pass file NAME to browser at startup. This option passes the file name of your HTML document to the browser. For example, you might be working on an HTML document in the file c:\web\page.html. When you test the document, HTML Assistant Pro passes c:\web\page.html to the external browser. This option and the next one take effect if the browser isn't already running. The result is the same as running the browser from the command line and including the document as a command line option.

Pass file URL to browser at startup. This option is identical to the previous one except that it passes the document in the form of a URL. Continuing with the previous example, you might be editing the document c:\web\page.html. When you test this document, HTML Assistant Pro passes the URL file://localhost/c:\web\page.html to the browser.

Pass file NAME to browser for DDE. This option and the next one govern how HTML Assistant Pro communicates with a browser that's already running. In this situation, the program uses a Windows technique called Dynamic Data Exchange or DDE. If you choose this option, HTML Assistant Pro establishes a DDE link with the running browser and passes it the file name of your document.

Pass file URL to browser for DDE. This option is the same as the previous one except that it passes the document's URL through the DDE link.

The Advanced options don't have any effect when you view a document using the internal browser.


Configure Paragraph Button

Selecting the "Configure paragraph button" option from the "Options" menu will display a sub-menu with several choices involving the placement of "newlines" in the text whenever the button that inserts a new paragraph tag is clicked.

This option affects only the way your text is displayed in the editor. It has no effect on its appearance when displayed by a browser.

The submenu will also permit you to select from various options involving bracketing text with paragraph tags and use of an "align" attribute.  These options can, with some browsers, affect the appearance of your displayed text.

The best way to find out what these do is to experiment and try them with different browsers.


Autoconvert UNIX Files to DOS

Text files created by UNIX systems, as many WWW HTML files have been, are not normally displayed in an easily readable form by most Windows or DOS-based programs.

Selecting "Autoconvert UNIX files to DOS" in the "Options" menu will cause a file in UNIX format to be automatically converted to MS-DOS format text as it is loaded into a document window.  A message box will pop up to let you know when this happens.  The original file is not affected, unless, of course, you resave the file with the same name.  In that case, it will be saved in MS-DOS format.

Text that is already displayed in document windows may be converted to and from UNIX format, by using options in the "Filters" menu.


Use Lower Case Tags

Some users prefer that the HTML tags appear in either all upper or all lower case. This option allows users to choose which they prefer. If this option is selected tags will all appear in lower case. If it is not selected tags will all appear in UPPER case. Once a preference has been set all future new documents will use the preference indicated until the preference has been changed.


Convert Tags to Preferred Case

This will convert the HTML tags from text that has been copied into an open document to the preferred case. It will also convert the HTML tags in a document that is opened that does use the preferred case.


Use Colored Tags

This toggles colored tag mode on/off. Once it is turned on, as you type the tags are entered in color.


Refresh Colors

Some situations may result in tags being improperly colored. Refresh colors quickly updates the visible portion of the screen.


Edit User Tools

Selecting this option will open the "Edit User Tools" dialog.  This dialog box shows a list of the current user tools and lets you modify them. Clicking with the right mouse button on the main tool bar's "User Tools" button will also open the "Edit User Tools" dialog.


Select Default User Tools Directory

When the program runs the first time, it uses the HTML Assistant Pro program directory as the location for automatically saving and retrieving the active User Tools file, called "default.ut."  This option permits you to change the default User Tools directory.


Hide Tag Tools Palette

Selecting and deselecting this option toggles the display of the floating tool palette that permits quick insertion of common HTML tags.

The small button, with a "T" on it, at the right hand end of the main tool bar has the same function.


Word Wrap On

Select this option to enable word wrapping. When this feature is active, HTML Assistant Pro automatically formats lines of text so they end at the right margin and start again in the next line. Typing in this mode is like working with a word processor.

When this option is off, HTML Assistant Pro ignores margin boundaries. A line of text goes on until you terminate it with a carriage return.


Display Tool Tips

Tool Tips are the small boxes of descriptive text that appear when you hold the mouse pointer over one of the buttons on the tool bar. You can switch Tool Tips on and off using this menu option.


Default Font

This option permits selection of the font and font characteristics (i.e., bold, size, etc.) which will be used as the default for all new text windows.

The font for text in an individual window that is already displayed, can be changed by using the "Font (current window only)" option in the "Edit" menu.


The "Filters" Menu

The filters menu is generally used for operations that transform the contents of the currently selected document window in some way.

These are all "Undoable". That is, click the "Undo" button after trying one of these options, and the text will be restored to its original state.

The best way to find out exactly what they do is to try them.


Convert UNIX Text to DOS Text

UNIX and DOS text files handle end-of-line characters differently.  That is why, when a UNIX format file is loaded into HTML Assistant Pro (or Notepad, for that matter) it looks like one long paragraph, interspersed with strange rectangular bars. In this form, UNIX files are very difficult to read or to edit.

Using this option on the "Filters" menu will transform that unreadable UNIX text to DOS text so that you can work with it.

You can use the "Convert DOS text to UNIX" option if you want to resave your edited work in UNIX format.


Convert ISO ASCII Codes to HTML

Some keyboards permit characters that are not available as part of the North American ASCII character set to be typed and entered into files.  Accented characters, umlauts, and many others, fall into this category.

This filter will convert these characters to HTML.


Strip HTML

Selecting this option will cause all the HTML code to be removed from the text in the current document window.


Reformat Paragraphs

Using this option causes all newline characters in every paragraph in the current document window to be removed, except those found in empty lines.

This can make some documents, from which the HTML code has been removed, easier to use with a word processor for further reformatting.


Strip Extra Newlines

Use of this option will remove extra blank lines,  often left after HTML code has been removed from text.  This affects all the text in the current document window.


Extract & Display Link URLs

This option extracts, and displays, only the URLs and the live, clickable text found in "<A HREF..." links in the current document window.

This is useful, for example, if you want to work with all the links in a file, without being bothered by any of the other text.

Be aware though, that some of the links extracted may be "relative" and are not usable from a file that is accessed from any other disk drive.    These should either be deleted or edited so that they are proper links.  That is, they should  have complete URLs including a server address and full file path.

The URLs and associated "clickable" text are listed in "HTML Assistant" URL  format.  The list, as is, or edited, can be saved as an HTML Assistant URL file, using the ".url" suffix.

You can then use HTML Assistant Pro's Automatic Page Creator to quickly create an HTML document that can be easily perused for links that are of interest.


The "ISO" Menu

The ISO (International Standards Organization) character set includes a large number of items that aren't in the standard ASCII set. These items include letters and punctuation marks that appear in European languages.

Since you can't type most of these characters using the average keyboard, the ISO menu provides an easy way to insert them in your HTML documents. The menu includes some common ISO characters as options.

For example, if you select the " (&acirc;)" option, HTML Assistant Pro places the text "&acirc;" in your document at the point of the cursor. A person browsing this document sees the letter a with a circumflex over it.

In addition to the individual letters and other items on the ISO menu, the first optionShow ISO characters listgives you access to all the characters in the ISO set. Choose this option to see a dialog box with a drop-down list of character choices. Select one of the characters in the list to place its code in your document.


Autoinsert Paragraph Markings

This will insert new paragraph tags ("<P>") wherever a newline is found in the selected text.  Tags will not be inserted on empty lines.


Autoinsert Line Breaks

This will insert line break tags ("<BR>") wherever a newline is found in the selected text.  Tags will not be inserted on empty lines.


Create Formatted Link

This option converts a single line containing a URL, followed by its "Clickable" text, to a formatted  "<A HREF...", link.  The line to be converted must first be selected with the mouse.

For example, the line:

www.nsac.ns.ca/,Agricultural College Site

would be converted to:

<A HREF="www.nsac.ns.ca/">Agricultural College Site</A>

Note the comma (",") separating the URL from the clickable text in the original line.  This is required, unless there is no clickable text.


Insert Horizontal Line

This command lets you place a horizontal line in your document. When you select this option, you see the Horizontal Rule dialog box. This tool lets you specify the width, size, alignment, and shading of the line. When you click Apply, HTML Assistant Pro inserts a "Horizontal Rule" tag ("<HR>") at the cursor.


Display Standard Document Template

Displays the HTML tag pairs that are required for delineating the structure of an HTML document.


The following code is displayed at the cursor position:

<HTML>

<HEAD>

<TITLE> </TITLE>

<META NAME="EDITOR"

CONTENT="HTML Assistant Pro 97 - http://www.brooknorth.com/">

</HEAD>

<BODY>

</BODY>

</HTML>


Mark Selected Text as TITLE

Encloses selected text with the "title" tag pair, "<TITLE></TITLE>".


Mark Selected Text as BODY

Encloses selected text with the "body" tag pair, "<BODY></BODY>"


Mark Selected Text as HEAD

Encloses selected text with the "head" tag pair, "<HEAD></HEAD>"


Mark Selected Text as HTML

Encloses selected text with the "HTML" tag pair, "<HTML></HTML>"


Background AssistantTM

Background Assistant is a tool for creating background and text colors in HTML documents. See What is  Background Assistant?  for more information on this feature.


URL AssistantTM

URL Assistant is a tool for organizing and selecting URLs to be used in your documents.  You can use it to combine URLs from various sources, select them by subject or other criteria, and quickly insert them singly, or as groups, into your documents. See the section "URL Assistant" for a complete discussion of this tool.


Table tool bar

The Table Assistant is a tool bar designed to automate the task of creating tables from the HTML table tags. For more information, see Table Assistant Tool Bar Overview.


Table Components

Select this option to see a sub-menu with four choices:

•	Table

•	Row

•	Header

•	Data.

Choose one of the items on the sub-menu to see a dialog box for the appropriate table component. For example, if you want to define the rows of a table, select the Row option. You see the Table Row Tags dialog box. This dialog box and the others are described in the section on the Table Assistant.

Each option on the Table Components sub-menu corresponds to one of the buttons on the Table Assistant tool bar. For example, to work with the Table Row Tags dialog box, you can select the Row option or right-click the Row button on the Table Assistant tool bar.


QuickFramesTM

This feature permits you to easily create pages that are divided into separate windows or "Frames".  Simply follow the instructions in the dialogs that appear. When the "Create Frame Set" button is "clicked", a new edit window will be opened with the frame page text on it.

Frame page documents are different from other HTML documents – they do not have <BODY>…</BODY> tags, and each frame tag contains only an attribute that references another HTML document.  The frame itself has no content and no closing tag.

Be aware that not all browsers support frames.


Image Map

An image map is a graphic image with hot spots that respond when the user clicks them. HTML Assistant Pro includes an Image Map Editor that makes it easy to create sophisticated image maps. For details, see Creating an Image Map.


Form Tool Bar

This tool bar consists of a set of buttons used to create the individual components of HTML forms. For details, refer to Form Assistant Tool Bar Overview


Form Components

Select this option to see a sub-menu with seven choices:

•	Form

•	Text box

•	Radio button

•	Check box

•	Selection list

•	Submit button

•	Reset button

Choose one of the items on the sub-menu to see a dialog box for the appropriate form component. For example, if you want to add a check box to a form, select the corresponding sub-menu option. You see the Check box dialog. This dialog box and the others are described in the section on the Form tool bar.

Each option on the Form Components sub-menu corresponds to one of the buttons on the Form tool bar. For example, to work with the Check box dialog, you can select the Check Box menu option or right-click the Check Box button on the Form tool bar.


Apply Font Tags

You can use this option to change the appearance of text in your document. When you select this option, the <FONT> and </FONT> tags appear in your document. If you selected text in the document before choosing this option, the <FONT> tag appears before the selected text and </FONT> appears after the text.

Before you use this option to apply the tags, you may want to select font attributes such as color and typeface. Use the next option for this purpose.


Font Attributes

Choose this option to see the Font Attributes dialog box:

Font Attributes dialog box

Use the controls on this dialog box to specify the typeface, color, and size of text. Choose one of the available typefaces from the drop-down list. If you want to change the color of the text, click the Select Color button. This button produces the standard Windows 95 color selection tool. To change the size of the text, click the arrow buttons. Text size values range from 1 to 7. If you check the plus or minus box, the value in the Size field is added or subtracted from the default text size.


Set Base Font

Use this option to set the default font size that appears when a user views the document in a Web browser. The browser uses this font size for all the text that isn't specifically formatted with the <FONT> tag or a style sheet.

When you select this option, you see the Base Font dialog box. Enter the default font size (1 to 7) in the Size field.


Apply Marquee Tags

A marquee is a rectangular area of a Web page. The text within the marquee can scroll from side to side to produce an eye-catching display.

Choose this option to add the <MARQUEE> and </MARQUEE> tags to your document. If you selected text in the document before choosing this option, the <MARQUEE> tag appears before the selected text and </MARQUEE> appears after the text. The text within the tags is the scrolling text that appears on the marquee.

Before you use this option to apply the tags, you may want to select marquee attributes such as scrolling behavior and background color. Use the next option for this purpose.

Note: Not all browsers can display marquees.


Marquee Attributes

Choose this option to see the Marquee dialog box:

Marquee dialog box

The controls on this dialog box are divided into two groups. Use the Scrolling controls to specify how the text within the marquee moves. The text can scroll, slide, or alternate back and forth. You can specify the direction of scrolling, the delay interval, and other options.

The Layout and Appearance controls let you specify the height and width of the marquee area as well as the alignment and vertical spacing of the text. Click the Select Background Color button to create a colored marquee using the standard Windows 95 color selection tool.


Apply Sound Tags

Use this option to add music, speech, or other audio to your Web page. When a user with a multimedia computer browses your Web page, the audio clip plays in the background.

This option adds the <BGSOUND> tag to your HTML document at the point of the cursor. Before you add the tag, you may want to specify audio attributes such as the name of the file that contains the sound data. Use the next option for this purpose.


Sound Attributes

Choose this option to see the Background Sound dialog box:

Background sound dialog box

The main purpose of this tool is to specify an audio file. Click the Browse button and choose a file from the dialog box that appears.

Files that use the standard Windows 95 audio format have the extension .WAV. If you choose a WAV file you can be fairly confident that Windows users who visit your Web page will be able to hear the sound. Other audio formats aren't as common, and some users may not have the appropriate software to play them.

If you want to hear the sound before adding it to your HTML document, click the Test button. The other controls on the dialog box let you specify how many times the sound will play. To play it over and over, check the Infinite box.


Video Clip

Use this option to add video to your HTML document. When you select this option, you see the Video Clip dialog box.

Video Clip dialog box

The controls on this dialog box let you specify the file that contains the video images you want to display on your Web page. To specify a file, click Browse and choose a file using the dialog box that appears. Most Windows video files end with the extension .AVI.

Once you select a file, you can view it by clicking the Preview button. Use the play and stop buttons (the ones with the triangle and square, respectively) to control video playback.

The Video Clip dialog box has a group of controls labeled Video Options. These controls govern video playback when a user browses the Web page that contains the video. If you want the user to be able to control video playback, check the Show Controls box. This option displays a tool bar of VCR-like controls for the user.

The Start When options let you specify when the video starts playing. You can start the video immediately after the Web page appears in the browser or wait until the user moves the mouse pointer over the video area. As with audio playback, you can specify how many times the video plays, set the delay interval, and make the video play constantly in an infinite loop.

The other controls on the Video Clip dialog box let you specify the dimensions and alignment of the video display area.

Note: This option may not be compatible with all browsers.


Create Local File Reference

Selecting this option brings up a file select dialog. Selecting a file, causes a local file URL to be inserted at the cursor.

For example, selecting the file, "d:\images\picture.gif" will cause the following text to be inserted at the cursor:

file://localhost/d:/images/picture.gif


Autoconvert File to HTML

Selecting this option will bring up a sub menu with options for selecting file types from which URLs and their associated "clickable" text will be automatically converted to HTML text.  The HTML text will be displayed in a document window.

You may convert URLs from Cello Bookmark files (Cello was the first MS Windows based browser available), NCSA Mosaic's "Mosaic.ini" file, or HTML Assistant format ".url" files.

NOTE: Netscape bookmark files are already HTML files.


Edit/Build HTML Assistant URL files

Selecting this item from the "URL" menu brings up a dialog window that permits you to edit and combine commented URLs  from different sources.


Automatically Create a Browser Page

Selecting this option brings up HTML Assistant Pro's "Automatic Page Creator" window.


The "Objects" Menu

This menu lets you insert a number of special-purpose tags in an HTML document. These items include ActiveX controls, small utility programs known as "applets," and custom programs in VBScript, JavaScript, and other languages.

Most of the options on this menu are advanced tools that require specialized knowledge. A complete description of them is beyond the scope of this manual. This section gives a brief description of the options on the Objects menu with pointers to further information on the World Wide Web.


ActiveX Object

ActiveX is a Microsoft technology that lets you embed interactive objects in an HTML document. These objects range from simple controls like buttons and sliders to multimedia to entire documents.

You insert ActiveX objects into your document using the <OBJECT> tag. When you choose this option, you see the Object Tag dialog box.

Object tag dialog box

The controls on this dialog box let you specify the object and many related characteristics such as its type, data, and class ID.

The most up-to-date information on the evolving ActiveX standard is available on the Web. For more information, refer to:

http://www.microsoft.com/workshop/author/newhtml/

For details on the Object tag, see:

http://www.w3.org/pub/WWW/TR/WD-object.html


Applet tag

An "applet" is a small application program that adds a custom feature to a Web page. For example, one applet lets you add a scrolling display that resembles a Times Square marquee or a scoreboard in a sports stadium. There are many sites on the Web that offer applets of all kinds.

When you select the Applet tag option, you see the Applet tags dialog box.

Applet tag dialog box

Use this dialog box to specify the applet itself, its name, dimensions, and other options. Click the Define Parameters button to see a dialog box that lets you specify the parameters for the applet.


Embed tag

The <EMBED> tag is an earlier and less powerful version of the <OBJECT> tag. You can use it for tasks such as adding a ShockWave plug-in object to a Web page. The <EMBED> tag appears in this version of HTML Assistant Pro for backwards compatibility with earlier documents and applications.

When you select this option, you see the Embed Tag dialog box. This tool lets you specify a source URL, name, parameters, and other options for the embedded object.


Script tag

In this context, a script is a program written in a language other than HTML. For example, you've probably seen Web pages that display scrolling text in the status bar of the browser. Most Web authors implement this feature in the language JavaScript.

When you select the Script tag option, you see the Script tag dialog box. This dialog box has radio buttons that let you specify the language of the script. The options include:

•	VBScript

•	JavaScript

•	LiveScript

•	Other

If you select the Other option, enter the name of the script language in the adjacent text box. If you want to include HTML comments that indicate the beginning and ending of the script, check the Include bracketing comments option.

When you click the Apply script tags button, HTML Assistant Pro inserts the <SCRIPT></SCRIPT> tag pair into your document. It includes the LANGUAGE option to specify the script language. For example, if you clicked the VBScript button on the Script tags dialog box, you see <SCRIPT LANGUAGE=VBSCRIPT> in the document.


The "Publish" Menu

The commands on this menu help you publish your HTML documents and other files on the World Wide Web. When you publish a file, you transfer it from your local system to a remote host computer. The host lets other users browse your Web pages.


Quick Publish

This option provides a fast way to publish the current document in HTML Assistant Pro. When you select this option, you see the Quick Publish dialog box. For more information, refer to Quick Publishing.


Site Assistant

The Site Assistant is a powerful tool for file management and communications. It lets you transfer HTML documents, graphics, and other files to and from the remote host. You can also use it for general file and directory maintenance on both systems.


Setup

Before you can publish Web pages using HTML Assistant Pro, you need to provide some basic information about the local and remote systems. Use the Setup menu for this purpose. When you select Setup, you see a sub-menu with two options:

•	Set Local Web Root. The local Web root is the home directory on your local system that contains your HTML documents and other Web files. Use this command to specify the directory you want to use as the local Web root.

•	Define Remote Sites. Use this option to provide information on remote host computers. This information allows HTML Assistant Pro to log on to the host and access the directory where you store your Web files. When you select this option, you see the Site Definition dialog box.


Insert Web Root

Use this option to add the directory specification for your local Web root to the current file. For example, if your local Web root is C:\WEBROOT, this option inserts "C:\WEBROOT" in your file at the point of the cursor. This option is useful for specifying local files during development.


Insert Link to Brooklyn North

Select this option to add a hypertext link to Brooklyn North Software Works, the creator of HTML Assistant Pro. When you select this option, the following text appears in the current document.

<a href="http://www.brooknorth.com/">This page was created with HTML Assistant Pro 95</a>


The Main Tool Bar

HTML Assistant Pro's tools can be accessed by means of the tool bar at the top of the program's main window, shown below.

Main tool bar

The buttons on the toolbar perform these functions:

•	New. Create a new HTML document.

•	Load. Open an existing HTML document.

•	Bold. Format the selected text in boldface.

•	Italic. Format the selected text in italics.

•	Underline. Underline the selected text.

•	Styles. Display a menu of formatting options for the selected text.

•	Numbered List. Turns the selected lines of text into a numbered list.

•	Bulleted List. Turns the selected lines of text into a bulleted (unnumbered) list.

•	Link. Inserts a hypertext link into the document.

•	Anchor. Marks the current location in the document for internal linking.

•	Image. Inserts a graphic image in the document.

•	Heading. Formats the selected text in one of six heading formats.

•	Paragraph. Inserts a paragraph marker at the cursor position or brackets selected text with paragraph markers.

•	Form. Displays the Form Assistant tool bar.

•	Table. Displays the Table Assistant tool bar.

•	User. Lets you create and modify user-defined tools. Left-click to see the User Tools dialog box. Right-click to see the Edit User Tools dialog box.

•	Automatic Page Creator (lighting bolt). Lets you create a new Web page from scratch.

•	Tags (T). Displays the Tags palette.

•	Display/Hide Lower Tool Bar (blue arrow). Toggles the second tool bar on and off.

•	Quit. Exits HTML Assistant Pro.

Click the Display lower tool bar button (the one with the arrow) to see a second row of buttons.

These tools are divided into two groups. The right-hand group contains buttons for predefined HTML functions such as changing the background color and adding an image map. Two of these buttons behave differently depending on whether you right- or left-click.

•	Left-click Publish to quickly upload the current document to a remote host computer. Right-click to see the Site Assistant. The first time you click using either button, you see a dialog box asking if you want to define remote sites.

•	Left-click Font to insert the current font tags into your document. Right-click to see the Font Assistant.

The right-most button on this toolbar produces a drop-down menu of miscellaneous functions. Use this menu to run the spelling checker and insert various tags into the document.

The other group of tools is for user-defined functions. By default, these buttons are labeled User 1 through User 4. The fifth user button comes with a pre-defined function: it inserts a hyperlink to the Brooklyn North Sofware Works Web site. You can modify this function to anything you like, however.

There is also a floating tool palette that contains commonly used HTML tags. The tool palette can be hidden by clicking the small button marked "T" in the lower right hand corner of the main tool bar.  The button is a toggle. Clicking again will restore the tool palette.

Tags palette


The tools are basically of two types:

Tools that normally involve the selection of text, and which mark the selected text by bracketing it (Type 1 tools.)

Tools that insert HTML elements at the cursor (Type 2 tools.) NOTE: Insertion tools will REPLACE any selected text.

The tools accessible on the tool bar are almost all Type 1 tools that involve the selection of text. Most of the items on the floating palette are Type 2 tools.


Using Bracketing (Type 1) Tools

To use the Type 1 tools, highlight the text you wish to select by dragging the text cursor across it.  Selecting a tool bar button (by clicking) will cause the appropriate HTML markings to bracket the selected text.

The "List" tool items work with several lines of text.  Select a few lines of text and try them.

A few Type 1 Tools are a bit more complicated.  They ask for additional text to be added by the user as part the HTML element that they apply. The URL Link tool (associated with the  "Link" button) is one of these. So are the Anchor and Image tools.  Try them to see how they work.


Using Insertion (Type 2) Tools

Most of the tools on the Tags toolbar are of Type 2. For example, if you click the <HR> button on the toolbar, the <HR> tag appears in the document at the cursor position. If you select text before clicking <HR>, the new tag replaces the selected text. The only Type 1 tool on the Tags toolbar is for creating titles. Clicking it brackets selected text with the <TITLE> and </TITLE> tags.


User Tools

User Tools permit the use of HTML's latest features by means of tools customized with text provided by the user.

This permits users to create new tools, as new HTML tags become available, that can quickly be inserted at the cursor position or be used to bracket text that has been selected with the mouse.

An unlimited number of User Tools can be created.  They can be deleted or modified at any time, are automatically saved when exiting the program, and are reloaded when the program starts.

HTML Assistant Pro has two features for working with user tools: the User Tools dialog box and the user buttons on the secondary tool bar. The following sections describe both features.


Working with the User Tools dialog box

To see the User Tools dialog box, click the Display User Tools button (the one marked "User") on the main toolbar.

User Tools dialog box

The User Tools dialog box contains a list of HTML tags. Click one of the items in the list to place the corresponding tag in your document. You can use this method with both Type 1 (Bracketing) tags or Type 2 (Insertion) tags.

For example, if you click a Type 2 item in the list, such as the <INPUT> tag, it appears at the point of the cursor in your document. If you selected text in the document before clicking <INPUT>, the tag replaces the selected text. Notice that a Type 2 tag also appears in the Start Text field of the User Tools dialog box when you click it.

To work with Type 1 items such as the <TABLE> tag, you may want to select text in your document first. Then, when you click the item in the list, a pair of tags appear around the selected text. If there's no selected text, the tags appear on either side of the cursor. In either case, the pair of tags that make up a Type 1 item appear in the Start Text and End Text fields of the User Tools dialog box.

You can also use the User Tools dialog box to add new tags to your document. Follow these steps:

1.	If you want to create Type 1 tags to bracket existing text, first select the text in your document.

2.	In the Start Text field of the User Tools dialog box, enter a Type 2 tag or the initial half of a Type 1 tag pair.

3.	If you're creating a Type 1 tag, enter the closing half of the tag pair in the End Text field.

4.	Click OK.

When you exit HTML Assistant Pro, the User Tools in the list will automatically be saved for use in future editing sessions.


Editing User Tools

The User Tools list can be changed by clicking on the "Edit User Tools..." item in the "Options" menu.  Clicking with the right mouse button on the tool bar button marked "User", or by selecting the "Edit" button on the User Tools dialog window will allow for changes..

Any of these actions will cause an "Edit User Tools" dialog box to appear, shown below.

The buttons on the dialog box, along with the contents of the text boxes at the top, are used to modify the contents of the User Tools list.  Use the buttons to delete, insert, append and replace list items.

Click on the "OK"  button to copy the edited list to the User Tools list on the User Tools dialog window.  Selecting the "Close" button will cause the edit dialog box to close without altering the User Tools list on the User Tools dialog.

Edit User Tools dialog box


Creating Type 1 and Type 2 tools

You can use the Edit User Tools dialog box to create Bracketing (Type 1) or Insertion (Type 2) tools. To create a Type 2 tool, enter its text in the Start Text field. To create a Type 1 tool, place the opening and closing text in the Start Text and End Text fields, respectively.

For example, to create a user tool to mark selected text as "centered", follow these steps:

1.	Enter "<center>" in the Start Text box.

2.	Enter "</center>" in the End Text box.

3.	Select one of the existing items in the list of user tools. The new tool will appear before the one you select.

4.	Click Insert.

You see the new tool in the list. It looks like this:

<center>''</center>

Note the quotation marks between the two elements of the tag pair. These are two single quote marks, not a double quote mark, with no spaces between them.


Creating Tools that Insert an End-of-Line

To create a user defined tool that inserts a carriage-return/linefeed pair (End-Of-Line marker) enter "\n"  -- without the quotation marks --  in the list box item where you want the EOL to be created.

For example to create a tool that inserts an EOL followed by a paragraph mark followed by another EOL you would use the following text in the tool's list box text:

  \n<P>\n


User Tools Files

The "File" menu on the "Edit User Tools" dialog permits you to save your lists of User Tools as files, and to reload them for later use.  In this way, you can build sets of special purpose user tools as the need arises.  For example, you might have a set of tools for creating  forms, another for a specialized application that involves tables, etc.  An option in the "File" menu permits you to combine different User Tools files by appending to the list box.

User Tools files have the suffix, ".UT".  A file called "DEFAULT.UT" is automatically loaded to the User Tools list when HTML Assistant starts.  The User Tools list is saved to this file when the program ends.


Working with the User Tool buttons

The left side of the secondary (or "lower") tool bar contains five buttons that you can customize for new HTML tags or any other text. By default, the labels on these buttons are User 1 through User 5. Initially, they don't have any HTML tags or other text assigned to them.

You customize the User buttons with the Edit User Defined Button dialog box. You have two options for displaying this dialog box.


Right-click one of the User Buttons. Use this method if you want to assign text to a button that doesn't have any.

If the User Tools dialog box is open, click one of the items in the list of tools, drag it out of the User Tools dialog box, and drop it on one of the User buttons.

Use the latter method if you want to assign an existing tool to one of the buttons. Use the former method if you want to create a new tool or edit an existing one.

Edit User Defined Button dialog box

The Edit User Defined Button dialog box has the familiar Start Text and End Text fields. For information on how these fields work, refer to Working with the User Tools Dialog Box.

The two text fields will be empty if you right-clicked a User buttons that doesn't have any text assigned to it. If you right-clicked a button with existing text, or dragged text from the User Tools dialog box, the text appears in the appropriate field or fields.

The Edit User Defined Button dialog box has a unique feature for automatically generating HTML syntax. Check the Autoset HTML tags box if you want to automatically place brackets around the text in this dialog box.

When you customize one of the user-defined buttons, you can specify the label that appears on the button. Enter the new label on the Button Caption field of the Edit User Defined Button dialog box.


The Document Tool Bar

In addition to the main tool bar, each document window in HTML Assistant Pro has its own tool bar. Along with standard editing operations, these tools let you toggle the case of HTML tags, turn colored tags on and off, and invoke your browser.


The buttons on this tool bar affect the active document. The functions include:

•	Save. Save the current document in a disk file.

•	Print. Print the current document.

•	Spell. Run the spelling checker to verify the accuracy of the current document.

•	Cut. Remove the selected text and place it on the clipboard.

•	Copy. Make a duplicate copy of the selected text and place it on the clipboard.

•	Paste. Place the contents of the clipboard at the cursor position.

•	Undo. Reverse the effects of the last editing operation.

•	Redo. Reverse the effects of the last undo operation.

•	Colored tags. Left-click to toggle colored tags on and off. Right-click to refresh colored tags.

•	Toggle case. Left-click to change HTML tags from lower to upper case and vice-versa. Right-click to choose lower case as the default for HTML tags.

•	Preview document. Left-click to view the current document in the default browser. Right-click to select a browser from a pop-up menu.


What is  Background Assistant?

Background Assistant is a WYSIWYG (What-You-See-Is-What-You-Get) aid for creating background and text colors in HTML documents.

This version of Background Assistant is part of the HTML Assistant Pro hypertext editor.  Background Assistant is also available as a stand alone application for use in conjunction with other editors.

The color and background image tags created with Background Assistant can be used by browsers that support  "BGCOLOR" and "BACKGROUND" attributes in the starting <BODY> tags of HTML documents.  Netscape (Version 1.1 and higher) introduced these elements and other browsers may also incorporate them.

The Background Assistant has slider controls and a color picker tool that make it easy to select a color for text and backgrounds.

If you wish, instead of using a background color, you can use a small "gif" or "jpg" image, which is automatically "tiled" by a browser, as a background.

Once you are satisfied with the background color (or tiled image) and text colors, with a mouse click you can insert the <BODY> tag, with its background and text color attributes,  into your HTML document.

In a simple and intuitive manner, Background Assistant permits you to add interest and excitement to your WWW pages.


Starting Background Assistant

From HTML Assistant Pro, you can start Background Assistant by selecting the "Background Assistant" item from the "Special" menu, or you can use the <F5> "shortcut key."

Background Assistant opens as a "modal" dialog window. "Modal" means that you must finish working with Background Assistant before you can continue with any other editing tasks.

Background Assistant dialog box

During an editing session, the first time you start Background Assistant, it opens in "Color" background mode. Using this mode will result in a plain single color background for your document.  You can also choose to use "Image" background mode. In that case, your document's background will be patterned, or textured, with a "tiled" image.

Selecting the "Background" option button in the box labeled "Select color for:", located in the upper right portion of the dialogue window makes the background of the image display box (in the upper left portion of the window), the object of color changes. The first time that the dialog window appears, this option is already selected.

Moving any of the three (Red, Green and Blue) color sliders, will result in a change to the background color of the display.

The manner in which colors change as you move the sliders depends upon the number of colors available on your computer. If you are using 16 or 256 color (4 or 8 bit) graphics, then the colors may change suddenly when a slider reaches a particular position. With 64K or 16 million colors (16 or 24 bit graphics), the color changes will be continuous and gradual.

Note: If you are using 256 or 16 color graphics mode, the colors used as backgrounds will be limited to those found in the Windows default palette.  Colors not part of this palette will be "dithered" by Windows, using combinations of existing colors.  This will result in the appearance of grid like effects on the image display box background. Text  colors will not be dithered, but will be limited to the Windows default color set.

For more color options, click the Color Picker button to see the Color dialog box.

You can select one of the standard colors or click Define Custom Colors to create a new color. Click and drag over the palette until you find the hue you want. Drag the luminosity slider next to the palette to make the color lighter or darker. When you see the color you want in the preview box, click Add to Custom Colors. You can then choose your color from the Custom Colors selection.

In addition to the background, four text items in your document may have their colors modified:

Text - headings, lists, plain text, etc.

Link - "clickable" text used for accessing other files, documents or images

Visited Link - a link that has previously been used or "visited", and which is marked as such by the browser's use of an alternate color

Active Link - the link which is currently selected by placing the mouse cursor over it and pressing the left mouse button

You can select any of these text options for color modification, either by clicking on the appropriate text in the image display box, or, by clicking on its option button.

Note that the <BODY> tag with its currently selected attributes is displayed in the gray inset box near the bottom of the Background Assistant window.


Using a Tiled Image as a Background

You can use a graphic as a background for your Web page.

Instead of using a simple colored background, Background Assistant permits you to preview a picture file which the browser displays repeatedly in adjacent rows and columns so that it covers the entire background. The image is "tiled" to form the background of your document.

Usually, the files used for HTML document backgrounds are textures or patterns that provide a pleasing surface upon which the text is displayed.

Because the image is tiled, even though it fills the entire document background, the actual image file can be quite small. This permits the use in your documents of attractive, large scale graphic designs without requiring the user to download large files.

These background textures or designs can be created, and saved in "gif" format, with any one of a number of graphics packages such as Corel Draw, Adobe Photoshop, or a number of shareware products. Texture files in "gif" or "jpg" format are also available on the Internet.

If you do not already have the software or the images that are required, you can use one of the "search" sites on the Web to find what you need.  Start your search by using the word "graphic" or "image" as the search string.

To use a tiled image as the background for your document, select the "Image" option button in the box labeled "Background", immediately below the image display box.

Selecting the "Image" option will cause the "File..." button, immediately below the "Background" option buttons to become enabled, and a small white "picture box" will appear to the right of the "File..." button.

Click the "File..." button, and choose the "Load image..." option from the popup menu that appears. Next, using the file select dialog box, select the image file that you want to use as your background. Browsers can usually display files in "GIF" or "JPEG" format, but you can display an image in another format and have Background Assistant convert it for you.

Assuming that you have selected an appropriate image file, the image itself will appear in the small picture box. Almost simultaneously, the tiled image, with the colored text superimposed on it, will appear in the image display box above.

The <BODY> tag with the appropriate attributes will be displayed in the gray inset box near the bottom of the Background Assistant window.

At any time, you can select another image file and it will become the tiled image in the image display box, with your colored text superimposed.

You can also switch back and forth between a plain color background and a tiled image by selecting the appropriate option button in the "Background" options box.


Possible Problem Displaying Some "GIF" Files

Some "gif" files may not be able to be displayed by Background Assistant. Instead an error message will appear to the effect that the file is of the wrong type. The third party custom control we use for loading images cannot, at this time, display "gif" files that have been saved in the "interlaced" format. Interlaced format files are the ones that are displayed in alternate sections by your browser. Most graphics packages do not save files in this format. However, these files are available on the Internet. Be aware that if you want to use an interlaced format "gif" file with Background Assistant, you must first load it into an appropriate graphics software package and resave it in noninterlaced format.  The default format in which most graphics packages save "gif" files.


File Conversion: Use of Files Other Than GIF or JPG

In addition to "gif" or "jpg" files, Background Assistant will permit you to load other graphics file formats.

This version of Background Assistant will permit you to convert these files to "gif" or "jpg" files that can be displayed by browsers.

Allowable formats include "raster image" or "bit mapped" files with the suffixes ".tif", ".bmp", ".dib", ".pcx" and ".wpg" files that have been saved as raster images.    You can also load some "vector image" files (with suffixes ".wmf",  ".eps" and ".wpg" files that are not saved as raster images), but they cannot be tiled or converted.

You can use the "Save as..." option in the "File..." button popup menu to convert and save a copy of the file as a "gif" or "jpg" image.  The converted image can be used by your browser.


Transferring the <BODY ... > Tag to your File

When you are satisfied that the background and text colors are to your liking, simply click the "OK" button. This will insert the <BODY> tag with its attributes into your HTML document, at the place where the cursor was when you opened the Background Assistant dialogue window.  If you had selected any text -- a pre-existing body tag, for example -- it will be replaced.

Upon returning to the editor, you can reverse any changes made by Background Assistant, by using the editor's "Undo" feature.

You can exit Background Assistant without inserting a tag, or replacing any selected text, by using the "Close" button.  The existing settings will be "remembered" by  Background Assistant and you will be returned to the editor, with your document unchanged.


Preselecting an Existing <BODY ....> Tag

Before opening Background Assistant, you may select, by dragging the mouse cursor across it, an existing body tag with its attributes for background and text colors.

This will cause Background Assistant to attempt to preselect the background mode and color combinations used in that tag. If this is successful, the dialog window will appear with the tag's colors and image, if any, already displayed.


Where to Insert the <BODY ... > Tag

A properly formatted HTML document will incorporate the following tags, which serve as boundaries for the formal sections of the text:

The <HTML></HTML> tag pair brackets the entire document

The <HEAD></HEAD> tag pair brackets the title and, optionally, certain other descriptive information that is not part of the document text

The <TITLE></TITLE> tag pair brackets the document title

The <BODY [with attributes, if any]></BODY> tag pair brackets the document text, links, images, etc. This is what most people normally think of as the contents of their page.

Diagramatically it looks like this:

<HTML>

<HEAD>

<TITLE>Your Document's Descriptive Title</TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF" TEXT="FF0000" LINK="0000FF" VLINK="FF00FF" ALINK="000000">

Your document -- text, links and images -- should be here

</BODY>

</HTML>

Note that the starting <BODY  ... > tag, with its attributes, must be the first item in your document following the closing </HEAD> tag, and only one <BODY ... ></BODY> tag pair may be used.

While most browsers will format your document properly if you do not include all the bounding tags, it is good HTML practice to use them.

If you choose not to include the <HTML> and <HEAD> tags, be sure that the starting <BODY ... > tag is the first tag following the closing </TITLE> tag.  If you do not use the <TITLE></TITLE> tag pair, be sure that the starting <BODY ... > tag precedes any other text or headings in your document.


Overview

QuickFrames is a tool designed to automate the creation of pages divided into frames. Frames are separate windows displayed on a single HTML page.

Each frame can contain a separate HTML document, permitting several different documents to be displayed at once. Moreover, individual frames may optionally be scrolled, sized and displayed independently.

Frame page documents are different from other HTML documents – they do not have <BODY>…</BODY> tags, and each frame tag contains only an attribute that references an HTML document.  The frame itself has no content and no closing tag.

QuickFrames makes the process of creating frames easy and automatic.


Using QuickFrames

To access QuickFrames, a document edit window must be open.

To start QuickFrames click on the "Special" menu and select "QuickFrames" or press the Shift and F5 keys (Shift-F5)simultaneously.

Then, simply follow the instructions in the dialogs that appear. When the "Create Frame Set" button is clicked, a new edit window will be opened with the frame page text on it.


URL Assistant Overview

URL Assistant is a tool for organizing and selecting URLs to be used in your documents.  You can use it to combine URLs from various sources, select them by subject or other criteria, and quickly insert them singly, or as groups, into your documents.

To access the URL Assistant, a document edit window must be open.

Selecting the "URL Assistant" option from the "Special" menu, or pressing the F2 key, will cause the URL Assistant window to appear on your screen.  It consists of a floating window with a menu bar, some control buttons and an empty list box. The window can be resized.

URL Assistant

Using the various options in URL Assistant's "File" menu, the list box can be filled with URLs and their associated "clickable" text or comments.  The URLs that fill the list box can come from HTML Assistant Pro URL files.  They may also be extracted from HTML documents (Netscape Bookmark files are HTML documents), Cello (an early browser) Bookmarks or a Mosaic.ini file.

By checking the "Append" option in the file menu, URLs from several sources may be combined.

Double-clicking on a list item, or selecting the "Transfer" button, will cause the URL and its associated comment to be transferred to the active text window at the cursor position.


Transferring URLs from the URL Assistant List

URL Assistant's list box is used to hold URLs which may be selected for transfer to your HTML files.

The URLs that fill the list box can come from HTML Assistant URL files.  They may also be extracted from HTML documents (Netscape Bookmark files are HTML documents), Cello (an early browser) Bookmarks or a Mosaic.ini file.

By checking the "Append" option in the file menu, URLs from several sources may be combined.

The URLs in the list box may be saved as an HTML Assistant URL file, or they can be automatically reformatted in HTML and saved as an HTML file.

By default, when the list box is filled, you will see both the URL and its associated comment or clickable text.  You can choose an option from the "View" menu to see only the URLs, only the comments, or both.

Double-clicking on a list item, or selecting the "Transfer" button, will cause the URL and/or its associated comment to be transferred to the active text window at the cursor position.

By selecting the appropriate option from the "Transfer Mode" menu, you can cause only the URL, only the comment, or both to be transferred.

You also have the option to automatically convert the URL and its comment to HTML code as it is transferred.

Other options in the "Transfer Mode" menu can cause the transferred item to be removed from the list, and have a newline added when it is transferred.

Note that the "Transfer Mode" and "View" options are independent. That is, you can choose to display only comments, and can transfer URLs and comments.


The Preview Option

If the "Preview" check box, next to the "Transfer" button, is selected, you will have an option to preview or edit any text to be transferred before the transfer actually takes place. After previewing the text, you will be able to cancel the transfer if you wish.


User Selected Text as Comment

The "Transfer Mode" menu has an option for "User selected text as comment".  If this is selected (checked), regardless of what other options in the "Transfer Mode" menu are selected,  the URL will be converted to HTML code with the user selected (highlighted) text in the active document as the clickable text.


Deleting Items From the List

Selecting one or more items from the list and clicking the "Delete" button will cause them to be deleted from the list.

An option in the "File" menu will permit clearing the entire list.

Clicking the "Restore" key will cause the original list box contents to be restored.


Multiple Selections

You can select multiple items from the list for transfer, or deletion, as follows:

Clicking the "Select All" button will cause all list items to be selected.

Dragging the mouse up or down the list will select a continuous group of items.

Clicking the mouse on an item, followed by holding the "Shift" key while clicking on another item, will cause the two items and all the list items between them to be selected.

Clicking while holding the "Control" key will permit multiple, but discontinuous, items to be selected.


Searching the List

Clicking the "Search..." item on the menu bar will cause the search window, shown below, to appear.

URL Search dialog box

The search window, like the URL Assistant window, permits various options for viewing and searching list items.

You can select key words to search for in the list, and the resulting selections will appear in the search window's list box.

The view and search options are independent. For example, you can search for key words in the comments field even though the comments field might not be displayed.

Clicking on the "Accept" button will close the search window and cause the list items in the search window's list to be transferred to the URL Assistant list, replacing the items that are already there. URL Assistant's full list can be brought back by selecting the "Restore" button.

Using the "Cancel" button will close the search window without transferring its list.


Table Assistant Tool Bar Overview

The Table Assistant tool bar aids  the user in working with the HTML 3 tags which have been proposed for creating tables and are supported by Netscape and other browsers.

To access the Table Assistant tool bar, a document edit window must be open.

To see the Table Assistant tool bar,  select the "Table tool bar" option from the "Special" menu. You can also press the F11 key or click the Table button on the main tool bar.

Table Assistant tool bar

The tools on the Table Assistant tool bar respond to both the right and left mouse buttons. The result of clicking a tool depends on which mouse button you use.

•	Left-click to insert the tool's HTML code into your document. For instance, if you left-click the Data button, HTML Assistant Pro inserts the <TD> </TD> tag pair into your document.

•	Right-click to see a dialog box that lets you set options for the tool. For example, if you right-click the Data button, you see the Table Data Tags dialog box.

Each of the four table-related dialog boxes  lets the user supply information about the various components which make up HTML tables.   Namely information which applies to the table as a whole, as well as information defining the formats of the data, headers, and rows of the table is included. Once the user has filled in the information as needed, the "Apply" buttons can be used to cause the corresponding HTML tags to be inserted into the current document.

If the user plans to create several tables, the button with the arrow on it can be clicked to cause the dialog box to collapse to display only the Close and Apply buttons. This allows the user to keep the dialog box window active without taking up too much screen space. The collapse button is a toggle and clicking it a second time will cause the window to return to its former size.

As an alternative to filling in all these options manually, the user can select the "Create a table template" button on the Table dialog box. This displays a new window with a few minimal options to enable the user to create a basic table with n rows and m columns.  There is no need to go through the lengthy process of filling in all the information normally required by the Table Assistant. Once the template has been created and inserted in the user's document, it can be edited to better suit the user's needs.


Table

Left-click this button to insert the HTML code for a table into your document. Right-click it to see the Table Tags dialog box.

Table Tags dialog box

This dialog box contains options which apply to the table as a whole. By default, a field for the table "caption" is the only option visible to the user. Click the arrow button to see additional options. These options allow the user to provide more detailed information about the appearance of the table, including its width on a page, the background color, the size and color of the borders, as well as how the cells are spaced. These fields all have default values so it is not necessary for the user to modify them unless a different appearance is desired.

To add colors to a table, use the color controls on the right side of the dialog box. Click one of the four Select buttons to choose a color for the table background and three borders. Clicking Select produces the Color dialog box.

In addition to colors, the Table Assistant can specify a graphic image as a table background. Enter the URL for the image in the Background Image field or click Browse to choose a file.

Once the user has filled in whatever fields are needed, the HTML tags can be inserted into the current document by clicking the "Apply Table tags" button. The tags are inserted at the cursor position, so the user should be sure the cursor is at the desired location.


Row

Each HTML table consists of a number of rows. Left-click this tool to insert the HTML code for a table row into your document. Right-click it to see the Table Row Tags dialog box.

Table Row Tags dialog box

The options on the left side deal with how the rows are aligned horizontally and vertically. The  other options are for adding colors or graphic images. These options are identical to the ones for the table as a whole, except they apply to a single row.

Once the user has set these options as desired, the "Apply Row tags" buttons is used to cause the corresponding <TR> ... </TR> HTML tags to be inserted into the current document. The tags are inserted at the cursor position, so the user should be sure that the cursor is at the desired location. Note that a <TR> tag can only appear within a <TABLE> ... </TABLE> tag pair.


Data and Header

Each row of a table is made up of some number of cells to hold the table's data. The Data tool is used to define these cells. Header cells are similar to data cells except that the text is usually highlighted in some manner. Header cells are intended to appear at the top of columns or to the left of rows, although this is not required.

Left-click the Data or Header tool to insert the appropriate HTML code into your document. Right-click to see the Table Data Tags dialog box or the Table Header Tags dialog box. Aside from the title bar, the two dialogs are identical.

Table Data Tags dialog box

The options on this dialog box specify the characteristics of a data or header cell, such as the alignment of the text within the cell, the number of columns and rows it spans, and its contents. Other options are for adding colors or graphic images. These options are identical to the ones for the table as a whole, except they apply to a single data or header cell.

After the user has set the options as desired, the "Apply" button is used to insert HTML tags defining a single data cell with these characteristics. These tags are <TD> ... </TD> for normal cells and <TH> ... </TH> for header cells. They are inserted at the current cursor position and the user should insure that the tags are inserted within a proper <TR> ... <TR> pair. The Apply button can be pressed as many times as needed; each time it is pressed another TD or TH tag set is inserted with the characteristics as defined in the Table Assistant window.

For more information, see Creating Tables.


Form Assistant Tool Bar Overview

The Form Assistant provides a set of tools to aid the user in working with the HTML 2 tags defined for creating forms.

In order to use the tools provided on the form tool bar, a document edit window must be open.

Selecting the "Form tool bar" option from the "Special" menu, pressing the F8 key, or clicking the Forms button on the main tool bar, will bring up the Form Assistant tool bar. This is floating palette, shown below, with a set of seven buttons used to create different form components.

Form Assistant tool bar

As with other tool bars in HTML Assistant Pro, the form tools respond to both the right and left mouse buttons. The result of clicking one of these tools depends on which mouse button you use.

•	Left-click to insert the tool's HTML code into your document. For instance, if you left-click the Form button, HTML Assistant Pro inserts the <FORM> </FORM> tag pair into your document.

•	Right-click to see a dialog box that lets you set options for the tool. For example, if you right-click the Form button, you see the Form  dialog box.


Form

All form elements are enclosed in <FORM> ...</FORM> tags. Left-click the Form button to insert these tags in your document. Right-click the Form button to see the Form dialog box, show below.

Form dialog box

The two text fields in this window are used to define the METHOD and ACTION attributes of a <FORM> tag. Clicking on the Apply button inserts a set of <FORM> ... </FORM> tags into the document at the current cursor position with the METHOD and ACTION attributes set as defined in the window.

The button with arrow on it is used to collapse the window so that only the Close and Apply buttons are visible. This allows the user to leave the Form window active without taking up too much screen space.

The "Create a form template" button brings up a separate window in which the user can easily specify the components of a "canned" form to use as the basis for designing a form. This window is shown below.

Form Assistant dialog box

The user can select which of the six types of form elements will appear in this form template. Clicking OK inserts a <FORM> tag pair along with any other tags needed to represent the selected form elements.


Text Box

Left-click this button to insert the HTML tag for a text box control into your document. Right-click this button to see the Text Box dialog.

Text Box dialog box

This window is used to specify the characteristics of a text box form element. This type of element is the same as that used in typical dialogs, such as the print dialog. It is a field in which the user can enter a line or lines of text. The user can optionally specify a caption to be associated with the form and if the advanced options are displayed, the placement of the caption can be specified as well. The advanced settings give the user control over other characteristics of the text box as well, such as the size of the text box and how the text is formatted within the box. If "Single line" is selected, the Apply button inserts the <INPUT TYPE="TEXT"> tag along with attributes representing the options that are selected in the Text Box window. If  "Multiple line" is selected, the Apply button inserts a <TEXTAREA> ... <TEXTAREA> tag pair.


Radio Button

Left-click this tool to insert the HTML code for a radio button into your document. Right-click to see the Radio Button dialog box.

Use this dialog box to define the characteristics of a radio button. The advanced options, if visible, allow more flexibility in how the radio button is formatted, such as the position of its caption and whether or not the button is initially selected. The Apply tag inserts a <INPUT TYPE="RADIO"> tag into the current document, along with attributes reflecting the options in the window.

Radio Button dialog box


Check Box

Left-click this button to insert the HTML code for a check box into your document. Right-click to see the Check Box dialog.

Use this dialog box  to define the characteristics of a check box. The advanced options, if visible, allow more flexibility in how the check box is formatted, such as the position of its caption and whether or not the check box is initially checked. The Apply tag inserts a <INPUT TYPE="CHECKBOX"> tag into the current document, along with attributes reflecting the options in the window.

Check Box dialog box


Selection List

A selection list is a typical scrolling list, such as a list of files displayed in a file open dialog. To insert the HTML code for a selection list in your document, left-click the Selection List button on the Form tool bar. Right-click the button to see the Selection List dialog box.

Selection List dialog box

The most important area of this window is the section labeled "List Items". This displays the items the user wants to appear in the selection list. There are buttons for adding items to this list, modifying them, and deleting them. The list can be given an optional caption or "instruction". If the advanced options are turned on, additional characteristics can be defined, including the height of the list and whether or not the user can select multiple items from the list at one time.

Once the list has been defined, clicking on the Apply button causes a <SELECT> ... </SELECT> set of tags to be inserted into the current document.  Bracketing <OPTION> tags corresponding to each list item that has been defined.


Submit and Reset

Every form a Web page designer creates will most likely have a "submit" and "reset" button. The submit button is used to submit the form data for processing.

Left-click the Submit Button tool bar to add the HTML code for a submit button to your document. Right-click the tool to see the Submit Button dialog box.

Submit Button dialog box

Insert the name assigned to the submit button and whether or not a line or paragraph break should be inserted after the button. This later option is available only if "Advanced" is selected.

Clicking Apply causes a <INPUT TYPE="SUBMIT"> tag to be inserted at the current cursor position.

The "Reset Button" tool opens a window which is identical to the "Submit Button" window except the default caption is "Reset" instead of "Submit". This is used to insert a Reset form element which resets the fields defined in a form back to their default contents.


Edit/Build URL Files

Selecting this item from the "URL" menu permits you to edit and combine commented URLs  (URL is an abbreviation for Uniform Resource Locator, the formal name for a Web address) from different sources.

For example, you may quickly combine selected URLs from HTML Assistant Pro URL files with other URLs automatically extracted from Mosaic menus and Netscape bookmarks.

While perusing news groups, mailing lists, etc., you might cut and paste URLs into text files (with Notepad or HTML Assistant Pro) and later combine these with other files.

Of course, once the URLs and comments from various sources are loaded into the editor's list boxes they may be edited and supplemented with new URLs that are manually typed in.  If they are saved as HTML Assistant Pro URL files (the default type) they can later be loaded into an edit window for more extensive editing and reorganization.

You may also convert and save any combination of URLs from any of these sources into a Cello Bookmark file (Cello was one of the first browsers available).


Operation of the URL Editor

When the "Edit/Build URL Files" option is chosen, a window with two list boxes and two text boxes, and some control buttons pops up.

When a file is loaded, any necessary conversions or extractions are performed, and the list boxes are filled with the URLs from  the file (the files themselves remain unchanged).  One list box contains a list of all the URLs found in the selected file.  The other list box, in corresponding positions in the list, contains comments or descriptions of the URLs in the first box.

You may create your own files  or add to the contents of existing files, by clicking the "Add New URL" button and entering URLs and Comments into the corresponding text boxes.  When an entry is complete use the "Accept New URL" control button to save the new data into the list boxes.

Clicking on a data item in either list box causes the URL and its associated comment (if any) to be copied to corresponding text boxes.  The contents of the text boxes may be edited and the changes can be saved.  Clicking the "Accept Edited Text" button makes the changes part of the file.  Saving the file will make them permanent. You may add and delete URLs and comments by clicking the appropriate control buttons.


About Netscape (and other browsers') "Bookmark" files

Netscape bookmark files are ordinary HTML files that contain additional information for use by Netscape, such as the date that the bookmark was saved.

Other browsers may also use the same, or a similar scheme (look for a file in the browser's directory hierarchy with a name like "bookmark.htm").  In those cases, the remarks about Netscape bookmark files, below, may apply to them as well.

You can use the HTML Assistant Pro URL Editor to extract the URLs from your Netscape (or, possibly, another browser's) Bookmark file(s) so that you can edit and combine them with URLs from other sources.

Simply use the URL Editor's File menu's "Extract URLs from HTML file..." option.  This will bring up a file selector dialog.  Simply find and select the Netscape Bookmark file, usually called "bookmark.htm", that you want to edit.

This will bring the URLs and associated text or comments into the URL Editor's list boxes, so that you may work with them.


Combining Files

Files may be combined by selecting the "Append" option button (displayed between the two list boxes) when a file is to be opened and there is data already in the list boxes.  The new data will be appended to the existing data.

Files are saved as HTML Assistant Pro URL Files unless the "Save as Cello Bookmark File..." option in the "File" menu is selected.


Direct Conversion of Files to HTML Text

By selecting the "Autoconvert File to HTML" option in the "URL" menu, HTML Assistant Pro permits you to automatically convert certain files that contain URLs (along with  optional comments or descriptions) directly to HTML text.  It will place it in a new HTML Assistant Pro text editing window.  This is a quick and easy way to build HTML files for editing, testing or browsing.

When a file type is selected (from the popout sub menu) you will be presented with a file selector box from which you may select a file to convert (or you may cancel the operation).

As soon as a file of the appropriate type is selected, the conversion process begins. In a few seconds the conversion is complete.  The URLs that were found in the file are now properly converted to HTML text and are separated by paragraph marks.  The URLs are automatically inserted into a new text window for further editing or testing.

 You can elect to convert data in the following types of files to HTML :

Cello Bookmark Files (*.bmk files)

HTML Assistant Pro URL Files (*.url files)

Mosaic Initialization Files (*.ini files)

NOTE: Netscape bookmark files are already HTML files. This may also be true of the bookmark files created by some other browsers.


Cello Bookmark files (*.bmk files)

Cello Bookmark files are used by the Cello browser for saving URLs so that browsed documents may be revisited.  They have their own format and their file names usually have the suffix ".bmk".


HTML Assistant Pro URL Files (*.url files)

HTML Assistant Pro URL files are text files containing URLs and, possibly, descriptions or comments.  Each record, or line, in the text file contains a URL optionally followed by a comma (,) and a description.

An uncommented line looks like this:

http://info.cern.ch/example.html

A commented line would look like:

http://info.cern.ch/example.html,Sample Page

Because HTML Assistant Pro can automatically convert these files into an HTML text document, they make an excellent way to store interesting URLs for later perusal.

If, for example, while browsing news groups, mailing lists or the World Wide Web itself,  the URL for an interesting looking home page is presented, you can simply Copy the URL from the document and save it into a text file using Notepad or HTML Assistant Pro.  The URL should be saved WITHOUT quotation marks.

If you wish, you may enter a comma (,) after the URL (but before the "Enter" key is pressed), followed by a description or comment.   The descriptive text will appear as the "live" or "clickable" item(s) in the HTML file when viewed by a browser.  If you do not enter a comment, HTML Assistant Pro will add a copy of the URL (for display as the "live" selectable item) to the HTML file at conversion time.

Just be sure you press the "Enter" key at the end of each line.  Make sure that the URL and its comment (separated by a comma) appear on one logical line. It may look like two or more lines if the editor window is narrow.  As long as the "Enter" key was pressed at the end of the URL-Comment combination, the item is a single record and will be processed properly.


Mosaic Initialization Files (Mosaic.ini)

The early Mosaic WWW browsers used an initialization file with the name, "Mosaic.ini" for storage of setup parameters.

Included in this file are lists of menu items that contain descriptions and URLs that can be executed by Mosaic when the descriptions on the menus are selected.

Also included in the file is a "Hot List" of user selected URLs gathered during browsing expeditions on the Web.  These do not have descriptors associated with them.

The URLs in Mosaic initialization files are what is converted to HTML text by HTML Assistant Pro.  If the URLs come from menu items their associated menu captions are displayed as the selectable on screen text.  "Hot List" items are displayed with a copy of the stored URL as the on screen text.


Overview of the Image Map Editor

An image map is an interactive graphic image. Image maps let the user navigate your Web pages by clicking hot spots on a graphic.

HTML Assistant Pro has a tool that automates the process of creating image maps. The Image Map Editor lets you work directly on the graphic image that underlies the map. You can define clickable "hot spots" on the graphic using simple drawing tools. When you're done, the Editor creates the HTML code for the map and inserts it in your document.


Starting the Image Map Editor

To see the Image Map Editor, choose Image Map from the Special menu. Alternatively, you can click the Map button on the secondary tool bar or press Ctrl-F6.

Image Map Editor

The large, square area on the right side of the Editor is your work area for defining the hot spots on the map. Each hot spot has an associated URL. Together, these URLS appear in the list on the left side of the Editor display.


Creating an Image Map

To create an image map using the Image Map Editor:

1.	Display the Editor. See Starting the Image Map Editor for details.

2.	Load the graphic image for the map into the Editor. Click the Browse button and choose the image using the dialog box that appears.

3.	Draw the first hot spot on the image. Click one of the three drawing tools in the center of the Editor display: the circle, rectangle, or polygon tool. To draw a circle or rectangle, click a spot on the image, drag to form the shape, and release the mouse button when the shape is the size you want. To draw a polygon, click the endpoint of each line that forms the polygon.

4.	If necessary, move the shape you just drew. If the shape isn't exactly in place, you can double-click it and drag it to a new location.

5.	Assign a URL to the hot spot area. Type the URL in the field at the bottom of the Editor display. Alternatively, you can specify an HTML file as a link. Click the Browse button and choose an HTML file using the dialog box that appears.

6.	Repeat steps 3 through 5 for the remain hot spots on the image map.

7.	Enter a name in the Map Name field. This name associates the <MAP> and <IMG> tags that make up the image map. The name can be anything, although descriptive names are best.

8.	Check the Generate IMG Tag box. This control generates the associated <IMG> tag for the map data. If you don't see this check box, click the arrow button at the upper right corner of the Editor window.

9.	Click the Create Map button.

HTML Assistant Pro generates the HTML code for the image map and places it in your document.


What is the Automatic Page Creator?

The Automatic Page Creator supplied with HTML Assistant Pro permits very rapid creation of HTML text pages for use with WWW browser programs.   Minimal knowledge of HTML is required, and an attractive screen with your own selected hypertext links can be created in a matter of seconds.

For those who have access to HTML servers, this makes it quite easy to create pages for others to view.

For active collectors of information on the World Wide Web, the Automatic Page Creator (as well as HTML Assistant Pro's other features) makes it possible and easy to organize links to information in ways that make sense to you.  You can select links from different pages and files and combine them into a single page with headings and descriptions of your choice.

You can create  HTML  pages on your local drive and access them from your own "Home Page" (which is simply another HTML page you created and keep on your hard drive).  By making effective use of the File Editor/Builder, you can organize links to WWW data by subject, date or just about any way you like.  It is so easy to create a page containing the information that you want.  This makes it easy to create presentation pages on any topic for which you have collected links.


Starting the Automatic Page Creator

The easiest way to start HTML Assistant Pro's Automatic Page Creator is to click on the button with the picture of the lightning bolt that is on the right hand end of the tool bar.

The Automatic Page Creator may also be started from the "URL" menu by selecting the "Automatically Create a Browser Page..." item.

Using either option will cause the Automatic Page Creator's screen to appear.

If you start the Automatic Page Creator by accident, simply click the "Exit" button and it will close.


Using the Automatic Page Creator

The Automatic Page Creator's screen, shown below, includes a box with a few instructions, some text boxes into which you may type information that you want to appear on your new browser page, and some button controls and check boxes.

Automatic Page Creator

For the most part the function of these controls is made clear by their adjacent descriptive labels.

The Page Creator uses the information that you enter to create a browser screen.  The screen will include a title, an in-line image, a heading, a subheading, text, followed by a list of  "clickable" URLs.

The list of URLs in the HTML page produced by Page Creator comes from a URL file -- either a previously created file, or one that can be created while you are using the Automatic Page Creator.  If you want to have URL links automatically inserted into your file you must provide an HTML Assistant Pro URL file for that purpose.

Clicking the large button with the lightning bolt on it will cause the HTML text for your screen to be created in an empty text box, and the Page Creator screen will disappear.

It's a good idea to create your own HTML pages and test them with a browser until you understand (and see) what each textbox and button on the Page Creator screen does.  You will have to save the text as a file before you can test it.

If you do not want to keep the file, close the window with the HTML text in it and try again.   Saving the new text to the same file as you did before (usually something like "TEST.HTM") will eliminate a collection of unwanted files.


Building HTML Displays by Appending New Pages

More complex HTML pages can be built by taking advantage of the Page Creator's "Append to previous page" feature.

The Page Creator keeps an internal copy of the last page it created.  When the "Append..." check box is selected it creates a new page that consists of the stored last page plus the new one.  It copies the combined result into a new text window.

This means that if you edit the text box with the previous page in it, and then choose to append a new page, the edited contents of the text box will not appear when the new page is added to the old.  The original, unedited text will be used, and the new page will be appended to that.  This is necessary to ensure that the HTML markings on the original text remain syntactically correct so the new text can be properly inserted.

Because it ignores blank (empty) text boxes, Page Creator permits you to create your own page design by adding new material to the contents of the page it previously created.  (Text in the Title text box is ignored when a page is appended -- the original title is always used.) This means, for example, that you could create a page with headers and a list of URLs, and by appending a page with only descriptive text, end your browser page with that text.  You can append pages as many times as you like.

If you do not like the result of an append page operation you may bring up the Page Creator window and use the "Undo last append" command button to remove it.

Remember that each Create, Append or Undo operation opens a new text window.  For that reason you should periodically delete the windows that are no longer useful.  This keeps the screen uncluttered and conserves Windows resources.  While this is sometimes inconvenient, it ensures that you have an opportunity to review and save your work at any stage.


Using a WWW Browser for Testing

You can display your HTML annotated file without leaving HTML Assistant Pro.  Any browser that will permit the use of the name of a file on a local disk as a startup file may be used for viewing.

When you install HTML Assistant Pro, it examines your system for existing browsers. It maintains a list of available browsers which you can modify by selecting the "Select Test Browser(s)" option on the "File" menu. The same option lets you specify a default browser for testing. If you designated a default browser before installing HTML Assistant Pro, it becomes the default for testing.

To test the current document, click the "Test" button, the one with the eye. HTML Assistant Pro opens the default browser and displays the current document. Right-click the "Test" button to select a browser before viewing the document.

The testing function uses the last saved version of your file. If your file has changed since you saved it last, you will be given an opportunity to save it before testing.

Alternatively, you may select the "Autosave Before Testing" feature in the "Options" menu, and your file will be saved automatically.

The "Test" button or menu option will be disabled if the active file is a new file and you have not yet saved it.  You must always save a new file at least once before you can test it.

To test the document, HTML Assistant Pro simply runs the program you designate as your test browser, with the full path and file name of the active edit file in the command line.  Therefore, for the test to work, the browser you use must be able to use a local file specified on the command line as its startup file.

You also need to be concerned with  where your test program expects to find configuration files, initialization data, etc.  We have sometimes found it necessary to copy some or all of these files to HTML Assistant Pro's home directory or to the directory where the files to be tested reside.

Microsoft Internet Explorer and Netscape as well as most other browsers, can be used as test programs.  You can easily try new browsers as they become available.


Using Dynamic Data Exchange (DDE) with a Browser

Use of DDE (Dynamic Data Exchange) with a test browser permits relatively smooth back and forth transitions from HTML Assistant Pro to the browser and vice versa.  It eliminates the need to close and restart the test browser each time you want to test a file.

If you are using Netscape or Microsoft Internet Explorer as your test browser, HTML Assistant Pro uses DDE to communicate with the browser once it's running. If the browser is not loaded, HTML Assistant Pro loads it.  Once your browser is loaded and you do not close it, it will not have to be reopened whenever you want to test a file.  Each time you select the item in the File menu for testing using DDE, or the "Test" button, the name or URL of the file you are testing is sent to the browser.  It becomes the active, topmost application.

With some browsers, when using DDE, your browser may not always refresh itself if your file has changed.  That is, changes in your HTML text may not always be immediately seen when you invoke the browser.  If that happens use the browsers "Reload document" (or equivalent) option to ensure that you are viewing the latest saved version of your HTML file.

To set the DDE option, select Advanced from the Options menu. You see a sub-menu of items that let you control how HTML Assistant Pro communicates with the browser on startup and through DDE.  In either situation, you can pass the browser the file name or URL of your document..

As other browsers permit DDE, HTML Assistant Pro's DDE capability will be updated to work with them.


Overview of Publishing

Up to this point, you've learned how to use HTML Assistant Pro to develop HTML documents. In general, when you're creating and refining HTML documents, you work on your local system. However, once the documents are finished, it's time to put them online. It's time to publish them as Web pages.

The term publish means to transfer your HTML documents from your local system to a remote computer called a host. The host lets other users access your Web site. HTML Assistant Pro has several features that make the publishing process quick and easy. These features include:

•	A Quick Publish option. Use this feature to automatically publish Web pages with the click of a button.

•	The Site Assistant. This powerful file manager and communication program makes it easy to set up and organize your Web site.

•	Integrated FTP (file transfer protocol) support. FTP is the standard method for transferring files on many Web hosts.

Note: In addition to the above information, you need to know some basic details about how your computer connects to the Internet. For instance, if you access the Internet over a modem, you need to know how to initiate a connection using the Dial-Up Networking feature of Windows 95. The following sections assume that your system connects properly to the Internet. If you have questions, talk to your system administrator or Internet service provider.


Getting ready to publish

During the publishing process, HTML Assistant Pro communicates with the host computer over the Internet. To connect with the remote host, HTML Assistant Pro needs three pieces of information:

•	The address of the host. This is a standard Internet address such as www.myhost.com or ftp.myhost.org.

•	Your account name on the host. This is the name you use to log on to the host and access your remote directory.

•	The password for your account. The password keeps your account safe from other users.

Once you have this information at hand, you can use the following setup procedure to prepare for publishing.

To set up your host and account information:

1.	From the Publish menu in HTML Assistant Pro, choose Setup and then choose Define Remote Sites from the sub-menu that appears. You see the Site Definition dialog box.

Site Definition dialog box

2.	Enter a descriptive name in the Site Name field. This name can be anything you like; it's purely for reference. For example, if you're setting up a company Web site, you might enter the name "My Company's Home Page."

3.	Enter the address of the host in the Site Address field. This is the address provided by your host, for example: www.myhost.com.

4.	Enter your account information in the Username and Password fields. The Username is the account name you use to log on to the remote host. The Password gives you access to the account.

5.	If necessary, specify a directory in the Web Root field. This directory is the one that contains the HTML documents and other files for your Web site. In many cases, this directory is immediately inside the home directory of your account. If so, all you need to enter is the name of the directory without any other path information. For example, you might keep your Web files in a directory called html that's just inside your home directory. You can also enter an "absolute" directory specification such as /home/usr/george/html.

6.	Click Exit and Save Changes.

Once you've provided this basic information, you can publish a Web page. The next section describes a quick way to publish a page.


Quick Publishing

Once you've completed an HTML document, you can publish it on your Web site with the click of a button. Here's how:

1.	In HTML Assistant Pro, open the HTML document you want to publish.

2.	From the Publish menu, choose Quick Publish. The Quick Publish dialog box appears. It shows the file specification for the current document on your local system, the location and name of the document on the remote host, and the name of the host itself.

3.	If you want to publish the document on a different host, click the arrow button next to the host name and choose a new item from the list that appears.

4.	Click Publish.

At this point, HTML Assistant Pro logs on to the remote host and transfers the file. The networking details will vary slightly from system to system. In any case, the result is that the current document in HTML Assistant Pro winds up on the remote host. Its name and location on the host depend on the information you provide on the Quick Publish and Site Definition dialog boxes.


Working with the Site Assistant

The Quick Publish feature offers a fast way to get a single document online. Of course, a typical Web site contains numerous HTML documents, graphics, and other files. The process of managing a Web site usually involves a lot of file management.

HTML Assistant Pro has a sophisticated tool for managing the files that make up a Web site. The Site Assistant display shows you files on your local system and the remote host simultaneously. You can transfer files back and forth, navigate the directory structure on either system, delete or rename files, and perform other tasks.

To work with the Site Assistant, choose Site Assistant from the Publish menu.

Site Assistant

The main part of the Site Assistant window has two directory lists. The one on the left shows files on your local system, the right side shows files on the remote host.

To transfer a file from the local system to the remote host:

1.	Select the host you want from the Site Name list. The contents of the Username, Address, and Password fields change to show the appropriate information for the host you selected. You provide this information on the Site Definition dialog box, as described in a previous section.

2.	Click the Connect button. HTML Assistant Pro logs on to the host.

3.	Select the file you want to transfer in the list on the left. If necessary, navigate through the directory structure in the list. You can click a folder to move down one level in the directory hierarchy. Click the Up Dir button to move up a level.

4.	If necessary, move to the host directory where you want to place the file. Select the appropriate folder in the right-hand display.

5.	Click the arrow button that points from the local system to the remote host. The arrow on this button points right.

HTML Assistant Pro transfers the file to the remote host. You can use a similar procedure to transfer files in the opposite direction. Select the file in the list for the host, select a directory on the local system, and click the arrow button that points left.


In addition to the features described above, the Site Assistant contains the following controls:

•	Close. Click this button to close the Site Assistant window.

•	Connect/Disconnect. This button establishes a connection to the remote host and breaks it when you're done working.

•	Local Web Root. This button displays a dialog box that lets you specify the location of the Web files on your local computer. By default, this location appears in the Local Site field. The files in the list on the left side of the Site Assistant are contained in the Web Root directory.

•	Define Sites. Click this button to display the Site Definition dialog box, which lets you set up account and directory information for remote hosts.

•	Strip Web Root on upload. Check this box if you want to remove local directory references from the HTML documents you transfer to the remote host. HTML Assistant Pro examines the text in a document to look for instances of the Web Root directory specification. It removes the ones it finds.

•	Text transfer. Check this box if you're transferring ASCII text files. Clear it if you're transferring binary files such as graphics or executable programs.

•	Hide UNIX dot files. Check this box if you don't want to see UNIX files that begin with a dot. These are normally "hidden" files that many users want to ignore.

•	Current Local Directory. You can use this field to specify the directory that contains files that you want to upload to the host. By default, the name is the one you specify using the Local Web Root button. If you use the navigation controls to move to a different directory, its name appears in this field.

•	Current Remote Directory. You can use this field to specify a directory on the remote host. By default, this directory is the one you specify on the Site Definition dialog box. If you use the navigation controls to move to a different directory, its name appears in this field.

•	Up Dir. Click this button to move up one level in the directory hierarchy of the local or host system.

•	Ch Dir. Click this button to display the Change Directory dialog box. Enter a new directory specification on the dialog box that appears.

•	Mk Dir. Click this button to create a new directory on the local or host system.

•	Delete. Click this button to remove a file or directory on the local or host system.

•	Rename. Click this button to assign a new name to a file or directory on the local or host system.

•	Refresh. Click this button to read the contents of a directory and display them. This control is useful for querying a remote directory that may have changed since you logged into it.


Working with Web Root Directories

The Web root directory is the home directory for the files that make up a Web site. The organization of the files and subdirectories within the Web root is up to the site designer. For example, you might put all your HTML documents in the root directory itself. Furthermore, you might create a sub-directory called images within the root directory. You could use this sub-directory to hold all the graphic files for your Web site.

When you're developing a Web site, the root directory is usually on your local system. For example, you might keep your HTML documents in a directory called c:\webroot. This is your local Web root directory. Graphic images could go in c:\webroot\images.

When publishing time comes, you transfer your Web files to a remote host. Naturally, the Web root directory on the host will be different than the local root. On the remote host, you might store HTML files in /home/usr/george/html and graphic images in /home/usr/george/html/images.

To keep housekeeping chores to a minimum, most Web designers make the Web site on the host a mirror image of the one on the local system. In other words, the directory and file structure is identical on both computers. The only difference is the name of the Web root directory.


Specifying Web Root Directories

HTML Assistant Pro lets you specify two root directories for a Web site, one on your local system and one on the remote host. You specify the root directory on the host using the Web root field on the Site Definition dialog box.

To specify the local Web root directory:

1.	From the Publish menu, choose Setup and then select Set local web root.

2.	On the dialog box that appears, enter the directory where you store Web files on your local computer. You can type the directory specification in the text box or choose a directory using the navigation controls.

3.	Click OK.


Root Directories and File Transfers

Web root directories come into play when you transfer files using the Site Assistant or the Quick Publish feature. By default, both tools upload files to the host's root directory, the one you specify using the Site Definition dialog box. The Site Assistant shows you a list of files in both the local root directory and the one on the remote host.


Inserting and Deleting the Local Web Root

Web site maintenance means coordinating two sets of files on different computers. Many Web files point to other files through hypertext links or standard file references. The site maintainer needs to make sure that a file reference on the local system works after publication on the host.

For example, an HTML document on your local system might refer to a graphic image in the file c:\webroot\images\pic.gif. This reference would work fine locally, but it would cause problems on the host system, which uses a different Web root directory.

HTML Assistant Pro has a couple of tools to help you make sure that file references work on both systems. One tool is useful during the development process on your local system. The other comes in handy when it's time for publication on the host.

During development, you can easily add the name of the local Web root directory to your document. From the File menu, select the Insert Web Root option. HTML Assistant Pro inserts the appropriate specificationsuch as c:\webroot\ in your document. This tool helps you create reliable file references on your local system.

There's another option that produces the opposite effect. It strips the name of the local Web root directory from the files you upload.

Both the Site Assistant and the Quick Publish feature have a field labeled Strip Web root on upload. If you check this box, HTML Assistant Pro searches the text of a document and removes references to the local Web root. For example, c:\webroot\new.html becomes just \new.html. Note the slash before the file name.

Used in conjunction, these two features can help you synchronize file references on both the local and remote host systems.


Hints for Maintaining Compatibility

Many host systems on the World Wide Web run the UNIX operating system. When you transfer files between UNIX and Windows 95, you can run into compatibility problems. In many cases, these problems have to do with the file naming conventions used by both systems. These conventions include:

•	Case-sensitivity. UNIX is case-sensitive; Windows 95 isn't.

•	Directory separation. Windows 95 lets you separate directories using the foreslash (/) or the backslash (\) character; UNIX requires the foreslash. (Note that Site Assistant interprets both slash characters as the same thing.)

For best results with your Web documents:

•	Use lowercase characters for file and directory names.

•	Use the foreslash to separate directories.

Note: When you transfer a file to a remote system, the Site Assistant automatically changes the file name to lower case.


Overview of HTML Reference

This section provides a complete reference to the HTML tags supported by HTML Assistant Pro. This includes the HTML extensions which have been introduced by Netscape and Microsoft, as well as HTML 3.0 tables.

Since HTML is hierarchical in nature, with elements being nested inside other elements, it is important to identify where an element can be used, and not just how it is used. This is provided in the descriptions below.


<!-- ... -->

Comments can be included in an HTML document by surrounding the text with <!-- and -->. All text occurring between these two delimiters will be ignored by the HTML browser. Comments can appear anywhere text would normally be allowed.

Example:

<!-- Created using HTML Assistant Pro -->


<HTML> ... </HTML> -- The HTML Document

Can contain:	HEAD, BODY

Although not strictly required at present, an HTML document should always be enclosed by this pair of tags.

Example:

<HTML>
<!--The rest of the document, including all elements, appears here -->
...
</HTML>


<HEAD> ... </HEAD> -- Document Information

Can contain:	TITLE, BASE, ISINDEX, NEXTID, LINK, META

Can be inside:	HTML

This element encloses the "head" of the HTML document. The head contains general information about the document and is not displayed when the page is rendered. A number of elements can appear in the head, in any order, but only the TITLE element is required.

Example:

<HTML>
<HEAD>
<!-- HEAD elements go here -->
...
</HEAD>
<!-- The rest of the document goes here -->
...
</HTML>


<TITLE> .. </TITLE> -- Document Title

Can contain:	characters only

Can be inside:	HEAD

This element specifies the title of the document. Every HTML document must have exactly one of these elements, accurately and concisely identifying the document. It does not effect how the document is rendered, but instead is normally used as the title of the window in which the document is displayed.

Example:

<HTML>
<HEAD>
<TITLE>Herbert D. Langley's Home Page</TITLE>
<!-- Other HEAD elements go here -->
...
</HEAD>
<!-- The rest of the document goes here -->
...
</HTML>


<BASE...> -- Base URL

Attributes:	HREF="..."

Can be inside:	HEAD

An optional element which specifies the base URL of the current document. It is used to help evaluate any relative URLs which are referenced in the document. This allows a document to be on one machine and the documents which it references using relative URLs to be on another. If the BASE element is absent, the browser assumes relative URLs identify documents on the same machine as the main document.

Example:

<HEAD>
...
<BASE HREF= "HTTP://host.somewhere.org/~herb/home.html">
...
</HEAD>


<ISINDEX> -- Searchable Document

Can be inside:	HEAD

This optional element identifies the parent document as a gateway script that allows searches. Its presence informs the browser program that the document can be examined using a keyword search, and that the browser should query the user for a search or query string.

Example:

<HEAD>
<ISINDEX>
...
</HEAD>


<NEXTID> -- Counter for Automated Editors

Attributes:	N=number

Can be inside:	HEAD

An optional element which indicates the "next" document to this one (as might be defined by a tool to manage HTML documents in series). It is not intended to be used directly by a user.

Example:

<HEAD>
...
<NEXTID N=50>
...
</HEAD>


<LINK> -- Relationship to Other Documents

Can be inside:	HEAD

Attributes:	Same as A (anchor) element

Indicates the relationship between this document and other documents or objects. It is generally used only by HTML generating tools and at present is not fully supported by any browser.


<BODY> ... </BODY> -- The Displayed Text Body

Can contain:	Hn, P, HR, DIR, DL, MENU, OL, UL, ADDRESS, BLOCKQUOTE, FORM, PRE

Can be inside:	HTML

Encloses the text and tags comprising the main body of the document. Whereas the tags contained in the header provide information about the document, the elements in the body are the document. These directly control how the document appears when rendered by a browser. Strictly speaking, text cannot appear by itself in the body; it is always part of some tag which determines how the text will appear.

Example:

<HTML>
<HEAD>
...
</HEAD>
<BODY>
<!-- The complete document body goes here -->
...
</BODY>
</HTML>


Block Formatting

Block formatting elements typically apply to whole blocks of text rather than individual characters. In addition to possibly changing font size and style, these elements may cause line breaks to be inserted or new paragraphs to start.


<BASEFONT> -- Default font

Attributes: SIZE

This tag sets the default font size for text in an HTML document. Use a style sheet or the FONT tag to override the default for particular characters.


SIZE=n

Use this attribute to define the size of the base font. The value can be between 1 and 7. 1 is smallest and 7 is largest. The default is 3. This setting provides the baseline for relative font size settings

Example:

<BASEFONT SIZE=3> Sets the base font size to 3.

<FONT SIZE=+4> Now the font size is 7.

<FONT SIZE=-1> Now the font size is 2.


<Hn> -- Headings

Can contain:	A, IMG, BR, EM, STRONG, CODE, SAMP, KBD, VAR, CITE, TT, B, I

Can be inside:	BLOCKQUOTE, BODY, FORM

Six levels of heading are defined in HTML, from <H1> to <H6>. A Heading element implies all the font changes, paragraph breaks before and after, and white space necessary to render the heading. This information is defined in the browser itself and can be changed by the user, although typically the default values are used. The H1 heading is usually a large bold-faced font, representing the top-level heading, and each subsequent heading is normally an increasingly smaller font.

Example:

<H1>Top-level heading</H1>
Here is some text.
<H2>Second level heading</H2>
Here is some more text.


<P> ... </P> -- Paragraph

Can contain:	characters, character formatting, A, BR, IMG

Can be inside:	BODY, BLOCKQUOTE, FORM, DD, LI, TD

This element is used to delineate text representing a paragraph. The closing element </P> is optional and is rarely used since a <P> implies the end of the current paragraph and the start of a new paragraph. The rendering of a paragraph is determined by settings in the browser and can be changed by the user, although the default is normally used.

Example:

<P>
This is the start of a new paragraph.
<P>This is another new paragraph.


<BR> -- Line Break

Can be inside:	A, ADDRESS, B, CITE, CODE, DD, DT, EM, Hn, I, KBD, LI, P, PRE, SAMP, STRONG, TT, VAR, TD

This tag causes a line break to be inserted in the displayed text.

Example:

This line would break<BR>right here.


<ADDRESS> ... </ADDRESS>  -- Addresses

Can contain:	characters, character formatting, A, BR, IMG

Can be inside:	BLOCKQUOTE, BODY, FORM, TD

The ADDRESS element is used to specify information such as addresses or e-mail signatures. The rendering of  address text is defined by the browser and can often be changed by the user. Typically, it is italic and may possibly be indented. A new paragraph is implied by this element.

Example:

<P>You can reach me at <ADDRESS>herb@host.somewhere.org</ADDRESS>


<BLOCKQUOTE> ... </BLOCKQUOTE> -- Quotes

Can contain:	BLOCKQUOTE, Hn, UL, OL, DIR, MENU, DL, PRE, FORM, ISINDEX, HR, ADDRESS

Can be inside:	BLOCKQUOTE, BODY, DD, TD, FORM, LI

The BLOCKQUOTE element is used to designate a block of text as a quotation or citation. Browsers can be configured to render such text in various ways, such as indenting and/or italicizing the BLOCKQUOTE contents, and more. An automatic paragraph is generated by this element. Note that BLOCKQUOTEs can be nested.


<PRE> ... </PRE> -- Preformatted Text

Can contain:	Characters, character formatting, A

Can be inside:	BODY, BLOCKQUOTE, FORM, DD, LI

This element presents blocks of text in a fixed-width (non-proportional) font, and so is suitable for text that has been formatted on screen. This element is the only element which preserves line breaks and character spacing in the original text. It can take an optional WIDTH attribute which specifies the maximum number of characters for a line. If it is not included, a width of 80 characters is assumed.

Example:

<PRE>
The following text will look
    exactly like
  this
       when rendered.
</PRE>


<HR> -- Horizontal Rule

Attributes:	ALIGN, WIDTH, SIZE, NOSHADE

Can be inside:	BLOCKQUOTE, BODY, FORM, PRE

In addition to generating a line break, this element causes a horizontal line to be rendered on the screen, usually the full width of the screen.

SIZE=n

Specifies the thickness of the rule line, in pixels.

WIDTH=n

Specifies the width of the rule, in pixels.

ALIGN=left, right, or center

Indicates how the rule will be aligned on the page.

NOSHADE

Netscape usually displays rules with a shadow appearance. The NOSHADE attribute display a rule as a solid black line.

Example:

<hr size=3 width=70% align=left noshade>


Character Formatting

Unlike block formatting elements, character formatting elements apply to individual characters. They are used to specify either the logical meaning or the physical appearance of marked text without causing a paragraph break and many render the marked text using the same format. Like most other elements, character-level elements include both opening and closing elements. The following characteristics apply to all character formatting elements.

Can contain:	A, IMG, BR, EM, STRONG, CODE, SAMP, KBD, VAR, CITE, TT, B, I

Can be inside:	A, ADDRESS, B, CITE, CODE, DD, DT, TD, EM, Hn, I, KBD, LI, P, PRE, SAMP, STRONG, TT, VAR


<FONT> -- Font characteristics

Attributes: 	SIZE, FACE, COLOR

Can contain:   characters, character highlighting, BASEFONT, BLINK, FONT, NOBR, WBR, A, BR, IMG

Can be inside: A, character highlighting, BLINK, FONT, NOBR, ADDRESS, CAPTION, Hn, P, PRE, DD, DT, LI

Use this tag to set the size, typeface, and color of text.

SIZE=n

Specifies the size of the font. The possible values range from 1 to 7 with the latter giving the largest text. Include a plus or minus before the value to make the font size relative to the current BASEFONT setting. For example, if the current BASEFONT setting is 3, use SIZE= "+1" to get size 4 text.

FACE="name [,name2[,name3]]"

Use this option to select a typeface for the text. You can include a list of  font names separated by commas. The system tries each one in turn until it finds one that's available. If none of the specified fonts are available, the system uses a default font.

Note: When you work with the Font Attributes dialog box in HTML Assistant Pro, you can specify only one font name. If you want to include additional fonts using the above syntax, you can edit the <FONT> tag in your document to include additional names after the FACE option.

COLOR=color

Use this option to set the color of the text. The color can be a hexadecimal number that specifies a red-green-blue value or a predefined color name.


<B> ... </B> -- Boldface

This causes the marked text to be rendered in bold highlighting.

Example:

HTML is <B>really, really</B> easy.

This would be rendered as:

HTML is really, really easy.


<I> ... </I> -- Italics

This causes the marked text to be rendered in an italic font.


<TT> ... </TT> -- Teletype

The TELETYPE element specifies that the marked text should be rendered in fixed-width (non-proportional) typewriter style font.


<EM> ... </EM> -- Emphasis

The EMPHASIS element indicates typographic emphasis, typically rendered as italics.


<STRONG> ... </STRONG> -- Strong Emphasis

This element marks a block of text for strong emphasis, typically rendered in boldface.


<CODE> ... </CODE> -- Typed Code

The Code element indicates an example of code and is typically rendered in a fixed-width font. Unlike the PRE element, this does not preserve line breaks and character spacing. Consequently, for large code fragments, the PRE element should be used instead of CODE.


<KBD> ... </KBD> -- Keyboard Input

The KBD element marks a block of text as keyboard input and is typically rendered in a fixed-width typewriter font.


<VAR> ... </VAR> -- Variable

Text marked with this element is intended to represent a program variable name. It is usually rendered as italic.


<SAMP> ... </SAMP> -- Sample Text

The SAMPLE element marks a block of text as a sequence of literal or sample characters. It is typically rendered in a fixed-width typewriter font.


<CITE> ... </CITE> -- Citation

This element specifies a citation and is typically rendered as italics.


<LI> ... </LI> -- List Item

Can contain:	characters, character formatting, A, BR, IMG, DIR, DL, MENU OL, UL, BLOCKQUOTE, FORM, P, PRE

Can be inside:	DIR, MENU, OL, UL

The LI tag marks an element in a list, of which there are several varieties, described below. A list element can contain characters and character formatting tags, as well as hypertext anchors. Lists can also be nested.


<OL> ... </OL> -- Ordered List

Can contain:	LI

Can be inside:	BLOCKQUOTE, BODY, DD, FORM, LI

The Ordered List element is used to present a numbered list of items. A browser indicates ordering by numbering the items, assigning them ascending numbers, letters, and so forth. Each item in a list is identified with an LI element, described below. Netscape has enhanced this element by adding several attributes; see the section on Netscape Extensions  for more details.

Example:

<OL>
<LI>This is the first item of the list. It
automatically wraps and indents when rendered.
<LI>This is the second item of the list. Note
how its number is automatically increased.
<LI>This is the third item in the list.
</OL>

This would appear similar to the following in most browsers:

1.	This is the first item of the list. It automatically wraps and indents when rendered.

2.	This is the second item of the list. Note how its number is automatically increased.

3.	This is the third item in the list.


<UL> ... </UL> -- Unordered List

Can contain:	LI

Can be inside:	BLOCKQUOTE, BODY, DD, FORM, LI

This element defines an unordered list, where each element of the list is marked by a special symbol such as a bullet. Netscape has enhanced this element by adding several attributes; see the section on Netscape Extensions for more details.

Example:

<UL>
<LI>This is the first item of the list. It
automatically wraps and indents when rendered.
<LI>This is the second item of the list. Note
how it is also marked with a bullet.
<LI>This is the third item in the list.
</UL>

This would appear similar to the following in most browsers:

•	This is the first item of the list. It automatically wraps and indents when rendered.

•	This is the second item of the list. Note how it is also marked with a bullet.

•	This is the third item in the list.


<DIR> ... </DIR> -- Directory List

Can contain:	LI

Can be inside:	BLOCKQUOTE, BODY, DD, FORM, LI

This element is used to present a list of short items containing up to 20 characters each. Some browsers may arrange the items in the list as columns across the screen instead of one on top of the other.

Example:

<H2>HTML List Types</H2>
<DIR>
<LI>Ordered<LI>Unordered
<LI>Directory<LI>Definition<LI>Menu
</DIR>

This would appear similar to the following in most browsers:

HTML List Types

Ordered	Unordered	Directory
Definition	Menu


<MENU> ... </MENU> -- Menu List

Can contain:	LI

Can be inside:	BLOCKQUOTE, BODY, DD, FORM, LI

A menu list is a list of short items, each preferably less than one line in length. The menu list style is often rendered similar to an unordered list but uses a more compact style.


<DL> ... </DL> -- Definition List

Can contain:	DT, DD

Can be inside:	BLOCKQUOTE, BODY, DD, FORM, LI

Attributes:	COMPACT

This list type is used to create lists such as would be used for glossaries, consisting of terms and accompanying descriptions. It takes a single optional attribute, COMPACT, to specify that the list should be rendered in a more compact style than normal.


<DT> ... </DT> -- Definition Term

Can contain:	characters, character formatting, A, BR, IMG

Can be inside:	DL

The term part of an entry in a definition list is identified by this tag. The text supplied should be short, consisting of only few words. The terminating </DT> is optional since it is either implied by the start of another <DT> or <DD> element or by the </DL> ending the definition list.


<DD> ... </DD> -- Definition Description

Can contain:	characters, character formatting, A, BR, IMG, DIR, DL, MENU OL, UL, BLOCKQUOTE, FORM, P, PRE

Can be inside:	DL

The description part of an entry in a definition list is identified by this tag. It should always be preceded by DT element supplying the term being described. The text supplied can be long, consisting of multiple paragraphs if needed. The terminating </DD> is optional since it is either implied by a <DT> element starting another list entry or by the </DL> ending the definition list.


Example:

<DL>
<DT>Indoor soccer
    <DD>A form of soccer played indoors,
    usually in an arena. It is popular in
    the United States and Canada.
<DT>Jai alai
    <DD>A Latin-American game like handball,
    played with a curved basket fastened to
    the arm, for catching and hurling the
    ball.
</DL>

This example would be rendered similar to the following:

Indoor soccer
A form of soccer played indoors, usually in an arena. It is popular in the United States and Canada.

Jai alai
A Latin-American game like handball, played with a curved basket fastened to the arm, for catching and hurling the ball.


<A...> ... </A> -- Hypertext Anchors

Attributes:	HREF, NAME

Can contain:	characters, character formatting BR, IMG

Can be inside:	ADDRESS, Hn, P, PRE, DT, DD, LI, character formatting

This element marks text that is the start and/or destination of a hypertext link. It accepts two attributes, HREF and NAME, one of which must be present. (Other attributes are officially defined for this element but few browsers support them and are not described here.) The text is usually highlighted in some way by browsers to identify it as hypertext link, typically underscored and in a different color. The HREF and NAME attributes are described below:

HREF="URL"

If the HREF attribute is present, the text between the <A> and </A> tags becomes hypertext and becomes associated with the URL provided with this attribute.  If this hypertext is selected by users in a browser, they are moved to another document, or to a different location in the current document, as defined by the associated URL.


Example:

Our home page
<A HREF="http://www.herb.com/home.html">Herbert Associates</A> provides complete information about our services.

This might be rendered as follows:

Our home page Herbert Associates provides complete information about our services.

In this example, selecting "Herbert Associates" takes the user to a document called home.html located at http://www.herb.com. If the HREF refers only to a file without a corresponding network address, the file is normally located on the same host as the current document. It is also possible to transfer to a specific location within a document using HREF strings of the form "location#identifier", where identifier refers to a named anchor in the file specified by location. If the location portion is blank, the link refers to a point in the same document.

Example:

Click <A HREF="#details">here </A> for more details.

When the user clicks on the string "here", the browser jumps to the anchor named "details". Anchors are named using the NAME attribute.

NAME="string"

If the NAME attribute is used, an anchor can act as the target of a link. This is typically used to transfer the user to a different location within the current document. The string supplied with the NAME attribute effectively gives the anchor a name or identifier. Identifiers are arbitrary strings but must be unique within a given HTML document. These identifiers can be referred to by other anchors to indicate the destination of the link.

Example:

Click <A HREF="#details">here</A> for more details.
...
<A NAME=details>Additional Details</A>

In this case, clicking on "here" would cause the browser to transfer its focus to the anchor called "details".


<IMG...> -- In-line Images

Attributes:	ALIGN, ALT, BORDER, CONTROLS, DYNSRC, HEIGHT, HSPACE, ISMAP, LOOP, SRC, START, USEMAP, VSPACE, WIDTH

Can be inside:	A, ADDRESS, B, CITE, CODE, EM, I, KBD, SAMP, STRONG, TT, VAR, Hn, P, PRE, DT, DD, LI, TD, character formatting

This element is used to insert a graphics image, such as a ".GIF" file, into a document. Several attributes are defined, as described below:

ALIGN=alignment

This optional attribute specifies the alignment of the image with respect to the neighboring text. Possible values are TOP, MIDDLE, BOTTOM, LEFT, and RIGHT.

ALT="text alternative"

The ALT attribute is optional and is used to specify a text string which is displayed on the screen in browsers that do not support graphics.  It can also be configured to delay the displaying of graphics.

BORDER=n

Sets the size of the border around the image in pixels. The border is invisible if the image isn't a hyperlink.

CONTROLS

This option adds a set of controls to a video clip, if one is present.

DYNSRC=url

This option gives the address of a video clip or VRML world.

HEIGHT=n

Defines the height of the image in pixels. If the physical size of the graphic doesn't match this value, the browser stretches the image so that it fits.

HSPACE

Defines the horizontal margin surrounding the image in pixels.

ISMAP

Another optional element which identifies the image as a clickable map. This allows the user to click on the image and have different regions of the image cause different actions. When the user clicks on a map, the browser transmits the mouse coordinates where the click occurred to the server which uses them to determine how to respond.


LOOP=n

Use this option to make a video clip play repeatedly. For an infinite loop, use LOOP=-1 or LOOP=INFINITE.

SRC="URL"

This is a mandatory attribute specifying the URL of the image file.

START=FILEOPEN | MOUSEOVER

This option determines when a video clip starts playing. Use FILEOPEN to start the clip as soon as the file is open. Use MOUSEOVER to start the clip when the user points to it.

USEMAP=map-name

This option for an image that's part of a client-side image map. The map name corresponds to the name in a MAP tag, which contains the data for the map's "hot spots."

VSPACE=n

Defines the vertical margin surrounding the image in pixels.

WIDTH=n

Defines the width of the image in pixels. If the physical size of the graphic doesn't match this value, the browser stretches the image so that it fits.


Image maps

An image map is an interactive graphic. The user interacts with the image by clicking on "hot spots" that produce hypertext jumps.

You specify the graphic itself using the <IMG> tag with the USEMAP option. This option specifies the corresponding <MAP> tag, which contains the map data. You define each hot spot using an <AREA> tag within the <MAP> tag.


<MAP> .. </MAP> -- Map data

Attribute: 	NAME

Can be inside: Any block text element within the BODY.

Can contain: 	AREA

NAME=name

This option identifies the map for reference in the USEMAP option of an <IMG> tag.


Example:

<MAP NAME="toolbar">

<AREA ... >

<AREA ... >

</MAP>


<AREA> -- Image map hot spot

Attributes: COORDS, HREF, NOHREF, SHAPE, TARGET

Can be inside: MAP

The <AREA> tag defines one of the clickable hot spots within a client-side image map. A hot spot can be a circle, rectangle, or polygon.

COORDS=coordinates

Gives the coordinates that define the circle, rectangle, or polygon. For details on the coordinate values, see the SHAPE option below.

HREF=url

Specifies the link associated with a hot spot.

NOHREF

Indicates an area that doesn't respond when clicked.

SHAPE=RECT | RECTANGLE | CIRC | CIRCLE | POLY | POLYGON

Specifies the shape of the hot spot. If you specify RECT or RECTANGLE, the coordinates are two pairs of points: X1, Y1, X2, Y2. These two points define the diagonal of the rectangle. If you specify CIRC or CIRCLE, the coordinates are three numbers: the X and Y values that define the center of the circle and a third value for the radius. If you specify POLY or POLYGON, the coordinates are three or more pairs of points that define a polygonal region.

TARGET=w

Loads the link into the targeted window. The value of w can be a window name that begins with an alphanumeric character. The value can also be one of several special symbols that begins with the underscore character:

_blank: 	Load the link into a new, blank and unnamed window.

_parent. Load the link into the parent window of the document that contains the link.

_self: 	Load the link into the same window the user clicked.

_top:	Load the link into the full body of the window.


Examples:

<AREA SHAPE="RECT" COORDS="10, 15, 100, 150" HREF="http://www.myplace.com">

<AREA TARGET="Overview" HREF="lookout.htm" SHAPE="CIRCLE" COORDS="50, 75, 100">


<FORM...> ... </FORM> -- Fill-In Forms

Attributes:	ACTION, ENCTYPE, METHOD

Can contain:	INPUT, SELECT, TEXTAREA, Hn, p, HR, DIR, DL, MENU, OL, UL, ADDRESS

Can be inside:	BLOCKQUOTE, BODY, DD, LI, TD

The FORM element is used to delimit a data input form. It is used to create forms containing check boxes, radio buttons, text input fields, and buttons. The browser is used solely to collect information for the form; it must be sent to a program on the server to be processed. The attributes defined for the form tag are:

ACTION="URL"

A required attribute used to specify the URL to which the forms contents are sent when submitted for processing. This is usually either a program on an HTTP server or an e-mail address specified using a "mailto" URL.

METHOD=GET or POST

This is an optional attribute. It is used to specify how the form data will be sent to the HTTP server when it is submitted for processing.


<INPUT...> -- Form Field Type

Attributes:	ALIGN, CHECKED, NAME, MAXLENGTH, SIZE, SRC, TYPE, VALUE

Can be inside:	FORM, any nonempty element allowed inside a form

This tag is used to specify a field in a form whose contents may be edited by the user. The type of field and its characteristics are specified through various attributes:

TYPE=field-type

This defines the type of the input field. Possible values for field-type are CHECKBOX, RADIO, TEXT, SUBMIT, RESET, TEXT, IMAGE, or HIDDEN.


VALUE="field-value"

This attribute specifies different things for different field types. For a text or hidden field, it represents the value or the field.  For a check box or radio button, it specifies the value to be submitted with the form if the field is checked.  For a RESET or SUBMIT button, it represents the label for the button.

SRC="source-file"

Specifies the location of the image file when TYPE=IMAGE is used.

CHECKED

For use with check boxes and radio buttons to set the initial value of the field to checked (on).

SIZE=n

Indicates the size of a text field in characters.

MAXLENGTH=n

Specifies the maximum number of characters that can be entered into a text field.

ALIGN=alignment

This attribute specifies the alignment of the images within forms with respect to the neighboring text. Possible values are TOP, MIDDLE, and BOTTOM.


<TEXTAREA...> ... </TEXTAREA> -- Text Block Input

Attributes:	ROWS, COLS, NAME

Can contain:	characters only

Can be inside:	FORM

Used to create a multi-line text input field. It has three required attributes which provide the following information:

ROWS=n

Specifies the height of the text area in characters.

COLS=n

Specifies the width of the text area in characters.

NAME=name

Specifies the variable name associated with the text area contents. It is used by the script which processes the form when it is submitted to the server.


<SELECT...> ... </SELECT> -- Multiple Options

Attributes:	SIZE, MULTIPLE, NAME

Can contain:	OPTION

Can be inside:	FORM

This form element is used to create a menu or scrolling list of multiple items from which the user can choose when the form is presented. Attributes determine the characteristics of the SELECT item:

SIZE=n

Specifies the displayed size of the list or menu in lines. If omitted, a value of 1 is assumed.

MULTIPLE

Optional attribute to specify if the user can select multiple items from the SELECT list at one time or a single item.

NAME=name

Specifies the variable name associated with the SELECT element. It is used by the script which processes the form when it is submitted to the server.


<OPTION...> ... </OPTION> -- Options for SELECT

Attributes:	VALUE, SELECTED

Can contain:	characters only

Can be inside:	SELECT

Specifies an entry in a SELECT element. The trailing </OPTION> tag is optional since the end of an option is implied by another option element or by the end of the select element. A series of option elements defines the list which is presented by the SELECT element when the form is rendered. An option has two optional attributes:

SELECTED

Indicates that this option is initially selected.

VALUE="value"

When present, indicates the value to be returned if this option is chosen. The returned value defaults to the contents of the OPTION element.


Tables

This section describes the proposed TABLE element of HTML 3.0. Some of the features and attributes may not be supported by all browsers.


<TABLE...> ... </TABLE> -- Table Wrapper

Attributes:	BACKGROUND, BGCOLOR, BORDER, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK, CELLSPACING, CELLPADDING, WIDTH

Can contain:	CAPTION, TH, TD, TR

Can be inside:	BLOCKQUOTE, BODY, FORM DD, LI

This element is used to encapsulate a table definition. Other table elements will be ignored if they do not appear inside this pair of tags. A number of attributes define how the table will appear:

BACKGROUND=url

Use this attribute to set a background picture. The picture appears tiled behind the text and graphics in the table, table head, or table cell.

BGCOLOR="#rrggbb"

Use this attribute to set the background color of the table. The "#rrggbb" value is a hexadecimal red-green-blue triplet as derived from standard RGB color tables.

BORDER or BORDER=size

Specifying this attribute causes borders to be drawn around all cells of the table. By default, tables have no borders. If the optional size field is included, the width of the border, in pixels, can be specified. Otherwise, the browser's default border size is used.

BORDERCOLOR=color

Use this attribute to specify the color of the border. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

BORDERCOLORLIGHT=color

Use this attribute to create 3D borders with two colors. This attribute controls one of the colors, the opposite of BORDERCOLORDARK. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

BORDERCOLORDARK=color

Use this attribute to create 3D borders with two colors. This attribute controls one of the colors, the opposite of BORDERCOLORLIGHT. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

CELLSPACING=value

This specifies the amount of space inserted between individual cells in a table. Netscape uses a default cell spacing of two pixels.

CELLPADDING=value

Specifies the amount of space between the border of a cell and its contents.

WIDTH=value or percent

Used to specify the width of the table as either an absolute width in pixels or a percentage of the document (window) width.


<CAPTION...> ... </CAPTION> -- Table Caption

Attributes:	ALIGN

Can contain:	characters, character formatting, A, BR, IMG

Can be inside:	TABLE

The CAPTION element specifies the table caption or title. It should appear inside a <TABLE> definition but not inside row or cell definitions. Titles are always centered with respect to the table. The ALIGN attribute specifies whether the title should appear above the table or below the table, using ALIGN=TOP or ALIGN=BOTTOM respectively. It defaults to TOP if not specified.


 <TH...> ... </TH> -- Table Heading

Attributes:	BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK, COLSPAN, ROWSPAN, ALIGN, VALIGN, NOWRAP

Can contain:	characters, character formatting, A, BR, IMG, TABLE

Can be inside:	TABLE

This element is used to specify a heading for an individual row or column of a table. A number of attributes can be used to define how the heading is presented:

BACKGROUND=url

Use this attribute to set a background picture. The picture appears tiled behind the text and graphics in the table, table head, or table cell.

BGCOLOR="#rrggbb"

Use this attribute to set the background color of the table. The "#rrggbb" value is a hexadecimal red-green-blue triplet as derived from standard RGB color tables.


BORDERCOLOR=color

Use this attribute to specify the color of the border. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

BORDERCOLORLIGHT=color

Use this attribute to create 3D borders with two colors. This attribute controls one of the colors, the opposite of BORDERCOLORDARK. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

BORDERCOLORDARK=color

Use this attribute to create 3D borders with two colors. This attribute controls one of the colors, the opposite of BORDERCOLORLIGHT. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

ROWSPAN=n

Specifies how many rows of the table this heading cell should span.  The default is one.

COLSPAN=n

Specifies how many columns of the tale this heading cell should span. The default is one.

ALIGN=left, right, or center

Controls how the heading text is aligned in the cell in which it appears.

VALIGN=top, middle, bottom, or baseline

Controls whether the header text is aligned to the top of the cell, the bottom of the cell, or vertically centered within the cell.

NOWRAP

Prevents the header text from being broken into multiple lines to fit in the cell. Instead, the width of the column expanded so that the header text can fit in one line.


<TR...> ... </TR> -- Table Row

Attributes:	ALIGN, BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK, VALIGN

Can contain:	TD

Can be inside:	TABLE

Specifies a row definition in a table. The number of rows in a table is exactly specified by how many <TR> elements are contained within it, irregardless of cells that may attempt to use the <ROWSPAN> attribute to span into nonspecified rows. A number of attributes are defined to control how the row is presented:

ALIGN=left, right, or center

Controls how the text in each cell of the entire row is aligned horizontally.

BACKGROUND=url

Use this attribute to set a background picture. The picture appears tiled behind the text and graphics in the table, table head, or table cell.

BGCOLOR="#rrggbb"

Use this attribute to set the background color of the table. The "#rrggbb" value is a hexadecimal red-green-blue triplet as derived from standard RGB color tables.

BORDERCOLOR=color

Use this attribute to specify the color of the border. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

BORDERCOLORLIGHT=color

Use this attribute to create 3D borders with two colors. This attribute controls one of the colors, the opposite of BORDERCOLORDARK. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

BORDERCOLORDARK=color

Use this attribute to create 3D borders with two colors. This attribute controls one of the colors, the opposite of BORDERCOLORLIGHT. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

VALIGN=top, middle, bottom, or baseline

Controls whether the text in each cell of the entire row is aligned to the top of a cell, the bottom of the a cell, or vertically centered within a cell.


<TD...> ... </TD> -- Table Data

Attributes:	BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK, COLSPAN, ROWSPAN, ALIGN, VALIGN, NOWRAP

Can contain:	characters, character formatting, A, BR, IMG, TABLE

Can be inside:	TR

This element is used to specify a heading for an individual row or column (col) of a table. A number of attributes can be used to define how the heading is presented:


BACKGROUND=url

Use this attribute to set a background picture. The picture appears tiled behind the text and graphics in the table, table head, or table cell.

BGCOLOR="#rrggbb"

Use this attribute to set the background color of the table. The "#rrggbb" value is a hexadecimal red-green-blue triplet as derived from standard RGB color tables.

BORDERCOLOR=color

Use this attribute to specify the color of the border. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

BORDERCOLORLIGHT=color

Use this attribute to create 3D borders with two colors. This attribute controls one of the colors, the opposite of BORDERCOLORDARK. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

BORDERCOLORDARK=color

Use this attribute to create 3D borders with two colors. This attribute controls one of the colors, the opposite of BORDERCOLORLIGHT. The color is either a hexadecimal, red-green-blue value, or a predefined color name. This attribute requires the BORDER attribute.

ROWSPAN=n

Specifies how many rows of the table this cell should span.  The default is one.

COLSPAN=n

Specifies how many columns of the tale this cell should span. The default is one.

ALIGN=left, right, or center

Controls how the text in each cell of the entire column is aligned horizontally.

VALIGN=top, middle, bottom, or baseline

Controls whether the text in each cell of the entire column is aligned to the top of a cell, the bottom of the a cell, or vertically centered within a cell.

NOWRAP

Prevents the lines within this cell from being broken into multiple lines. Instead, the width of the column expanded so everything can fit in one line.


Frames

Most current browsers now support a new type of HTML document called a frame document. The tags associated with this kind of document are described in this section. This is an area OF HTML that is still evolving and  some of this discussion may be inaccurate or incomplete by the time you read this.


<FRAMESET .> . </FRAMESET> -- Defining Framesets

Attributes:	COLS="col-def", ROWS="row-def"

Can contain:	FRAME, FRAMESET, NOFRAMES

Can be inside:	HTML

In a frame document, the BODY element is replaced by a FRAMESET element. Its purpose is to define the layout of window frames within the browser window. Each frame is a distinct area of the main viewing window and each can contain its own separate HTML document. FRAME elements are used to define the content of a frame region. FRAMESETs can be nested to allow a viewing window to be divided into an arbitrary number of rows and columns.

COLS="col-def"	ROWS="row-def"

These attributes are used to specify the number of columns/rows into which the indicated frame is divided. Its value is a comma-separated list defining the number and size of the columns/rows making up this frame. Each value in the list takes on one of these forms:

 n	Specifies the absolute frame size, in pixels.

n%	Specifies the frame size as a percentage of the total available width/height.

n*	Specifies the size as a free-floating, relative value. All space remaining after allocating fixed width or percentage frames is divided among all the relative-sized frames. An optional integer preceding the asterisk defines the weight given to a column. For example, the string "2*, 3*, *" would allocate 2/6 of the remaining space to the first frame, 3/6 to the second frame, and 1/6 to the third frame.

Example:

<FRAMESET ROWS="90, 3*, *, 100">

This defines four frame rows, with the top row being 90 pixels high and the bottom (fourth) row 100 pixels high. The second row is defined to be three-quarters of the remaining height and the third frame is one-quarter of the remaining height.


Example:

<FRAMESET COLS="80%, 20%">

This defines two frame columns., the first one 80 percent of the width of the window and the second 2 percent.


<FRAME .> -- A Frame within a Framesets

Attributes:	MARGINWINDTH, MARGINHEIGHT, NAME, NORESIZE, SCROLLING, SRC

Can be inside:	FRAMESET

This element defines the properties of each of the frames declared by the FRAMESET element.

MARGINWIDTH="n" (optional)

Specifies the width in pixels of the left and right margins for the frame. Must be greater than 1. If omitted, the browser will determine an appropriate margin width.

MARGINHEIGHT="n" (optional)

Specifies the width in pixels of the top and bottom margins for the frame. Must be greater than 1. If omitted, the browser will determine an appropriate margin width.

NAME="name-string" (optional)

Used to assign a name to a frame, which can be referenced by the TARGET attribute of the A and BASE elements to direct documents or data to this named frame. If NAME is omitted, the frame name is undefined.

NORESIZE (optional)

Informs the browser that the frame size is fixed and cannot be modified by the user.

SCROLLING="yes", "no", "auto" (optional)

Specifies what kind of scrolling, if any, is defined for the frame. "Yes" means that the frame must always have scrollbars and "no" means the frame should never have scrollbars. If "auto" is specified,  the browser decides automatically if scrollbars are needed based on the size of the document being displayed and the size of the frame in which it is being displayed. The default value is "auto".

SRC="URL" (optional)

Specifies the URL of the HTML document to be displayed within the frame. If omitted, the frame is initially left blank.


<NOFRAMES> . </NOFRAMES>

Can contain:	BODY

Can be inside:	FRAMESET

The NOFRAMES element is used to support browsers which do not recognize the FRAMESET or FRAME tags. Such browsers will ignore the FRAME tags and instead display the code defined within the NOFRAMES tag (which is also not recognized by the browser). FRAMES aware browsers will process the frames tags as expected and will ignore anything defined within the NOFRAMES tag pair.

Example:

<HTML>

<HEAD>

<TITLE>Sample Frames Document</TITLE>

</HEAD>

<FRAMESET ROWS="50%, 50%">

    <NOFRAMES>

    <BODY BACKGROUND="brooknorth.gif">

    <H1 ALIGN="center">Frames Not Supported!</H1>

    <P ALIGN="center"><EM>If you are reading this text, your current browser does not support the new FRAMEs tags which have been used to create this page. You will need to upgrade your browser to properly view this page. For a non-frames version of this page, click

 <A HREF="brooknorth2.html">here</A>.

    </NOFRAMES>

    <FRAME SRC="products.html" NAME="frame1">

    <FRAME SRC="info.html" NAME=frame2">

</FRAMESET>


Marquees

A marquee is a horizontal area of a document that contains scrolling text.


<MARQUEE>.</MARQUEE> -- Scrolling text

Attributes: ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, HSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY, VSPACE, WIDTH

ALIGN=LEFT | CENTER | RIGHT | TOP | MIDDLE | BOTTOM

Specifies the alignment of the marquee with the surrounding text. The LEFT, CENTER, and RIGHT attributes create a marquee that is independent of the surrounding text. The TOP, MIDDLE, and BOTTOM attributes treat the marquee as part of the surrounding text.

BEHAVIOR=type

This option specifies how the scrolling text behaves. The possibilities are:

SCROLL: 	Start off to one side, scroll across, scroll off the other side, and start again. This is the default behavior.

SLIDE: 	Start off to one side, scroll across, and stop at the other margin.

ALTERNATE: 	Bounce back and forth from side to side.

BGCOLOR=color

Use this attribute to set the background color of the table. The value is a hexadecimal red-green-blue triplet as derived from standard RGB color tables. It can also be a predefined color name.

DIRECTION=LEFT | RIGHT

Determines which direction the text scrolls. The default is LEFT, which means the text begins at the right and scrolls left.

HEIGHT=n

The height of the marquee. The value of n can be a number of pixels or a percentage of the screen. In the latter case, precede the number with a percentage sign.

HSPACE=n

The left and right margins around the marquee in pixels.

LOOP=n

The number of times the text scrolls through the marquee. For infinite scrolling, use LOOP=-1 or LOOP=INFINITE.

SCROLLAMOUNT=n

Sets the space in pixels between each instance of the scrolling text in the marquee.

SCROLLDELAY=n

Sets the delay in milliseconds between each instance of the scrolling text in the display.

VSPACE=n

The top and bottom margins around the marquee in pixels.


WIDTH=n

The width of the marquee. The value of n can be a number of pixels or a percentage of the screen. In the latter case, precede the number with a percentage sign.

Example:

<MARQUEE DIRECTION=RIGHT SCROLLAMOUNT=10

SCROLLDELAY=200>Eat at Joe's.</MARQUEE>


Sound

You can use the <BGSOUND> tag to add background music, speech, or other sound to an HTML document. The sound can be a digital sample (for instance, a file that ends with the extension .wav or .au) or MIDI music (.mid).


<BGSOUND> -- Background sound

Attributes: 	LOOP, SRC

Can be inside: 	BODY

LOOP=n

Sets the number of times the sound plays. For infinite playback, use LOOP=-1 or LOOP=INFINITE.

SRC=url

Specifies the address of the sound file.


Objects, scripts, and other embedded items

This section covers a variety of techniques for extending HTML. The tags that appear below let you embed multimedia objects, programs, documents, and other items in an HTML document.


<OBJECT>.</OBJECT> -- Embedded objects

Attributes: ALIGN, BORDER, CLASSID, CODEBASE, CODETYPE, DATA, DECLARE, HEIGHT, HSPACE, NAME, SHAPES, STANDBY, TYPE, USEMAP, VSPACE, WIDTH.

Can contain: Any HTML element including other objects.

Can be inside: <BODY>

You can use the <OBJECT> tag to insert many kinds of items into a document. These include graphic images, ActiveX controls, and documents from other applications.

ALIGN=LEFT | CENTER | RIGHT | BASELINE | MIDDLE | TEXTBOTTOM | TEXTMIDDLE | TEXTTOP

Specifies the alignment of the object with the surrounding text. The LEFT, CENTER, and RIGHT attributes create an object that is independent of the surrounding text. The other attributes treat the object as part of the surrounding text.

BORDER=n

Gives the size of the border in pixels of a hyperlink object.

CLASSID=url

This option identifies the implementation of the object. The form of the URL varies depending on the type of the object.

CODEBASE=url

This option identifies the code base of the object. The form of the URL varies depending on the type of the object.

CODETYPE=codetype

Defines the Internet media type for the code.

DATA=URL

This option identifies the data for the object. The form of the URL varies depending on the type of the object.

DECLARE

Use this option to declare the object without instantiation. This option is useful for creating cross-references to the object or for using the object as a parameter.

HEIGHT=n

Defines the height for the object.

HSPACE=n

Specifies the amount of horizontal space between the object and any items to the left or right.

NAME=url

Use this option to specify the name of the object when it's used in a form.

SHAPES

Identifies an object with hyperlink shapes.

STANDBY=message

Shows a message while loading the object.

TYPE=type

Specifies the Internet media type for data.

USEMAP=url

Specifies the image map for the object.

VSPACE=n

Specifies the amount of vertical space between the object and any items to the left or right.

WIDTH=n

Defines the height of the object.

Example:

<OBJECT data=Vidclip.avi type="application/avi">

</OBJECT>

Note: A complete description of the <OBJECT> tag is beyond the scope of this manual. For a technical discussion of the <OBJECT> tag, refer to:

http://www.w3.org/pub/WWW/TR/WD-object.html

For more information on objects with working examples, refer to:

http://www.microsoft.com/workshop/author/newhtml/


<PARAM> -- Properties of an object

Attributes: 	NAME, VALUE, VALUETYPE, TYPE

Can be inside: <OBJECT>, <APPLET>

Many objects have properties that let you customize the object for a particular purpose. You can specify these properties using the <PARAM> tag.

NAME=name

The name of the property.

VALUE=value

The value of the property.

VALUETYPE=DATA | REF | OBJECT

This option identifies the nature of the value. DATA, the default, is data for the object. REF and OBJECT are URLs. An OBJECT URL is within the same document.

TYPE=type

The Internet media type.


<APPLET> ...</APPLET> -- Java applets

Attributes: 	ALIGN, ALT, CODE, CODEBASE, HEIGHT, HSPACE, NAME, VSPACE, WIDTH

Can contain: 	PARAM

Can be inside: 	BODY

The <APPLET> tag inserts a Java "applet" inside an HTML document.

ALIGN=LEFT, CENTER, RIGHT

Specifies the alignment of the object relative to surrounding text.

ALT=alternateText

Gives alternate text for text-only browsers or browsers that do not support Java.

CODE=appletFile

Specifies the name of the Java applet.

CODEBASE=codebaseURL

The applet's base URL.

HEIGHT=n

The initial height of the applet display area in pixels.

HSPACE=n

The horizontal space around the applet display area in pixels.

NAME=appletInstanceName

Use this option to identify an applet to others within the HTML document.

VSPACE=n

The vertical space around the applet display area in pixels.

WIDTH=n

The initial width of the applet display area in pixels.

Note: You can include the <PARAM> tag with the NAME option if you want to pass arguments to an applet from elsewhere in an HTML document. Use the syntax <PARAM NAME=AttributeName>.


<SCRIPT>...</SCRIPT> -- Embedded scripts

Attributes: 	LANGUAGE

Can contain: 	Script language code

Can be inside: 	HEAD

Use this tag to embed program code in another language such as VBScript.

LANGUAGE= "language"

The name of the script language.

Example:

<SCRIPT language="VBScript">

Document.write("Good morning!")

</SCRIPT>

Note: A complete description of the <SCRIPT> tag is beyond the scope of this manual. For more information, refer to:

http://www.microsoft.com/workshop/author/newhtml/


<EMBED> -- Embedded objects

Attributes: 	HEIGHT, NAME, OPTIONAL PARAM, PALETTE, SRC, WIDTH

Can be inside: Body

The <EMBED> tag inserts items such as ShockWave objects into an HTML document. Most authors now use the <OBJECT> tag for this function. The <EMBED> tag is included here for backward compatibility.

HEIGHT=n

The height of the object in pixels.

NAME=name

The name that other objects or elements use to refer to this one.

OPTIONAL PARAM=value

Specifies a parameter for the object and the accompanying value.

PALETTE=FOREGROUND | BACKGROUND

Sets the color palette. You can specify the foreground or background color.

SRC=data

Specifies the name of any source data for the object.

WIDTH=n

The width of the object in pixels.

Example:

<EMBED SRC= "Vidclip.AVI" WIDTH=300 HEIGHT=220>


Netscape Extensions

Netscape has introduced a number of enhancements to HTML, mostly based on those proposed in HTML 3.0, but some features are unique to Netscape. The extensions are in the form of new tags as well as additional attributes to existing tags. These are described in the following topics.


<CENTER> ... </CENTER> -- Centering Text

Used to center a block of text on the page. It can include paragraphs, headings, and so forth.


Centering Paragraphs and Headers

The <P> and <Hn> tags have been extended to recognize an additional attribute:

ALIGN=CENTER

This is the equivalent to the <CENTER> tag on individual paragraphs and headings.


In-line Images

The <IMG> tag has the following new attribute:

LOWSRC="URL"

This attribute can be used to load a smaller or lower resolution image compared to that specified by the SRC attribute. These alternate images are loaded when the page is first rendered. The SRC images are only loaded after all LOWSRC images have been loaded.


Font Sizes

Two tags for specifying the font of rendered text have been defined:

<FONT...> ... </FONT>

Specifies the size of the font for the enclosed text via the SIZE attribute:

SIZE=n

n is a value from 1 to 7 indicating the size of the font. 3 is the default value. It can also be specified as a value relative to the current size using a + or -, for example <FONT SIZE=+2>.

<BASEFONT SIZE=n>

Changes the default size of the font. The initial default is 3. n can be a value from 1 to 7.


Lists

<UL...> ... </UL> -- Unordered lists

A type attribute has been added to the unordered list tag:

TYPE=disc, circle, or square

This controls the type of bullet used to mark list items.

<OL...> ... </OL> -- Ordered lists

Two additional attributes have been defined for ordered lists:

TYPE=A, a, I, I, or 1

This controls the type of numerals used to mark list items.

START=n

Specifies the number from which to start the list. The default is 1.

<LI> -- List item

Two new attributes have been defined for list items:

TYPE=disc, circle, square, A, a, I, I, or 1

Specifies the type of bullet used to mark this one list item.

VALUE=n

The numeric value this list item should have. It affects this item and all items below it in OL lists.


Line Breaks

<BR CLEAR=left, right, or all>

The CLEAR attribute has been added to the <BR> line break attribute to control how text which is aligned with images behaves when a line break tag is encountered. Without any value, the CLEAR attribute causes a new line to start below the image, back to the original margin. A value of left means to break to a clear left margin, right to a clear right margin, and all to a full clear line.

<NOBR> ... </NOBR>

Prevents the text within the <NOBR> tag from being wrapped to the next line.

<WBR>

Causes the text to be wrapped at this point only if necessary.


Backgrounds and Text Colors

The following attributes have been added to the <BODY> tag:

BACKGROUND="URL"

The purpose of this attribute is to specify a URL pointing to an image that is to be used as a background for the document. In Netscape, this background image is used to tile the full background of the document-viewing area.

BGCOLOR="#rrggbb"

Changes the color of the background without having to specify a separate image that requires another network access to load. The "#rrggbb" value is a hexadecimal red-green-blue triplet as derived from standard RGB color tables.


TEXT="#rrggbb"

Changes the color of all the normal text in a document (anything that is not a link).

LINK="#rrggbb"; VLINK="#rrggbb"; ALINK="#rrggbb"

Used to control the coloring of link text. VLINK stands for visited link, and ALINK stands for active link. The default coloring of these is: LINK=blue, VLINK=purple, and ALINK=red.


Miscellaneous

<BLINK> ... </BLINK>

Causes the enclosed text to blink. In some version of Netscape this feature can be turned off as some users find blinking text irritating.

&reg

The registered trademark symbol ®.

&copy

The copyright symbol ©.