Lesson 4: Backgrounds, Bars and Bullets


Text and an occasional picture are the only things you actually need to have on a web page, so the next couple chapters will be for the most part about useless things that add to the appearance of your site or somehow make it more entertaining.  Among the most pointless of these are backgrounds, bars and bullets.

The right background can add character to a good site or cover up flaws in a bad one, most of the time, you'll want to use simple, non-obtrusive colors or pictures so that the user may read your text without considerable eye strain.  To add color to the background, place a "bgcolor" label inside the body tag like so <body bgcolor = "#FFFF00">.  The combination of letters and numbers is a Hexadecimal composed of six different figures, the first two effect the red, the second green, and the third blue, these can be mixed in different quantities to produce any one of 256 colors.

A background picture can be applied to a page by changing the body tag in this manner <body   background = "cowsombrero.jpg">.  The picture will be tiled all over the background of the page.  I recommend that you use .jpg and .gif files for this.  Here is this page with a background color and background picture.


That bar-like object above this paragraph is a horizontal bar, and strangely enough, that's what I will be explaining next.  These are useful in separating different parts of pages and are built into the browser so that they require no additional loading time.  To insert one in a page, simply add the tag <hr> wherever you feel the need for a line, just don't get carried away.  If you find the normal bar drab and boring, you may want to  insert a bar-like picture.  To do this, just use the normal picture format <src = "plantbar.gif">

   

Contrary to what I said earlier, the final part of this chapter, bullets, may actually have some sort of partial function.  They help to organize ideas in outlines or step-by-step instructions.  You've probably seen them in the example web pages I have occasionally written out.  To add bullets to your page:

To add numbers rather than dots:

  1. Place <ol> at the beginning and </ol> at the end of the points.

  2. Once again, use <li> and </li>

You can change the numbers into big or small Roman numerals or letters by adding the <ol type = "A"> ("a", "i", "I") to the opening tag.  To create a multilevel outline, place <ol> groups within a numbered list.  To use pictures as bullets:

  • Place a <ul imgsrc="bullet1.gif"> at the beginning of a group and </ul> at the end.
  • Use <li> and </li> like any other bullets.
  • Well, I hope you got something useful out of this chapter, if you didn't, you'll still be tested on it.  Try the Quiz on Chapters 3 and 4 to see how well you've learned the material.

    Table of Contents