Part III - Looking Pretty

Let's start by adding a white background color to the document. Look for the BGCOLOR="#FFFFFF" in the <body> tag element. The F's stand for a hexadecimal representation of red, green, and blue where BGCOLOR=" rrggbb". If you prefer you can change the background from white to the image of your choice by adding BACKGROUND="filename.gif" to the body element instead of the BGCOLOR element. I strongly suggest that you be very careful with background images. There is nothing worse than spending all your time developing a page that no one can read through the background you've selected. I personally like the basic colors, especially black text on white. In my humble opinion (IMHO) more and more sites will be staying with basics in order to get their message read.

The next item is to change the size of the text. In order to do this you can add either <font> element (although this may not be supported in older browsers) or a heading element. For our example we will use <font> as we also would like to add a color change. Look at the first line that says Harry's Home Page and you will see the elements added to make the sentence larger and in red. Color selections can be found in the HTML Reference library by double clicking on any topic, then selecting HTMLib from the menu and selecting the color wizard.

We also have added a paragraph element <p> to separate the lines of text and give us the ability to center, although a <CENTER> element can also be used for individual lines. Also notice how the text is between the beginning element and it's corresponding ending element i.e. <font>This is My First HTML Page</font>. Later, when you are using commercial page designers, this may help you out of a jam when trying to figure out why something doesn't look quite right.

The final addition to our short little page is the addition of an image file. We will use a simple check mark bullet next to a line that says "First item on list". A very important element to include with virtually all images is the ALT tag. It ensures that if someone has load graphics turned off, they will see a brief description of what the image would be. It's also nice to be able to point to a picture and with the new browsers a little box comes up with the alt tag description. Another nice feature is the alt tag descriptions show as the picture is loading, helping keep the user impatience level down. In our example the check mark is so small most of these features are meaningless, but a good habit to follow none the less.

<html>

<head>
<title>Harry's Home Page</title>
</head>

<body bgcolor="#FFFFFF">

<p align="center"><font color="#0000FF" size="4">This is my First HTML Page</font> </p>

<p align="center"><img src="/checkmar.gif" alt="Check Mark">
<font size="2">First item on the list</font></p>

</body>
</html>

By now you are probably wondering why we have to go through all this hand coding when you just went out and bought Front Page. Trust me when I tell you, the more you know about the behind the scenes, the easier it will be to develop more complex pages (even just text) and determine what someone else is doing with their pages when you copy them to your disk and do a view source to see how they did that.

Your assignment for the next issue of VisionNews is to add more items to the lists, and add text based paragraphs without the check mark image. We will then use these checklists with hyperlinks to the paragraphs. Good luck on this weeks work.