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="/books/2/631/1/html/2/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.

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="/books/2/631/1/html/2/world.gif" alt="World" />begun,<br /> Hath the secret of the sun. <img src="/books/2/631/1/html/2/sun.gif" alt="Sun" /><br /> Love can tell, and love alone, Whence the million stars <img src="/books/2/631/1/html/2/star.gif" alt="Star" /> were strewn<br /> Why each atom <img src="/books/2/631/1/html/2/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.

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

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="/books/2/631/1/html/2/world.gif" alt="World" />begun,<br /> Hath the secret of the sun. <img src="/books/2/631/1/html/2/sun.gif" alt="Sun" align="top" /><br /> Love can tell, and love alone, Whence the million stars <img src="/books/2/631/1/html/2/star.gif" alt="Star" align="middle" /> were strewn<br /> Why each atom <img src="/books/2/631/1/html/2/atom.gif" alt="Atom" align="bottom" /> knows its own.<br /> </blockquote>

Output

Figure 7.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 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="/books/2/631/1/html/2/line.gif" alt="Line" /> Align: Top <img src="/books/2/631/1/html/2/uparrow.gif" alt="Up" align="top" /> Align: Text Top <img src="/books/2/631/1/html/2/uparrow.gif" alt="Up" align="texttop" /> <h2>Top of Text and Line aligned, arrow varies:</h2> <img src="/books/2/631/1/html/2/line.gif" alt="Line" /> Align: Absolute Middle <img src="/books/2/631/1/html/2/forward.gif" alt="Next" align="absmiddle" /> Align: Middle <img src="/books/2/631/1/html/2/forward.gif" alt="Next" align="middle" /> <h2>Top of Text and Line aligned, arrow varies:</h2> <img src="/books/2/631/1/html/2/line.gif" alt="Line" /> Align: Baseline / Bottom <img src="/books/2/631/1/html/2/down.gif" alt="Down" align="baseline" /> Align: Absolute Bottom <img src="/books/2/631/1/html/2/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.

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 <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="/books/2/631/1/html/2/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.

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

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> <img src="/books/2/631/1/html/2/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.

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 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="/books/2/631/1/html/2/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="/books/2/631/1/html/2/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.

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.