═══ 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 tbrad@wilmington.net 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,

is a tag which defines the start of a new paragraph, where as 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 Derek's Kool Program c│ │ │ └──────────────────────────────────────────────────┘ Turns out like this in your Web Browser:- This is a test using Derek's Kool Program called Page. The tells the browser that all text after it is to be Italic and the 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. , , , 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 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 ... 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 ... which italics text: This is a test using Derek's Kool Program called Page.

...

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

starts a new paragraph and
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 ... tag which allows me to set the size of the text. so: ┌──────────────────────────────────────────────────┐ │ │ │This is a test using │ │ │ └──────────────────────────────────────────────────┘ ═══ 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: ┌──────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
Data for Row 1 Cell 1 Data for Row 1 Cell 2
Data for Row 2 Cell 1 Data for Row 2 Cell 2
│ │ │ └──────────────────────────────────────────────────┘ 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 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 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 │ │OS/2 Zone Magzine │ │, It's simply the best. │ │ │ └────────────────────────────────────────────────────────────┘ Or if the document is one of your own on your server: ┌────────────────────────────────────────────────────────────┐ │ │ │Ha, ha ha ha, │ │Try this out! │ │ │ └────────────────────────────────────────────────────────────┘ 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 │ │ │ │Production 1.03 Release Sep'95, (767k bytes). │ │It's simply the best. │ │ │ └────────────────────────────────────────────────────────────┘ Notice the 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 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 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: ┌────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ └────────────────────────────────────────────────────────────┘ 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 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: ┌────────────────────────────────────────┐ │ │ │ │ │ │ │ Title of document │ │ │ │ │ │ │ │ │ │Text of document │ │ │ │ │ │ │ └────────────────────────────────────────┘ The 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 section. This is used to define various bits of information about the document as a whole. The most common tag in here is the 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 ═══ 13.1.5. - HTML Document. ═══ 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. ═══ 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 ! ═══ Syntax ═══ ═══ 13.1.6. - Indicates Searchable Index. ═══ There is no corresponding end tag for . 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 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. ═══ Parameters ═══ PROMPT="PromptText" PromptText is a message which will be displayed at the top of the document to indicate that it is searchable. ═══ Syntax ═══ ═══ 13.1.7. - 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 ═══ 13.2. Text Formatting Tags ═══ Commonly used tags:- - Bold Text.
- Line Break.

- Center text. - Font Size. - Headings. - Italic Text.

- Paragraph. 

 - Pre formatted Text.
         - Underline Text.

 Less Commonly Used:- 

        
 - Addresses.
        
 - Block Quotes.
         - Citation.
         - Program Code.
         - Emphasis.
         - Keyboard.
         - Sample.
         - Strong Emphasis.
         - Teletype.
         - Variables.


═══ 13.2.1. 
 - Addresses. ═══


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


═══  Parameters ═══


The 
 tag has no parameters. 


═══  Syntax ═══



 Address text 
 


═══ 13.2.2.  - Bold Text. ═══


The  Tag bolds all text within it's boundaries. 


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 ... document text ...  


═══ 13.2.3. 
 - BlockQuotes. ═══


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


═══  Parameters ═══


The 
 tag has no parameters. 


═══  Syntax ═══



 Reference text 
 


═══ 13.2.4. 
 - Line Break. ═══


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


═══  Parameters ═══


The 
 tag has no parameters. 


═══  Syntax ═══


... text 

 ... text 


═══ 13.2.5. 
 - Center text. ═══


The 
 Tag Centers all text within it's boundaries. 


═══  Parameters ═══


The 
 tag has no parameters. 


═══  Syntax ═══



 ... document text ... 
 


═══ 13.2.6.  - Citation. ═══


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


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 Reference text  


═══ 13.2.7.  - Program Code. ═══


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


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 Program code  


═══ 13.2.8.  - Emphasis. ═══


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


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 text  


═══ 13.2.9.  - Font Size. ═══


The  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  and . 


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


═══  Syntax ═══


 ... document text ...  


═══ 13.2.10.  - Headings. ═══


The  Tag sets the enclosed text up as a heading. This means that it is set 
on it's own Line as though a 
 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. 


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 Heading text  


═══ 13.2.11.  - Italic text. ═══


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


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 ... document text ...  


═══ 13.2.12.  - Keyboard. ═══


The  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 
 tag, however formatting of spaces and paragraphs is still 
done. 


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 Text  


═══ 13.2.13. 
 - Paragraph. ═══


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


═══  Parameters ═══


The 
 tag has no parameters. 


═══  Syntax ═══


... text 

 ... text 


═══ 13.2.14. 
 - Preformatted Text. ═══


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


═══  Parameters ═══


The 
 tag has no parameters. 


═══  Syntax ═══



 document text 
 


