Creating a Website

Creating a website, while requiring a bit of a learning curve, should be manageable if you have figured out creating, emailing and saving files on your PC. Local libraries are now a good source of books on the subject. This article will endeavor to describe something of what's involved.

Overview
A website is usually made up of a number of webpages. A webpage is in turn basically just a file not unlike a Word .doc file. It contains your text, some very basic formatting codes (tags) which make your words big, small or bold or into hyperlinks (underlined and blue), along with any embedded images. These files have the file suffix .html. Each image is however a separate file (which end in .gif or .jpg), so a single 'webpage' is actually a collection of files. Your html files and image files live on your internet service provider's computer, which duly sends them off to anyone that asks for them.

You do need a few things!
  1. A program that helps you create the html files.
  2. A service provider willing to host your pages free or cheap.
  3. A program that 'uploads' your files to the webserver.
  4. For graphics work you will need the use of a scanner to digitize your photos and a graphics-editing program.
Now all of these things are easily accessible, given the nature of the web where everything is at your fingertips. Or else you may even have some of them already!
OK... ready to get into it?


Getting the tools
Before you start it will help you if you make sure your computer displays filename endings. If yours are hidden, then look under My Computer | View | Options. Uncheck a box that says something like 'hide MSDOS extentions'.

1. Web authoring software
An html file is actually a simple text file like those ending in .txt. There are two basic methods of creating html files.

The first is a program that allows you to enter your formatted text directly just as Word does, and converts the output into html. These are called 'WYSIWYG' editors, and are good if you only want to make one or two websites. Some WYSIWYG editor options are:
  • Netscape 4.0 or later (+3.0 Gold) comes with 'Composer', a rudimentary WYSIWYG editor. If you are running an old version of Netscape and have space, download it free from Netscape Downloads.
  • Buy Microsoft FrontPage or a similar program, which will set you back about $150 or so and comes with many useful tools.
  • Word 97 and later comes with a 'save as html' option. You can also download a free addon for Word 6 from Microsoft Downloads.
  • Download one of the following on a free 30 day trial basis. Pagemill from Adobe. Dreamweaver from Macromedia. NetObjects from Download.com. Of these Dreamweaver is IMO the pic of them, but costs around $350.

The second and other method is to code the html markup directly and/or with the help of an Html Editor program. This method is best if you need to be fussy about design and need to have 'clean' quick to download html. An understanding of html also aids good page design. What is html? Here is an example or two…
  • <b>Heading Text</b> makes the heading bold,
  • <br> is the break tag and makes a carriage return...
  • <a href="http://www.yahoo.com/">Yahoo!</a> makes an external hyperlink
  • <a href="page2.html">Goto my page2</a> makes a hyperlink to a local page

Its quite simple! And with an html editor you can say highlight your text, click the bold button and it adds the <b> tags for you, but you work in the html. Some software options for this method are:

  • Notepad or Wordpad, which comes with Windows.
  • Download a Arachnaphilia a freeware html editor from Arachnoid
  • Download one of the myriad of shareware editors, such as Hotdog ,  BBedit ,  FlexEd , or Homesite

2. A home for your pages
  • If you are connected to the internet, which unless you are extraordinarily clever to be otherwise reading this, then most likely your existing service provider will host your pages free. These can only be relatively small and non-commercial in nature though. (Well when I say small this means around 1-2 megabytes, which is about 100 pages!)
  • If you qualify as a environmental / community organization you can use Converge's free service just like this site! See them at APC Converge
  • Use one of the free advertising based services in the US such as HypermartGeocities ,  or Virtual Avenue. These will attach an advertising banner on the top of each of your pages.
  • Alternatively do a web search under web hosting, many firms will host big and complex sites for as little as $5-$10 per month

If you use your own internet service provider then you will likely end up with a URL like:
  • http://servprov.co.nz/yourusername/  or sometimes
  • http://yourname.servprov.co.nz/
