Chapter 30. Positioning Inline Images with HTML

Inline images are images that appear inside a block of text. These are typically content images, such as charts, graphs, or photos, as opposed to logos, nav-bar buttons, and other graphical interface elements, which usually have their own table cells or CSS divs in the page layout.

GEEKSPEAK

Inline images are images that appear inside a block of HTML text.

The simplest way to add an inline image in HTML is to insert the img tag into the text exactly where you want the image to appear, as in Figure 30.1. As you can see, this method is serviceable but not very aesthetically pleasing. If the image is taller than the point size of the surrounding text, the browser splits the lines of type in the most unattractive way imaginable.

Listing 30.1. View Source for Figure 30.1.

[View full width]

 <h2>A complete brain-trust solution</h2> <p>When you consult with us, you'll be amazed at the results. We offer the most  interesting, creative, out-of-the-box, and forward-thinking ideas <img src="/books/2/30/1/html/2/images/bulb .gif" width="47" height="84"> in the industry. You won't believe what we'll come up with  next. We have won several international awards for our ideas alone, including the  prestigious Nobel Prize. You simply won't find better ideas anywhere.</p> 

Figure 30.1. Dropping the img tag into a block of text creates an inline image, but the browser splits the lines of type without much artful subtlety.

The align attribute of the img tag helps you to place the image more effectively, as in Figure 30.2. Just choose a value for the align attribute from Table 30.1. You can float the image to the left or right of the entire block of text, or you can align the image vertically to the top, middle, or bottom of the line of text in which the inline image appears.

Figure 30.2. Use the align attribute of the image tag to tell the browser how to place the image in relation to the surrounding text.

Table 30.1. Align Attribute Values for the img Tag

VALUE	EFFECT
bottom	Vertically aligns the bottom of the image with the bottom or baseline of the line of text
left	Floats the image to the left of the block of text
middle	Vertically aligns the image with the middle of the line of text
right	Floats the image to the right of the block of text
top	Vertically aligns the top of the image with the top of the line of text

GEEKSPEAK

Floating an inline image means pushing it to the left or right of a block of text so that the text wraps around it.

Listing 30.2. View Source for Figure 30.2.

[View full width]

 <h2>A complete brain-trust solution</h2> <p><img src="/books/2/30/1/html/2/images/bulb.gif" width="47" height="84" align="left"> When you consult with  us, you'll be amazed at the results. We offer the most interesting, creative,  out-of-the-box, and forward-thinking ideas in the industry. You won't believe what we'll  come up with next. We have won several international awards for our ideas alone, including  the prestigious Nobel Prize. You simply won't find better ideas anywhere.</p> 

TIP

To float an inline image to the right or left of a block of text, move the img tag to the beginning of the block of text, as in the View Source of Figure 30.2.