OS/2 Shareware BBS: 35 Internet/35-Internet.zip/page11e.zip/page.inf

OS/2 Help File | 1996-10-14 | 530KB | 4,305 lines

ΓòÉΓòÉΓòÉ 1. Introduction ΓòÉΓòÉΓòÉ

                             Welcome to the World of

                               HTML with Page V1.1
 What is Page ? Page is a Hyper Text Markup Language (HTML) editor for the
production of World Wide Web (WWW) documents. It gives you full access to the
text of a WWW document in textural form, which allows you to directly edit the
text based 'Tags' which control the presentation of it. If you have never used
Page before, then I think you will find that it is an easy to use, yet powerful
companion as you develope and work on your web site.

Page was developed as a result of deciding to move OS/2 Zone Magazine from
paper, to the Internet. I looked around at a number of OS/2 based HTML editors
and whilst I found some good ideas, I thought they they all lacked the features
I needed to author a major web site. As they had all been written using
Watcom's VX-REXX and I had extensive knownledge of both REXX and VX-REXX, I
decided to write what became Page.

The Essence of Page is Power Editing for beginners and experts. And keeping
this in mind I arrived at two basic criteria I wanted to satisfy:

 Γûá The program should be easy to use
           This means it should be as self explainitory as possible. Dialogs
           should be visually informative and easy to understand. An extensive
           toolbar should be present with icons on it that visually describe
           the function they represent. Complex tags structures should be
           hidden behind dialogs and simple menu instructions, and finally a
           Tag checker should be included so that new authors can check their
           documents for mistakes.

 Γûá It should have plenty of power behind it
           This means that whilst the interface at first appears simple and
           almost beginner material, behind it should be a wealth of hot keys,
           bulk textural processing routines, drag and drop rich functionality,
           direct editing for fine tuning and anything else I can think of that
           power users are looking for.

 All this has been achieved and more. I hope you like the results.


ΓòÉΓòÉΓòÉ 2. Registering Page ΓòÉΓòÉΓòÉ


