1. Overview
  2. Layout
  3. HTML Basics
  4. Colorize
  5. Format Tags
  6. Images
  7. Links
  8. Tables
  9. Insert Tags
  10. Formmail




Overview

Many potential webmasters are put off designing their own webpages by HTML editors with complicated and confusing interfaces, making the task look more difficult than it really is. NetWrite is designed with the beginner in mind, with an interface that is uncluttered and very easy to use and understand.

HTML is a language that has grown in size and complexity over the years, making it difficult for a newbie to know where to start. The simple answer is that very useable and stylish webpages can be designed with only a handful of HTML commands.

NetWrite allows the design of such webpages, using a base set of commands and features, with only a few clicks of the mouse.



Layout

The NetWrite layout has been designed with simplicity in mind and has essentially 3 main components...
  1. The Menu or Button bar. All the NetWrite functions and HTML features can be accessed via these simple buttons.
  2. The NetWrite HTML Editor pane. This is the top pane in split screen mode. The Editor pane is used to view or edit the HTML code for a webpage.
  3. The NetWrite Browser pane. This is the bottom pane in split screen mode. The Browser pane displays your HTML code as it will be seen as an active webpage.

Most of the Main Menu button functions are fairly obvious. The New, Open, Save & Print buttons allow you to load new and existing webpages, then save any changes or print the code.

The HTML buttons (Format, Image, Link, Table & Insert) are discussed later.

The Help button loads this file to the Browser pane, for viewing. Clicking the button again removes the help file from the browser and returns you to the current webpage.

The Editor button displays the NetWrite Editor pane full screen. Clicking it once again returns the display to split screen mode.

The Browser button displays the NetWrite Browser pane full screen. When in browser full screen mode, the menu bar buttons change their functions to that of a simple internet browser, and can be used to check links within your current webpage. An active internet connection will be required when using external web links. Clicking the Browser button once again returns the display to split screen mode.



HTML Basics

If you look at the code for a simple webpage, you will see that HTML code is made up of sections of code starting and ending in 'Tags'.
(Click 'New' to see the basic NetWrite new document template).

This can be as simple as a piece of text surrounded by tags to make the text Bold... which would look like this...
<B>My Text</B> You'll see that the second tag is slighly different in that it has a forward slash. This is how HTML determines that it is the end tag. All tags are treated the same, whether they are simple as in this case or complex. Everything between the two start and end tags will be displayed or interpretated depending on the function of the tag. Some tags have further attributes, and these settings will be added to the start tag where required.

If you look at the code for a webpage you'll see that the whole document is contained within the <HTML> tags. This tells a browser that it is an HTML document. At the top of a webpage's code there is an area contained within the <HEAD> tags. This is where a lot of the document information is located, such as Title, Author, Description etc. This data is not generally displayed by a browser (apart from Title) but is utilized by search engines. You can also use the area for scripts, such as pre-loading webpage images.

The most important area in a webpage's code however is that contained by the <BODY> tags. As the name suggests, all the body, or page content, has to be located here. Your internet browser will display everything that is located here, whether it is an image, a link, or just plain text. For this reason, when we are creating a webpage we should ensure that our HTML code is placed within the 'Body' area.



Colorize

Click the Red/Blue button, located at the bottom right of the NetWrite screen, to 'Colorize' the HTML code in the text editor pane.
This colorizes different types of tags, code and attributes to make it easier to view and edit.

All code within the <HEAD> section of the webpage (this includes Title and Meta Tags) are coloured Magenta.
Any Scripts and Comment lines are coloured Green.
All other HTML tags are coloured Blue, with their associated attributes coloured red.
Any plain text is coloured Black



Format Tags

Clicking the Format button brings up a further dropdown menu of buttons that all have the purpose of various changes to the way your webpage's text is formatted and displayed.

The Body button brings up the Document Body dialog box, which allows you to select the background image or background colour for your webpage. You can also select the text colour for any active or visited links on your page, as the default colours for links may not match your colour scheme.

Please Note - If you are selecting a background image, and your document has not already been saved, you will need to save it first, as the stored information for the image's location is relative to the location of your webpage on your hard drive (and eventually your server).

The Font button brings up the Font dialog box, which allows you to select any font on your system and alter its size and colour. Any text selected when you click this button will have the changes applied.

The Bold, Underline & Italic buttons will apply these attributes to any text selected when these buttons are clicked.

The Pre button defines an area so that any text typed within the tags will retain their original plain text format. This includes any tabs or line returns. This is useful when you want to enter a paragraph of text into a webpage without having to use HTML formatting like line breaks etc.

The Heading button is an HTML format for setting text to one of six sizes in Times type font, useful for paragraph headings.



Images

Clicking the Image button brings up the Image dialog box. This allows you to browse your hard disk for an image to insert into your HTML document.

Please Note - If your document has not already been saved, you will need to save it first before selecting an image, as the stored information for the image's location is relative to the location of your webpage on your hard drive (and eventually your server).



Links

Clicking the Link button brings up the Link dialog box. This allows you to create external links to other webpages (either your own on someone elses), or internal links to a specified point on your current webpage, useful for navigating to page content points.

