Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P23 docx

Wrapping Text Next to ImagesIncluding an image inside a line works fine if you have only one line of text.. If you had multiple lines of text and you included an image in the middle of i

Trang 1

Wrapping Text Next to Images

Including an image inside a line works fine if you have only one line of text One aspect of inline images that I've sneakily avoided mentioning so far is that in HTML 2.0, this alignment worked only with a single line of text If you had multiple lines of text and you included an image in the middle of it, all the text around the image (except for the one line) would appear above and below that image

What if you want text to flow around an image? Using HTML 2.0, you couldn't You were restricted to just a single line of text on either side of the image, which limited the kinds of designs you could do

To get around this HTML 2.0 limitation, Netscape defined two new values for the align attribute of the

file:///G|/1/0672328860/ch07lev1sec4.html (6 von 12) [19.12.2006 13:48:53]

Trang 2

Images and Text

<img> tag: left and right These new values were incorporated into HTML 3.2 and are now supported by all current browsers

align="left" and align="right"

align="left" aligns an image with the left margin, and align="right" aligns an image with the right margin However, these attributes also cause any text that follows the image to be displayed in the space to the right or left of that image, depending on the margin alignment:

Input

<h1>Mystery Tulip Murderer Strikes</h1>

<p>Someone, or something, is killing the tulips of New South

Haverford, Virginia Residents of this small town are shocked and

dismayed by the senseless vandalism that has struck their tiny

town.</p>

<p>New South Haverford is known for its extravagant displays of

tulips in the springtime, and a good portion of its tourist trade

relies on the people who come from as far as New Hampshire to see

what has been estimated as up to two hundred thousand tulips that

bloom in April and May.</p>

<p>Or at least the tourists had been flocking to New South

Haverford until last week, when over the course of three days the

flower of each and every tulip in the town was neatly clipped off

while the town slept.</p>

Figure 7.8 shows an image with some text aligned next to it

You can put any HTML text (paragraphs, lists, headings, other images) after an aligned image, and the text will be wrapped into the space between the image and the margin Or you can have images on both margins and put the text between them The browser fills in the space with text to the bottom of the image and then continues filling in the text beneath the image

Output

Figure 7.8 Text and images aligned.

[View full size image]

Trang 3

Stopping Text Wrapping

What if you want to stop filling in the space and start the next line underneath the image? A normal line break won't do it; it just breaks the line to the current margin alongside the image A new paragraph also continues wrapping the text alongside the image To stop wrapping text next to an image, use a line break tag (<br>) with the clear attribute This enables you to break the line so that the next line of text begins after the end of the image (all the way to the margin)

The clear attribute can have one of three values:

left Break to an empty left margin, for left-aligned images

right Break to an empty right margin, for right-aligned images

all Break to a line clear to both margins

Note

Trang 4

Images and Text

The clear attribute for the <br> tag is deprecated in HTML 4.01, in favor of using style

sheet attributes

For example, the following code snippet shows a picture of a tulip with some text wrapped next to it A line break with clear="left" breaks the text wrapping after the heading and restarts the text after the image:

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

</head>

<body>

<h1>Mystery Tulip Murderer Strikes</h1>

<p>Someone, or something, is killing the tulips of New South

Haverford, Virginia Residents of this small town are shocked and

dismayed by the senseless vandalism that has struck their tiny

town.</p>

<p>New South Haverford is known for its extravagant displays of

tulips in the springtime, and a good portion of its tourist trade

relies on the people who come from as far as New Hampshire to see

what has been estimated as up to two hundred thousand tulips that

bloom in April and May.</p>

<p>Or at least the tourists had been flocking to New South

Haverford until last week, when over the course of three days the

flower of each and every tulip in the town was neatly clipped off

while the town slept.</p>

Figure 7.9 shows the result in a browser

Output

Figure 7.9 Line break to a clear margin.

Trang 5

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 The vspace and hspace attributes (introduced in HTML 3.2) enable you to make these adjustments Both take values in pixels; vspace controls the space above and below the image, and hspace controls 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

Note

The vspace and hspace attributes for the <img> tag are deprecated in HTML 4.01, in favor of

using style sheet attributes

The following HTML code, displayed in Figure 7.10, illustrates two examples The upper example shows default horizontal and vertical spacing around the image, and the lower example shows the effect

Trang 6

Images and Text

produced by the hspace and vspace attributes 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 vspace attribute)

Input

<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 />

<img src="eggplant.gif" alt="Eggplant" vspace="50" hspace="50"

align="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

Output

Figure 7.10 The upper example doesn't have image spacing, and the lower

example does.

Trang 7

With Cascading Style Sheets, you can control image borders, space included around

images, and how text flows around images You can also use CSS to control the properties

of elements of all kinds, so I'm going to cover them in Lesson 9

Trang 8

Images and Links

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>

Tip

One thing to look out for when you're placing images within links, with or without text, is

white space between the </a> tag and the <img> tag or between the text and the image

Some browsers turn the white space 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

By default in HTML 2.0, images that are also links appear with borders around them to distinguish them from ordinary, nonclickable images Figure 7.11 shows an example of this The butterfly image is a

nonclickable image, 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

Figure 7.11 Images used as links have a border around them.

Trang 9

You can change the width of the border around the image by using the border attribute to <img> The

border attribute was a Netscape extension that became part of HTML 3.2, but it's been deprecated in HTML 4.01 in favor of style sheets This attribute takes a number, which is the width of the border in pixels border="0" hides the border entirely This configuration is ideal for image links that actually look like clickable buttons, as shown in Figure 7.12

Figure 7.12 Images that look like buttons.

Note

Trang 10

Images and Links

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

Task: Exercise 7.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 of 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'll write the HTML structure to support the icons Here, the page itself isn't very

important, so you can just include a shell page:

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

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

<h1>Removing Spark Plugs</h1>

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

<hr />

</body>

</html>

Figure 7.13 shows how the page looks at the beginning

Output

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

Input

Output

Figure 7.13 The basic page, with no icons.

Tiêu đề	Images and Text
Trường học	University of Virginia
Chuyên ngành	Web Publishing
Thể loại	Essay
Năm xuất bản	2025
Thành phố	Charlottesville

Định dạng
Số trang	10
Dung lượng	329,43 KB