HTML 4-Adding color and graphics
Objectives
1. Add a background color to your page.
2. Add two graphic elements to your page.
3. Use the <IMG SRC...> and <BODY BGCOLOR...> tags.
Instructions
So far you have a pretty respectable page, but it’s pretty boring (even you have to admit this). Lets add some color and some graphics!
The default colors are already build into each page. They are gray background, black text, blue links, and purple visited links (that is links that you have visited within the last 30 days). You can change those defaults, though, within the <BODY> tag. All you have to do is tell the browser what color you want those items to be. To do this, add the following tags within the BODY tag.
BGCOLOR="color" Background color
TEXT="color" Text color
LINK="color" Link color
VLINK="color" Visited link color
ALINK="color" Active link color
Before we go on, a link is a bit of text that you can click on to go to another page. An active link belongs to a page you have open (most browsers let you have more than one page open). A visited link is a link you have visited within the last 30 days.
The color is the tricky part. Old color tags use hexadecimal color codes. That is a series of 6 numbers and/or letters that represent a color. The hex code for BLACK is "000000" (six zeroes). The hex code for WHITE is "FFFFFF". The rest of the colors fall in between.
So how do you figure THAT one out?
Well, you can get a program to do that for you, but it won’t help if you’re on a black and white (monochrome) machine. So, I’ll give you some sample colors you can pick from for your background. Because you have to look at your page on a monochrome machine (some of you) I’ve chosen light colors.
1. Open your homepage and find the <BODY> tag. It’s at the top. You are going to add, behind the word BODY (within the <>) the tag BGCOLOR=" ... " so it looks like this <BODY BGCOLOR-" ... ">
2. In place of the ... add one of the following hex values.
Light yellow FEFFBA
Pale pink FFC8D5
Light blue C1BAFF
Pale green C5FFC3
The cool thing is that HTML 4.0 allows color NAMES as well as Hex Codes. Hex codes give you more control over the shade and hue of a color, but for down and dirty webpages with general colors, just use the color name. Below is a list of all the color names that you can use.
The syntax for adding color is:
<body bgcolor="aqua" text="red" link="bluegreen">
You can do some pretty nifty things with the font tag. Click here to go to a page that tells you all about that.
Add Graphics
You are going to add two pictures to your page. One of you (you can bring it in to scan) and one of a simple graphic of your choice from a collection of stock graphics.
You can use only one of two kinds of graphics on your webpage. The reason for this is because web pages have to be universal. That means no matter what kind of computer you are using, you’ll be able to see the webpage the way it’s supposed to look. The two universal graphic "kinds" (or formats) are GIF (graphic interlaced format) and JPEG. GIFs are smaller and usually used on drawings where there is need for "shading". JPEGs are larger and work well for shaded graphics like photographs. We’lI use GIFs for small graphics. For your photo, we’ll use JPEGs taken from a digital camera.
Not only must you have the name right, but you must tell the browser where to find the image. We are going to store all of our images in a file named studentimages. That means you have to provide the name of the image and the directory your image will be in. Use this directory pathname for all of your graphics you add to your page. Example: to place my picture into my document I would type <IMG SRC="studentimages/tory.jpg">.
1. Open your page in the text program.
2. We’re going to replace one of your horizontal lines with a horizontal line graphic. Find your first <HR> tag. Delete that tag.
3. You are going to use the image tag. It works like this:
<IMG SRC="studentimages/nameoffile"> NOTE THE IMAGE TAG DOES NOT HAVE A SLASH TAG...cool, huh?
The name of the file must be exact with no spaces, the proper extension (.gif for GIFs and .jpg for JPEGs) and correct case (I always use small letters).
4. In place of the <HR> you just removed type <IMG SRC="studentimages/">. You’ll add the name of the file after studentimages/ later.
5. Choose a graphic from here.
6. Type the name of the graphic exactly as shown on the graphics page. This graphic is NOT in your file, so you won’t be able to preview it. It will show up on your final page, though. Example: If I want to add the file "gopher.gif" to my page I would type <IMG SRC="studentimages/gopher.gif"> on my page.
Add your image
I will scan your picture and save it as your name with the .jpg extension. So for my picture, it would be toryk.jpg. For a student named Fred Schmed, it would be freds.jpg for Sally Smathers it would be sallys.jpg Get the idea? Note...all small letters, NO spaces.
1. You will put your image below "Hi! My name is...". Click below that section (after all of the tags and slash tags) and return a few times to insert a blank line or two.
2. We want to center the picture to make it look nicer to use the center tag/slash tag set around the image tag.
3. Now, using the name of your jpeg, use the IMG SRC tag to insert your picture. For me, I would type:
<CENTER><IMG SRC="studentimages/toryk.jpg"><
4. Add a caption to your picture.
a. Insert a line break tag <BR>
b. Use the <ITALICS> tag set to italicize the caption.
c. Type something like "Aren’t I cute??"
d. End with the italics slash tag, the center slash tag, and a break <BR> tag.
5. Save, check it out in your browser! You won’t see the images, but you’ll see boxes that represent where the images will be on the final product.
Questions
1. What are the two kinds of graphics?
2. What do you use to represent colors in HTML?
3. I want a light blue background, what color would I use?
4. I am going to add a gif to my page of Mickey Mouse. The name of the picture is mickey.gif. Write a tag for that.
5. What tag do you use to make something italics?