[Index of Lessons]
[Lesson 12]
[Advanced Lesson 2] [Colour Page]

A1. Colourful and Textured Backgrounds
Backgrounds
The background of your page should be just that - in the background. As different colours or even patterns are added, keep in mind that the colours chosen should not interfere with the readability of text. For the pages of this site, I have used a solid white color as the background colour and a jpg file to make the textured border and white background, this choice makes for a clean and non-interfering backdrop. Which should make it all easier to read and work from.

As you may recall from a very early lesson background colour is determined in the <body...> tag. Also determined within the body tag is the text, link and vlink colours. By adding values to each of these tags, you can chose a colour combination that suites the type of web page you are creating.
A complete listing of colours can be reached by clicking on the Colour Page link at the top of this page.
Backgrounds by Body Tags
HTML Result 
 <body bgcolor="white"
text="black" link="red"
vlink="darkred">
I know this isn't really the example that I normally show, but the html shown to the left is the html in all of these pages except for one more addition, and that is : 
 <body bgcolor="white"
background="paper6.jpg"
text="black" link="red"
vlink="darkred">
 As you can see the addition was the command background="filename.jpg". The background picture can be of type JPG or Gif.
Solid colors add some variety to web pages- but you can go even farther by adding a textured background. By using a small image file (GIF or JPEG) and the browser will "tile" the web page with repeated copies of the image. Some of the things you should keep in mind are:
  1. File size:Adding a background texture will require that an additional graphic file be downloaded. It is suggested that the image files be less than 10k in size.
  2. Readability: Be selective! Many background texture files are more distracting for reading than enhancing. Try to use ones that are very light (with dark text) or very dark (with light text)- i.e select high contrast with the text.
  3. Effect: In the first web browsers that used backgrounds, the page would not appear until the background file was downloaded- this might mean for a slow connection, your reader might have to wait a long time for the background image to arrive before even seeing any content!
    However, later browsers download the background last so the page first is grey, then the text and graphics appear, and lastly the background arrives. REMEMBER! The load time for your pages will likely be slower (considerably for older modems) when your pages are read from a web server.
Example
It is now time to incorporate the example again. For the background of the web page an image will be loaded for the main page, the text shall become white and the back ground colour shall become black. It is important to remember that when incorporating an image into a web page, not to have background image disrupt the readability of your work. So let's modify.

<html>
<head>
<title>UFO's, Paranormal and other Mysteries</title>
</head>
<body text=white bgcolor=black link=yellow background="startile.gif">
<h1><u>UFO's, Paranormal and other Mysteries</u></h1>
<p>
Welcome to my web site, this site is going to have various
pages pertaining to information I have read and have found very
interesting.<br>
Subject matter will range from UFO's to ghosts and
there specter friends, prophecy's and theories which will make
your mind query all that you know. <p>
All of the information contained within these pages can be found in full in the <b>X-Factor</b> magazine. For these pages only excerpts have been used. All pictures have been found on various web sites around the world.<p>
I hope you enjoy this site<p>
<hr>
<img align=right src="iran_ufo.gif" width=80 height=60 alt="UFO pic">
<h1><u>UFO's</u></h1>
<h3>Area 51</h3>
<i>"About 190km north west of Las Vegas, in the Nevada desert, the offical map stops. There is plenty there - roads, creeks, mountains, bunkers, buildings and a massive 9.5 km runway - but on paper these things do not exist. It is as if all human activity has ceased across an area the size of Switzerland."</i><br>
<ul>
<li><a href="a51.htm">Main Article</a>
<li><a href="a51.htm#case">Case Notes</a>
<li><a href="a51.htm#profile">Profile</a>
<li><a href="a51.htm#evi">Evidence</a>
</ul>
<p>
<img align=right src="nos1.gif" width=68 height=99 alt="Nostradamus pic">
<h1><u>Paranormal</u></h1>
<h3>Millennium</h3>
<i>"Michel de Nostradame, popularly known by his Latin name Nostradamus, often spent his evenings alone, gazing into a bowl of water - like a gypsy with a crystal ball - until he went into a deep trance and saw into the future. On one such night, Nostradamus witnessed his own death. He died two weeks later, on 2 July 1566 - the exact date he had predicted." </i><br>
<ul>
<li><a href="nos.htm">Main Article</a>
<li><a href="nos.htm#case">Case Notes</a>
<li><a href="nos.htm#analysis">Analysis</a>
<li><a href="nos.htm#evi">Evidence</a>
</ul><p>
<img align=right src="ark.gif" width=132 height=61 alt="Ark pic">
<h1><u>Mysterious World</u></h1>
<h3>Quest for the Lost Ark</h3>
<i>"Covered with gold and surmounted with two golden Cherubim facing each other, the Ark of the Covenant must have been an awesome object to behold. But it was what lay inside that made it the holiest - and most powerful - of religious objects"</i><br>
<ul>
<li><a href="ark.htm">Main Article</a>
<li><a href="ark.htm#case">Case Notes</a>
<li><a href="ark.htm#profile">Profile</a>
</ul><p>
</body>
</html>

Like before, add all of this to your first web page by opening the document and editing the page. To speed it up, you can cut and paste the code. After you have done all of this, click here (Example 8) to compare your work to the example provided.

You should note that it is not always important to incorporate a background image, it is purely a matter of style. If you wish to try differet solid colour backgrounds without images, then go for it. Experimentation is how you achieve a look that works for you.
Click on Advanced Lesson 2 to continue, or click here (Top) to return to the top of document.