Inserting Images

Once you have the image you want to use you can insert it into your web page.
Next you’ll need to do is upload the graphic to your web server.  Your web hoster will either provide the environment for you to upload your images or you'll have to use an FTP program.
When you upload the graphic, make sure you pay attention to what folder you’re putting it into because that will affect how you write the HTML.
Let’s say you upload the graphic called "apple.gif" to your "images" folder on your web server. The image folder is located inside your "root" directory.
Your HTML code will look like this:
<img src="images/apple.gif">
Now let’s say you have uploaded the graphic to the "fruit" folder/directory that is located inside of the images folder then the code would appear as:
<img src="images/fruit/apple.gif">

The Alt Tag

If you want text to pop up when you run the mouse over the graphic, then you need to add the alt tag.
<img src="images/apple.gif" alt="This is my apple">

Specify Height and Width

If you want to adjust the height and width of the image then you need to use the height and width tags:
<img src="images/apple.gif" alt="This is my apple" height="100" width="150">
It is recommended that you always include the height and width of your images because it makes your pages load faster.

Adding a Border

To add a border to your image need the "border" attribute. It’s very simple:
<img src="images/apple.gif" border="5"> The 5 represents the thickness of the border. The higher the number, the thicker the border. The number 0 is equivalent to no border.  Or you could just leave the border attribute out if you do not want one.

Multiple Attributes

Let’s say you want your graphic to have a border of 2, be 100 x 250 pixels (height x width) and have an alt tag:
<img src="images/apple.gif border="5" height="100" width="250" alt="This is my apple">
Please note that it does not matter what order you put the attributes in (border, alt, etc.). Just make sure you do not leave out any of the punctuation.
"Help, My Graphic Won’t Show!"
If your graphic does not show up and you receive the "broken image" icon, check the following:

1. Make sure the file is uploaded and is actually in the directory you are pointing to in your HTML code.
2. Check the case of the actual filename. If you saved the file as "APPLE.gif" but typed "apple.gif" in the HTML code then the image will not show. Case does matter.
3. Check your HTML code and make sure you have included all the punctuation.

Creating a Clickable Image

Linking images is helpful if you have buttons or banners on your site and you want the visitor to be taken to another web page or site when they click on the image. To accomplish this, use the following code:
<a href="http://www.the_linked_site.com"><img src="images/apple.gif" border="0"></a>
The first part of the code tells the browser which site to go to and the second part, of course, tells it where the image is located.