The first thing you need is a picture to insert. The great part of the web is that you can "borrow" other peoples images. (Make sure that you have permission to borrow them.)

  1. Go to a web page and find a graphic. (Like the duck above. . . it's OK I give you permission!)
  2. Right click on the graphic and select Save Picture As.
  3. Name the picture whatever you want (do not add an extention, the computer will do it for you.)
  4. Save the picture in the A: drive in the www folder.
  5. Save the picture.

Now you have a picture saved on disk that you can use on you home page (ex. duck.gif). To use the picture on your html page use the following tags.

<body>
   <div style='width:120px; margin:0px auto;'>
   <img src="duck.gif" alt="A duck!" />
   </div>
</body>

Now if you wanted to use the picture as a link, you just insert the image in an anchor tag and send it to the URL.

<body>
   <div style='width:120px; margin:0px auto;'>
   <a href='http://www.ducks.org'>
   <img src="duck.gif" alt="A duck!" />
   </a>
   </div>
</body>

You will notice that there is a blue box surrounding the picture telling us that is a link. If you do not want the box, then you must tell the browser how to display it.

<body>
   <div style='width:120px; margin:0px auto;'>
   <a href='http://www.ducks.org'>
   <img src="duck.gif" alt="A duck!" style='border: none;' />
   </a>
   </div>
</body>

This will make the picture look like the first image with no border, but the image is now a link to the Ducks Unlimited site. The style='border: none;' is a more symantic way of telling the browser to not display the image with a border. As is recommended by the W3C, <img> tags should use CSS or inline styles to control border display rather than the border property.

You can also use a picture as the background "wallpaper" for your page. It is recommended to use CSS to control the placing of a background image on a page. To insert a background image with CSS, in your CSS file, add the following

body {background-image: url(duck.gif);}

To set a background color for your page, use CSS. For instance:

body {background-color: #cccccc;}

Setting your images all in one folder is a great idea if you are trying to keep everything organized. It also makes everything easier to find.

Next we'll take a look at Color