Tự học HTML và CSS trong 1 giờ - part 26 doc

If you include an tag inside a link tag , that image serves as a link itself: If you include both an image and text in the link tag, they become links to the same page: Up to Index 228

the second night, we tried keeping guard We tried bright

lights, dogs, everything There was always something that

pulled us away, and by the time we got back, they were all

gone.”

</p>

Figure 9.9 shows the result in a browser

226 LESSON 9: Adding Images, Color, and Backgrounds

Output

FIGURE 9.9

Line break to a

clear margin.

Adjusting the Space Around Images

With the capability to wrap text around an image, you also might want to add some

space between the image and the text that surrounds it In the previous lesson, you

learned how to manage the whitespace around elements using CSS padding and margins

When you’re creating new pages, you should use CSS Before CSS, the vspaceand

hspaceattributes enabled you to make these adjustments, and you may still see people

use them Both take values in pixels; vspacecontrols the space above and below the

image, and hspacecontrols the space to the left and the right Note that the amount of

space you specify is added on both sides of the image For example, if you use

hspace=“10”, 10 pixels of space will be added on both the left and right sides of the

image It’s the equivalent of the CSS padding-left: 10pxandpadding-right: 10px

The vspace and hspace attributes for the <img> tag are not included in HTML5 You should use the margin and padding CSS properties instead.

NOTE

The following HTML code, displayed in Figure 9.10, illustrates two examples The

upper example shows default horizontal and vertical spacing around the image, and the

lower example shows the effect produced by the hspaceandvspaceattributes Both

images use the align=“left”attribute so that the text wraps along the left side of the

image However, in the bottom example, the text aligns with the extra space above the

top of the image (added with the vspaceattribute)

Input▼

<p><img src=”eggplant.gif” align=”left” /></p>

<p>

This is an eggplant We intend to stay a good ways away

from it, because we really don’t like eggplant very much.

</p>

<p style=”clear: left”>

<img src=”eggplant.gif” vspace=”50” hspace=”50” align=”left” />

</p>

<p>

This is an eggplant We intend to stay a good ways away

from it, because we really don’t like eggplant very much.

</p>

9

Output

FIGURE 9.10

The upper

exam-ple doesn’t have

image spacing,

and the lower

example does.

Here’s the same example, written using CSS instead:

<img src=“eggplant.gif” alt=“Eggplant” style=”float: left” />

<p>This is an eggplant We intend to stay a good ways away from

it, because we really don’t like eggplant very much.</p>

<hr style=”clear: left” />

<img src=“eggplant.gif” alt=“Eggplant” style=”float: left; padding: 50px”

/>

<p>This is an eggplant We intend to stay a good ways away from

it, because we really don’t like eggplant very much </p>

Images and Links

Can an image serve as a link? Sure it can! If you include an <img>tag inside a link tag

(<a>), that image serves as a link itself:

<a href=“index.html”><img src=“uparrow.gif” alt=“Up” /></a>

If you include both an image and text in the link tag, they become links to the same

page:

<a href=“index.html”><img src=“uparrow.gif” alt=“Up” />Up to Index</a>

228 LESSON 9: Adding Images, Color, and Backgrounds

One thing to look out for when you’re placing images within links, with or without text, is whitespace between the </a> tag and the

<img> tag or between the text and the image Some browsers turn the whitespace into a link, and you get an odd “tail” on your images To avoid this unsightly problem, don’t leave spaces or line feeds between your <img> tags and </a> tags.

Some browsers put a border around images that are used as links by default, but not all

of them Figure 9.11 shows an example of this The butterfly image is a not wrapped in a

link, so it doesn’t have a border around it The up arrow, which takes the visitor back to

the home page, has a border around it because it’s a link

TIP

FIGURE 9.11

Images used as

links sometimes

have a border

around them.

▼

You can change the width of the border around the image by using the borderattribute

to<img>or the borderCSS property Support for the borderattribute has been dropped

from HTML5, so in this lesson, I use the CSS version This attribute takes a number,

