Creating HTML Emails for Professional Presentation
Version: 8.5 and Higher
Background
By default, Elliott's email is in text format. Elliott "EM" API calls will allow developers to create an email document to send out. For more information on "EM" API, please refer to the following KB article:
Sample Text Email
The issue with "text" formatted email is that most of the email clients (e.g., Outlook) will display them with a proportional spacing font. Therefore, the alignment will be off. The following is an example:
Sample HTML Email
As you can see, the alignment in the above address block and line items area is clearly off because of the spacing of the proportional font. To resolve this problem, we can generate an email in HTML format. The key is we begin the email text with <html> <body> tags and end with </body></html>. This will signal to Elliott's system manager layer to flag this email as "HTML" instead of "Text." The following is an example of this HTML email:
As you can see, the address and line item area spacing are aligned now. In addition, we made the top heading address area stand out with a bigger font.
Sample HTML Tags
The following is the actual HTML tags and text we sent to the email engine to cause the display of the above sample email:
<html>
<body>
<h2>
Netcellent System Inc. J Demo<br>
4030 Valley Blvd., Suite 100<br>
Walnut, CA 91789<br>
http://www.netcellent.com<br>
Telephone: 909-598-9019<br>
</h2>
<br>
Dear Customer,<br>
<br>
This document serves as a quote for the items listed below. Please review the information presented here. If you have any question or you wish to place an order, please contact us at the address or phone number printed above and refer to our quote number 036994.<br>
<br>
<pre>
Bill To: Ship To:
Edward M. Kwang Edward M. Kwang
P.O. Box 38 P.O. Box 38
Walnut CA 91789 Walnut CA 91789
Ship Via : UPS GROUND
Terms : NET 10
Ship Date: A.S.A.P.
Qty Price Item-No Item-Description
---------- ------------- --------------- ------------------------------
1.00 $44.78 1003-9264-1001 Verifone MX800 Series Cable
2 Meters/Green/Ethernet/USB
-------------
$44.78 Total Amount
</pre>
*** The Above Total Does Not Include Freight Charge And Sales Tax ***
</body>
</html>
HTML Tags
In addition to original text email, we now send additional HTML tags as highlighted in bold above. Here is what you need to know:
Begin the Email with <html> Tag
Here is how to program the first line of the email body:
MOVE "EM,TX" TO SCREEN-PARAMETERSMOVE "<html>" & X"0D0A" TO SCREEN-AREAMOVE 0 TO SCREEN-NUMERIC-FIELDPERFORM SCREEN-ROUTINENote the Screen-Area content is followed by a CR/LF (X"0D0A"). This is required in order for the next line to start at the left edge. All EM API calls, except for some "TX" calls that create a paragraph of text, need the trailing X"0D0A." Moving 0 to Screen-Numeric-Field allows the system layer to determine how long the line is for you. The <html> tag must be followed by a <body> tag. Note that anything between the <html> and <body> tag is the HTML heading area and is not part of the discussion in this article.
Most of the HTML tags are in pairs. Therefore, the begging tags of <html> and <body> need to end with </body> and </html>, in that sequence. In many cases, if you don't follow this rule, your HTML rendering engine may still display it properly, but your HTML document would be considered "not well formed."
<h2> Tag Refers to "Header 2"
As you can see, the address block in the heading area is displayed with larger text. That's because we enclosed it with <h2> and </h2> tags. <h2> means "Header 2" and will cause the HTML rendering engine to display a larger font to fit the "Heading 2" status. Following this idea, you can also use <h1> or <h3> which stands for "Header 1" or "Header 3" for different levels of headings. You can also use <b> with </b> to stand for "bold." We won't discuss all the possible HTML formatting tags in this document. But as you can see, the possibility is pretty limitless.
<br> Tag
In HTML, the normal control characters in text like "CR" (Carriage Return) and "LF" (Line Feed) to advance a line are not recognized by the HTML engine for formatting purposes. To make the HTML engine advance a line, you will use the <br> tag which stands for "Break" that will insert a single line break. Note that <br> is an empty tag, which means there's no corresponding end tag.
<pre> Tag to Preserve Spacing & Alignment
The "magic" in this example is the HTML tag, <pre>. It stands for preformatted text. Between the <pre> and the </pre> tags, the email program will use a monospaced font, which allows the columns to align the way you would expect. In addition, you do not need to use a <br> tag at the end of the line to cause the advancing of the line.
Alternative <table> Tag to Replace <pre> Tag
An alternative to the <pre> tag to deal with the line item area is is to use <table> (Table) tags. This is a more sophisticated approach which also could be used to make the line item display as above. We did not use the <table> tag in the above example.
In addition to the <table> tag, you will also use <tr> (Table Row), <th> (Table Heading), and <td> (Table Detail) tags. The following are sample tags that will create a table:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
There are many additional HTML tags that can be used. All the rules of creating an HTML message apply.
JEG