From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

Just like Web pages, to be seen on the Web, images need to be moved from your hard drive to the Web server. This is called uploading. Depending upon your Web server, you will either use an FTP client or a Web page uploading form.

This article, Uploading Your Pages, explains how to use an FTP client to upload to a Web server. But if you're using a Web hosting service, you'll need to use their Web form.

Once you've got your image on your Web hosting server, you need to link to it on your Web page. This is in the <img src> attribute. When you're first starting out, you should upload your images to the same directory as your HTML files.

For example, if you have an image called cat.gif and you want to put it on your cat.html Web page:

1. link to cat.gif in your HTML like this:
   <img src="cat.gif">
2. upload cat.gif to your Web hosting server (using FTP or a Web form)
3. upload cat.html to the same location as the image

Your src attribute should never have "C:\" in the URL for the image. While this may work when you look at your Web page (even if you're looking at it online), no one else will be able to see your images. The reason is that you are pointing to a location on your personal hard drive. My hard drive is named C:\ as well, but chances are I don't have your image on my hard drive. So, when I view your site, your image won't display.

If you have your heart set on keeping your images in a separate directory, you can do that, but you have to represent that in your src attribute. The simplest way to handle directories is to think about where your Web page is in relation to the images directory.

For example, the Web Design site has the following structure:
/ - the main directory
/library - the library directory
/library/graphics - the images directory
/library/beginning - the beginning articles directory

If I create a Web page in the/librarydirectory, then any images I point to from there would be listed as <img src="graphics/cat.gif">. I am telling the Web server to look for a graphics directory below the current directory.

If I create a Web page in the /library/beginning directory, I have to tell the Web server to go up one directory to be back in the/library directory and then go down to the graphics directory. To do this you use "../" to tell the server to go up one directory. For example:<img src="../graphics/cat.gif">You can use ../../../ and so on to go up as many directories as you need.

Previous Features