general tips>
text>
tables>
images>
backgrounds>
links>
other tips>
home>
Learn about images!

How can you modify images? Well, there are a couple of ways. First, you can modify its size. You can also modify how text around the image is displayed. (This is called text wrapping.) You can also give images a name, using the ALT option witin the image tag. Move your mouse over the image above and you'll see an example of this.


Let's start with text wrapping. There are 5 ways to wrap the text. They are:

ALIGN="TOP" This is what happens when you align the text at the top of the image.
ALIGN="MIDDLE" This is what happens when you align the text at the middle of the image.
ALIGN="BOTTOM" This is what happens when you align the text at the bottom of the image.
ALIGN="LEFT" This is what happens when you align the text at the left of the image. If I didn't have a lot of text here it wouldn't look any different than if I had just aligned it at the top, so that's why I'm still going without saying anything. ;-)
ALIGN="RIGHT" This is what happens when you align the text at the right of the image. You can see an interesting effect here. What it's really doing is sending the image as far to the right as it can, and wrapping the text on its left.

To give an image a name like I did for the top one, you just put an ALT="what you want it to say" option in the image tag. For example, the code for the top images is:

<IMAGE SRC="images/images.jpg" ALT="Learn about images!" ALIGN="BOTTOM">

Notice that my image name is "images.jpg", and it is stored within an images folder. If I hadn't referenced the images folder, and just typed

<IMAGE SRC="images.jpg" ALT="Learn about images!" ALIGN="BOTTOM">

This is what would have happened:
Learn about images!

No image! Your browser isn't able to find the image, because it's referenced incorrectly. Always be very careful about how you reference your images. One problem that comes up often for me is when I have pages in sub-folders, that need to reference images out of the regular image directory that is back one folder. The way to reference these is like this:

<IMAGE SRC="../images/images.jpg">

Which would just display the images picture. The "../" part of the SRC option means "back up one directory." You can use this for more than one directory, though I think if you had that many subfolders you probably just need to redesign your site.


The size of your image can also have a great effect on its appearance. I think it'd be best here to again do some more examples. Here are some different size effects: (remember, these options are done within the image tag.)

(no size option)
WIDTH="99" HEIGHT="34"
WIDTH="50" HEIGHT="17"
WIDTH="30" HEIGHT="30"
WIDTH="198" HEIGHT="68"
WIDTH="30%" HEIGHT="90%"

You can see what a broad range of effects you can have on a picture. If you look at the first and second options, they aren't any different, because 99x34 are the picture's natural dimensions. If you leave out the WIDTH and HEIGHT options altogether, the web browser will automatically give it its default dimensions. You can also have the image resize itself automatically in reference to the cell it is contained in. (or the entire page if it isn't in a table.) I wouldn't suggest this last method, though. The image can get pretty funny sized. Take a minute to resize your window and watch how much the last image changes. (it may not even show up after you resize your window!)


There are more options for images, as for everything else we'll talk about here, but I think we'll leave it here for now.