CoffeeCup - HTML Editor, Flash & Web Design Software

Color coding tags is a bit like a paint-by-number. Every tag has its own unique color to differentiate it from the rest of the document. Color coding tags makes debugging a document much easier, since you can find things at a glance, instead of having to read every line of code. For instance, if you know all image tags are red, you can scan down the code for the color red, and locate all image tags very easily.

1. On the main menu, click on View->Editor Options

2. The window in the upper left hand corner displays the different types of text you can give color attributes to. This is called the element window, because it displays all of the different elements of HTML. The window in the bottom of the screen is an example of some HTML code. This is called the preview window, because you can preview any changes made here.

3. For example, say you wanted to change all image tags to be red with a green background. In the element window, scroll down until HTML Image Tags appear, then click on it. Click on the Foreground color. This will open up a small box with choices for color. Click on the color red. Before you do the same thing for the background color, uncheck the box marked background under the box called "Use defaults for." Now you can change your background color to green.

4. Once you have done this, you will notice in the preview window that the image tags are red with a green background. Click "Ok" to save your changes, or "Cancel" if you don't want to save changes.

You can tweak these changes until you find something that suits you. Typically, you will want tags that you modify constantly to stick out, so you don't have to hunt them down every time you make a change. On the other hand, some tags, like the comment tag <!-- --> you don't have to change, so you don't need a bright color sticking out at you (default is gray).