Page can be registered through any of the following companies for a small fee
of $35 Americian.


  BMT Micro
    America 910-791-7052 voice
    America 910-350-2937 FAX
    finger [e-mail] for PGP public key
    http://www.wilmington.net/bmtmicro
    ftp.wilmington.net/bmtmicro

    (Note: BMT's registrations will soon be available through a Australian mirror. )

Note: if anyone not in this list claims to handle registrations, please contact
me to confirm that they are allowed to do so.

Once you have registered, you will receive a userid and name which you can
enter into the registration option of the help menu. This will then enable the
crippled parts of Page and stop the nag screens from annoying you.


ΓòÉΓòÉΓòÉ 3. Page and Service packs ΓòÉΓòÉΓòÉ


IBM has released several service packs for OS/2. The current at the time of
writing is service pack #22.

From testing of various versions of Page under various service packs the
following problems have been encountered. Please note that at this stage there
is not much I can do about them as they are problems within the internal
operation of VX-REXX.

 Prompts for information display a data entry field 1 pixels in height.
           This was first encountered by a beta tester who had fix pack 10 on
           system. It is known to IBM and Watcom and is being looked at. The
           only way around it is to avoid these dialogs by using hotkeys and
           other techniques, so that they are not required.

 Known Fixpack #17 problems.
           These include:

               Message dialogs not word wrapping or resizing to fit message.

               Various functionality not working. i.e. interactive windows
                such as the table editor, not changing it's display to reflect
                changes of parameteres. Caused by messages being lost.

               Z ordered not being changed. I.e. another application gets the
                focus but does not pop to the foreground.

 Some of the later fix packs have fixed some of the problems that the earlier
 ones caused, but the best way to handle them is to avoid them by not having a
 fix pack installed in the first place. Unfortuneately there is not a lot I can
 do at this stage about these bugs as they are internal to VX. I will have to
 wait for a couple of months to see what IBM and Watcom do.


ΓòÉΓòÉΓòÉ 4. Page and OS/2 Warp V4.0 ( Code named Merlin ) ΓòÉΓòÉΓòÉ


I have just tested Page under the final release of Merlin and everything
appears to be working fine. All of the bugs I had encountered under the fix
packs and beta have been fixed.


ΓòÉΓòÉΓòÉ 5. A brief intro to HTML and Web Authoring ΓòÉΓòÉΓòÉ


Documents on the World Wide Web come in many flavours from the straight laced
simple text types, to the highly complex and colourful. Whether a single Home
Page, a Fans site for a movie, an on-line shopping mall, or a full fledged
magazine such as OS/2 Zone, they are all based around the same thing, Hyper
Text Markup Language (HTML) files.

These files are relatively simple text based files. Each file represents one
page and consists of two distinct things. Firstly, the text that you want to
have displayed on the page, and second, special code words or 'HTML Tags' which
tell the Web Browsers how to process these files to achieve the resulting page
in your browser.

As a budding WWW author, your job is to break your document up into one file
per page and then to add these special Tags to create the 'Look' you want for
your Web Site. This is where Page comes in.

Using a combination of Page and the Web Explorer, you can create and test your
whole Web Site on your own hard drive. Then you can upload the HTML files to
you Web Server via an File Transfer Protocol (FTP) program and the job is done.

Obviously there is a little more to it than this, I have made no mention of
such things as interfacing to programs running on your server, security, upload
programs and protocols, etc. But these are all things that you will need to
work out with the person or company providing your Web Server, and therefore go
a bit beyond the scope of this manual. The aim here is to teach you how to use
Page and perhaps a little HTML along the way. Obviously, for more detailed HTML
references you should buy an appropriate book or download a reference file.

To develope a Web page, the basic sequence of events goes like this:

   1. Create a new file with a HTM or HTML extension on your hard drive and
      load it into Page.

   2. Either type in, paste or drag and drop to create the text of your
      document.

   3. Add in the appropriate tags so the when the file is loaded into a Web
      Browser it has the look you are after.

   4. Test the document in a Web Browser. This is a simple matter of dragging
      from Page's main editing screen to the Web Explorer and dropping. The Web
      Explorer will then load up the document so that you can see how it looks.

   5. Repeat the last two steps until the page looks right, then save it to
      your hard drive.

 This is the simple way of doing things. Another for example, is to use
 templates which are default HTML pages and then add in the text of the
 document. But for now this will do, so lets continue on and have a closer look
 at tags and how they do their magic.


ΓòÉΓòÉΓòÉ 5.1. What is HTML ? ΓòÉΓòÉΓòÉ


HTML stands for Hyper Text Markup Language and refers to the Tags which control
the functionality and look of a Web Page. By using HTML tags you can do such
things as:

     Specify where paragraphs are to occur.

     Format text using Bold, Italic, Underline and other formatting controls
      to enhance the readability of the text.

     Include horizontal lines and graphic images.

     Link to other web sites, documents and pages.

     Auto down load files.

     Specify text colours, background colours, background images, etc.

     Display tables of information.

     Interact with databases.

 And many other things as well.

 HTML tags follows a very simple formulea. They start with a less than
 character ("<"), followed by the tag name, any parameters that the tag may
 have, and finally end with a closing greater than character (">").

 For example, <P> is a tag which defines the start of a new paragraph, where as
 <IMG SRC="./bitmap.gif"> tells the browser that the bitmap stored in the file
 "./bitmap.gif" is to be displayed at this point in the document.

 Most HTML tags require a corresponding end tag so that the browser knows when
 to stop applying whatever the tag has told it to do. For example, the
 following text and tags:

  ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
  Γöé                                                  Γöé
  ΓöéThis is a test using <I>Derek's Kool</I> Program cΓöé
  Γöé                                                  Γöé
  ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

 Turns out like this in your Web Browser:-

   This is a test using Derek's Kool Program called Page.

 The <I> tells the browser that all text after it is to be Italic and the </I>
 tells it to stop applying the Italic formatting. These end tags are defined by
 using the tag's Name with a forward slash in front of it. I.e. </B>, </U>,
 </BODY>, etc.

 Finally, tags must be formatted so that the tag's name is hard up against the
 opening less than character. There can be no space characters in between. For
 example, < IMG SRC=...> is illegal and won't work, whereas <IMG SRC...> will.

 There are many tags which you can use and thanks to the rapid development of
 the Web, more are being worked on all the time. I have endevered to provide as
 much info as possible on the tags that I am aware of and use at the present
 time, and a complete list is available at the end of this manual. But first
 lets have a look at how browsers handle them and some examples of various
 types of tags.


ΓòÉΓòÉΓòÉ 5.1.1. Simple Tags ΓòÉΓòÉΓòÉ


I classify simple tags as being tags which require no parameters. Mostly they
are the base formatting tags which you will use all the time. For example the
<B> ... </B> tags have the effect of bolding the text that is within them. They
have no parameters and are therefore quite easy to remember and use.

Others include <I> ... </I> which italics text:

        This is a test using Derek's Kool Program called Page.

 <H1> ... </H1> which sets the text as a level 1 heading (large, bold and on
 it's own line):

        This is a test using
        Derek's Kool
        Program called Page.

  and <U> ... </U> which underlines the text.

        This is a test using Derek's Kool Program called Page.

 Some of these tags get even simpler by not having an corresponding end tag.
 For example <P> starts a new paragraph and <BR> causes a line break to happen.
 Neither of which needs a matching end tag.


ΓòÉΓòÉΓòÉ 5.1.2. Complex Tags ΓòÉΓòÉΓòÉ


Complex tags are ones which have one or more parameters and therefore require
more thought to use. Although Page handles many automatically and therefore
takes some of the pain out of them.

For example, probably the simplest one I use all the time is the <FONT> ...
</FONT> tag which allows me to set the size of the text. so:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
Γöé<FONT SIZE=-1>This is a test using</FONT> <FONT SIΓöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

Might come out looking something like this:

        This is a test using Derek's Kool Program called Page.

 This is a fairly simple example. Some of the tags have up to 10 parameters
 defining all sorts of information that the browser will use. For example a
 typical tag for defining the start of a table and some of the parameters that
 control the look of that table would look something like this:

  ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
  Γöé                                                  Γöé
  Γöé<TABLE BORDER=3 CELLPADDING=10 CELLSPACING=5>     Γöé
  Γöé                                                  Γöé
  ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ


ΓòÉΓòÉΓòÉ 5.1.3. Structured Tags ΓòÉΓòÉΓòÉ


I define structured tags as tags which are required to be in a particular
order.

Most of the tags I have mentioned so far can exists anywhere within certain
limits. However there are some other tags which must appear in a particular
order so the your Web Browser can interpret them correctly.

A good example of this is defining a table. Before you can specify the data to
be displayed in a table, you must tell the browser that you are defining a
table, the row you are dealing with, and the cell within that row that you wish
to put the data into. To do this you would use a series of tags similar to
these ones:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
Γöé<TABLE>                                           Γöé
Γöé<TR>                                              Γöé
Γöé<TD> Data for Row 1 Cell 1</TD>                   Γöé
Γöé<TD> Data for Row 1 Cell 2</TD>                   Γöé
Γöé<TR>                                              Γöé
Γöé<TD> Data for Row 2 Cell 1</TD>                   Γöé
Γöé<TD> Data for Row 2 Cell 2</TD>                   Γöé
Γöé</TABLE>                                          Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

The result of this would look like this:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö¼ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
ΓöéData for Row 1 Cell 1    ΓöéData for Row 1 Cell 2    Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéData for Row 2 Cell 1    ΓöéData for Row 2 Cell 2    Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö┤ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

All of the tags for defining a table must go in the correct order, otherwise
the table definition would not make sense to the browser. Further information
for tags like these can be found in the tag reference.


ΓòÉΓòÉΓòÉ 5.1.4. Links and other Web Functions ΓòÉΓòÉΓòÉ


You could be excused for believeing that HTML is nothing more than a glorified
text formating system. Nothing more spactacular than any wordprocessor can do.
However the Web really comes to life when you start using tags which allow you
to create hotspots on your documents which users can click on to link to other
documents. This is the backbone of the Web, giving you the ability to surf from
place to place as you click on these links.

THis is done through the <A> tag which stands for Anchor. This means that it is
an Anchor point for another HTML page somewhere else on the Web. I.e. you can
click on it to go there. This is probably one of the most important tags you
will ever use as it is the tag that makes the web what it is.

The <A> tag uses the HREF parameter to define the target for a clickable link
to another Web page, a newsgroup, a E-mail address or some other Internet
service. For example, if you where building a web page and wished to have a
link to OS/2 Zone magazine on it, you would add the following block of text to
make a clickable area for that link:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                            Γöé
ΓöéOnly the best OS/2 People read                              Γöé
Γöé<A HREF="http://www.os2zone.aus.net">OS/2 Zone Magzine</A>  Γöé
Γöé, It's simply the best.                                     Γöé
Γöé                                                            Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ
Or if the document is one of your own on your server:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                            Γöé
ΓöéHa, ha ha ha,                                               Γöé
Γöé<A HREF="./jokes/laugh1.html">Try this out!</A>             Γöé
Γöé                                                            Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

Alternative, if you wanted to create a hotspot that the user could click on to
download a file from a FTP site, you would code along these lines:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                            Γöé
ΓöéThe latest IBM Web Explorer                                 Γöé
Γöé<A HREF="ftp://ftp.ibm.net/pub/WebExplorer/web103.zip">     Γöé
ΓöéProduction 1.03 Release Sep'95, (767k bytes).</A>           Γöé
ΓöéIt's simply the best.                                       Γöé
Γöé                                                            Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

Notice the </A> which defines the end of the clickable anchor. Don't forget it
or your whole document may become one big link !

Anchor tags are the life of the web so don't be afraid to put them in.


ΓòÉΓòÉΓòÉ 5.1.5. Graphics - Looking good ! ΓòÉΓòÉΓòÉ


Making the web look good is rapidly becoming an artform, and there are a number
of tags which can turn you document into a work of art, or a eye searing mess.

Firstly, is the <IMG> tag. It defines a graphical image. I.e. a GIF or JPG file
which will be displayed by your browser as a picture for the reader to view.
You can assign all sorts of parameters to an <IMG> tag, most of which describe
the picture to be displayed or are to do with positioning it correctly. For
example to define a graphic to be displayed which is stored in the file
'zone.gif' which is in a graphics subdirectory of the directory where the web
page is stored, I might use a tag like this:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                            Γöé
Γöé<IMG SRC="./bitmaps/zone.gif" ALIGN="RIGHT">                Γöé
Γöé                                                            Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

The ALIGN parameter of this tag also tells the browser that I want the graphic
layed up along the right had margin of the window so that text can be flowed
around the left. Looks great.

Secondly there is the BACKGROUND parameter of the <BODY> tag. It sets a image
as a background for the current document. It will be tiled across and down as
many times as required to fill the background. All graphics and text will then
be drawn over the top.

Perhaps the most important thing to remember when working on the graphics for
your web pages is download time. Most people have either 14.4 or 28.8k modems
and if it takes too long to download the documents you have created then they
will probably not return to your site.

Generally I recommend to try and keep web pages under 40k total size. Thats
adding together the size of the graphics files and the document itself. Any
bigger and it will start to take too long for the user to download. Obviously
there will be times when you need to break this rule, but keeping your pages as
small as possible encourages people to come page because they like quick
response times. The art of all this is getting everything small yet still
maintaining the look you want.


ΓòÉΓòÉΓòÉ 5.1.6. HTML structure ΓòÉΓòÉΓòÉ


Like other markup languages, HTML has a structure. I.e. to produce documents
that are reliably displayed for all browsers and can be understood by other
people, you need to do things in a certain way. With HTML, following some
simple rules and structures can save you a lot of grief later on.

The basic structure of a web page should go like this:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé<HTML>                                  Γöé
Γöé                                        Γöé
Γöé<HEAD>                                  Γöé
Γöé<TITLE> Title of document </TITLE>      Γöé
Γöé</HEAD>                                 Γöé
Γöé                                        Γöé
Γöé<BODY>                                  Γöé
Γöé                                        Γöé
ΓöéText of document                        Γöé
Γöé                                        Γöé
Γöé</BODY>                                 Γöé
Γöé</HTML>                                 Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

The <HTML> tags define the start and end of a HTML document. They don't do
anything other than this and the only parameter available is for defining the
HTML version being used, and most pages don't use it. Some HTML generators use
this parameter occasionally.

Next is the <HEAD> section. This is used to define various bits of information
about the document as a whole. The most common tag in here is the <TITLE> tag
which is used to define the title of the document. It is important to have this
as it is usually displayed in the browsers title bar and can be used by some
web based search software. So always make sure that you have it. Even if it's a
simple under construction page.

Some automated HTML software may also add further information to the heading
section for it's own purposes. Usually you can ignore it unless you are using
that software.

Next comes the <BODY> section of the page. In on-line forms this may be
replaced by a <FORM> tag. This section is where the text to be displayed is put
along with any references to other sites, images, tables, etc. You get the
picture.

At the end of this, the <BODY> and <HTML> tags are closed off. Notice how
everything is nested in the correct order.

Whilst you can drop some of these tags, and it is even possible to write a
document without any of them, it is generally not a good idea and frowned upon
by any good WebMaster.


ΓòÉΓòÉΓòÉ 5.2. How Web Browsers handle text ΓòÉΓòÉΓòÉ


Unfortuneately Web Browsers such as IBM's Web Explorer ignore all formatting in
a text file. If you took a straight ASCII .TXT file and loaded it into the Web
Explorer (change it's extension to .HTM and give it a try), the Web Explorer
will reformat it into one big paragraph, ignoring carriage returns and removing
extra spaces so that each word is separated from the next by just one space
character.

The result is a very unfriendly mess. To fix this, we add the HTML tags we have
been looking at.


ΓòÉΓòÉΓòÉ 5.3. How Web Browsers handle tags ΓòÉΓòÉΓòÉ


The short answer is 'Not very well'. Basically web browser have been built to
be 'fault tolorant' which means that if you type in a tag or it's parameters
incorrectly, the browser will try to work around it or ignore it all together.

This is very good for keeping things running smoothly, however it is ultimately
very bad because it allows you to write HTML that is wrong and get away with
it. I have come across many cases where the HTML used in a page is incorrect,
but the page still displayed correctly because the browser used for testing it
was able to work around it. However other browsers had problems when looking at
it.

It can also cause trouble when developing new web pages as well. If you are
using a new tag that you are not sure of the syntax for, it can be quite
difficult to work out the correct syntax. For example it took me two weeks to
work out the correct structure and parameters for all the tags involved with
tables because the Web Explorer would just work around things.

To help with this I have created a Tag Structure Checker which you can use to
check the tags you have put in and any parameters it may have.


ΓòÉΓòÉΓòÉ 5.4. Relative Paths ΓòÉΓòÉΓòÉ


As any good Web Author will tell you, the best way to make references to other
documents and graphic files is through relative paths. For example, lets look
at the following HTML from a file in 'd:\website\home\home.html':

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
Γöé<IMG SRC="d:/website/home/bitmaps/graphic1.gif">  Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

This is an Absolute path because it makes reference to the drive and full path
to the file. However, this document cannot be FTP'd up to the server without
changing this reference to a path that exists on the server. This means that
you will have to re-edit it before uploading it.

A better solution is to setup a directory structure on your home machine which
matches the server and use a reference system that allows documents to be moved
between the two without change. These references are called Relative Paths and
using the example above would look like this:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
Γöé<IMG SRC="./bitmaps/graphic1.gif">                Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ
The start of the reference is the './' characters which tell the browser to
start from the directory of the HTML document (d:/website/home) and then add
the rest of the reference (bitmaps/graphic1.gif) to it to get to the graphic
file.

This allows these two files to be moved anywhere and still have the reference
work as long as the graphic is stored in a directory called 'bitmaps' which is
a sub-directory of where the HTML document is stored. So you can upload the
document to your server without any editing required.

If the file is not in a subdirectory of the current one, relative paths can
also handle it:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
Γöé<IMG SRC="./../../bitmaps/graphic1.gif">          Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ
This path tells the browser to work from the current directory (./), then go
back up the directory tree two levels ('../' means go back a level) to the root
directory, and then look in the 'bitmaps' directory for the file.

Page will automatically create these relative paths when you are working with
external files. For example drag and dropped files will automatically inserted
relative paths as will many of the dialogs that Page uses.

I highly recommend that you use relative paths as they make life much easier in
the long run. They allow you to easily move your site between locations and
machines. Beccause they do not make mention of the drive or base directory
where files are stored, documents which use them can be stored anywhere as long
as the site directory structure remains consistant.

Of course you can only use relative paths to files on the same machine as the
document. They won't work for external URLs.


ΓòÉΓòÉΓòÉ 5.5. UNIX, Slashes and Case ΓòÉΓòÉΓòÉ


You may have noticed by now that the examples of files I use have several
things in common. They are all in lowercase letters and all the slashes are
back to front. I.e. the file D:\WebSite\Home\Home.HTML would be refered to as:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
Γöé<A HREF="d:/website/home/home.html">              Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ
in a HTML file. The reason for this is that most web servers at the moment are
UNIX based machines which impose some limitations on us. Firstly, UNIX systems
use forward slashes rather than backslashes as delimiters for directory names.
Secondly, and most importantly, UNIX systems are case sensitive. This is
irrelevant under OS/2 where it doesn't matter, but once you upload your web
page, if even one letter in a reference is upper when it should be lower, or
visa versa, the reference won't work and the graphic won't load or the link
will return a "failure to find" message.

The way that most authors handle all of this is to make sure that all
references and the directories and files they refer to are in lowercase. To
facilitate this, I have added a function in Page for doing this for for you.


ΓòÉΓòÉΓòÉ 5.6. Shrinking graphics ΓòÉΓòÉΓòÉ


As I said in the last section, the art of good looking, yet accssable web pages
is small graphics. But how ? Here are some tips for achieveing this:

Firstly produce the graphic in your drawing program, thinking about how you can
get it as small as possible, yet still achieve the look and information you
need it to have. Also keep in mind that at the end it will be compressed and
the best compression is obtained with flat colour.

When a file is compressed, the compressor reads it in line by line, so having a
stream of pixels horizontally of the same colour will compress a lot.
Vertically doesn't matter. Therefore, one trick that looks very good is to have
all your shading going from top to bottom. For example a button might have a
shad of light brown at the top and dark brown at the bottom. Because each row
is a continuous row of pixels of the same colour, the graphic will compress
very well.

Once you have draw your graphic and designed it with the above in mind, the
next step is to reduce it to the minimum numbr of colours. Most graphics
packages these days seem to 24bit colour by default. This consumes a lot of
room. Also, there are very few graphics that make use of all of the colours
available, so you can save considerable space by reducing the colours down to
the ones being used and no more.

To do this I use a package called LView Pro (windows unfortuneately). Using it
I can do several things that help me to make small images.

The first thing I do with a new graphics is colour reduce it, LView Pro can
colour reduce down to any number of colours with a minimum of 2. Depending on
the graphic, I usually end up at either 32, 64, 128 or 256 colours. The object
being to find a palette of colours which is small but still displays the image
as though it had more. Reducing too far is obvious as the image becomes
distorted and 'blochy'.

I also turn off dithering when doing this as dithering can make the resulting
file bigger due to reducing the amount of continuous pixels of the same colour
in a line.

Once I have done this I then pick the background colour if I'm going to save to
a GIF and want the background to be transparent, and finally save the file.

JPGs are recommended if you don't need transparent backgrounds as they are
generally a third the size of a GIF. They also have the advantage that they
support 24bit colour and colour reducing for them makes no difference to the
resulting file size. This allows you to use them in situations where you want
to maintain a high colour level or obtain a small file. However JPGs are a
"loosy" form of compression and therefore can be a bit fuzzy due to the amount
of information they loose, so be careful if you are going to use them for such
things as screen dumps.

With a bit of careful playing around and experimenting, you will be surprised
at just how small you can get some images. By the way, if any budding
programmer would like to create a graphics package under OS/2 for doing this
sort of thing, I would love to help design it.


ΓòÉΓòÉΓòÉ 6. Users Guide ΓòÉΓòÉΓòÉ


This section of the file is a cross between a introduction to using Page a a
users guide which tells you how it functions and some of the features which
aren't in the menu references below.


ΓòÉΓòÉΓòÉ 6.1. Starting Page ΓòÉΓòÉΓòÉ


If you have installed Page using the install program and let it setup the
folder containing the Page icon, help files and templates, then you have a
number of ways to start Page:

   1. You can double click on the Page icon in the Page Folder.

   2. You can drag and drop one or more HTML files onto the Page icon.

   3. You can double click on the icon of a HTML file which will them start
      Page with that file as a parameter.

 At this time there are no command line parameters for Page.


ΓòÉΓòÉΓòÉ 6.2. Page's main window ΓòÉΓòÉΓòÉ


As you can see, the main window is quite simple. Page is a text mode editor.
I.e. it lets you edit HTML documents in textural form. This has the advantage
that you can see all the tags and can modify them quickly and easily. The bulk
of the window is the textural editor area with a menu bar above it.


ΓòÉΓòÉΓòÉ 6.3. The Toolbar ΓòÉΓòÉΓòÉ


Page's Toolbar has been designed to place the most commonly used tags and
functions at your fingertips. Firstly it has been divided up into three areas
of functionality, and reading from left to right,

Function Tools:-

              Use IBM's Web Explorer to test the current document
              Select all text in the document.
              De-select All text in the document.
              Set selected text to lowercase.
              Set back slashes in selected text to forward slashes.
              Open the Find/Change dialog.
              Open the dialog for checking all tags in the document for
              position and parameters.
              Convert all tags in selected text to UpperCase.

 Insert Tag tools:-

              Open the Graphic Image dialog. <IMG>
              Open the Anchor dialog. <A>
              Open the Table Editor dialog. <TABLE>
              Wrap or insert a Level 1 Heading <H1>
              Wrap or insert a Level 2 Heading <H2>
              Wrap or insert a Level 3 Heading <H3>
              Wrap or insert a Level 4 Heading <H4>
              Wrap or insert a Level 5 Heading <H5>
              Wrap or insert a Level 6 Heading <H6>
              Wrap or insert tags to change the text formatting to bold text.
              <B>
              Wrap or insert tags to change the text formatting to Italic text.
              <I>
              Wrap or insert tags to change the text formatting to Underlined
              text. <U>
              Wrap or insert tags to change the text formatting to Centered
              text. <CENTER>
              Wrap or insert tags to change the text formatting to Pre
              Formatted text. <PRE>
              Wrap or insert tags to change the size of the text. <FONT>
              Insert a New Paragraph tag. <P>
              Insert a Line Break tag. <BR>
              Open the Horizontal Rule dialog. <HR>
              Open the Lists dialog for an Ordered list. <OL>
              Open the Lists dialog for an Un-Ordered list. <UL>
              Open the Lists dialog for an Description list. <DL>
              Open the Special Characters dialog.
              Remove all Tags from the selected text.

 Insert Form Objects:-

              Insert a Entry field using the Form Object Dialog.
              Insert a MultiLine Entry field using the Form Object Dialog.
              Insert a Password field using the Form Object Dialog.
              Insert a Hidden field using the Form Object Dialog.
              Insert a Checkbox using the Form Object Dialog.
              Insert a Radio Button using the Form Object Dialog.
              Insert a Selection field using the Form Object Dialog.
              Insert a Reset Button using the Form Object Dialog.
              Insert a Submit Button using the Form Object Dialog.


ΓòÉΓòÉΓòÉ <hidden> Toolbar ΓòÉΓòÉΓòÉ


ΓòÉΓòÉΓòÉ 6.4. Opening Saved files ΓòÉΓòÉΓòÉ


You have a number of choices in how you open a saved document.

            You can use the menu item File - Open This works exactly as you
             expect in any other package by displaying a Open File dialog to
             you so that you can select the file you want to open.

            You can Drag and Drop a document from it's diretory onto the
             editing window. This will automatically load it into Page.

            If Page is not presently running, or you want another session
             running with a particular file in it, you can double click on the
             file in it's source directory. Through the assocations that Page's
             Install will have set up, Page will be started and the file loaded
             into it.

 If you are opening a document that has Page Specific Tags in it, you should
 make sure to open the FileName.PGE file rather than that FileName.HTM or
 FileName.HTML files.


ΓòÉΓòÉΓòÉ 6.5. Saving files ΓòÉΓòÉΓòÉ


Page's save routines do a little more than just save the file you have been
working on. When Page is instructed to save a file it does several things:-

   1. Check the file for Page Specific Tags.

   2. If a file name has not been assigned, ask the user for a name. This
      starts a Save As ... dialog.

   3. If Page Specific tags were found then first save a FileName.PGE file.
      This file contains the source HTML before processing and is the file that
      you should open for future changes.

   4. Page now tests the file system to see if it is HPFS or FAT and also looks
      for currently saved filename.HTM and filename.HTML files. If it finds
      them, it then saves to these extensions. If it is in doubt, then it pops
      a dialog to ask which extensions you would like it to save to.

 Of course documents with Page Specific tags should never be uploaded to you
 Web server. Only upload .HTM or .HTML files.


ΓòÉΓòÉΓòÉ 6.6. Inserting Tags ΓòÉΓòÉΓòÉ


Inserting tags in Page can be done in a number of different ways, depending on
how you like to work.

     You can use the menus. For example, using Insert - Formatting - Bold, you
      can add bold tags around the selected text.

     You can right click on the editing window to bring up the insert menu as
      a popup menu. Then selecting the item you want.

     You can choose the item from the toolbar. Using the Bold tag example,
      clicking on the  icon will perform this function.

     You can use the hotkey for the function. In this example, CTRL-B inserts
      the tags.


ΓòÉΓòÉΓòÉ 6.7. Wrap around Insertion ΓòÉΓòÉΓòÉ


How Page inserts tags is dependant on two things. Firstly what type of tag you
are inserting, and secondly whether or not you have selected any text.

For tags such as <P> or <BR>, Page will insert the tag at the beginning of the
selection. If there is no selection it will insert them at the cursor location.

For tags such as <B></B>, <I></I> and <CENTER></CENTER>, Page will simply
insert them at the cursor point if no text is selected. If a selection is
present, it will wrap the tags around it. For example, using the text with the
word "Great" selected:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
ΓöéPage is a great editor.                           Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

And then pressing CTRL-I for the Italic tags, results in the following:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
ΓöéPage is a <I>great </I>editor.                    Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ


ΓòÉΓòÉΓòÉ 6.8. Sub Dialogs ΓòÉΓòÉΓòÉ


Many of Page's functions will displays sub dialogs to you. For example,
selecting Font Size, Image, or a Heading when there is not text selected, will
all bring up a small window whose purpose is to obtain from you some
information the function needs to continue. For example, here is the Horizontal
Rules dialog:

Some such as a heading dialog are quite simple, others such as the Body tag
dialog or Table Editor, are quite complex. Most of the dialogs are as compact
as possible and textural elements have been kept to a minimum. This keeps their
size to a minimum which in turn allows you to keep them on screen without
taking up too much relestate.

Some such as heading dialogs and drag and drop image dialogs will disappar as
soon as you insert the information into the editor or cancel them. Others such
as the Find/Change dialog will stay open until you close them. Allowing you to
access their functions quickly and easily.

You will find that all dialogs which ask for a file name in a field will
support drag and drop to that field, of a file on your hard drives.

All of these dialogs will be looked at in the following sections and in the
menu reference.


ΓòÉΓòÉΓòÉ 6.9. Drag and Drop functionality ΓòÉΓòÉΓòÉ


Page really comes to life when you start using Drag and Drop. You can do things
faster and easier and I highly recommend you try it. The functionality here is
primarily to make it quick to include and open web pages, and to insert various
types of links. Options are as follows:

     Dropping a HTML page onto the editor will either insert a Link to the
      dropped page, or load the dropped page into the editor. This depends on
      what type of drag and drop operation you do. If you move the file (the
      files icon is solid) the Page will load the file for editing.

      If you drag and drop using copy (icon is shaded and you are holding down
      the CTRL key) then a link is inserted to the file. This is mostly for
      cross linking your files.

      If the current page has had changes made and the Ring is not enabled, you
      will also have an option included to save the current file before
      loading.

      If the Ring is enabled and you drop multiple files onto Page, then each
      one will be processed in turn. This is a quick and easy way to add a
      number of documents at the same time.

     Dropping a *.TXT file onto the editor will read and insert the contents
      of that document at the cursor position. But before this happens the Text
      Import Filter Window is displayed.

     Dropping a *.GIF or *.JPG graphic file will automatically insert a link
      to that graphic using a relative path. To do this it will display the
      Image DIalog In this you can select the free space around the graphic,
      alternate text for it and it's alignment.

 Drag and Drop is now also supported for targetting the Web explorer. Clicking
 and dragging from the editor to the Web Explorer will save the current file as
 a temporary file and then load it into the Web Explorer as though you had
 simply dropped a file icon on it. This effectively duplicates the
 File-Explorer Test menu item without having to launch a new Web Explorer
 session.

 This can be much simplier than closing and relaunching the Web Explorer and
 also means that you can have a logical workflow across your screen as you drag
 from a directory onto Page, and then from Page to the Web Explorer for
 testing. All without having to actually save it anywhere.


ΓòÉΓòÉΓòÉ 6.9.1. The Text Import Filter ΓòÉΓòÉΓòÉ


When you Drag and Drop a TXT file onto Page's Main window, the text Import
Filter is displayed.  This filter is similar to many filters found in word
processing packages. You have several options avaialable for importing the
text. The checkboxes and radio buttons at the top of the window turn them off
and on. In the center of the window is a text view of what you have dropped
after the filter has been applied to it. This gives you a picture of what will
be inserted.

The options you have are as follows:

 Import as is.
           This brings the text is exactly as it was stored in the file. I.e.
           no changes. To access the other options you must turn this one off.

 Convert offset lines to lists.
           This works by assuming that any lines which start with space
           characters are an item in a list. You then have the choice to either
           convert them to an Ordered list or an Un-Ordered List.

 Convert CRLF's to <P> tags.
           This converts carriage return/line feeds to paragraph tags. This
           effectively gives you a new paragraph at the same places as it
           occurs in the text file.

 Process Blank Lines.
           Here you have two options. To either convert blank lines to <P> tags
           or to remove them from the data.

 Using one or more of these controls should allow you to preformat a lot of
 your text before getting it into Page. Once you have the text looking the way
 you want it to, clicking on the 'Import' button will place it into Page.


ΓòÉΓòÉΓòÉ 6.10. Ring Editing ΓòÉΓòÉΓòÉ


Ring editing is not on by default when you first start using Page, but can be
enabled through Page's Preferences - Other Preferences menu item. Once enabled,
it gives you the same features as found when using the Ring editing fucntions
of the EPM editor. Basically this mean several things:-

Firstly when files are loaded, instead of replacing the current file in the
editor, they are added in like adding a new sheet of paper to a book. Each time
you add a new file or open a document on your drive, another sheet of paper is
added. Page automatically keeps track of the status of each sheet of paper,
remembering where the cursor is in it, any selections that have been made, and
the updates that have been done.

This also means that when you add a new document to the Ring, the current one
is not saved. To save it you will have to rotate the ring until it is displayed
and then save it. Also note that when closing Page, it checks all files in the
Ring to see if any have been changed and queries you regarding how you want to
handle them.

As well as enabling the ring, several new menu options will have appeared,
these enable you to rotate the Ring files to the left or right, thus bringing a
new one to the display. You can also select a particular one from a list of all
files. Further options under the File menu allow you to drop files from the
Ring when you have finished with them and Save All files currently in the ring
which have been updated.

The ring rotation buttons have two Hotkeys. F11 rotates left, and F12 rotates
right.


ΓòÉΓòÉΓòÉ 6.11. testing the document ΓòÉΓòÉΓòÉ


Page allows you to test your document by using IBM's Web Explorer as a test
bench for it. For this function to work, you must have it installed.

As is usual with Page, there are a number of ways you can do this: from the
menus, from the Toolbar and finally, by Drag and Drop. But no matter which
option you use, the way that Page transfers a test file to the Web Explorer is
the same. It works like this:

   1. Page saves a copy of the current document to a file called '~~~TMP.HTM'
      in the same directory as the original file came from. This means that all
      internal links and references will work when the file is loaded.

   2. Page them launches the Web Explorer with the ~~~TMP.HTM file as a
      parameter. It also adds on the character sequence '-t 8 -q' which tells
      the Web Explorer to load up to 8 graphic files at the same time and not
      to ask for confirmation when shutting down.

   3. Page then sets the focus to the Web Explorer so that it pops to the front
      of your screen.

 The result of this is that you will see your page loaded with all links and
 graphics in place and active. This allows you to confirm that everything is
 working properly. It also means that you do not have to save the file first
 and can use the ~~~TMP.HTM file as a sort of backup of your work.


ΓòÉΓòÉΓòÉ 6.12. HotKeys ΓòÉΓòÉΓòÉ


Hotkeys are very important to people who are working with large systems and
therefore want to work quickly. Whilst toolbars are nice and massive menus give
you everything, if it's not at your finger tips, things slow down.

With Page I have endevoured to make all Hotkeys fit either commonly used
conventions from other software, or to match their function so they are easy to
remember. Of course all the standard OS/2 keys work This are addition one
specifically for Page. Here's the current list as you would encounter them in
the menus.

File menu:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö¼ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
ΓöéCtrl + N            ΓöéNew                           Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + O            ΓöéOpen ...                      Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + S            ΓöéSave                          Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + A            ΓöéSave As ...                   Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + D            ΓöéDrop From Ring                Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + *            ΓöéDrap All Files                Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + E            ΓöéExplorer Test                 Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö┤ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

Edit Menu:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö¼ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
ΓöéAlt + Backspace     ΓöéUndo                          Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéShift + Delete      ΓöéCut                           Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + Insert       ΓöéCopy                          Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéShift + insert      ΓöéPaste                         Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + F             ΓöéFind/Change ...               Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + /            ΓöéSelect All                    Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + L             ΓöéLowercase                     Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + G             ΓöéTags To Uppercase             Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + S             ΓöéConvert \ to /                Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + R            ΓöéRemove Tags                   Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + \            ΓöéDe-Select All                 Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö┤ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

Insert Menu:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö¼ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
ΓöéAlt + 1             ΓöéHeadings                      Γöé
ΓöéAlt + 2             Γöé                              Γöé
ΓöéAlt + 3             Γöé                              Γöé
ΓöéAlt + 4             Γöé                              Γöé
ΓöéAlt + 5             Γöé                              Γöé
ΓöéAlt + 6             Γöé                              Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + P             Γöé<Paragraph>                   Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + B             Γöé<Break>                       Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + R             Γöé<Rule ...>                    Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + F            Γöé<Font Size ...>               Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + B            Γöé<Bold>                        Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + I            Γöé<Italic>                      Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + U            Γöé<Under Line>                  Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéCtrl + C            Γöé<Center>                      Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + O             Γöé<Ordered ...> List.           Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + U             Γöé<Un-Ordered ...> List.        Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + D             Γöé<Description ...> List.       Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + A             Γöé<Anchors ...>                 Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + I             Γöé<Images ...>                  Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéAlt + T             Γöé<Tables ...>                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö┤ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

Ring Controls Menu:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö¼ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
ΓöéF11                 ΓöéPevious Document              Γöé
Γö£ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö╝ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöñ
ΓöéF12                 ΓöéNext Document                 Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓö┤ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ


ΓòÉΓòÉΓòÉ 6.13. Using Page Specific Tags ΓòÉΓòÉΓòÉ


I have created a range of tags which page picks up and processes as directives
for it to do things. For example, include a file, insert a data, etc.

If Page finds any of these tags in a file it is saving, it will automatically
save a file with a ".PGE" suffix. This file contains the raw unprocessed HTML.
It will then process the Page specific tags and save a HTM, HTML or both HTM
and HTML files based on whether they already exist and what you have requested
it to do.

Once you have used some of these directives, you will need to open the .PGE
file rather than the .HTM or .HTML file when you want to edit it. You can still
edit the .HTM and .HTML files if you need to make further changes after
processing, but remember that next time you save the PGE file, they will be
over-written.

The tags all take the following format:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé<PAGE::tag{=parameter}>                           Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

The string "<PAGE::" is the sequence that signifies to Page that there are
directives to be processed. The available tags are as follows:

 INCLUDE="filename"    This directive tells page to insert the specified file
                       at this point. Page will automatically serach and
                       process any further tags found within that file as well.
                       This gives you the ability to create common files of
                       HTML. As this is only for your machine, it is one place
                       where I DO recommend to use absolute pathes in the
                       filename. This also means that if the included file has
                       any includes, that Page can find those correctly as
                       well.

 DDATE                 Number of days this year.

 EDATE                 European Date, dd/mm/yy.

 LDATE                 Date in local Language dependant format. Typically dd
                       month yyyy.

 MDATE                 Returns the full english name of the month.

 NDATE                 Date in the format dd mmm yyy.

 UDATE                 USA date in format mm/dd/yy (because they are different
                       '8-)

 WDATE                 Returns the day of the week.

 TIME                  Returns the time in the format hh:mm:ss.

 Remember that with Date and Time directives, the values are inserted when you
 save the file. These are not updated by your server.

 I am all ears if you have any other ideas for Page specific tags that you
 would like.


ΓòÉΓòÉΓòÉ 6.14. Editing Tables ΓòÉΓòÉΓòÉ


This table editor is semi WYSIWYG. I can't make it totally WYSIWYG, but I have
endevored to make it represent things to you visually so make it a bit easier
to see what various parameters do and how they effect things. However this does
involve a bit of a performance hit. There is also a bit of a delay as a table
is loaded due to the amount of analyse required to figure out where the cursor
is in relation to the HTML and what table is being referenced.

Adding a new table is simply a matter of placing the cursor where you want the
table to be inserted and selecting "Table" from the insert menu.

Editing an established table is just as simple. Just make sure that the cursor
is somewhere within the <TABLE> ... <TABLE> tags when you select the table
editor. You do not have to have the table selected, as Page will work out which
table the cursor is within (Even if it's nested within another table!).

Page will then enquire as to whether you want to edit the table it has found or
create a new table at that position within the current one.

All the functionality of the main editing screen works as usual including drag
and drop, except as follows:

     You cannot drag and drop to the Web Explorer to test the HTML.

     HTML file drops are automatically HREF'd.

 This table editor supports a range of tag which are talked about in the Web
 Explorer readme. It also supports some tags which are supported by the Web
 Explorer, but not mentioned in the readme. These include such things as
 cellpadding and cellspacing.


ΓòÉΓòÉΓòÉ 6.15. Checking your tags ΓòÉΓòÉΓòÉ


As web browsers will typically ignore tags they don't know or can't understand,
it is quite difficult to work out sometimes why a particular series of tags is
not having the result you wanted when the document is loaded into a browser.
This is the primary reason for having this function.

It's job is to go through the web page you have designed from top to bottom,
examining every tag in it and the parameters for that tag, to make sure that it
is correct. This should result in web pages which work as expected as well as
keeping you up to date on tags.

The checker looks for several things:

     It ensures that each tag is in it's place in the Tag Hirachy. i.e. it
      makes sure that tags which can only be within the <BODY> ...</BODY> tags
      are within them.

     It checks each tag's parameters to make sure that they are correct. It
      also looks for parameters that are required under specific circumstances,
      and checks any values for these parameters with some basic validation.

     It checks between tags to make sure that document text is where it should
      be. I.e. you can't have document text before the <BODY> tag.

 Generally the checker expects that the document starts with a <HTML> tag and
 that all tags are closed in the opposite order to being opened. I.e. if you
 open a <PRE> tag then a <B> tag, you should have the following sequence to
 close them: </B></PRE>. Closing them the other way around will cause the
 checker to issue a message saying that there is a tag missing.

 You also have the ability to edit the database that drives the checker. This
 gives you the power to update it with new tags as they appear and to modify
 the behaviour of the checker if you need to.


ΓòÉΓòÉΓòÉ 6.15.1. The Tag Structure Database ΓòÉΓòÉΓòÉ


Checking HTML is no easy thing. Most tags have a simple order in which they
must go, however for every rule there is a tag which breaks it, and im some
cases, the same tag has two different sets of rules which apply to it,
depending on where it is.

So I decided after much testing that the only practical way to do this was to
place tags into groups and then to base the checking in whether or not the tags
group is active at the present time. For example, the <B> tag is in the BODY
group. You can't enter a <B> tag before the <BODY> tag because the BODY group
is not active until the <BODY> tag is encountered and makes it active.

This is the way that the whole database runs. As each tag is found in the
document, it is checked against the database to establish it's group, once
found, the group is then checked to see if it is active at the present time. If
it is then the tag is valid.

Each tag can make further groups active and the checker works by only allowing
tags from the latest set of groups to be used. For example, When a <TABLE> tag
is encountered, only tags in the BODY group can be used. <TABLE> is a member of
the BODY group so it is valid.

The definition for <TABLE> then makes active another group called TABLE. Now
the checker will only accept tags from this group. Thus ensuring that any other
tags will be highlighted as being in the wrong place.

This brings us to the double up of tags in the database. In order to get around
tags which have two different sets of rules you can have them entered twice in
the database.

Using the table example: Once <TABLE> has been encountered and made the <TABLE>
group active, the only tag that is valid is the <TR> tag. However, this tag is
entered twice in the database, once with the TABLE group and once with the
NTHROW group. THis is because this tag needs to do different things based on
whether it is the first row of the table or some other row. By only allowing
the TABLE group, we ensure that the <TR> tag which belongs to the TABLE group
is used, and therefore provides the correct rules.

Another situation of interest is where multiple groups are active and removing
groups from the list. Again with our example, once the <TR> tag has been
accepted, it makes three groups active: 1STROWTH, 1STROWTD and NTHROW.

This is because of the particular situation involved in the first row of a
table. It can either be composed of <TD> tags if the row is not a header row,
or <TH> tags if it is a header row. It cannot contain both types of tags. Once
either a <TD> or a <TH> is encountered and cross referenced with the database,
they both have in their Remove lists the others group. I.e. if a <TD> is
encountered, the <TD> tag belonging to the 1STROWTD group is located in the
database. This then removes the 1STROWTH group from the currently active
groups, ensuring that if a <TH> is then encountered, it will be highlighted as
incorrect.

The other group that is also made active by the <TR> tag is the NTHROW group.
This allows the NTHROW <TR> tag to be valid and therefore signify the end of
the first row and the beginning of the second row. Once this tags is
encountered, it actives the NTHROWTD group and sets up for the rest of the
table.

When a </TABLE> tag is then encountered, the checker automatically checkes back
through the list of opened tags, locates the opening <TABLE> tag and through
it, closes down any groups which have been activated after it, thus returning
to the BODY group which was activated originally.

All this sounds rather complicated, but it does allow great flexibility in how
things are done, whilst at the same time keeping the internal code of the
checker simple enough to not cause problems in the future.


ΓòÉΓòÉΓòÉ 6.16. LOWER.CMD and UPPER.CMD ΓòÉΓòÉΓòÉ


Because you will often need to convert a directory to lowercase and will not
want to do it from Page, I have also included in this package two standard REXX
programs called LOWER.CMD and UPPER.CMD which will run through the current
directory and convert the files to either lowercase or uppercase names as
required.

No parameters are required, smply place the program into your OS2 directory so
that it can be accessed from anywhere, change to the directory you want to
lowercase, and execute it.


ΓòÉΓòÉΓòÉ 6.17. Page in Action ΓòÉΓòÉΓòÉ


I found over a period of time that the best way to work with Page was to use
the features of the OS/2 Desktop to the hilt. First off, I have a shadow on my
desktop of the main web site directory. This lets me access the directories I
want to work with quickly and easily.

Then I generally fire off a session of Page either by dropping a HTML document
on the Page icon or just Double clicking on the document and letting Page's
associations kick in to launch it.

Once I have Page running I find I can quickly assemble document using a
combination of drag and drop to place graphics and references, and hotkeys and
the toolbar to add tags.

Finally I then test the document by dragging from Page to the Web Explorer.


ΓòÉΓòÉΓòÉ 7. File Menu ΓòÉΓòÉΓòÉ


This menu contains functions which are relevant to opening and saving files.


ΓòÉΓòÉΓòÉ 7.1. New ΓòÉΓòÉΓòÉ


If the Ring is enabled, this inserts a new document at the end of the ring and
then adds into it, any default text you have specified in your Preferences. The
document is given the name '(New)' as a name until you save it.

If the ring is not enabled, then it replaces the current document, first
checking to make sure that it has been saved. The default text from the
preferences is then inserted.


ΓòÉΓòÉΓòÉ 7.2. Open ... ΓòÉΓòÉΓòÉ


This displays the standard OS/2 Open dialog from which you can select a .HTM,
.HTML or .PGE file for processing.


ΓòÉΓòÉΓòÉ 7.3. Save ΓòÉΓòÉΓòÉ


Save will save the current document to it's file on disk. However if the
current document does not have a name, I.e. it is a new document, then the Save
As ... dialog will be displayed first to obtain a name for the file to save it
to.

Before saving it, Page will scan the document for any Page Specific Tags. If
one is found, then Page behaves differently.

Firstly it saves a file with a .PGE extension. It then looks at the file system
to see if it is HPFS or FAT and looks on the drive for files with .HTM and
.HTML extensions.

Page then processes the Page Specific Tags and outputs the resulting HTML into
any files that already exist. This assumes that these files are the only ones
you want to create. If no .HTM or .HTML files exist, it will ask you for which
formats to save, giving you the option to save both if you like.

Using a Save As ... to a .HTM or .HTML file is another way to tell Page what
you want it to do when these tags are in the file.


ΓòÉΓòÉΓòÉ 7.4. Save As ... ΓòÉΓòÉΓòÉ


This displays the standard OS/2 Save As ... dialog. For further information on
how Page saves HTML files, refer to the Save menu item.


ΓòÉΓòÉΓòÉ 7.5. Save All Files ΓòÉΓòÉΓòÉ


This option only appears if the Ring has been enabled.

It saves all the files currently loaded into the Ring, but only if they have
been modified.


ΓòÉΓòÉΓòÉ 7.6. Drop From Ring ΓòÉΓòÉΓòÉ


If the Ring is enabled this menu item will be displayed.

It allows you to drop the current file from the ring, which removes it from the
list. Page will also check it to make sure that it has not been changed and
will query you regarding saving it if it has been updated.


ΓòÉΓòÉΓòÉ 7.7. Drop All Files ΓòÉΓòÉΓòÉ


If the Ring is enabled this menu item will be displayed. It allows you to drop
all the files from the ring and leaves you with a single New file. This is the
same as starting Page without the Ring Enabled and selecting File - New.

Page will also check all the files to make sure that they have not been changed
and will query you regarding saving them if they have been updated.


ΓòÉΓòÉΓòÉ 7.8. Explorer Test ΓòÉΓòÉΓòÉ

For this function to work, IBM's Web Explorer must be installed.

This launchs a copy of IBM's Web Explorer and passes it the name of a temp file
where Page has copied the contents of the currently displayed file.

As this is run from the current directory, all links and Relative paths to
other files will work correctly.

For more information, refer to Testing Your Document in the Users Guide.


ΓòÉΓòÉΓòÉ 8. Edit Menu ΓòÉΓòÉΓòÉ


The edit menu contains functions which are relevant to editing your document.
It also contains functions which you could consider to be special effects in
the Conversion menu.


ΓòÉΓòÉΓòÉ 8.1. Undo, Cut, Copy and Paste ΓòÉΓòÉΓòÉ


Thes functions work exactly as you would expect in any word processing package.
They also have the standard OS/2 and Windows hotkeys:

 Cut (Shift+Delete)
                     Cuts the selected text from the editor and stores it in
                     the clipboard.

 Copy (Ctrl+Insert)
                     Copies the selected text from the editor and stores it in
                     the clipboard.

 Paste (Shift+Insert)
                     Pastes the contents on the clipboard at the cursor
                     position. Note: that if a selection is present, Paste will
                     replace the selected text.

 Undo (Alt+Bksp)
                     Un-does the last operation.


ΓòÉΓòÉΓòÉ 8.2. Find/Change ΓòÉΓòÉΓòÉ

The Find/Change dialog allows you to do several things:

     Find the next occurance of a string. This will loop to the top of the
      file if it encounters a End-Of-File (EOF) character before the next
      occurance.

     Change the string to another string.

     Change all occurances of a string to another string.

 As you can see the dialog itself is quite simple and self explainitory. Simply
 enter the text you want to find, the string you want to change it to and press
 the appropriate function button.

 This dialog will stay open until you close it, even whilst loading and
 unloading documents for editing. It will also remember the find and change
 strings across invokations and exchange this information with the Edit -
 Directory - Find/Change Text function.


ΓòÉΓòÉΓòÉ 8.3. Select All and Deselect All ΓòÉΓòÉΓòÉ

Select All and De-Select All are two standard OS/2 and Windows functions which
will select and un-select all the text in a document.

This is useful for doing document wide functions such as Tags to UpperCase.


ΓòÉΓòÉΓòÉ 8.4. Conversions ΓòÉΓòÉΓòÉ


These are a functions which are designed to perform some sort of transformation
upon the selected text in the document. For example, to set all uppercase
characters in the selected text to lowercase.


ΓòÉΓòÉΓòÉ 8.4.1. LowerCase ΓòÉΓòÉΓòÉ

This functions sets all uppercase characters in the selected text to their
equivalent lowercase. Numbers and special characters are ignored.


ΓòÉΓòÉΓòÉ 8.4.2. Tags to UpperCase ΓòÉΓòÉΓòÉ

This function transforms the names and parameters of all tags in the selected
area to uppercase. This is useful for creating consistant looking documents.

All parameter values for tags are ignored as is any text in between them. For
example:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
ΓöéThis is an example of <b>converting</b>           Γöé
Γöétags to upper case <img src="./excl.gif">         Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

And after this function is executed it will look like this:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
ΓöéThis is an example of <b>converting</B>           Γöé
Γöétags to upper case <IMG SRC="./excl.gif">         Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

Notice how it only effected the tags in the selected area and left the SRC
value as it was.


ΓòÉΓòÉΓòÉ 8.4.3. Convert \ to / ΓòÉΓòÉΓòÉ

This function was written for people whose web servers are UNIX ones. UNIX uses
forward slashes instead of back slashes to separate directory names, so this
function will do this conversion within the selected text. For example:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
Γöé<IMG SRC=".\webgraphics\buttons\excl.gif">        Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ

Will end up looking like this after the conversion:

ΓöîΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÉ
Γöé                                                  Γöé
Γöé<IMG SRC="./webgraphics/buttons/excl.gif">        Γöé
Γöé                                                  Γöé
ΓööΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÿ


ΓòÉΓòÉΓòÉ 8.4.4. Remove Tags ΓòÉΓòÉΓòÉ

Sometimes you need to remove all the tags from a block of text. Typically when
you want to completely change the formatting or save it to a .TXT file.

This function will remove all tags within the selected text.


ΓòÉΓòÉΓòÉ 8.5. Directory Utils ΓòÉΓòÉΓòÉ


Directory utilities are a group of functions which perform job outside of the
current document. They provide some useful and powerful tools for Web Masters.


ΓòÉΓòÉΓòÉ 8.5.1. Lowercase Filenames ΓòÉΓòÉΓòÉ


As discussed eariler, UNIX based systems are case sensitive and to make them
easier to maintain, many Web Authors set all file names to lowercase in their
documents. To make sure this works you also need to have the files in your
directories as lowercase as well. This is the job of this function. Executing
it will cause all files in the current directory to be set to lowercase. Here
is an example of the output log from this function:

Also note that you can execute this function from the command line using the
LOWER.CMD rexx program supplied with Page.


ΓòÉΓòÉΓòÉ 8.5.2. Uppercase Filenames ΓòÉΓòÉΓòÉ


This function is the same as the Lowercase.

Also note that you can execute this function from the command line using the
UPPER.CMD rexx program supplied with Page.


ΓòÉΓòÉΓòÉ 8.5.3. Find/Change Text ... ΓòÉΓòÉΓòÉ


This function can destroy your Web Site !!! - You have been warned.

This function provides a powerful tool for doing multiple find/changes through
a whole site. It does this by loading each file in turn and then running a
standard FInd/Change routine over it to make the changes you have specified.

If the ring is enabled or the current file has been changed, this function will
first enquire if you which to save the changes made. It will then unload the
current files so that it has room to work and so that any changes made by it
are reflected in the loaded files. After processing the Find/Change operation,
it will then reload the current files back into Page, leaving you exactly where
you left off, but with any changes made by this function in place.

The window has a wide range of options and abilities:

To the left is standard drive pull down and directory tree. You can use this to
navigate around to the directory you want to process. You can also select one
or more files in this directory for processing.

On the right hand side of this window is a set of options which control how
this function works:

 Only Selected Files.
           This option will run the Find/Change on the files you have selected
           in the directory window.

 *.HTML, *.HTM and *.PGE files.
           This will search the current directory for all files with a HTML,
           HTM or PGE extension and then process those files. Once selected,
           you can further tell this option to recursively scan all
           subdirectories of the current directory for the strings as well.
           This is useful when you have a graphic or file referenced in a
           number of locations and wish to change them all at the same time.

 Other Extension.
           This works exactly as the previous option except that you can
           specify an extension which will be used to select files for
           processing.

 Below this you have the data entry fields for the string to find and the
 string to replace it with, as well as the option to make it case sensitive.

 The next button 'Execute' start the processing. You should be very sure at
 this stage that you have the search string correct.

 Below this is a listbox which displays the files which this function has
 changed. With it you can select one or more changed files and press 'Load into
 Editor' to load them into Page for further editing. This is a conveniant
 feature which allows you to check through changes documents to make sure that
 the changes have worked properly as well as keeping you informed of which
 files have been modified.

 Finally a note regarding using this function. When you are entering the string
 to Find, make sure that the string you have choosen to look for is unique
 enough that you don't pick up other items as well. For example, if you moved a
 group of button images from the 'bitmap' directory to their own 'buttons'
 directory, a find string such as '/bitmap/' being changed to '/buttons/' will
 certainly change all references for the buttons to refer to the new directory.
 However, other graphics which still reside in the bitmap directory will have
 their references changes as well. A slightly better find string would be
 '/bitmap/but' if your buttons all have a file name with the 'but' characters
 as a prefix.


ΓòÉΓòÉΓòÉ 9. Page Menu ΓòÉΓòÉΓòÉ


This menu contains tag controls which refer to a document as a whole.


ΓòÉΓòÉΓòÉ 9.1. Title ... ΓòÉΓòÉΓòÉ

This function inserts <TITLE> and <BASE> tags. It will automatically search out
and replace these tags if they are present, However it does not look for <HEAD>
tags and will place the <TITLE> and <BASE> tags after the <HTML> opeing tag if
it can't find either of them.

The first data entry field is for the title of your web page. This title is
usually displayed in the title bar of most web browsers, so it is considered a
requirement for good HTML by web authors. There should not be any HTML tags
within the title.

The next field is the base directory field. This creates the <BASE> tag and is
usually not required or used. A very thorough understanding of what this will
do to your web site is recommended before using it.


ΓòÉΓòÉΓòÉ 9.2. Body ... ΓòÉΓòÉΓòÉ


The <BODY> tag is the one tag that can be a major influence on the look and
feel of your document. This window simplifies this by presenting it's options
in a simple and useable manner.

This window is divided into two areas. At the top is a group of controls for
setting the background and colours which will be used in your document. These
are all parameters on the <BODY> tag. The bottom half of the window is for
setting up animations which are used by web browsers to indicate that they are
busy getting information from the web. For example, IBM's Web Explorer and
NetScape's Navigator both play these animations in small windows in the top
right hand corner of their displays. These animations are set by the <ANIMATE>
tag.  Lets look at the <BODY> tag settings first:

The first part of this area is the "background Image ...' field. In this you
can type, drag and drop, or use the 'Find' button to enter a background image
that will be displayed behind all the text and graphics on your document. This
can be any GIF or JPG image. If you leave this blank then no image will be
displayed and the background will default to either pale grey or the colour
defined by the BGCOLOR parameter.

Below this is a group of controls which you can use to define the colours
applied to you document. On the left hand side is a small 16 colour palette
which displays the OS/2 default 16 colour palette. Next to it are a set of RGB
sliders which you can use to obtain custom colours. Finally, there are 4 colour
boxes and checkboxs which are use to set the colours of the various parts of a
web page as follows:

 BackGround
           This is the colour that will be used as the background colour if
           there is not a background image. If this parameter is not set, then
           the Web Explorer defaults to pale grey.

 Text
           This is the colour that will be used for all the text of your
           document. If this parameter is not set, then the Web Explorer
           defaults to Black.

 Link
           This is the colour that will be used to highlight links to other
           pages, downloadble files or anything that has been make an anchor by
           the <A> tag.

 Visited Link
           This is the colour that will be used to highlight links to other
           pages, downloadble files or anything else that you have already
           clicked on or been to in the current session.

 To select a colour for one of these parameters, simple click the checkbox to
 activate the parameter, select the colour box to the left of it to indicate
 which parameters colour you want to change and then select the colour from the
 palette or sliders.

 NOTE: in some version of the Web Explorer, setting the colour of an item to
 White does not work. Instead it uses the colour defined in your system
 settings for folder backgrounds. By default this is also white, so everything
 will appear to be correct. However, if you set your system folder colour to
 another colour, then any settings in the Web Explorer which are set to white
 will now be set this this new colour.

 This part of the window is activated by clicking on the 'Animation' checkbox
 just above it. With it you can setup Web Explorer animations which are used to
 indicate downloading in progress.

 It works from left to right. Firstly there is a drive and directory object
 which you can use to navigate to and select the animation files you want to
 use. You can select as many files at one time as you like. Then pressing the
 'Add' button will add them to the list of files in the center of the window.

 This list shows the files which contain the individual frames of your
 animation and the order in which they will be played. I.e. from top to bottom.
 The buttons between this and the directory list performs various functions as
 follows:

 Add             Copies the selected file names from the directory container to
                 the file list in the center of the window.

 Move Up         Moves the selected files in the file list up 1 position.

 Inv             Inverts the selected files in the file list. This is handy for
                 reversing the direction of an animation.

 Move Down       Moves the selected files in the file list down 1 position.

 Del             This removes the selected files from the file list.

 To the right of the file list for your animation is a group of controls which
 you can use to preview and test your animation.

 NOTE: At this time only BMP files are supported for this.

 This groups consists of a preview window with an indicator of which frame is
 currently shown and the total number of frames in the animation. Beside this
 is a speed control which sets the time delay between each frame when playing
 the animation. And finally at the bottom ia a row of controls similar to that
 of a CD player. In this case: Return to Start, Back 1 Frame, Stop, Play, and
 Forward 1 Frame.

 Using these controls will give you a good idea of what your animation will
 look like before you insert the tags for it into your document.


ΓòÉΓòÉΓòÉ 9.3. Form ... ΓòÉΓòÉΓòÉ

This window collects <FORM> tag settings for a data entry form which will be
sent to a script or program on your server.

The radio buttons tell the form which method is to be used to send the data to
the script:

 POST      This is the most commonly used method and the recommeded one. Each
           item of data on your form is sent to the script one at a time. The
           script then collects them as though it was putting up prompt for
           each in turn.

 GET       This method is little used. All the data on the form is appended to
           the URL request which starts the script. This is limited to 1024
           characters of data.

 The 'Action CGI Script ...' field is where you enter the name of the script to
 be run. You can use the 'Find' button if you have setup a full server on your
 machine and have the script online. Otherwise just enter the path to it on the
 server. You might need to check with your service provider about this.


ΓòÉΓòÉΓòÉ 9.4. Tag Structure Checker ... ΓòÉΓòÉΓòÉ

This tool is designed to go through the current document, from start to end,
checking each tag in turn for the following:

     Tag exists.
     It's Position in relation to other tags.
     Any parameters are valid and have valid values.
     If it is valid to have text before and after it.

 The window that drives it is quite simple, yet powerful: The top part of it is
 a message box which is used to inform you of any errors in your HTML that the
 checker has found. Below this are 4 controls which allow you to correct errors
 as they are found. The group consists of a Data entry field and three buttons:
 Insert, Delete and Skip as follows:

 Insert    This inserts the modified data in the entry field into the document,
           replacing the highlighted text of the error. Checking then
           continues.

 Delete    This deletes the selected text. Checking then continues.

 Skip      This skips over the error and continues the checking.

 When a tag check stops with an error, these buttons become active and
 depending on the error, the problem tag will be placed in the data entry
 field. The main control button to the right of this will usually be changed to
 say 'Continue', but it depends on the type of error encountered.

 To the right of these, is a button which will has a number of functions
 depending on what the checker is doing. The function accessable at any time is
 shown on it:

 Start     Starts the checking of the document from the top. The checker has to
           start at the top because tags are positioned in relation to each
           other. Starting from any other position in the document would allow
           the checker to return a 'document is ok' message when in fact it
           isn't.

 Continue  This is accessable when the checker has found an error and stopped
           to allow you to fix it. Presing the button will continue the
           checking from the tag prior the the one with the error.

 Stop      This is only accessable whilst a check is in progress. It allows you
           to stop the check before it gets to the end of the document.

 Below this is a button labeled 'Re-Start'. This button will terminate the
 check in progress and restart it again from the top of the document. This is
 handy when you have made major changes and wish to check them again in the
 full context of the document.

 NOTE: Page's main window is unaccessable for editing whilst checking is going
 on because it would allow you to create errors in your HTML which the checker
 would not pick up due it already thinking that the edited part of the document
 is ok.

 In the upper right corner of the window are tow controls for debugging your
 HTML.

 Firstly, there is a checkbox called 'Debug'. If this is set before checking
 starts, the list box below it activates and lists all tags which are opened
 but not closed.

 For example, If you open a tag at the top of you document and forget to close
 it, the checker is very likely to get to the end of the document before it
 gives you a message indicated a unclosed tag. By using this facility, you can
 watch the checking in progress and see that the tag is opened quite early in
 the document but not closed because it stays in the opened list.

 Lastly on this window is the 'Edit Tag Structure Database' button which opens
 the database editing facility for editing the database of tags that the
 checker uses.


ΓòÉΓòÉΓòÉ 9.4.1. Tag Structure Database ΓòÉΓòÉΓòÉ


The Tag Structure Database gives you the ability to modify the database that
Page uses to check tags. Because HTML is a constantly moving target in terms of
what browsers support, doing this allows you to update the database with any
new features that you know of, or to modify the current behaviour of
established tags.

Please refer to the User's Guide section called The Tag Structure Database for
further information on how the database works.

This window is quite complex and supports a number of functions. One the left
side is a full height list of the tags which are currently known to the
database. Each tag in this list has beside it in brackets, the group to which
it belongs. Tags can occur more than once in this list if required providing
they belong to different groups. This makes it possible to have the same tag
become active at different times and to have different settings.

You can add new tags or delete the currently selected tag using the two buttons
in the top right corner.

The rest of the window is divided into several areas. Firstly there is the
checkbox at the top of the window called '/End Tag Required'. This is selected
if the tag requires a corresponding end tag. I.e. <B> ... </B>

The next area is entitled 'Groups'. This is where you specify the groupings
used, created and removed by the presence of the tag:

 Member of      These are the groups that this tag belongs to. There can be
                more than one separated by spaces.

 Activate       This lists the groups that will become active after this tag.
                There can be more than one separated by spaces.

 Remove         This lists the groups that will be de-activated after this tag.
                There can be more than one separated by spaces.

 The next area is entitled 'Document Text'. It is used to specify how text can
 be associated within and around the tag:

 Allow Text within Tag - /Tag boundary.
           This specifies that text can occur within the boundaries defined by
           the tag and it's corresponding /End tag. NOTE: this can of course be
           overridden by other tags within this one.

 Allow Text after /End Tag.
           This specifies whether text is allowed after the /End tag.

 If the tag does not have an /End tag as controlled by the '/End Tag Required'
 checkbox, then the first checkbox is disabled and the 'Allow Text After /End
 Tag' one is used to control if text can occur after this tag.

 The last area is called 'Parameters' and refers to the parameters that can be
 used with the current tag. The first part of this area is a list box which
 contains the name of the parameter and it's number. This number is used in the
 Rules field for defining how it is used. On the opposite site of the area to
 this list is two buttons for adding new parameters and deleting the currently
 selected parameter.

 beside the list of tags are several controls which tell the checker how this
 parameter is to be tested for. Firstly there is the checkbox 'Value Required'.
 This tells the checker that the parameter requires a value. It also actives
 the two controls below it.

 "Quoted" Value
           Specifies that the value must have quotes around it.

 Value Validation
           Controls the validation that is applied to the value used. It can
           have the following values:

           NUM
                          The value must be a valid number.

           UNUM
                          The value must be a valid positive number. It cannot
                          be a negative.

           PERCENTAGE
                          The value must be a percentage. I.e. 50%, 54%, 75%,
                          etc.

           COLOUR or COLOR
                          The value must be a valid hexidecimal number in the
                          form #rrggbb. Where 'rr', 'gg' and 'bb' are the red,
                          green and blue components of the colour speciefied as
                          hexidecimal numbers between 00 and FF. For example,
                          #000000, #0F0F0F, #000808, etc.

           GRFXFILE
                          The value must be a valid GIF or JPG file that exists
                          on your hard drive. The checker will allow for
                          forward slashes in the value.

           REFERENCE
                          The value must be a valid reference to another page
                          or site, FTP, Gopher, TelNet, mailto, etc. If the
                          checker cannot work out what it is, it will assume
                          that the reference is to a file on the hard drive.

           LIST value1 value2 value3 ...
                          The value must be one of the listed values. For
                          example, LIST LEFT RIGHT CENTER. Values are space
                          character delimited.

 At the bottom of this area is a field entitled 'Rules'. This is used to define
 the rules that will be applied to the parameters to ensure that they are
 correct. To do this, the checker first works out which parameters are present
 in the tag, and then applies these rules to the existance of those parameters.
 These rules can take many forms with multiple rules being separated by commas.
 There are two basic commands:

 REQUIRE p1
 REQUIRE p1 operand p2
           Where P1 and P2 are numbers corresponding to parameters in the
           parameter list, and operand is one of the follow:

           AND            Both of the specified parameters must be present.

           OR             At least one of the parameters must be present, but
                          not both.

           ORB            Either or both of the parameters must be present.

           For example, REQUIRE 1 ORB 3 specifies that either or both parameter
           1 and parameter 3 can be present in the tag. However an error will
           be returned if neither are present. REQUIRE 4 simply says that
           parameter number 4 must be present in every occurance of this tag.

 IF expression REQUIRE p1 p2 ...
 IF expression EXCLUDE p1 p2 ...
           Where expression is either a single parameter number or one of the
           above possible expressions:AND, OR or ORB. If this expression works
           out to be true, i.e the required parameters are present then the
           second part is checked.

           This can either be REQUIRE or EXCLUDE and a list of parameter
           numbers separated by commas. The checker will check this list aginst
           the present parameters. REQUIRE specifies that the list must be
           present, EXCLUDE says that they cannot be present.

 Between these two rules, you can create quite complex operations. For example,

 REQUIRE 1,IF 2 REQUIRE 3 4 5, IF 6 EXCLUDE 7

 Basically says that parameter 1 is required, and if parameter 2 is present,
 then parameters 3, 4 and 5 must also be present, and finally if parameter 6 is
 present then parameter 7 is not allowed to be there.


ΓòÉΓòÉΓòÉ 10. Insert Menu ΓòÉΓòÉΓòÉ


The insert menu is where most of the tags you can add to your document are
kept. Most of the tags are simple tags and therefore have no parameters or
windows associated with them, so I won't document them here. The exceptions are
tags which do require parameters or represent more complex functions.


ΓòÉΓòÉΓòÉ 10.1. Headings ... ΓòÉΓòÉΓòÉ


Headings are the only simple tags which do need some data from the user.
Normally if you select some text in the editor and active a heading function
via the toolbar , hot keys or menus, Page will automatically wrap the tags
around it.

If no text has been selected then Page will automatically display a prompt
dialog asking you to enter the text that will be the heading. This will then be
inserted at the cursor location.


ΓòÉΓòÉΓòÉ 10.2. Formatting ΓòÉΓòÉΓòÉ


Most of the tags in this menu are simple tags which control the formatting of
text in your document. For more information see the list of formatting tags in
the tag reference.

Tags which require parameters and therefore windows to collect them are this
chapter.


ΓòÉΓòÉΓòÉ 10.2.1. Horizontal Rules ΓòÉΓòÉΓòÉ

This dialog is displayed whenever you select the Horizontal Rules <HR>
function:

This dialog has been designed with speed in mind. Once it appears you can
quickly insert a horizontal rule by selecting the alignment, the height and
then the width.

Pressing any of the width buttons will automatically insert the tag and close
the dialog so ther is no 'Insert' button as there is on many other dialogs.

The bar to the right of the Rule height control is a indicator of how big the
Rule will be on the window. It will change it's height in proportion to the
height control.

The 'Cancel' button at the bottom cancels the insert and closes this dialog.

If there is any text selected in the main display then this function will
insert the <HR> tag at the begining of the selection.


ΓòÉΓòÉΓòÉ 10.2.2. Font Size ΓòÉΓòÉΓòÉ

This function will bring up the Font Size <FONT> dialog:

Depending on how you started this function, it will work in two different ways.
If no text has been selected it will be displayed as shown here. From this you
can select the new size for the text and insert <FONT> and </FONT> tags
independantly. The dialog stays open until you close it. This is useful for
going through a document changing a number of blocks of text.

If you have already selected a block of text, then Page assumes you only want
to set it for that block and display the quick version of the dialog to you.
This version does not have the '<Font Size=>' and '</Font>' buttons. Instead it
has a single 'Insert' button. Setting the size and pressing this button then
closes the dialog and inserst the tags around the selected text.

As per most of Page's dialogs, the setting of the font size slider is
remembered to save you time.


ΓòÉΓòÉΓòÉ 10.3. Special Characters ΓòÉΓòÉΓòÉ

Special characters in HTML are an interesting problem. Mostly they are
characters such as < and > which would be miss-interpreted by the browser if
simply typed in. Also there are characters such as the trade mark and copywrite
characters which are nto accessable from the keyboard as well as foreign
langauge character sets.

Pressing any of the character buttons will immediately insert the associated
code. To further allow for foreign languages and the requirement for other
characters, the 'ACSII Code >>>' button and data entry field can be employed to
enter specific codes. Remember to enter the code before pressing the button.


ΓòÉΓòÉΓòÉ 10.4. Lists ΓòÉΓòÉΓòÉ


This dialog is called up if any of the three list functions are invoked:
Ordered Lists - <OL> , Un-Ordered Lists - <UL> and Description Lists - <DL>:

When it is started, Page automatically puts the list tag into the display
before displaying this dialog. The purpose of the dialog is to collect data
from you for each item in the list and insert it. Once you close the dialog,
the end of list tag is inserted and you are finished.

The version of this dialog displayed above is for the description list which
requires an extra field to be present for the title of each item in the list.
With ordered and un-ordered lists this field does not appear.

Actually using this window is quite simple. You enter the text of the item (and
title if a description list) and press 'Insert Item'. This inserts the required
tags into the main editor and clears this window so you can type in the next
item in the list.

Pressing 'Close' at any time will close this dialog and insert the ending tag
for the list.


ΓòÉΓòÉΓòÉ 10.5. Anchors ΓòÉΓòÉΓòÉ

This function allows you to select and insert references to other HTML
document, or to apply a name for the current location. It provides the basic
parameters required for the Anchor Tag:

The first field is where you can type in the target URL for the anchor to point
to. This can be a reference to another document on your site, a document on a
different site, an internal reference to another part of the current document,
a mailto to a userid, a ftp filename, etc.

If it is to another document which is stored on your hard drive, you can use
the 'Find' button to display a standard OS/2 file dialog. If you use this or
drag and drop a file onto the field, then Page will automatically work out a
relative path, reverse the back slashes and convert it to lowercase.

You can further refer to a named section of a document by add the string
'#name' to the end where name is a anchor point which has been assigned that
name within the target document.

The next field is used if you wish to assign a name to the anchor point so that
other anchors can use it as a target. This name can be anything you like as
long as it is a single word.

Finally, the last field is used to enter the text that will become the text the
user clicks on to activate the link.

When you insert the Anchor, Page automatically scans the data you have entered,
converts any backslashes to forward slashes and then converts it to lowercase.


ΓòÉΓòÉΓòÉ 10.6. Images ΓòÉΓòÉΓòÉ

Images are one of the things that make the web so attractive and the Image Tag
<IMG> is used to for this purpose. This dialog can be used to drive it:

The first field on this dialog is where the images file name can be entered.
Again you can use drag and drop to enter this data and Page will automatically
work out a relative path and handle the slashes. This file can be a GIF or JPG
file.

Below this is the 'Alternate Text ...' field. This is the text that will be
displayed if the browser has had graphics turned off. SOme people do this to
speed up processing so it is always recommended to have a description in this
field, especially if the graphic is being used within an anchor.

The next area drives a series of parameters which control how the graphic will
be displayed. Firstly, there is the 'Free Space' group. This controls the
amount of free space that is left around a graphic by the textural part of the
document. I.e. how many pixels away from the top, bottom, left and right sides
of the graphic, the text will come to. You can control this via the 'Horiz' and
'Vert' spin buttons which will go up to 50 pixels. Checking the 'Aspect R.
checkbox makes it so that the Horiz amount is applied to both the horizontal
and vertical amounts.

Next to this is a small box with an icon in it. This changes it's size and
position to match the settings of the Horiz and Vert spin buttons so that you
can get an idea of how much space you are leaving.

To the right of the Free Space controls are a group of buttons which control
the alignment of the image in the browsers window. Setting this to 'None' turns
off this parameter when the tag is inserted. Only 'Left' and 'Right' will
actually have the texturla part of the document wrap around them.

This dialog is also displayed if you drag and drop and graphic file onto the
main editing window.


ΓòÉΓòÉΓòÉ 10.7. Tables ... ΓòÉΓòÉΓòÉ

This function loads the table editor. To do this it must first determine if you
are intending to work with a current table which is in your document.

This is determined by your cursors location within the current document. If the
cursor is with the <TABLE> ... </TABLE> tags, then Page assumes you want to
work with that table. It therefore loads it into the editor. If the cursor is
not within a table, Page then assumes you want to work with a new table and
therefore starts the editor with a 2 rows by 2 columes initial table.

Once started, the table editor looks like this:

The display is designed to be semi-WYSIWYG. This means that it will respond to
some functions visually to give you an idea of the effect on the table. This
should save you time as you won't need to keep playing with it and should also
make editing more enjoyable.

 It is divided into two parts. The top part of the editor is a series of
controls that control the overal look of the table, the number of rows and
columes, and the editor itself. Starting from the left:

 Number of Rows
           This is the number of rows in the table. It is not actually written
           anywhere in the document as browsers work this information out for
           themselves. However it is used by the editor to control how much
           many rows you have available for editing. Currently, the editor can
           handle a maximum of 100 rows.

 Header
           This checkbox tells the editor to create the first row as a header
           row when it writes the data and tags back to Page. In reality this
           means that the text in the first row will be bolded and <TH> tags
           will be used instead of <TD> tags to denote the data for that row.

 Number of Cols
           This is the number of columes in the table. It is not actually
           written anywhere in the document as browsers work this information
           out for themselves. However it is used by the editor to control how
           much many columes you have available for editing. Currently, the
           editor can handle a maximum of 32 rows.

 Align
           This is the alignment of the table itself. For example, if you make
           a 1 colume table and right align it, then nowrap all the text
           interspaced with <BR> tags, then you can effective create a side bar
           of text on your document.

 Border
           This is the thickness of the border around the outside of the table
           in pixels. The main display will adjust itself to give you and
           indication of the thickness of this border.

 Cell Spacing
           This the amount of space to place between cells in the table,
           measured in pixels. The display will adjust itself to give you an
           indication of the distance involved.

 Text Padding
           This is the amount of free space to leave between the text of a cell
           and the edge of the cell. It is measured in pixels. THe display will
           adjust to show you the distance.

 View # Cells
           This is the number of cells to display in the editor's main window.
           At the present time you have 2 by 2, 3 by 3 or 4 by 4 rows and
           columes. The rest of the cells are accessable by scroll sliders
           which will appear at the side and bottom of the window if you
           specify more rows or columes than this setting is showing you.

 Save Table
           This inserts the table back into Page's main editing window.

 Cancel
           This cancels the editing.

 The main body of the table editor is composed of a number of visible cells
 which act as normal editing windows, similar to how a spreadsheet works.
 Resizing the editor will cause these cells to resize accordingly.

 Each cell has quite a range of functionality attached to it. You can right
 click on it to bring up a popup menu which is similar to the main popup menu
 in Page. It gives you access to the main editing functions you might require
 in order to enter text into a cell, as well as most of the HTML tags you might
 require. Cells can also act as drag targets as per the main editor, except
 that you cannot drag from the table editor to the Web Explorer to test the
 data. You will have to save the table back to the current document to do this.


ΓòÉΓòÉΓòÉ 10.8. Cell Settings ΓòÉΓòÉΓòÉ


Each cell has as it's title two numbers which represent it's location in the
table in the form (row,col). You will also see settings which are particular to
that cell displayed here as well. To the left of this is a small button labels
's'.

Pressing this button will reveil the following window from which you can set
the cells settings:

This window will position itself over the top left hand corner of the cell that
called it up and will show you the current settings of that cell. They are as
follows:

 Row Span
           This is the number of rows below the present one that the current
           cell will cover. By using this parameter you can make a cell that
           covers any number of rows up to the maximum number you have
           specified in the table settings at the top of the editor. The
           display will respond by enlarging the cell to cover cells below it
           so that you can visually see the result as well as making sure you
           donot enter data into cells which effectively no longer exist. This
           function is rather like the Group function found in many
           spreadsheets.

 Col Span
           This is exactly the same type of parameter as a Row Span parameter
           and works in exaclty the same way. However it covers columes to the
           right of the current cell as opposed to covering rows. This can be
           very effective when you need a title which covers more than one
           colume of data.

 Align
           This aligns the text within the area of the cell. At the present
           time there is now way to specify such information for whole rows or
           columes because a table is not defined in these terms to the
           browser. Therefore in order to create such things as a right aligned
           colume (for example, numeric data) you will have to set this etting
           for every cell in that colume.

 Text Wrap
           This controls the NOWRAP parameter of the cell. Turning it on by
           checking this checkbox has the result that the browser does not
           automatically wrap the text to fit into the cell. Instead, it makes
           the table wide enough to accomodate the widest lines of each cell.
           This can be every handy for creating special effects tables which
           donot take up the maximum width of the browsers window. Simple set
           this parameter and then us <BR> tags to create line of text within
           each cell which are the width you require. The table will then be
           slightly wider than the widest text and will auto-flow the rest of
           the ducment around it.

 The button in the corner of the window with the label 'x' will close this
 window and return you to the cell below it. From there you can continue to
 edit the table.


ΓòÉΓòÉΓòÉ 10.9. Form Objects ΓòÉΓòÉΓòÉ


All the form objects accessable through this menu item use a common window for
gathering the information that they need. Whilst most of the fields on this
window are turned off and on, depending on what type of object is being worked
with, a couple are common to all.

These two fields are always on this window, no matter what ype of object you
are working with. The first is the type of the object to be created. Changing
it to another value will automatically update the display to reflect the
information that the particular object needs to collect.

The second field is the name of the object. This is needed so that it can be
passed to the script for processing. Without it, the script would not know what
the information is that it receives from the form.

For further information about the parameters for each type of object, select
the object from this list:

        Data Entry Field
        Multi-Line Entry Field
        Password Entry Field
        Hidden Data Field
        Selection List
        Checkbox
        Radio Button
        Submit Button
        Reset Button


ΓòÉΓòÉΓòÉ 10.9.1. Text Entry Field ΓòÉΓòÉΓòÉ

Text Entry Fields are simple fields used for collecting textural information
from the reader. If you need multiple lines of text then see the Multi-Line
Entry Field information.

Text Entry Fields use the follow parameters:

 Default Value
           This is the default value that will be displayed in the field when
           the form is first displayed. Further, if a Reset Button is present,
           this value will be reloaded into the form when you press it.

 Visible Width
           This is the width of the field in characters.

 Max Length
           This is the maxiumum number characters that can be entered into the
           field. If this is more than the visible width, then the text in the
           field will be scrolled sideways.


ΓòÉΓòÉΓòÉ 10.9.2. Multi-Line Entry Field ΓòÉΓòÉΓòÉ

Multi-Line Entry fields are useful when you need to have tha bility to enter a
large amount of text. For example, for submitting comments to a database, or
entering a E-mail. They use a slightly different format to other form objects.
They have both a start and end tag and have their default value as any text
which has been entered between the two tags. Multi-Line Entry Fields use the
follow parameters:

 Default Text
           This is the default text that will be displayed in the field. In
           HTML this text is placed between the <TEXTAREA> ... </TEXTAREA>
           tags.

 Columes
           This is the width of the field measured in characters.

 Rows
           This is the height of the field measured in rows.


ΓòÉΓòÉΓòÉ 10.9.3. Password Entry Field ΓòÉΓòÉΓòÉ

Password fields are exactly the same as the standand Text Entry Field except
that instead of diplaying the characters the user is typing, they display
asterisks (*) instead. Thus, they can be used for sensitive data such as
passwords.

Password Entry Fields use the follow parameters:

 Default PW
           This is the default text that will be placed in the field.

 Visible Width
           This is the visible width of the field measured in characters.

 Max Length
           This is the maximum number of characters that can be entered in this
           field. If it is longer that the visible width then the text will be
           scrolled accordingly.


ΓòÉΓòÉΓòÉ 10.9.4. Hidden Text Field ΓòÉΓòÉΓòÉ

Hidden text field are fields which are not displayed to the reader, but are
passed to the CGI script. This makes then useful for situtations where you need
to pass fixed information to the script. For example, the path and file name of
the document that has called it.

Hidden Data fields only have one parameter which is the data to be passed to
the script.


ΓòÉΓòÉΓòÉ 10.9.5. Selection List ΓòÉΓòÉΓòÉ

Selection lists are useful where you want to have a range of options for a user
to select from. They present the options using a scrollable list of items.

Selection fields are another odd form object that uses different tags to the
standard <INPUT> tag. They use the tags <SELECT> ... </SELECT> to define the
selection list, and the <OPTION> tag with them to define each item in the list.

Selection Lists use the follow parameters:

 List Items
           This is a list of items that will be displayed within the list. Each
           of these items will be defined in the HTML with a <OPTION> tag. The
           two buttons: 'Add' and 'Delete' can be used to add and delete items
           from this list.

           The 'Multiple Selection' checkbox below them adds a parameter to the
           selection to tell the browser that the reader can select more than
           one item from the list.

 Visible Lines
           This is the number of lines that the selection is to display on the
           form. If there are more items in the list than this number, then a
           scroll bar is added to the object so that the reader can scroll the
           list into view.


ΓòÉΓòÉΓòÉ 10.9.6. Checkbox ΓòÉΓòÉΓòÉ

Checkboxs are simple on/off switches that can be used to tell things to the
script.

Checkboxs use the follow parameters:

 Checked
           This tells the browser to display the checkbox with a tick mark
           already in it.

 Passed Value
           This is the text that will be the title of the checkbox and also
           will be passed to the script if the checkbox is checked (selected).


ΓòÉΓòÉΓòÉ 10.9.7. Radio Button ΓòÉΓòÉΓòÉ

Radio buttons are similar to checkboxes is that they define a on/off switch to
the called script. However radio buttons are used in situations where you need
to be able to select one choice from many. If you select a radio button, all
other radio buttons in it's group are automatically switched off.

The grouping is controlled by the Name parameter of the radio buttons. All
buttons which have the same name are considered part of the same group.

NOTE: if you add a radio button to a form and don't give it a name then the Web
Explorer will crash when you press it.

Radio buttons use exactly the same parameters as checkboxes.


ΓòÉΓòÉΓòÉ 10.9.8. Submit Button ΓòÉΓòÉΓòÉ

Submit buttons submit the data contained in the form to the target script.

They have one parameter which is the label to be displayed on the button. The
default value is 'Submit'.


ΓòÉΓòÉΓòÉ 10.9.9. Reset Button ΓòÉΓòÉΓòÉ

Reset buttons reset the form back to it's default settings. Any input that the
reader may have done will be lost.

Reset buttons have a single parameter which is the text to be displayed on the
button. The default value is 'Reset'.


ΓòÉΓòÉΓòÉ 11. Ring Control Menu Items ΓòÉΓòÉΓòÉ

When the Ring is enabled, these menu items are added to the main menu bar of
Page. They allow you to rotate left and right through the ring using the '<'
and '>' menu items. If you reach either end of the files in the ring then these
buttons will automatically start at the other end again.

The 'Ring' menu item in between them is used to give you direct access to the
file you want to load into tht display. Under it is listed all files currently
open in the ring and selecting a file will load it into the display for
editing. All settings such as cursor position and selected text are rememberd
and are also loaded at this time.


ΓòÉΓòÉΓòÉ 12. Preferences Menu ΓòÉΓòÉΓòÉ


The Preferences menu contains items which control the general setup of Page
itself.


ΓòÉΓòÉΓòÉ 12.1. Display Toolbar ΓòÉΓòÉΓòÉ


If you have hidden the toolbar, then selecting this menu item will bring it
back again.


ΓòÉΓòÉΓòÉ 12.2. HintBar ΓòÉΓòÉΓòÉ


This submenu controls Page's main hint bar. This is a bar along the top or
bottom of the window which is used to give you a 'hint' as to the the function
of the object which the cursor is over.

You have three options for the hint bar: Top, Bottom or Off. Off removes it
from the display all together.


ΓòÉΓòÉΓòÉ 12.3. Word Wrap ΓòÉΓòÉΓòÉ


This controls word wrapping in the display. If turned on then paragraphs which
are wider than the display will be 'wrapped' so that they are fully displayed.

Turning this off means that any lines which are wider than the display simply
disappear off the right hand side of the window. To get to them, you must use
the cursor to scroll over the text.


ΓòÉΓòÉΓòÉ 12.4. Font ΓòÉΓòÉΓòÉ

This menu item has two options. Selecting 'Select ...' will bring up the above
display from which you can select the font that is used by Page for editing
documents.

Selecting 'Default' resets Page back to it's default font.

You can also set the font being used by dragging and dropping from the standard
OS/2 Font palette.


ΓòÉΓòÉΓòÉ 12.5. Colour ... ΓòÉΓòÉΓòÉ

Page presently has two options for colour settings. You can set either the
colour of the font in the display, or the the colour of the background.

You can do this in two different ways. Firslty you can use the standard OS/2
colour palette and drag and drop to set the colours. Or you can use this
dialog. Selecting either 'Font' or 'Background' and selecting a colour from the
palette will set the display to this colour.


ΓòÉΓòÉΓòÉ 12.6. Other Preferences ΓòÉΓòÉΓòÉ

This display is used for setting a number of general preferences for how Page
behaves. They are as follows:

 CRLF before <P>aragraph tags.
           If this is set then Page will automatically insert a carriage
           return/line feed before each <P> tag that you request to be
           inserted. This has the effect of always ensuring that paragraph tags
           are on a new line.

 CRLF before <BR>reak tags.
           If this is set then Page will automatically insert a carriage
           return/line feed before each <BR> tag that you request to be
           inserted. This has the effect of always ensuring that break tags are
           on a new line.

 Insert a <P> tag before all List Items.
           many lists look much better if there is a <P> tag between each list
           item. It ensures that the list is easier to read.

 Enable Ring Editing.
           If this is set then Page will activate Ring Editing.

 Default HTML for New Files.
           When you select the menu item 'File - New', then this is the text
           that is preloaded into the new file.


ΓòÉΓòÉΓòÉ 13. Tag Reference ΓòÉΓòÉΓòÉ


Here is a list of the tags that I have come across and their functionality.
This list has been sifted from a number of books and documentation. I am still
working on it. It is a mix of HTML 2.0 and HTML 3.0 tags, based mostly on those
which I have found to work with IBM's Web Explorer. However there are some
parameters in this list which do not seem to work with it.

For those of you who are interested, formal definitions of HTML do exist and
are called DTD's. Unfortuneately, the one's I have downloaded so far have been
in a less than understandable form. So as soon as I can find out how to read
them, I will get this list fully up to date.

NOTE: Unless specified as being Required, all parameters are optional. Options
for a parameter are specified with the pipe character ("|") in between to
signify a choice.

Select one of the following:-
    Document Structure Tags
    Text Formatting Tags
    External References and Graphics.
    Lists
    Tables
    Form Objects


ΓòÉΓòÉΓòÉ 13.1. Document Structure Tags ΓòÉΓòÉΓòÉ


        <HTML> - HTML Document.
        <HEAD> - Document Heading.
        <ISINDEX> - Page is Searchable.
        <TITLE> - Document Title.
        <BASE> - Base Directory.
        <BODY> - Body of Document.
        <FORM> - Form Definition.


ΓòÉΓòÉΓòÉ 13.1.1. <BASE> - Base Directory. ΓòÉΓòÉΓòÉ


<BASE> is only valid within <HEAD> ... </HEAD> tags.

The <BASE> Tag is used to define a base directory from which all subsequent
file references are made.

This only works for relative file references such as './bitmap.gif'. Absolute
references are not effected. Using this tags gives you the ability to change
the base directory as setup in your HTML servers configuration. However I do
recommend that you only do this after carefully considering other options
because it can cause probelsm when you need to reference files outside of the
directory structure.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 HREF="URL"
           This parameter is Required.
           URL is any valid directory on your server which is to be the new
           base directory for all subsequent calls for documents and references
           within them.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<HEAD>
<BASE HREF="URL">
</HEAD>


ΓòÉΓòÉΓòÉ 13.1.2. <BODY> - Body of Document. ΓòÉΓòÉΓòÉ


<BODY> defines the start and the end of the textural content of the document.
I.e. only text and graphics within the <BODY> </BODY> will be displayed by the
browser.

This tag can also be used to define the colour of text, links, visited links
and the background for the page to be displayed. Further you can also specify a
bitmap that will be used as a background. This can be very effective as it
greatly enhances the look of a page, however it can also result in eye searing
pages, so careful selection of colours and graphics is recommended.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 BACKGROUND="GraphicFile"
           GraphicFile can be any GIF or JPG format graphic file. It should
           have the GIF or JPG extension to ensure that the browser has no
           problem with it.

 BGCOLOR="Color"
           Color is a hexidecimal number which tells the browser what colour to
           use for the background.

           The format for it is "#rrggbb" where rr is the red component, gg is
           the green and bb is the blue component. For example, "#000000" is
           equal to black, "#FFFFFF" is equal to white, "#800080" is equal to
           dark purple, and "#CCCCCC" is equal to light grey.

 TEXT="Color"
           Color is a hexidecimal number which tells the browser what colour to
           use for the text of the document.

 LINK="Color"
           Color is a hexidecimal number which tells the browser what colour to
           use for links to other documents.

 VLINK="Color"
           Color is a hexidecimal number which tells the browser what colour to
           use for links to other documents which you have already visited.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<HTML>
<BODY BACKGROUND="GraphicFile" BGCOLOR="Color" TEXT="Color" LINK="Color"
VLINK="Color" >
</HTML>


ΓòÉΓòÉΓòÉ 13.1.3. <FORM> - Form Definition. ΓòÉΓòÉΓòÉ


<FORM> can be used as a replacement for the <BODY> tag or within it to create a
form within the body of a document.

It is used to define the start and end of a data entry form. I.e. you can enter
data into fields which are then transmitted to the web site for processing. The
most common example of this that you will probably have used is the data entry
screen for search programs such as Yahoo.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 METHOD="POST | GET"
           This parameter is Required.

           This parameter defines how a form sends data to the server.

           POST is the preferred option (although it's not the default) as it
           sends the data to the server through it's normal I/O routines and
           therefore is easier to handle by the CGI scripts that do the work.

           GET is the default and sends the data to the server as a URL request
           with the data added to the end of the URL. This has a maximum limit
           of 1024 characters.

 ACTION="URL"
           This parameter is Required.

           This parameter defines the script or program that the form will send
           the data to. Typically this will be a Perl script with a .CGI
           extension, however yif you are using OS/2 servers, REXX scripting
           can also be used.

 ENCTYPE="MimeType"
           This parameter defines the the mime encoding to use for the data.
           Usually this is not required.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<FORM METHOD="POST | GET" ACTION="URL" ENCTYPE="MimeType">


ΓòÉΓòÉΓòÉ 13.1.4. <HEAD> - Document Heading. ΓòÉΓòÉΓòÉ


<HEAD> defines the documents heading section. It appears within the <HTML>
</HTML> tags and usually before the <BODY> tag.

It is used to define heading related information which at this stage consists
of the documents title and <BASE> tags.

<HEAD> is an important part of good HTML and should always be in every page
along with the <TITLE> which define the documents title.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <HEAD> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<HTML>
<HEAD>
<BASE ...>
<TITLE> document Title </TITLE>
</HEAD>
<BODY>


ΓòÉΓòÉΓòÉ 13.1.5. <HTML> - HTML Document. ΓòÉΓòÉΓòÉ


<HTML> defines the start and end of a HTML document. Whilst not strictly
required, it is considered good HTML to have this tag in place.

It can also be used to define the HTML level that is used throughout this
document. Although only the most energetic authors put this in place. Some HTML
editors will create this information for you.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 VERSION="HTMLVersion"
           This parameter defines the HTML version used throughout the document
           and will look something like this:

              VERSION="-//IETF//DTD HTML//EN//2.0"

           Don't ask me to explain it !


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<HTML VERSION="HTMLVersion">
<HEAD>
</HEAD>
<BODY>
</BODY>
<HTML>


ΓòÉΓòÉΓòÉ 13.1.6. <ISINDEX> - Indicates Searchable Index. ΓòÉΓòÉΓòÉ


There is no corresponding end tag for <INPUT>.

For long textural documents, a search engine can be made available by including
this tag. To access it you add a query to the end of the URL you use to request
the HTML page like this:

    http://www.os2zone.aus.net/subs/zone.html?Derek+Clarkson

 Providing that zone.html has the tag <ISINDEX> on it somewhere, the browser
 will then search the page it receives for the two words 'Derek' and
 'Clarkson'.

 Documents that are searchable also have a data entry added to the window from
 which you can execute queries on the document. By default the text string
 "This is a searchable index. Enter search keybwords:" is used with it, but you
 can override this with your own message as per below.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 PROMPT="PromptText"
           PromptText is a message which will be displayed at the top of the
           document to indicate that it is searchable.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<HEAD>
<ISINDEX PROMPT="PromptText">
</HEAD>


ΓòÉΓòÉΓòÉ 13.1.7. <TITLE> - Document Title. ΓòÉΓòÉΓòÉ


<TITLE> is only valid within <HEAD> ... </HEAD> tags.

The <TITLE> Tag defines the documents title which will generally appear in the
title bar of the browser you are using. It can also be used for creating a
table of contents automatically.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <TITLE> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>


ΓòÉΓòÉΓòÉ 13.2. Text Formatting Tags ΓòÉΓòÉΓòÉ


Commonly used tags:-

        <B> - Bold Text.
        <BR> - Line Break.
        <CENTER> - Center text.
        <FONT> - Font Size.
        <Hn> - Headings.
        <I> - Italic Text.
        <P> - Paragraph.
        <PRE> - Pre formatted Text.
        <U> - Underline Text.

 Less Commonly Used:-

        <ADDRESS> - Addresses.
        <BLOCKQUOTE> - Block Quotes.
        <CITE> - Citation.
        <CODE> - Program Code.
        <EM> - Emphasis.
        <KBD> - Keyboard.
        <SAMP> - Sample.
        <STRONG> - Strong Emphasis.
        <TT> - Teletype.
        <VAR> - Variables.


ΓòÉΓòÉΓòÉ 13.2.1. <ADDRESS> - Addresses. ΓòÉΓòÉΓòÉ


The <ADDRESS> Tag is used to highlight some text that is an address of some
sort.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <ADDRESS> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<ADDRESS> Address text </ADDRESS>


ΓòÉΓòÉΓòÉ 13.2.2. <B> - Bold Text. ΓòÉΓòÉΓòÉ


The <B> Tag bolds all text within it's boundaries.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <B> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<B> ... document text ... </B>


ΓòÉΓòÉΓòÉ 13.2.3. <BLOCKQUOTE> - BlockQuotes. ΓòÉΓòÉΓòÉ


The <BLOCKQUOTE> Tag is most often used to highlight material which has been
sourced from othr documents, whether paper or electronic.

It also has the effect of indenting the text which is useful for formatting
effects.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <BLOCKQUOTE> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<BLOCKQUOTE> Reference text </BLOCKQUOTE>


ΓòÉΓòÉΓòÉ 13.2.4. <BR> - Line Break. ΓòÉΓòÉΓòÉ


The <BR> Tag is used to create a line break between two lines. If you want to
separate paragraphs, then use the <P> Tag. <BR> does the same job but does not
leave any space between the lines.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <BR> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


... text
<BR> ... text


ΓòÉΓòÉΓòÉ 13.2.5. <CENTER> - Center text. ΓòÉΓòÉΓòÉ


The <CENTER> Tag Centers all text within it's boundaries.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <CENTER> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<CENTER> ... document text ... </CENTER>


ΓòÉΓòÉΓòÉ 13.2.6. <CITE> - Citation. ΓòÉΓòÉΓòÉ


The <CITE> Tag is most often used to highlight citations from other documents.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <CITE> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<CITE> Reference text </CITE>


ΓòÉΓòÉΓòÉ 13.2.7. <CODE> - Program Code. ΓòÉΓòÉΓòÉ


The <CODE> Tag is most often used to highlight program code written in a
document as an example.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <CODE> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<CODE> Program code </CODE>


ΓòÉΓòÉΓòÉ 13.2.8. <EM> - Emphasis. ΓòÉΓòÉΓòÉ


The <EM> Tag is most often used to provide Emphasis on the enclosed text. This
is most often done as Italics, but is up to the way your browser interprets the
tag.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <EM> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<EM> text </EM>


ΓòÉΓòÉΓòÉ 13.2.9. <FONT> - Font Size. ΓòÉΓòÉΓòÉ


The <FONT> Tag sets the size of all text within it's boundaries bigger or
smaller than the base font size in your browser.

This can be very handy for creating highlighted text by changing it's size or
creating false headings which look like Heading Tags but don't use them.

Note: To create a false heading, use both <FONT> and <B>.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


    SIZE=n
              This parameter is Required.
              n can range from -3 to 5 and indicates the size bigger or smaller
              than the default size to make the text.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<FONT SIZE=n> ... document text ... </FONT>


ΓòÉΓòÉΓòÉ 13.2.10. <Hn> - Headings. ΓòÉΓòÉΓòÉ


The <Hn> Tag sets the enclosed text up as a heading. This means that it is set
on it's own Line as though a <P> tags had been added before and after it.

There are currently 6 levels of headings from H1 to H6. The only thing that
they change is the size of the font. Heading 1 is quite big and heading 6 is
normal text size.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <Hn> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<Hn> Heading text </Hn>


ΓòÉΓòÉΓòÉ 13.2.11. <I> - Italic text. ΓòÉΓòÉΓòÉ


The <I> Tag Sets all text to Italics within it's boundaries.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <I> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<I> ... document text ... </I>


ΓòÉΓòÉΓòÉ 13.2.12. <KBD> - Keyboard. ΓòÉΓòÉΓòÉ


The <KBD> Tag is most often used to indicate text that is to be, or has been
typed in at the keyboard. This usually results in a Courier font as though you
had used the <PRE> tag, however formatting of spaces and paragraphs is still
done.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <KBD> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<KBD> Text </KBD>


ΓòÉΓòÉΓòÉ 13.2.13. <P> - Paragraph. ΓòÉΓòÉΓòÉ


The <P> Tag creates a new paragraph and also places a few pixels worth of space
between the two paragraphs.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <P> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


... text
<P> ... text


ΓòÉΓòÉΓòÉ 13.2.14. <PRE> - Preformatted Text. ΓòÉΓòÉΓòÉ


The <PRE> Tag cause all text within it's boundaries to remain as it was typed
in.

If you do not add any tags to your document, a browser will reformat the text,
removing carriage returns, extra spaces, etc. so that the text is one big
paragraph, ignoring any formatting you may have done. The <PRE> tag tells the
browser to leave the enclosed text exactly as it is in the source file, extra
spaces and carriage returns included.

This is a very handy facility as it gives you a quick way to create tables and
lists, it can also be useful as the default font is also used for preformatted
text (usually  Courier) hich can give a good look to some sections of a
document.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <PRE> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<PRE> document text </PRE>


ΓòÉΓòÉΓòÉ 13.2.15. <SAMP> - Sample text. ΓòÉΓòÉΓòÉ


The <SAMP> Tag is most often used to highlight sample output from a program.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <SAMP> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<SAMP> Sample output </SAMP>


ΓòÉΓòÉΓòÉ 13.2.16. <STRONG> - Strong Emphasis. ΓòÉΓòÉΓòÉ


The <STRONG> Tag is most often used to provide a emphasis to the enclosed text.
This typically results in bolding of the text.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <STRONG> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<STRONG> Sample output </STRONG>


ΓòÉΓòÉΓòÉ 13.2.17. <TT> - Teletype text. ΓòÉΓòÉΓòÉ


The <TT> Tag is most often used to make the enclosed text look as if it had
come off a teletype machine. This usually results in the text be set to a font
of Courier.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <TT> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<TT> Output Text </TT>


ΓòÉΓòÉΓòÉ 13.2.18. <U> - Underline Text. ΓòÉΓòÉΓòÉ


The <U> Tag Underlines all text within it's boundaries.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <U> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<U> ... document text ... </U>


ΓòÉΓòÉΓòÉ 13.2.19. <VAR> - Variable. ΓòÉΓòÉΓòÉ


The <VAR> Tag is most often used to highlight variable names in the text. This
also usually results in Italic being applied.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <VAR> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<VAR> Variable </VAR>


ΓòÉΓòÉΓòÉ 13.3. External References and Graphics ΓòÉΓòÉΓòÉ


        <A> - Link Anchor.
        <ANIMATE> - Defines a Animation for the Web Explorer.
        <FRAME> - Defines an Animation Frame.
        <HR> - Horizontal Rule.
        <IMG> - Graphic Image.


ΓòÉΓòÉΓòÉ 13.3.1. <A> - Link Anchor. ΓòÉΓòÉΓòÉ


The <A> Tag is used to denote a block of text which is a anchor or clickable
link to another document, a email form, or a file for automatic downloading.
You can also use it to assign names to points in your document which can be
used as targets for links as well. I.e. clicking on the text will goto that
particular spot on the page.

You can also assign images as anchors by including them within the boundaries
of the <A> tag.

This tags requires either the HREF tag or the NAME tag, or both. But at least
one must be present or it does nothing.

To link to another page and also specify where in that page you wish to go, you
would use a link like HREF="./home.html#BOTTOM". The "#" character tells the
browser to use the following text as a place name within the target page. To
simply goto another part of the same page just use the name assigned to that
particular location. I.e. HREF="#BOTTOM".


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 HREF="Target"
           Either this parameter or NAME is Required.
           Target can be any one of a number of things as follows:

               A link to another document. For example, to link to another
                site you could use a WWW address such as
                "http://www.os2zone.aus.net". Or altenatively you can link to
                another page on your own server by using a relative path such
                as "../../bitmaps/graph1.html".

               An email target. For example to mail me, you would use
                "mailto:[e-mail]".

               One of a range of other link types. Most common amongst these
                are "ftp:...", "telnet:...", and "gopher:...".

 NAME="Name"
           Either this parameter or HREF is Required.
           Name is a unique name to be assigned to this place in this page. You
           can use the name in other pages, but only once in the same page.

 REL="NEXT | PREVIOUS | PARENT | MADE"
           This parameter describes the relationship between this page and the
           one being used as the target of the link.

 REV="NEXT | PREVIOUS | PARENT | MADE"
           This parameter is the reverse of the previous one in that it tells
           use the relationship of the target document to the current one.

 TITLE="Text"
           Text is some advisary information about the title of the target
           document. Usually it is the same as the target page's <TITLE> ...
           </TITLE> text.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<A HREF="Target" NAME="Name" REL="NEXT | PREVIOUS | PARENT | MADE" REV="NEXT |
PREVIOUS | PARENT | MADE" TITLE="Text"> ... Clickable Anchor Text, images ...
</A>


ΓòÉΓòÉΓòÉ 13.3.2. <ANIMATE> - Defines an animation for the Web Explorer. ΓòÉΓòÉΓòÉ


<ANIMATE> defines the start of a definition of ann animation that will be used
by the Web Explorer to signify activity. I.e. it is the animation displayed in
the box at the top right of the window.

Animations are basically composed of a series of images stored in individual
files. These can be GIF, JPG or BMP files. BMP are the most popular and easiest
to work with. The images must be 40 x 40 pixels in size and can be of anything
you like. Many people use popular animation and rendering packages to put them
together.

The individual frames are defined using the <FRAME> tag.

There can be no text within the <ANIMATE> ... </ANIMATE> tags.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


This tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<ANIMATE>
<FRAME SRC="./anims/bitmap1">
<FRAME SRC="./anims/bitmap2">
 ....
</ANIMATE>


ΓòÉΓòÉΓòÉ 13.3.3. <FRAME> - Defines an animation Frame. ΓòÉΓòÉΓòÉ


<FRAME> defines an individual frame in a Web explorer animation. This tag can
only exist within the <ANIMATE> tag.

Each frame must be 40 x40 pixels in size and can be a GIF, JPG or BMP file. You
must put in one <FRAME> tag for each frame in the animation.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ

 SRC="GraphicFile"
           GraphicFile is the GIF, JPG or BMP file for the frame being
           specified.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<ANIMATE>
<FRAME SRC="./anims/bitmap1">
<FRAME SRC="./anims/bitmap2">
 ....
</ANIMATE>


ΓòÉΓòÉΓòÉ 13.3.4. <HR> - Horizontal Rule. ΓòÉΓòÉΓòÉ


<HR> has no corresponding end tag.

<HR> draws a straight line across the width of the browsers page. This can be
very good for providing visiual queues which break the document up into meanful
sections.

By modifying a couple of parameters you can also control the alignment, width
and thickness of the line, giving you the ability to get quite decorative
effects.

The ultimate rules though are created by using bitmaps which are only a few
pixels high and very wide. You then place then using the <IMG> tag.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 ALIGN="LEFT | RIGHT | CENTER"
           Aligns the rule with either the left hand side of the window, right
           hand side or centers it.

 NOSHADE
           There is no value for this parameter.
           This tells the browser not to provide shading on the rule.

 SIZE=n
           n is the number of pixels high to make the rule.

 WIDTH="Number | Percentage%"
           Number tells the browser to make the rule a specific number of
           pixels. Percentage tells it to make the rule a percentage of the
           current width of the window.

           I prefer using Percenages such as 50% or 75%, as it then does not
           matter how wide the surfer has set their window to.

           The default for this is the full width of the window.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<HR ALIGN="LEFT | RIGHT | CENTER" NOSHADE SIZE=Number | "Percentage%">


ΓòÉΓòÉΓòÉ 13.3.5. <IMG> - Graphic Image. ΓòÉΓòÉΓòÉ


<IMG> has no corresponding end tag.

<IMG> reads in a graphic image stored in a GIF or JPG file from the server and
draws it's contents at the current spot in the browser. This tag is responsible
for almost all the graphics you see on the WWW.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 ALIGN="LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | BASELINE | BOTTOM |
 ABSBOTTOM"
           Aligns the graphic according to one of the following rules:

           LEFT Aligns the graphic along the left hand margin and wraps text
           around the right hand side of it.

           RIGHT Aligns the graphic along the right hand margin and wraps text
           around the left hand side of it.

           TOP Aligns the graphic with the tallest item in the current line.

           TEXTTOP Aligns the graphic with the top of the tallest text in the
           line.

           MIDDLE Aligns the baseline of the current text with the middle of
           the image. NOTE: this does not wrap the text.

           ABSMIDDLE Aligns the middel of the text with the middle of the
           graphic. NOTE: this does not wrap the text.

           BASELINE (Default) Aligns the graphic with the baseline of the
           current line.

           BOTTOM Same as BASELINE.

           ABSBOTTOM Aligns the Graphic with the bottom of the current line.

 WIDTH=n
           This is required if HEIGHT is present.

           n is the width of the image in pixels. Using this helps the browser
           to display graphics quickly as it can predict the space needed by
           the graphic before it receives it.

 HEIGHT=n
           This is required if WIDTH is present.

           n is the height of the image in pixels. Using this helps the browser
           to display graphics quickly as it can predict the space needed by
           the graphic before it receives it.

 BORDER=n
           n is the thickness of the border to be added around the graphic.

 VSPACE=n
           For images whose alignment will wrap text around them, n is the
           number of pixels of blank space to be kept above and below the
           image.

 HSPACE=n
           For images whose alignment will wrap text around them, n is the
           number of pixels of blank space to be kept to either side of the
           image.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<HR ALIGN="LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | BASELINE |
BOTTOM | ABSBOTTOM" WIDTH=n HEIGHT=n BORDER=n VSPACE=n HSPACE=n>


ΓòÉΓòÉΓòÉ 13.4. Lists. ΓòÉΓòÉΓòÉ


Commonly used tags:-

        <DL> - Definition List.
        <DT> - Definition List, Item Title.
        <DD> - Definition List, Item Description.
        <OL> - Ordered List.
        <UL> - Un-Ordered List.
        <LI> - List Item.

    Less Commonly used tags:-

        <DIR> - Directory List.
        <MENU> - Menu List.


ΓòÉΓòÉΓòÉ 13.4.1. <DD> - Definition List, Item Description. ΓòÉΓòÉΓòÉ


This tag does not require a corresponding end tag.

It is used to indicate the the next block of text is the description for the
item in the description list. The browser will keep formatting data as part of
this description until a <DT> or </DL> tag is encountered.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


The <DL> tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<DL>
<DT> Title ...
<DD> Description text ...
</DL>


ΓòÉΓòÉΓòÉ 13.4.2. <DIR> - Directory List. ΓòÉΓòÉΓòÉ


This tag defines the the following items will be part of a directory list. This
is usually a short list of 20 or so items which have short names.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 COMPACT
           This parameter cause the browser to reduce the amount of space
           between items in the list.

           Note:- This is not supported by all browsers.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<DIR COMPACT>
<LI> Item text ...
<LI> Item text ...
</DIR>


ΓòÉΓòÉΓòÉ 13.4.3. <DL> - Definition List. ΓòÉΓòÉΓòÉ


This tag defines that the following items will be part of a definition list.
This is a list where each item has a title, followed by a description which is
indented from the left margin.

The title text of each item is signified by a <DT> tag. The textural
description of this item is set with a <DD>

Typically this would be used in cases where you are listing some information
and then describing it. For example, a list of WWW URLs with an associated
description of place.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 COMPACT
           This parameter cause the browser to reduce the amount of space
           between items in the list.

           Note:- This is not supported by all browsers.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<DL COMPACT>
<DT> Item title ...
<DD> Item description ...
</DL>


ΓòÉΓòÉΓòÉ 13.4.4. <DT> - Definition List, Item Title. ΓòÉΓòÉΓòÉ


This tag does not required a corresponding end tag.

This tag defines the title text for each item in a definition list.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


This tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<DL>
<DT> Item title ...
<DD> Item description ...
</DL>


ΓòÉΓòÉΓòÉ 13.4.5. <LI> - List Item. ΓòÉΓòÉΓòÉ


This tag does not required a corresponding end tag.

This tag defines the text for each item in a standard list.

Note:It is not used in a definition list.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 TYPE="A | a | I | i | 1 | DISC | CIRCLE | SQUARE"
           This parameter is used to over ride the settings of the <OL> or <UL>
           tags, see them for further details of this parameter.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<OL>
<LI> Item text ...
</OL>


ΓòÉΓòÉΓòÉ 13.4.6. <MENU> - Menu List. ΓòÉΓòÉΓòÉ


This tag defines a menu list which is a list of items where each item would fit
on one line.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 COMPACT
           This parameter cause the browser to reduce the amount of space
           between items in the list.

           Note:- This is not supported by all browsers.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<MENU>
<LI> Item text ...
</MENU>


ΓòÉΓòÉΓòÉ 13.4.7. <OL> - Ordered List. ΓòÉΓòÉΓòÉ


This tag defines a list where each item is assigned a number. This makes it
very useful insituations such as instruction manuals.

All items within this list must be preceeded with a <LI> tag.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 COMPACT
           This parameter cause the browser to reduce the amount of space
           between items in the list.

           Note:- This is not supported by all browsers.

 TYPE="A | a | I | i | 1"
           This parameter specifies the numbering system to be used.
           A - Uppercase alphabetic letters.
           a - Lowercase alphabetic letters.
           I - Uppercase Roman letters.
           i - Lowercase Roman letters.
           1 - Aribic numbers (default).


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<OL TYPE="A | a | I | i | 1">
<LI> Item text ...
</OL>


ΓòÉΓòÉΓòÉ 13.4.8. <UL> - Un-Ordered List. ΓòÉΓòÉΓòÉ


This tag defines a list where each item is unordered. It therefore assigns a
bullet to indicate the new item. This makes it useful for such things as
listing software features etc.

All items within this list must be preceeded with a <LI> tag.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


 COMPACT
           This parameter cause the browser to reduce the amount of space
           between items in the list.

           Note:- This is not supported by all browsers.

 TYPE="DISC | CIRCLE | SQUARE"
           This parameter specifies the bullet type to be used.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<UL TYPE="DISC | CIRCLE | SQUARE">
<LI> Item text ...
</UL>


ΓòÉΓòÉΓòÉ 13.5. Tables. ΓòÉΓòÉΓòÉ


        <TABLE> - Table definition.
        <TR> - Table Row.
        <TH> - Table Heading.
        <TD> - Table Cell Data.


ΓòÉΓòÉΓòÉ 13.5.1. <TABLE> - Table Definition. ΓòÉΓòÉΓòÉ


The <TABLE> Tag defines the beginning of a table definition. Basically, this
consists of a number of <TR> tags which define the start of each new row in the
table, with <TD> tags defining each piece of data with the row.

The total number of rows and columes is controlled by how many of these tags
you put in. For example, if you put 3 table row tags, with 4 table data tags
following each one, then the table displayed by the browser will be 3 rows by 4
columes.

You can also tell specific cells to extend themselves over their neighbours.
This allows you to do such thing as have one colume heading with two columes of
data underneath it.

You can also setup the appearance of the table such as how thickt he borders
are and how close the cells are to the borders. A trick I find quite useful is
to setup a table with 0 sized borders. This allows me to format data into
columes. Something the WWW browsers do not do at the present time.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


    ALIGN="LEFT | RIGHT | CENTER"
              This parameter defines the alignment of the table to the page it
              is one. I.e. to the left or right margins, or centered.

    BORDER="n"
              n defines the thickness of the border in pixels. 0 turns the
              border off, enabling you to use tables as a convieniant way to
              format the data.

    CELLSPACING="n"
              n is the distance between cells in pixels.

    CELLPADDING="n"
              n is the distance between the cell edge and the text within that
              cell in pixels.

    VSPACE=n
              For images whose alignment will wrap text around them, n is the
              number of pixels of blank space to be kept above and below the
              image.

    HSPACE=n
              For images whose alignment will wrap text around them, n is the
              number of pixels of blank space to be kept to either side of the
              image.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<TABLE ALIGN="LEFT | RIGHT | CENTER" BORDER=n CELLSPACING=n CELLPADDING=n>
HSPACE=n VSPACE=n>
<TR>
<TD> ... cell data ... </TD>
</TABLE>


ΓòÉΓòÉΓòÉ 13.5.2. <TD> - Table Data. ΓòÉΓòÉΓòÉ


The <TD> Tag defines the start and end of a block of text which makes up a cell
in a table. This can include graphics, URL references and even other tables.

You can also instruct the browse to make this cell cover one or more other
cells to the right and down. For example, this lets you create multi colume
headings, summary lines, etc. You can do it on any cell in the table.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


    ALIGN="LEFT | RIGHT | CENTER"
              This parameters tells the browser how to align the data within
              the cell.

    ROWSPAN=n
              n is the number of rows that this cell is to cover. Thus allowing
              you to create cells that extend over more than one row.

    COLSPAN=n
              n is the number of columes that this cell is to cover. Thus
              allowing you to create cells that extend over more than one
              colume. You can use this to create multi-olume titles and summary
              lines.

    NOWRAP
              This tells the browser not to automatically wrap the text within
              the cell. To control wrapping you can use <BR> tags.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<TABLE>
<TR>
<TD ALIGN="LEFT | RIGHT | CENTER" ROWSPAN=n COLSPAN=n NOWRAP> ... cell data ...
</TD>
</TABLE>


ΓòÉΓòÉΓòÉ 13.5.3. <TH> - Table Heading. ΓòÉΓòÉΓòÉ


The <TH> Tag is used when you want the first row of a table to be a row of
headings for the rest of the table. You simply replace the <TD> tags for the
first row with <TH> tags.

The actual result of doing this is not that much different. All it effectively
does is to Bold the text usd in the first row. However it is good for making it
clear that the row is a row of headings.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


    ALIGN="LEFT | RIGHT | CENTER"
              This parameters tells the browser how to align the data within
              the cell.

    ROWSPAN=n
              n is the number of rows that this cell is to cover. Thus allowing
              you to create cells that extend over more than one row.

    COLSPAN=n
              n is the number of columes that this cell is to cover. Thus
              allowing you to create cells that extend over more than one
              colume. You can use this to create multi-olume titles and summary
              lines.

    NOWRAP
              This tells the browser not to automatically wrap the text within
              the cell. To control wrapping you can use <BR> tags.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<TABLE>
<TR>
<TH ALIGN="LEFT | RIGHT | CENTER" ROWSPAN=n COLSPAN=n NOWRAP> ... Colume
Heading ... </TH>
<TR>
<TD>
</TABLE>


ΓòÉΓòÉΓòÉ 13.5.4. <TR> - Table Row. ΓòÉΓòÉΓòÉ


This tag does not have a corresponding end tag.

The <TR> Tag defines the start of a new row in a table. The browser will just
keep adding any cells to the end of the table until this tag is found. Then it
starts a new row.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


This tag has no parameters.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<TABLE>
<TR>
<TD> ... cell data ... </TD>
</TABLE>


ΓòÉΓòÉΓòÉ 13.6. Form Objects. ΓòÉΓòÉΓòÉ


        <INPUT> - Data Input Objects.
        <TEXTAREA> - Multi-Line text input.
        <SELECT> - Selection List.
        <OPTION> - Selection List Item.


ΓòÉΓòÉΓòÉ 13.6.1. <INPUT> - Data Input Objects. ΓòÉΓòÉΓòÉ


There is no corresponding end tag for <INPUT>.

This tag defines a form object. There are a number available:

        Text Entry fields. These are used to collect textural data. They only
         expect a single line of text.

        Password Entry fields. These are used to collect a password. Any typed
         characters are replaced with a "*" character.

        Hidden Data fields. These are used to pass predefined strings to the
         CGI script. Usually such things as a file name, screen name,
         directory, etc.

        CheckBoxes. Standard window checkboxes to indicate an On/Off state.

        Radio Buttons. Multichoice selections. Again standard window stuff.

        Submit Buttons. Used to submit the form to the CGI script for
         processing.

        Reset Buttons. Reset and blanks the form.

        Image Buttons. Uncommon, but allows you to design your own buttons.

    Each form object that you add to a HTML page must have a couple of things
    so that the CGI script can understand what to do with the data. Firstly it
    must have a TYPE parameter which tells it which of the above objects is
    being defined, and secondly it must have a NAME parameter which defines the
    varibale to be used for passing the objects data to the script.

     The requirements of other parameters is dependant on which type of object
    is being used.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


    TYPE="TEXT | PASSWORD | CHECKBOX | HIDDEN | RADIO | SUBMIT | RESET | IMAGE"
              This parameter is require.

              This parameter defines the type of object being created.

    NAME="Name"
              This parameter is require.

              This parameter specifies the name for the variable that will be
              passed to the CGI script. It must be unique within the form and
              it must follow any naming conventions that the scripting language
              has.

    VALUE="Value"
              Value has different meanings depending on the object type. If it
              is a text entry field then it is the default text to be
              displayed. For radio buttons and checkboxes it is the value to be
              displayed and is also the value passed to the script to indicated
              that the item has been selected. For Submit and Reset buttons it
              is the text to be displayed on the buttton.

    SIZE=n
              N is the visible size of textural fields in characters. Hidden
              fields do not need this parameter.

    MAXLENGTH=n
              n is the maximum numbr of characters the field will accept. Only
              relevant for text entry fields and password fields.

    CHECKED
              For radio buttons and checkboxes, this sets the object to
              selected before the document is displayed to the user.

    ALIGN="TOP | MIDDLE | BOTTOM"
              This sets the alignment of objects when graphics are also within
              the <FORM> ... </FORM> boundaries. Refer to the <IMG> tag for
              further information.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<INPUT TYPE="TEXT | PASSWORD | CHECKBOX | HIDDEN | RADIO | SUBMIT | RESET |
IMAGE" NAME="Name" VALUE="Value" SIZE=n MAXLENGTH=n CHECKED ALIGN="TOP | MIDDLE
| BOTTOM">


ΓòÉΓòÉΓòÉ 13.6.2. <OPTION> - Selection List Item. ΓòÉΓòÉΓòÉ


There is no corresponding end tag for <OPTION>.

This tag is only valid within a <SELECT> ... </SELECT> tag. It defines a item
in a selection list which you can select. For example if you wanted to offer a
list including oranges, apples and pears for selection, then you would need to
define a <OPTION> tag for each one.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


    VALUE="Value"
              Value is the text string that will be displayed in the selection
              box as well as the text string that will be returned to the CGI
              script.

    SELECTED
              This defines this item as the default item in the list.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<SELECT>
<OPTION VALUE="Value">
<OPTION VALUE="Value" SELECTED>
<OPTION VALUE="Value">
</SELECT>


ΓòÉΓòÉΓòÉ 13.6.3. <SELECT> - Selection List. ΓòÉΓòÉΓòÉ


The <SELECT> tag defines a group of <OPTION> tags which will be presented as a
scrollable list of items for selection.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


    NAME="Name"
              This parameter is require.

              This parameter specifies the name for the variable that will be
              passed to the CGI script. It must be unique within the form and
              it must follow any naming conventions that the scripting language
              has.

    SIZE=n
              N is the number of lines to be visible when the form is
              displayed. The user can then scroll through this to access other
              options.

    MULTIPLE
              Allows the user to select multiple items at a single time.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<SELECT NAME="Name" SIZE=n MULTIPLE>
<OPTION VALUE="Value">
<OPTION VALUE="Value" SELECTED>
<OPTION VALUE="Value">
</SELECT>


ΓòÉΓòÉΓòÉ 13.6.4. <TEXTAREA> - Multi-Line Text input. ΓòÉΓòÉΓòÉ


The <TEXTAREA> tag defines a multi-line textarea on the pdocument which can be
used for more complex textural entry. For example they are most used in email
pages, or pages where you can write comments, replies, etc.

To create some default text for a textarea, simple place it between the
<TEXTAREA> and </TEXTAREA> tags.


ΓòÉΓòÉΓòÉ <hidden> Parameters ΓòÉΓòÉΓòÉ


    NAME="Name"
              This parameter is require.

              This parameter specifies the name for the variable that will be
              passed to the CGI script. It must be unique within the form and
              it must follow any naming conventions that the scripting language
              has.

    ROWS=n
              N is the number of rows of text to be displayed. To get more a
              scroll bar is added automatically. 24 is the default.

    COLS=n
              N is the number of characters wide that the textare will be. 80
              is the default.


ΓòÉΓòÉΓòÉ <hidden> Syntax ΓòÉΓòÉΓòÉ


<TEXTAREA NAME="Name ROWS="n COLS="n>

 ... Default text goes here ....

</TEXTAREA>