Tự học HTML và CSS trong 1 giờ - part 25 potx
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 (1.46 MB, 10 trang )
ptg
▼
Most browsers interpret the string you include in the alt attribute as a literal string. That
is, if you include any HTML tags in that string, they’ll be printed as-is rather than being
parsed and displayed as HTML code. Therefore, you can’t use whole blocks of HTML
code as a replacement for an image—just a few words or phrases.
I bring up image alternatives now for good reason. The alt attribute is required in
XHTML 1.0 but is optional in HTML5 . If there’s no appropriate alternative text for an
image, you can simply leave it empty, like this: alt=““.
Task: Exercise 9.1: Adding Images to a Page
Here’s the web page for a local haunted house that’s open every year at Halloween.
Using all the excellent advice I’ve given you in the preceding eight lessons, you should
be able to create a page like this one fairly easily. Here’s the HTML code for this HTML
file, and Figure 9.1 shows how it looks so far:
Input ▼
<!DOCTYPE html>
<html>
<head>
<title>Welcome to the Halloween House of Terror</title>
</head>
<body>
<h1>Welcome to The Halloween House of Terror</h1>
<p>
Voted the most frightening haunted house three years in a
row, the <strong>Halloween House of Terror</strong>
provides the ultimate in Halloween thrills. Over
<strong>20 rooms of thrills and excitement</strong> to
make your blood run cold and your hair stand on end!
</p>
<p>
The Halloween House of Terror is open from <em>October 20
to November 1st</em>, with a gala celebration on
Halloween night. Our hours are:
</p>
<ul>
<li>Mon-Fri 5PM-midnight</li>
<li>Sat & Sun 5PM-3AM</li>
<li><strong>Halloween Night (31-Oct)</strong>: 3PM-???</li>
</ul>
<p>
The Halloween House of Terror is located at:<br />
The Old Waterfall Shopping Center<br />
1020 Mirabella Ave<br />
216
LESSON 9: Adding Images, Color, and Backgrounds
,
Download from www.wowebook.com
ptg
Springfield, CA 94532
</p>
</body>
</html>
Inline Images in HTML: The <img> Tag
217
9
Output .
FIGURE 9.1
The Halloween
House home page.
So far, so good. Now you can add an image to the page. Suppose that you happen to
have an image of a haunted house lying around on your hard drive; it would look excel-
lent at the top of this web page. The image, called house.jpg, is in JPEG format. It’s
located in the same directory as the halloween.html page, so adding it to the page will
be easy.
Now, suppose that you want to place this image above the page heading. To do so, add
an <img> tag to the file, just before the heading:
<div><img src=“haunted_house.png” alt=“House of Terror” /></div>
<h1>Welcome to The Halloween House of Terror</h1>
Images, like links, don’t define their own text elements, so the <img> tag has to go inside
a paragraph or heading element.
When you reload the halloween.html page, your browser should include the haunted
house image on the page, as shown in Figure 9.2.
If the image doesn’t load and your browser displays a funny-looking icon in its place,
make sure that you entered the filename properly in the HTML file. Image filenames are
case-sensitive, so all the uppercase and lowercase letters have to be correct.
If the case isn’t the problem, double-check the image file to make sure that it is indeed a
GIF or JPEG image and that it has the proper file extension.
, ,
Download from www.wowebook.com
ptg
FIGURE 9.2
The Halloween
House home page
with the haunted
house.
218
LESSON 9: Adding Images, Color, and Backgrounds
If one image is good, two would be really good, right? Try adding another <img> tag
next to the first one, as follows, and see what happens:
Input ▼
<div><img src=”haunted_house.png” alt=”House of Terror” />
<img src=”haunted_house.png” alt=”House of Terror” /></div><h1>Welcome to The
Halloween House of Terror</h1>
Figure 9.3 shows how the page looks in a browser. The two images are adjacent to each
other, as you would expect.
Output .
FIGURE 9.3
Multiple images.
▲
And that’s all there is to adding images!
,
Download from www.wowebook.com
ptg
Images and Text
In the preceding exercise, you put an inline image on a page with text below it. You also
can include an image inside a line of text. This is what the phrase “inline image” actually
means—it’s in a line of text.
To include images inside a line of text, just add the <img> tag inside an element tag
(
<h1>, <p>, <address>, and so on), as in the following line:
<h2><img src=“house.jpg” alt=“House of Terror” />The Halloween House of
Terror!!</h2>
Figure 9.4 shows the difference you can make by putting the image inline with the head-
ing. (I’ve also shortened the heading and changed it to <h2> so that it all fits on one line.)
Images and Text
219
9
FIGURE 9.4
The Halloween
House page with
an image inside
the heading.
The image doesn’t have to be large, and it doesn’t have to be at the beginning of the text.
You can include an image anywhere in a block of text, as in the following:
Input ▼
<blockquote>
Love, from whom the world <img src=”world.gif” /> begun,<br />
Hath the secret of the sun. <img src=”sun.gif” /><br />
Love can tell, and love alone, Whence the million stars
<img src=”star.gif” /> were strewn<br />
Why each atom <img src=”atom.gif” /> knows its own.<br />
—Robert Bridges
</blockquote>
Figure 9.5 shows how this block looks.
Download from www.wowebook.com
ptg
Output .
FIGURE 9.5
Images can go
anywhere in text.
220
LESSON 9: Adding Images, Color, and Backgrounds
Text and Image Alignment
In these examples, the bottom of the image and the bottom of the text match up. The
<img> tag also includes the align attribute, which enables you to align the top or bottom
of the image with the surrounding text or other images in the line.
The align attribute for the <img> tag was deprecated in HTML
4.01 in favor of using CSS and has been dropped from HTML5
completely. However, you may find yourself using it if you’re using
a content management system or some other application to pub-
lish Web content. In many cases it’s easier to modify your markup
than it is to alter the style sheets for the site. Alternatively, you
can adjust the
style attribute with your img tags.
Standard HTML 2.0 defines three basic values for align:
align=“top” Aligns the top of the image with the topmost part of the
line (which may be the top of the text or the top of
another image). This is the same as
vertical-align:
top in CSS.
align=“middle” Aligns the center of the image with the middle of the line
(usually the baseline of the line of text, not the actual
middle of the line). This is the same as
vertical-align:
middle in CSS.
align=“bottom” Aligns the bottom of the image with the bottom of the line
of text. This is the same as
vertical-align: bottom in
CSS.
There are also two other values: left and right. These values are discussed in the next
section, “Wrapping Text Next to Images.”
NOTE
Download from www.wowebook.com
ptg
Figure 9.6 shows the Robert Bridges poem from the previous section with the world
image unaligned, the sun image aligned to the top of the line, the star image aligned to
the middle, and the atom aligned to the bottom of the text.
Input ▼
<blockquote>
Love, from whom the world
<img src=”world.gif” /> begun,<br />
Hath the secret of the sun.
<img src=”sun.gif” align=”top” /><br />
Love can tell, and love alone, Whence the million stars
<img src=”star.gif” align=”middle” /> were strewn<br />
Why each atom <img src=”atom.gif” align=”bottom” />
knows its own.<br />
—Robert Bridges
</blockquote>
Images and Text
221
9
Output .
FIGURE 9.6
Images unaligned,
aligned top,
aligned middle,
and aligned
bottom.
In addition to the preceding values, several other nonstandard values for align provide
greater control over precisely where the image will be aligned within the line. The fol-
lowing values are unevenly supported by browsers and have been superseded by CSS
equivalents, too.
align=“texttop” Aligns the top of the image with the top of the tallest
text in the line (whereas
align=“top” aligns the
image with the topmost item in the line). Use
verti-
cal-align: text-top in CSS instead.
align=“absmiddle” Aligns the middle of the image with the middle of the
largest item in the line. (
align=“middle” usually
aligns the middle of the image with the baseline of the
text, not its actual middle.) No CSS equivalent.
Download from www.wowebook.com
ptg
align=“baseline” Aligns the bottom of the image with the baseline of
the text. align=“baseline” is the same as
align=“bottom”, but align=“baseline” is a more
descriptive name. This is the default vertical alignment
and can be written in CSS as
vertical-align:
baseline.
align=“absbottom” Aligns the bottom of the image with the lowest item in
the line (which may be below the baseline of the text).
Replaced in CSS by
vertical-align: text-bottom.
The following code shows these alignment options at work:
Input ▼
<h2>Middle of Text and Line aligned, arrow varies:</h2>
<p>
<img src=”line.gif” />
Align: Top <img src=”uparrow.gif” align=”top” />
Align: Text Top <img src=”uparrow.gif” align=”texttop” />
</p>
<h2>Top of Text and Line aligned, arrow varies:</h2>
<p>
<img src=”line.gif” />
Align: Absolute Middle <img src=”forward.gif” align=”absmiddle” />
Align: Middle <img src=”forward.gif” align=”middle” />
</p>
<h2>Top of Text and Line aligned, arrow varies:</h2>
<p>
<img src=”line.gif” />
Align: Baseline / Bottom <img src=”down.gif” align=”baseline” />
Align: Absolute Bottom <img src=”down.gif” align=”absbottom” />
</p>
Figure 9.7 shows examples of all the options as they appear in a browser. In each case,
the line on the left side and the text are aligned with each other, and the position of the
arrow varies.
222
LESSON 9: Adding Images, Color, and Backgrounds
Download from www.wowebook.com
ptg
Output .
FIGURE 9.7
Image alignment
options.
Images and Text
223
9
Wrapping Text Next to Images
Including an image inside a line works fine if you have only one line of text. To control
the flow of text around an image, you need to use CSS or the align attribute of the img
tag. Images are just like any other element as far as the float property goes, so you can
use the float and clear CSS properties to control text flow around them, as discussed in
the previous lesson. HTML5 does not support the align attribute, but all the browsers
that are currently in use do, and many people still use it.
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 ▼
<p><img src=”tulips.gif” align=”left” /></p>
<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>
Download from www.wowebook.com
ptg
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>
<p>
“It started at the south end of town,” said Augustin Frouf,
a retired ladder-maker who has personally planted over five
hundred pink lily-flowered tulips. “They hit the houses up
on Elm Street, and moved down into town from there. After
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.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.
224
LESSON 9: Adding Images, Color, and Backgrounds
Output .
FIGURE 9.8
Text and images
aligned.
Download from www.wowebook.com
ptg
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 the clear CSS property. This enables
you to stop the line wrapping where appropriate.
As mentioned in Lesson 8, “Using CSS to Style a Site,” the clear property 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
For example, the following code snippet shows a picture of a tulip with some text
wrapped next to it. Adding a style attribute to the first paragraph with clear set to
left breaks the text wrapping after the heading and restarts the text after the image:
Input ▼
<p><img src=”tulips.gif” align=”left” /></p>
<h1>Mystery Tulip Murderer Strikes</h1>
<p style=”clear: left”>
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>
<p>
“It started at the south end of town,” said Augustin Frouf,
a retired ladder-maker who has personally planted over five
hundred pink lily-flowered tulips. “They hit the houses up
on Elm Street, and moved down into town from there. After
Images and Text
225
9
Download from www.wowebook.com
