      |  |
This website is no longer maintained. Its content may be obsolete. Please visit http://home.cern/ for current CERN information.
|
| Previous: |  | X11 Desktop Environments (KDE and GNOME) | (See printing version) |
| Next: |  | Questions and Answers from the Computing Helpdesk |
Maria Dimou , IT/User Support
This article explains how to introduce colour on Web pages. People who use proper authoring tools like Dreamweaver or Frontpage need to read only the instructions for using the colouring palette offered with these products. For users who edit a limited amount of single Web pages, the way to introduce colour with the Netscape Composer is also included. The rest of the article is mostly for "real" HTML editors. It is based on Web documents listed in the references list at the end.
N.B. The Web version of this document is made in colour with the following specification:
<body bgcolor="#692CCF" text="#FFFF66" link="#FF9900" alink="#FF00FF" vlink=" #66FFFF">
From the menu "Modify" select
"Page Properties". You will get a full palette of colours
for the background, text and links to choose from. By clicking on
the actual palette image you can create your own nuances.
From the menu "File" select
"Page Properties" and then "Background". You
will get a small list of colours and the possibility to create
yours (by selecting "Custom").
If one has only a few independent pages to maintain
the Netscape Composer is just fine, i.e. disguises the
HTML syntax without the overhead of learning to use a complete
tool. From the browser top menu click on
"File" --> "Edit"
and you are in the Composer page. Colours can be
selected by clicking on
"Format" --> "Page Color and Properties"
at the page top.
The browsers that follow the HTML 3.2 specification
allow a few attributes to the BODY element that
influence the appearance of the document's background, the text and
also the links.
Here is an overview of the attributes:
BACKGROUND : specifies the image that will
be used as background of the current document (HTML 3.0)BGCOLOR : specifies the background color
(HTML 3.2)TEXT : specifies the color of all the
normal text (HTML 3.2)LINK : specifies the colouring of
non-visited links (links to documents where you've never been) (HTML
3.2)VLINK : specifies the colouring of visited
links (links to documents where you have been before) (HTML
3.2)
ALINK : specifies the colouring of active
links (links you activate by clicking on it) (HTML 3.2)
If Autoload Images (Netscape)
is OFF the background image (if any) won't be shown.
Similarly the [A|V]LINK values will be ignored, in
case the default background colour with the chosen link colours
make the text unreadable.
<HTML>
<HEAD>
<TITLE>Color Control Example</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#F0F0F0"
LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF">
This is an example document. Text is light-gray on black, and
<a href="nowhere.html">anchors</a> are yellow at first,
flashing blue-green when activated, and pale green if already visited.
</P>
</BODY>
</HTML>
As the BODY tag is the place where colour
enhancements can be added, no further change is possible until the
end of the document. The way to achieve multiple background colours
in the same page is to use
Style Sheets [9] and
[10].
The BACKGROUND attribute requires an image,
for example: BACKGROUND="my_image.gif"
All the others require a colour code given in hexadecimal
format, for example: BGCOLOR="#FFFFFF"
Netscape and Internet Explorer
understand colour descriptions, for example:
BGCOLOR="Green" but there is no
list [3] of colour names that works fine in both browsers.
The easiest way to find the HEX numbers that
represent a colour (if one types HTML and doesn't use an editing
tool like the ones mentioned above), is to use some of the matrices
on the Web like in
[4], [5] , [6] ,[7] or [8].
This value format in hexadecimal corresponds to
#RRGGBB, where RR=Red, GG=Green
and BB=Blue. All possible colour combinations give, in
the decimal system, 256^3, i.e. about 17 million colours.
However, to achieve sharp colours that show reasonably on all platforms and browsers it is wiser to stick to the 256 of Netscape which do not dither [11].
The browsers used at CERN largely support colour handling since the tags appeared as early as HTML 3.0. Netscape became compliant already in version 1.1 and Microsoft Internet Explorer as of version 2.0. Readers using other browsers can find a complete list as part of [1] .
It is possible to define different background colours in
TABLE cells. The "HTML source" of the CERN Home
page
http://www.cern.ch is an example of how to do that.
However, Netscape versions prior to 3 can't
distinguish any but the background colour (try to view the CERN Users' Welcome page with
Netscape version 2.02). Thus, when using special colours for
table cells and links one should make sure readers with old
browsers can always read their text.
[1] The background
FAQ (Mark Koenen, bg-faq@two4u.com).
http://www.two4u.com/bg-faq/
[2]
Document specific background and foreground control
(Netscape assistance).
http://www.netscape.com/assist/net_sites/bg/
[3]Netscape's colour table with colour names.
http://developer.netscape.com/docs/manuals/htmlguid/colortab.htm
[4]HYPE's colour specified for Netscape >= v.3.
http://www.users.interport.net/~giant/COLOR/1ColorSpecifier.html
[5]J. Tompkins' HTML colour codes.
http://home.earthlink.net/~jjtompkins/Color.html
[6]The
Netscape Color Palette Map (Victor S. Engel)
http://the-light.com/colclick.html
[7]Dougie's Color Picker (Douglas R. Jacobson).
http://www.flash.net/~drj2142/pages/colorSel.html
[8]Background colours (lema@infi.net)
http://www.infi.net/wwwimages/colorindex.html
[9]Web consortium site on
Styles
http://www.w3.org/Style
[10]Online Course on CSS
http://www.cern.ch/WebOffice/Doc/Courses/CSS
[11]The 256 colors of Netscape
http://www.connect.hawaii.com/hc/webmasters/Netscape.colors.html
[12] Poynton's color FAQ
http://www.inforamp.net/~poynton/notes/colour_and_gamma/ColorFAQ.html
For matters related to this article please contact the author.
Cnl.Editor@cern.ch