The standard Hyperlink is used to jump to an external link anywhere on the net. To create this you enter the full web address into Box2 of the dialog, and then enter a text name or description for the link into Box3. It is this text which will be used to click on to access the link.

Alternatively, if you select Button an external hyperlink is created, but as a graphic button, and the text is displayed on the button face.

You can also use a hyperlink (and button) to link to a file on your server for download, say a zip file, however Please Note - If your document has not already been saved, you will need to save it first before creating this link, as the stored information for the file's location is relative to the location of your webpage on your hard drive (and eventually your server).

To create an internal link to a point somewhere within your document, you need to create the Target point first, ie the location in your document that you are going to point your link to. You do this by first clicking on the point in your document where you want the target to be placed, then select Insert Target in Box1. You should then give this target point a name (eg myphotos1) in Box2.

You can then create an internal link to this target you have created by selecting Link to Target, and then select which target you wish to link to by selecting from the list of previously created targets in the dropdown list in Box2. Again you should enter the text for this link in Box3.



Tables

Clicking the Table button brings up the Table dialog box. This allows you to create a table of cells made up of rows and columns into which you can enter text, images or links, in fact anything you could normally add to a webpage. Creating a table however allows you to format data into regular spacings on your webpage.

You should first decide how big your table is to be by entering the number of Rows and Columns you require. Enter the Width you want the final table to be. eg 100 means that the table will be 100% of the screen width. The Border size determines the thickness of the lines between the cells and surrounding the whole table. You can also select the Background Colour for your table from the colour picker. The Cell Spacing and Cell Padding determines how much space there is between each cell both verically and horizontally. Selecting Cell Alignment sets the format for data within the cells, either left, right or center justified.



Insert Tags

Clicking the Insert button brings up a further dropdown menu of buttons that all have the purpose of various items and objects that can be inserted into your webpage.

The Break button, as you would expect, add a line break to your text, forcing a new line.

The Space button is useful for inserting a space beteween objects such as images, link buttons etc, allowing a more precise format.

The Line button adds a horizontal line to your page. This has a default width of 100% (of screen width) and size of 1. These attributes can be easily edited to suit your requirements.

The Comment button allows you to insert your own text comment to anywhere on your webpage. Comments do not get displayed by browsers and are purely for your own benefit as reminders and visual markers when editing.

The Symbol button allows you to easily insert some symbols that are not easily available from standard keyboards.

The List brings up the List dialog box, which allows you to insert indented lists with a choice of bullet and numbered styles. Simply select the style you want, and the number of items in your list. When created you then edit the text for each list item as required.

The MetaTag button brings up the MetaTag dialog box, which allows you to insert your webpage 'description' and 'keywords' metatags into the <Head> section at the top of the document. These metatags are not displayed by browsers, but are used by search engines to describe your webpage, and search by keyword. Keyword selection is therefore very important in ensuring your webpage is found by search engines and relates accurately to the content you wish users to find.

The Mailto button allows you to enter an email address and insert it in your webpage as a special type of link. When clicked, this links opens the users email client application with a new email addressed to the email address given. This can be very useful for contact or feedback type links.

The Form button brings up the Form dialog box. This is a very special web function which requires a little bit more effort to create a working object. If you click on a new line before inserting a form, a new form will be created. If you click within an existing form, you can add further form elements to it.
See below for more Formmail information.



Formmail

Using Formmail and various form elements you can create an online interactive form with text boxes, check boxes, dropdown option choices etc. When the form is completed by the user, and the Submit button is clicked, the form's data is sent via email to a recipients email address (usually the owner of the webpage). This is a very stylish solution to gathering information from visitors to your website and can have many uses such as booking forms etc.

Before this feature can be used however a special formmail.cgi script must be placed on your server. This script is supplied with NetWrite and should be uploaded to your website's webspace. A new folder called 'formmail should be created in the same root folder as your 'index.htm(l)' file and the formmail.cgi file placed inside it. Depending on your server configuration, the file may have to be located in your CGI folder if you have one. if you are unsure, it is best to check with your webspace support team.

By default NetWrite configures the Formmail code as if the file location is in the normal root/formmail directory, and looks like this...
<FORM ACTION="/formmail/formmail.cgi" METHOD="post">
If you have to locate the formmail.cgi file elswhere, you should edit the code to reflect the correct location.

Before you do upload the file to your server, you have to edit it slightly to configure for your own use. You can do this using any simple text editor such as Notepad.
There are 2 pieces of information that have to be entered. If you scroll down slightly you'll see a section @referrers =, you should enter your website name here, ie the domain name of the website where the form is going to work from. Also, further down, you'll see a section @recipients =,here you should enter the domain name for your email (or the email domain of the person who is going to receive the form data. Once that information has been entered and saved, you can upload the file to your server. It will then be there waiting to receive data from the form and redirect it to the nominated email address.

Once you have your formmail file in place on your server, you can then insert the code from the Form dialog box. When it is first opened you are asked for the recipients email address. That is to say the person who will receive the form's data. When you OK that the basic code for the form is generated along with a Submit button. If you click anywhere inside this code and open the Form dialog box again, you can add any form elements you require to make up your own form.

Further information and configuration issues about Formamil can be found here....
http://www.scriptarchive.com/readme/formmail.html