A web site consists of a series of individual pages. Each will need a unique name (more in the notes below).  A file is some collection of information - can be text / image / sound  etc. A web browser is a software program that allows someone to access the internet - typically Explorer or Netscape. HTML is the code that the computer uses to format up the information to look the way you want it too. (Stands for something like ‘Hierarchical Transfer Markup Language’)

- The very first page on any web site must be named index.htm (or .html)
- Remember that computers have no ‘common sence’ and will do EXACTLY as the code instructions order. If you get something out of place, missing or extra - things will not show up as you intend them.
- Note that most internet browsers have a ‘composer’ feature. This typically allows you to design the page like it was a normal document, then inserts the code for you automatically. Some word processor programs will also do a simple version of this if you save your document ‘as html’.

Away we go!

<HTML>

<HEAD>

<TITLE>
YOUR TITLE for the page goes here. This should be descriptive and in plain English. (This will show up on the top of the page when viewed on someones web browser)
</TITLE>

<meta name="text" content=" Here you want to put the key words that people may use when searching for this particular page. This remains hidden. ">

<meta name="Author" content=" Here is where you put either your name / or the name of the person who created the page. Adding the copyright is a good idea too. This remains hidden.">

</HEAD>

(Note the use of <  >  and </  > with an instruction inside. The first bracket is code for <do this>, the second for </stop doing>.)

<BODY BACKGROUND="some image file"
BODY BGCOLOR="name or number"
TEXT="colour name or number"
LINK="colour name or number"
ALINK="colour name or number"
VLINK="colour or number">
(If you leave this block of instructions off, the default will be a medium grey background with black letters. Possible links will show up as blue, used links will show up as red. Much of the distinctive look of your site is determined by this set of code instructions. There are simple ‘colour wheels’ you can download off the net that allow you to pick a colour by eye and it provides the required code number.  
When you pick the background image (sometimes called a tile). Collections of tiles can be found (for free) on the net.

<BODY>
(here is where your actual content, both text and pictures, will be placed)

<img src="some image file" alt="the image name" >
(This will place an image, or a logo on the sheet. The alternate name will show up if for some reason the image does not load.)

<BR>
(This makes a  ‘line break’ - or an empty line for spacing)

<CENTER>Your Name Here</CENTER>
(This will be <CENTER>ed on the page.)

<B>Your Business Name Here</B>
(This will be in <B>old type.)

<FONT SIZE=3> Your Address Here</FONT>
(The use of this code tells the page in change the size of the letters, from 1 as the smallest to typically 6 or 7 at the largest. ‘Normal’ size is 4 - unless you code otherwise this is the default size as set by the user on their browser.)

<I>A special note here</I>
(This code creates <I>talic type.)

<P> Will shape a longer text into a paragraph, running back and forth across the viewing window the viewers browser is opened to. Remember that this means the text conforms to what the VIEWER has selected. There will also automaticly be a space before and after the paragraph. Note that tabs (indentations) at the start will NOT show up. Remember to stop the paragraph at its end. </P>

(A note on file names. Files can be of many types. For web sites typically you will be working with web pages (.HTML or .htm) and images (see below). Each file that makes up the site has to have a unique name. The old style format was no more than eight letters or numbers, followed by a dot (period . ), then three letters. The last three letters describe the type of file, and are specific to the type of file.)

<A HREF="large image"><IMG  SRC="small image"></A>
(This will produce an image that forms a ‘clickable link’ to another, larger image. Both the images have a unique file name. Typically they will be either .jpeg or .gif type files.  JPEG (.jpeg or .jpg) are larger, the smaller GIF (.gif) images will load up faster, but typically have lower quality.  

<A HREF="newpage.htm"><IMG ALT="New Page" SRC="newpage.gif"></A>
(Here the gif image is clickable, but will take the viewer to a new page on the site. There is also an alternate description if the image does not load.)

If you wanted to link to someone elses web site - have them  
<A HREF="http://www.othersitename"> go here </A>. The ‘go here’ will show up in colour as a clickable link.

<A HREF="MAILTO:your email address here">Send Mail</A>
(This will create a clickable text that will automaticly open the ‘send mail’ window on the viewers browser, and fill your mail address in as the destination.)

<HR>
<HR WIDTH=25%>
<HR size=10 >
(All these will produce dividing lines that run across the page. The first  will make a line that runs all the way from one side to the other. The second only runs 1/4 the way, or 25% - change the width by altering the number. The last will be a line with a different thickness, measured in ‘pixels’. As a rough guide, a period is one pixel high (.), and the default thickness is typically five pixels high (as in our first line). )


(The following code forms a table - a set of boxes with a frame around them and things inside
The first set of brackets describe the frame all the numbers are sizes in pixels. BORDER is the very outside frame size. CELLSPACING is the gap between boxes on the same row. CELLPADDING is the gap bewteen each row.)

<TABLE
BORDER=2
CELLSPACING=2
CELLPADDING=2>

<TR>
<TD >contents left top</TD>
<TD >contents right top</TD>
</TR>
<TR>
<TD >contents left bottom</TD>
<TD >contents right bottom</TD>
</TR>

</TABLE>
(The individual lines of boxes are set by what ever is between <TR>  </TR>. In this case there are two lines of boxes, there can be as many as you want. The next code <TD>  </TD> determines what will be placed inside of each individual box. Note that this can be anything seen above, and extra code instructions can define its possition or function.)


</BODY>
</HTML>
(Which closes out the code!)



NOTES:
On Names -

Each file has to have a distinctive name. You should develop some format that lets you keep track of what they all are! In the ‘old days’ (and on older PC machines / software) the format of this name is ‘eight letters or numbers  .  three letters’. The first three letters are all lower case. The last three letters describe the type of file. These are fixed for each. Some standard names:
jpg  (jpeg / image file)    gif  (gif / image file)        htm  (html code file)
On newer version of Netscape and Explorer, the file names can be longer in front of the dot (thus more descriptive)

On Searches -

The various search engines available on the net work by ‘scanning’ the various html pages available on the internet looking for ‘keywords’. In the old days, they would typically scan the first 50 / 75 words. This is why the ‘meta name’ information was included. Most search engines today will actually scan the whole page for the keyword. Even so, you can increase your visibility (search hits) by making sure the most likely key words are in the ‘meta name’ block.
But - the various search engines are mostly paid services. They will scan the available pages in this order: Those who paid to register / Those who self registered (free) / The rest of the web. Note that not all the search engines will use all of these possibilities. (When you see someone advertise their ‘AOL Keyword’ - this is something they paid to register. This is also why Google is such a great source - they search the entire web!)
So - you can increase your ‘hits’ by taking the time to self register for a number of the smaller search engines that will alow you to do this for free. There are several ‘one stop source’ for the various search engines available on the web. Note that most of these companies make their money by selling web design and premium services!

http://www.siteadd.com  is one such register

http://selfpromotion.com  has a number of tutorials on the process of creating a web site and registering it.

On Design -

Visual - remember that the internet is primarily a visual, rather than a text medium.

Bold - remember you are competing with hundreds of other sites, make the design memorable.

Fast - remember you want the most important information (product, location) to show first

SIMPLE - remember that the average viewer is using a 2 -5 year old machine.

One of the fastest way to create a web page for yourself is to steal someone elses html coding. On your browser, use the menu to ‘view as source’  This will display the underlaying code instructions. You can copy and paste this code into your own blank page, then exchange your information for the orginal text or images.

© 2002-2003 Darrell Markewitz