DESIGNING YOUR OWN WEBSITE

Vicky Vickers

PART FIVE: IMAGES
Two types of images are used on a webpage - GIF and JPG (pronounced jiff and j-peg). JPG is used more often as it usually has a smaller file size than a GIF file and therefore uploads more quickly. You can also use JPG's for photo's and images with a lot of gradient colour and GIF's for flat colour files, such as most logo's etc. It is important that the last three letters of an image filename actually denote the file format used, that is GIF or JPG. We're going to look at four ways to use images or graphics on your webpages: backgrounds, bars, bullets and pictures or drawings.

Backgrounds
Backgrounds are a special case as they are handled differently than other images. A background image is usually a small GIF or JPG file which multiplies itself over the whole page. While you can use full page sized backgrounds, they are not very successful as the people who browse the web have many different sized screens.

You can make your own background or pick one up from one of the many sites on the web which archive them. There is a large listing of sites which archive background images at: www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Page_Design_and_Layout/Backgrounds/

As different screens and computer systems don't all see the same colours which you do, keeping to a simple, light background with dark colours or a dark background with a light text will ensure readability. Remember KISS - "Keep it simple, stupid" or as I like to rephase it in regard to website design - "Keep it short and simple".

To place a background on your webpage, use a tag similar to the following:

<BODY BGCOLOR="similar to background colour" BACKGROUND="filename.jpg" TEXT="#000099" LINK="#FF0099" VLINK="#9900FF">

NOTE: If you don't specify a BGCOLOR, and people browse without images loading, your text may not be readable. (depending on your colours). My recommendation is to pick a BGCOLOR that will emulate your desired background to be safe. (Thanks to Paul Evád for this tip)

TIP
Watch your cases closely on image files. UNIX, which is the file format used on the web, is extremely case-sensitive. If you name the file "image.jpg", than don't call it "Image.JPG" in your document. While, in most cases this will work when you view it locally on your own computer, once you upload it, all you will see is a broken image symbol where you had placed your precious graphic.

Acknowledgements
This article was published in the July 1996 issue of the Victoria Macintosh Users Group's monthly newsletter "MACtalk" in Vicky's monthly article "VMUG On-Line" and in the Fall 1996 issue of the Web Enthusiasts Association of Victoria's quarterly on-line newsletter.

Vicky Vickers is the owner of Word Crunchers, Etc. which specializes in website design and HTML training. She is a past-president (1994-6) and former webmaster (1995-8) of Victoria Macintosh Users Group (VMUG). She also founded and was the first president (1996) of the Web Enthusiasts Association of Victoria (WEAV).

All rights reserved. For commercial purposes, no part of this page may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording, Internet, or any information storage and retrieval system, without the express permission in writing from the author.

Return to Library Index


Call me today at 250-595-6593 to discuss your website design
or e-mail me at vicky@crunchers.bc.ca

Vicky Vickers, Word Crunchers, Etc.
3290 Shelley Street, Victoria, BC, V8P 4A5
Fax: 250-595-7384 (call first)


Copyright 2000 by Word Crunchers, Etc. ([an error occurred while processing this directive])