which is the width of the border in pixels border=“0”hides the border entirely You

were introduced to the various properties that make up the borderCSS property in the

previous lesson Disabling borders is ideal for image links that actually look like

click-able buttons, as shown in Figure 9.12

Because the default behavior differs between browsers when it comes to borders around

linked images, you should always specify the border properties explicitly so that all users

Including borders around images that are links has really fallen out of favor with most web designers Not turning them off can make your design look very dated.

NOTE

FIGURE 9.12

Images that look

like buttons.

Task: Exercise 9.2: Using Navigation Icons

Now you can create a simple page that uses images as links When you have a set of

related web pages, it’s usually helpful to create a consistent navigation scheme that is

used on all the pages

This example shows you how to create a set of icons that are used to navigate through a

linear set of pages You have three icons in GIF format: one for forward, one for back,

and a third to enable the visitors to jump to the top-level contents page

First, you write the HTML structure to support the icons Here, the page itself isn’t

Input▼

<!DOCTYPE html>

<html>

<head>

<title>Motorcycle Maintenance: Removing Spark Plugs</title>

</head>

<body>

<h1>Removing Spark Plugs</h1>

<p>(include some info about spark plugs here)</p>

</body>

</html>

Figure 9.13 shows how the page looks at the beginning

230 LESSON 9: Adding Images, Color, and Backgrounds

Output

FIGURE 9.13

The basic page,

with no icons.

At the bottom of the page, add your images using <img>tags:

Input▼

<div>

<img src=”Up.png” alt=”Up” />

<img src=”Left.png” alt=”Left” />

<img src=”Right.png” alt=”Right” />

</div>

Now add the anchors to the images to activate them:

Input▼

<div>

<a href=”index.html”><img src=”Up.png” alt=”Up” /></a>

<a href=”ready.html”><img src=”Left.png” alt=”Left” /></a>

<a href=”replacing.html”><img src=”Right.png” alt=”Right” /></a>

</div>

Figure 9.14 shows the result of this addition

When you click the icons now, the browser jumps to the linked page just as it would

have if you had used text links

9

Output

FIGURE 9.14

The basic page

with navigation

links.

Speaking of text, are the icons usable enough as they are? How about adding some text

describing exactly what’s on the other side of each link? You can add this text inside or

outside the anchor, depending on whether you want the text to be a hot spot for the link,

too Here, include it outside the link so that only the icon serves as the hot spot You also

can align the bottoms of the text and the icons using the alignattribute of the <img>tag

Finally, because the extra text causes the icons to move onto two lines, arrange each one

on its own line instead:

Input▼

<div>

<a href=”index.html”><img src=”Up.png” alt=”Up” /></a>

Up to index

</div>

<div>

<a href=”ready.html”><img src=”Left.png” alt=”Left” /></a>

On to “Gapping the New Plugs”

</div>

<div>

<a href=”replacing.html”><img src=”Right.png” alt=”Right” /></a>

Back to “When You Should Replace your Spark Plugs”

</div>

See Figure 9.15 for the final menu

Output

FIGURE 9.15

The basic page

with iconic links

and text.

232 LESSON 9: Adding Images, Color, and Backgrounds

Other Neat Tricks with Images

Now that you’ve learned about inline images, images as links, and how to wrap text

around images, you know what most people do with images on web pages But you can

play with a few newer tricks, too

Image Dimensions and Scaling

Two attributes of the <img>tag,heightandwidth, specify the height and width of the

image in pixels Both were part of the HTML 3.2 specification, but they’re deprecated in

favor of CSS now

If the values for widthandheightare different from the actual width and height of the

image, your browser will resize the image to fit those dimensions The downside of this

technique is that the image-scaling algorithms built into browsers are not always the best,

generally images resized with graphics programs look better than images resized in the

browser If you use the browser to change the size of an image, be prepared for it to look

pretty bad, especially if the aspect ratio is not preserved (In other words, you take a

100-by-100 pixel image and expand it into a 200-by-400 pixel image.)

▲

