Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P23 docx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (329.43 KB, 10 trang )
Images and Text
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]
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
<img src="tulips.gif" alt="Tulips" align="left" />
<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]
file:///G|/1/0672328860/ch07lev1sec4.html (7 von 12) [19.12.2006 13:48:53]
Images and Text
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
file:///G|/1/0672328860/ch07lev1sec4.html (8 von 12) [19.12.2006 13:48:53]
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"
" /></head>
<body>
<img src="tulips.gif" alt="Tulips" align="left" />
<h1>Mystery Tulip Murderer Strikes</h1>
<br clear="left" />
<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.
[View full size image]
file:///G|/1/0672328860/ch07lev1sec4.html (9 von 12) [19.12.2006 13:48:53]
Images and Text
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
file:///G|/1/0672328860/ch07lev1sec4.html (10 von 12) [19.12.2006 13:48:53]
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
<img src="eggplant.gif" alt="Eggplant" 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.</p>
<br clear="left" />
<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.
[View full size image]
file:///G|/1/0672328860/ch07lev1sec4.html (11 von 12) [19.12.2006 13:48:53]
Images and Text
Note
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.
file:///G|/1/0672328860/ch07lev1sec4.html (12 von 12) [19.12.2006 13:48:53]
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.
[View full size image]
file:///G|/1/0672328860/ch07lev1sec5.html (1 von 7) [19.12.2006 13:48:54]
Images and Links
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.
[View full size image]
Note
file:///G|/1/0672328860/ch07lev1sec5.html (2 von 7) [19.12.2006 13:48:54]
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"
" /><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
<img src="next.gif" alt="Next" />
<img src="back.gif" alt="Back" />
<img src="uparrow.gif" alt="Up" />
Output
Figure 7.13. The basic page, with no icons.
[View full size image]
file:///G|/1/0672328860/ch07lev1sec5.html (3 von 7) [19.12.2006 13:48:54]
