Part Five: Inserting an Image or Picture


In order to have a picture or graphic displayed on a webpage, you must insert the image into the same file as as your HTML file "template.html" and "index.html".

If you don't have an image or picture simply right click with your mouse on the picture below and click on Save picture as... and save it in the folder with your HTML documents.

Now you must put the coding into your HTML document so the browser will recognize it. We've already named this image "belle.jpg". So just insert the following code anywhere between the body tags on your webpage and save. We recommend you place it betweew the <BR> tag and the </BODY> tags.

<IMG SRC="belle.jpg">

The name of the picture is always case sensitive. Dont type "Belle.jpg" or "BELLE.JPG" unless the name of the picture is already in capital letters. The extension (.jpg or .gif) should always be lowercase but the name of the picture can be capital (i.e. BELLE.jpg").

When you view the webpage the image will show up. Remember that after you save the page you may need to hit Refresh on your browser before you can see the changes.

Always type the extension with the image you link to. A graphic almost always has a .gif extension while a picture has a .jpg extension. NOTE: There is no "off" tag for posting an image.

Always place a <BR> or a <P> tag after an image or the image will run into the next picture or text. In our next section, we will show you how to manipulate images or text and have them appear where you want them to (i.e. the center of the page).


On to Part 5: Manipulating Text and Images

Back to the Main Page

(c)2004 [email protected]

Hosted by www.Geocities.ws

1