Copyright: Copyright© CoffeeCup Software 1998-99


About CoffeeCup HTML Editor Express
CoffeeCup HTML Editor Express

Thank you for using CoffeeCup HTML Editor Express, the premier express web page generator. HTML Editor Express is an Express web page creator designed for the beginner in mind. It boast many options found in sophisticated web page design software, but no experience is needed to create a fantastic web page. Of course, the experienced user will appreciate the power of HTML Editor Express!

Find out how to get a registered version.

Copyright CoffeeCup Software 1998-1999


Purchasing a register version
Purchasing HTML Editor Express

HTML Editor Express Price Sheet

   1-5  licenses  $20.00 each

  6-15  licenses  $18.00 each

 16-50  licenses  $15.00 each

51-100  licenses  $12.00 each

  100+  licenses  Call 1-512-887-7778

You can order several different ways

1. Secure Online Credit Card Transactions at http://www.coffeecup.com/order

2. Would like to Call or Fax in your Order?

    Please call (512) 887-7778.

    Don't forget to include your e-mail address with your fax.

3. Want to send a Check or Money Order?

    Then please remit in U.S. Funds to the address below:

    ( Please include your e-mail address & product on the check )

    CoffeeCup Software, Inc.

    801 Elizabeth Street

    Corpus Christi, Texas 78404

4. POs - If your business, school, or organization needs

    to send a Purchase Order, please mail it to:

    CoffeeCup Software Inc.

    801 Elizabeth Street

    Corpus Christi, TX 78404

    DON'T FORGET TO INCLUDE YOUR

    E-MAIL ADDRESS ON YOUR FAX OR

    PURCHASE ORDER!!


bgcolor
Color of the background of the web page. Default is set white. See also, background image.


Page Colors

HTML Editor Express lets you select a multitude of colors to customize the look of your web page. Simply press the [image] button along side the color description to pop open the color selector.

The page colors you can set are: Background, Text, Link, Active Link and Visited Link color. If you select a background image, be sure to choose colors that will work well with it.


textcolor
Color of the main text of the web page. Default is set to black.


vlink
Color of previously visited links (underlined text) in the web page. Default is set to purple.


alink
Color of active links (underlined text) in the web page. Default is set to red.


link
Color of links (underlined text) in the web page. Default is set to blue.


Color Selector
The Color Selector contains 48 colors in order of hue. This gives you a number of basic colors from which to choose. You are not limited to just the colors in the selector. The Custom... button opens up the standard Windows color dialog. Here you may select any range of colors or enter in RGB values. By choosing a color the preview window will automatically update, giving you an immediate idea of how the color look with the other colors you selected.


Page Properties
General Page Properties

General page properties consist of the Left Page Margin, Title of Web Page, and Heading found on the Page Properties Tab.

Left Page Margin Check box

Checking this option will create a left page margin or indent with the width of the number set in the text box next to the check box. Default is 120 pixels. This option is useful if you select one of the many background images HTML Express has that use the left stripe style background. This ensures the main elements of your page (ie. text) will not overlap on the stripe.

 (Left Page Margin text box)

Title of Web Page

The title is what you will see in the caption bar of the web browser. Below is an example of the Title which is Selecting Colors.

Heading

This is your top line of text, much like a magazine or newspaper heading. Optional.


Meta Tags

Meta tags are a type of hidden information about your web page. The most common use of Meta is to add keywords that describe the page or a description of the page. Using Meta will enable search engines, like Yahoo, to index your site with better accuracy since you will be telling the indexer detailed information about your page rather than letting it scan the page on its own. There are a number of specific meta tags, but HTML Editor Express lets you set some of the most common ones. They are listed below.

Adding/Deleting/Editing Items

To add an item press the [image]  button. A new item will be add the the list and type right into the open text frame. To delete an item, just select the item you want removed and click the [image] button. To edit an item just click it twice with a slight delay, just like you would if you were renaming a file in Windows Explorer.

Name Drop Box

This lets you select which type of meta information it will be. To change an existing item's Name, click the item you want to change in the list and choose the new Name in the combo box. Select from Description which is just a sentence like description of your site, Keywords are one word elements (separated by commas ie. guitar, music, lyrics) that describe key word in the contents of your page. Expires tells the browser if the page has contains date specific information. PICS-Label conforms to the online rating system. This will let the web browser know whether your web page is appropriate for certain viewers. Reply-To is used in order for a visitor to reply to the author of the web page.


