How Much Is That Background in the Window ...

Page backgrounds and hyper-link text color -- the <BODY> tag

Have a good dinner? Fido fertilize your neighbor's lawn? Then I guess we're ready to start with the next lesson.

Last time we found out how to get images onto our page, but there's one image we didn't talk about. That's the one used as a background for everything else. It sets the mood of your site. Well, we're going to catch that now by examing the <BODY> tag [which we learned about in the second lesson] a little more closely.

If you'll remember, the <BODY> tag is one of those necessary tags without which we don't have a web page. I also told you that the bulk of the HTML document is inserted between the <BODY> and the </BODY> tags. This pair of tags actually defines what will be displayed in the browser window.

There are a couple items that go within the <BODY> tag itself, attributes if you like. They define the defaults for the page and set up the background if you choose to use one. Now, none of these attributes are required to be entered. If you leave them out, they simply revert to whatever the visitor's browser has set in it. As a matter of fact, the visitor's browser can over ride any settings you make -- you can't do anything about that. Most of your visitors won't have set up their web browsers that way though.

The attributes we'll be looking at for the <BODY> tag are:

BGCOLOR [ Solid background color ]
BACKGROUND [ An image or graphic used as a background]
TEXT [ Color for normal page text ]
LINK [ Determines the color of a link ]
VLINK [ Determines the color of a visited link ]
ALINK [ Determines the color of an active link ]

There are more items available which can go in the tag, but these are the only ones we'll be talking about.

To add a solid background color, we merely insert the BGCOLOR="hex code for color" into the <BODY> tag. If you want, you can also use a 'named color' like we did for text. Problem with that though is that most of those named colors which are supported in both major browsers [remember the list?] are very bright or deep in hue. Your page background should not be the highlight of your site, it should be subdued and almost unnoticed. More the soft music playing at the edge of consciousness than the rock concert which assails your every sense. However, either way will work.

We'll use color #99FF99, which is a pale green, to set our mood. Here's how the HTML code looks:

<BODY BGCOLOR="99FF99">

Inserting that in our Oscar page, the HTML document now looks like this:

<title> My Pet Turtle, Oscar </title>

</HEAD>

<BODY BGCOLOR="99FF99">

