HTML and CSS Reference
In-Depth Information
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. This is what the phrase “inline image” actually
means—it'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>
9
Figure 9.4 shows the difference you can make by putting the image inline with the head-
ing. (I've also shortened the heading and changed it to
<h2>
so that it all fits on one line.)
FIGURE 9.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=”world.gif” />
begun,
<br />
Hath the secret of the sun.
<img src=”sun.gif” /><br />
Love can tell, and love alone, Whence the million stars
<img src=”star.gif” />
were strewn
<br />
Why each atom
<img src=”atom.gif” />
knows its own.
<br />
—Robert Bridges
</blockquote>
Figure 9.5 shows how this block looks.
