HTML Notepad Contents
HTML NOTEPAD

Version 1.16

Copyright © cranial software 1995. All rights reserved.

e-mail : info@cranial.demon.co.uk

http://www.u-net.com/virtua/code

HTML Notepad is a text editor with the additional ability of being able to create specific hypertext markup language (HTML) within the text.  It was designed for those people who have a working acquaintance with HTML,  though by studying the example file example.htm the user should be able to understand most of the effects seen in professional World Wide Web pages.   For those who require that their creator must look like the output we supply a brief discourse on our own beliefs and practical experience.

We hope you enjoy using HTML Notepad.  If you do find it useful please make the effort to register your copy.  By registering you will be added to our mailing list of users who will be told of further releases and you will also be supporting all improvements to this code.  One further aspect of registering is that cranial software is a fully interactive software company, your advice and requests will be developed and used but only if you have registered.

Explaining HTML

General Structure of HTML Document

Why HTML Notepad does not look like a browser

Block Structuring Elements

Hypertext Elements

Data Elements

Character Formats

Creating Lists

Special Characters

Forms Based Input

Fonts (Large, Small and Curvey)

Those really clever bits we dont like to talk about

Hints and Tips

Registering HTML Notepad

Code History


Explaining HTML

HyperText Markup Language (HTML) is a language for, at its simplest, formatting text.  The main reason for the excitement generated in HTML and the World Wide Web is the ability of forming anchors within a document.  These anchors are to other documents or graphics images and can be specified with any of the wide range of internet communication protocols such as gopher, ftp or even accessing further HTML documents through http.  This leads to a single document becoming interwoven with others and hence the spinning of the World Wide Web.

HTML Notepad can produce HyperText Markup Language which complies with that defined in the HTML Working Group Internet Draft of the HTML 2.0 specification (which their terms and conditions enforce me to say is just a working draft) with a few limited caveats.  In addition some of the definitions for tables and background images as  defined in the HTML 3.0 working draft are also produced.

The current HTML 2.0 specification document is 200 pages long and to design a professional looking page requires many months, maybe even years of practice.  In this help file we will instead summarise how to use most of the formatting styles and anchors within  HTML 2.0 and further additional commands available in HTML Notepad.


Why HTML Notepad does not look like a browser

One of the major discussions about HTML Notepad we have had with our testers is why there is no method to produce a browser like output from the Notepad editor or even edit the document in the browser style.

The simplest argument we can put forward is which browser should we standardise upon,  Mosaic which is free and (in its current form) looks quite sexy,  Netscape currently the most popular and producing new non-standards or even Arena the HTML 3.0 compliant browser.   Instead we allow this decision to be yours not ours.   HTML Notepad gives you help in producing the document and also gives the user the ability to get interesting and professional effects in different browsers.  With the HTML community in a constant state of flux to tie ourselves to one particular browser would be futile.

The best effects simply cannot be created with a compliant browser.  For instant the creation of forms really needs to be at the source level rather than some graphical user interface.

Using HTML Notepad away from the network

As we do not include a browser within HTML Notepad the user must specify a browser with both Mosaic and Netscape (and presumably the rest) there is some difficultly in using them away from a network connnection.  For Mosaic it should be initialised with the -s flag, current version (2.0.4 the Comet) can detect the lack of network.

For Netscape a null winsock.dll is required (winsock.dll is the dynamic link library for socket connection to the network).  This can be found on their world wide web pages and is usually called mozock.dll.


General Structure of HTML Document

A HTML document should be enclosed within <HTML> and </HTML> tags.  A document is then made up of the K<HEAD> and K<BODY> section. General comments and titles should be placed in the head section and the rest of the document should be placed in the body section.  The <BODY> tag can also be extended for the Netscape 1.1N browser to include information of a background colour and text colours.

<HTML>

<!-- Created Using HTML Notepad, Copyright (c) cranial software 1995-->

<HEAD>

<TITLE>A nice title for your page</TITLE>

</HEAD>

<BODY>

<!-- Your htmlcode should go here-->

</BODY>

</HTML>

Title

This allows the browser to have a title of the page and is also used as the default text for bookmark or hot list definitions in common web browsers.

Comments

Comments are enclosed in the tags <!--  and -->  anything even HTML code will not be parsed within a comment field.