═══ 13.2.15.  - Sample text. ═══


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


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 Sample output  


═══ 13.2.16.  - Strong Emphasis. ═══


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


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 Sample output  


═══ 13.2.17.  - Teletype text. ═══


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


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 Output Text  


═══ 13.2.18.  - Underline Text. ═══


The  Tag Underlines all text within it's boundaries. 


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 ... document text ...  


═══ 13.2.19.  - Variable. ═══


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


═══  Parameters ═══


The  tag has no parameters. 


═══  Syntax ═══


 Variable  


═══ 13.3. External References and Graphics ═══


         - Link Anchor.
         - Defines a Animation for the Web Explorer.
         - Defines an Animation Frame.
        
 - Horizontal Rule.
         - Graphic Image.


═══ 13.3.1.  - Link Anchor. ═══


The  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  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". 


═══  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:derek@os2zone.aus.net". 

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


═══  Syntax ═══


 ... Clickable Anchor Text, images ... 
 


═══ 13.3.2.  - Defines an animation for the Web Explorer. ═══


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

There can be no text within the  ...  tags. 


═══  Parameters ═══


This tag has no parameters. 


═══  Syntax ═══


 
 
 
 .... 
 


═══ 13.3.3.  - Defines an animation Frame. ═══


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

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


═══  Parameters ═══

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


═══  Syntax ═══


 
 
 
 .... 
 


═══ 13.3.4. 
 - Horizontal Rule. ═══



 has no corresponding end tag. 


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


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


═══  Syntax ═══



 


═══ 13.3.5.  - Graphic Image. ═══


 has no corresponding end tag. 

 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. 


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


═══  Syntax ═══



 


═══ 13.4. Lists. ═══


Commonly used tags:- 

        
 - Definition List.
        
 - Definition List, Item Title.
        
 - Definition List, Item Description.
        
     - Ordered List.
        
       - Un-Ordered List.
        
    •  - List Item.

    Less Commonly used tags:- 

         - Directory List.
         - Menu List.


═══ 13.4.1. 
       - 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 
       or 
 tag is encountered. 


═══  Parameters ═══


The 
 tag has no parameters. 


═══  Syntax ═══



 

 Title ... 

 Description text ... 

 


═══ 13.4.2.  - 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. 


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


═══  Syntax ═══


 

  •  Item text ... 

  •  Item text ... 

    •  


═══ 13.4.3. 
     - 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 
     tag. The textural 
description of this item is set with a 
     

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. 


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


═══  Syntax ═══



     

     Item title ... 

     Item description ... 

     


═══ 13.4.4. 
     - 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. 


═══  Parameters ═══


This tag has no parameters. 


═══  Syntax ═══



     

     Item title ... 

     Item description ... 

     


═══ 13.4.5. 
  •  - 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. 


═══  Parameters ═══


 TYPE="A | a | I | i | 1 | DISC | CIRCLE | SQUARE" 
           This parameter is used to over ride the settings of the 
       or 
         
           tags, see them for further details of this parameter. 


═══  Syntax ═══



           

        1.  Item text ... 

         


═══ 13.4.6.  - Menu List. ═══


This tag defines a menu list which is a list of items where each item would fit 
on one line. 


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


═══  Syntax ═══


 

      •  Item text ... 

        •  


═══ 13.4.7. 
           - 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 
        1.  tag. 


═══  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). 


═══  Syntax ═══



             

          1.  Item text ... 

           


═══ 13.4.8. 
             - 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 
          •  tag. 


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


═══  Syntax ═══



               

            •  Item text ... 

             


═══ 13.5. Tables. ═══


         - Table definition.
         - Table Row.
        
             - Table Heading.
         - Table Cell Data.


═══ 13.5.1.  - Table Definition. ═══


The 
             Tag defines the beginning of a table definition. Basically, this 
consists of a number of  tags which define the start of each new row in the 
table, with  - Table Row. ═══


This tag does not have a corresponding end tag. 

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


═══  Parameters ═══


This tag has no parameters. 


═══  Syntax ═══



             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. 


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


═══  Syntax ═══


 
HSPACE=n VSPACE=n> 

             
 ... cell data ...  

             


═══ 13.5.2.             		 - Table Data. ═══


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


═══  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 
             tags. 


═══  Syntax ═══



             

             
 ... cell data ... 
 

             


═══ 13.5.3.             		 - Table Heading. ═══


The  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  tags for the 
first row with  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. 


═══  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 
             tags. 


═══  Syntax ═══



             

             
 ... Colume 
Heading ...  

             
 

             


═══ 13.5.4. 
             

             
 ... cell data ...  

             


═══ 13.6. Form Objects. ═══


         - Data Input Objects.
         tags. 


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


═══  Syntax ═══