Tokyo PC Users Group
	  Home Page
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:

&lt;                            < (less than)
&gt;                            > (greater than)
&quot;                          " (quotation mark)
&amp;                           & (ampersand)
&auml;                          ä (German a-Umlaut)
&ouml;                          ö (German o-Umlaut)
&uuml;                          ü (German u-Umlaut)
&ntilde;                        ñ (Spanish n with a tile)
&Egrave;                        È (French capital E grave)
&reg;                           ® (trademark)
&copy;                          © (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 &lt;g&gt;.
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 &copy; 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/.


Copyright PINBOARD 1996

© Algorithmica Japonica Copyright Notice: Copyright of material rests with the individual author. Articles may be reprinted by other user groups if the author and original publication are credited. Any other reproduction or use of material herein is prohibited without prior written permission from TPC. The mention of names of products without indication of Trademark or Registered Trademark status in no way implies that these products are not so protected by law.

Algorithmica Japonica

December, 1996

The Newsletter of the Tokyo PC Users Group

Submissions : Editor


Tokyo PC Users Group, Post Office Box 103, Shibuya-Ku, Tokyo 150-8691, JAPAN