Block Structuring Elements

Paragraph <P> ... </P>

Determine a paragraph.  This is formatted within the browser as having a new line to end it and also spacing from other paragraphs.

Headings <H1> ... </H1>  through to <H6> ... </H6>

These headings are all defined in different ways with H1 being of largest size and importance.

Alignment of Headings and Paragraphs

Both the newer versions of Netscape & Mosaic browsers allow the user to specify the alignment of the paragraph and headings.  The alignments currently allowed are to the left, center or right of the page.

<P ALIGN=CENTER>Wibble fish markov</P>

<H1 ALIGN=RIGHT>A Heading forsooth</H1>


Hypertext Elements

Anchor <A> ... </A>

Anchors are the basis of the hypertext abilities of HTML the writer anchors a particular piece of text or image to another piece of documentation or segment.  Below are the different types of anchor.

Types Of Anchor

HREF

This allows the definition between the anchor tags to be hypertext.  This can be of any URL type such as another World Wide Page such as http://www.salford.ac.uk/docs/depts/eee/apf.html.

If the form HREF=#name is used the link is within the actual document currently being read.

<A HREF=http://www.u-net.com/virtua/weeble>Weebles</A>: they wobble but not fall down.

NAME

This allows the anchor to be the target of the link. For example, if in glossary.html we have;

<A NAME=weeble>Weebles</A>: they wobble but they do not fall down.

then the <A HREF=glossary.html#weeble> will jump directly to that particular anchor within the document.


Special characters

HTML defines a large number of special characters, far too numerous to mention here, some common and important ones are;

<	&lt;	&#60;

>	&gt;	&#62;

& 	&amp; 	&#38;

@	&#64;

This is the generic form for special characters with a potential description as SGML code within the & and ; or as a unique 8 bit number derived from ISO-8859-1 8-bit single byte code graphic character set.

We also include two character which are specific (currently) to Netscape these are the copyright symbol © and the registered symbol ® as &copy; and &reg;  respectively.


Data Elements

All type of data elements are incorporated into HTML Noteptad.

Line Break <BR>

Shows that a new line must be started at that position regardless of other styling.

Horizontal Rule <HR>

Divider of Text.  Netscape extensions allow both the SIZE and WIDTH (in pixels and percentages) to be specified.

<hr size=5 width=70 align=center>

Image <IMG>

This will always ask for a source for the image as standard further attributes are;

ALIGN for the alignment of the next section of text, the values are TOP, MIDDLE or BOTTOM.

ALT allows text as an alternative for the graphic (useful for non-graphical browsers such as Lynx).

ISMAP defines the image as a map in which different areas can be clicked though this must be programmed using a number of varieties of programs.


Character Format

All character formats are tags which enclose the particular characters wanting to be styled. The closing tag is of the form </tagtype>.  HTML Notepad allows the user to select text and then choose a particular tag type and performs the enclosing operator for the user.

Physical Format

Bold 	<B>

Italic 	<I>

Teletype	<TT>

Semantic Format

Citations	 <CITE>

Code 	<CODE>

Emphasis 	<EM>

Keyboard 	<KBD>

Sample	<SAMP>

Strong	<STRONG>

Variable	<VAR>

Netscape Format

Blink	<BLINK>

Preformatted Text <PRE>

Text that is already preformatted, a further attribute is the WIDTH which specifies the maximum number of characters per line.

Address <ADDRESS>

Signature or authorship of the HTML document generally placed at the bottom.

Blockquote <BLOCKQUOTE>

Contains a quote.


Creating Lists

Lists can be nested but they must be created separately and then copied into correct position with HTML Notepad.

Ordered List <OL> ... </OL>

The order is signified by a number.  Of a variety of depths which is usually shown through tabs.

Unordered List <UL> ... </UL>

Unnumbered list in every other way similar to ordered List.

Directory List  <DIR> ... </DIR>

Used to present a list of items containing up to 20 characters each.

Menu List <MENU>...</MENU>

Usually contains one item per line.

Definition List  <DL> ... </DL>

A list of definitions quite simply.


Forms Based Inputs

Forms are the interactive form of HTML they use scripts and executables to perform certain actions on input data.  There are two methods of sending information to the executables GET and POST.  Each form based script is unique as is the form HTML front end.  The text below can also be found in the file example.htm.