Don’t perform reverse scaling—creating a large image and then

using width and height to scale it down Smaller file sizes are better because they take less time to load If you’re going to dis-play a small image, make it smaller to begin with.

CAUTION

Here’s an example <img>tag that uses the heightandwidthattributes:

<img src=”my_image.png” height=”100” width=”200” />

To specify the height and width using CSS, use the height and width properties:

<img src=”my_image.png” style=”height: 100px; width: 100px” />

If you leave out either the height or the width, the browser will calculate that value based

on the value you provide for the other aspect If you have an image that’s 100 pixels by

100 pixels and you specify a height (using the attribute or CSS) of 200 pixels, the

browser will automatically scale the width to 200 pixels, as well, preserving the original

aspect ratio of the image To change the aspect ratio of an image, you must specify both

the height and width

More About Image Borders

You learned about the borderattribute of the <img>tag as part of the section on links,

where setting borderto a number or to 0specified the width of the image border (or hid

it entirely)

By default, images that aren’t inside links don’t have borders However, you can use the

borderattribute to include a border around any image, as follows:

<p>

<img src=”eggplant.gif” align=”left” style=”border: 5px solid black”>

This is an eggplant We intend to stay a good ways away from it,

because we really don’t like eggplant very much.

</p>

Figure 9.16 shows an image with a border around it

9

FIGURE 9.16

An image border.

You can also use any of the CSS border styles to borders to an image In HTML5, the

borderattribute has been removed

Using Color

As you’ve seen, one way to add a splash of color to the black, gray, and white on your

web pages is to add images Another is to change the colors of various elements on the

page At one time, HTML attributes were used to specify the colors for various attributes

on web pages, but these days, colors should be specified using CSS

Specifying Colors

Before you can change the color of any part of an HTML page, you have to know what

color you’re going to change it to There are three ways to specify colors using CSS, but

only two of them work when you’re using HTML

n Using a hexadecimal number representing that color

n Specifying the shades of red, green, and blue as numbers or percentages

n Using one of a set of predefined color names

The most flexible and widely supported method of specifying a color is to use the

hexa-decimal identifier Most image-editing programs have what’s called a color picker—a

tool for choosing a single color from a range of available colors Most color pickers can

be configured to display the value of that color in RGB form as three numbers

represent-ing the intensity of red, green, and blue in that color Each number is usually 0 to 255,

with0, 0, 0being black and 255, 255, 255being white If you use one of these tools,

you’ll have to convert the decimal numbers to hexadecimal These days, most tools with

color pickers also provide the hexadecimal values for red, green, and blue, which is what

web browsers require The color picker that’s built in to the Mac OS includes the

hexa-decimal values to make things easy on web publishers

If you want to use the regular decimal numbers, you can do so in CSS using the

follow-ing format:

rgb(0,0,0) /* Black */

rgb(255,255,255) /* White */

rgb(255,0,0) /* Red */

If you prefer, you can also use percentages:

rgb(0%,0%,0%) /* Black */

rgb(100%,100%,100%) /* White */

rgb(100%,0%,0%) /* Red */

234 LESSON 9: Adding Images, Color, and Backgrounds

To specify the colors in the hexadecimal format, you merge the hexadecimal equivalents

into a single number, like this:

#000000 /* Black */

#FFFFFF /* White */

#FF0000 /* Red */

#660099 /* Purple */

Browsers also support specifying colors by name Instead of using numbers, you just

choose a color name such as Black, White, Green, Maroon, Olive, Navy, Purple, Gray,

Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia, or Silver

Although color names are easier to read and remember than the numbers, only a few

col-ors have names that are well supported by web browsers Most people tend to use one of

the two numeric formats when specifying colors

There are also a number of websites that are designed to help web designers choose

col-ors One of the best is Color Schemer at http://www.colorschemer.com/online.html It

enables you to view several colors next to each other to see how they match, and will

even suggest colors that match the ones you choose The current Color Schemer interface

appears in Figure 9.17

9

FIGURE 9.17

Color Schemer.