Dottie's Virtual Notebook

DOTTIE'S VIRTUAL NOTEBOOK - VU HTML1 - SUMMER 2006 - Page 3

IMAGE NOTES

Examples of Graphic Links
Examples of Image Placement

Examples involving Graphics Link

Visit Eagle's Lair for flowers like this rose image

Visit Eagle's Lair for flower images to use in great VU PSP classes.

A link for the source of the horse graphics on the home page using the orginal width and height attributes of 400X40.

A link for the source of the horse graphics on the home page using different width and height attributes of 500X60.

Back to the Top

Examples involving Image Placement

Example of image with default placement and border set to 0

Any text immediately following the image tag will start here and continue under the image.

Example of centered image using center tag and border set to 3

This is where following text starts for a centered image using the center tag.

Example of image using align attribute set to left

Using a value of left will place the image to the left of the text and line up against the left margin. The text following will flow next to it. You can use line breaks to separate lines. If you have enough text it will eventually "wrap" around your image. If you have enough text it will eventually "wrap" around your image. If you have enough text it will eventually "wrap" around your image. If you have enough text it will eventually "wrap" around your image. If you have enough text it will eventually "wrap" around your image. If you have enough text it will eventually "wrap" around your image. If you have enough text it will eventually "wrap" around your image. If you have enough text it will eventually "wrap" around your image. If you have enough text it will eventually "wrap" around your image.

Example of image using align attribute set to left along with br clear="all" tag

Using a value of left will place the image to the left of the text and line up against the left margin.
br clear="all" will stop the text and start again immediately after the image.

Example of image using align attribute set to right

Using a value of right will make the image line up against the right margin. The text following will flow to the left of it. You can use line breaks to separate lines. As with the align="left" tag, if you have enough text it will eventually "wrap" under your image. This type of formatting almost requires a large amount of text to look good. This type of formatting almost requires a large amount of text to look good. This type of formatting almost requires a large amount of text to look good. This type of formatting almost requires a large amount of text to look good. This type of formatting almost requires a large amount of text to look good. This type of formatting almost requires a large amount of text to look good. This type of formatting almost requires a large amount of text to look good. This type of formatting almost requires a large amount of text to look good. This type of formatting almost requires a large amount of text to look good.

Examples of image using align attribute set to top, then middle, then bottom and also changing border sizes from 1 to 4 to 7.

Using a top attribute for align will start the text at the top of the image. If more than one line of text follows after the image, it will be put below the image. If more than one line of text follows after the image, it will be put below the image.

Using a middle attribute for align will start the text in the middle of the image. If more than one line of text follows after the image, it will be put below the image. If more than one line of text follows after the image, it will be put below the image.

Using a bottom attribute for align will start the text at the bottom of the image. If more than one line of text follows after the image, it will be put below the image. If more than one line of text follows after the image, it will be put below the image.