Images: Add an Image to a Page

	To insert an image into your web page, use the IMG SRC tag with the filename of the image. Because you will have placed your images in a separate images folder within the homepage folder, you must use the entire pathname for the image.	HINT: IMG SRC stands for Image Source.
Code: <IMG SRC="images/filename.gif">
	By convention pathnames are typed in lower case. You should also use quotation marks around the path and file names in the tag.
	Some visitors to your web site might have turned off the graphics display in their browsers to speed download time. Other visitors might be visually impaired. To accommodate these visitors and to give others a sense of what is about to appear on a page, always add the ALT attribute with a brief description of your image to the IMG SRC tag.
Code: <IMG SRC="images/filename.gif" ALT=maze>
	You can also add the HEIGHT and WIDTH attributes to the IMG SRC tag to specify the size of the image in pixels; using these attributes aids the browser to load the image more quickly.
	You will want to exert some control over the position of your image as it relates to the other elements on your page.
	You can place the <BR> tag after the image to force subsequent text below the image.
	Here I used the <BR> tag.
Code: <img src="images/maze.jpg" alt="maze" width="84" height="80"><br>
	You can use the HSPACE and VSPACE attributes with values in pixels to clear a horizontal and/or a vertical space around an image.	HINT: HSPACE stands for Horizontal Space; VSPACE stands for Vertical Space.
	Here I created a vertical space of 50 pixels around the image. I also changed the height and width of the image to make it smaller.
Code: <img src="images/maze.jpg" VSPACE="25" width="42" height="40" alt="maze">
	You can use the ALIGN attribute with either the RIGHT or the LEFT value to force the text to wrap around an image. Here is an image that I have added the ALIGN= LEFT attribute and value to. Notice how the text wraps itself around the image. I can also make the text line up with the top, bottom or middle of an image.
Code: <img src="images/mazesm.jpg" alt="Small Maze" ALIGN="LEFT" width="37" height="35">
	Here is the same image; this time I have added the ALIGN=RIGHT attribute and value to it. Notice how the text wraps itself around the image. I can also make the text line up with the top, bottom or middle of an image.
Code: <img src="images/mazesm.jpg" alt="Small Maze" ALIGN="RIGHT" width="32" height="30">
	You can use the ALIGN attribute with the TOP, BOTTOM, or MIDDLE values to cause the first line of the text that follows the image to align itself to the specified part of the image.
You can align text to the middle of an image.
Code: <img src="images/mazesm.jpg" alt="maze" ALIGN="MIDDLE" WIDTH="84" HEIGHT="80">
	Aligning text and images on a web page is a tricky process, especially if you are coding HTML. The best way to force your images to display where you want them to in relationship with your text is to place them in table cells. See HTML: Tables for information on how to use tables on your web pages.