557386 Ch07.qxd 4/2/04 9:54 AM Page 124
Ł
124
Creating Cool Web Sites with HTML, XHTML, and CSS
<img src=”banner.gif” />
When you have a graphics file, the
<img>
tag is used to place that file in the text. Suppose
that I have a file called
black-box.gif
that I want to use as the opening graphic in my Web
page. The following example shows how this file might appear in an HTML document:
<html>
<head>
<title>The Black Box</title>
</head><body>
<img src=”black-box.gff” alt=”black box logo” />
<h1>Welcome to the Black Box</h1>
People are always trying to figure
out how things work. From “How Things Work” to “Why Things
Work”, it’s an obsession. But why? Why not just think of
everything in life as a simple
<i>Black Box?</i>.
<br /><br />
Ready to change your perspective? <a href=”blackbox2.html”>yes</a>
</body>
</html>
The
<img>
formatting tag has quite a variety of attributes, as this chapter illustrates. The two
attributes that must appear in the
graphic, eh?).
Figure 7-2: The Black Box Web page with the fully loaded graphic.
You may have a fast Internet connection, but remember that many people are trapped with
slow dial-up connections at 28,800 baud or—horrors!—slower. Earthlink, America Online,
and MSN users can access Web pages, but performance can be quite slow. Bigger graphics
have more data to transfer to the user and, therefore, take longer to receive. Also keep in
mind that, to speed up access, many users simply modify their Web browser preferences to
skip loading the graphics unless they’re required to understand a page.
A general guideline in gauging how long a graphic takes to download is to figure that each
1K of graphics size translates to one second of download time for dial-up users. So, when
you create graphics, it’s a good idea to look at the file sizes and ask yourself whether the
specific graphic is worth the wait. Sometimes it is, but often it isn’t and just creates a frustrat
ing situation for the user.
A popular use of graphics is a button that you can create by wrapping the
<img>
tag with an
<a>
anchor. If I have two button graphics—
yes.jpg
and
no.jpg
—here’s how I can spiff up
the Black Box page:
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch07.qxd 4/2/04 9:54 AM Page 126
Ł
126
Creating Cool Web Sites with HTML, XHTML, and CSS
<html>
<head>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch07.qxd 4/2/04 9:54 AM Page 127
127
Ł
Chapter 7: From Dull to Cool by Adding Graphics
A page in which graphics are a vital part of the design, however, can look peculiar to some
Web users because a small percentage of people on the Web still either cannot or opt not
to download graphics when viewing Web pages. This creates a design dilemma: Should
pages be designed to omit the graphics, to include them as critical, or just to add them as
an afterthought?
Some Web pundits tell you to just go wild with the graphics because “within a few months”
everyone will have a fast, powerful computer and a high-speed connection. I don’t agree with
that advice. Pundits make this claim year after year, yet a majority of Web users still don’t
have high-speed connections. Because the various graphic formats, already compressed,
still produce large files, you should ensure that people who omit the images still see a mean
ingful page.
The argument over whether or not to go wild with graphics breaks down like this. Some
designers insist that you should be able to design for a specific browser and platform. Those
sites say stuff like Enhanced for Internet Explorer 5.0 and Windows 2000. I think their design
is unintentionally user-unfriendly: Why immediately tell users they’ve got the wrong tools to
visit your site? Another group believes that specific browsers shouldn’t be required, but that
no-graphics viewers are irrelevant to their online experience. They eschew
alt
attributes (as
you see shortly) or any text alternatives for the graphical buttons and pictures. For some
sites that’s cool, but for many, it’s just a sign of poor implementation. Finally, some think that
every graphic should have a text alternate and that the pages should work wonderfully for all
users. That’s the safest bet, but if you want to advertise your T-shirt designs online, clearly,
text descriptions aren’t very useful! Which road you take definitely depends on the goal of
your site and your vision of your target audience.
557386 Ch07.qxd 4/2/04 9:54 AM Page 128
Ł
128
Creating Cool Web Sites with HTML, XHTML, and CSS
To understand why the
alt=
element is necessary, see Figure 7-4. For this example, I removed
the
alt
tag included in the HTML and renamed the button graphics to be more like what is
used in a typical Web site design.
Figure 7-4: The Black Box looks much different in Lynx’s text-only display.
The user faces a problem, obviously: How do you answer the question posed? That’s another
great reason why you should always include some meaningful information in the
alt
attribute.
Modern Web browsers show this
alt
text immediately upon loading a page and then gradu
ally replace each placeholder with the actual graphic. Carefully planned
alt
text can
enhance the user’s experience and even be fun. For example, the text alternative for my
photograph on one page I designed is Weird picture of some random guy rather than simply
My photo.
Ł
You don’t have to place brackets, parentheses, or anything else around the text in
the
alt=
section of the
align=”bottom”
.
By default, adjacent material is aligned with the bottom of the image, as you can see in
Figure 7-3. The following HTML snippet demonstrates these three alignment options:
<h1>More about Winter Birds</h1>
<img src=”feeder.jpg” align=”top” border=”0” alt=”feeder” />
(align=”top”)
There are many birds that can visit your feeder
even in the middle of the coldest period, with
snow many inches thick on the trees. Three common
birds that we see here in Colorado during the winter
months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied
Sapsuckers.
<br clear=”all” /><hr />
<img src=”feeder.jpg” align=”middle” border=”0” alt=”feeder” />
(align=”middle”)
There are many birds that can visit your feeder
even in the middle of the coldest period, with
snow many inches thick on the trees. Three common
birds that we see here in Colorado during the winter
months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied
Sapsuckers.
<br clear=”all” /><hr />
<img src=”feeder.jpg” align=”bottom” border=”0” alt=”feeder” />
(align=”bottom”)
There are many birds that can visit your feeder
even in the middle of the coldest period, with
snow many inches thick on the trees. Three common
birds that we see here in Colorado during the winter
months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied
align=”left”
and
align=”right”
:
<h1>More about Winter Birds</h1>
<img src=”feeder.jpg” align=”left” border=”0” alt=”feeder” />
(align=”left”)
There are many birds that can visit your feeder
even in the middle of the coldest period, with
snow many inches thick on the trees. Three common
birds that we see here in Colorado during the winter
months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied
Sapsuckers.
<br clear=”all” /><hr />
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch07.qxd 4/2/04 9:54 AM Page 131
Ł
131
Ł
Chapter 7: From Dull to Cool by Adding Graphics
<img src=”feeder.jpg” align=”right” border=”0” alt=”feeder” />
(align=”right”)
There are many birds that can visit your feeder
even in the middle of the coldest period, with
snow many inches thick on the trees. Three common
birds that we see here in Colorado during the winter
months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied
Sapsuckers.
<br clear=”all” /><hr />
Figure 7-6 shows how the preceding text is formatted using
enables the page to be displayed, including all text, even before your browser receives the
graphic from the Web server. This functionality enables you to begin reading the text portion
of the Web page immediately. Be careful with these attributes, however, because if you have
a 100 × 200 graphic and specify height=“200” and width=“350”, Navigator and Explorer both
stretch the image to fit the 200 × 350 space, making it look pretty weird and distorted.
Another attribute that I mention earlier in this chapter is
border
, which you can use to great
effect: The
border
attribute enables you to specify the exact width of the border around a
linked image. The following code shows an example of the
border
attribute:
<body style=’text-align: center’>
<!— Tic-Tac-Toe —>
<h2><b>Tic-Tac-Toe</b></h2>
<p>
It’s X’s Turn... (<span style=’color:blue’>This color</span>
indicates a recommended move).</p>
<div>
<a href=”topleft”><img src=”Graphics/boxx.gif” border=”0”
alt=”x” /></a>
<a href=”topcntr”><img src=”Graphics/box.gif” border=”0”
alt=” “ /></a>
<a href=”topright”><img src=”Graphics/box.gif” border=”0”
alt=” “ /></a>
<br />
<a href=”left”><img src=”Graphics/boxo.gif” border=”0”
alt=”o” /></a>
vspace
and
hspace
, which
control the vertical and horizontal space around each graphic, respectively. Consider an
example of a left-aligned graphic. When displayed, the text starts immediately adjacent to
the edge of the graphic. By using
hspace
, I can fix this potential problem by specifying a par
ticular number of pixels as a horizontal spacing between the graphic and the adjacent text, as
the following HTML shows:
<h1>More about Winter Birds</h1>
<img src=”feeder.jpg” align=”left” border=”0”
alt=”feeder” hspace=”40” />
There are many birds that can visit your feeder
even in the middle of the coldest period, with
snow many inches thick on the trees. Three common
birds that we see here in Colorado during the winter
months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied
Sapsuckers.
<br clear=”all” /><hr />
<img src=”feeder.jpg” align=”left” border=”0”
alt=”feeder” hspace=”4” />
There are many birds that can visit your feeder
even in the middle of the coldest period, with
snow many inches thick on the trees. Three common
birds that we see here in Colorado during the winter
months are Winter Wrens, Barrow’s Goldeneyes, and Yellow-Bellied
Sapsuckers.
<br clear=”all” /><hr />
If you experiment, you might find that when you’re wrapping text around a large graphic, it’s
difficult to move any material below the graphic. The
<br />
and
<p>
tags simply move to
the next line in the wrapped area. That effect is not always what you want. To break the line
and move back to the margin, past the graphics, you add a special attribute to the useful
<br />
tag:
clear
. For example, use
<br clear=”left” />
to move down as needed to
get to the left margin,
<br clear=”right” />
to move down to a clear right margin, or
<br clear=”all” />
to move down until both margins are clear of the image. Most com
monly, you see
<br clear=”all” />
.
Tossing all the additions into the mix, here’s a Macintosh icon tutorial that uses the tags and
attributes that I’ve just discussed:
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch07.qxd 4/2/04 9:54 AM Page 135
135
Ł
Chapter 7: From Dull to Cool by Adding Graphics
<html>
A special folder at the top-most level of the boot disk
on the Macintosh is the <I>System Folder</I>. It
contains all the files, applications, and information
needed to run and maintain the Macintosh operating
system itself. The “X”
inside the folder icon indicates that this
particular <i>System Folder</i> is <i>live</i> and that
the information inside was used to actually start up
the current Macintosh.
</p>
<p>
<b>Applications Folder</b><br />
Continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch07.qxd 4/2/04 9:54 AM Page 136
Ł
136
Creating Cool Web Sites with HTML, XHTML, and CSS
Continued
<img src=”mac-icons/applications.gif” align=”left”
hspace=”15” vspace=”8” alt=”app folder” />
All of the major applications in Mac OS X live in a shared
folder called the Applications Folder. It’s easily
recognized by the ‘A’ on the folder icon itself and is
the first place to look when you seek any of the many
Macintosh applications included with the operating system.
</p>
</body>
</html>
Figure 7-9 shows the result of this code.
insert the
<body>
tag. If you have the
<body>
tag in the wrong place—particularly if you
place it subsequent to any specification of information to appear on the Web page itself (such
as an
<h1>
tag)—your browser ignores any background changes.
You specify background colors with
bgcolor=”colorname”
or
bgcolor=”#rgb-value”
, and
you specify a background graphic with
background=”filename”
. But rather than live in the
past with the HTML approach, let’s look at how to use CSS. CSS enables you to change the
background color by modifying the attributes of the
<body>
tag with this attribute:
<style type=”text/css”>
body { background-color: blue; }
</style>
If you don’t want a CSS block, you can instead specify background color as a
style
attribute
to the
<body>
tag itself. You can add background graphics by using the
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch07.qxd 4/2/04 9:54 AM Page 138
Ł
138
Creating Cool Web Sites with HTML, XHTML, and CSS
Don’t worry too much if this doesn’t make much sense to you. It’s just important to know
some typical color values as shown in Table 7-1.
Table 7-1: Common Colors as Hex RGB Values
Hex Color Value CSS Hex Shortcut Common Color Name
00 00 00 000 Black
FF FF FF FFF White
FF 00 00 F00 Red
00 FF 00 0F0 Green
00 00 FF 00F Blue
FF FF 00 FF0 Yellow
FF 00 FF F0F Purple
00 FF FF 0FF Aqua
You should experiment with different colors to see how they look on your system. If you’re
working with basic colors, however, you can use their names (thankfully). Table 7-2 shows
some of the most common colors.
Table 7-2: Popular Colors Available by Name
Aqua Black Blue Fuchsia
Gray Green Lime Maroon
Navy Olive Purple Red
Silver Teal White Yellow
Ł
If you specify a color that your system can’t display, the browser tries to produce a
similar color by dithering, or creating a textured background with elements of each
caution
of the two closest colors. Sounds nice, but it isn’t; you end up with a pebbly back
Is green your favorite color? Try either
background-color:green or background-color:#0F0
</div>
<div style=”background:#99f”>
Another solid-background-color box, this has a nice light blue.
</div>
Viewing this in your browser, as shown in Figure 7-10, results in a bright, cheery, and attrac
tive yellow background and two light blue text boxes. Another interesting example in Figure
7-10 is that of a background graphic—
diamond.gif
—that appears behind the second
<div>
block. Even with text twice the normal size, notice that the background graphic makes the
text difficult to read!
Figure 7-10: Exploring background colors and graphics.
As Figure 7-10 demonstrates, graphical backgrounds are also easy to work with, albeit a bit
more dangerous. Even the simplest graphic can potentially obscure the text on a particular
page.
The moral of this story: By all means, use these fun options, but be sensitive to the potential
readability problems your viewers might face because of their own hardware or browser pref
erences or because these options have been used inappropriately.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch07.qxd 4/2/04 9:54 AM Page 140
Ł
140
Creating Cool Web Sites with HTML, XHTML, and CSS
Where Can You Find Images?
Considering that all graphics are specified with the same basic HTML tag, it’s remarkable
how much variation exists among different sites on the Web. Web designers create varied
appearances for their pages through the types of graphics they use and their unique combi
machine, some unquestionably terrific software solutions are available. Some of the best
packages are shareware—such as the two listed—but numerous commercial packages are
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch07.qxd 4/2/04 9:54 AM Page 141
141
Ł
Chapter 7: From Dull to Cool by Adding Graphics
available as well. Here are some of the more popular commercial graphics packages for each
platform:
• Windows: Among the many applications for developing graphics in Microsoft Windows
are Adobe Illustrator, Adobe Photoshop, Macromedia Fireworks, Aldus FreeHand,
MetaCreations Painter, Dabbler, Canvas, Ray Dream Designer, SmartSketch, CorelDRAW!,
MacroModel, AutoSketch, Kai’s Power Tools, 3D Sketch, and Elastic Reality.
• Macintosh: Because it remains the premier platform for graphics, most graphics applica
tions are available for the Mac. In addition to the big three—Adobe Photoshop, Macromedia
Fireworks, and Adobe Illustrator—Macintosh graphics programs such as Drawing Table,
Color It, Collage, KPT Bryce, Paint Alchemy, TextureScape, Painter, Kai’s Power Tools,
and Alias Sketch.
• Unix: Fewer graphics programs are available for Unix systems, but the programs that are
available are quite powerful. Look for Adobe Photoshop, FusionArt, GINOGRAPH, Adobe
Illustrator, Image Alchemy, Magic Inkwell, and Visual Reality, depending on your flavor
of Unix.
Ł
One request: If you do opt to use a shareware program, please remember to pay for
it and register it with the shareware author. That’s the only way users can continue
note
relying on the generosity of these programmers who write such excellent software
and then make it available to users directly.
Clip art or canned image libraries?
One result of the explosion of interest in Web page design is the wide variety of CD-ROM
artwork to include in my Web page, as shown in Figure 7-11.
Figure 7-11: Scanned image of Sacré Coeur.
Scanners offer further options for producing fun and interesting graphics. I also scanned the
image shown in Figure 7-11 as black-and-white line art, producing the interesting abstract
graphic in Figure 7-12.
If I were designing a Web site that I expected to attract users with slow connections, I could
use small black-and-white representations of art to save download time. Each small thumb
nail image serves as a button that produces the full color image when clicked. The HTML for
a thumbnail image looks like the following:
<a href=”big-image.gif”><img src=”little-image.gif”
border=”0” alt=”little image” /></a>
Thumbnail versions of large graphic images are common (and appreciated by just
tip
about everyone), so if you create a page that contains many pictures, think about
Ł
minimizing the data transfer with smaller versions that refer to larger images.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch07.qxd 4/2/04 9:54 AM Page 143
143
Ł
Chapter 7: From Dull to Cool by Adding Graphics
Figure 7-12: Sacré Coeur as line art, after scanning and some manipulation.
Another difference between the images in Figures 7-11 and 7-12 is file size. Figure 7-11 is a
JPEG image to ensure that all the colors in the original photograph are viewable in the Web
artwork. It’s 48K in size. Figure 7-12, however, is a 1-bit GIF image, and even though it’s
exactly the same image-size as the JPEG color photo, the file is only 6K, less than one-
eighth the size of the color image.
Ł
Check out a pretty neat scanning Web site online at
/>.
Copyright: Tài liệu đại học ©