Introduction

This is a simple guide for producing documents in HTML, the markup language used by the World Wide Web. This particular document was initially produced using Word and later using "Claris Home Page". This information is a collection of information from various sites around the Internet plus local knowledge and expertise.

All examples in this document utilise Word.

Acronym expansion

WWW: World Wide Web
SGML: Standard Generalised Markup Language - This is perhaps best be thought of as a programming language for style sheets.
DTD: Document Type Definition - This is a specific implementation of document description using SGML.
HTML: HyperText Markup Language - HTML is a SGML DTD. In practical terms, HTML is a collection of styles used to define the various components of a World Wide Web document.

What this beginners guide doesn't cover

This guide assumes that you have:

	at least a passing knowledge of how to use a WWW browser (Netscape or Explorer)
	a general understanding of how World Wide Web works
	access to a World Wide Web server for which you would now like to produce HTML documents

Creating HTML documents

HTML documents are in plain text format and can be created using any text editor (e.g., Word, Notepad, Wordpad etc.). A WWW browser (Netscape Gold ver 2 or above) does include a rudimentary HTML editor in a WYSIWYG environment, and you may want to try one of them first before delving into the details of HTML.

You can preview documents in progress with Netscape (and some other WWW browsers or the add-in for Word6). In Netscape, open the document using the View Source option under the View menu. This will allow you to view the source code, if you have the Gold version, use "edit" to make changes.

The minimal HTML document

Here is a barebones example of HTML:

____________________________________________________________________

<TITLE>The simplest HTML example</TITLE>
 
  <H1>This is a level one heading</H1>
 
  Welcome to the world of HTML.  
  This is one paragraph.<P>
 
  And this is a second paragraph.<P>

____________________________________________________________________

Click here to see the formatted version of the example.

HTML uses tags to tell the World Web viewer how to display the text. The above example uses

	the `<TITLE>` tag (which has a corresponding `</TITLE>` tag), which specifies the title of the document,
	the `<H1>` header tag (with corresponding `</H1>`), and
	the `<P>` end-of-paragraph tag.

HTML tags consist of a left angular bracket (<), known as a ``less than'' symbol to mathematicians, followed by some text (called the directive) and closed by a right angular bracket (>). Tags are usually paired, e.g.<H1> and </H1>. The ending tag looks just like the starting tag except a slash (/) precedes the text within the brackets. In the example,<H1> tells the viewer to start formatting a top level heading;</H1> tells the viewer that the heading is complete.

The primary exception to the pairing rule is the <P> end-of-paragraph tag. The </P> is an optional tag.

Note: HTML is not case sensitive. <title> is completely equivalent to <TITLE> or <TiTlE>.

Not all tags are supported by all World Wide Web browsers. If a browser does not support a tag, it will generally just ignore it.

Titles

Every HTML document should have a title. A title is generally displayed separately from the document and is used primarily for document identification in other contexts (e.g., a WAIS search). Choose about half a dozen words that describe the document's purpose.

In Netscape, the Document Title field is at the top of the screen

The directive for the title tag is <title>. The title generally goes on the first line of the document.

Headings

HTML has six levels of headings (numbered 1 through 6), with 1 being the most prominent. Headings are displayed in larger and /or bolder fonts than the normal body text. The first heading in each document should be tagged <H1>. The syntax of the heading tag is:

  <Hy>Text of heading</Hy>

where y is a number between 1 and 6 specifying the level of the heading.

For example, the coding for the ``Headings'' section heading above is

  <H3>Headings</H3>

Title versus first heading: In many documents (including this one), the first heading is identical to the title. For multi-part documents, the text of the first heading should be suitable for a reader who is already browsing related information (e.g., a chapter title), while the title tag should identify the node in a wider context (e.g., include both the book title and the chapter title).

Paragraphs

