Premier Website Solutions
Hosting, Design, and Domain Registration
|
HTML for beginners Are you ready for some color? If your index.html file isn't open in notepad, do that now, then add the new red text here.
<html> Save and view the page in your browser and see what you get. Right now we are playing with the "font" tag. Extra variables that are added to a tag are called attributes. You noticed that one font tag had the color attribute specifying a real color and the other one had giberish. That giberish is a hexadecimal color code. Hexawhat? Our number system goes from 1 to 10 and is called a decimal system and has 10 different possible values. Hexadecimal has 16 different possible values. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f If you are still confused about hexadecimal, don't worry. Pretty well all browsers understand most color names. The hexadecimal codes just give you much more control over the exact color. Let's add a color code attribute somewhere we haven't played with yet, in the body tag. Add the new red text here, then save and view your new page.
<html> Did you view your new page yet? I told you to. View it before reading further. . . . This time we changed the background color of the page, or the "bgcolor". Did you have trouble reading your page? The hexadecimal color code "000000" is black. Black backgrounds can look nice, but you can't use black text, unless it's for something you want partially hidden. To see what I mean by partially hidden, view your page again and put your mouse at the top left corner of the page. Hold down the left button and drag your mouse down the page. The color attributes for "bgcolor" work the same as the "font color". You can use this hexadecimal stuff, or just plain color names. Try some other "bgcolors" and find one you like. If you are curious about this hexadecimal stuff, I put some basic info below. Read it if you want, or just move on.
Hexadecimal, what is it? First, all hexadecimal codes contain 6 characters which can be anything from 0 to 9 or a to f. The 6 characters are actually 3 sets of 2 characters. All colors can be made from red, green, and blue. The first 2 characters say how much red you want, the next 2 say how much green, and the last 2 say how much blue. With those 3 pairs, the value "00" means you don't want any of that color, and the value "ff" means you want all of that color. If your monitors colors are right, and if you have a color monitor, the following examples should look like the colors they say they are.
What I am using here to show you the different colors is called a "table". You will learn about tables in a couple
more lessons. Tables contain cells, and I gave the cells different background colors so you can read each code.
The text should be the color being shown.
Since each color is represented by a pair of values, and the values can be anything from 0 to 9 or a to f, which is 16 possibilities for each value, that means each color has 256 (16x16) possible levels from none to full. With the 3 basic colors each having 256 possibilities, we get a total of 16,777,216 possible colors. If you want to see all the different colors, and their color codes, try out this little javascript popup color picker here. It was provided by netscape. You will see a main color box with sliders to adjust the color of that box. It has 3 tabs to give you 3 different ways to adjust colors and it gives you the color code of the selected color at the bottom. You will also see a small color box on the right which will sometimes all be the same color as the main box and sometimes half of it will have a slightly different shade. The left side is the color you have selected and the right side is the closest "web safe color". This little script does not work on some newer browsers but we will get this updated soon. I will go into more detail about colors, and "web safe colors" later on. For now, lets start making our page look even nicer by formatting it. |
|
Premier Website Solutions |
Tell a friend about this site.
 This website is designed and hosted by
Premier Website Solutions |
