TECH TOOLS - FEBRUARY 2007

 

HTML EMAIL - PART 1
Would you like to have an eye-catching graphic signature that's included in your email every time you email someone?  There are a number of ways to do this - most of which require the use of an HTML editing program and a bit of HTML knowledge.
However - there is a handy free email program from Mozilla called Thunderbird, which easily enables you to create the code for an HTML signature - complete with graphics and links. The HTML signature can be used not only in the Thunderbird email program, but also in Microsoft Outlook and other email programs that are HTML signature enabled.

You can download the free Thunderbird program at http://www.mozilla.com/en-US/thunderbirdFor additional information on Thunderbird, please visit our January 2005 Tech Tool.  There are a number of benefits to using Thunderbird to create the HTML signature code...

  1. It's a free program. You don't have to purchase an HTML editing program.
  2. It creates a nice, clean, small code - unlike HTML editors, which create bloated code.
  3. It's very easy to use.

Once you've downloaded Thunderbird, follow these direction to create your HTML email signature...

Before you create your HTML signature, you'll need a place to store it.  You can create a folder on your C drive called My Signatures - or any name you prefer - just so you remember what it's named and where it is.

You are going to create your HTML signature within a new email and save the code so it can be used as an HTML signature file whenever you need it.

Let's begin by opening the Thunderbird email program and clicking on the Write button at the top.

Next, you're going to create a Table that you can insert graphics and words into:

  • From the menu bar, click on Insert, then Table...
  • From fly-out menu, select the number of rows and columns you want   You might want to start out with 2 rows and 1 column.
  • Width is something you'll want to play around with.  For now, try setting it to 650 pixels.
  • It's best to set the Border at 0 pixels unless you like seeing those ugly lines around everything.
  • Click the OK button.

You will now see your table outlined in red dotted lines (these won't show up when your email is sent).  For the purposes of this tutorial, we'll reserve the top row for the contents of your email and just use the bottom row for your graphic signature. 

  • Click into the bottom row.  Then, on the menu bar, click Insert, then Image... then the Choose File... button.
  • Locate your graphic on your hard drive and double click on it. Now click the Appearance tab at the top. You'll find an option at the top right that says, "Align Text to Image". From the drop-menu selection, choose the "Wrap to the right" option. This will allow you to type words that will appear to the right of your graphic.
  • If you'd like your graphic to be linked to a web site, click on the Link tab at the top and type in the URL of the web site in the space provided.
  • Click the OK button.

If you need to resize your graphic at this point, just click on it and resize using the tabs on the corners of the graphic.

Now click to the right of your graphic and begin typing your name, contact information, and whatever else you want to appear in your signature.   You can modify the font, size and color using the email text editing options.

Finally... we come to the fun part - creating the HTML code!

  • Go back up to the email menu bar at the top and choose Edit, then Select All
  • Next, go to Insert HTML...  
  • You will see a pop-up window that contains the HTML code you will need to create your signature.  To get the code, scroll over all of the code so that you have selected it all.  Next, right mouse click inside the code window and select Copy.  Or... a quick short-cut method for selecting and copying the code is to just left mouse click inside the code window, then type Control-A, then Control-C to select and copy it.

You're almost done!

Open the Notepad program that comes with Windows.  You'll find it on your computer listed under Start, Programs, Accessories.

  • In Notepad, click on Edit, then Paste. This will paste the code you copied into the page.
  • To save your file, click on File, then Save As
  • Locate the folder you created on your C drive called My Signatures
  • At the bottom of the flyout screen you'll see an option entitled Save as Type: Click on the down arrow next to the selection window and choose All Files
  • Now click in the window above that's called, File name: and type in the name of your signature and - this is the most important part, because you are creating an html file - type .html after the name.  For the time being, you might want to call it something like Test.html   Click on the Save button.

Phew.... that was a lot of work!  But now you have an html signature file that you can use in not only the Thunderbird email program, but also in Microsoft Outlook, as well as many other email programs.  When you open your email, the row above your graphic will be open and available for you to type your message into.  Try it out - send a few emails to yourself and see how they look.

Now that you've made it thought the basics, take a little time and have some fun creating a variety of HTML email signatures!

Here are the steps you need to take to use your HTML signature in Thunderbird...

  • From the menu bar, click on Tools, then Account Settings...  In the window that appears, click on your email address at the very top left.
  • Now click the check box about half-way down in the grey section that says, Attach this signature: Then click on the Choose... button.  Click the Open button, locate the folder you created on your C drive called My Signatures, and inside of that, your Test.html signature file.  Click the OK button.

Here are the steps you need to take to use your HTML signature in Microsoft Outlook...

  • Choose Tools, then Options. Click on the Mail Format tab at the top of the window.
  • Toward the bottom, click on the Signatures button to open the Create Signature dialog box.
  • Click the New button. Enter a name for your new signature in the space provided.
  • Click in the radio button titled Use this file as a template: Click the Browse.. button and locate the folder you created on your C drive called My Signatures, and inside of that, your Test.html signature file.
  • Click the Next> button. Click the Finish button. Click the OK button.
  • NOTE: the above steps may vary slightly with different versions of Outlook.

BTW - there is one advantage Microsoft Outlook has over Thunderbird - Outlook will let you set up your email program to use a number of different signatures. You can even select one signature for the new emails you create and a different one for emails you reply to.

CHECK BACK NEXT MONTH FOR PART 2 OF HTML EMAIL!

< <  BACK TO TOOLS INDEX


 

©2000 - 2007 Skylinewebs - All rights reserved - Comments to Webmistress
The material on this site is protected by US Copyright Laws and cannot be used, nor links created to, any page on this site without the express written consent of Skylinewebs.