... HTML & Webpages ...

... Recommend this series to a friend.

ADDING COLOR TO OUR WEBPAGE

Let's now consider adding color to the background of you page. Here an aesthetic eye is important. The easiest page to read has probably an off-white color (not too much glare) with a dark font. The color of the unvisited links and visited links can then be adjusted accordingly (note that the default color of a link is blue). But all the colors are in your control so let's try a few variations.

The body tag is very important it shows your background color or you background graphic. Let's talk color first. The tag for color is:

<BODY BGCOLOR="here you name the color"> … and you keep those quotes exactly where they are; as an example, you might choose red, white, or blue like this:

Note that you can only use one color for any one background; that's unless you use a graphic or one color with a gradient (but that's for later). Let's not get ahead of ourselves; then you would get confused, give up, and blame me whose sitting here only trying to be helpful. The browser will read certain basic colors (like the above and a few others) but for the many variations, we go to a color chart (fortunately there are many online). Here is one … Color Chart … these charts are also called hexidecimal charts (I've also seen it spelled hexadecimals); the details behind this technology are not important now. What matters for us is how to use it.

We use the same BGCOLOR tag except that with these six figure number/letter codes, we add a "pound sign" (#) to the tag. Red, white, and blue would then look like this:

<BODY BGCOLOR="#FF0000"> ... will give red.
<BODY BGCOLOR="#FFFFFF"> ... will give white.
<BODY BGCOLOR="#0000FF"> ... will give blue.

Looking at the color chart we could have chosen any one of many variations of these colors. In stead of using <BODY BGCOLOR="#FFFFFF"> for the brightest white, we could have coded it:

Same changes could be done for the other colors; and that's only for red, white, and blue. The colors are there for you to choose; what matters is that you know how to do it.

Putting the background color and font color together, the tag would look like this:

I made a slight change in the background color (same as what my grandson chose for his newbie site) and it looks good. But remember, I'm seeing it on my browser, with my eyes, with my sense of color … you choose what looks best for you. Links would also be added to this body tag but we'll do that when we put links on your page (or links to other pages on your site or links to pages on other sites (I call them internal links and external links respectively).

So let's add our new body tag to our editor, and it will then look like this:

<HTML>
<HEAD>
<TITLE>My Webpage</TITLE>
</HEAD>
<BODY BGCOLOR="#0020C0"TEXT="#DDDDDD">
<CENTER>
<H1>Greetings from the Land of Oz</H1>
</CENTER>
</BODY>
</HTML>

Change the heading to say what you want, make sure all is correct (don't click any "Save" yet), and click Preview. By the way, if you saved it (or clicked "Save and Continue), the world does not come to an end. It means the world can now see it, and if you are not satisfied after having saved it, you return to the editor, make any corrections you want (that's the great advantage of understanding html), and then preview it, and save it again.

And we'll continue on the ... Next Page … adding text to our page.

We return to the … Table of Contents … enjoy your work.

And if anything to add or correct - - I certainly would appreciate it.

Return to ... Navigator ... that's it.