<CENTER><H1>Oscar, the Painted Turtle</H1></CENTER>

  There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time<IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 ALIGN="left" BORDER=5> when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.

  Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.

  Oscar was purchased at a local pet shop here in Korea for the tidy sum of 4,000 won [ that's about 3 dollars, U.S. money ]. He was just a little tyke about the size of a quarter when I bought him and brought him home. I've alway's enjoyed strange and unusual pets and you don't get much stranger than a turtle.

  Oscar is a true turtle, as opposed to a tortoise, and spends all of his time in the water. His home consists of a 55 gallon aqarium -- completely filled with water, several rocks to hide under, and some plastic plants. These latter are more for my benefit than his, since he can't eat them [ though he tries ] and I doubt that he appreciates their asethic value.

  I've had Oscar for about three years now and am amazed at how he's grown. At the present time he is larger than a grown man's hand -- and still growing. Oscar will eat just about anything, but his favorite food seems to be small green frogs that abound around my neighborhood. Fish are also welcomed, and I can no longer keep tropical fish as pets along with him as I used to. Sooner or later he'll eat them.

  Turtles are interesting in several respects -- one being the length of time they can remain completely under water. And so forth and so on ......

</BODY>

</HTML>

The resulting page turns out like so:

Fig 9

That's all there is to it. You must be cautious, though, about which color you select for a background and which colors you select for your text. You can easily render your web site quite unreadable. The best advice is to stick with a pale background and a deep text color which contrasts well with it.

Notice in Fig 9 above the text color I used earlier for 'palm tree' just about disappears in this new background color. If I were actually going to post this page, I would change the color of that text. But since this is a tutorial and I'm going to be changing the background several more times, I'm not going to bother.

How about if we want an image in the background instead of a solid color? Background images can be used to great effect and make your page stand out. Again, be careful not to get carried away. You can easily destroy a potentially good web site by either overdoing a feature or not using it with care and consideration.

You can use either gifs or jpgs for a background -- which is basically nothing more than an image which is displayed throughout the page -- in back of everthing else.

You don't specify the size [using something like HEIGHT and WIDTH as we did for the <IMG> tag] in your HTML document. The visitor's browser will use the entire image at it's normal size for a background. If the image is not large enough to fill the browser window, it will 'tile' [more on this in a minute]. If the image is larger than the browser's window, the browser will cut off the image, starting on the right edge and working inward.

On browser windows/monitors. There is a range of sizes for monitors nowadays. Still the most common is the 14 inch monitor. This generally gives a 640x480 display area (be warned though -- the user can change this). Quickly catching up is the 17 inch monitor with it's 800x600 display. Now available, but not in wide use are even larger monitors -- 20 or 21 inches and bigger probably using a 1280x1024 display. Remember, all these sizes are measured in pixels. The higher the resolution [ie 800x600 is higher than 640x480] then the more displays on the visitor's browser on each line.

Why am I telling you all this? What use is it? Well, it can be useful for planning if you're going to use a background image and you don't want it to tile. You'll have to use an image that fills the largest possible browser window size and accept that surfers with smaller screen sizes will not see all the image. This latter shouldn't be a big consideration though, since we're not really concerned that they see or don't see the whole image. It's a background after all, just meant to set a mood. If the image is important, then you should use it as a regular image within the page.

Can you somehow control the surfer's browser window size? Yes and no. For our purposes right now -- no. As you continue learning web design, you'll find you can ensure that a new browser window is opened and set to 480x640, the size of the smallest common computer monitor thereby controlling how the visitor sees your site. But this is done through JavaScript, which is well beyond the scope of this tutorial.

Let's highlight what makes a good image for a background then we'll look at some examples.

The image should be either abstract or page content related.
The image should be subdued and not distract the viewer from the main content of your page.
The image should be of reasonable file size so that it does not take a little longer than forever to download.
You should use either a gif or jpg image since these are the most common and widely supported.
If you don't want an image to 'tile', it's physical size should be as large as the largest browser window -- keep it's file size small though.

Very well. Some examples now. We'll display these on Oscar's page since that's handy. Many may not look right, but that's why we're going through this tuturial -- to learn.

First an abstract image, small in physical size so that it will 'tile' when displayed. Now, I've used that term quite a few times. What's it mean. Actually, it means nothing more than a picture that repeats itself over and over, row upon row, filling in the background. You've seen 'em. There is no special command to make a background image tile or not -- it simply depends upon the physical size of the graphic and the size of the viewer's browser window. If the viewer's browser window is larger than the image, it will tile.

Our first example is a relatively small jpg file [about 6K] which will tile when displayed. However because of the image, it will look like one large solid image. Here's the actual size of the picture we're going to use. I'm calling the file 'bkgd1.jpg'

Here's how we enter the image into the <BODY> tag for display as a background image:

<BODY BACKGROUND="bkgd1.jpg">

And how it appears on Oscar's page:

Fig 9a

Notice how the tiling effect gives the impression of a single large background image in this case -- saving us considerable storage space. However, this is not a good background to use on this page unless we're going to change the text color / size and make it more readable.

Let's look at another small background image -- a non-uniform, abstract one so that the tiling effect can clearly be seen. Here's the image I'm going to use, appropriately named 'bkgd2.jpg'.

And here's Oscar:

Fig 9b

Here you can clearly see the tiling effect -- the one small image repeating itself.

By the way, notice the 'crinkeling' effect around the text on Fig 9b. Remember in an earlier lesson I explained that jpgs were not good at reproducing sharp edges? This is what happens. However, I used a jpg here because of file size. A comparible gif file would have been over 200K and taken forever to download. [the jpg here is about 31K]

We can also use a regular photo as a tiled background. For our next example I'll use Oscar's picture. Note: I can't resize this in the HTML document like I did before, so to get a small image I'm going to have to resize it in my Paint program. Additionally, I'll lighten the new image so that it doesn't take away [too much] from the page content itself. Here's the reformated image:

And how the web page looks with the new background.

Fig 9c

For our next background example, I'll use a single large image that will fill the browser window. I'm going to use Oscar's image again [just cause it's handy], but fade it to gray-shaded to tone it down, lighten it as I did the one above and enlarge it. Remember, when you enlarge an image, you get some loss of clarity. How much is lost depends very much on how much you enlarge it. As you make a large image be careful since image size is directly proportional to file size. We don't want anything larger than about 30K for a background image - preferably, much less. This one is a little over 30K. Here's how it looks.

Fig 9d

Remember, you won't have that crinkeling effect when this is displayed on a browser [try it if you don't believe me], we get that in the image above because I'm trying to save download time for this tutorial and saved the snap-shot of my browser as a jpg file. Jpgs don't reproduce a sharp line [such as the text] real well.

You've probably seen home pages that have a border down one side. Maybe you've wondered how they do that [maybe not]. Anyway, the trick is real simple. We'll use just a plain gray background with a light brown border on the left side. All you're really seeing is a repeating image -- a very short, very wide one.

Here's the image I've made for the background:

It's physical size is 10 pixels high by 600 pixels wide and is a little less than 1K in file size. I could have made it only 1 pixel high, but then you'd have a difficult time seeing it clearly as an image here. As a background, with the image repeating, the result would be much the same, though. Here's the resulting page:

Fig 9e

Remember, this is a repeating image, so you must make it wider than the browser window it will display in or you will see the light brown part of the border repeat on the right side of the window (it tiles). If I were doing this for a real page, I'd make the background image 2 pixels high and 800 to 1000 pixels wide. That will cover most browsers.

Something else which bears mentioning. The first background image we made and this last will not appear to 'scroll' with the page as the viewers reads. This is because of their uniformity. All the others will 'scoll' [that is move] when your visitor moves down your page. MS Explorer has a <BODY> attribute which will freeze the background image in place [the content of your page scrolls past a fixed background]. To the best of my knowledge NetScape Navigator has not yet incorporated this attribute into its browsers. If you wish to make your background image non-scrolling [works for MS Explorer browsers only!!] then add the BGPROPERTIES attribute:

<BODY BGPROPERTIES=fixed BACKGROUND="your file name">

So much for backgrounds. I believe you have a good solid start. The key, as with anything, is to play around with it, manipulate it and see what works for you. Let's discuss the TEXT, LINK, VLINK and ALINK attributes of the <BODY> tag now.

We haven't discussed how to make links yet -- that's in the next lesson, however I'm sure that most, if not all, of you are familiar with what a link is and what it does. We'll get into a little more detail on them in the next lesson; but for now we'll look at how to set their colors [and the basic text color as well].

Let me define each of these in a few choice words, then I'll cover how to do the TEXT attribute. The other three are done in the exact same manner.

The TEXT attribute defines the base color to be used for all text on your page. That's it. Nothing fancy.

The LINK attribute defines the color to be used for the text used in all of the hyper-links on your page. This sets your email link text color as well.

The VLINK attribute defines the color to be used for the text used in all of the hyper-links which your page's visitor has clicked on and gone to. Information on which links have been visited is kept in each individual surfer's own computer -- it will not affect your page other than how he views it [ie. this is information unique to each visitor].

The ALINK attribute defines the color to be used for the text used in the link which your visitor is actively clicking on at the moment. In other words, it's the color it changes to while he's pressing the left mouse button with the cursor over a hyper-link.

You can leave these attributes out and each person's individual browser will fill in a default color. Generally speaking [at least for Navigator] the default TEXT color is black, the default LINK color is blue, the VLINK color is navy and the ALINK color is undefined. It's nice [but useless] to know that each individual can set their browser to over-ride the values that you indicate in your HTML document and use their own. However, most folks don't do that.

The color of each of these attributes is set in the same manner as we set the BGCOLOR at the beginning of the lesson. Generally you want to use the hex-coded numbers, but you can use the named color values as well.

Here's the example for setting the TEXT attribute:

<BODY TEXT="FFFFC8">

This will give us a base text color of 'sand'. Remember, you can always change this throughout your document by using the  tags.

To wrap up this lesson, let's look at a completed <BODY> tag with all attributes [we've discussed] added in. We'll use a TEXT color of 'sand', LINK color of 'white', VLINK color of 'blue', an ALINK color of 'red' and a solid colored background [BGCOLOR] of 'black' as the example.

<BODY BGCOLOR="000000" TEXT="FFFFC8" LINK="FFFFFF" VLINK="0000FF" ALINK="FF0000">

We're moving right along. Let's do our lesson review:

We began by reminding you that the <BODY> tag is one of those which is absolutely necessary in building a page.
The <BODY> tag has a set of attributes just the same as several other tags we're discussed. They are the BGCOLOR, BACKGROUND, TEXT, LINK, VLINK and ALINK attributes.
BGCOLOR is set using either hex numbers or a named color value and provides a solid, one-color background. I'd recommend you stay with the hex numbers for all of these attributes.
You may place a gif or a jpg image as a background using the BACKGROUND attribute. Care should be taken so that the background doesn't detract from your actual page content or make the material difficult to read.
You can't resize the image in HTML for a background as you can when you used the <IMG> tag. All resizing must be done in your paint program.
Background images will 'tile' to fill up the user's browser window. You must plan your background carefully for the effect you wish to produce.
Background images which are larger than the user's browser window will be cut off on the right side [the left side of the image always displays].
Keep background images as small as possible [file size] to keep the page load time as fast as possible. [the internet slows everything down.]
Backgrounds scroll with your page. MS Explorer has a unique attribute, BGPROPERTIES=fixed, which will 'freeze' the background in place.
The TEXT, LINK, VLINK and ALINK attributes set the default color of each for your page. You should use the hex number to indicate their color [but can use a named color value].
The surfer's browser can be set to over ride your attribute values with his own, but most don't do this.

Okay, time for a short break once again. Come right back because next we're going to go into how to make hyper-links and post your email address.

[Click on the icon below to proceed to the next step in the lesson]