Add Link Dialog
Add/Edit Link Dialog

Any time you select Add or Edit link this dialog opens. Here you can type in the name of the Link Address and Description or use the buttons to add existing documents.

Making the link an image

If you would like to make the link an Image link where the image is clickable, select an image using the browse button. This will fill in the Use an image as the link text box with the full path and name of the image. Be sure to select a Link Address or Email Address. The Link Description text box text is ignored when you save your web page. This only applies to the image as link.

The [image]  button lets you browse for existing files and inserts the file name of the document.

The [image] button lets you browse for existing web documents. Once you select a valid web document the file will be scanned for any links and display the results in the list box at the bottom of the dialog.

The [image] button scans the Netscape Bookmark file for all links and displays the results in the list box at the bottom of the dialog.

The [image] button opens the open dialog box to the Favorites folder. Files in the Favorites folder are shortcuts Internet Explorer creates similar to Netscape bookmarks.

The [image] button will clear the selected image link if one is selected.

The Link is an Email Address  check box will make the Link Address into an email address. It will add mailto: the email address. Therefore, it will look something like this: mailto:myemail@xyz.com


Background Image

Including a background image is a great way to spice up bland web page. Backgrounds can turn a simple web page into the next great web visit. This is optional.

Just select the [image] button, then find the image you want in the open dialog. If, for some reason, you want to discard the background image simply press the [image] button. This will clear the background image preview as well as the text box. Then you can start over or just leave the background option blank. Any background image selected will automatically inserted into the Upload list box for convenience. If the background image is removed by using the eraser button the background image will be removed from the Upload list box respectively.

If you have a background image and also set a background color, the background image will override the background color you selected. This simply means the background image covers up the color you select. It is always good practice select a background just in case the image does not load in the browser. This way you will have a background color to go along with the rest of your page colors.


Upload List Box

The Files to Upload list box is automatically filled when the document

is saved as HTML. Applies to background image and page image.


Adding an Image

Including an image in the web page couldn't be easier. Simply press the [image] button and select an image. Once you select the image it is displayed in the preview window. The dimensions are also displayed with the default Height and Width values of the image. If you prefer to change the size of image in the saved web page, type in the pixel values you want in height and width text boxes. To clear the image preview and the height and width values press the [image] button. Any image selected will automatically inserted into the Upload list box for convenience. If the image is removed by using the eraser button the image will be removed from the Upload list box respectively.


Link Window

The link window contains all the current links available to you during that session of using HTML Editor Express. It is pretty self-explanatory as it is organized by Link Address (URL) and Description. This lets you know what links you can use. The little check box [image] next to each link indicates that you wish to have it included into your document.This is useful if the link window already has a number of links listed and you only want to include certain ones.

Link Toolbar

 Opens the Add Link Dialog to add additional links.

 Opens the Edit Link Dialog to edit the currently selected link in the link window.

 Deletes the currently selected link in the link window.

 Moves the currently selected link UP in the link window.

 Moves the currently selected link DOWN in the link window.

  Sets the inserted link style to: Default regular underlined style or Drop Box Style places the links in a drop box (requires JavaScript capable browser).


Moving Links
Moving links Up or Down

The reason for this option is when HTML Editor Express finally creates the web page the links are arranged in the order they appear in the link window. So if you prefer to have a link closer to the top of a page or top of the drop box, move it to the top of the order in the link window.


Adding Text

Text content is a large part of any web page. Even if you have lots of fancy images it needs to be held together with some content. HTML Editor Express makes adding text simple in a variety of ways. Of course, you can always just type right into the text area and add any text you want.

 Imports an existing text file into the text area.

 Inserts an inline link into the body of the text. If there are links in the link window you can simple select the one to insert in to the body of the text. After inserting a link you will see something like this in the text area <A HREF="http://www.coffeecup.com">CoffeeCup Software</A>. This is the HTML tag for a link, just continue typing after this tag.

 The keymask button opens a popup menu that displays options to make the Enter key on the keyboard perform a special function. They are listed below:

Key Mask Menu Items

Enable Key Mask: Selecting this will either enable (check the menu item) or disable (uncheck the menu item) Key Mask.

Enter Key = Single Line:

This makes the Enter key insert a single line break (a new line).

Enter Key = Two Lines:

This makes the Enter key insert a double line break (two new lines) or a start of a new paragraph.