If you are really keen you can apply for your own 'domain name' which will cost about $100 per year and give you a URL like:
  • http://www.yourname.org.nz/
Either-way your service provider should give you reasonable instructions.


3. File upload software
Next you have to get your newly created html files which are saved on your hard drive, onto your providers computer. This is just download in reverse! Your website host will assign you a directory where you save your files. With EVCNZ it is called something like /webusers/evcnz/htdocs/.
  • If you use FrontPage or Netscape then these and some other editors have this capacity built in. In this case it is just a matter of learning to use it. You will have to type in your username, password and http or ftp address of the host.
  • Use WS_FTP a freeware 'file transfer program'. This is the way I do it. Download it from Ws_ftp or right here in NZ from Planet

4. Graphics
The www is a multimedia environment. Traditional publishing experience will help you, but start preparing to think colour, and colour in very small packages! The inclusion of images, both photos and icons etc will require some extra work.

Original artwork and photos need to be 'scanned' using a scanner. A scanner converts your picture into a digital file, which you can save onto a floppy. Scanners are now very cheap , starting at around $100. Alternatively see if there is one you can use at work, university, or at friends places. As a last resort many copycentres etc will do it.

Public domain photos, icons and pictures such as clip art are also used. Html is really primitive, so if you want boxes and lines and stuff you'll need to construct these out of small images. You can save images you like off others' websites by right clicking on them, but its not considered very good form. And hey… go easy on these, they mostly look pretty tacky.

Unless all of the above already exist in either gif or jpeg format, have good contrast and a small file size, then you'll need a graphics editor program. Right about now if you were an ordinary old Word user like I was, you'll be looking at the clutter on your desktop with some trepidation! Nonetheless, some image editor options include:
  • FrontPage comes with a photo editor.
  • Download a good shareware editor like Paintshop Pro from Jasc
  • Try Imaging, a primitive graphics editor which comes with Windows.
  • Beg Borrow or Buy Adobe Photoshop. At several hundred dollars this is an investment in your graphics career! A very powerful program, and great fun too.

OK, what then!
Well if you have made it this far, and you can /or have managed to ferret your way through various help files, teaching yourself on the fly, then you are 9/10 of the way there. Rather than write a whole book enumerating the actual how-to of page design, the balance of this article will describe some must-know pointers.

1. Page name protocols
On most servers your homepage, ie the one that visitors first see ,should be called index.html. When you type www.yahoo.com into your browser the server returns http://www.yahoo.com/index.html. In addition to this be very careful to save all your filenames in lowercase. On servers, index.html is very different from index.HTML.

Make sure you keep all the image and html files in one folder on your computer. This way the hyperlinks will keep integrity. Similarly it is possible to create sub-directories in your home directory of your host computer, but for small sites it is simplest to save all your files in that one directory for the same reason.

2. Downloading software
Downloading programs from the web and onto your computer is usually straightforward. Follow the instructions and after clicking on the final download link, a 'save as' dialog box will appear. Make sure it will save somewhere you can find it again, like the desktop is best. This can take anywhere from 5 minutes upto 1 hour. (You may as well use this time to browse the web at the same time as its downloading. )

OK, after the file has finished arriving you'll end up with a new file on your desktop ending in .exe Before doubleclicking on this icon, close all other programs, like Word or Netscape, so the new program will install properly. Double clicking will automatically run the set up program, and you'll just need to confirm the destination of the program files, preferably c:\program files\.

Lastly remember the virus risk--go to reputable sites where possible. And remember, that what seems like free software is going to cost you something in internet time/traffic.

3. Image preparation
The internet is unfortunately a slow medium at present. With images the trick is to use just enough to give colour and meaning, while keeping the total size below about 50K per page. Now, if you have scanned an image before you will know how a harmless 5x8 photo can quickly become several megabytes! You do this to the web and you'll be exceptionally unpopular. What I do is scan the file at 72 dpi save it as a .tif file, with LZW compression. Then open in Photoshop, correct colour and contrast, crop, and resize if necessary. Lastly sharpen, and save as a .jpg

