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.
GEEKSPEAKInline 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.
<h2>A complete brain-trust solution</h2> <p>When you consult with us, you'll be amazed at the results. We offer the mostinteresting, creative, out-of-the-box, and forward-thinking ideas <img src=" border="0" width="14" height="9" left" src="/image/library/english/10077_ccc.gif ]">.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>
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.
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.
|
<h2>A complete brain-trust solution</h2> <p><img src="/image/library/english/10077_bulb.gif" width="47" height="84" align="left"> When you consult withus, 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.
|