Chapter 6, Lesson 7
Chapter 6, Lesson 7![[INDEX]](icon_bki.gif){kind=icon}
Ch
6,
L
7 -
Wrapping Text Around Images
If you already know how to enable wrapping of text around images , you can skip this lesson.
In the last lesson, we saw that the text inline with an image drops down to the line below the image when a line-break occurs. This is fine for picture captions (even preferrable), but sometimes we would like the text to simply continue word-wrapping around the image, without a caption. HTML gives us two additional 'ALIGN' attribute values for doing this: 'RIGHT' and 'LEFT'.
When the 'LEFT' value is applied to the 'ALIGN' attribute, the browser places the referenced image at the left margin at the first opportunity it has after the occurence of the 'IMG' tag. To align an image left, with word wrapping, we use the image tag as follows:
<IMG SRC="image-filename" ALIGN="LEFT">
When the 'RIGHT' value is applied to the 'ALIGN' attribute, the browser places the referenced image at the right margin at the first opprtunity it has after the occurence of the 'IMG' tag. To align an image right, with word wrapping, we use the image tag as follows:
<IMG SRC="image-filename" ALIGN="LEFT">
Let's see it in source code and demonstration:
Did you know there are a lot of foxes and dogs on Saturn. One of the things you'll hear most in stories about Saturn is this tired but familiar anecdote: The quick brown fox jumps over the lazy dog. <IMG SRC="saturn0.gif" ALIGN="LEFT"> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. <IMG SRC="saturn0.gif" ALIGN="RIGHT"> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. If that danged lazy dawg of yours don't get off my property, I'm gonna have to sic that fool brown fox on it
Did you know there are a lot of foxes and dogs on Saturn? It's true. One
of the things you'll hear most in stories about Saturn is this tired
but familiar anecdote: The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
If that danged lazy dawg of yours don't get off my property, I'm gonna have to sic that fool brown fox on it
This is a pretty nifty feature, as you can see. Try to notice at what point after the browser encounters the 'IMG' tag in the HTML file, it performs the specified alignment right or left.
Be aware that some of the older browsers don't support the 'ALIGN="LEFT"' and 'ALIGN="RIGHT"' attributes, and upon encountering them, will simply place the image inline with the text, then drop to the next line under the image.
... leave e-mail ...
