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

Inline Images in HTML: The <img> Tag



Inline 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=" />

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.
file:///G|/1/0672328860/ch07lev1sec3.html (1 von 5) [19.12.2006 13:48:52]
Inline Images in HTML: The <img> Tag

Adding 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"
" /><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,
file:///G|/1/0672328860/ch07lev1sec3.html (2 von 5) [19.12.2006 13:48:52]

Inline Images in HTML: The <img> Tag
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 &amp; 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.

file:///G|/1/0672328860/ch07lev1sec3.html (3 von 5) [19.12.2006 13:48:52]
Inline Images in HTML: The <img> Tag
Now, 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:
file:///G|/1/0672328860/ch07lev1sec3.html (4 von 5) [19.12.2006 13:48:52]
Inline Images in HTML: The <img> Tag
Input
<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!


file:///G|/1/0672328860/ch07lev1sec3.html (5 von 5) [19.12.2006 13:48:52]
Images and Text



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. 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:
file:///G|/1/0672328860/ch07lev1sec4.html (1 von 12) [19.12.2006 13:48:53]
Images and 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" /><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

file:///G|/1/0672328860/ch07lev1sec4.html (2 von 12) [19.12.2006 13:48:53]
Images and Text
The 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]
file:///G|/1/0672328860/ch07lev1sec4.html (3 von 12) [19.12.2006 13:48:53]
Images and Text

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 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
file:///G|/1/0672328860/ch07lev1sec4.html (4 von 12) [19.12.2006 13:48:53]
Images and Text
<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]
file:///G|/1/0672328860/ch07lev1sec4.html (5 von 12) [19.12.2006 13:48:53]