The example below will not work as there is no script called wibblefish.  We apologise but all our scripts are behind firewalls.  This does show most, if not all, of the aspects of forms contained in HTML 2.0.

Form Setup

This forms uses the post method there is also get which defines how information will be sent to the action program.

<FORM METHOD="POST" ACTION="http://www.salford.ac.uk/wibblefish">

Simple input

<P>Your Name: <INPUT  NAME="name"  TYPE=TEXT size="24"></P>

Password Input

<P>Your Password: <INPUT  NAME="pass"  TYPE=PASSWORD size="24"></P>

Select from a group

<P><SELECT>

<OPTION>wibble

<OPTION>plaice

<OPTION>haddock

<OPTION>dalmation

</SELECT></P>

Checkbox to choose a number of parameters

<OL>

<LI><INPUT NAME="kent"  TYPE=CHECKBOX VALUE="kent"> Kent

<LI><INPUT NAME="canterbury" TYPE=CHECKBOX VALUE="canterbury"> Canterbury

<LI><INPUT NAME="manchester" TYPE=CHECKBOX VALUE="manchester"> Manchester

<LI><INPUT NAME="coventry" TYPE=CHECKBOX VALUE="coventry"> Coventry

</DL>

Radio buttons to choose only one particular parameter

They must have the same name and must have an explicitly defined value.

<INPUT  NAME="wib" TYPE=RADIO VALUE="1" >wib1

<INPUT NAME="wib" TYPE=RADIO VALUE="2" >wib2

<INPUT NAME="wib" TYPE=RADIO VALUE="3" >wib3

<INPUT NAME="wib" TYPE=RADIO VALUE="4" >wib4

Text area

Multiple Line text inputs are treated as text areas, you can specify the number of rows and columns.

<TEXTAREA NAME="comment"  ROWS=8  COLS=24 >

Comments

</TEXTAREA>

Submit or reset the whole form

<P><INPUT TYPE=SUBMIT><INPUT TYPE=RESET></P>

</FORM>


Fonts
Fonts (Large, Small and Curved)

The Netscape browser currently allows the designer the ability to increase or decrease the size of their test within a document.  This process is made simple in HTML Notepad through the use of the Netscapism|Font Size and Font Curve options.  For font size the size parameter of the dialog box is the only one used and this can be set to any value between -5 and 5.

Font curve takes the selected and iteratively applies the font size tag from an initial value in increment steps up and down to a maximum (and minimum) value.  This can with certain pieces of text prove quite appealing though it does generate an excessive amount of tags in the code for large amounts of text.


Those really clever bits we dont like to talk about

Inserting Owner Details

At the bottom of every WWW page you will probably see a small amount of text about the authorship and time of creation of the page.  HTML Notepad automates this process.  Here at cranial and virtua we create and maintain hundreds of pages a month all of which need careful correlation with each other the date stamp in the owner details proves invaluable.

All the personal details can be changed though the ownership details will include a link to the HTML Notepad home page and the date of page creation.

Removing HTML

Made a mistake, created a list when you wanted a table well look no further than the Remove HTML function at the bottom of the HTML menu.  This is our form of undo function and will remove all the HTML codes from a selected area.  We find this especially useful when redoing other peoples work.

This function is not intelligent and will delete anything between the < > tags even comments.  Use with caution.


Hints & Tips

This is intended as a short little text on how to produce some of the effects found in professional web pages.

Use transparent gif images.  These can be created by using a small but useful program called giftrans (do an archie scan on either giftrans.exe (DOS) or giftrans.c (UNIX)).  The command line interface is slightly off-putting but the results are well worth it.

If your images can be small, make them so.  If your images must be huge make sure your initial pages do not have the images and prepare people for the download time or even better offer alternatives.  Some people pay for the pleasure of downloading your pages.

As well as images, your pages should be as small as possible while it is much simpler to produce your 200 page document in one HTML page waiting for the 97th page to download so the user can read the first will  mean losing readers.

Never have a link to a page which has just under construction on it. Either do not have a link or make sure you have some content for people to read.