Jpegs are best for photos, because they have many shades of colours, and compress well. However for icons with few colours or small images save as a .gif file. Yes I know its starting to sound a bit complicated, but if you don't have images or you scan accurately in the first place you needn't worry about the finer points!

4. Search engines
Naturally a webpage is no use if no one knows its there. So you need to learn a) how to make your pages search engine friendly and b) how to submit to search engines.

Think carefully what keywords you want search engines to harvest. Your home page is critical here. There are some key places search engines look for keywords:
  • Your page title in your header
  • The meta tags in your header:  <meta name="keywords" content="zealand, abc, xyz, etc">  <meta name="description" content="My website about…">
  • The first few hundred words in your home page
  • ALT tags for your images
  • Encourage search engine robots to not index your sub pages using  <meta name="robots" content="noindex,follow">

Search engine robots may eventually find your site if your friends link to you, however it is better to submit to a bunch of the most common engines and directories. On most search engines' home page is a 'add a URL' or 'submit a site' kind of link. All you do is type in your URL. However with Yahoo it's a bit trickier. Firstly I have had better luck submitting to Yahoo Australia & NZ than to the US Yahoo, which just seems to ignore non-US submissions. Second you wont find an 'add a URL' link on their home page. You have to 'drill' through their directory structure until you find what you think is the best place for your site. At the bottom of this page you will find a 'suggest a site' link. Follow the instructions and your done.

5. Design and Content
All the technical know how in the world doesn't make a website. You preferably should have some content worth visiting, and some sense of good design. Look around at what you see on the web, read design books and practice, practice practice.

In regards content, pictures of your cat are great! but information and interactivity are the bread and butter of the web. See further below for adding more power to your website. Also add some links to related websites, this is why they call it a web.

6. BTW Good file management tips
It is my experience that many W95+ users that grew up with W3.1, haven't caught up with some of the Mac like file management tricks that are part of W95+. These make everyday file handling a piece of cake.

Firstly, you can use the desktop as you would a real desk. Save files that are in progress onto the desktop. That way they are easy to later find and continue work on. Second, create shortcuts on your desktop to important places like My Documents, your floppy disk drive, Netscape, and Your Favorite Web editor. Do this by finding their real icons, and right clicking. (If its a program drill down through the folders under program files for eg. netscape.exe)

Now with your newly created file you can:
  • Drag it onto your My Documents shortcut ( think of this as your file cabinet )
  • Drag it onto your Netscape shortcut will open it there, or:
  • Drag it onto your Favorite Web Editor shortcut, and it will open it there.
  • Drag it onto your floppy shortcut which will copy that file from the hard drive to the floppy.
  • Drag a jpeg file from the floppy window onto the desk top

More Web Resources
Listed here are some things that have helped me. These are for when you've mastered the basics, and/or get bored.

1. Miscallaneous Stuff
Free Fast counter
500,000 Free Graphics
Tucows Shareware
On-line Html tutorial
Web Building info from netscape
Links to html editors
WinZip File decompression
Help with Wsftp

2. Search Engines
Yahoo! Australia & NZ
Yahoo
Metacrawler
Infoseek
Crawler
HotBot
Lycos
Alta Vista
Excite

3. Serious Forms, scripts etc
CGI Programming 101
Perl . com
Using Apache with Windows
Web servers - Apache
Running CGI Scripts With Perl, Apache and Win95
CGI Resources
Matt's Script Archive
BigNose Bird



My final thought
When working with the web, use the web. So often I'd be struggling to solve something when the answer is right there lurking behind your screen. Try Metacrawler its good. Learning to do effective web searches is one of those things in life that will pay huge dividends.


Written by P. Scott
11 March 1999

Back to Resource Page | Home