Adding Images & Color

1) For this lesson, we are going to go back to your zip disk. There, I would like you to create a new folder underneath the "mit220" folder called "images".

2) For each of the three favourite websites you have chosen for your home page, collect a piece of artwork (logo, image, etc.) that you can add to the page.

3) Save them all into the sub-folder called "images"

4) Open up your index.htm page in SimpleText and insert each of the images into your html code.

5) Now, link them all. To link an image, you simply put the <a href> code around the <img src> code. It will look something like this

:<a href="http://instruct.uwo.ca/mit/220">

Adding color:

You can change the background color, the text color, and the link colors by changing the attributes to the <body> tag. So, it for this page the code looks like:

text is for the text color

bgcolor is the background color

link is for the underlined link, or the border around an image that is linked

alink is the active link. The color of the link while the mouse button is pressed.

vlink is the visited link. The color of that tells your viewer they have already visited this link.These are called hexidecimal values (or hex = base 16). Each color is represented as three pairs of hex digits. One pair for the red, one for the green, one for the blue. Hex ranges from 0 to F. 0-9 + A-F. All web color is based on RGB, or combinations of the three primary colors, red, green and blue.

We'll talk more about color in the Photoshop section of the site.

Picking colors:

Great, so you can add color, but how do you know which ones to pick? There is a complete listing of web safe colors in the inside front cover of your textbook.You can also check out a wonderful resource from VisiBone that will allow you to pick a palatte of colors. As you pick a color, it will appear in a swatch, along with information such as the hexidecimal values for that color. You can find this tool at:

http://www.visibone.com/colorlab