HTML Tutorial

HTML Email Tutorial
This tutorial explains the simple process of creating an HTML-rich email using Microsoft Office 2000 or greater. This format of email can be viewable with most major email applications that support the standard HTML code (ie. Microsoft Outlook, Outlook Express, MSN Hotmail,.. etc etc).

This has been tested on a Microsoft Windows platform,.. however it might be viewable on Macintosh's and Unix/Linux based systems as well, just as long as they support the same standards that have been made for HTML-rich emails on the net.

While most email readers today have the ability to open HTML emails, there are certain cases where people cannot or do not want to receive emails in this format. Using multi-part MIME format emails, which means that 2 versions of your email are sent out: HTML, and Text. When you create your email with your template the Text versions are automatically generated as well. When the email is deployed, the version most suitable for viewing is pulled into your inbox based on the type of email they can receive.

Applications and Services Used:
  • Notepad or any HTML editor (Dreamweaver, Homesite,.. etc etc)
  • Any graphics program (for custom graphics)
  • Microsoft Office 2000
    • Microsoft Outlook 2000
    • Microsoft Word 2000
  • Webspace to store your graphics and links
Special Notes (constantly updated):
  • Most email applications can view pictures embedded in the email, but this accomplished by locating the graphics on a server externally from on the web. This is done by storing the graphics on an website server that you can reference in the HTML code of your email with <img src="">
  • Embedding Flash into an email requires ActiveX controls that are native to Microsoft's Windows platforms, this is a risky option, as some viewers may not have the Flash plugin installed into their email browser embedded applications
  • Links within emails are referenced externally, I have not had the chance to find out a process that will allow me to reference any attachments with the links so that they can view a presentation attached with the email (ie. flash executable, pictures,.. etc etc)
PART 1: Creating the HTML
1) To create the first portion of the email, you must develop a simple one page HTML webpage. You can use most supported tags that are found in basic 4.0 HTML compliant web-browsers.

Save the webpage locally on your hard-drive somewhere.
One important thing to remember is that all of your graphics must be located on an online website server. All sources for graphics must have an absolute reference format (ie. http://www.yourwebspace.com/graphicused.jpg)

Also note that certain fonts used, are only available if the user viewing the HTML has that font on their computer. This is standard when designing tradition html pages, and should come as no surprise to most webdesigners.
  2) In Microsoft Word 2000, open the HTML webpage you just saved to your hard-drive. You may have to set the Files of types field to look for *.html documents.
Don't worry if the formatting doesn't look exactly how you want it to look in the email. All design and layout should be previewed before hand in Internet Explorer to ensure that your page appears the way you want it in your email.

PART 2: Sending the HTML Email
1) Now there's a button, it's a little button,.. so little that it might be missed. That's the button that turns Microsoft Word into a Microsoft Outlook/Word merged application. That button is the 'Email' button.


2) Fill in the Email fields, just like a normal email. 3) Click on Send a Copy, and VOILA!,.. your email sends out through Microsoft Outlook.
There you have it, an HTML Email!



For the most part, you can create emails with a lot more formatting options, as the limits of your imagination are confined to the HTML tags that are supported. Many people have seen some clever designs layed out in html, you'll notice that these HTML boundaries far outweigh the possiblities of traditional email letters.

 

[ back ]