Basic Web Page Four
Images

1. Here are some images downloaded from the IconBAZAAR

You can download them to work with on your pages. Save them to the same directory as you are saving your webpages.

This image has no attributes specified:

2. This arrow is linked back to Assignment Three. It has the attribute border="1". Some browsers will put a border on a linked image by default, so specify border="0" if you do not want a border.

3. To get the text to wrap around the image, specify an alignment. Here is another arrow, with an attribute of align="right".

4. Unfortunately when an image takes up more than a space, the browser just lets it overlap. Here we can get the space better by including a code at the end of the paragraph <br clear="all">. The alignment of the arrow is still align="right". See Castro p. 90 for other ways to use the BR tag in alignment.

5. The text in example No,. 2 above will wrap around the text if you specify that the image is to be aligned left. On p. 93 Castro explains how you can also line up the top, middle and bottom of the image to the text baseline. This arrow is still linked back to Assignment Three. It has the attribute border="1". Some browsers will put a border on a linked image by default, so specify border="0" if you do not want a border.



6. It's best to set the width and height attribute of your image so that it will load faster. In this case, width=400 height=29. Some programs will do this automatically for you. Castro discusses other methods for finding out the size of a graphic on pp. 84-85.

In this image, I have squished the picture merely by changing the width from 400 to 200. However, this does not work on all browsers, and it's a terrible waste of resources. It's better to learn to make smaller images that load faster and look better. This graphic is also aligned left, so the text wraps.

This little image has become my personal logo. It appears on my home page and throughout my site to take you to the home page. This is way too long for an alternative text, however.7. One important tag for images is alt="Text", in which you insert a text that will substitute for the image. This helps people who are using text-only browsers (by preference or for accessibility.) In some browsers, the ALT Text will show when the image is loading, or if you place your mouse over the image. I have also put some space around this image using the instructions from Elizabeth Castro on p. 91.
8. TIP Organize your images into sub-directories on your site. This makes it easier to maintain and move. Use relative URLs to access the images.
Back to Green Allegheny Project Home Page
Back to Assignment Three

http://merlin.allegheny.edu/employee/a/acarr/green/basic4.html
Posted on February 12, 2001.
Author is Amelia Carr, acarr@allegheny.edu