Contents
Aspire-x ~ Contents

Overview

Applet, Adding

Background, Adding

Colour Palette, The

Comments, Adding

Embedded File, Adding

Font Size and Colour, Defining

Formats

Bold, Italics and Underline

Other Styles, Selecting

Centering

Forms

Overview

Starting a New Form

Inserting into an Existing Form

Adding Form Widgets

Frames

Starting a New Frameset

Adding a Frame

Heading Size, Defining

Horizontal Rule, Adding

Images

Adding an Image

Creating a Client-Side Map File

Line Break

Adding

Enforcing a Line Break if Required

Enforcing a No Line Break

Link, Creating

Adding an Anchor

Adding a Link

Lists

Overview

Ordered Lists

Unordered Lists

Definition Lists

Directory and Menu Lists

Marquee, Adding

New Document Default Script, Adding

Paragraph, Defining

Tables

Overview

Starting a New Table

Inserting into an Existing Table

Starting a New Row

Starting a New Heading Cell

Starting a New Data Cell

URL Manager, The

User Tags Manager, The

User Preferences, Defining

Web Browser, Launching

Credits

Netscape Navigator is ® Netscape Communications.

Explorer is ® Microsoft Corporation.


Adding an Anchor

An anchor is selected text that is marked as the destination of a hypertext link. That is, a link from another location can jump to the anchor point. The HTML for an anchor takes the following format:

<A NAME="anchor_name">displayed_caption</A>

To add an anchor to the document, select the text that will be the anchor point. Next, click on the Anchor button, select Tags|Anchor from the menu item or press F2. An input form will be displayed.

The Anchor Input Form

Name

Enter the name that you wish to give the anchor.

Caption

Enter the caption that will be displayed at the anchor point. If text has been selected in the document, this field will already be completed.

Browse

To collect details of an anchor from the URL Manager click this button.

Add to URL Manager

To add the current details to the URL Manager check this box.


Adding a HotJava Applet

  +

Netscape 2.0 has added the capability to support HotJava executable content previously only possible using the actual HotJava browser.  This allows live audio, animation, or applications to be included in the document in the form of HotJava applets.  Such applets are pre-compiled in the HotJava programming language. The HTML code to include such an applet is as follows:

<APP

CLASS="applet_name"

[SRC="applet_directory"]

[ALIGN=alignment]

[HEIGHT=applet_height]

[WIDTH=applet_width]

[APPLETSPECIFICATTRIBUTE="applet_attributes"]>

To include a HotJava applet in the document select the text that is required to be the class name. Next, click on the Other Styles button. Then click on the HotJava Applet button contained in the styles toolbar that appears. Alternatively, select Tags|Other Styles|HotJava Applet from the menu. An input form will then be displayed.

The HotJava Applet Input Form

Name

The name of the applet. If text has been selected in the document, this field will already be completed.

Location

The name of the directory that contains the applet.

Height

The height in pixels that the applet requires.

Width

The width in pixels that the applet requires.

Attributes

An attribute name the applet allows. This will be defined by the applet author.

Alignment

The alignment of the applet in the document.


Adding a Background

Background colours and images can be specified for HTML documents in Netscape 1.1, Netscape 2.0 and Explorer 2.0. In addition, Netscape 1.1 and 2.0 can define the default font size, whilst Explorer 2.0 can define background sound.

The tags for background details are as follows:

<BODY

[BGCOLOR=background_colour]

[BACKGROUND="image_name"]

[BGPROPERTIES=FIXED]

[TEXT=text_colour]

[LINK=unfollowed_link_colour]

[ALINK=activated_link_colour]

[VLINK=followed_link_colour]>

<BASEFONT SIZE=font_size>

<BGSOUND SRC="sound_name" LOOP=no_of_repeats>

body_of_the_document

</BODY>

There are two methods to add background information to the document. Firstly, by clicking on the Background button in the New Document Script Input Form and secondly, by altering an existing set of background tags in a document.

To alter an existing set of background tags highlight the <BODY…>, <BASEFONT…>, and <BGSOUND…> tags. Next, click on the Background button or select Tags|Background from the menu. An input form will then be displayed with the documents current selection updated to it.

Note: In order to update correctly, the Text, Link, ALink and VLink tags must all have a space before and after them.

The Background Input Form

Colour

The background colour of the document. Click on the Browse button to select a colour from the Colour Palette

Image

An image that is displayed behind the text. Click on the Browse button to select an image from the hard disk.

Set as Watermark

An Explorer 2.0 feature. Checking this box prevents the image from tiling creating a watermark for the document.

Text

The colour for the document text. Click on the Browse button to select a colour from the Colour Palette

Unfollowed Link

The colour for an unfollowed link in the document. Click on the Browse button to select a colour from the Colour Palette

Followed Link

The colour for a followed link in the document. Click on the Browse button to select a colour from the Colour Palette

Activated Link

The colour for an activated link in the document. Click on the Browse button to select a colour from the Colour Palette

Default Font Size

A Netscape feature. Sets the default font size for the document. The range is from 1 to 7.

Sound

A sound file that is played whilst the document is being viewed. Click on the Browse button to select a sound file from the hard disk.

Loops

The number of times the sound file is played. The range is from 1 to infinity.


Adding a Line Break

A line break specifies that the document text must be broken to a new line at the point where the tag is inserted. The format for the line break tag is

<BR [CLEAR=clear_alignment]>

Netscape and Explorer 2.0 allow the CLEAR attribute. This attribute is used in conjunction with floating images (that is, images that have be aligned to the left or right margins). The CLEAR attibute will then resume the text after a line break at either the next free left margin (CLEAR=LEFT), the next free right margin (CLEAR=RIGHT) or when both margins are free from images (CLEAR=ALL).

To add a line break, click on the Line Break button, select Tags|Line Break from the menu, or press F9. When adding a line break, an input form to specify the break details will be displayed if in Netscape 1.1, Netscape 2.0 or Explorer 2.0 editing mode. However, the form will not be displayed if the option is turn off on the Options form.


