In this episode, Jeri now has a multi-page site, and of course the next thing she has to learn is some simple debugging. Watch for the highlights in the code... they are trouble spots.

After our debugging session, Jeri tackles the web's RGB color concept.



Lesson #3:  Color Values

Contents of Lesson 3

Before we get going on Lesson 3, let's look at some problems that cropped up during Lesson 2's homework:

3/21, Jeri to Lehua:

Well, I made the changes and I'm enclosing below what my files look like. The periwinkle showed up as a wierd "green" for me. Also I changed it on both pages and only get color on the tree page, the index page stayed grey. Also, I tried going into my file manager this time to bring it up and it wouldn't open the file this time so I had to do it once I actually got in my netscape program.


Home Page:

<HTML><HEAD>
<TITLE>Jeri Walsh's Home
Page</TITLE></HEAD><BODY>
Hi, I'm Jeri Walsh from SE Arizona. Welcome to my home page.
Please visit "our" TREE OF HOPE which is dedicated to cancer
Survivors and Victims. Please visit my other pages.
To visit my tree:
<A HREF="jtree.htm">Click here</A><BODY
BGCOLOR="AAaaFF">
</HTML>


Tree Page:

<HTML><HEAD>
<TITLE>Jeri Walsh's Home
Page</TITLE></HEAD><BODY>
Here is our Beautiful Tree of Hope.
To return to my home page:
<A HREF="index.htm">Click here</A><BODY
BGCOLOR=AAaaFF">
</HTML>


3/21, Lehua to Jeri:

WONNNNNNNNNNNNNNNNNNNNNNNNNDERFUL! Isn't this an amazing feeling?

The problems you're having with the pages are quite simple.  Now...


Pause and Reflect:
A Review of the Start/End (Container) Concept

The basic structure of HTML language is that things start and end. For example, bolding has a start and an end, and paragraphs have a start and an end, which we will get into.

The "end" concept is expressed with "/" in HTML.

The whole page itself has a start and an end. That is the meaning of the commands we've been using of <HTML> and </HTML>. They mean, respectively, "start an HTML web page" and "end an HTML web page. So, any correctly coded web page looks like this:

<HTML>
....( a bunch of stuff) ...
</HTML>

Within the page itself (i.e., within the start and end HTML commands shown above), there are two sections: head and body. They are expressed the same way, except within the HTML start/end. So, expanded, a web page looks like this:

<HTML>
<HEAD>
.... (a bunch of heading stuff) ...
</HEAD>
<BODY>
.... (a bunch of body stuff) ....
</BODY>
</HTML>


So, it's like two boxes within a larger box.

The head section is used to tell the browser certain things about the page that won't be directly seen by the user. The most common thing we see in the head is the <TITLE>, which is the text used when a visitor hits "add bookmark" (or "favorite places", in the case of AOL). The <TITLE> command, like almost all of the others, has a start and an end, so you see </TITLE> after the bookmark text.

The body section is where the stuff is that is visible to your visitors -- your text, pictures, etc. It's the "meat" of your page. As mentioned above, it should have a start and an end. In the start command for the body, the <BODY> command, you can add some parameters that will then apply to the rest of the page unless overridden. The most common parameters you would stick into the body command are background color, text color, link-text color, etc.

In the pages you have built so far, one minor problem is that, instead of adding the parameters to the original body command, you added a new, additional body command at the bottom of the body's contents. If you look at the top of your code, you will see your original, lonely, empty <BODY> just sitting there with nothing in it. Then, down toward the bottom, is the new body command, with the new parameters, but it is being ignored because it's in the wrong place. Another small problem, not a biggee, is that you've completely omitted your end-body statement.

So, with that corrected, your main/home page would now look like this:

<HTML>
<HEAD>
<TITLE>Jeri Walsh's Home Page</TITLE>
</HEAD>
<BODY BGCOLOR="AAaaFF">
Hi, I'm Jeri Walsh from SE Arizona. Welcome to my home page. Please visit "our" TREE OF HOME which is dedicated to cancer Survivors and Victims. Please visit my other pages.
To visit my tree: <A HREF="jtree.htm">Click here</A>
</BODY>
</HTML>

Note that, while Netscape is tolerant and ignores many errors, like a missing end-body, other people's browsers are not so tolerant, so it's good to code at a level that will work for all browsers, if possible.

The next problem is that, on your tree module, you've left off one of the quotes in your color parameter. Instead of:

<BODY BGCOLOR=AAaaFF">

, you need to say:

<BODY BGCOLOR="AAaaFF">

And... a further correction that is my fault -- in my example, I left off the "#" because I get sloppy due to Netscape's tolerance. It should in fact read:

<BODY BGCOLOR="#AAaaFF">


Lesson 3:  Color for Background & Text

This is a good time to talk about color. In HTML, color is expressed in 3 parts:  proportions of red, green, and blue, respectively. It is therefore called "RGB" (red-green-blue) values. To further (and unnecessarily) complicate things, these values are expressed in hexidecimal. For example, a hex value of "20" actually means "32". I strongly recommend that in the beginning you refuse to care about this, and just pull colors from websites that exist specifically to provide conversions for people.

But, at a gross level, you can do some crude adjusting of colors just by raising and lowering some of the values. For example, if you have a value of "0000ff", and get a bright blue, and you would like to make it more purple-y, you can try adding to the red value. So, you might try a number like "cc00ff". Don't pay too much attention to this, it's way more complicated than it needs to be.

Be aware, also, that there are not only a multitude of browsers, but a multitude of computers and color settings and resolution settings. This means that my niece's photo page, which I had made a lovely shade of dusty mauve, is great on my 16-million color setup at home, but is a dull grey on my 256-color setup at work. Again, ignore all of this until you are more confident with HTML in general -- all of these things can be learned as you go along, and are easy to adjust at a later time.

Make the corrections shown above in your pages, and then test them out again and see what you get.

To cap off today's lesson in color, make the following change in the body command of your tree page -- instead of color AAaaFF, change the color to 88aaaa. The body command will now look like this:

<BODY BGCOLOR="#88aaaa">

This should leave your main page the same funny green, and should make your tree page even green-er.

Then, goof off, relax, celebrate, take a break, you have created a web site, and we can fancy it up when you're ready to resume.

Hugs & love,
Lehua


View the Pages after Lesson 3


Conversations with Jeri:
  • Bigger Headers
  • Images as Backgrounds
  • Tiled Backgrounds

Next Lesson