We often receive queries from customers on how to create an HTML email. It can be a demanding task if you have no experience of writing HTML scripts - but it is also fairly easy to add simple features to your email with the use of HTML. This article is intended as a quick introduction to using the simplest features of HTML to enhance your email ad.
The first thing to consider before writing your HTML message is do you need to? Lots of anti-spam software treats HTML as questionable, even Outlook express lets you prevent the downloading of pictures in HTML emails - so do you need to use it? If your conclusion is yes, then read on!
HTML gives but it also takes away. HTML ignores all carriage return / line feeds, and reduces all spaces between words to just one space - so if you were to save the text in (i) below as an HTML email it would display as in (ii).
Example (i)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: http://www.mylink.com
Example (ii)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: http://www.mylink.com
The way that we both overcome this and add additional features to our HTML script is with the use of tags. A tag is a command contained within < and > symbols.
So to correct the loss of carriage return / line feed characters and put our paragraphs back we use the paragraph tag <P>.
Now if we change our text to that shown in Example (iii) it will display as in Example (iv).
Example (iii)
This is the headline of my ad.
<P>
This is the first paragraph of my ad.
<P>
This is the second paragraph of my ad
that goes onto a second line.
<P>
This is my link: http://www.mylink.com
Example (iv)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: http://www.mylink.com
We are still missing two features from our original text - we don't have a line break after the 'my ad' in the second paragraph - and we are missing the spaces before the link. The first is cured easily with the 'break' tag <BR>. The second requires us to introduce a new command - this command is used for special characters and always starts with an ampersand & and ends with a semi colon ; - in this case we need the special character of a 'non breaking space' which is achieved by using the special character - So if we now include these characters in our text which now looks like Example (v) then it will display as in Example (vi) - We are now nearly back where we started!
Example (v)
This is the headline of my ad.
<P>
This is the first paragraph of my ad.
<P>
This is the second paragraph of my ad<BR>
that goes onto a second line.
<P>
This is my link: http://www.mylink.com
Example (vi)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: http://www.mylink.com
The next thing to fix before we start improving the ad is the link. Most email software like Outlook Express will display a link such as http://www.mylink.com in a plain text ad as clickable - i.e. you can just click on the link to go to the site. However, when the email software receives an HTML email, it does not automatically make this change. Because HTML has a tag that describes a link, the email software will only show links that use that tag. So we now need to make our link clickable. Example (vii) shows the command for this and (viii) shows how it looks - we will discuss the format after you have had a look at it.
Example (vii)
This is the headline of my ad.
<P>
This is the first paragraph of my ad.
<P>
This is the second paragraph of my ad<BR>
that goes onto a second line.
<P>
This is my link: <A HREF="http://www.mylink.com">http://www.mylink.com</A>
Example (viii)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: http://www.mylink.com
This is where things have got a little more complex! Firstly the <A> tag includes an additional piece of information within the brackets - the HREF command within the tag provides the actual address of the link. We also now have a closing tag </A>. This is a closing tag that ends the effect of an opening tag. These are unecessary for Paragraph and break tags - but essential for most others.
The <A> tag and the </A> enclose the text that will be highlighted as a link in the document. In this case we have left the text the same as the link - but this gives us our first opportunity to improve on the original. Let's change the text!
Example (ix)
This is the headline of my ad.
<P>
This is the first paragraph of my ad.
<P>
This is the second paragraph of my ad<BR>
that goes onto a second line.
<P>
This is my link: <A HREF="http://www.mylink.com">Just click here!</A>
Example (x)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: Just click here!
OK, now we can start to get clever! Here are a few of the tags you can use to improve your ad:
<B> For bold text
<I> For italic text
<U> For underlined text
Each one of these requires an ending tag of the same type - so <B> leaves text bold until it encounters a </B> tag.Let's try them on our text.
Example (xi)
<B><U>This is the headline of my ad.</U></B>
<P>
This is the first paragraph of my ad.
<P>
This is the second paragraph of my ad<BR>
<I>that goes onto a second line.</I>
<P>
This is my link: <A HREF="http://www.mylink.com">Just click here!</A>
Example (xii)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: Just click here!
The final command I want to introduce for improving the look of your ad is the <FONT> command. This command allows you to change the color and size of your font. Great eh?
The colors available include Blue, Red, Green, Navy, White, Magenta, Light Blue, Yellow, Purple, Brown and Gray. To use the command: <FONT COLOR="blue">Blue text!</FONT>. Note that COLOR must be spelled as the US version.
The size command is also included within the Font tag. The easiest way is to increase the size of the text or decrease it using +1, +2 etc or -1, -2 etc. So we can use <FONT COLOR="blue" SIZE="+2">Big Blue text!</FONT>
Let's put it in our text...
Example (xiii)
<B><U><FONT COLOR="red" SIZE="+1">This is the headline of my ad.</FONT></U></B>
<P>
This is the first paragraph of my ad.
<P>
This is the second paragraph of my ad<BR>
<I>that goes onto a second line.</I>
<P>
This is my link: <A HREF="http://www.mylink.com">Just click here!</A>
Example (xiv)
This is the headline of my ad.
This is the first paragraph of my ad.
This is the second paragraph of my ad
that goes onto a second line.
This is my link: Just click here!
What do you think?
One last thing to do. To ensure compatability with different email software and browsers, you should include start and end tags for the whole document and the body of the document. They will not appear to do anything in a lot of browsers and email programs, but in others they will make the difference between these commands working or not. They are included in our final example below:
Example (xv)
<HTML>
<BODY>
<B><U><FONT COLOR="red" SIZE="+1">This is the headline of my ad.</FONT></U></B>
<P>
This is the first paragraph of my ad.
<P>
This is the second paragraph of my ad<BR>
<I>that goes onto a second line.</I>
<P>
This is my link: <A HREF="http://www.mylink.com">Just click here!</A>
</BODY>
</HTML>
In a future article we will introduce some further commands for enhancing your email - but for now just ENJOY!
Dave Broadway
November 2004
Copyright (c) HTMail Ltd 2004 http://www.htmail.com all rights reserved.
You may freely distribute or publish this article provided you publish
the whole article and include this copyright notice and links in full.