The Colour Palette

The colour palette identifies the colour for the selected component (for example, the colour of a documents background). The palette comes with 16 predefined colours that are recognised by Netscape 2.0 and Explorer 2.0. These predefined colours are Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow and Aqua.

Alternatively, the system palette can be opened by clicking on the Colour Palette button. This will identify all the colours presently allowed on the system including the option to custom design the colour required. The returned colour will then take the form of a hexidecimal triplet specifying the levels of red, green and blue. This form will appear as

#rrggbb


Adding Comments to a Document

Occaisionally, there may be a requirement to add a comment to a document that will not be read by the web browser. The comment tag takes the following form:

<!-- comments -->

To add a comment to the document, select the text that is required to be the comment. Next, click on the Comments button or select Tags|Comments from the menu. An input form will then be opened.

The Comments Input Form

Comment

The comment to be added to the document. If text was selected in the document, this field will already be completed.


Adding a New Data Cell to a Table

Table data cells must only appear within table rows.  Each row need not have the same number of cells specified as short rows will be padded with blank cells on the right.

A cell can contain any of the HTML elements normally present in the body of an HTML document. The format of a data cell is as follows:

<TD

[ALIGN=horizontal_alignment_of _contents]

[VALIGN=vertical_alignment_of _contents]

[COLSPAN=number _of_columns _the_cell_spans]

[ROWSPAN=number _of_rows _the_cell_spans]

[BGCOLOR=background_colour]

[NOWRAP]>text/image

</TD>

To add a data cell to the table, select the text that is required to be entered in the data cell. Next, click on the New Data button, or select Tools|Table Creator|New Data from the menu. An input form will then be displayed.

The New Data Cell Input Form

Caption

The text that is displayed in the data cell. If text was selected in the document, it will be displayed here.

Wrap Text

If this box is checked the text will be wrapped otherwise their will be no line breaks in the text.

Image

Inserts an image into the data cell. To select an image and its attributes from the Image form, click on the Browse button.

No. of Columns

The number of columns that the cell spans.

No. of Rows

The number of rows that the cell spans.

Selector Button

An Explorer 2.0 feature allows a background colour to be added. Clicking this button opens the Colour Palette.

Horizontal Alignment of Cell Contents

The horizontal alignment of the cell contents.

Vertical Alignment of Cell Contents

The vertical alignment of the cell contents.


Definition Lists

A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term flush-left and the definition, formatted paragraph style, indented after the term. The HTML for a definition list is as follows:

<DL [COMPACT]>

<DT>Term<DD>Definition of the first term.

<DT>Term<DD>Definition of the second term.

</DL>

The definition list type can take the COMPACT attribute, which suggests that a compact rendering is used, because the list items are small and/or the entire list is large.

To begin a definition list click on the Definition List button or select Tools|List Creator|Definition List. A new list input form will then be displayed. At this point check the COMPACT checkbox if this attribute is required.

To add a new item to the definition list, select the text required as the definition term. Next, click on the New List Item button, select Tools|List Creator|NewList or press CTRL+L. An input form will then be displayed.

New Definition List Item Form

Definition Term

The name of the term to be displayed. If text has been selected in the document, this field will already be completed.

Definition Details

The details of the term defined in Definition Term.

To complete the current list, click the List Complete button, or select Tools|List Creator|Finish List from the menu.


Adding an Embedded File

  +

Embedding a file into an HTML document allows documents to be put directly into an HTML page. This feature is only available on Netscape 1.1 and above. The syntax is:

<EMBED SRC="images_name">

This element will allow you to embed documents of any type. Yothe reader of the document only needs to have an application which can view the data installed correctly on their machine.

To include an embedded file in the document, click on the Other Styles button. Then click on the Embed File button contained in the styles toolbar that appears. Alternatively, select Tags|Other Styles|Embed File from the menu. An input form will then be displayed.

The Document Embedding Input Form

Filename

The filename of the document to be embedded. To choose a file from the hard disk, click on the Browse button.

Height

The height of the displayed document in pixels

Width

The width of the displayed document in pixels


Font Size and Colour

Font size can be determined in Netscape 1.1 and above and Explorer 2.0. Font colour can be determined in Netscape 2.0 and Explorer 2.0. Font style can be specified in Explorer 2.0. The syntax is as follows:

<FONT

[COLOR=font_colour]

[FACE=font_style]

[SIZE=[+]font_size]>selected_text

</FONT>

In Netscape 1.1 and above, the default font size can be set in the Background Input Form. To insert selected text in between font size and colour tags simply select the text. Next, click the Font Size or Font Colour button depending on you choice. Alternatively, select Tags|Font Size and Colour from the menu. Size 1 is the smallest whilst size 7 is the largest. An input form will then be shown although this option can be disabled in the Options form..

The Font Size and Colour Input Form

Size

This pre-filled box is the size of the font. The size will depend upon the button clicked or menu item selected. If the Font Colour button has been clicked, this box will be grayed.

Colour

Determines the colour of the selected text. Click the Browse button to open the Colour Palette.

Name

Detemines the font style. Click the Browse button to open the fonts dialog box. This feature should be used carefully as the readers system must have the font installed for it to work.

Note: The font size can be set in the Options form to be either relative (that is a size from the basefont) or absolute (an actual size).


Forms
Forms - Overview

Forms accept data input.  There can be several forms in a single document, but forms cannot be nested. The data collected by a form is manipulated by a  script (usually written in languages such as Perl). The script is executed on the web site server. The form is made up of two parts. Firstly, tags specifying where the script is located and how the data will be passed to it, and secondly, widgets in the form that can accept data input (for example, edit boxes, check boxes, etc.).

There are two methods to edit forms in Aspire-x:

~ Start a new form ~

~ Insert into an existing form ~


Starting a New Form

The HTML code is as follows for a new form:

 <FORM METHOD="method" ACTION="script_location">

form_widgets

