Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

How to use HTML 3.2

Chapter 9 -- Advanced Graphics Techniques

Chapter 9

Advanced Graphics Techniques

CONTENTS



Now that you've got a handle on the basic concepts behind using graphics with HTML, you're ready to tackle some of the more advanced techniques. In this chapter, you'll learn some very cool tricks for making the most out of images on the Web.

Among the secrets covered are using background images, taking advantage of transparency with GIF files, and how to used interlaced images to make your Web pages appear to load faster.

In this chapter, you'll also learn about the new figure element, which adds a whole range of new options for using and formatting images in HTML.

How to Change Colors in HTML

Up until now, your HTML documents have been limited to pretty basic colors-black text and a white or gray background, depending on the Web browser being used. As an HTML author you have the ability to change the colors of the text and background of your document when you feel it's necessary.

Tip Sheet

  1. Colors in HTML are designated by their RGB values. RGB is a measurement of the levels of red, green, and blue in a particular color. The value of each can range from 0 to 255, yielding a total of 16.7 million different combinations. For example, true red has a value of 255 in its red channel and values of 0 in both its blue and green channels. Black has values of 0 for all three channels, and white has values of 255 for all of its RGB channels.

    Figure 9.2 :

  2. To make things even more confusing, HTML requires you to specify the RGB values in hexadecimal notation, which will be familiar to programmers but difficult for everyone else. Fortunately, there are a number of free color calculation programs available on the Internet that will compute the necessary values for you. One of the best is HTML Color Reference, which is available at ftp://ftp.winternet.com/users/faz/HCR/hcrv2all.zip.

    Figure 9.3 :

  3. Remember the <BODY> tag from the beginning of your HTML document? Background image information is stored inside the <BODY> tag. In Notepad, place the cursor inside the tag, after the word BODY.

    Figure 9.4 :

  4. To specify a background color for your HTML document, type BGCOLOR=# followed by the RGB value of the color in hexadecimal notation. For example, to set the background color to blue, you would type BGCOLOR=#0000ff. That sets the red and green channels to 0 and the blue channel to 255 (ff is hexadecimal for 255).

    Figure 9.5 :

  5. Setting your background to a dark color can cause problems with readability, because by default text is displayed in black. Fortunately, you can also change the text color. To specify a particular color for normal text in your HTML document, place the cursor inside the <BODY> tag and type TEXT=#, followed by an RGB value. For example, to specify a text color of white (to complement a dark background color, such as blue), you would type TEXT=#ffffff.

    Figure 9.6 :

  6. Web browsers also use colors for hyperlink text. Hypertext link text can actually be one of two colors. Typically, unvisited hyperlinks are blue and hyperlinks that you've already visited are purple. Again, using an RGB value, you can set these colors to your own specification. To change the normal hyperlink color, insert the cursor inside the <BODY> tag and type LINK=#, followed by the RGB values for the color.

    Figure 9.7 :

  7. To set the color for hyperlinks that you have already visited, type VLINK=#, followed by the RGB values for the color you have chosen.

    Figure 9.8 :

  8. Finally, you can set the color for active links. A link is only briefly displayed in its active state when the user clicks on the hyperlink text. The active color is essentially a way of giving momentary feedback to the user to let them know that they have selected a link. To change the active link text color, type ALINK=# followed by the appropriate RGB values.

    Figure 9.9 :

How to Create an Interlaced GIF File

If your HTML document contains a lot of images, it will take a while to load in some Web browsers, especially if the reader has a slow Internet connection. If your images are especially large, it will take a long time for them to display.

One way to get around this problem is to use interlaced GIF images. Interlaced images are loaded by Web browsers so that they appear to slowly come into focus. The result is that the reader initially sees a low resolution version of the final image, and will at least have a general idea of what it looks like before it is finished loading. Used properly, this technique will make your HTML documents appear to load faster.

