Part 2

Example #4: <BODY>...</BODY>
This is the area that the visable. This is where all the formatting and things happen. Things bwtween the <BODY> and </BODY> tags are seen. This is where the text is written, and the formatting is done. There are two examples for this oone to deminstrate some things that I will explain in a bit.. I have added some text and links so you can see some different things. You don't know how to do these yet, but don't worry about that aspect of it yet. What To Look For: In this first, you will be looking for several things. You will be looking at the background color (black), the text color (white), and two other colors that are in the text (red and blue).

The HTML code for the first example:

<HTML> <HEAD> <TITLE> The Webbed Page </TITLE> <BODY BGCOLOR=000000 TEXT=FFFFFF LINK=FF0000 VLINK=0000FF> This is just some simple text with two links on a solid black background. Don't worry about linking yet, you will learn that later. The <A HREF="html/un-visit.html">first</A> link should be red. This link is just a link you have not visited yet. If you click on it, it will become blue like the <A HREF="../htmlprt1.html">second</A> link. This second link is just a link back the the help page you came from. Click on it to go back. </BODY> </HEAD> </HTML>

The only part of this that I really am interested in at this time is the <BODY BGCOLOR=000000 TEXT=FFFFFF LINK=FF0000 VLINK=0000FF>...</BODY> part. Between the <BODY> and </BODY> tags do is define the area where the visable text is located. In between these tags, the text is put, pictures are put, as well as any formatting things such as indents, frames, spaces, whatever. This area is the bulk of the HTML file. Let me explain what is going on for this first example.

<BODY>
This just tells the web browser that the next section is part of teh body, and to fo;llor the instructions (code) accordingly. It is possible to just have the <BODY> and </BODY> tags without the other options. In fact, why don't you take a look at what it is like without the other options by clicking here. I have just removed the BGCOLOR=000000 TEXT=FFFFFF LINK=FF0000 VLINK=0000FF whatever they did. Kinda boring, huh?

BGCOLOR=000000
The BGCOLOR tells the browser what color to make the background. It gets the color from the 000000. I will exaplain the how the color works in a little bit.

TEXT=FFFFFF
The TEXT tells the browser what color to make the text when it is displayed. Again this color comes from the FFFFFF, and again, I will explain that in a little bit.

LINK=FF0000
The Link tells the browser what color to make the unvisited links. In this example, this color was red. I will explain the colors in a bit...I promise.

VLINK=0000FF
The VLINK tells the browser what color to make the link after it has been visited (comes from Visted LINK). in this example, that color was blue. Keep reading to find out how the colors are done.

How the color is done
OK, I said I would tell you how to get the colors for these elements, now is the time for that. There are three things we are going to talk about when we talk about colors. We are going to talk about the writing of them, what the numbers/letters represent, and how you can figure out what numbers/letters represent what colors.

Writing Them
There seems to be a couple ways to write them. The only difference is that one is good HTML writing and one is not, though I have not found a difference in their function. The two ways to write them are simplely 000000 and the other is "#000000". Let me just use the TEXT elements as and exampleso you can see. TEXT=000000 and TEXT="#000000" you can use whichever you want. Does not seem to matter,

What The Numbers/Letters Represent
Well, simpley the represent colors in HEXADECIMAL (also known as HEX). HEX is Of or based on the number 16. At least that is what Webster says. The hex numbers are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. kind of strange, huh? Well, it works well for the computer world. Let me use the TEXT element as an example again. The color goes like this: TEXT=RRGGBB RR represents the red element in the color. GG represents the green element. BB represents the blue element. A computer's primary colors are red, green, and blue, not red, yellow, and blue.

How To Figure Out These Numbers/Letters
There are a couple ways to do it.

One way to do it is the more manual way. This way involves using a paint program (such as Windows Paint or Paint Shop Pro) and goign to the color area, selecting a color and then lookingtaht the 3 diget color numbers it returns. From here you pull out your handy dandy scientific calculater that can convert from decimal (DEC) to hexadecimal (HEX). You take the red three diget number, and convert it to HEX, however your calculatar does it. You write the 2 diget number/letter conbination down, then you try in the type in the green three diget number that the paint program returned. Cinvert that one to HEX, and write it down right after the red elemnt. You repeat that again for the blue three diget number. You now have the HEX of the numbers, and can use them in the different color elements for the <BODY> tag.

The other way is a more automatic way. This ways uses a program like Color Schemer. This program figures this all out for you, and tells you what to write down.

What To Look For: In the second example, you should look for the background (a graphic), the text color (white), and the two colors in the text again (yellow and green).

The HTML code for the second example.

<HTML> <HEAD> <TITLE> The Webbed Page </TITLE> <BODY BACKGROUND="../pic/html/backgrnd.jpg" TEXT=FFFFFF LINK=FFFF00 VLINK=00FF00> This is just some simple text with two links on a patterned background. Don't worry about linking yet, you will learn that later. The <A HREF="html/unvisit2.html">first</A> link should be yellow. This link is just a link you have not visited yet. If you click on it, it will become green like the <A HREF="../htmlprt1.html#example4">second</A> link. This second link is just a link back the the help page you came from. Click on it to go back. </BODY> </HEAD> </HTML>

Again in this example I want to only look at the <BODY> tag as well as it's elements. The only difference in this one, and the last one is the lack of the BGCOLOR=000000 and the presents of BACKGROUND="../pic/html/backgrnd.jpg". OK, that may not seem like much, but I am sure you noticed the difference right away. The BACKGROUND element allows for a background picture or graphic to be tiled behind the text. There are some cautions that should be thought about when using graphics. I will dedicate a large area to graphics later. The "../pic/html/backgrnd.jpg" just tells the browser where to look for the graphic. This reference to the pic is known as a relative one. Being that it is relative to where it is being referenced from. I could have also done BACKGROUND="http://anduin.eldar.org/~ben/pic/html/backgrng.jpg" It really makes no difference. I will show you some of my directory tree, so you can trace the route of this.

This is a basic UNIX directory. My spot on the system is under "home" in the "ben" directory. Under that directory, there is a directory called "web" it is in this directory where all of this HTML/Web Page stuff goes. In fact when you do http://anduin.eldar.org/~ben, you are sent into the "web" directory. this file (htmlprt1.html) is stored in t