 | Home | |
|
| Members Only | |
|
| Newsletter | |
|
| Newsgroups | |
|
| Become a Member | |
|
| Meeting Info & Map | |
|
| Officers | |
|
| Members | |
|
| Corporate Members | |
|
| Photos | |
|
| Workshops & Training | |
|
| Other Clubs | |
|
| Job Hunting? | |
|
| Constitution |
Grey is boring, I like green.
by Kurt Keller
Bored with the grey background Netscape uses by default? Me too. My favourite colour is green. It is possible to change this default in the options settings in Netscape. But then, black on green is even harder on the eyes.
Easy to read, that's an attribute which is important for a WebPage. The page I recently saw, yellow on red, sure looked nice, but I did not read it; it was too hard to decipher. Also some pages with cute background graphics are nice to watch, but very hard to actually read.
I usually recommend to use a high contrast for WebPages with a lot of text; either a dark background with a bright text colour or vice versa. A black background combines fine with many other colours, so does white.
Colours for background and text, as well as for links, can be specified as options in the BODY tag and are valid for the whole page:
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb"
LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
<BODY BACKGROUND="URL">
Let's have a look at the options one by one:
BGCOLOR="#rrggbb" background colour
-
The BGCOLOR option sets the background colour for the current page. rr, gg and bb are values (so called RGB-values) in hexadecimal for the amount of red, green and blue.
decimal: 00 01 02 03...09 10 11 12 13 14 15 16 17...255 hexadecimal: 00 01 02 03...09 0A 0B 0C 0D 0E 0F 10 11...FF
Difficult? Not really. Ask one of your friends who is good at mathematics to explain you in detail how to convert numbers. Or if you don't know anybody, you can also send an e-mail to me at Kurt@pinboard.com. If there are many requests I'll make sure that an article in a future issue of AJ will cover number systems.
How to find the right values for red green and blue? The only way is to experiment a little. Let me give you the following information:
black : no red no green no blue = 000000 red : full red no green no blue = FF0000 green : no red full green no blue = 00FF00 yellow : full red full green no blue = FFFF00 white : full red full green full blue = FFFFFF
Don't expect to notice a difference for each slightly different value, after all with 256 different values for each of the three colours, there are 16'777'214 colours in between black and white! Also when experimenting be generous, take steps of 16 or even 32 at a time; the visitor to your page might only have a display driver installed that supports 256 different colours (or even only 16).
The online version of this 'lesson', which can be found at http://www.pinboard.com/html/ and then selecting 'Lesson 3', has a link to a page with many different RGB values. Netscape 2.0 or higher is needed to correctly display the colours.
TEXT="#rrggbb" text colour
-
With this option, you can set the colour of the text.
LINK="#rrggbb" colour for links VLINK="#rrggbb" colour for visited links ALINK="#rrggbb" colour for active link
-
An active link is the link, you are clicking on. While you click on it, a link will change it's colour from the value in LINK to the value set in ALINK. And if you return to the original page, the link will be displayed in the colour specified in VLINK (because you just visited it, it becomes a 'visited link').
Some pages use a graphic for the background, rather than a colour:
BACKGROUND="URL" background graphic
-
URL is the URL that points to the graphic file you would like to display as a background. If the graphic is smaller than the whole page, it is simply displayed several times, often enough to fill the screen.
Don't use large graphics for backgrounds, they take a long time to load. And if somehow possible, refrain from using backgrounds with several colours, it makes text difficult to read.
Special Characters
You know them from usenet, e-mail, BBS, those <g> or <bg> smileys. But how to display them on a HomePage? After all, < and > are special characters. Also German, Spanish or French and other special characters usually can not be displayed properly. Don't worry, help is on the way:
< < (less than) > > (greater than) " " (quotation mark) & & (ampersand) ä ä (German a-Umlaut) ö ö (German o-Umlaut) ü ü (German u-Umlaut) ñ ñ (Spanish n with a tile) È È (French capital E grave) ® ® (trademark) © © (copyright)
-
NOTE: If you are using a browser under a Japanese operating system and have turned Japanese Document Encoding on, some of above characters will not appear as mentioned, but as Kanji and other stuff. It would be too much and too technical to explain here why this is so. Under Netscape select Options/Document Encoding/Western and you are set.
So to display a <g>, you'd use <g>.
ATTENTION: Unlike most of HTML, these codes are CASE SENSITIVE. Also make sure you don't forget the semicolon at the end; otherwise some browsers will not correctly display the signs.
Linking to a place within a document
You wrote some software and are offering it on your HomePage. The user manual is about 20 pages long, starting with an index. You would like to enable visitors to download the whole documentation at once, so it can easily be read offline or printed out. But for people reading online, it should also be possible to jump to the different sections directly from the index.
No problem, this can be done with one single file. It is possible to jump to anchors within the currently displayed file:
<A HREF="#anchor">...</A> link to named anchor
-
Following this link will bring you to the section marked as 'anchor'. And here is how a section is marked:
<A NAME="anchor">...</A> named anchor
-
You can even jump directly to this section from another file with:
<A HREF="URL#anchor">...</A>
Examples
As usual, the best place for seeing examples is online, at http://www.pinboard.com/html/. For those without connection to 'the Net', here some short examples:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#FFFF00" ALINK="#00FF00">-
This causes your HomePage to use white text on a black background. Links are being displayed in red, links which already have been followed (visited) are yellow and a link will turn green while you click on it.
<BODY BACKGROUND="mybackgd.gif" TEXT="0000FF" LINK="00FF00">-
The background of this page is filled with the picture mybackgd.gif, residing in the same directory as the page displayed, text is blue and links are green.
Copyright © 1996 PINBOARD-
Above line displays the copyright symbol after the word 'Copyright'.
... <P> <H2>INDEX</H2> <A HREF="#introduction">Introduction</A><BR> <A HREF="#setup">Setup</A><BR> ... </P> <P> <A NAME="introduction"><H2>Introduction</H2></A><BR> Welcome to the User guide for... ... <A NAME="setup"><H2>Setup</H2></A><BR> In order to setup the software for operation with... ... </P>- This is how an online documentation could look like.
Enough for today and it's high time to practice a little. If you've no place to practice remember that you can do it locally on your harddisk or you can make use of PINBOARD's HomePage Hosting Service. For details check out http://www.pinboard.com/.