Chapter
9
Chapter 9
Putting Images on a Web Page
In Chapters 1 through 8, you learned to create Web
pages containing text. However, you'd be hard-pressed to find many Web pages these days
that don't also include graphics images. This chapter shows you how easy it is to put
graphics on your pages with HTML.
Chapter 10, "Creating Web Page Images,"
will help you come up with some good graphics of your own, and Chapter 11, "Making
Pages Display Quickly," will show you how to make your graphical pages appear
onscreen as fast as possible. I also save the technical details you need to know about
computer graphics files for Chapter 10.
To Do: You should get two or three images ready now so you can try putting them on your
own pages as you follow along with this chapter.
If you have some image files already saved in the
GIF or JPEG format (the filenames will end in .gif or .jpg), use those.
Otherwise, you can just grab some graphics that I've put on the Internet for you to
practice with. Here's how:
- 1. Enter the following address into your Web
browser:
http://w3school.cjb.com
You should see a page with four images of hats and stars at the bottom.
2. Save the images to your computer's hard drive by clicking on each image with the
right mouse button (or holding down the mouse button if you use a Macintosh computer),
then selecting Save Image As... from the pop-up menu.
Put them on your hard drive in whichever folder you use for creating Web pages.
- 3. As you read this chapter, use the hat and
star image files to practice putting images on your pages. (You'll find out how to find or
create the perfect images for your Web pages in the next chapter.)
The familiar Web search engines and directories such
as Yahoo! (http://www.yahoo.com/), Excite (http://www.excite.com), and InfoSeek (http://www.infoseek.com/) can become a gold
mine of graphics images, just by leading you to sites related to your own theme. They can
also help you discover the oodles of sites specifically dedicated to providing free and
cheap access to reusable media collections.
Placing an
Image on a Web Page
To put an image on a Web page, first move the image
file into the same directory folder as the HTML text file. Then insert the following HTML
tag at the point in the text where you want the image to appear (using the name of your
image file instead of myimage.gif):
<IMG SRC="myimage.gif">
Figure 9.1, for example, inserts the image named house.jpg
between the first and second paragraphs of text. Whenever a Web browser displays the HTML
file in Figure 9.1, it will automatically retrieve and display the image file shown in
Figure 9.2.
Figure 9.1. Use the IMG tag to place an
image on a Web page.
Figure 9.2. When a Web browser displays the HTML
page in Figure 9.1, it adds the image named house.jpg.
If you guessed that IMG stands for "image," you're right. SRC
stands for "source," which is a reference to the location of the image file. (As
discussed back in Chapter 1, "Welcome to HTML," a Web page image is always
stored in a separate file from the text, even though it will appear to be part of the same
"page.")
Just as with the <A HREF> tag
(covered in Chapter 3, "Linking to Other Web Pages"), you can specify any
complete Internet address as the <IMG SRC>. Or you can specify just the
filename if an image will be located in the same directory folder as the HTML file. You
may also use relative addresses such as photos/birdy.jpg or ../smiley.gif.
Just A Minute: Theoretically, you can include
an image from any Internet Web page within your own pages. For example, you could include
the hat image from my "Sample Images" page by putting the following on your Web
page:
<IMG SRC="http://wwww.softlookup.com/images/logo.gif">
The image would be retrieved from my server computer whenever your page was displayed.
However, even though you could do this, you shouldn't do it! Not only is it bad manners
(it costs most people money whenever you pull something from their server computer), it
can also make your pages display more slowly. If someone gives you permission to use an
image from one of their pages, always transfer a copy of that image to your computer, and
use a local file reference such as <IMG SRC="hat.gif">.
Labeling an
Image
The <IMG> tag in Figure 9.1 includes
a short text message: ALT="Our Humble Abode". The ALT stands
for alternate text because this message will appear in place of the image in older Web
browsers that don't display graphics.
The message you put in the ALT attribute
will be seen by some people who are using the latest Web browser software, too. Many
people--especially those with slow modems--turn off the Auto Load Images option in
Netscape Navigator, so they can see the text on Web pages without wasting time downloading
images they don't care about. When automatic image loading is off, the ALT
message appears instead of an image. Clicking on that message causes the image to be
downloaded and displayed, and clicking on the image download button (fifth from the left
on the toolbar) causes all images on the page to appear. Figure 9.3 shows the same page as
Figure 9.2, with Auto Load Images turned off.
Figure 9.3. Anyone who turns off Auto Load Images in
Netscape Navigator will see the ALT message instead of the image.
Microsoft Internet Explorer also allows people to turn off graphics (by deselecting View |
Options... | General | Show Pictures) so that users have to click on the ALT
message to see the actual image. Internet Explorer 3.0 also displays the ALT
message whenever someone holds the mouse over a graphic image without clicking.
Both Netscape Navigator and Microsoft Internet
Explorer also display the ALT message before retrieving and displaying an image,
even when automatic graphics loading is turned on. If the image file is large, or there
are a lot of images on the same page, the ALT message may be on the screen quite
a while before it is replaced by the image.
You should generally include a suitable ALT
attribute in every <IMG> tag on your Web pages, keeping in mind the variety
of situations where people might see that message. A very brief description of the image
is usually best, but Web page authors sometimes put short advertising messages or subtle
humor in their ALT messages. For small or unimportant images, it's fine to omit
the ALT message altogether.
Horizontal
Image Alignment
As discussed in Chapter 5, "Text Formatting and
Alignment," you can use <DIV ALIGN="center">, <DIV
ALIGN="right">, and <DIV ALIGN="left"> to align
part of page to the center, right margin, or left margin. Both text and images are
affected these tags.
For example, the first <IMG> tag in
Figure 9.4 occurs between a <DIV ALIGN="center"> tag and the
closing </DIV> tag. You can see in Figure 9.5 that this causes the image
(as well as the text above it) to be centered on the page.
Figure 9.4. Use the ALIGN
attribute with the DIV and IMG tags to control horizontal image
alignment.
Figure 9.5. While <DIV ALIGN> only
affects the placement of text and images, <IMG ALIGN> also causes text to
flow around images.
You can also make text wrap around images, as it does around the two cartoon images at the
bottom of Figure 9.5. You do this by including an ALIGN attribute within the <IMG>
tag itself, as shown in the second and third <IMG> tags in Figure 9.4.
<IMG ALIGN="left"> aligns
the image to the left and causes text to wrap around the right side of it. And as you'd
expect, <IMG ALIGN="right"> aligns the image to the right and
causes text to wrap around the left side of it.
You can't use <IMG
ALIGN="center"> because text won't wrap around a centered image. You
must use <DIV ALIGN="center"> if you want an image to be centered
on the page, as I did with the top image in Figures 9.4 and 9.5.
Just A Minute: Note that ALIGN means
something different in an <IMG> tag than it does in a <DIV>
tag. <IMG ALIGN="right"> will align an image to the right and
cause any text that follows to wrap around the image. <DIV
ALIGN="right">, on the other hand, just controls the alignment and never
causes text to wrap around images.
Vertical
Image Alignment
Sometimes, you may want to insert a small image
right in the middle of a line of text. Or you might like to put a single line of text next
to an image as a caption. In either case, it would be handy to have some control over how
the text and images line up vertically. Should the bottom of the image line up with the
bottom of the letters? Or should the text and images all be arranged so their middles line
up? You can choose between these and several other options:
- To line up the top of an image with the top of the
tallest image or letter on the same line, use <IMG ALIGN="top">.
- To line up the bottom of an image with the bottom of
the text, use <IMG ALIGN="bottom">.
- To line up the bottom of an image with the bottom of
the lowest image or letter on the same line, use <IMG
ALIGN="absbottom">. (If there are some larger images on the same line, ALIGN=absbottom
might place an image lower than ALIGN=bottom.)
- To line up the middle of an image with the middle of
the text, use <IMG ALIGN="middle">.
- To line up the middle of an image with the overall
vertical center of everything on the line, use <IMG ALIGN="absmiddle">.
This might be higher or lower than ALIGN="middle", depending on the
size and alignment of other images on the same line.
All these options are shown in Figure 9.6, and you
can see how they affect two different lines of images and text in Figure 9.7. Notice that
the large hat image in the top line radically affects where the small stars with ALIGN="top"
and ALIGN="absbottom" are placed. The second line doesn't have a big
image in it, so the effect of ALIGN="top" and ALIGN="absbottom"
are much less dramatic.
Time Saver: If you don't include any ALIGN
attributes in an <IMG> tag, the image will line up with the bottom of any
text next to it. That means you never actually have to type in ALIGN="bottom"
because it does the same thing.
In fact, you probably won't use any of the vertical
alignment settings much. The vast majority of Web page images use either ALIGN="left",
ALIGN="right", or no ALIGN attribute at all. So don't worry
about memorizing all the options listed above--you can always refer to this guide if you
ever do need them!
Figure 9.6. You can control vertical alignment of
images with the ALIGN attribute.
Figure 9.7. The top, middle, and bottom of each line
depend on the size of the text and images on that line.
To Do: Try adding some images to your Web pages now, and experiment with all the different
values of ALIGN. To get you started, here's a quick review of how to add the
magic hat image to any Web page.
- Copy the magic.gif image file to the same
directory folder as the HTML file.
- With a text editor, add <IMG
SRC="magic.gif"> where you want the image to appear in the text.
- If you want the image to be centered, type <DIV
ALIGN="center"> before the <IMG> tag and </DIV>
after it. To wrap text around the image instead, add ALIGN="right" or ALIGN="left"
to the <IMG> tag.
If you have time for a little more experimentation,
try combining multiple images of various sizes (such as the star and the magic hats) with
various vertical alignment settings for <IMG ALIGN>.
Images That
Are Links
With the same <A HREF> tag used to
make text links, you can make any image into a clickable link to another page. Figures 9.8
and 9.9 show a sample page. Clicking on the big button (or the words "To Balance the
U.S. Federal Budget") retrieves the page located at http://garnet.berkeley.edu:3333/budget/budget-1.asp
on the Internet.
Figure 9.8. Any images (and/or text) between <A
HREF> and </A> tags become clickable links.
Figure 9.9. The words "Click Here" are
part of the button.gif image referred to by the <IMG SRC> tag in
Figure 9.8.
Normally, Web browsers draw a colored rectangle around the edge of each image link. Like
text links, the rectangle will usually appear blue to people who haven't visited the link
recently, and purple to people who have visited it.
Chapter 13, "Backgrounds and Color
Control," explains how to change the link colors, and Chapter 14, "Page Design
and Layout," explains how to eliminate or change the size of the rectangle drawn
around image links.
All the same rules and possibilities discussed in
Chapter 3 and Chapter 8, "Intra-Page and E-mail Links," apply to image links
exactly as they do for text links. (You can link to another part of the same page with <A
HREF="#name"> and <A NAME="name">, for
example.)
-
In the next chapter, you'll find out how to build
(or borrow) your own great graphics like these.
Summary
This chapter has shown you how to use the <IMG>
tag to place graphics images on your Web pages. You learned to include a short text
message to appear in place of the image as it loads, and for people who choose not to
download graphics automatically. You also learned to control the horizontal and vertical
alignment of each image, and how to make text wrap around the left or right side of an
image.
Finally, you learned how to make images into
"buttons" that link to other pages using the same <A> tag
introduced in Chapter 3.
Table 9.1 summarizes the attributes of the <IMG>
tag covered in this chapter.
Table 9.1. HTML attributes covered
in Chapter 9.
| Attribute |
Function |
| SRC="..." |
The address or filename of the image. |
| ALT="..." |
A text message that may be displayed
in place of the image. |
| ALIGN="..." |
Determines the alignment of the given
image. If LEFT or RIGHT, the image is aligned to the left or right
column, and all following text flows beside that image. All other values, such as TOP,
MIDDLE, BOTTOM, ABSMIDDLE, or ABSBOTTOM, determine the
vertical alignment of this image with other items in the same line. |
Q&A
- Q I found a nice image on a Web page on the
Internet. Can I just use Save Image As... to save a copy and then put the image on my Web
pages?
A It's easy to do that, but unfortunately it's also illegal in most countries. You
should get written permission from the original creator of the image first. Most Web pages
include the e-mail addresses of their authors, which makes it a simple matter to ask for
permission--a lot simpler than going to court, anyway!
Q How long of a message can I put after ALT= in an <IMG> tag?
A Theoretically, as long as you want. But practically, you should keep the message
short enough so that it will fit in less space than the image itself. For big images, ten
words may be fine. For small images, a single word is better.
Q How do I control both the horizontal and vertical alignment of an image at once?
A The short answer is that you can't. For example, if you type <IMG
ALIGN="right" ALIGN="middle" SRC="myimage.gif">, the
ALIGN="middle" will be ignored.
There are ways around this limitation, however. Chapter 14 will explain how to position
text and images exactly where you want them in both the horizontal and vertical
directions.
Quiz
Questions
- 1. How would you insert an image file named elephant.jpg
at the very top of a Web page?
2. How would you make the word "Elephant" appear whenever the actual elephant.jpg
image couldn't be displayed by a Web browser?
3. Write the HTML to make the elephant.jpg image appear on the right side of
the page, with a big headline reading "Elephants of the World Unite!" on the
left side of the page next to it.
4. Write the HTML to make a tiny image of a mouse (named mouse.jpg) appear
between the words "Wee sleekit, cow'rin," and the words "tim'rous
beastie."
5. Suppose you have a large picture of a standing elephant named elephant.jpg.
Now make a small image named fly.jpg appear to the left of the elephant's head,
and mouse.jpg appear next to the elephant's right foot.
Answers
1. Copy the image file into the same
directory folder as the HTML text file, and type <IMG SRC="elephant.jpg">
immediately after the <BODY> tag in the HTML text file.
2. Use the following HTML: <IMG SRC="elephant.jpg"
ALT="Elephant">
3. <IMG SRC="elephant.jpg" ALIGN="right"> <H1>Elephants of
the World Unite!</H1>
4. Wee sleekit, cow'rin,<IMG SRC="mouse.jpg">tim'rous beastie
5. <IMG SRC="fly.jpg" ALIGN="top"> <IMG
SRC="elephant.jpg"> <IMG SRC="mouse.jpg"> |
Activities
- Try using any small image as a "bullet" to
make lists with more flair. If you also want the list to be indented, use the <DL>
definition list and <DD> for each item (instead of <UL> and <LI>,
which would give the standard boring bullets). Here's a quick example, using the star.gif
file from my sample images page:
| <DL><DD><IMG
SRC="star.gif">A murder of crows <DD><IMG
SRC="star.gif">A rafter of turkeys <DD><IMG
SRC="star.gif">A muster of peacocks</DL> |
|
Learn HTML
