HOME
Continue my lessons!
HTML Index
Pictures can brighten up a web page and they are a great way to show others you work.  If you have created a picture that you want to use on your site you need to save it somewhere on the web, such as www.photobucket.com.  Once you know where your image is stored, it is very easy to add it to your site.
The code to insert a picture is made up of three things:
1. <img src=" - This command tells the computer to look for an image.
2. http://www.website.com/mypicture.gif - This tells the computer where to find your picture.
3. "> - This closes the tag.
When you put the code together it looks like this:
<img src="www.website.com/mypicture.gif">

The image tag is special because you do not have to end it. 
There are several other things you can add into the code to make the image look better, including the border tag.  Using this tag, you can chose what thickness of border (if any) you'd like around your image.
Some basic borders are:
Border="0" no border
Border="1" thin border
Border="2" thicker border

You simply type in border="2" inside the tag after you hve typed the location of your image, like so:
<img src="http://www.website.com/mypicture.com.gif" border="2">
Your image will now be displayed with a thick border around it.

You can also change where you want your image to be positioned on the page.  The most frequently used positions for images are left, right, and center.  To make an image centered, type this before the image tag:
<div align="center">
Everything typed after this will be centered, so now you need to type your image tags.  When you have finished your image tag and no longer want everything centered, you simply end the center tag, like so:
</div>

To make something aligned to the left or right, you use the same code, but you would replace the word "center" with "left" or "right". 

You can also make an image display as a background image instead of just having a solid color.  This works well with simple, light-colored images.  It livens up the page, yet you can still read the text clearly.  To display an image as the background, you need to type:
<body background="http://www.website.com/mypicture.gif">

This will now display your image in the background.
Create your own banner at mybannermaker.com!
Hosted by www.Geocities.ws

1