Web Site Building · Learning Basic HTML · Manipulating Images

What this is about:

Way back in Lesson 3 we showed you how to manipulate text placement on your page. If anything, it's even easier to do with images. As with text, if you don't specify, the default is to align an image on the left of a page. You can, however, place them on the right or in the center.

Alignment and Size

<p " align="left"><img src="coin.jpg"></p>

<p " align="center"> <img src="coin.jpg"></p>

<p " align="right"><img src="coin.jpg"></p>

As you will notice from the examples above, the key is the align attribute of the <P> tag. The options are left, center, and right. There is also a valign attribute that can be used for vertical alignment. The options are top, center, and bottom. You may also use the alignment attributes on the IMG tag, as well as in many more advanced constructs.

Again as with text, you may resize images with HTML tag attributes. Image files on a computer monitor are made up of thousands of picture elements, or "pixels", for short. In general, most images on the web are generated with a depth of 72 by 100 pixels per inch on Windows systems and 75x100 on MacIntosh computers. There are different ratios of course, that produce varied quality of output. You needn't concern yourself with that here, just suffice to say that modern graphics editing software has LOTS of options.

To resize images on your page you use the WIDTH and HEIGHT attributes of the IMG tag. As their names imply, these options allow control of image display size, even dynamically. For an image to display its optimum quality, the attributes you specify must match the actual size of the image. But you can use width and height to shrink or enlarge your graphics. The coin graphic below has an actual size of 100 pixels width and 100 pixels height. You can stretch the image in either direction using the appropriate attributes:

Working with graphic images can be both supremely enjoyable, as well as intensely aggravating. Be prepared to spend a majority of your development time working on graphics and positioning.

<img src="coin.jpg" width="100" height="80">

<img src="coin.jpg" width="80" height="100">

<img src="coin.jpg" width="40" height="40">

As you can see, the false sizes really detract from the image quality. As a general rule, it is better to shrink images, rather than enlarging them. One more item before we go. Another attribute of the IMG tag is ALT or alternate. This enables you to assign a text description to the image. It serves two purposes; 1) it allows visitors with non-graphical browsers (yes, there still are some) to see what would be there, and 2) it opens a tip tool box in the browser that can be filled with any information you like. Hover your mouse over the coin image below to see the ALT text.

This is an example of using ALT text

To us, working with graphic images can be both supremely enjoyable, as well as intensely aggravating. Be prepared to spend a majority of your development agenda in this arena. Please take some time now to review what you've learned today, experiment with it on your web page, utilize your browser's view source feature, then come back and we'll summarize it all for you.

Proceed to HTML Basics Tutorial 7.

go to the next page

Return to HTML Basics Tutorial 5.

go to the next page