Inline Images in HTML: The TagAfter you have an image ready to go, you can include it on your web page.. Here's the HTML code for this HTML file, and Figure 7.1 shows how it looks so fa
Trang 1Inline Images in HTML: The <img> Tag
After you have an image ready to go, you can include it on your web page Inline images are placed in HTML documents using the <img> tag This tag, like the <hr> and <br> tags, has no closing tag in HTML For XHTML, you must add an extra space and forward slash to the end of the tag to indicate that it has
no closing tag
The <img> tag has many attributes that enable you to control how the image is presented on the page Many of these attributes are part of HTML 3.2 or HTML 4.01 and might not be understood by some older browsers Still other attributes have been deprecated in favor of style sheets with the HTML 4.01 and XHTML 1.0 specifications
Note
To use the <img> tag in an XHTML-compliant fashion, you need to close it, like this:
<img />
The most important attribute of the <img> tag is src, which is the URL of the image you want to include Paths to images are derived in the same way as the paths in the href attribute of links So, to point to a GIF file named image.gif in the same directory as the HTML document, you can use the following XHTML tag:
<img src="image.gif" />
For an image file one directory up from the current directory, use this XHTML tag:
<img src=" /image.gif" />
And so on, using the same rules as for page names in the href part of the <a> tag You can also point to images on remote servers from the src attribute of an <img> tag, just as you can from the HRef attribute
of a link If you wanted to include the image example.gif from www.example.com on your web page, you could use the following tag:
<img src="http://www.example.com/example.gif" />
Caution
Just because you can use images stored on other servers for your own web pages doesn't
mean that you should There are a lot of legal, ethical, and technical issues involved with
using images on other sites I'll discuss them later in this lesson
Trang 2Adding Alternative Text to Images
Images can turn a simple text-only web page into a glorious visual feast But what happens if someone
is reading your web page using a text-only browser? What if she has image loading turned off so that all your carefully crafted graphics appear as generic icons? All of a sudden, that visual feast doesn't look quite as glorious
There's a simple solution to this problem By using the alt attribute of the <img> tag, you can substitute something meaningful in place of the image on browsers that cannot display it
In text-only browsers, such as Lynx, graphics that are specified using the <img> tag in the original file usually are displayed as the word IMAGE with square brackets around it, like this: [IMAGE] If the image itself is a link to something else, that link is preserved
The alt attribute in the <img> tag provides a more meaningful text alternative to the blank [IMAGE] for your visitors who are using text-only web browsers, or who have graphics turned off on their browsers The alt attribute contains a string with the text you want to substitute for the graphic:
<img src="myimage.gif" alt="[a picture of a cat]" />
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 imagejust a few words or phrases
I bring up image alternatives now for good reason Alternatives to images are optional in earlier versions
of HTML, but they're mandatory in HTML 4.01 Strict and XHTML 1.0 specifications If there's no
appropriate alternative text for an image, you can simply leave it empty, like this: alt=""
Task: Exercise 7.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 six 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
7.1 shows how it looks so far:
Input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>Welcome to the Halloween House of Terror</title>
</head>
<body>
<h1>Welcome to The Halloween House of Terror!!</h1>
<hr />
<p>Voted the most frightening haunted house three years in a row,
Trang 3the <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 />
Springfield, CA 94532</p>
</body>
</html>
Output
Figure 7.1 The Halloween House home page.
[View full size image]
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 excellent 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
Trang 4Now, suppose that you want to place this image above the page heading To do so, add an
<img> tag to the file inside its own paragraph, just before the heading:
<p><img src="house.jpg" alt="House of Terror" /></p>
<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 7.2
Figure 7.2 The Halloween House home page with the haunted
house.
[View full size image]
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
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:
Trang 5<p><img src="house.jpg" alt="House of Terror" />
<img src="house.jpg" alt="House of Terror" /></p>
<h1>Welcome to The Halloween House of Terror!!</h1>
Figure 7.3 shows how the page looks in a browser The two images are adjacent to each
other, as you would expect
Output
Figure 7.3 Multiple images.
[View full size image]
And that's all there is to adding images!
Trang 6Images 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 In fact, this is what the phrase "inline image" actually meansit'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 7.4 shows the difference you can make by putting the image inline with the heading (I've also shortened the heading itself and changed it to <h2> so that it all fits on one line.)
Figure 7.4 The Halloween House page with an image inside the heading.
[View full size image]
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:
Trang 7<blockquote>
Love, from whom the world
<img src="world.gif" alt="World" />begun,<br />
Hath the secret of the sun
<img src="sun.gif" alt="Sun" /><br />
Love can tell, and love alone, Whence the million stars
<img src="star.gif" alt="Star" /> were strewn<br />
Why each atom <img src="atom.gif" alt="Atom" />
knows its own.<br />
Robert Bridges
</blockquote>
Figure 7.5 shows how this block looks
Output
Figure 7.5 Images can go anywhere in text.
[View full size image]
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
Note
Trang 8The align attribute for the <img> tag is deprecated in HTML 4.01 in favor of using style
sheet attributes You'll learn more about style sheets in Lesson 9, "Creating Layouts with
CSS."
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)
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)
align="bottom" Aligns the bottom of the image with the bottom of the line of text
HTML 3.2 provides two other values: left and right These values are discussed in the next section,
"Wrapping Text Next to Images."
Figure 7.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" alt="World" />begun,<br />
Hath the secret of the sun
<img src="sun.gif" alt="Sun" align="top" /><br />
Love can tell, and love alone, Whence the million stars
<img src="star.gif" alt="Star" align="middle" />
were strewn<br />
Why each atom
<img src="atom.gif" alt="Atom" align="bottom" />
knows its own.<br />
</blockquote>
Output
Figure 7.6 Images unaligned, aligned top, aligned middle, and aligned
bottom.
[View full size image]
Trang 9In 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 following values aren't part of HTML 3.2 or 4.01, and are supported unevenly by various browsers These four attributes aren't approved in the proposed specification for XHTML 1.0, and your page won't be verified as XHTML 1.0compliant if they're used:
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) (Neither Netscape nor Internet Explorer handle this setting properly.)
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.)
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
align="absbottom" Aligns the bottom of the image with the lowest item in the line (which may be
below the baseline of the text)
The following code shows these alignment options at work:
Input
<h2>Middle of Text and Line aligned, arrow varies:</h2>
<img src="line.gif" alt="Line" />
Align: Top
<img src="uparrow.gif" alt="Up" align="top" />
Align: Text Top
Trang 10<img src="uparrow.gif" alt="Up" align="texttop" />
<h2>Top of Text and Line aligned, arrow varies:</h2>
<img src="line.gif" alt="Line" />
Align: Absolute Middle
<img src="forward.gif" alt="Next" align="absmiddle" />
Align: Middle
<img src="forward.gif" alt="Next" align="middle" />
<h2>Top of Text and Line aligned, arrow varies:</h2>
<img src="line.gif" alt="Line" />
Align: Baseline / Bottom
<img src="down.gif" alt="Down" align="baseline" />
Align: Absolute Bottom
<img src="down.gif" alt="Down" align="absbottom" />
Figure 7.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
Output
Figure 7.7 Alignment options in Firefox.
[View full size image]