|
|
 |
|
|
 |
|
|
|
 |
|
Section Three - Web Page Graphics:
Lesson 3-3: Images and Text
In the last lesson, you learned how to place images on your web page.
In this lesson you will learn how to control the way text flows around images.
Text flow around images is controlled by the ALIGN attribute of the IMG tag.
Text can be aligned LEFT, RIGHT, TOP, MIDDLE, or BOTTOM. An IMG tag with an
ALIGN attribute looks like this:
 img src="myimage.ext" align="left"
Here are some examples of different IMG ALIGN values:
Fig. 1: No ALIGN attribute used
If you do not use an ALIGN attribute with an image tag,
the image will be aligned to the left margin, and text will appear to the right of the image,
starting at one line above the bottom of the image. The image of the dog in Fig. 1 uses no ALIGN attribute.
Fig. 2: ALIGN="BOTTOM"
If you use the BOTTOM value of the ALIGN attribute, the image will be aligned
to the left margin, and text will appear to the right of the image starting at one line above the bottom
of the image. The image in Fig. 2 uses BOTTOM alignment. Using BOTTOM alignment is that same as using
no alignment.
Fig. 3: ALIGN="MIDDLE"
If you use the MIDDLE value of the ALIGN attribute, the image will be aligned
to the left margin, and one line of text will appear to the right of the image starting at mid-height of the image.
Any text longer than one line is wrapped to one line below the image.
The image in Fig. 3 uses MIDDLE alignment. MIDDLE alignment is usually used only for short captions.
Fig. 4: ALIGN="TOP"
If you use the TOP value of the ALIGN attribute, the image will be aligned
to the left margin, and one line of text will appear to the right of the image starting in the top of the image.
Any text longer than one line is wrapped to one line below the image. The image in Fig. 4 uses TOP alignment.
Like BOTTOM and MIDDLE, TOP alignment is also used mostly for short captions.
Fig. 5: ALIGN="LEFT"
If you use the LEFT value of the ALIGN attribute, the image will be aligned
to the left margin, and text will appear to the right of the image, starting at the top of the image.
Any text longer than one line flows down along the right side of the image.
The image in Fig. 5 uses LEFT alignment. LEFT alignment is used quite often for images on web pages.
Fig. 6: ALIGN="RIGHT"
If you use the RIGHT value of the ALIGN attribute, the image will be aligned
to the right margin, and text will appear to the left of the image, starting at the top of the image.
Any text longer than one line flows down along the left side of the image.
The image in Fig. 6 uses RIGHT alignment. RIGHT alignment is also used quite often.
Practice:
All right, take a look at the alignment values explained on this page. Choose one you like.
Then, open your source file in Notepad, and add the ALIGN attribute to the IMG tag you
added in the last lesson. Use one of the ALIGN values shown on this page.
Just after your IMG tag, type a paragraph describing your photo. If you don't
want to take the time to write your own description, just copy one of the paragraphs
above, and paste it into your file.
Then, try changing the value of the ALIGN attribute.
Save your file, and reload the page in your browser after each change.
Watch how the text alignment changes.
When finished, your file should look something
like this.
Review:
- The ALIGN attribute of the IMG tag is used to align text around an image.
- The ALIGN attribute can take the following values: TOP, MIDDLE, BOTTOM, LEFT, or RIGHT.
- An IMG tag with no ALIGN attribute is aligned in the same way as the BOTTOM value.
|
Congratulations, you have now completed all of the lessons in the Images section.
It's now time to check your understanding. Go on to the next page for a self-scoring quiz.
Don't worry, your score is not recorded. You can take the quiz as many times as you like.
Also, remember to look at the top of the quiz page for feedback and helpful explanations.
|
|
| |
|
| |
|
Last revision: 2002/03/04,
Copyright ©
|
|
|
