Adding Color to Your Page
Now that we have the basic structure down pat, let's get some color to our page. You can add color to change your background, change your text color, change your link color, and change your vlink color (vlink is when you click on a link that's one color, then go back to the same page, the link will be another color letting you know you've already clicked that link). You can even add color to change one word.

Here is a nice place to find a color you will like and it automatically gives you the code for that color. For the examples here, we will be using white (#ffffff) as a background, black (#000000) as the text color, blue (#0066ff) as the link color and red (#ff0000) as the vlink color.

So, where does all of this go? It will go on the < BODY > line like below:

< BODY BACKGROUND="#ffffff" TEXT="000000" LINK="#0066ff" VLINK="#ff0000" >

Let's say that you want one word or one line to be a different color from the rest of the page....that is also easy to do. For this example I'm just going to use the red color from above. Say that I wanted to write: "I am working on a new homepage" and I wanted "homepage" to be a different color; this is what I would write:

"I am working on a new < font color="#ff0000" >homepage< /font >."

Any time you change a font, you must close it also, but whether it's font size or color, you only have to close it with < /font >.

Since I mentioned font size, we will go ahead and cover that also...this is very easy. Font size ranges from 1 to 7, with 1 being the smallest and 7 being the largest. I usually use 3 or 4 on a page for normal writing and 6 or 7 for a "welcome" at the top of pages. To use font size it would look like this:

< font size=7 > Welcome to my page! < /font >
< font size=3 > I am working on my brand new page and trying to learn the html to do it. < /font >

SO, now on our html page we can write the following to give us some color:

< HTML >
< HEAD >
< TITLE >My brand new homepage< /TITLE >
< /HEAD >
< BODY BACKGROUND="#ffffff" TEXT="#000000" LINK="#0066ff" VLINK="#ff0000" >
< font size=7 >Welcome to my page! < /font >
< P >
< font size=3 >
Working on my < font color="#ff0000" >brand new page< /font > and trying to learn the html to do it.
< /font >
< /BODY >
< /HTML >

You will notice I put in a < P > up there? In regular typing, you just hit the enter or return button to skip a paragraph, but in html that doesn't work so to skip a line, you must put in < P > for a new paragraph. You may also want to go to the next line but not a new paragraph and you use this symbol < br > to do that (and you do not have to close the < br > tag). Just remember that < P > means "paragraph" and < br > means "break".

If you click here, you will see an example of what those colors and font sizes look like on our page. If you click the link to "back home" and then hit your back button to go back to our example page, you will see the link color is now red instead of blue.

And now we have some color to our pages! Now, let's add some images and pictures to the page! Let's move on to lesson 3.

Back Home