</FORM>

To start a new form click on the Form Creator button or Select Tools|Form Creator|New Form from the menu. An input form to collect details of the script location and data transmission will then be displayed, together with a new menu bar displaying Form Widget buttons.

The Form Script Information Input Form

Method

This specifies the protocols used in transmitting the data. The default value is Get although many forms use Post

Location

The location of the script. This can be relative to the document, or an absolute Internet address.

Completing the form

To complete the form, click on the Finsih Form button, or select Tools|Form Creator|Complete Form from the menu. A prompt will appear asking if you wish to add the closing </FORM> tag.


Inserting into an Existing Form

To insert into an existing form, click on the Insert to Existing Form button or Select Tools|Form Creator|Insert To Existing Form from the menu. The toolbar containing Form Widget buttons will the be displayed.

Completing the form

To complete the form, click on the Finish Form button, or select Tools|Form Creator|Complete Form from the menu. A prompt will appear asking if you wish to add the closing </FORM> tag.


Form Widgets

The form widgets are the interactive elements of the form. That is, those components that the users can click or type text into. In addition to an image, there are nine other form widgets. Each of these widgets can be chosen from the form creator toolbar. Once clicked, a tabbed form input form will open to collect details of the widget. If a different widgets is required, simply choose a different tab on the form. If selected text is required to be the caption, simply select the text before pushing the widget button. It will then be updated onto the widget form automatically.

The Form Widgets Input Form

Common Features for Many Widgets

System Name

Every widget must have a name. The names of the widgets should be unique, apart from radio groups where the group can be treated as one unit.

Default Text/Value

For a text or hidden widget, this is the default text that is displayed or stored. For a check box or radio button, this is the value to be submitted with the form.

Caption/Button Caption

The caption is the text that appears next to the widget. In the case of a submit or reset button, this is the caption that appears on the button. If text has been selected prior to clicking a widget button, this is the field that will usually be completed.

Caption Alignment

Those widgets that have a caption associated with them will have a checkbox that allows the caption to be input either before, or after the widget.

The Checkbox Widget

This inserts a checkbox into the document that the user can check or uncheck. A box can be checked as default. The syntax is as follows:

<INPUT TYPE="CHECKBOX"

NAME="name"

[VALUE="default_value"]

[CHECKED]>

The Radio Button Widget

This inserts a radio button into the document. Radio buttons can be logical groups (i.e. they can all have the same name). Then, it is the default value that is transmitted when a button is clicked. In this case, the value should be different for each button. Radio buttons can be checked as default. The syntax is as follows:

<INPUT TYPE="RADIO"

NAME="name"

[VALUE="default_value"]

[CHECKED]>

The Text Box Widget

A text box provides a box into which the user can type text. The syntax is as follows:

<INPUT TYPE="TEXT"

NAME="name"

[VALUE="default_value"]

[SIZE="visible_size"]

[LENGTH="actual_length"]>

The Password Box Widget

A password box is identical to a text box except that when text is typed into the box, it appears as a asterisks. However, it should be noted that this does not make the transmission of data secure. The syntax is as follows:

<INPUT TYPE="PASSWORD"

NAME="name"

[VALUE="default_value"]

[SIZE="visible_size"]

[LENGTH="actual_length"]>

The Text Area Widget

The text area widget is a multi-line text box. Its size can be defined in rows and columns. Netscape 2.0 has added a text wrap feature to determine how the text is presented; WRAP=OFF means that the lines are not wrapped and the text is sent as one long line, WRAP=VIRTUAL means that the display text is wrapped but the text is sent as one long line, and WRAP=PHYSICAL means that the display wraps and the text is transmitted at all wrap points. The syntax is as follows:

<TEXTAREA

NAME="name"

[ROWS="row_size"]

[COLS="column_size"]

[WRAP=wrap_method]>

default_text

</TEXTAREA>

The Combo Box Widget

The combo widgte provides a drop-down box from which the user can choose one or more options (depending on whether MULTIPLE has been defined). The Combo input form consists of two parts. The system and visual details of the combo box itself, and the items that are displayed within the box. To add an item, enter the name of the item to the item name box, determine whether it should be selected as default, and then click on the Add button. If the combo box and system details are left blank, only the item details will be added (for example, if you are adding to an existing combo box). The syntax for the combo box is as follows:

<SELECT

NAME="name"

[MULTIPLE]

[SIZE="number_of_items_displayed_at_one_time"]>

<OPTION [SELECTED]>item_name

</SELECT>

The Submit Button

The submit button sends the completed details to the script specified in the <FORM> tag. The syntax for the button is as follows:

<INPUT TYPE="SUBMIT" NAME="name" [VALUE="caption"]>

The Reset Button

The reset button clears the current form to its default values. The sytax for the button is as follows:

<INPUT TYPE="RESET" NAME="name" [VALUE="caption"]>


Overview
Aspire-x ~ An Overview

Aspire-x is a text-based HTML Editor to allow the easy creation of web pages. In many ways it works in a similar fashion to a word processor. That is, text is highlight, a button is clicked, and the text is manipulated. In addition, different HTML elements can be added to the document via other button clicks (such as images, forms, tables, and so on).

However, Aspire-x does not change the appearance of the text in the editing window. Instead, the text is surrounded by HTML tags. The tags can then be read by the users web browser to determine how the produced document should be displayed.

For example:

To create bold text in a document, highlight some text. Next, click on the Bold button. The text will now be surrounded by the HTML Bold tags and will look like this:

<B>text</B>

When this text is now viewed in the web browser, it will appear in bold.

One of the key objectives of Aspire-x is to allow the easy creation of web documents for all users. Many HTML Editors use HTML jargon in the input forms so that the new HTML author must first understand the HTML language before proceeding.  Aspire-x is different. Much of the jargon has been replaced with English, allowing documents to be produced quickly. In addition, as the HTML tags are input, it is possible for the new author to see how the English is converted into HTML tags, and therefore HTML is learnt by means of experience.

