Adding Graphics To Your HTML (Page 3)
- Page 1 -
- Page 3 - Page 4 - Page
5
Adding
Graphics to HTML
What are GIF and JPEG Files
How to convert a BMP files to GIF
How to add an image to your HTML
Document
How to format images in HTML
In the early days of the World Wide Web, graphics were
considered to be little more than novelties-a cheap trick to spice up a
Web page. But today, graphical images are an integral part of any HTML document.
You'd be hard-pressed to find a popular site on the Web that didn't use images
extensively.
Knowing how to include graphics in HTML, and more
important, knowing how to use graphics correctly, is a crucial part of putting
together a Web page. Good HTML documents don't just show images, they integrate
them and use them effectively.
In this chapter, we'll look at the types of images used on
the Web, and show you how to use HTML to include them in your Web pages. You'll
also discover secrets for formatting your images for maximum visibility and
effectiveness.
The two most common image file formats in use on the World
Wide Web are GIF (.GIF) and JPEG (.JPG) files. The GIF format is directly
supported by every graphical Web browser, while JPEG is still gaining acceptance
as a standard image format on the World Wide Web. Although both GIF and JPEG
files can be used in your HTML documents, there are a few important differences
between the two formats.
- Remember that JPEG images are 24-bit color, and require
the appropriate video hardware to view properly. If the user's system can
only support 256 colors, the images will be automatically adjusted to 256
colors by the Web browser or external viewer through a process known as
color dithering. This will always degrade the quality of the image, and may
lead to results you did not anticipate. Therefore, it's best to use 24-bit
JPEG images only when absolutely necessary.
- Images take a considerable amount of time to load in an
HTML document, especially when the reader has a slow modem connection to the
Internet. Try to keep your images as compact as possible. Crop the images
wherever possible to show only the relevant portions, thereby reducing the
image size. Color depth also plays a huge role in overall image size.
Consider decreasing the number of colors to 16 or 256 if it won't adversely
affect the image.
- The GIF format, developed by CompuServe, is a
cross-platform format, which means it can be viewed on almost any type of
computer system, making it ideal for use on the World Wide Web. The one
significant limitation of the GIF format is that images are limited to 256
colors.
- There are two different formats for GIF images: the
GIF87 format and the GIF89a format. The first format is the original format,
and is no longer widely used. The GIF89a format takes advantage of new
enhancements, including transparency and interlacing, which are used
extensively by HTML authors.
- The JPEG format, developed by the Joint Photographic
Experts Group, is also a cross-platform format, although it is not directly
supported by all Web browsers. JPEG images can use the full spectrum of 16.7
million colors.
- JPEG images are compressed files. JPEG compression
results in some image quality loss; however, the difference is usually not
noticeable to the human eye.
- If you are including photographic images in your HTML
document, you should store them in JPEG format because of the smaller file
size and support for full color. Some Web browsers do not directly support
JPEG files, and require the reader to load them with an external JPEG
viewer. Many JPEG viewers are available for free on the Internet. You can
find a list of them at http://www.yahoo.com/computers_and_
Internet/Software/Graphics/.
- If you're placing line art, company logos, or icons in
your HTML document, you should save these images in the GIF89a format. By
doing so, you'll be able to take advantage of the interlacing and
transparency features, which are explained in detail in the next chapter.
In order to create GIF and JPEG images, you need an image
editing program that can read and write in those file formats. The Paint program
that comes with Windows 95 does not support GIF or JPEG. Fortunately, there are
many low-cost image editing programs that do, including some free ones. In this
section, you will learn how to create a GIF file by using Paint Shop Pro, an
inexpensive and widely used image editing utility.
If you've got a Windows bitmap file that you'd like to
use, such as your Windows wallpaper, Paint Shop Pro will help you convert it to
GIF or JPEG format.
- Be careful when choosing images to include with your
HTML document. Be sure that the images you're using are either your own, are
royalty-free, or have been cleared for your use by the copyright holder.
- Keep your images as small as possible. Use Paint Shop
Pro's cropping tools to cut your image down to size if necessary. Small
files load faster and help ensure compatibility with all systems. As a rule
of thumb, your image should never be larger than 450 pixels wide and 400
pixels high.
- Start Paint Shop Pro. If you don't already have a copy
of Paint Shop Pro on your system, you'll need to download a copy. An
evaluation version is available on the publisher's Web site at http://www.jasc.com.
- Open your .BMP bitmap file by choosing Open from the
File menu or by pressing Ctrl+O.
- In the Open Image dialog box, change the value in the
List Files of Type box to BMP - OS/2 or Windows Bitmap.
- Locate the bitmap file on your system that you want to
convert, then press the OK button.
- Check to see how many colors your .BMP image uses. The
number of colors used is displayed in the lower-left corner of the status
bar. If it's 256 colors or less, you can save this image as a GIF file. If
it's more than 256 colors, you'll either need to decrease the number of
colors or save the image as a JPEG file.
- To decrease the number of colors used in the image,
select Decrease Color Depth from the Colors menu and choose 256 colors
(8-bit).
- In the Decrease Color Depth dialog box, make sure that
the standard palette is selected. In most cases, you'll want to choose Error
Diffusion as your reduction method, but feel free to experiment. Press the
OK button when you're ready to go.
- To save the 256-color image as a GIF file, choose Save
As from the File menu or press F12. Make sure that the List Files of Type
box is set to GIF - CompuServe and the File Sub-Format is set to Version
89a - Interlaced. To save this image as a JPEG file instead, set the
file type to JPG - JPEG - JFIF compliant.
- Choose a file name and location for your image file.
Once you've got the image file prepared, the next step is
to place it in your HTML document with markup tags. Images in HTML are included
by using the <IMG> tag. This page will cover the basic elements and
attributes used when including an <IMG> tag in your document.
- If you want to link to images that are not your own, be
sure to get permission from the copyright holder first.
- You should always use ALT to specify alternate text for
an image, so that users without graphical capability will understand what
the image is showing.
- Locate the place in your document where you'd like to
insert the image.
- You can place images in your HTML document by using the
<IMG> tag. To insert an image into your HTML document, type <IMG>.
There is no closing </IMG> tag.
- Now you need to specify the URL of the image to load by
placing the SRC (source) attribute within the <IMG> tag. If you store
your images in the same directory as your HTML files, the URL can simply be
the file name of the image. For example, to insert a GIF file named logo.gif
into your HTML document, you would type <IMG SRC="logo.gif">.
- To link to images that are not in the same directory as
the HTML document, use relative URLs to locate them. For example, if you
stored the above logo.gif file in a subdirectory called images in
your HTML documents folder, you would type <IMG SRC="images/logo.gif">.
- The ALT attribute allows you to create alternate text
for your image that will be shown to users who have browsers that do not
support graphics. Some browsers will also display the alternate text while
the image is loading. To specify the alternate text, type ALT=,
followed by the text in quotes. For example, adding alternate text would
change the above image tag to <IMG SRC="images/logo.gif"
ALT="The LawnBirds, Inc. logo in stunning 3-D.">.
As you've learned, it's very easy to include an image in
your HTML document. However, simply including an image is only the first step.
HTML provides you with several ways to format your image inside your document.
You can align your image with the margins to allow text to flow around it. You
can also specify the size you'd like the image to be, allowing the reader's Web
browser to scale the image accordingly.
- You can determine the height and width of an image by
opening the file in Paint Shop Pro. The number of pixels in the height and
width of the image are displayed in the status bar.
- It's always a good idea to specify the height and width
of your image, even if you don't want to scale it to a different size. When
you indicate a size in the <IMG> tag, many browsers will insert a
rectangle as a placeholder while the image downloads. This will allow users
to read the text of your document immediately, instead of having to wait for
the images to download first.
- To specify the alignment of an image, use the ALIGN
attribute inside the <IMG> tag.
- To align the image above the text that surrounds it,
type ALIGN=BOTTOM. This sets the bottom of the image equal to the
baseline of the text. Likewise, to align the image below the surrounding
text, type ALIGN=TOP. You can also align the middle of the image to
the text baseline by typing ALIGN=MIDDLE.
- To force text to wrap around an image, type ALIGN=LEFT
inside the <IMG> tag. This will align the image with the left
margin of the document, and text will flow around it, beginning with the
current paragraph.
- To place the image in the right margin of your
document, type ALIGN=RIGHT.
- You can specify the height and width of your image. If
you specify a different height and width than the actual image, the browser
will scale the image to fit your settings. To set the height, place your
cursor in the <IMG> tag and type HEIGHT=, followed by the
height of the image in pixels. To specify the width of the image, type WIDTH=.
- There are a number of enhancements to the <IMG>
tag. Netscape and Internet Explorer provide many extensions for greater
layout control.
- Page 1 -
- Page 3 - Page 4 - Page
5