CoffeeCup - HTML Editor, Flash & Web Design Software

Inserting an image onto your page is very simple. Just click on the Insert Image button that appears on the right side of the screen.

This will open a wizard that allows you to put any supported image on your computer onto your web page:

The left window shows a list of images. You can navigate your computer to find the image you want to insert. Important: Make sure you read the note about directories! If you do not follow the instructions, your images may not appear once you upload your web page.

After you select the image you want to appear, you can assign an Alt Text to the image. This text will be displayed in place of the image if someone has a browser with images disabled.

You may also assign other values to your image, such as alignment, width and height. Finally, you can set the image up as a link using the last blank.

Important Note About Directories
The folder you keep your images in is important! Once you have finished inserting an image using the insert image button, your code probably looks something like this:

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

The first set of quotes indicate where the image (tarantula4.jpg) is located. In this example, it is located in the directory "../Program Files/CoffeeCup Software/Graphics/objects/". Now, this may be fine if the image is on your computer, but what happens when you upload the page to your website? Obviously the website cannot access your computer to open the image. So you need to edit the code so the website can access the image from the correct directory.

It will probably be easiest if you create a directory on your website where you store all of your images. For instance, you can create a directory under your main website directory called Graphics. Then you can upload your pictures to the Graphics directory. Now you can change the HTML code to read:

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

Now the browser will look under the Graphics directory for tarantula4.jpg

Only now that you've changed the code, you also need to change the setup on your computer to match your server. Most likely you are saving your work to a this directory:

C:Program FilesCoffeecup SoftwareWorking

So you need to create a new directory, under working, called Graphics, and move all your images to that file. Now your computer's setup matches the server's setup.

Help! I don't understand what you are talking about!
Ok, if none of that made any sense to you, there is a simpler method, although it will not be as organized when you are done. You can reference your images without any directories at all:

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

If you want to use this method, you have to place all your images in the same directory as your html files (the working directory). Then when you upload your html files, just upload your images to the same directory on your server. This method is simple, but can get very messy, especially if you have a lot of images.