The help files have also been written with the beginner in mind as much as possible. However, should you find that you need help beyond the depth given in the help files, visit the home page of Aspire-x, where a number of HTML guides are listed. The site is at

http://www.aspire-x.com

If you feel you want advice on Aspire-x itself, contact the author, Malcolm Wright at

support@aspire-x.com

How to Read the Help File HTML Syntax

Examples of HTML syntax are given throughout the help files. They compose of three parts. Firstly, those parts in bold are standard HTML tags, secondly, those parts in italics are user-defined entities (such as file names, etc.) and lastly, those parts enclosed between [ ] are optional and do not have to be included.

So, an example may look like this:

<BODY

[BGCOLOR=background_colour]

[BACKGROUND="image_name"]

[BGPROPERTIES=FIXED]

[TEXT=text_colour]

[LINK=unfollowed_link_colour]

[ALINK=activated_link_colour]

[VLINK=followed_link_colour]>

<BASEFONT SIZE=font_size>

<BGSOUND SRC="sound_name" LOOP=no_of_repeats>

body_of_the_document

</BODY>

Registering

Lastly, Aspire-x has taken literally hundreds of hours of hard work to make your life easier. If Aspire-x has helped you, PLEASE REGISTER YOUR COPY NOW! To find out more about registering, click on the Register button in the About box.


Adding a Frame

  +

A frame is an individual window within a group of windows. Details of the individual window; its name, size, initial HTML file to be loaded, and other attributes are all specified within a Frameset. The other features include whether scrolling is permitted (either yes, no or automatic is needed) and whether the frame can be resized by the user. Frames and Framesets are Netscape 2.0 specific. The syntax for a frame is as follows:

<FRAME

SRC="initial_HTML_file_loaded"

NAME="frame_window_name"

[MARGINWIDTH="margin_width_in_pixels"]

[MARGINHEIGHT="margin_height_in_pixels"]

[SCROLLING="scroll_value"]

[NORESIZE]>

To add a frame to a Frameset, click on the Other Styles button and then on the Frame Button. Alternatively, select Tags|OtherStyles|Frame from the menu. An input form will then be displayed.

The Frame Input Form

File Location

This field is the name of the file to be loaded initially into this frame window./ It can be either a relative path or a full URL location. To choose a file from hard disk, click the Browse button.

Window Name

This is the name of the window that the Netscape browser will keep internally as a reference point.

Margin Width

This is the width in pixels of the margin to the left and right of the window.

Margin Height

This is the width in pixels of the margin above and below the window.

Allow Resize

Checking this box allows the user to resize the window by dragging the cursor along the edge of it.

Scroll Bars

This defines whether scroll bars are permanently visible (Yes), never visible (No), or visible only when needed (Auto).


Adding a Frameset

  +

Framesets and Frames are Netscape 2.0 specific. A Frameset enables a window to be broken up into a number of smaller windows. Each of these smaller windows is then defined in a Frame. Complex Framesets are established by splitting a window into smaller windows and then splitting the smaller windows into even smaller windows. This is known as nesting Framesets.

The Frameset elements replace the <BODY></BODY> tags in a document. The Frameset document is a reference point document that establishes the windows within the browser. Each Frame then points to a document to fill the Frameset windows.

In order to make Frameset pages compatible with other browsers, the <NOFRAMES></NOFRAMES> tags are included. Within these tags a document can be placed that will only be read by browsers that do not support frames. To add a page between these tags, simply removing the <HTML></HTML> tags from the inserted document and place it between the <NOFRAMES></NOFRAMES> tags.

The syntax for a Frameset is as follows:

<FRAMESET

ROWS= value1, value2 … valuen

or

COLS=value1, value2  … valuen>

[<NOFRAMES>

<BODY>No_frames_document</BODY>

</NOFRAMES>]

 	<FRAME1 SRC….>

<FRAME2 SRC….>

<FRAMEn SRC….>

</FRAMESET>

Note: value can be measured in pixels, % or *. * determines relative space. That is, the remaining space in the browser window. 2*,* would indicate that two times as much relative space would be given to one Frame as to another.

There are two methods to add a Frameset to the document. Firstly, by clicking on the Frameset button in the New Document Script Input Form and secondly, by adding a Frameset to an existing document.

To add a Frameset to an existing document, click on the Other Styles button. Next, click on the Frameset button. Alternatively, select Tags|Other Styles|Frameset from the menu. In this case and in the case a new document, the Frameset input form will be displayed.

The Frameset Input Form

Templates

To add a Frame template to a document, simply click on the template required. This will add all the relevant HTML code to the document. You will then only have to add details of the individual Frames where specified.

Individual Creation

The allows you to add an individual Frameset manually. To do this, choose whether you wish to create rows or columns. Next fill in the size values required as either pixels, percentage or an asterisk. Values should be separated by commas (,).


Adding Headings to the Document

Headings create large text separated by line breaks to provide structure in the document. There are six sizes; 1 being the largest and 6 the smallest. HTML 3.0 and Netscape 2.0 also provide for alignment of the heading (left, right or centre). The syntax for a heading is as follows:

<Hheading_size [ALIGN=alignment]>selected_text</Hheading_size >

To add a heading to the selected text simply click on the Heading Size buttons (depending on the required size). Alternatively, select Tags|Heading Size from the menu. If in Netscape or HTML 3.0 editing mode, an input form will be shown. This option can be switched off in the Options form.

The Heading Alignment Form

Alignment can be either Left, Centre or Right (for Netscape 2.0 and HTML 3.0), or none specified.


Adding a New Heading Cell to a Table

Table Heading cells must only appear within table rows.  Each row need not have the same number of cells specified as short rows will be padded with blank cells on the right.

The heading cell will contain bold text that is centred as default. The format of a heading cell is as follows:

<TH

[ALIGN=horizontal_alignment_of _contents]

[VALIGN=vertical_alignment_of _contents]

[COLSPAN=number _of_columns _the_cell_spans]