In the HTML coding behind a web page there are many Tags that define aspects of a web page. If you want something bold you have to put it in <B>Text to be Bold</B> tags. Just as you have to define a bold item you must define where you want a new line (single line break, the <BR> tag) to start or a where a new paragraph (double line break, <P> tag) will start.


Break
This is an example of  <-- Notice the text starts

a single line break.     <-- on the next line.


Paragraph
This is an example of a double

                      <-- Notice the full space

line break or a paragraph.


Formatting Text

As you add text into the text area you may want certain parts of the text to have special text styles. HTML Editor Express makes this very easy.

Text Formatting Buttons

 Makes text BOLD.

 Makes text Italic.

 Makes text Underlined.

 Opens the font dialog.

There are two ways to make certain text have custom formatting. One way is to select the text you want to format then press one of the buttons. The second way is to press one of the buttons first, then type between the tag. ie. <B>All text between the tag will be bold</B>

Note: You will see just the formatting tag. The actual text in the text area will not be formatted. You will, of course, see the proper text formatting in your web page.


Font Dialog

The font dialog will format text in the same way as the Bold, Italic, or Underline buttons with an added advantage.

You can set very specific formatting attributes to the selected text by selecting the Fonts drop down list which sets the font face, the Color drop down list which sets color of the selected text, or the Size drop down list which sets the size of the selected text. The greater the number the larger the text size will be.


Creating a Server Profile
Creating/Editing a Server Profile

To use the file uploading feature in HTML Editor Express you will need to create a server profile that includes information about the web server you will be sending file to.

New Server Profile

To create a new server profile simply press the [image] button and the server profile dialog will open.

Edit an existing Server Profile

To edit an existing profile press the [image] button. The server profile dialog will open, then edit any of the fields.

Here you define the settings of the server you plan to upload to. Look at the following example:

Description

This is the unique name you will give the profile to distinguish it from other profiles, much like naming a file.

Hostname

This this the web domain (url) of your server, just the www.myserver.com part.

Initial Remote Dir

This is were files will be uploaded to. Normally this will be your web directory on the server. Say for example full web address to your web directory is: www.myserver.com/~myname/files. Then all you would have to put in the Initial Remote Dir text box is ~myname/files. You are telling the ftp client to put your files here.

Username

Your username to access your server.

Password

Your password to access your server.

Remote Port

Normally you do not need to change this. 21 is the default port for most servers. If yours is different for some reason you can change it accordingly.


Uploading Selected Files
Uploading Files

HTML Editor Express boasts a built-in FTP client to send files to your web server. Anytime you add an image (such as adding a background image or page image) it is automatically added to the Files to Upload list box. After you have saved the page you've been working on, it will be added to the list box as well. You also have the option to add/remove items to upload at your own discretion.

Before uploading, be sure you have already created established a web connection via TCP/IP or the like.

Adding Files to Upload

To add additional files to be uploaded press the [image] button and select as many files you would like. You can select multiple files in the open dialog by holding down the Control key and clicking. This method allows you to select files at random.

Deleting Files to Upload

Select the files in the list you wish to remove and press the [image] button.

Uploading Files in the list

Once there are files in the list you wish to upload, simply press the upload button and the files will be sent to your web server.


Save As HTML

The Save As HTML option simply creates a page building session as a standard web document. When you Save As HTML you will then have the option to Test your page to see what it looks like in the default web browser. All web documents are saved with the .html document extension by default.


Save As CFE

The Save As CFE option saves a page building session as an Express File which can be reopened and edited. The advantage of saving a session as CFE (Express File) is that you have a consistant page project template you can base a number of other web pages from. Just change a few of the input fields, such as, new text, images, or links then save the page as a web page and you're ready to start again with that same Express File.


Test Page

Once you have saved your page as HTML you will have the option to view your page in the default browser. This gives you a quick glance at what you have just created with HTML Editor Express.


Adding Bullet Items

Bullet lists are an ideal way of emphasizing a particular set of items. You can have just about an unlimited number of bullet items in a list for you web page. Adding items is a easy as typing in one list item per line in the text area. Then choose the type of list you want to make your bullet list, such as:

Unordered List

Disc, Square, Circle

Ordered List

A, a, I, i


Program Settings

There are just several simple program options you can set to customize HTML Editor Express.

General

Checking Insert <BR> on text import check box will automatically format the end of each line of imported text with a single line break tag. This will ensure the imported text is formatted the same as the original imported file. Applies to Step 5 - Text. Default is unchecked.

Checking the Wordwrap text are in Text window check box will toggle the wordwrap in text box. Applies to Step 5 - Text. Default is checked.

