It's a Wrap!

There are various ways to control the way that text wraps around an image.

Browsers treat images as if they were just another character in a sentence, albeit a big one. Because of this, the IMG tag is referred to as being an "inline tag". You can plop them right in the middle of some text and the text will move to accommodate it.

Images, however, can also be shoved off to one side of the window or another, and the inclination of the text is to rush in and fill the vacuum, so to speak. To move an image to the side, use the ALIGN= attribute in the IMG tag. The value can be LEFT or RIGHT.

Using Break Clear to Interrupt Text Flow

You can prevent text from being moved to the left or right side of the image by using an attribute of the BR (line break) tag immediately after the image in the code. If you add the BR tag with the attribute CLEAR= followed by LEFT, RIGHT or ALL, the text won't start again until there is no image along the margin(s) specified.

Adding Space Around Images

By default, some browsers will slam the text right up against the image, leaving no breathing room. To add space on the sides or top and bottom of an image, use the VSPACE= or HSPACE= attributes with the IMG tag. Give them a value in pixels. If you want space around the entire image, you will need to use both of them.

Image Borders

You can easily add a border around an image using the BORDER= attribute with the IMG tag and adding a value in pixels (the image above has a 2 pixel border applied to it). The color of the border will be the same as whatever color the TEXT attribute is set to in the BODY tag, or black if no color is specified.You can also set the border color by nesting the image tag inside of a font tag and then using the font color attribute.

Images are YOUR Image on the Web

The web became the success that it is today because of images. Previously, communication between remote computers was not uncommon. But sharing information that included images was unusual.

If you want your site to be taken seriously and look professional while you communicate a message, be sure to pay attention to its appearance and focus. You want to tell people something. Let them know what it is easily and simply - or else they may lose interest and leave.

Use images judiciously, to make a point or improve the aesthetics of a page. Neophyte web designers tend to overdo their use of images and gimmicks. Don't let graphics or multimedia overpower the information you're trying to convey. And don't let image and multimedia file sizes slow your page loads to a crawl. You don't want to alienate your viewers before they know what you have to say.

Your Assignment

Save this file as C06_yourlastname.html
Open your html file in your browser.
Observe the flow of the images and text when you change the size of your browser window.
Reverse the alignments of BOTH images (ex.: The top image is aligned right, change it to left).
Insert the line break tag <BR> immediately after the top photo and add this attribute and value to it: clear=left
Save the file, then check your browser to see the result.
Apply the following attributes and values to the bottom photo:
1. 5 pixel border
2. Add a space of 10 pixels around the entire bottom image
Save your file. Check it in your browser.
Online students: send me your file by email.