|
|
Open your page1.html file in Notepad. Save it as page3.html. Now open it in your Browser, to watch the changes as you change your code during the lesson. | |||||||||||||||||||||||||||||||||||||||||||||||
Something really cool
|
The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are...
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000FF" VLINK="663399" ALINK="FF0000">
I am using BGCOLOR="#ffffdd" to get this shade of pale yellow background.
| Text is black - 000000 Links are blue - 0000FF Visited link is purple - 663399 Active link is red - FF0000 |
You can change these defaults for the entire document in the <BODY> tag.
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="pink" ALINK="lightgreen">
Something really cool
</BODY>
|
Something really cool I know that we have not mentioned how to make links, so that information is not shown above (why muddy the water?) This is simply to show you how to make the color changes when you do learn how to make links. You can see that the background is now black and the text is now yellow. Links are now red Visited links are now pink And active links are light green.
|
You can specify a background image instead.
<BODY BACKGROUND="swirlies.gif">
Something really cool
</BODY>
|
It's probably pretty obvious that the image is tiled. If you use a long skinny image you can get an effect like this...
<BODY BACKGROUND="bluebar.gif">
Something really cool
</BODY>
|
(It's actually 800x2, but I have compressed it here to 530x2 so it will fit on everyones screen)
You may agree that this portrait of Sprite the cat is not a good choice for a background!
|
Extra stuff you may like to know
There is a whole art scene in designing backgrounds that tile correctly.Joe Burns at htmlgoodies has a page on this topic, and links to many backgrounds you can try.
The background used for the htmlgoodies page is copyright - do not collect it!
Personally I prefer sites that use colour instead of a gif image. They load more quickly.
"Hex-Dec" and Color Basics
Computer colour screens have three settings, 256 colours, (High Color) 16 bit and (True Color) 32 bit.In a web browser, you have at your disposal 256 system colors in each of Red, Green and Blue, to color text and backgrounds. Each color is identified by its Red- Green- Blue (RGB) values, three numbers that range from 0 to 255, each of which represents the intensity of the Red, Green, or Blue component of the desired color. Maximum values of all three (R=255, G=255, B=255) produce the color white and minimal values (R=0, G=0, B=0) produce black. All other colors are represented by different of RGB triplets.
Here is the fun part. Rather than identifying a color as something like "102,153,255" each number is converted from base 10 (normal everyday numbers, digits from 0,1,2,3,4,5,6,7,8,9) representation to hexadecimal, base 16 (digits from 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Why? Hexadecimal is more easily and more efficiently understood by computers. So for the color example above, we would write in hexadecimal as this colour "6699FF". In this example, "66" is the Red value, "99" the Green, and "FF" the Blue component.
Here are some hexadecimal examples of different colors. Note - these shades do not have names, maybe because the codes are 'easy to remember':
| Color | Hex Code | Color | Hex Code | |
|---|---|---|---|---|
| xx oo xx | FFCCCC | 33FF66 | ||
| xx oo xx | CCFFCC | xx oo xx | 9999FF | |
| xx oo xx | CCCCFF | xx oo xx | 9900FF | |
| xx oo xx | CCCCCC | xx oo xx | FFFF00 | |
| xx oo xx | CC66CC | xx oo xx | 999999 | |
| xx oo xx | 666666 | xx oo xx | 000000 | |
|
Notice that these codes use pairs of only six digits - 0, 3, 6, 9, c and f. These are fun to play with. I have made a chart, called hexbcr. In each set of six rows, Red changes down each block, Green changes each column and Blue changes left to right in each row. Just one of the six ways of arranging the 216 possible triplets Now, don't panic about having do a bunch of numerical conversions! There are many tools that will let you experiment. One color tool I like is Hex Tester, which asks for hex numbers, and then changes the background accordingly. But better yet, many browsers support standard shorthands for the 140 Colors described in the previous lesson:
| ||||
Solid Color Backgrounds
We will have another look at changing the background color.- Open the page3.html file in your text editor.
- Find the <body> tag and change it to:
<body bgcolor=#000000>
- Save and Load your HTML file in your web browser
<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX ALINK=#XXXXXX>where the XXXXXX values will determine:
- BGCOLOR = the color of the background (default is grey)
- TEXT = the color of normal body text (default is black)
- LINK = the color of an item that is a hypertext link (default is blue)
- VLINK = the color of a hypertext item recently visited (default is purple)
- ALINK = the color of a hypertext item currently visited (default is red)
You can now add some of these other color values by changing the
tag to read:<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FFCCCC >
| This will provide a black background, pale yellow text, light aqua blue hypertext, and pink hypertext to visited links, and VLINK will default to the usual #FF0000 - red |
NOTE: the order of the items in the <BODY> tag does not matterYou can now modify the <BODY> tags in all of your HTML files (fast and easy to do by copying and pasting the above example for the new <body> tag).
As the ALINK was not mentioned it will default to the usual #FF0000 - red
|