CoffeeCup - HTML Editor, Flash & Web Design Software

The answer to this question is a little complicated. In order to understand it, you first have to understand how computers organize information. There are two basic building blocks for storing information: files and folders.

You probably already know what a file and a folder are. A file is just a collection of data. A file could contain instructions for how to run a program. For instance, coffee.exe contains the information to run the HTML Editor. Or it could contain information that a program needs to run. For instance, a picture named us_map.jpg could contain information about a picture. A program such as Internet Explorer could access that file, and use the file to display the appropriate image.

A folder is a way of separating these files so they are better organized. For instance, you probably have a folder called "Program Files" on your computer. All your program files would be kept there. Then you have another folder under "Program Files" called "Coffeecup Software". All your programs from Coffeecup Software are kept in this folder. In this case, the "Coffeecup Software" folder is a sub-folder of the "Program Files" folder, because it is found inside the "Program Files" folder.

Ok, enough computer basics, let's look at your code. What if we have an image tag like this one:

<img src="graphics/us_map.jpg" width="100" height="95" alt="A Big Spider" border="0" align="middle">

from this tag, we see that the image name is called us_map.jpg and we are telling the browser that it can be found in the graphics folder. So what does the browser do? It looks at where your web page is saved on your computer, and then it looks for the graphics folder. Inside this graphics folder, it looks for a file called us_map.jpg. What happens if the browser goes to the folder your web page is saved in, and it can't find the graphics folder? Or what if the browser can't find the us_map.jpg inside the graphics folder? The browser doesn't know what to do, so it displays a little red X instead of a picture.

So what's the solution? You should first find the folder on your computer where your web page is saved. Now, do you see a graphics folder there also? If not, create one. Now go to the graphics folder. Do you see your image there? If not, copy the image from its current location on your computer into the graphics folder.

Let's look at a more complicated example. What if the image tag looked like this:

<img src="../Program Files/CoffeeCup Software/Graphics/objects/us_map.jpg" width="100" height="95" alt="A Big Spider" border="0" align="middle">

Wow, that's kind of scary. First, what do the two dots (..) mean at the beginning? Basicaly, that is telling the computer to go back one folder. So it would look for the folder that your web page is in, then it would go back one step. So if your web page is saved in this folder:

C:my stuffwebpages

It would start by going out of the webpages folder, and into the my stuff folder. Next, it looks in the folder we have specified: Program Files/CoffeeCup Software/Graphics/objects/ and finally, it looks for the us_map.jpg file. That's a mess. Usually I find it easier to keep everything in a images folder that is a sub-folder of a main folder, where I keep all of my web pages.

One last word of advice: pay attention to capitalization. If your image tag looks like this:

<img src="graphics/US_map.jpg" width="100" height="95" alt="A Big Spider" border="0" align="middle">

Make sure your filename is capitalized the same way: US_map.jpg, otherwise, you may run into problems. Some computers are smart enough to know that US_map.jpg and us_map.jpg are the same thing. Others may not, and in that case you will see a little red X.