Inset the following code where you wish to display the image:

<img src=" rover.jpg ">

Remember, the yellow letters are the variables. Substitute the name of your image where I have rover.jpg For now, we will assume the image is located within the same directory (folder) as the HTML page you are working on. We will also assume you have uploaded the image to your website.

On most sites, you will need to limit yourself to jpg or gif images.

Image won't display? Make sure you referenced the file name exactly. Example: if the file name is rover.jpg, make sure you didn't call it rover.JPG. Note, I have uploaded files with names similiar to rover.jpg , and have them changed to rover.JPG when uploaded.

The code I gave you will get that image on the page, but there are a few more things you may add, but don't need to. First, the page will load quicker if you specify the image size. Let's see how that line would look with the image size included.

<img src=" rover.jpg " width= 247 height= 325 >. The width is in pixels.

Some folks set their browser so that it will not display images! Let's add some alternate text to read if they have done that.

<img src=" rover.jpg " alt=" Picture of Rover swimming " width= 247 height= 325 >

Stopping at the above line, will give you a nice usable picture on you website, if you want to get a bit more involved, please go on to the next bit of info.

Images, getting fancier

In the following examples, I will work off the final basic example above. I will stop combining attributes in each succeeding line, because it will make it pretty darn comfusing. Remember, you can pick the attributes you like and add them, as many as you need.

Do you want a border around that image? Do this:

<img src=" rover.jpg " alt=" Picture of Rover swimming " width= 247 height= 325 border=" 5 ">. The border size is in pixels, I used 5 pixels in this example. Try yours as different widths till you get what you like.