[ROWSPAN=number _of_rows _the_cell_spans]

[BGCOLOR=background_colour]

[NOWRAP]>text

</TH>

To add a heading cell to the table, select the text that is required to be entered in the cell. Next, click on the New Heading button, or select Tools|Table Creator|New Heading from the menu. An input form will then be displayed.

The New Heading Cell Input Form

Caption

The text that is displayed in the heading cell. If text was selected in the document, it will be displayed here.

Wrap Text

If this box is checked the text will be wrapped otherwise their will be no line breaks in the text.

No. of Columns

The number of columns that the cell spans.

No. of Rows

The number of rows that the cell spans.

Selector Button

An Explorer 2.0 feature allows a background colour to be added. Clicking this button opens the Colour Palette.

Horizontal Alignment of Cell Contents

The horizontal alignment of the cell contents.

Vertical Alignment of Cell Contents

The vertical alignment of the cell contents.


Adding an Image to a Document

An image can be added to any HTML document. It should be in either .gif or .jpg format. The preferred format is .jpg as the graphic file size is smaller when compared to .gif, therefore decreasing download times. When adding images, the author should remember that large images take more time to download. This may cause the reader to become bored and not bother to wait but visit another site instead. Therefore, keep image files as small as possible. Netscape and Explorer 2.0 have specific tags that are only recognised in those browsers. The syntax for an image is as follows:

<IMG

SRC="main_image_name"

[LOWSRC="secondary_image_name"]

[ALT="text_alternative"]

[WIDTH=image_width_in_pixels]

[HEIGHT=image_height_in_pixels]

[HSPACE=space_in_pixels_to_left_and_right]

[VSPACE=space_in_pixels_above_and_below]

[BORDER=border_width_if_linked]

[ALIGN=alignment]

[USEMAP="map_file_location"]

[ISMAP]>

To add an image to a document, click on the Image button, select Tags|Image from the menu, or press F4. An input form will then be displayed.

The Image Input Form

Main Image Name

The name and path of the image to be displayed. The path can be relative from the current file or a complete URL address. To choose a file from hard disk, click on the Browse button.

Seconday Image Name

Netscape provides the function for a smaller image to be loaded first. This allows a small image to be loaded, then the document, and whilst the reader is reading the document, the main image will be loaded.

Text Alternative

The provides a text alternative to the image when graphics are not displayed on a page.

Image Alignment

This is the alignment of the image. The base values available at all levels are top, middle and bottom. In addition, Netscape and Explorer 2.0 support floating images (those images when test flows to the left or the right of the image). The alignment values for floating images are left and right. Netscape provides further alignment options with texttop, absolute middle, absolute bottom and baseline.

Image Width and Height

Netscape allows the height and width in pixels of the image to be specified. This allows Netscape to create a space for the image and allows the rest of the document to load, thus allowing the reader to read the document before the image is fully loaded.

Horizontal Space

Again, this is a Netscape specific attribute allowing a space (in pixels) to be put to the left and the right of the image.

Vertical Space

Another Netscape specific attribute allowing a space (in pixels) to be put above and below the image.

Border

If the image is a hypertext link to another location, it will be surrounded by a border. Netscape allows this width of this border to be set. It is measured in pixels and can range from 0 (invisible) upwards.

Image Map Details

An image map is an image that is logically (not visibly) split into sections. Each section is a hypertext link to a different location. When the user clicks on a section of the image, a script file is called that determines the coordinates within the image where the user clicked and where the location is that the coordinates correspond to. The standard location of this file is on the web site server. This is known as a sever-side image map. This can be implemented by clicking on the Server-Side Image Map checkbox. The entire image then needs to be placed inside a hypertext link, linking it to the script file on the server.

An new alternative that has been introduced by Netscape 2.0 and Explorer 2.0 is the client-side image map. In this case, the user click calls a map file, either in the same document or a separate map document. The map file then provides the link to the required location. To use this function, click the Client-Side Image Map checkbox and specify the location of the map file. This can be taken from the URL Manager by clicking on the URL Manager button.

It is feasible for an image map to be both client and server-side.


Adding a Hypertext Link

If a hypertext link is selected by readers, they are moved to another document, or to a different location in the current document. The syntax for a hypertext link is as follows:

<A

HREF="link_address[#sub_address_in_a_document]"

[TARGET="target_window"]>

caption/image

</A>

To add a hypertext link, select the text that is required to be linked. Next, click on the Link button select Tags|Link form the menu, or press F3. An input form will then be displayed.

The Link Input Form

Type

This combo box specifies the type of the hypertext link. When selected, the address box is updated with the type.

Caption

This box specifies the caption that will become the link. This can be text or details of an image. This box will already be completed if text was selected prior to clicking the Link button.

Target

This is the frames window in which the called document will be loaded. This is Netscape 2.0 specific.

Address

The address specifies the location (URL) of the document, or e-mail address where the link will jump to. To select a file from the hard disk, click the Local Disk button. To select an existing link from the URL Manager, click the Browse button. The address and caption will automatically be added to the URL Manager unless the Add to URL Manager checkbox is unchecked.

Anchor Name

This is the name of an anchor within a document. Use this to jump to a specified point either within the same document or another document. To select an existing anchor name from the URL Manager, click the Browse button. The anchor name and caption will automatically be added to the URL Manager unless the Add to URL Manager checkbox is unchecked.


Lists - An Overview
Adding Lists

Lists are an ordered structure of data. There are five types supported by HTML. To begin a list, click on the List Creator button or select Tools|List Creator|Open Creator from the menu. A list creator toolbar will then be displayed. To start a list, click on the relevant list button.

The five lists are

~ Ordered ~

~ Unordered ~

~ Definition ~

~ Directory ~

~ Menu ~


Ordered Lists

The Ordered List element is used to present a numbered list of items, sorted by sequence or order of importance. Netscape and Explorer 2.0 have added the TYPE attribute to allow the type of numbering to be specified. In addition, both browsers can also specify START and VALUE attributes to define the first number of the sequence. The HTML for a definition list is as follows:

