HOW TO BUILD A WEBPAGE!!

When I first tried to build a webpage I had no idea of what to do or even what I wanted to do, and the whole thing seemed very complicated.

Having discovered Microsoft Publisher, however, I used this web creation software and, following the instructions, managed to create a basic webpage in about half an hour. It is so easy my 10-year-old son built one too!

So why am I bothering with this instruction book you might ask!

Microsoft Publisher (also Serif Page Plus) is good at building a basic website, but it makes the website in a complicated manner and changing anything on your site is a difficult and tedious affair.

For example, MP saves all your objects as a series of images, labeled img0 to img whatever.

If you wish to change an image you then have to identify what the image name is, and then re-label your new image to that name and then replace it. This isn’t too bad if you wish to simply change one image.

However it makes adding a new image a little complicated, inserting a new image knocks all the rest of the images out of sync. in the following web pages, so that the text on page 2 might say “Granny’s visit to Blackpool” but the picture in the frame might be your 2 year old playing in the sandpit – can be amusing but not exactly the desired result! The only way to change one page is to change all the images on your site. My site has now over 60 pages and you can see how this would be a chore.

Further if you have a “button” linking all your pages to your home page then MP saves every page button as a different image, so if you find a nice new button image you wish to use, then you have to laboriously change every image button – no thanks! Further this leads to your valuable web space being used up by many unnecessary images and leaves less room for more constructive usage.

Finally after all the effort you have put into creating your website who claims the credit?

Yes! Microsoft. It does not say in your Meta tags that you created this site. It says Microsoft Publisher created it. Why give Bill Gates the glory for your hard work!!

Believe me. Building one yourself is much more flexible, easy and satisfying.

So why do you need a website? Well the short answer for most people is you don’t.

But do you really need your mobile phone? Do you really need your computer?

No, but their fun and so can your website be

However if you have your own business, or club or have friends and family a long way off, then a website is superb at keeping others informed. The web is being used more and more to do business and even YOU, from your humble shop can sell or generate trade “on line”.

Does a plumber mine copper or make pipes? No - he just uses materials provide by others to his best advantage and is not thought of as being any less skilled. Just do the same. A plumber is unlikely to know, either, why a pipe is called a pipe and it is not important that you know why html is called html. Just be satisfied that things are called what they are called. If you really need to know I have provided a Glossary at the end.

Remember by going to a website that you like and right clicking your mouse on it, you can quite often view the source code for that site. Copy and paste any elements that you might find useful into your own web page and amend it as required for your own purposes.

What do you require?

An html editor.
An image editor.
An ISP.
A program to upload your page to the internet.

Another useful item is a notebook or a word processor.

What do they cost? ANSWER – Nothing!

Where do you get them? If they have not come with your new shiny PC, you can download many freeware, demo and shareware versions of the programmes you need on the Internet.

Freeware. – Not exactly what it says. Remember nothing is truly free. Freeware programmes generally contain little ‘spy’ applets. When you go online other computers can track your surfing habits and collect data about you and then target you with junk mail. Or else they contain adverts that you have to view before or during the program.

Demo – Sample programmes that generally have limited functions, but often enough functionality for your basic requirements.

Shareware- Generally have full functionality, but often have a time limit of 1 month and then they cease to function unless you register and pay for them or sometimes, after a certain time period, they produce annoying nag screens to remind you to send them money for using the software.

Another better alternative is to browse the free discs that come with computer magazines. The magazines cost about £5. You will often find FULL versions of the programmes you need on these, and many images also. They are never the latest versions but so what! And the contents of the magazines are generally full of useful features. I personally recommend PC Basics for those who have just started with computers. It is excellent!!

Remember it is unlawful to download serial numbers, key generators or cracks from crack sites or, in any other way, obtain the means to turn shareware or demo versions into fully functional software without registering and paying for it!!

Html editors – Microsoft Front Page (not the easiest to use but appears to be popular with colleges and universities, probably because Microsoft give them the program at discounted prices. I certainly wouldn’t recommend it.) My favourite is called Hypertext Builder from the web at http://www.paksoft-productions.com/ - It is very user friendly and the best I have come across, but also try Edit Plus or Edit Pro. Dreamweaver is also becoming very popular with professional web builders.

