How to Add Images to Your Web Page in CoffeeCup

By Bud E. Smith

A Web page without any images is dull indeed. CoffeeCup HTML Editor makes it easy to spice up your page with images. Follow these steps to insert a graphic in your Web page in CoffeeCup:

1Click the Visual Editor tab in CoffeeCup; move the cursor to the point where you want to insert the graphic.

The Visual Editor makes many aspects of linking to a graphic easier.


2Click the Image button and select Image.

The Insert Image dialog box appears.

3Browse and select it.

Browse your hard drive to find the file to use.

4If CoffeeCup asks you to copy the image to the working folder, click Yes.

In most cases, it’s better to choose Yes; this will place the image in the same folder as the Web page, creating the simplest possible path from one to the other.

5Enter alt text at the Alt Text prompt.

alt text is read out loud by screen readers and other programs for visually disabled users. alt text is also used as a tool tip, text that appears when the user mouses over the graphic. Keep alt text short.

6Choose how the image should be aligned relative to text.

The usual choices are for the image to be aligned to the left, with text flowing around it on the right, or on the right, with text flowing to the left of it.


7Enter a border size for a black border around the image.

Adding a thin black border around an image makes it appear sharper and clearer (especially small images).

8Change the width and height if you want to resize the image in place.

Usually you should resize the image before putting it in your Web page. However, you can stretch or shrink the displayed image by changing the width and/or height here.

To keep the image in proportion, change both dimensions by the same amount. Leave the Include Size box checked so the image size will be included in the HTML code.

9To make the image a link, enter a URL, or browse to the destination file on your local machine or network.

You can link to a Web destination or use images to create an image-based menu.


10To create a smaller version of the image, click the Thumbnail tab.

You can choose the percentage for resizing, the file format, and the quality setting (for JPEG images).

If you want to give the user the option of clicking the small image to see the larger version, click the Link to Original Image check box.

11Click OK.

To change the settings later, click the image; the options will show up at the bottom of the Visual Editor area.