Teach Yourself Web Publishing with HTML 4 in 21 Days

Chapter 7: Using Images, Color and Backgrounds




This chapter introduces the concept of putting pictures, called images, in your web documents. The objectives important to this chapter are:

  • image types
  • image placement on pages
  • using images as links
  • using images not on your site
  • what to do for the image impaired
  • setting the color of fonts and backgrounds
  • using images as backgrounds

Web documents would be pretty boring if they couldn't use pictures. Pictures on a web page are called images. They are stored as separate files and referenced in the HTML code. Ms. Lemay begins by telling us that we can take two approaches to putting images in our pages:

  • inline images - your HTML code specifies that the image is to be read (and displayed) by the browser along with the rest of the page
  • external images - with these, the image is not read (or displayed) by the browser until the user clicks on a link
The usual way to plan a page is to place the image inline. Setting a link was more common when the average browser didn't have the capability to show one, and modem speeds were slower.

It should not be a surprise (at least if you read the book) that the tag for images is <img>. This tag originally did not require a closing tag, but XHTML requires a closure, so it will use the self-closing approach we have seen before: <img />. The image tag requires some option values, else it does nothing. The basic syntax for the tag is:

<img SRC="filename.gif" />

This notation would be used for a file in your current directory (same as the web page) that is stored in the gif format. GIF files (pronounced "Jif", like the peanut butter) are one of several type of files that browsers can read and display. The browser recognizes the file type by its extension:
  • GIF - .gif files, format invented by CompuServe
  • JPEG - .jpg or .jpeg extension, another compressed format
  • XBM - .xbm extension (surprise, surprise)
  • TIFF - .tif or .tiff, sometimes compressed
  • BMP - .bmp, a bitmap file, not compressed; previously used on the web, no longer supported by modern browsers
  • PICT - .pict, rarely used
  • PNG - .png, a compressed format meant to replace .gif
Each of these file types can be read by some browsers, but all popular browsers can read the GIF and JPEG files. They are popular because they are compressed file types and take less time to transmit across the net. When possible, use these types. However, do not assume that you can affect the format a file is saved in just by renaming it with the extension you like. If the file you want to use is not saved in a usable format, find another file, or find a program to read it and translate it to the desired format.

Placing an image tag in your document is easy. Controlling where the image goes is a little harder. For instance, putting it in a paragraph by itself has the obvious effect. Putting it in a line of text, however, can be unpredictable unless you use more optional attributes to control the appearance.

Putting the image in a Heading format is the easiest way to control alignment. This code:

<H1 ALIGN=CENTER><IMG SRC="filename.gif" /></H1>

presents the referenced image in the center of the current line. The fact that I used Heading 1 format is not relevant: using any of the other five would result in the same appearance.

You can align the image, to a degree, with a line of text that it appears in. This is done with the four options shown on page 180. This is not as interesting as the next idea, placing the image in text that wraps around it. Observe the example on pages 182 and 183. The code

<P><img ALIGN="LEFT" SRC="tulipsmall.gif" />

causes the image to align with the left margin. The text that follows forms around the image's right side. At the end of the first paragraph (on page 185), the code
<br CLEAR="LEFT" />

causes the next line of text to continue on the first clear line after the image. Combining these tags, you can wrap or not, as desired.

When a browser does not support these tag options, the results are a bit different. Luckily, most people are using a browser that supports them.

An image can also be a link, if you simply build an anchor point around it containing an HREF value. This is how you put buttons and other images on a page that can be clicked to jump somewhere. The format is just:

<a HREF="jumppage.htm"><IMG SRC="whatever.gif" /></A>
An image that is a link will have a blue border around it by default. You can suppress the border with the option border="0". I usually do this, while Laura does not like it. Personal choice.

For those images that are too good to be missed, yet too large to put in the page (without having your readers punch "Stop" in despair) you can set up an external image. Set up a link as above, but use the image file in place of the .htm file. Also, put some text about what a wonderful HUGE file the user will see in place of the IMG tag. (Or, use a smaller version of it, called a thumbnail.)

<a HREF="BigHugeHorribleFile.gif">Click for a very large file</a>

The browser will then load the file specified, showing it all by itself.

For those browsers still incapable of displaying any image files, you can place a note to be displayed instead of the image in the IMG tag, using the ALT option. The syntax is simply: <img src="file.gif" ALT="some silly picture here" / >. A serious reason to provide alternate text is that some readers cannot see pictures. I have done some work recently with software meant for visually impaired users. It is an awakening experience to realize that not everyone can do everything the web assumes they can do.

It is also possible to specify in the IMG tag what the height and width of the image are supposed to be, as measured in pixels. This is good, since it speeds up loading images in browsers that support HTML 3.2 or later, and can help control the space an image uses. You can actually cause an image to be displayed in more or less space than normal this way. Don't be fooled into thinking that this will shrink the size of the image file transmitted. I have a friend who put up photos of his son on his web site. He finds the size of the images in pixels, then tells the image tag to display the file using a quarter of the height and of the width. He thinks he is doing his reader a favor. His home page takes FOREVER to load! If you want to change the size of an image, use a real art program. Adobe Photoshop and JASC Paint Shop Pro are good choices. (Update for late 2005: Paint Shop Pro is now owned and published by Corel.)

Color! Setting a background color is easy. Most of you are doing it already. To make a solid background for your page, modify the BODY tag like this:

<BODY BGCOLOR="#112233">

The hard part is the color value. Color monitors make color by using different combinations of Red, Green and Blue. Each of the double-digits in the example above (11, 22, 33) represent a value for the Red, Green, or Blue element. Okay so far? Well, the range of numbers for each value is from 00 (double zero) to FF (double fox). Double what? It's in hexadecimal notation, base sixteen. No, you don't really have understand it, just know what a hex triplet is (a very unlucky set and a half of twins?) and look at the long list of them starting on page 1129. (What a book: you actually use the appendix.) The list gives the hex values for lots of colors that also have defined names. Often, you can use the name instead of the hex triplet, but be aware that some browsers will not understand the name, while they will understand the hex code. There are many more colors that do not have names. In fact, using the hex numbering system, there are over 16 million possible colors.

Page 197 shows four other color entities that can be set in the BODY tag:

  • text - the color of text in the body that you have not otherwise colored; default is black
  • link - the color of text in an anchor that you have not visited; default is blue
  • vlink - the color of text in a link that you have visited; default is often purple
  • alink - the color of text in a link at the moment you click it; default is red (a momentary pleasure, at best)

Another way to use color is called spot color. It means to take effect for a small area, like a section of text. For instance, if your browser supports it, this text is red. The code looks like this:

<FONT COLOR="#FF0000">this text is red.</FONT>
Setting a file to be used as the background of a page is easier than setting a solid color. For instance, this page uses a file to display the purple/blue border on the left and solid white elsewhere. The code is:
<BODY BACKGROUND="purpwhit.jpg">

You need to know that the actual JPG image is tiled, repeated for the length and breadth of the document. This means you should plan your backgrounds, and make sure readers can SEE the text you put on top of them.