Unlike documents in most word processors, carriage returns and white space in HTML files are not significant. Word wrapping can occur at any point in your source file, and multiple spaces are collapsed into a single space (except in the <TITLE> field). Notice that in the barebones example, the first paragraph is coded as

  Welcome to HTML.
  This is the first paragraph.

In the source file, there is a line break between the sentences. A Web browser ignores this line break and starts a new paragraph only when it reaches a <P> tag.

Important: You must end each paragraph with <P>. The viewer ignores any indentations or blank lines in the source text. Without the <P> tags, the document becomes one large paragraph. HTML relies almost entirely on the tags for formatting instructions. (The exception is text tagged as ``preformatted,'' explained below.) For instance, the following would produce identical output as the first barebones HTML example:

________________________________________________________________________

  <TITLE>The simplest HTML example</TITLE><H1>This is a level 
  one heading</H1>Welcome to the world of HTML. This is one 
  paragraph.<P>And this is a second.<P>

________________________________________________________________________

However, to preserve readability in HTML files, headings should be on separate lines, and paragraphs should be separated by blank lines.

Linking to other documents

The chief power of HTML comes from its ability to link regions of text (and also images) to another document (or an image). These regions are typically highlighted by the browser to indicate that they are hypertext links.

In Netscape, hypertext links are in color and underlined by default. It is possible to modify this in the Options menu under Preferences.

HTML's single hypertext-related directive is A, which stands for anchor. To include anchors in your document:

Start by opening the anchor with the leading angle bracket and the anchor directive followed by a space: <a
Specify the document that's being pointed to by giving the parameter href="filename.html"followed by a closing angle bracket: >
Enter the text that will serve as the hypertext link in the current document (i.e., the text that will be in a different color and /or underlined)
Enter the ending anchor tag: </A>

Below is an sample hypertext reference:

  <a href="Page2b.html">Documentation</a>

This entry makes ``Documentation'' the hyperlink to the document "Page2b.html".

Uniform Resource Locator

A Uniform Resource Locator (URL) refers to the format used by WWW documents to locate other files. A URL gives the type of resource being accessed (e.g., gopher, WAIS) and the path of the file. The format used is:

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

where scheme is one of:

file: a file on your local system, or a file on an anonymous ftp server
http: a file on a World Wide Web server
gopher: a file on a Gopher server
WAIS: a file on a WAIS server

The scheme can also be news or Telnet, but these are used much less often than the above. The port number can generally be omitted from the URL.

The two main uses are "file" for local intranet sources and http for web sources

For example if you wanted to insert a link to this beginners guide, you would insert

  <A HREF="file://BegGuide.htm">Beginners Guide</A>

into your document. This would make the text ``Beginners Guide'' a hyperlink leading to this document.

Anchors to Specific Sections in Other Documents

Anchors can also be used to move to a particular section in a document. Suppose you wish to set a link from document A and a specific section in document B. First you need to set up what is called a named anchor in document B. For example, to add an anchor named ``Jabberwocky" to document B, you would insert

  Here's <A NAME="Explorer">some text</a>.