IMAGING SOFTWARE - There are dozens of these and they are generally very expensive – Adobe Photoshop, PhotoPlus, AseeDC, etc. but again try the magazine discs if no imaging programmes came with your PC. Use these to create or alter images.

ISP – Internet service provider. This is your link between your computer and the World Wide Web. There are hundreds of providers - BT, Aol, Freeserve, Virgin, or IC24. The list is huge. Some allow you to access the web for free at certain times, or, all the time for a monthly fee. Your choice!!

Now you have the software let’s begin. All script in black should be used - every dot, comma etc. is needed and missing out any of the characters will lead to failure. If you cannot be bothered typing all the script download this document and use copy and paste. All script in BLUE is for instruction or information only. All script in GREEN should be amended to your personal configuration.

Gather your images and text etc. together in a folder. It’s best to create a new one by clicking the right hand button of your mouse selecting new and then folder. Give this folder the name you choose for your web site”. Images can be jpg, gif or bmp etc. - gif is best because they use less space. Also use animated gifs, which are little moving images. You can use a scanner or digital camera or you can browse the net for images.

Save everything to this folder and transfer the entire contents of the folder to your website address at your ISP. (See below.) DO NOT TRANSFER THE FOLDER ITSELF.

NOW open your preferred html editing program and let’s get started on your webpage.

YOUR FIRST PAGE SHOULD BE SAVED AS index.html or as index.htm

THE TOP OF YOUR PAGE IS THE HEAD - SO START BY TYPING THIS:

<html>

<head>

METATAGS SAMPLE (meta tags are read by search engines and are how your site is 'found'.)

<META HTTP-EQUIV="Content-Language" CONTENT="en-GB"> (Western Script British English)

<META NAME="revisit-after" CONTENT="15 days"> (Length of time of search engine updates.)

<META NAME="robots" CONTENT="All"> (Target audience)

<META HTTP-EQUIV="PICS-Label" CONTENT='(PICS-1.0 "http://www.classify.org/safesurf/" l on "2001.04.25T13:05+0000 r (SS~~000 1))'> (Suitability of content-no adult material)

<META NAME="distribution" CONTENT="Global"> (Worldwide distribution)

<META NAME="classification" CONTENT="RECREATION:Sports"> (Category)

<META NAME="author" CONTENT="Your Name"> (Name of website builder)

<TITLE>Your Websites NAME</TITLE>

Change CONTENT AND KEYWORDS TO SUIT YOUR SITE!!!

------------------

COLOUR + SOUND SAMPLE - to create a background sound and colour. Choose your own colours from the list at bottom of this page. They are formed using hexadecimal numbers made up of the first 6 letters of the alphabet and the first six numbers.

</HEAD>

"loop"- the number of times you wish the sound to play before stopping.

"link"-the colour of link texts

"vlink"-the colour that a link text will change to once selected.

"text"- the standard colour of normal text throughout the webpage.

---------------------

To use an image as a background

---------------------

