Last updated January 31, 2006
.
Trainiax --> Information --> Website Building
Trainiax --> Drawings --> Website Building
.
- The making of this site -
.
If any additional information is required beyond what I've included here, let me know and I'll add it.

- Server -

There are many servers available to host web sites.  I chose Bravenet http://bravenet.com because it's generally highly recommended and suits my needs well.  Servers can either be free or require payment (usually $4 to $10 a month).   While there are many good free web hosts out there, restrictions are often imposed--such as a file size limit, a bandwidth limit or banner ads placed at the top of each page.

Most hosts with free packages also offer the option of upgrading to a paid package.  This generally means more file space, lack of ads and a general increase in options and site possibilities.  Special deals are sometimes offered (I managed to catch one with Bravenet).

- Creating and Editing Site Pages -

Before anything can be uploaded, the webpages need to be created.  Some web servers have site-building tools built in, but I won't delve into that here.

There are two main ways of creating or editing a webpage before it's online: as a document, or using the HTML code.

- Document Editing -

There are several programs available for creating a webpage.  I use Netscape Composer, which comes with any version of Netscape.  MS Word and some other word-processing programs will also work.  The main advantage is that the pages can be edited in a similar fashion to creating a word-processed document--in other words, no knowledge of HTML code is necessary.  The disadvantage, however, is that "junk" HTML code will often make its way into the page.  This does not affect how the page is displayed, but it will increase load times and make it a hassle to edit the page later using HTML code.

Here's what my site looks like when I edit in Netscape Composer (click for larger version):

A simple array of menus (and button shortcuts) allows the insertion of links and images.  This version of Composer came with Netscape Communicator 4.7--the browser is now outdated, but I prefer the 4.7 version of Composer over newer ones.  Nothing overly fancy can be created using the main tools, but HTML "tags" (bits of HTML code) can be added for more complex functions.  A tag is visible at the top left of the screen--it causes the menu buttons to change as the mouse is moved over them.

Netscape can be downloaded at http://netscape.com.  Composer can be accessed by clicking on File --> New --> Composer Page.

- HTML Editing -

I don't often edit pages using the HTML code, but it's a good way to learn the basics behind a webpage.  A simple text editor, such as Notepad, is sufficient to edit the pages.  No images or text fonts will appear--only the codes that cause them to be displayed in a web browser.

The advantage of HTML editing is that only the code that is necessary can be included--the "junk" HTML that results from editing the page in Word or Composer can be avoided.  The disadvantage is that while the page is being edited, it can't be seen as it would appear online.  This method also requires knowledge of HTML code--and since my knowledge is limited, I only occasionally edit this way.  There are many sites online that describe how to use HTML code.

Click here to see the drawings page of this site as it appears in HTML code.  Much of the colour and font information is repeated (junk HTML)--it's inserted automatically by Composer and could be avoided if the page was edited solely using the HTML code.

- Pitfall Prevention -

I came across a few problems in the early days of creating this site:

- Links -

Creating correct links can sometimes be a hassle.  Some page-editing programs will allow the user to "browse" though files on the hard drive, and the correct link will be inserted automatically--but Netscape Composer is not one of them.  When using Composer (or editing the HTML code itself) the http:// needs to be included, along with the correct server or domain name (such as http://trainiax.net) and, in some cases, the directory (such as http://trainiax.net/drawings)

Some servers are case-senstitive and won't recognize links if only one letter is off.  It's a good idea to develop a pattern for filenames--for example, all my drawings and photos are lower-case, including the file extension.

- Image Types -

I learned early on that Bitmap images are NOT suited to being displayed on a website.  Not only are they very large in terms of file size, but some browsers won't display them at all.  That's why all my drawings (and any other images with only a few colours) are GIF files, and all photos are JPG files.  These are the two most common image types used in websites.  A number of image-editing programs are available to convert files.  I use a program called Imagoweb for BMP-to-GIF conversion of drawings (available from me as an email attachment).

- Image Display -

Avoid having a lot of full-size photos displayed on a single page--load times are excessive.  Rather, have small thumnails (or text) linking to larger images.  Some webpage editors (Netscape Composer included) will allow an image to be adjusted in size on the page--but that does not reduce the file size of the image.  All the thumbnails in the photos sections of this site are separate images, downsized with an image-editing program to about 150 x 100 pixels and no more than 6 KB each.

Michael Eby 2006