retrieval
system without prior written permission of the publisher except in the
case of brief quotations embodied in critical articles and reviews. Making
copies of any part of this book for any purpose other than your own personal
use is a violation of United
States copyright laws. For information, address Que Corporation, 201 West
103rd Street, Indianapolis, IN 46290 or at support@mcp.com.
Notice: This material is excerpted from Special Edition Using HTML, 2nd Edition, ISBN: 0-7897-0758-6. This material has not yet been through the final proof reading stage that it will pass through before being published in printed form. Some errors may exist here that will be corrected before the book is published. This material is provided "as is" without any warranty of any kind.
by John Jung
By now, you know how to create an HTML
document that simply contains hypertext
links. Now you're going to learn about adding graphics to your home page
to add a little spice. Images allow you to liven up your home page with
more style and "eye candy." But you suffer certain intangible
costs by using them. Aside from the pros and cons debate, you'll also learn
about some of the more popular formats available to you.
Graphics
Should Be Used Graphics
are probably one of the most popular elements people put in their home
pages. But going to the trouble of adding graphics
to your home
page entails good points and bad points. You should consider the pros and
cons of putting graphics in an HTML document and decide for yourself. Chances
are, though, that you'll probably make some use of images in your home
page, but not too much. Using only a few images is generally a good approach,
but how much is too much? Look at the following list of reasons you should
and shouldn't use graphics, and decide for yourself just how much is too
much.
Pros:
Web
browsers store frequently used data, and if you use the same graphics,
they come up faster. The disk drive is much faster at getting information
than the network. Cons:
Graphics
take longer to download for each user than text does. This is true because
graphic files are almost always bigger than the typical home page. Also,
most graphics are compressed, and uncompressing them takes time. graphical
support for people logging
in through a modem. When you're choosing the correct image (or images) to use in your home page, you need to consider what they should contain. This chapter does not tell you what types of images you should and shouldn't have. It does, however, include some general guidelines to help you make sure that the images you want to use are good ones.
The first aspect of choosing an image for a page on your Web site is determining whether it's appropriate. You should look at the content of that particular HTML document and decide whether the image you want to use fits in. Is it appropriate to have a picture of a woman on the same page as your resume? If you're advertising one particular product, is it appropriate to have a competitor's logo on that same page? Use common sense when picking images.
A cropped image is one in which the unnecessary parts of the image have been removed. These parts aren't just hidden; they're completely deleted from the graphic. The resolution, how big the image is in terms of pixels, of the graphic is changed to fit the cropped image. This is useful in making sure that your entire image can be seen by as many people as possible. Cropping images also has the added advantage of reducing the file size. Figure 10.1 shows an uncropped image, and figure 10.2 shows the same image cropped.
If you want to use the NASA logo, some of the graphics
on this image aren't appropriate.
Cropped images not only make smaller files, but they help you focus the attention to something specific.
Pictures are just another form of expression and as a result can be copyrighted. You should use great care when using any image that is obviously from a commercial source. Pictures that generally fall into this category are images of models, actors and actresses, logos, cartoon characters, and distinctive images. Many people who own the copyrights to these images don't have a problem with your using them. Some copyright holders, particularly magazines, are much more sensitive to your use of their images, and may threaten you with a lawsuit. Others may get extremely angry and attempt to sue you and your Internet Service Provider (ISP) outright.
If you see an image you like, and it looks as though it's probably copyrighted, avoid using it. If you really want to use the image, try to contact the copyright holder of the picture. Some of them may let you use it free of charge, whereas others may ask for a payment. If going to this trouble seems like a lot of work just for picture, good. Many pictures out there belong to someone else, and asking for permission before using the images only makes sense.
The information presented about
A significant minority of people with Web pages put in pornographic
images in their home
pages. Don't. There are a lot of social and legal problems to using these
images. Perhaps the most insignificant problem you'll have with using pornographic
images is your personal inconvenience. Once someone interested in your
graphic sees it, your Web page will be widely propogated to his or her
friends. This will result in your ISP's Web server taking a heavy load,
and possibly the elimination of your account.
A very strong reason to avoid using pornographic
images is the social
consequences of them. Many people, both men and women, feel that these
images are harmful to society. They feel that some of the faults of society
can be traced directly to these images. Whether you agree with them or
not is not the point, they feel it's true. And should they find your Web
page with a pornographic image, they will complain to you and your ISP.
If your Web page is on your school's or company's machine, you can easily
risk getting expelled or fired. A picture is not worth it.
There may be those of you out there who feel that these social issues
are irrelevant. You might also feel that anybody who believes this is a
prude, and that your freedom of speech is being impaired. For them, there's
an even better reason not to use pornographic images in your Web page:
The law. By and large, the majority of pornographic
images are scanned images from magazines. By using such a graphic in your
Web page, you are violating their intellectual copyright. They will typically
warn you to remove the infringement, and failure to do so will almost guarantee
a lawsuit. A picture is not worth it.
If you're still unconvinced because you think the chances of them finding
you are slight, there's also the possibility of a lawsuit. Different states
and countries have different laws about what constitutes explicit material.
Because the Internet
is a world-wide network, your Web
page can, potentially, be seen by anybody, anywhere, in the world. The
mere act of somebody coming across your page, with a pornographic image,
can be a violation of their laws. They can rightfully seek prosecution
for you to remove your graphic. A picture is not worth it.
GIF, formally known as GIF 87a, is short for Graphics
Interchange Format and was originally designed by CompuServe.
It's probably one of the most widely used and supported graphic formats
around. GIF is the only file format that can be viewed by almost every
graphical browser around. It is, however, far from perfect.
GIF, which was created in June 1987, is technically restrictive by today's
standards. Due to design restrictions, GIF can handle only up to 8-bit
planes for colors. Simply put, this means that any GIF graphic can have
a maximum of only 256 colors at once. Although 256 may sound like more
than enough colors, it is very bad for displaying photorealistic images.
Fortunately, most Web
pages don't need to make use of more than 256 colors. The GIF file format
does pretty straightforward compression of an image. The image in question
is broken down into several pieces, and each piece is compressed through
a particular algorithm.
GIF
Became Popular When GIF came out, several proprietary file formats were still around.
Although most programmers on their respective computers provided a way
to view other file formats, the system was imperfect. The GIF
file format bridged the platforms because viewers supporting it were immediately
available from CompuServe. Graphic files from different computers no longer
had to be converted before being viewed; GIF could be seen by everyone.
Around 1994, it was well publicized that GIF had suddenly become "illegal"
in some way. When CompuServe
designed GIF, they made use of a proprietary compression scheme. Unfortunately,
this algorithm was copyrighted by Unisys,
and CompuServe
didn't obtain a license to use it. As a result, programs that supported
GIF were suddenly thrown into murky waters. Unisys decided that because
GIF had become so popular, it was impossible to try to stop its use. Unisys
took a reasonable approach by requiring that any software that supported
GIF had to get a license from them. What this all means to you, the Web
author, is that you can easily use GIF images without a problem. Unisys
will not, and they have said so themselves, sue anybody for using GIFs
in home pages.
In the early 1990s, a new graphic file format emerged. It was created
by the Joint Photographic Experts Group. It was intended to be a new and
better file format than any other then currently available. JPEG is widely
used by most people and is rapidly gaining more and more acceptance. Most
older graphical
browsers don't support JPEG natively, but the newer ones do.
JPEG was designed to be a file format that used its own compression algorithm. JPEG allows for support of up to 24-bit color planes. A typical JPEG graphic therefore can have up to 16.7 million colors. JPEG's compression algorithm is far more sophisticated than GIF's. Each pixel, an individual dot of a picture, in the image is compared to the ones adjacent to it. A mathematical formula is generated to represent this block of pixels and is subsequently encoded.
JPEG
Became Popular With the advent of more powerful computers, JPEG also became more and
more powerful. The reason is that JPEG's
algorithm is more math intensive than GIF's. Instead of basic compression/uncompression
routines, JPEG used math
functions. This made JPEGs unusable for all but the high-end PCs. So, with
more powerful computers came faster JPEG
decompression. This increase in speed led to a better appreciation for
JPEG's
power in displaying real-life images.
If you're worried about any legal problems arising out of using JPEG
files, don't despair. The JPEG
image compression formula was derived and released into the public
domain. There is no central body that has defined JPEG or would prosecute
you for using it. While there are proprietary JPEG compression algorithms,
they need the corresponding decompression program. What this means to almost
everybody is that there's no problem with using JPEG images.
Ever since JPEG showed up on the image scene, a debate has grown about which is better, GIF or JPEG. The simple fact is that both are good for use on your home page; which is better just depends on what you want. In the following sections, you'll look at the good and bad points of each file format and learn you when it's good to use which one.
The first and most important thing that you, as a Web author, should look at when choosing a graphic is speed. You don't want to waste people's time downloading and decoding large images. You want to inconvenience the typical user as little as possible, and choosing the right graphic file format helps (see table 10.1). GIFs are typically larger than JPEGs (slower to download) but are remarkably fast at decompression (faster to view). Conversely, JPEGs tend to be smaller than GIFs (thus faster to download), but they take longer to uncompress than GIFs (slower to display). Either file format would be fine when you consider the speed factor.
Table 10.1 GIF vs. JPEG: Technical
Merits
| Technical Aspect | GIF | JPEG |
| Maximum Colors | 256 | 16.7 million |
| Created By | CompuServe, Inc. | Joint Photographic Experts Group |
| Compression Scheme | LZW | JPEG |
Another important consideration in choosing the correct file format
is how widely supported it is-not support in terms of a particular computer
type, but how much support the different formats have from browsers. The
more browsers that support a particular format, the more you'll want to
use it (see table 10.2). GIF has been around longer than JPEG and is supported
by all but the oldest browsers. JPEG is newer than GIF and is more processor
intensive. However, many newer browsers support JPEG natively along with
GIF. Because of its wider support, GIF would be a better choice for your
home
page graphics.
Table 10.2 Graphics Format: Browser
Support
| Format | Extension | Browser Support |
| Graphics Interchange Format | GIF | Native |
| Joint Photographic Experts Group Bitmap | JPEG | Native or Helper Application |
| Device Independent Bitmap | DIB | Native or Helper Application |
| Tagged Image File Format | TIFF, TIF | Helper Application |
| PC Paintbrush | PCX | Helper Application |
| Truevision Targa | TGA | Helper Application |
| Portable Network Graphics | PNG | Helper Application |
How well the image looks is another important factor in deciding the correct file format. The more colors your image has, the better and more realistic it will look to the viewer. Using fewer colors can result in warped-looking images. GIF allows a maximum of 256 colors to be displayed at once, and that's all. A JPEG graphic can have up to 16.7 million colors at once, clearly an advantage.
However, just because a file format can support many more colors doesn't mean that you really need them. If you're making a graphic of your company logo, do you really need 16.7 million colors? Also, remember that most computers can display only 256 colors at once anyway. Different computers handle this limitation in different ways, and the results are hardly ever pretty. Under certain circumstances, 16.7 million colors can be viewed on most computers, but that's not always going to be the case. You should consider using GIF for most of your graphic needs. The only exception to this rule is if you want users to be able to download your images and view them later; then you should use JPEG.
Another aspect in deciding which graphics
format to use, is how well each format will handle the image. Because of
the way GIF is designed, it's a good general-purpose file format. You lose
almost no information from a scanned-in image. JPEG is different in that
it looks at the colors of each pixel on the image itself. It is great for
scanned photographs but little else. So when it comes to showing scanned
images or the like, you'll want to go with JPEG. If your graphics
are line art or something similar, you'll want to use GIF.
So what do all these different points add up to? For the most part, you'll want to use the GIF file format for most of your home page graphics. They're not necessarily faster or slower to view, but they are more widely accepted. The color limitation isn't too significant because most people viewing your home page can see only 256 colors anyway.
You'll want to make use of JPEGs if you're dealing with many photographic and scanned-in images. Also, if you're making pictures of your company's products available, you'll want those images in JPEG. In both of these cases, people interested in the graphic can download it and see it at their leisure.
With all the debate over generic GIF and JPEG, some improvements have been made to each format. These improvements are exclusive to each format and can create some interesting effects. These effects are very difficult to quantify into something that you do or do not want to use. In the following sections, you look at each of the improvements and can decide for yourself if it makes that particular format more appealing for you.
From its very inception, the GIF
file format could encode images "interlaced." This means that
as you get more and more of the GIF graphic, more and more details are
shown to you. This capability was provided so that CompuServe
users could see the image as they were downloading. This capability also
is useful because it allows users who aren't interested in a particular
graphic to avoid downloading the whole image. Many people use Interlaced
GIFs for their imagemap
graphic (see chapter 12) so that users can see the
general outline of clickable
regions.
The only difference between Interlaced
GIFs and non-interlaced GIFs is how the images are stored. As a result,
most graphics
programs allow you to specify whether to save an image as interlaced or
non-interlaced. On most modern image viewers, you can't see the difference.
However, people who will be visiting your Web
site won't be doing it from a graphics
viewer; they'll be doing it from a Web browser. So even though you, while
you're creating it, can't see an interlaced GIF, people visiting your site
will.
Around 1989 to 1990, CompuServe
revised some aspects of the GIF
file format. This new format, known as GIF 89a, allowed (among other things)
for the provision of having a "transparent color." That is, one
particular color in the GIF image is completely ignored and not displayed.
In that particular color's place, the viewer shows whatever color is in
the background. As a result, the GIF
image appears to "float" over the home
page (see fig. 10.3).
Transparent
GIFs allow images to blend in with the background.
Transparent
GIFs are particularly useful for hiding the borders and backgrounds of
images. To accomplish this sort of effect, you can simply specify the background
color as the Transparent Index. Each graphics
program that supports Transparent GIFs do so in a different manner. Some
of these programs let you specify the Transparent Index when you save the
file. Others let you indicate the Transparent Index while you're looking
at the image itself.
Netscape, a company that constantly changes the face of Web browsers,
has introduced Progressive
JPEG. Visually, this new file format appears to behave similarly to Interlaced
GIF. As more of the file is downloaded, the picture becomes clearer. As
of this writing, very little is known about Progressive JPEGs. It is, however,
incompatible with most JPEG viewers. The reason why very little is known
about Progressive JPEG is because it's been a long-ignored aspect of JPEG.
In all likelihood, Progressive
JPEGs will become more widely supported.
The way JPEG images are typically stored is that it is encoded from top to bottom using the JPEG compression algorithm. Progressive JPEG works by storing images into a portions. Each portion improves upon the quality of the one before it. So that the first portion of the Progressive JPEG image is very blocky and has little detail. The next portion adds more detail to the first one, and so on until the final image is shown.
If you have an existing graphic in either GIF or JPEG file format, don't convert it. Because of the different methods of encoding a picture, converting between the two formats will ruin it. The degradation may be slight, but it does occur.
Now that you've decided what you want your image to show and the format to show it in, you'll want to put it in your home page. Images are just another element in an HTML document and, as a result, can be manipulated as such. You can position images and even associate a link to them.
The first, and easiest, thing you'll probably want to do is put a graphic on your home page. You don't want anything special attached to it; you simply want to have the image show up. You can do this easily using the IMG container tag and the corresponding SRC attribute. Simply assign the full path, or URL, for the desired graphic to it. The general syntax for using a graphic is
<IMG SRC="filename">
The process really is that simple. Using the preceding code results
in the image ending up as close to the left side of the browser as possible.
If the graphic is by itself, it will end up in the leftmost column of the
browser. If text appears to its left, the image will be to the right of
the text. Figure 10.4 shows some sample
HTML
code that makes use of graphics.
Figure 10.5 shows what that sample home
page looks like when viewed with Netscape.
HTML doesn't restrict where you can use the IMG SRC tag in a home page.
By default, the baseline of the text is aligned to the bottom of the image, no matter where it appears on that line.
When you're placing your image, you may not like where it ended up in
relation to the text. Fortunately, HTML
provides for a way of aligning the text with relation to the graphic. Simply
add the ALIGN attribute to the IMG
element. This attribute can take one of three values: TOP, MIDDLE, or BOTTOM
(see fig. 10.6). If you use the TOP value
for the ALIGN attribute, the browser aligns the top first line of text
with the top of the graphic. The MIDDLE value puts the baseline of the
current line of text even with the middle of the image. The BOTTOM
value aligns the baseline
of the text with the bottom of the graphic. By default, the BOTTOM
value is used with the IMG
element. Figure 10.7 shows all the alignment
values in use on a home page.
You can use any one of three options to align text to each image.
You can see how different alignment values can help you position text better, with relation to the graphic.
Along with being able to position an image in relation to the text,
you can also control its size. The IMG
element also has the attributes HEIGHT and WIDTH. The values you can assign
to both of these are values indicating the number of pixels. The image
will be stretched, or shrunken, to be exactly the size you specify. For
example, suppose we have an image called "test.gif" that is 300
pixels wide, by 200 pixels tall. Further, let's say that we have the following
code in our Web page:
<IMG SRC="test.gif" HEIGHT=100 WIDTH=50>
The image will be resized down to 50 pixels wide by 100 pixels tall. You can use these attributes to your advantage if you're trying to create miniature samples of the picture. Instead of creating a smaller version of an image, simply scale it down. The image scaling is done by the user's Web browser, not the server.
When using the HEIGHT and WIDTH attributes, the entire picture still has to be downloaded. Don't think that by scaling an image down, the page will load faster. It won't. The browser is the program that does the image scaling, not the Web server.
This technique is great for commercial Web sites, where you can have scaled down images of a particular product. If the user clicks on the image, they can get the full size picture of it. Since you're using the same image, you save some disk space.
Many home
pages on the Web contain clickable
graphics. That is, you can click on some images on a home page, and you
go to a new URL. You can create these images easily by building on the
ideas presented in chapter 4, "Building Blocks of
HTML." There, you learned how you can create a hypertext link
to go to another home page. The only difference here is that, instead of
using text that is clickable, you use the IMG element.
Suppose that you want to change your plain hypertext link from text that says "Click here!" to a graphic with your corporate logo. You don't want to change the URL, just the appearance of the hyperlink. Instead of using
<A HREF="http://www.mysite.com/">Click here!</A>
you use the following line:
<A HREF="http://www.mysite.com/"><IMG SRC="mylogo.gif"></A>
This results in the graphic mylogo.gif
being displayed and attached to a link. If a user clicks on that image,
he or she goes to the corresponding URL. You can similarly link other resources
on the Net to graphics (see chapter 7, "Linking HTML
Documents").
If you don't want the background of your Web page to be a bland color,
you can set it to an image. This is done not with an attribute to be used
with the <IMG> tag. Rather, this is accomplished by a new Netscape
and HTML 3 proposed attribute to the <BODY> tag. The new attribute
is the BACKGROUND
attribute, and it should point to a URL for an image. When the user's Web
browser comes across this attribute, it loads the specified image. It then
tiles the graphic starting from the upper-left corner of the window through
the entire Web page.
If you're tired of seeing the same rectangles, circles, and discs for lists, you're not trapped. You can easily spice up your list of items. Instead of creating a list with the standard unordered, numbered, or directory lists, use a definition list. As you know, you should use the <DT> and <DD> HTML tags. But what you can do is to not use the <DT> tag at all and put an <IMG> tag in the <DD> element. For example, instead of a list such as:
<UL> <LI>Milk</LI> <LI>Eggs</LI> <LI>Cereal</LI> </UL>
You can do something like:
<DL> <DD><IMG SRC="mybullet.gif">Milk</DD> <DD><IMG SRC="mybullet.gif">Eggs</DD> <DD><IMG SRC="mybullet.gif">Cereal</DD> </DL>
This will cause the graphic "mybullet.gif" to be displayed in front of each item in the grocery list (see fig. 10.8). This allows you to create snazzier looking lists for your Web page. The only hard part for you is taking out a graphics program, and drawing the bullet yourself.
You can create lists with really fancy bullets, just don't use the conventional HTML list elements.
After you've gone through all this work of putting graphics on your
home page, you have to consider the people who cannot see them. Many people
who use browsers can't see the images. A significant number of people who
access the Net through UNIX
machines can use only text-based Web
browsers. Some people with slow modems deliberately disable automatic loading
of images, so they can't see your graphics either. You must provide some
way for them to be able to get the same effect of your home page without
the graphics.
HTML
provides for an ALT
attribute for the IMG
element. This attribute is basically a string that is displayed to the
graphically incapable browser. No hard-set rule exists for how long the
ALT string can be, but you should keep it short. Figure
10.9 shows you how to make use of the ALT attribute in the IMG SRC
tag. Figure 10.10 shows what people with
graphical
browsers see, and figure 10.11 shows what
text-only users see.
Be sure to make use of the ALT
attribute to help people without graphical
browsers enjoy your home
page.
People with graphical
browsers can see all the pictures in your home
page.
People with text-only browsers can see only the ALT
attributes of all the pictures in your home
page.
If you don't use the ALT attribute, typically the user sees only [IMAGE], which isn't particularly helpful. If you're advertising on the Web, you'll want to avoid this message. If you have a graphic with a special offer and don't provide a textual alternative, some people might never take advantage of it. You therefore could have fewer customers because you didn't give them a non-graphical alternative.
|