Checking the Use classic wizard style will toggle the program window to use the classic style Next > and < Back button style wizard interface. Default is unchecked.

Language

The language options are for those interested in running HTML Editor Express in a different language other than American English. Default is English.

Obtaining and Downloading Language Libraries

To obtain additional language libraries, visit CoffeeCup Software on the web at http://www.coffeecup.com. If your language is not available and you would like to translate the program please contact the developer at robert@zdesigns.com. I will work out an arrangement with you to reimburse you for your time and effort.

Adding Language Libraries

After downloading and extracting the language library, copy the language library file(s) to the folder named LangLibs which should be located in the program folder of HTML Editor Express. Valid library files end in the .lng extension, ex: Fra.lng is a French language library. Any other files in this folder without this file extension will be ignored.


Creating Template Styles

HTML Editor Express creates web pages with the help of custom style templates which are no more than basic HTML documents with several special keys the program searches for. If you know HTML or know someone who can make an HTML skeleton for you making a template is very easy. Use CoffeeCup HTML or any text editor to create templates. You will basically be making an HTML document with specific keys HTML Editor Express will read.

Be sure to save them with a unique and identifiable file name ie. My Template.html) and with the .html document extension. If you want to associate an image with your template, create an image with the Windows Paint program or something similar. The image should have a height of 95 and a width of 75. Save it with the same file name as your template (ie. My Template.bmp). Place both template and image in the Templates folder located in the program folder.

Currently, there are several key identifiers HTML Editor Express searches for in a template file. You can include all the keys or just select ones. They are listed below:

Note all are case sensitive for now. That means #meta does not equal #Meta or #META, etc... It is also recommended that all the HTML Tag be in Uppercase.

Template Key codes (revision 1.0)

The following are placed within the <HEAD></HEAD> tag.

       #pagetitle

            Defines if the template includes a title.

       #meta

            Defines if the template includes meta tags.

       #combolink

            Required if you want links to put into a drop box.

The following are placed inside the <BODY> tag.

       #bgurl

            Defines if the template includes a background image.

       #bgcolor

            Defines if the template includes a custom background color.

       #text

            Defines if the template includes a custom text color.

       #link

            Defines if the template includes a custom link color.

       #vlink

            Defines if the template includes a custom

            visited link color.

       #alink

            Defines if the template includes a custom active

            link color.

The following are placed within the <BODY></BODY> tag.

       #openmargin

  Defines if a left page margin can be set.

           Place directly after the <BODY> tag. It

           must accompany #closemargin.

       #closemargin

  Defines if a left page margin can be set.

           Place directly before the </BODY> tag. It

           must accompany #openmargin.

       #headsize

            Defines if the template includes a header.

       #headcaption

            Defines the header text.

       #pageimage

   Defines a page image.

       #pagelinks

            Defines if the template includes links.

       #pagetext

            Defines if the template includes text content.

       #bulletlist

            Defines if the template includes a bullet list

Below is a sample template file.

<HTML>

<HEAD>

<TITLE>#pagetitle</TITLE>

#meta

#combolink

</HEAD>

<BODY BACKGROUND="#bgurl" BGCOLOR="#bgcolor" TEXT="#text" LINK="#link" VLINK="#vlink" ALINK="#alink">

#openmargin

<CENTER><FONT SIZE="#headsize">#headcaption</FONT></CENTER>

<CENTER>#pageimage</CENTER>

#pagetext

<P>

#pagelinks

<P>

#bulletlist

#closemargin

</BODY>

</HTML>


Select a Template Style

HTML Editor Express contains a number of web page style templates to build your web page from. This give you the flexibility to make a great looking web page with very little effort on your part. To select a template simply choose one of the many templates located in the Templates drop down box. When you select a template you will normally get a basic preview of what the web page might look like.

If you want to start over with a fresh start, just press the Reset Express button. This will clear and rest all the input fields in HTML Editor Express.

Related Topics

Creating Templates Styles


Opening an Express File

An Express File is a simple file containing all the input fields in HTML Editor Express. When you save a page building session you will have the option to save it as a .CFE file (Express file). The benefit of saving a session as an Express File is that you can always go back to it, make several changes to it and then create a number of web pages without having to fill in all the input fields over and over again. The best way to think of an Express File is as a web project file that is used to build other pages from.


Image Link

The image link dialog will place an image into the web page and make it into a clickable link.


Purchasing a register version