IMAGES SAMPLE (to put an image on your page use the following code and specify how far from the left and the top you wish the image to appear on the page, and the size of the image. Match this to the actual size of your image!! Remember large images take ages to download and can be a turn off!! Use gifs or jpg images.

The larger the "border" No. the thicker the 'frame' round your image.

</div>

--------------------

TEXT SAMPLE (Adjust the font, font colour, size and co-ordinates to your own specifications!)

<font face="Arial" size="5" color="GREEN">This is a SAMPLE TEXT.</font></div>

---------------------

LINKS TO OTHER PAGES, WEBSITES, OR TO SEND EMAIL using images on your webpage. (MAPS!!)

</MAP></div>

Again change text, image sizes and co-ordinates as appropriate!

TO SEND EMAIL, replace Page2.html with "mailto:someone@somewhere.net"(com) etc.

To direct to another WEBSITE just type in the web address.

----------------------

To do the same using TEXT

Change the text co-ordinates as required and href="page2.html " as above.

----------------------

FRAMES. To create a frame (a page within a page.)

Change text, image sizes and co-ordinates as appropriate!

Be aware that frames can make your site look good, but search engines can be confused by frames in your pages and make finding your site by others more difficult!!!!

AT THE BOTTOM OF THE PAGE TYPE:

</BODY>

</HTML>

You can now create as many pages as you like as long as the contents of your web pages do not exceed the amount of space allocated to you by your ISP. Every new page should follow in sequence - page 2, page 3 etc. but as long as you link them correctly the sequence, title or number doesn’t really matter.

Once you have created you masterpiece you next have to upload it to the net. Your ISP will provide you with a website address. You can use Microsoft’s Web Publishing Wizard to upload to it. This generally comes free with Windows 98. However this program can only send. It cannot retrieve or delete items from your web site. You must use a program such as Cute FTP to communicate effectively with your web site.

GO ON HAVE A GO IT'S REALLY EASY!!!

If you wish to create more PROFESSIONAL web pages and are keen on further expansion of your knowledge then consider learning about java script and virtual basic programming. – coming soon!

HEXADECIMAL COLOURS.

If you want to use different background colours on your website, use this list to help you work out what hexadecimal codes you need to use. For basic colours just type the colour name i.e. "blue" or "yellow" etc.

GreenAqua : #70DB93

Black : #000000

BlueViolet : #9E5E9E

Orangy : #FF7E00

DeepGrayBlue : #42426E

DarkForestGreen : #2F4F2F

DarkDrab : #4F4F2F

Periwinkle : #7093DB

OrangeGold : #CC7E31

GoldenYellow : #DBDB70

YellowyGreen : #93DB70

DarkBrownRed : #4F2F2F

YellowTan : #9E9E5E

PalestGrayBlue : #BFD8D8

SteelLavender : #8E8EBC

DeepMaroon : #8E236B

EasterGreen : #31CC99

CobaltBlue : #3131CC

MediumGoldenrod : #E9E9AC

DarkGrayGreen : #426E42

BrightPeriwinkle : #7E00FF

MediumTurquoise : #70DBDB

BlackNBlue : #2F2F4F

LightNavy : #23238E

BrightRedViolet : #FF007E

DarkSeaGreen3.5 : #8EBC8E

Pink3.5 : #BC8E8E

Salmon5 : #6E4242

DarkGoldenRod5 : #8E6B23

RoyalBlue0 : #007EFF

DeepSkyBlue5 : #236B8E

DarkRedViolet : #4F2F4F

Cornsilk2.5 : #D8D8BF

SummerSky : #38AFDD

RichBlue : #5959AA

Brass : #B5A542

Copper : #B77233

Bronze : #8C7723

Bronze2 : #A57C3D

Silver : #E5E8F9

BrightGold : #D8D819

OldGold : #CEB53A

Feldspar : #D19175

Quartz : #D8D8F2

NeonPink : #FF6DC6

DarkPurple : #871E77

NeonBlue : #4C4CFF

CoolCopper : #D88719

MandarinOrange : #E27733

LightWood : #E8C1A5

MediumWood : #A57F63

DarkWood : #845E42

SpicyPink : #FF1CAD

SemiSweetChoc : #6B4226

BakersChoc : #5B3316

Flesh : #F4CCAF

NewTan : #EAC69E

NewMidnightBlue : #00009B

VeryDarkBrown : #592823

DarkBrown : #5B3F33

DarkTan : #96684F

GreenCopper : #517C75

DkGreenCopper : #49756D

DustyRose : #846363

HuntersGreen : #215E4F

Scarlet : #8C1616

White : #FFFFFF

GLOSSARY

HTML Hypertext markup language

ISP- Internet Service Provider, Freeserve, Aol, etc.

APPLET- A very small computer programme.

JAVA – Programming language developed by Sun Systems of California originally developed for digital television, but found commercial success with development of the web

TAGS – Symbols used to contain your instructions in a format understandable to your html editor

SEARCH ENGINE – Software that follows your instructions to find websites that contain information that you seek. –Google, Copernic, Jeeves etc, etc.

ANIMATED GIF- Small cartoon like moving images. There are thousands available to dowload from the internet, or you can make your own, using programmes such as Ulead Gif Animator, Gif Construction Set, or Barbarosa Gif Animator.

BANNER-The headline image at the top of the page containing website title and company logo.

Use any image programmer or Banner Maker Pro.

BUTTON – Simply an image that when clicked, carries out an instruction i.e. to go to back to the first page on your website. These can be animated. Use Cool Button, or Applet Button Factory.

MAP- Images can be split into sections or ”maps” so that clicking on a different area of an image can fulfil a different function.

SEE YOU CAN DO IT!