Background colours and images: Netscape 1.1 and, hopefully, HTML 3.0 browsers, include the ability to alter the background image and colours of text.  HTML Notepad gives a fairly easy interface to this in Netscapisms|Text Color.  Please see the example.htm file for an example.  Be careful on its use and do not get too garish.  Also remember that you should use the BGCOLOR tag set to the colour of your background image.  If your image for some reason does not download your text colours will still look fine.

Check you pages in more than one browser.   Pages that look fine in Netscape look awful in Mosaic remember this is your public face.  Check and the recheck and then use arena to really mess things up on screen.

Never use blink.  Simple straight forward to the point.  Just dont,ever.

Although your graphics may be wonderful and the page is well set out in the end the most important thing is the content.  The number of pages with bad grammar and abysmal netiquette is ever increasing.  Try not to be part of it all.


Code History

To do (or the dreaming section)

Ability to build Table of Contents.

New syntax coloured editor without 32k limit.

HTML 3.0 compliance.

Toolbar ??

v1.16

Included automatic conversion from UNIX into DOS format when you load a file...

Unfortunately on save if you want UNIX format you must save this as a special type given as a file menu option.

Fixed DEL key.

Something very odd happened when initialising the background image selector fixed that.

Added oddles of accelerator buttons for everyone.

Fixed bug in that if you were minimized and then closed the program and then saved the file it got set to zero.  This was bad and no longer occurs, my humblest apologies if this has happened to you.

v1.15

Simply dispensed with the letters.

Fixed slight bug in Name creation which allowed you to create overlong Name strings.

Potential bug with some combinations of saving setting files to zero.  Could not repeat error so instead create a backup every time you save file.

Slight problem with using edit control is that either minimise or maximise process takes a long (5 seconds!) time.  We have moved this to the maximise process and have loaded the wait icon to tell you we are doing something.

Improved help file to include Fonts curvey and new size.

Also included warranty information just in case !!

v1.14a

Added the ability to create forms under new popup Forms|etc...

Improved HREF, Name and Image dialogs to include previous values.

Added font curve and font size components (in Netscapisms|Font...)

Remove tags from text (which can be treated like an undo feature)

Added Netscape <CENTER> flag, though this appears not to be well liked.

Added (Netscape?) special character &copy; and &reg;

v1.13

Added ability to remove HTML tags by saving the document or by selection of area.

Insertion of text from file.

v1.12

Added ability to create tables and background images.

New section to create coloured text for weird, dark backgrounds.

v1.11

Allow change in Word wrapping (inelegant but it works).

v1.1

Initialisation file is now stored with the executable rather than in \Windows directory.

Reload images in Netscape ( code provided by Lee Griffiths ) may be dangerous !

Fixed all the bugs in v1.0 obviously.

v1.0:

Added last files.

Ability to insert owner details into text.

Insert specific characters and any ASCII code.

Test by executing Web browser section.

Added browse button to most dialogs.

v0.1 -> 0.9

Not released and in chunks, too many changes too mention.


Registering HTML Notepad

We hope you enjoy using HTML Notepad.  If you do find it useful please make the effort to register your copy.  By registering you will be added to our mailing list of users who will be told of further releases and you will also be supporting all improvements to this code.  One further aspect of registering is that cranial software is a fully interactive software company, your advice and request will be developed and used but only if you have registered.

HTML Notepad can be registered for 10 UK pounds or 20 US dollars.  Any other currency will be accepted which corresponds to 20 US dollars.  All cheques, postal orders must be made payable to : cranial publishing.  Once your registration has been completed a copy of the complete registered package (without the annoying splash dialogue box at the beginning) will be either e-mailed or sent through normal mail (Please either include a stamped addressed envelope or add 1 UK pound or 2 US dollars to the cost of registration).  This will probably be a newer and enhanced version of the software as we are constantly refining our software.

NAME

COMPANY

ADDRESS

ADDRESS

TOWN

CITY

COUNTY

POSTCODE

Cheques payable to : cranial publishing

Mail to:  cranial publishing, 1 Sir Winston Churchill Place,

              Binley Woods, Coventry,

              CV3 2BT, United Kingdom.

For more details of HTML Notepad or other pieces of cranial software, e-mail : info@cranial.demon.co.uk or those people on-line or waiting in-line then try http://www.u-net.com/virtua/code .

Adam Fraser

4 August 1995

Manchester, UK