WRAPPING TEXT NEXT TO IMAGES:

  Including an image inside a line works fine if you have only line one line of text. One aspect of inline images that I’ve sneakily avoided mentioning so far is that inHTML2.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 tent 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 HTML2.0, you couldn’t. You were restricted to just as single line of text on either side of the image, which limited the kinds of dressings you could do.

To get around this HTML 2.0 , limitation Netscape defined two new value for the align attribute of the <img tag: left and right. These new values were incorporated into HTML 3.2 and are now supported b 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 =”tulips. Gif” alt =”tulips” align =”left”/>

<h1> Mystery tulip Murderer strikes </h1>

<p> someone, or something, 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 fourth 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 tulkps 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.