INCORPORATING IMAGES AND USING COLOR

Images and graphics

Incorporating images or photographs into your web site is really very simple. You just need images that are stored in the correct file format and that fit your pages reasonably well. In the next module you will learn about graphic file formats and file sizes, but for now lets just deal with how you embed pictures into the HTML code.

Picture requirements for web pages. Across all the different computer brands, there are many different graphic file formats. These are different ways that picture data files are encoded and stored. Macintosh computers have several formats and Windows/DOS computers use different ones, all of which creates a nightmare in compatibility problems. There are two graphic file formats which are pretty much universal across all computer platforms and consequently on the World Wide Web. These are the GIF (Graphics Interchange Format) and the JPEG (Joint Photographic Experts) format. Picture data files stored in either of these formats can be included in your web pages. Actually these are what is known as compression formats because the data for the image is compressed or squeezed down to take up less space in computer memory. In the next module you will learn how to store images in either of these formats, but for our purposes here, let's assume that you have some graphic images that are in on of these formats. The way you can tell is by the suffix that is appended to the name of the file, either .GIF or .JPEG.

Obtaining images and copyright. In-line images can be obtained from many sources and saved to your computer. This can easily be done by placing the browser cursor over the desired image and holding the mouse button down. A small menu will appear and you select "Save this image". When you do this, you will be prompted as to where you wish to save it and under what file name. You should be very circumspect in doing this unless you know that the images are not copyrighted (as most are) because they belong to someone else and permission should be obtained for their use. Fortunately most government and public service sites are in the public domain and the images displayed there may be used freely. These sites include sites like the National Park Service, Smithsonian, NASA etc.. Consult indexes of URLs for possible good sites with public domain images.

The image tag in HTML

To insert an image into your web page you must do two things. First, you need to specify what file to display, using HTML. Second, you must provide the image file along with the HTML document that describes the page. You see, the picture is never really made part of your page, you simply tell the browser to display a particular image file at a specified location on the page. Remember, the image files are also part of the entire web site, they are not part of the page.

The <IMG> tag. HTML tags for including images are fairly simple. The tag is <IMG> with an attribute of SRC which identifies the graphic file. The complete image tag is <IMG SRC="filename">. To use this tag, you insert it at the appropriate point in the HTML text that you want the picture to appear. You must specify the exact filename as it appears on your computer or storage disk and place it within quotation marks. A complete image tag for a picture of Mount Everest might look like <IMG SRC="Everest.jpeg">, that is assuming that the name of the file is Everest.jpeg. It could also be Everest.gif if it was saved as a GIF file.

<IMG> tag attributes. There are also a number of attributes to the <IMG> tag and the most important of them is the align attribute. This specifies how to align the picture in relation to the surrounding text. These attributes are shown below as well as a few others which are very useful.

IMAGE ALIGNMENT ATTRIBUTES

ATTRIBUTES

 Left Margins the image on the left side of page.
 Center Centers the image.
 Right Margins the image on the right side of page.
 Top Places text at the topedge of the image.
 Middle Places text at about the middle of the image.
 Bottom Places text at the bottom corner of the image.

EXAMPLES

<IMG align=left Src="House.gif"> Puts the image of the house on the left side of the page.
<IMG align=top Src="House.gif"> Puts the text at the top corner of the house image.

Later in this module you will learn how to make your in-line images "hot spots" just like text. For now though, you can include images within you pages just about as easily as you can text material using the <IMG SRC> tag in HTML.

COLOR AND THE HEXADECIMAL THING

Now that you have gotten comfortable with the basic colors available and you have probably thought about more sophisticated colors, you might want to experiment with mixing some in-between colors. To do this you need to understand the concept of hexadecimal equivalents for color names.

Each color that can be displayed on the computer is really just a combination of red, green, and blue. Hexadecimal numbers are just a numerical way to describe that combination. A single color equivalent is made up of two red, two green, and two blue numbers and looks something like this, RRGGBB, or if we put in actual numbers, 2F4F2F.

What in the world is going on here?

Well actually in the hexadecimal system used by computers to store data, letters are used as well as numbers to extend the range of values. Don't worry about this, all you need to know is that sometimes a letter-number or letter-letter combination is a number also. In the example shown here, it means that this color which is a dark green is made up of 2F red, 4F green, and 2F blue. Relax, you will never have to interpret these numbers, but now you can recognize them. There are a couple of web sites that have done all of the work for you, so all you need to do is log-on and pick a color that you like. The site will give you the hexadecimal equivalent and you just put that into the appropriate tag attribute. These handy sites are:

http://www.hidaho.com/c3/

and

http://www.infi.net/wwwimages/colorindex.html

Backgrounds

One last thing related to the background tag is your ability to add images to it rather than just plain colors. To do this you need a small image that can be tiled, that is, it is repeated over and over again like the tiling on a kitchen floor. Not every image works well this way and usually more abstract images are better than well defined pictures, but it is worth some experimentation. The way that these tiled images can be included in your background employs the <BODY> tag. The tag, with the appropriate attribute is: <BODY background="the filename of the image.">. That's all there is to it, and your background will be tiled with the image of your choice (don't forget the .gif or .jpeg or .jpg file extension). There is a helpful web site that contains a large number of background textures free for your downloading. The URL is http://cpcug.org/user/jlacombe/backgrnds/johnback.html Now might be a good time to check this site out and add a background to your page.

Incorporating colors

Incorporating color and background patterns in your pages is much akin to graphics and can be accomplished using simple HTML code. You have probably noticed that color makes most web page come to life (and also that your pages were kind of, well, blah. In this section you will see how to spice up your pages and gain learner attention.

In the last section you became familiar with the concept of "attributes" which define certain characteristics of a tag. The align attribute, for instance specifies how an image should be aligned on a page or the <P align=center> indicates that the text following should be centered. There are many attributes to tags and some of the important ones are related to how colors should be used in a page. Up until now, we haven't looked at colors and that may seem strange, so here we go, better late than never.

Colors are very easy to specify if you are happy with any of sixteen standard colors. These are shown below.

SIXTEEN STANDARD COLORS IN HTML

Black White
Red Green
Blue Yellow
Cyan Magenta
Gray Lime
Maroon Navy
Olive Silver
Teal Purple

If, on the other hand, you want to refine your color choices, you can choose from a more extensive list of 216 colors and even mix your own palette from millions of colors. This is all much more complex and involves using hexadecimal equivalents for the colors, so we'll deal with that a bit later. For now, the basic sixteen colors will work just fine.

Color attributes

There are a number of HTML tags that use the color attribute and they are listed below. Most of the ones you will need are associated with the <BODY> tag because they specify how colors should be used throughout the document. These are included right up front with the body tag and cover everything in the entire page. Most of these tags are related to text, but one, the <BACKGROUND> tag (<BG> for short), sets the color of the page background.

COLOR ATTRIBUTES IN HTML

 BACKGROUND:    
   <BODY bgcolor="#RRGGBB">  
 TEXT:    
   <BODY text="#RRGGBB">  
 LINKS:    
 Unvisited Links  <BODY link="#RRGGBB">
   Activated Links  <BODY alink="#RRGGBB">
   Visited Links  <BODY vlink="#RRGGBB">
 EXAMPLE:
<BODY bgcolor=" #RRGGBB" text="#RRGGBB" link="#RRGGBB"  alink="#RRGGBB" vlink="#RRGGBB">

Try it out yourself

Now is a good time to return to your page and tinker with the color settings to make your page more colorful and attention gaining. Remember though, when you change any of the HTML code, you must re-save the document (as text or ASCII) before viewing it on your browser.