<OL [TYPE=list_type] [START=start_value] [COMPACT]>

<LI [VALUE=item_value] [TYPE=list_type]>list_item

</OL>

The ordered list type can take the COMPACT attribute, which suggests that a compact rendering is used.

To begin a definition list click on the Ordered List button or select Tools|List Creator|Ordered List. A new list input form will then be displayed. At this point check the COMPACT checkbox if this attribute is required, and define the list type and start number if necessary and applicable.

To add a new item to the definition list, select the text required as the list item. Next, click on the New List Item button, select Tools|List Creator|NewList or press CTRL+L. An input form will then be displayed if in Netscape or Explorer 2.0 editing mode. The display of this form can be cancelled in the Options form.

New Ordered List Item Form

Value

Enter the value that is required for the list item. All subsequent values will increment from this value.

To complete the current list, click the List Complete button, or select Tools|List Creator|Finish List from the menu.


Unordered Lists

The Unordered List element is used to present a list of items which is typically separated by white space and/or marked by bullets. Netscape has added the TYPE attribute to allow the type of bullet to be specified. The HTML for a definition list is as follows:

<UL [TYPE=list_type] [COMPACT]>

<LI  [TYPE=list_type]>list_item

</UL>

The ordered list type can take the COMPACT attribute, which suggests that a compact rendering is used.

To begin a definition list click on the Unordered List button or select Tools|List Creator|Unordered List. A new list input form will then be displayed. At this point check the COMPACT checkbox if this attribute is required, and define the list type if necessary and applicable.

To add a new item to the definition list, select the text required as the list item. Next, click on the New List Item button, select Tools|List Creator|NewList or press CTRL+L.

To complete the current list, click the List Complete button, or select Tools|List Creator|Finish List from the menu.


Definition and Menu Lists
Directory and Menu Lists

A Directory List element is used to present a list of items containing up to 20 characters each. Items in a directory list may be arranged in columns, typically 24 characters wide. The syntax is as follows:

<DIR>

<LI>list_item

</DIR>

A menu list is a list of items with typically one line per item. The menu list style is more compact than the style of an unordered list. The syntax is as follows:

<MENU>

<LI>list_item

</MENU>

To begin a directory list click on the Directory List button or select Tools|List Creator|Directory List. A relevant tag will then be added to the document.

To begin a menu list click on the Menu List button or select Tools|List Creator|Menu List. A relevant tag will then be added to the document.

To add a new item to the definition list, select the text required as the list item. Next, click on the New List Item button, select Tools|List Creator|NewList or press CTRL+L.

To complete the current list, click the List Complete button, or select Tools|List Creator|Finish List from the menu.


Adding a Map File

  +

The current technique for implementing image maps requires communication with an HTTP server to process coordinate information and generate a new URL.  The Map file element allows browsers to process image maps internally.  These extensions allow the use of image maps in local HTML files or files accessed via alternate transport mechanisms such as FTP.  They also allow image map characteristics to be specified in a format that is not specific to the server software.

The Map file element is Netscape 2.0 and Explorer 2.0 specific. The syntax is as follows:

<MAP NAME="map_file_name">

<AREA SHAPE="shape" COORDS="1,2,..,n "

[HREF="linked_file_location"]

[NOHREF]>

</MAP>

Note: The map file shape can either point to another file or location or it can specify that nothing should happen if the user clicks on that point by defining NOHREF.

To add map details to a document, select the text that is required to be the map name. Next, click on the Other Styles button. Then click on the Client-Side Map File button contained in the styles toolbar that appears. Alternatively, select Tags|Other Styles|Client-Side Map File from the menu. An input form will then be displayed.

The Client Side Image Map File Input Form

Name

The name of the map file. This field will already be completed if text was selected in the document. To add the name of the file to the URL Manager, check the Add to URL Manager checkbox.

Shape

This combo box defines the current shape.

Coordinates

These boxes define the coordinates of the current shapes boundaries.

URL

This box specifies the location of the linked file. To choose a link from the URL Manager, click the Browse Button.

NoURL

Check this box to prevent the shape from linking to another location.

Add

Clicking this button adds the details of the current shape to the list of shapes for the map file. The shape, coordinates, URL and NoURL fields are then all reset to allow input of another shape.


Adding a Marquee

  +

This element allows the author to create a scrolling text marquee (as the name suggests, a scrolling text region much like the Windows Marquee screen saver). The feature is Explorer 2.0 specific. The syntax is as follows:

<MARQUEE

[ALIGN=alignment]

[BEHAVIOR=scroll_behaviour]

[BGCOLOR=colour]

[DIRECTION=scroll_direction]

[SCROLLAMOUNT=amount_of_pixels_between_redraw]

[SCROLLDELAY=time_between_redraw]

[HEIGHT=height_in_pixels_or_percentage]

[WIDTH=height_in_pixels_or_percentage]

[HSPACE=space_in_pixels_left_and_right]

[VSPACE=space_in_pixels_top_and_bottom]

[LOOP=number_of_repetitions]>

marquee_caption

</MARQUEE>

To add a marquee to a document, select the text that is required to be the marquee caption. Next, click on the Other Styles button. Then click on the Marquee button contained in the styles toolbar that appears. Alternatively, select Tags|Other Styles|Marquee from the menu. An input form will then be displayed.

The Marquee Input Form

Caption

The caption that the marquee will display. This field will already be completed if text was selected in the document.

Alignment

The alignment of the marquee in the document.

Behaviour

The behaviour of the marquee.

Loop

The number of repetitions of the marquee.

Scroll by

The amount of pixels to move the marquee before redrawing.

Delay for

The time taken between redrawing the marquee.

Direction

The direction of the marquee.

Colour

The background colour of the marquee. To choose from the Colour Palette, click the Browse button.

Height and Width

The height and Width of the marquee. This can either be absolute (pixels) or relative (percentage). This is defined in the Measurement box.

