LESSON 8
Using
Graphics
In this lesson, you’ll learn how to add pizzazz to your Web pages with
graphic images.
Adding Images
If the Web were nothing but text, it would still be technologically impres-
sive, but it wouldn’t be nearly as much fun. Adding images to your pages
is easy; adding images that make your Web pages look professional just
takes a little know-how. Luckily, you’ll learn that here—and it shouldn’t
take longer than 10 minutes.
The two most frequently used graphics file formats found on the Web are
GIF and JPEG. The Joint Photographic Experts Group (JPEG) format is
used primarily for realistic, photographic-quality images. The Graphics
Interface Format (GIF) is used for almost everything else. One new file
format is gaining popularity among designers and will soon be making its
presence known: The Portable Network Graphics format (PNG) is
expected to replace the GIF format someday. Don’t rush out to replace all
your graphics, however; not all browsers support it fully yet.
Tip Sound like a pro—learn how to pronounce the
graphic formats you use. GIF is pronounced “jif” (like
the peanut butter), JPEG is pronounced “jay-peg,”
and PNG is pronounced “ping.”
Let’s get down to business. You add all images by using a single HTML
tag, the image source tag,
<img src=”location” />. By now you proba-
bly recognize that this tag is actually an
<img /> tag with an attribute
72 Lesson 8
(src) and attribute value (location), but because all images require a src
attribute, it’s easier to refer to it as a single tag. You’ll also notice that the
image tag does not have a corresponding closing tag. It is a single tag and
you’ll need to remember to add the closing slash at the end:
<img />. The
result of the following sample HTML appears in Figure 8.1.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”
lang=”en”>
<head>
<title>First Images</title>
<style type=”text/css”>
</style>
</head>
<body>
<p>This is an image in my first Web page.</p>
<img src=”http://www.thingstobehappyabout.com/face2.gif” />
</body>
</html>
FIGURE 8.1 The <img src=”location” /> tag inserts an image
into your HTML document.
Get Sams Teach Yourself HTML in 10 Minutes, Fourth Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