Now when you create the link in document A, you include not only the filename, but also the named anchor, separated by a hash mark(``#''):

    This is my <A HREF="documentB.html#Explorer">link</a>.

Now clicking on the word ``link'' in document A would send the reader directly to the words ``some text'' in document B.

Anchors to Specific Sections within the Current Document

The technique is exactly the same except the file name is now omitted.

Note: The Netscape Back button does not work for an anchor within a document because the Back button is designed to move to a previous document. Move back manually within the document using the scroll bar. (The Back button will return to the start of a hyperlink).

Additional markup tags

The above is sufficient to produce simple HTML documents. For more complex documents, HTML also has tags for several types of lists, extended quotes, character formatting and other items, all described below.

Lists

HTML supports unnumbered, numbered, and descriptive lists. For list items, no paragraph separator is required. The tags for the items in the list terminate each list item.

Unnumbered Lists

Start with an opening list <ul> tag.
Enter the <li> tag followed by the individual item. (Remember that no closing tag is needed.)
End with a closing list </ul> tag.

Below an example two-item list:

  <UL>
  <LI> apples
  <LI> bananas
  </UL>

The output is:

	apples
	bananas

Note that different viewers display an unordered list differently. A viewer might use bullets, filled circles, or dashes to show the items.

Numbered Lists

A numbered list (also called an ordered list, from where the abbreviation comes) uses the <ol> directive to start a list rather than the <ul> directive. The items are tagged using the same <li> tag as for a bulleted list. For example:

  <OL>
  <LI> oranges
  <LI> peaches
  <LI> grapes
  </OL>

The list looks like this online:

oranges
peaches
grapes

Descriptive Lists

A description list usually consists of alternating a description title (abbreviated as dt) and a description description (abbreviated as dd). The description generally starts on a new line, because the viewer allows the full line width for the contents of the dt field.

Below is an example description list :

  <DL>
  <DT> My Leisure Industries
  <DD> My Leisure Industries is located in Sometown a suburb of Sydney.
       It is the largest Australian company producing leisure machines.
  <DT> Technical Documentation Department.
  <DD> The Technical documentation department is located in the Main building.
  </DL>

The output looks like this:

My Leisure Industries

My Leisure Industries is located in Sometown a suburb of Sydney.

It is the largest Australian company producing leisure machines.

Technical Documentation Department.

The Technical documentation department is located in the Main building.

The <DT> and <DD> entries can contain multiple paragraphs (separated by paragraph tags), lists, or other description information.

Nested Lists

Lists can be arbitrarily nested. A list item can itself contain lists. You can also have a number of paragraphs, each themselves containing nested lists, in a single list item, and so on.

Remember that the display of an unordered list varies with the viewer. A browser may not provide successive levels of indentation or modify the bullets used at each level.

An example nested list:

  <UL>
  <LI> A few Australian states:
    <UL>
    <LI> New South Wales
    <LI> Queensland
    </UL>
  <li> One island state:
    <UL>
    <LI> Tasmania
    </UL>
  </UL>

The nested list is displayed as

A few Australian states:

	New South Wales
	Queensland

One island state:

Tasmania

Preformatted Text

Use the <pre> tag (which stands for ``preformatted'') to include text in a fixed-width font and to cause spaces, new lines, and tabs to be significant. This is useful for program listings. For example, the following lines in your source file:

<PRE>
  This is text that
  needs to stay exactly 
  as formatted
         Amount          Total
        $1000.00        $1000.00
        $2000.00        $3000.00                                
</PRE>

display as:

  This is text that
  needs to stay exactly 
  as formatted
         Amount          Total
        $1000.00        $1000.00
        $2000.00        $3000.00

Hypertext references (and other HTML tags) can be used within <pre> sections.

Extended quotes

Use the <blockquote> and </blockquote> tags to include quotations in a separate block on the screen.

For example

  <blockquote>
  Let us not wallow in the valley of despair. I say to you, my
  friends, we have the difficulties of today and tomorrow. <P>
 
  I still have a dream. It is a dream deeply rooted in the
  Australian dream. <P>
 
  I have a dream that one day this nation will rise up and 
  live out the true meaning of its creed. We hold these truths 
  to be self-evident that all men are created equal. <P>
  </blockquote>

The result is

Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow.
I still have a dream. It is a dream deeply rooted in the Australian dream.
I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.

Addresses

The <ADDRESS> tag is generally used within HTML documents to specify the author of a document and provides a means of contacting the author (e.g., an e-mail address). This is usually the last item in a file and generally starts on a new, left-justified line.

For example, the last part of the HTML file for this primer could be

  <ADDRESS>
  A Beginner's Guide / Paces / somename@someisp.net
  </ADDRESS>

The result is:

A Beginner's Guide / Paces / somename@someisp.net

Character formatting

Individual words or sentences can be put in special styles. Logical styles are those that are configured by your viewer. For example, <CITE> may be defined as italic by your viewer. Each time you enter <CITE> tags, the viewer automatically displays the text in italics.

A physical style is one that you determine, and the viewer displays what you have coded. For example <I>tells the viewer to display your text in italics.

For HTML-coded documents, you should use logical styles whenever possible. Future implementations of HTML may not implement physical styles at all.

Italic

	`<I>text</i>` puts text in italics (Beginners Guide)
	`<em>text</em>` also italicises text
	`<cite>text</cite>` is used for citations of names of manuals, sections, or books (Beginners Guide)
	`<var>text</var>` indicates a variable (filename)

Bold

	`<b>text</b>` puts text in bold (Important)
	`<strong>text</strong>` also emphasises text (Note:)

Fixed width font

	`<tt>text</tt>` puts text in a fixed-width font (`1 SU = 1 CPU hour`)
	`<code>text</code>` also puts text in a fixed-width font (`1 SU = 1 CPU hour`)
	`<samp>text</samp>` formats text for samples (`-la`)
	`<kbd>text</kbd>` displays the names of keys on the keyboard (`HELP`)

Other

<dfn>text</dfn> displays a definition in italics

Special Characters

Three characters out of the entire ASCII (or ISO 8859) character set are special and cannot be used ``as-is'' within an HTML document. These characters are left angle bracket (<, right angle bracket (>), and ampersand (&).

The angle brackets are used to specify HTML tags (as shown above), while the ampersand is used as the escape mechanism to produce these and other characters if required in a document:

	`<` is the escape sequence for `<`
	`>` is the escape sequence for `>`
	`&&` is the escape sequence for `&`

Note that ``escape sequence'' means that the given sequence of characters represents the single character in an HTML document and that the semicolon is required. The conversion to the single character itself takes place when the document is formatted for display by a browser.

There are additional escape sequences, such as a whole set of sequences to support 8-bit character sets (ISO 8859-1). For example:

	`ö` is the escape sequence for a lowercase `o` with an umlaut: �
	`ñ` is the escape sequence for a lowercase `n` with an tilde: �
	`È` is the escape sequence for an uppercase `E` with a grave mark: �

Inline Images

Most browser's can display BMP, JPEG or GIF format images inside documents. Each image takes time to process and slows down the initial display of the document. Using a particular image multiple times in a document causes very little performance degradation compared to using the image only once. The reason for this, is that most browser's cache the data locally.

NOTE: The <img> tag is an HTML extension that was first implemented in NCSA Mosaic. It is now understood by most other World Wide Web browsers.

To include an inline image in your document, enter:

    <IMG SRC="filename.GIF">

By default the bottom of an image is aligned with the text as shown in this paragraph.

Include the align=top parameter if you want the viewer to align adjacent text with the top of the image as shown in this paragraph. The full inline image tag with the top alignment is:

    <IMG ALIGN=top SRC="filename.GIF">

The above example assumes that the GIF file is stored in the same location as the page being displayed by the browser. It is a good idea to create a directory solely for images, and then a common address location is used.

If you have a larger image (i.e., one that fills most of your screen), you should insert an end of paragraph tag (<p>) before inserting the image parameter. End with another paragraph tag. (Or you might want to have the image open a new window, which is explained below.)

External Images

You may want to have an image open as a separate document when a user activates a link on either a word or a smaller version of the image that you have "inlined" into your document. This is considered an external image and is particularly useful because (assuming you use a word for your hypertext link) you do not have any processing time degradation in the main document. Even if you include a small image in your document as the hyperlink to the larger image, the processing time for the ``postage stamp'' image is less than the full image. Typically, a return button to a home page etc.

To include a reference to a graphic in an external document, use

    <A HREF = "filename.gif">link anchor</A>

Make certain the image is in GIF, TIFF or JPEG format.

Troubleshooting

	While certain HTML constructs can be nested (for example, you can have an anchor within a header), they cannot be overlapped. For example, the following is invalid HTML:
	<h1>This is <a name="foo">invalid HTML.</h1></a>
	Because many current HTML parsers aren't very good at handling invalid HTML, avoid overlapping constructs.
	In most browser's, when an `<img>` tag points at an image that does not exist or cannot be otherwise obtained from whatever server is supposed to be serving it, the NCSA logo is substituted. For example, entering `<img href="DoesNotExist.gif">`(where "DoesNotExist.gif" is a nonexistent file) causes a small "tile" to be displayed: If this happens to you, first make sure that the referenced image does in fact exist and that the hyperlink has the correct information in the link entry. Next verify that the file permission is set appropriately (world-readable).

A Longer Example

Here is a longer example of a HTML document:

________________________________________________________________________

  <TITLE>A Longer Example</TITLE>
  <H1>A Longer Example</H1>
 
  This is a simple HTML document. This is the first
  paragraph. <P>
 
  This is the second paragraph, which shows special effects.  This is a 
  word in <I>italics</I>.  This is a word in <B>bold</B>.
  Here is an inlined GIF image: <IMG SRC="myimage.gif">. 
  <p>
 
  This is the third paragraph, which demonstrates links.  Here is 
  a hypertext link from the word <A HREF="subdir/myfile.html">foo</A>
  to a document called "subdir/myfile.html". (If you 
  try to follow this link, you will get an error screen.) <P> 
 
  <H2>A second-level header</H2>
 
  Here is a section of text that should display as a 
  fixed-width font: <P>
 
  <PRE>
      On the stiff twig up there
      Hunches a wet black rook
      Arranging and rearranging its feathers in the rain ...
  </PRE>
 
  This is a unordered list with two items: <P>
 
  <UL>
  <LI> cranberries
  <LI> blueberries
  </UL>
 
  This is the end of my example document. <P>
 
  <address>Me (somename@someisp.net)</address>

Click here to see the formatted version.

Basic HTML Elements

<html>...</html>

Used to call out the area of the document subject to HTML: parsing. Usually the first and last lines in the file.

Can Include: <head> <body>

<head>...</head>

Used to set off the header area of the file, in which should be found the TITLE and other header elements.

Can Include:

Allowed inside: <html>

<body>...</body>

Used to set off the body of the file.

Attributes:

background="&133;" The name or URL for an image to tile on the page background.

bgcolor="&133;" The colour of the page background.

text="&133;" The colour of the pages text.

link="&133;" The colour of unfollowed links.

alink="&133;" The colour of activated links.

vlink="&133;" The colour of followed links.

Can Include: <h1><h2><h3><h4><h5><h6><p><ol><ul><dir><menu><dl>

Allowed Inside <html>

<isindex>

Causes most browsers to display a window for launching searches of the file in question.

Attributes:

prompt="&133;" The prompt for a search field.

Allowed Inside: <blockquote><body><dd><form><head><li>

<title>...</title>

Names the document. Does not create a visible header with the title information.
Allowed inside: <head>

<nextid>

Links the file in question to another file. ARCHAIC, now considered obsolete

<base>

Specifies the base path name for the file set.

Attributes:

href="&133;" The full URL for this document

Allowed Inside <head>

<p>

Causes a paragraph break with space.The closing </P> is optional.

Attributes: Align=center Centres the paragraph

Can Include: <a> <img> <br> <em> <strong> <code> <samp> <kbd> <var> <cite> <tt> <b> <i>

Allowed inside: <blockquote> <body> <dd> <form> <lt>

<br>

Causes a line break with no space.

Attributes:

Clear="..." Causes text to stop flowing around images. Possible values are left, right, center

Allowed inside: <h1><h2><h3><h4><h5><h6><p> <li> <samp> <pre><var><strong><tt>

<pre>...</pre>

Turns off HTML parsing of information between the tags.

<plaintext>

Treats everything to the end of the file as flat text (no HTML parsing)

<blockquote>...</blockquote>

Used to set off a quotation. Typically causes indents on left and right margins.

Can Include: <h1><h2><h3><h4><h5><h6><p><ol><ul><dir><menu><dl>

Allowed inside: <blockquote> <body> <dd> <form> <li> <th> <td>

<a name=...>...</a>

Identifies an anchor in the document: a place to jump TO.

Used by Hyperlinks

<a href=...>...</a>

Identifies a link to an anchor in this or another file, determined by the presence of a URL or file specification (linking to another file) or a "#" designator, which signals a link to an anchor in this file.

Attributes:

href="..." The URL of the document to be linked to

name="..." The name of the anchor, see <a name> above.

rel="..." The relationship between the linked to document i.e. TOC or Glossary

rev="..." A reverse relationship between the current document and the linked to document.

urn="..." A Uniform Resource Number (URN), a unique identifier, different from a URL.

title="..." The title of the linked to document.

methods="..." The method with which the document is to be retrieved, i.e. FTP, Gopher etc.

Can Include: <img> <br> <em> <strong> <code> <samp> <kbd> <var> <cite> <tt> <b> <i>

Allowed Inside: <b> <cite> <code> <dd> <dt> <em> <i> <kbd> <h1><h2><h3><h4><h5><h6>

<h1>...</h1>

Creates a top-level heading.

<h2>...<.h2>

Creates a second-level heading.

<h3>...</h3>

Creates a third-level heading.

<h4>...</h4>

Creates a fourth-level heading.

<h5>...</h5>

Creates a fifth-level heading.

<h6>...</h6>

Creates a sixth-level heading.

<em>...</em>

Denotes emphasis. Typically treated as bold (<b>...</b>)

<strong>...</strong>

Strong emphasis. Typically treated as bold.

<code>...</code>

Code sample, usually courier font.

<samp>...</samp>

Sample text

<kdb>...</kbd>

Text to be typed, usually courier font.

<var>...</var>

A variable or placeholder for some other value.

<dfn>...</dfn>

A definition of a term

<cite>...</cite>

A citation

<b>...</b>

Bold faced text.

<i>...</i>

Italic text.

<u>...</u>

Underlined text.

<tt>...</tt>

Typewriter / unispace font.

<dl>...<dt>...<dd>...</dl>

Definition List. Terms are called out by <dt> and entries by <dd>

dt & dd are only allowed inside dl.

dl is the definition list

Attributes: Compact. This specifies a formatting that takes less white space to present.

<ul>...<li>...</ul>

Unordered list. Typically creates a bulleted list.

Attributes: type="..." The bullet dingbat to use to mark list items. The possible values are

disc, circle, square

Allowed Inside: <blockquote> <body> <dd> <form> <li> <th> <td>

<ol>...<li>...</ol>

Ordered list. Typically creates a numbered list.

Attributes: type="..." The type of numerals to label the list with. The possible values are

A, a, I, i, 1.

Allowed Inside: <blockquote> <body> <dd> <form> <li> <th> <td>

<menu>...<li>...</menu>

Creates a menu of options, li must start each item.

Allowed Inside: <blockquote> <body> <dd> <form> <li> <th> <td>

<dir>...<li>...</dir>

Creates a directory listing, li must start each item.

Allowed Inside: <blockquote> <body> <dd> <form> <li> <th> <td>

<li>

A list item for use with <ol>, <ul>, <menu> or <dir>

Attributes:

type="..." The type of bullet or number to label this item with. Possible values are

disc, circle, square, A, a, I, i, 1.

value="..." The numeric value this list item should have, affects all following items in a <ol> list.

Can Include: <p><ol><ul><dir><menu><dl> <pre><blockquote> <a> <img> <br> <em> <strong>

Comments. Used like this: <!-- THIS IS A COMMENT>

<address>...</address>

Used to add information to the trailer / end of the document, after </body>, normally signature or mail addresses

Can Include: <a> <img> <br> <em> <strong> <code> <samp> <kbd> <var> <cite> <tt> <b> <i>

<img>...</img>

Used to identify an image to be inserted into the document at the point when <img src= is detected.

Attributes:

ismap This image is a clickable image map.

src="..." The URL of the image.

alt="..." The text string that will be displayed in browsers that cannot support images.

align="..." Determines the alignment of a given image. Possible values are

left - aligns to left of a column

right - aligns to right of column

top - vertical alignment with other items in the same line

middle - vertical alignment with other items in the same line

bottom - vertical alignment with other items in the same line

texttop - same as top

absmiddle - same as middle, but absolute.

baseline - at the baseline of this row

absbottom - same as bottom, but absolute.

How to create a simple Web Page

Introduction

This exercise will produce a very simple web page with one (1) hyperlink within the document and one (1) hyperlink to an external document. This external document can be a "local" document, that is, it resides on the same server or a "remote" document that resides on the Internet.

The document will look similar to this:

Your Heading

Some text

A internal link within the document

An external link

The tools required to produced the web page are:

	Word
	Word Internet Assistant - If you do not have this, contact www.microsoft.com
	Netscape Browser version 2.01 or above. Internet Explorer will also do.
	This guide.
	Notepad - to review the HTML codes.

How To

Start up Word if not already running.

Select "File" then "new".

Select the HTML template for your document. This will only be available if Internet assistant was installed.

Click "ok"

Your should now have a blank document open using the HTML template.

Now select "heading 1" from the dropdown box on the toolbar

Now type in the Heading for your page.

To apply formatting, like bold, size etc, use the toolbar buttons.

Press the "enter" key

Change the selection in the dropdown box to "normal"

Type the text that you wish to display, we will call it "body text".

For this example:

Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow.
I still have a dream. It is a dream deeply rooted in the Australian dream.
I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.

Note: for the internal link to work, you must have a least one page of text.

Move to a new line by pressing enter.

Press the "horizontal rule" button on the toolbar

A line will be drawn on the page.

Move to a new line by pressing "enter".

Type - This is a link to text in the same document.

This is a link to an external address

Now we need to create the links.

Firstly, you need to create the linked-to location within the first text we typed. This is done using the <a> html code.

Decide on the location that you wish to jump to and make sure that the cursor is at that location. From the "menu" bar select "insert", then "html markup".

Now insert the relevant code. In my example it would be <a name="start"></a>, click ok. Depending on the name you gave the anchor, it may appear in blue in the document. Do not worry, when you view it, it will not show.

Good we have just installed a "anchor". Now to install the link to that anchor.

This would be a good time to save your document. When saving, make sure that the file extension is .htm, otherwise all the html codes will not be inserted. The difference between htm and html extension is that the three letter version is for PC and clones, whereas the html extension is for Mac's.

Select the word to use for the link, in my case the word "link", highlight this word. From the "menu" bar select "insert", then "html markup".

Now insert the relevant code. In my example it would be <a href="#start">link</a>, click ok. The word link should be blue and underlined.

To make a link to an external location is almost the same except that you insert the full file address.

example - <a href="www.microsoft.com/pub/user.htm">Microsoft link</a>. The words 'Microsoft link' would show in blue and underlined. This address is only made up and is not an actual address.

Okay, you have done it. Save the masterpiece and start up Netscape or your favourite browser.

In Netscape, select "file", "file open in browser", then enter the file location (where it was stored), click okay and stand back. All should be revealed.

To modify your file, open "Notepad", then open your file, notice all the html codes that Word assistant put in. Now armed with this guide you can modify the codes, save it and redisplay in your browser. Do not forget to "refresh" or "reload" the file otherwise you will not see the changes.

Document produced b