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.
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.
- Try to keep your background colors simple. The best colors
for backgrounds are pastel or soft colors. Bright colors are a
bad choice as a background, because the text will almost always
be difficult to read.
- With 16.7 million colors available for both the background
and text, there are over 280 trillion possible combinations.
Unfortunately, only a handful of those actually produce readable
text. Don't go overboard when changing your color settings-make
sure your document is easy to read and understand.
Figure 9.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 :
- 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 :
- 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 :
- 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 :
- 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 :
- 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 :
- 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 :
- 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 :
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.
- Be sure to specify the image HEIGHT and WIDTH attributes as
well. Although these attributes are optional, using them will
make your HTML document appear to load faster to readers with
slow Internet connections.
- JPEG images cannot be interlaced. This option is currently
limited to GIF files.
Figure 9.10 :
- 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 :
- To make sure the image is saved as an interlaced image, first
choose Save As from the File menu.
Figure 9.12 :
- Set the File Type to GIF - CompuServe and the File
Sub-Format to Version 89a - Interlaced.
Figure 9.13 :
- Click on the OK button to save the image as an interlaced
GIF file.
Figure 9.14 :
- 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.
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.
- The best images to use in the background are simple, small
images with muted colors, such as gray. Bright or high-contrast
images will make your HTML document hard to read.
- There are several free background tile images available at
various sites for your personal use. The Yahoo Internet Directory
has a list of sites that provide images. Go to http://www.yahoo.com/
Computers_ and_Internet/ Internet/World_Wide_Web/ Programming/
for the list. Always make sure you have rights to use the image
before you include it in your HTML document.
Figure 9.15 :
- 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:
- 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:
- 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 :
- Preview your HTML document with the background image to make
sure that the text is still readable.
- 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.
- 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:
- 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:
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.
- When choosing the transparent color, try to select a color
that is not already being used in the image. Remember that every
pixel with the transparent color will become invisible.
- Transparent images are most effective when used in combination
with tiled background images, which you learned about in the previous
section. You can create some impressive visual effects by using
them together.
Figure 9.21:
- Open your GIF file in an image editing program that supports
transparency, such as Paint Shop Pro.
Figure 9.22:
- 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:
- 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:
- 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.
- Choose Save As from the File menu.
Figure 9.25:
- 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:
- 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.
