Using Pictures

Pictures may be added to any web page by using the (img src=) tag, as long as they are stored in the .gif or .jpeg format. (the image tag does not have a closing tag)

A good example of an image you can check out is one that I took of our house during a snowstorm in December of 2000.
This is just the raw image, shown using the (img src="location url")tag, as I saved it originally, without any modifications written into the html page to allow for different browsers, the size of the browser window, etc (Note that if you change the size of the browser window, you just cut the image off and lose part of it, even though the text reorganizes itself to fit the page).:
Now, here is the same image, where I have given the tag a fixed pixel width attribute, so that it will appear as a known size on the screen, using this tag (img src="http://www.gardenrealm.com/htmlpracticeinfo/snowhouse.jpg" WIDTH=450):

You can do several things to make the picture fixed, or have it be variable depending on the size of the browser window that is opened, for example:

	1.	 Give the tag both WIDTH and HEIGHT attributes in pixels, which may
		 distort the picture, but the size of the picture will stay 
		 fixed, regardless of the open window size.
	2.	 Give the tag either WIDTH or HEIGHT attributes, and whichever
		 one you don't give will be calculated by the browser, keeping
		 the dimensions of the items in the picture true to each other.
	3.	 Give the tag a WIDTH=some% attribute, and the entire picture 
		 will appear on the page based on the size of the browser window.
	4.	 Give the tag both WIDTH and HEIGHT as % of browser page (keep 
		 in mind that like #1, above, giving both W and H as a percent
		 will most likely distort the appearance of the picture.)	
		 

Add the (ALT="definition of picture")tag to tell people who are waiting for the pic to load what they are waiting for or tell them what they are missing if they have their images shut off in their browser. Here is the same picture, with the width set at 40% of the page, using the alt tag. The whole tag is (img src="http://www.gardenrealm.com/htmlpracticeinfo/snowhouse.jpg" WIDTH=40% ALT="Snow covered house photo"):
Snow covered house
Experiment with the size of the browser window to see how the picture stays at the correct percentage of the page width!

Using pictures as links


In order to make a picture link to another web site, simply enclose the image tag inside tags for a standard text link:
(a href="http://www.savvy.com")(img src="http://www.gardenrealm.com/htmlpracticeinfo/snowhouse.jpg" align=center WIDTH=25%) (/a)

See that I also added the (align=center) inside the img tag, to make the picture/link appear in the center of the page.

Go back to page one, Common Tags in html.