Tip Sheet

  1. Creating an interlaced image is actually quite simple. The first step is to open your image using an editor that supports GIF files, such as Paint Shop Pro.

    Figure 9.11 :

  2. To make sure the image is saved as an interlaced image, first choose Save As from the File menu.

    Figure 9.12 :

  3. Set the File Type to GIF - CompuServe and the File Sub-Format to Version 89a - Interlaced.

    Figure 9.13 :

  4. Click on the OK button to save the image as an interlaced GIF file.

    Figure 9.14 :

  5. If you're using an image editor other than Paint Shop Pro, check the documentation for exact instructions on how to set the image options to be interlaced.

How to Create a Background Image in HTML

In your travels on the World Wide Web, you've probably run across pages that use a background image, which looks similar to a watermark. Instead of a solid background, an image is tiled repeatedly in the background of the Web browser, like the Wallpaper on your Windows desktop.

HTML allows you to specify an image as background wallpaper for your Web page. In this section, you will learn how.

Tip Sheet

  1. The first thing to do is to select an image to use as your background wallpaper. It's a good idea to choose a very low-contrast image with few colors, since the text of your page will appear on top of the image. Corporate logos or simple repeating patterns make excellent choices for background wallpaper.

    Figure 9.16:

  2. Remember the <BODY> tag from the beginning of your HTML document? Background image information is stored inside the <BODY> tag. In Notepad, place the cursor inside the tag, after the word BODY.

    Figure 9.17:

  3. Type BACKGROUND=" followed by the file name of your image and a closing quotation mark. For example, to specify a file named backlogo.gif as your background image, you would type BACKGROUND="backlogo.gif".

    Figure 9.18 :

  4. Preview your HTML document with the background image to make sure that the text is still readable.
  5. If it's too hard to read, you'll need to lower the contrast of your graphic using image editing software, or choose another graphic.
  6. To lower the contrast of your image, open it in Paint Shop Pro and click on the Colors menu. Then choose Adjust, followed by Brightness/ Contrast from the drop-down menu.

    Figure 9.19:

  7. In the Brightness/Contrast dialog, you can lower the contrast level by clicking on the down arrow next to the box marked Contrast or by typing in a negative percentage value. Click on the OK button when you're finished.

    Figure 9.20:

How to Create a Transparent Image in HTML

One of the coolest graphical effects in use on the Web today is transparency. One of the enhancements to the GIF file format was the addition of support for a transparent color. Simply put, you can specify one color in your GIF image to be invisible.

As long as the Web browser supports this capability, the parts of a GIF image that contain the transparent color won't be rendered-the background portion of your Web page will show through instead. This functionality is ideal for pages that use background wallpaper, as well as for nonrectangular images such as corporate logos.

Tip Sheet

  1. Open your GIF file in an image editing program that supports transparency, such as Paint Shop Pro.

    Figure 9.22:

  2. Choose a color to be the transparent color. All of the pixels in your image with this color will not be displayed when viewed in a Web browser. In Paint Shop Pro, it's easiest to set this color to be the background color as well.

    Figure 9.23:

  3. Using the paint tools, fill the portions of the image that you want to be invisible with the transparent color. Be sure to fill all the areas that need to be transparent with this color, including spaces between letters.

    Figure 9.24:

  4. Make sure that the transparent color is not used elsewhere in the image. Any pixel with this color will become invisible when viewed with a Web browser.
  5. Choose Save As from the File menu.

    Figure 9.25:

  6. Click on the Options button in the Save As dialog box. In the GIF Transparency Options dialog, choose Set the Transparency Value to the Background Color. If for some reason you did not use the background color as your transparent color, you'll need to set the Transparency value to s specific color index (see the Paint Shop Pro documentation for details). Then save the document.

    Figure 9.26:

  7. If you're using an image editing program other than Paint Shop Pro, don't worry-the same steps for setting the transparent color usually apply. Refer to your program documentation for the exact details.