Fromthepen.com: Online Web Site Tutorials

Basic Exercises
· Introduction
· ex. 1 - Make a page
· ex. 2 - Head & Body
· ex. 3 - Attributes
· ex. 4 - Text
· ex. 5 - Colors
· ex. 6 - Hyperlinks
· ex. 7 - Anchors
· ex. 8 - Graphics

Join our mailing list to receive tips and tricks.

HTML TUTORIALS: Ex. 5 - Fun With Colors

EXERCISE 5: ADDING COLOR TO OUR PAGES :

OK. You've made it this far, but I know that you are anxious to add some life to the pages using colors so I'll jump right in.

SECTION A:COLOR THEORY:

Ex. 5 Figure 1: Color Theory / Color Wheel

Color is displayed on your monitor using 3 primary colors: RED, BLUE, AND GREEN. The monitor uses dots called pixels to display color. Each pixel gets assigned a color. It's hard to believe that all the magnificant images that we see on the computer monitor or on T.V. are made up of combinations of only 3 colors.

Combining these 3 primary colors gives us a massive collection of colors to choose from(16.7 million). Try to imagine that the 3 circles in the diagram are being moved over each other and where they overlap, it magically shows you what new colors would be produced.

By changing the intensity of each primary color, you can create any color you want to. What do you mean by intensity, you ask? Well, your web browser and graphics programs display colors using a scale from 0 to 255. 0 means "lack of color". 255 means "full intensity of color.".

Red is red, because the intensity of red is at its highest possible intensity. The same goes for green and blue.

SECTION B:Color Values:

Ex. 5 Figure 2: Color Values

Each color gets represented in a browser or graphics program with a triplet of digits. This triplet is known as the RGB triplet. In other words, to give a value for a color, you need to specify 3 seperate values for each of the 3 primary colors (RGB). As shown in figure 2, you list the values for red first, green second, and blue last. For example, the representation for blue is (0,0,255).

"This still doesn't make sense!" Are you saying this right now? I bet you are. I understand. The first time I read up on this stuff, I was confused too. You may be asking, "Well, does all the information that you've given me so far mean that I could possible change the color of something by typing ?" The answer to this would be NO!!!! You'll need to learn yet one more concept about color. That concept is called the Hexidecimal System.

SECTION C:Color Values To A Browser:

Ex. 5 Figure 3: Hexidecimal Values

Broswers need color codes to be written in the following format:
color="_ _ _ _ _ _". In other words, each color only gets 2 "spots" to represent it's color value. Well, this is a problem now isn't it!!!!!!

Before, I stated that color values ranged from 0 to 255, but we all know that 255 is 3 digits so we must make adjustments for the browser in order to display colors correctly.

The reason that we must make adjustments for the browser is that the browser used a different system to represent colors, unlike the decimal system(10 digits) that we are used to.

Our decimal system used numbers from 0 through 9. However, the browser uses a system called the hexidecimal system(16 digits). This system has 16 values instead of 10 like the decimal system. It goes from 0 through 9, then A through F. So hexidecimal numbers are "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f".

Question: Why is white, white? White has values for red, green, and blue that are 255. If you look at Figure 3, you would see that the hexidecimal equivalent would be ff, ff, and ff.

Therefore, if we wanted to change some text to white, we would type

SECTION D:Websafe Colors:

Just when you thought you have mastered color with HTML, you hear someone mention that you should use "websafe colors!" What in the world are those? Well, although we can create 16.7 million colors from mixing the intensity levels of red, green, and blue, some monitors just are not up to the task. They may only be able to display colors in the hundreds or thousands.

If you use a color that is outside of this "colorsafe range", the monitor will have to use other colors that it can display to try to match your colors. This process is called dithering and can make your page less appealing that you wanted it to.

So, there is a collection of colors that you can use (216 colors to be exact), called the websafe palette of colors that will display properly on all monitors.

"OK, so there are color names, and websafe colors that I can use. Where can I find them?" I WILL ANSWER YOUR PRAYERS BY PROVIDING YOU WITH MY HANDY COLOR CHART.

Underneath the text box below is a link that will pop up a color swatches window. It displays color swatches that you can move your mouse over. When you do, the background color of the page will change to the color your mouse is over and it will display the value of that color in the field below the colors.

Therefore, you will have the ability now to use 16 colors names, and 216 websafe color codes anytime you want to. If you see a color you like, take note of the code and use it later whenever you want. You'll use the popup to do the exercise below.

Next, we will type in the coding below to get practice applying color values on this page. Please have fun choosing as many different color combinations as you want.



<html>
<head>
<title> Fun With Colors </title>
</head>
<body bgcolor="ffcc33" text="blue"> This text and all the rest of the text on the page should be blue due to the fact that we set the text attribute of the body tag to "blue". The only way to make text a different color when using the text attribute of the body tag is to use a font tag with a color attribute around the words you want to be different.

 
This text will be orange because I used a font tag with "ff6600" as the color attribute value around it.

 
Have fun with this page. Add some headings, lists, horizontal rules, etc. </body>
</html>

WOW! NOW YOUR HAVING FUN, RIGHT? If colors don't get you excited to learn HTML, I'm afraid I don't know what will. Color and color theory are rough to learn at first, but once you grasp the basics, you will be able to better understand the graphics programs that you will use in the future, like Photoshop.

ADDITIONAL ASSIGNMENT:

I'd like for you to do the following steps:

Add a size 1 heading that says "Color Fun" to the coding you typed above.
Give the heading a color attribute of your choice, look at the page you create, and tell me why it doesnt work.
After you're done cursing, remove the color attribute from the heading 1 tag. Why? Because some tags don't accept color attributes. You will need to add a font tag after your heading tags like so: <h1>Color Fun</h1>

In the next exercise you will learn about hyperlinks.

END OF EX. 5 - FUN WITH COLORS

<-- Back to Exercise 4: Tag Attributes | Forward to Exercise 6: Hyperlinks-->

Home | HTML Tutorials | Color Charts | Practice Area