Horizontal Space

The space, in pixels, to the left and right of the marquee.

Vertical Space

The space, in pixels, above and below the marquee.


User Preferences

Aspire-x has a number of different preferences that the user can select in order to force Aspire-x to operate in a certain way. To open the user preferences form, select Tools|Options from the menu.

The User Preferences Form

Editing Permission

The level in which the document will be edited. All features specific to that level will be enabled whilst all other that do not apply will be disabled.

Add Default Text to New Documents

Checking this box will ensure that a form is displayed to collect details of a new HTML document every time one is created.

Browser .Exe Location

This is the full path of the users web browser. Once selected, the user can click on the Browser button to launch the web browser with the currently edited document. To select the path from the hard disk, click the Browse button.

User Files Location

Entering a directory path here will ensure that every time a file is opened or saved, the default directory will be the one specified. To select a path from the hard disk, click on the Browse button.

Font

This group of boxes contains details of the current font preferences for the editing window. To select a new choice, click on the Browse button to open the systems font dialog. To reset the fields, click on the Default button.

Background

This box determines the background colour of the editing window. To select a colour from the systems colour palette, click on the Browse button. To reset the colour, click on the Default button.

Create Backup Copy

Checking this box will ensure that a backup copy of the edited documents are made whenever saved. The backup extension is .BAK.

Prompts

These checkboxes determine whether certain prompts are displayed. For example, the user may wish to use the <P></P> tags instead of <DIV></DIV> tags in Netscape 2.0 editing mode.

Font Size

This determines whether the <FONT SIZE=x> is relative (x sizes above the basefont) or absolute (an exact font size). If relative a + symbol is placed in front of the font size.

Upper Case Tags

Checking this box will ensure that all HTML tags appear in upper case, e.g. <B>. Leaving this box blank will result in lower case tags, e.g. <b>


Defining a Paragraph

Typically, paragraphs are surrounded by a vertical space of one line or half a line. With some browser, the first line in a paragraph is indented. The syntax for a paragraph is as follows:

<P [ALIGN=alignment]>selected_text</H>

However, HTML 3.0 and Netscape 2.0 syntax is slightly different replacing the <P></P> tags with <DIV></DIV>. This feature can be disabled in Options form.

To add a paragraph to the selected text simply click on the Paragraph button. Alternatively, select Tags|Paragraph from the menu or press F10. If in Netscape, Explorer 2.0, or HTML 3.0 editing mode, an input form will be shown. This option can be switched off in the Options form.

The Paragraph Alignment Form

Alignment can be either Left, Centre or Right (for Netscape 2.0 and HTML 3.0), or none specified.


Tables - An Overview
Tables - Overview

Tables provide a neat, structured form of presentation. They are made up of a series of cells that are presented in rows and columns. The cells can either be heading cells or data cells. A table is edited in rows (i.e. working from left to right). To create a table, the table is defined, then the row, then either the heading or the data cells.

There are two methods to edit tables in Aspire-x:

~ Start a new table ~

~ Insert into an existing table ~


Starting a New Table

The HTML code is as follows for a new table. Some elements are specific to Netscape and Explorer 2.0.

 <TABLE

[WIDTH=width_in_pixels_or_percent]

[BORDER=border_width]

[CELLSPACING=space_between_cells(pixels)]

[CELLPADDING=space_between_cell_and_contents(pixels)]

[ALIGN=alignment>]

[<CAPTION [ALIGN=alignment]>table_caption</CAPTION>]

table_body

</TABLE>

To start a new table click on the Table Creator button or select Tools|Table Creator|New Table from the menu. An input form to collect details of the new table will be displayed.

The New Table Form

Width

The width of the table. This can be absolute (pixels) or relative (percentage).

Cellspacing

This is a Netscape element to determine the space between cells. This is measured in pixels.

Cellpadding

This is a Netscape element to determine the space between a cell and its contents. This is measured in pixels.

Border

Checking this box forces the table to have a border surrounding it. By default, it does not.

Border Width

Netscape allows the width of the border to be defined. This is measured in pixels.

Alignment

Explorer to allows the table to be treated like a floating image. That is aligning to the left or right and allowing text to flow to down the side of it.

Caption

The caption is the heading that is placed either along the top or the bottom of the table. If text has been selected in the document, this field will already be completed.

Completing the Table

To complete the table, click on the Finish Table button, or select Tools|Table Creator|Finish Table from the menu. A prompt will appear asking if you wish to add the closing </TABLE> tag.


Inserting into an Existing Table

To insert an item into an existing table, click on the Insert to Existing Table button or select Tools|Table Creator|Insert To Existing Table from the menu. The New Table input form will be bypassed. Instead, the Table Creator toolbar will be displayed and the New Row input form will be called.

Completing the Table

To complete the table, click on the Finish Table button, or select Tools|Table Creator|Finish Table from the menu. A prompt will appear asking if you wish to add the closing </TABLE> tag.


Starting a New Table Row

A table contains rows running from left to right. Each of these rows contains cells. These cells can either contains a heading (a heading cell) or text and images (a data cell). The syntax for a new row is

<TR

[ALIGN=horizontal_alignment_of_row_contents]

[VALIGN=vertical_alignment_of_row_contents]>

row_details

</TR>

To begin a new row, click on the New Row button or select Tools|Table Creator|New Row from the menu. The New Row input form will be displayed where choices can be made as to the horizontal and vertical alignment of the contents of the cells within the row.

Completing the Row

To complete the row, click on the Finish Row button, or select Tools|Table Creator|Finish Row from the menu. A prompt will appear asking if you wish to add the closing </TABLE> tag.


Adding a Horizontal Rule

A Horizontal Rule is a divider between sections of text. The syntax for a Horizontal Rule is as follows. Netscape and Explorer 2.0 have added the SIZE, WIDTH, ALIGN and NOSHADE attributes.

<HR

[SIZE=rule_height(pixels)]

