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!
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)
<meta name="text" content=" Here you want to put the key words that
people may use when searching for this particular page. This remains
<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.">
(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
When you pick the background image (sometimes called a tile). Collections of tiles can be found (for free) on the net.
(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.)
(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
<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 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
<TD >contents left top</TD>
<TD >contents right top</TD>
<TD >contents left bottom</TD>
<TD >contents right bottom</TD>
(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.)
(Which closes out the code!)
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
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
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