[WIDTH=rule_width(pixels)]

[ALIGN=alignment]

[NOSHADE]>

To add a horizontal rule, click on the Horizontal Rule button, select Tags|Horizontal Rule from the menu or press F11. The Horizontal Rule input form will be displayed if in Netscape of Explorer 2.0 editing mode. However, this options can be turned off on the Options form. The input form collects details on the rule height, the rule width, the rule alignment and whether or not the rule has 3D shading. Netscape 2.0 and Explorer 2.0 allow the rule to be right aligned.


Adding Other Styles
Selecting Other Styles

Within the HTML code there are a number of other styles than can be applied to text. In addition, symbols and characters can also be included in documents by typing in their escape codes. To simplify this operation, Aspire-x has a selection form to allow the selection on different text formats and a number of symbols (although not the complete range).

Selecting a text format

  +

To select a text format, select the text to be formatted. Next, click on the Other Styles button followed by the Further Text Styles button. Alternatively  select Tags|Other Styles|Text Styles from the menu. The Text Styles selection form will then be displayed. From this form select the required text format. Note, however, that certain text styles are only available at certain editing levels. For example, Netscape supports the <BLINK> style, but other editing levels do not. The syntax for the text style is as follows:

<text_style>selected_text</text_style>

Selecting a character or symbol

  +

To insert a character or symbol, click on the Other Styles button followed by the Characters button. Alternatively  select Tags|Other Styles|Characters from the menu. The Characters selection form will then be displayed. From this form select the required character. The syntax for the character is as follows:

&escape_code;


Adding a New Document Script

A new document script involves adding the skeleton tags to begin the HTML document. This New Document Script input form is called whenever a new document is opened unless the option has been turned off in the Options form.

The New document Script Input Form

Caption

The caption that appears in the title bar at the top of the browser.

Document URL

The URL of the document. This field is optional and only needs to be used if the file is read out of context from its URL location.

Default Window

If using Frames, this filed can specify the default frame window to which all linked documents called from within the document will be loaded. This is Netscape 2.0 specific.

Indexed

To include a search index at the top of the document, check this box.

Search Caption

Netscape provides the facility to change the caption that is provided with the search box. Use this box to add a new caption.

Background Browse

To add a background to the document, click the Browse button. The Background input form will then be displayed.  If a Frameset is also added, the background tags will appear in the <NOFRAMES></NOFRAMES> section. After closing the Background form and if a background has been added, the Added checkbox will be checked and grayed.

Frame Browse

Click the Browse button to add a Frameset. Clicking the button will open the Frameset input form. After closing the Frameset form and if a Frame has been added, the Added checkbox will be checked and grayed.


The URL Manager

The URL Manager allows web locations to be stored and input into documents at a later time. The URLs will be added through various forms such as the Link, Anchor and Map forms. URLs can also be added directly in the URL Manager.

The URLs stored in the Manager can be added or deleted. Selection can also be made from the list to include them in a document. This feature is called directly though forms such as Link, Anchor and Map forms. To open then Manager in order to view or update the entries, click on Tools|URL Manager.


The User Tags Manager

The User tags manager allows the user to create custom tags. This may be because Aspire-x has not covered particular tags that are used by the document author, or because the author wishes to include a frequently used tag that is only one mouse click away, rather than having to complete an input form first.

The User tags stored in the Manager can be added or deleted. When inserting tags, the tags syntax should be:

<open_tag></closing_tag>

or

<Opening_tag>

The tags are added to a document through the User Defined combo box on the main toolbar. To include a tag, select the text, click the box and select the required tags.

To open then Manager in order to view or update the entries, click on Tools|User Tags Manager.


Launching the Web Browser

In order to launch the web browser, the path of the executable file must first be set. This can be done in the Options form.

Then, in order to launch the browser with the current saved document, simply click on the Web Browser button, or select Tools|Web Browser. This will allow you to view the document as you work on it.

Note: It is suggested that after viewing the document you use the Windows 95 navigation toolbar to switch between Aspire-x and the browser, rather than closing and then reopening the browser every time you want to view the document. This will significantly decrease your editing time.


Enforced Line Breaks/No Line Breaks

  +

The enforcing of a line break if required and the no line break elements are Netscape and explorer 2.0 specific.

The No Break element means all the text between the start and end of the <NOBR> elements cannot have line breaks inserted.

The Word Break element is for the very rare case when a <NOBR> section requires an exact break. The <WBR> element does not force a line break (<BR> does that) it simply lets the browser know where a line break is allowed to be inserted if needed.

To add No Break tags, select the text that is not to be broken. Next click on the Other Styles button followed by the No Break button. Alternatively, select Tags|Other Styles|No Break from the menu. The syntax for No Break tags is as follows:

<NOBR>selected_text</NOBR>

To add Word Break tag, click on the Other Styles button followed by the Word Break button. Alternatively, select Tags|Other Styles|Word Break from the menu. The syntax for the word break tag is as follows:

text<WBR>text


Centering

  +

Centering places the selected text a centre alignment. It is now preferable to use centering in paragraph and heading tags rather than use the separate centre tag.

However, should you wich to use the centre tags, select the text that you require to be centred. Next, click on the Other Styles button followed by the Centre button. Alternatively, select Tags|Other Styles|Centre from the menu. The syntax for the centre tags is as follows:

<CENTER>selected_text<CENTER>


Bold, Italics and Underline

These tags are self-explanatory. The syntax is as follows:

<tag_type>selected_text</tag_type>

where tag_type is either B, I or U.

To add bold tags, select the text to be manipulated. Next, click on the Bold button, select Tags|Bold from the menu, or press Ctrl+B.

To add italics tags, select the text to be manipulated. Next, click on the Italics button, select Tags|Italics from the menu, or press Ctrl+I.

To add underline tags, select the text to be manipulated. Next, click on the Underline button, select Tags|Underline from the menu, or press Ctrl+U. Underline is HTML 3.0 and Explorer 2.0 specific.