How to send html e-mail
Part 2


1. Using the editor of choice, I use notepad++, create a minimal html file 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>    
  </head>
  <body>
    --- Your page content goes in here ---
  </body>
</html>
Save the file as *something*.htm

2. Create a table 800 pixels wide, possibly 5 boxes across and several deep:
         
         
         
Code: 
<table width="800" align="center" border="1" cellspacing="0" cellpaddig="0">
<tr>
<td width="160"> &nbsp; </td><td width="160"> &nbsp; </td><td width="160"> &nbsp; </td>
<td width="160"> &nbsp; </td><td width="160"> &nbsp; </td>
</tr>
</table>

Repeat the bits between <tr> and </tr> (inclusive) to generate multiple lines.
The &nbsp; (a space) is in there as a marker which will be replaced with text or an image as necessary.

3. Merge some of the cells as necessary for your document's layout, remembering that the cells will expand vertically as you enter text or images into them.
 
     
         
     
Code: 
<table width="800" align="center" border="1" cellspacing="0" cellpaddig="0"></tr>
<tr>
<td width="800" colspan="5"> &nbsp;</td>
<td width="320" colspan="2"> &nbsp; </td><td width="160"> &nbsp; </td> <td width="320" colspan="2"> &nbsp; </td>
</tr>
<tr>
<td width="160"> &nbsp; </td><td width="160"> &nbsp; </td><td width="160"> &nbsp; </td>
<td width="160"> &nbsp; </td><td width="160"> &nbsp; </td>
</tr>
</table>
4. Populate the tables with text and images, formatting the text and possibly altering the properties of the cells, altering the text alignment or the background colour for example. As this where you are going to have to get your hands mucky with in-line css let's do this step by step.
How to create an html e-mail
Code: 
<table width="800" align="center" border="1" cellspacing="0" cellpaddig="0"></tr>
<tr>
<td width="800" colspan="5"
style=" padding-top: 20px; padding-left: 10px; padding-right: 10px; padding-bottom: 20px;
		background-color:rgb(34,105,29); 
        font-family: Lucida Sans; font-size: 36px; color:#ffc000; text-align:center"
> 
How to create an html e-mail
</td>
</tr>
5. Add some more text and an image. You need to ensure the image is the correct size for the cell. Although the image can be stored locally for testing, it will eventually have to be stored on a public facing web server for the recipient to be able to view the image.
How to create an html e-mail
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod vulputate leo, at facilisis leo sodales nec. Aenean sodales tincidunt ligula, in pharetra tortor placerat in. Quisque pretium, turpis et blandit sollicitudin, diam quam gravida erat, vitae rhoncus neque nisl eget lacus. Donec suscipit mollis aliquam. Fusce suscipit magna et lectus porta, et pellentesque magna malesuada. Maecenas tempor consequat imperdiet. 		Logo2 Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod vulputate leo, at facilisis leo sodales nec. Aenean sodales tincidunt ligula, in pharetra tortor placerat in. Quisque pretium, turpis et blandit sollicitudin, diam quam gravida erat, vitae rhoncus neque nisl eget lacus. Donec suscipit mollis aliquam. Fusce suscipit magna et lectus porta, et pellentesque magna malesuada. Maecenas tempor consequat imperdiet.
         
     
Code: 
<td width="320" colspan="2"
style=" padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px; color:#000000; text-align:left"
>
<b>Lorem ipsum dolor</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Vivamus euismod vulputate leo, at facilisis leo sodales nec. 
Aenean sodales tincidunt ligula, in pharetra tortor 
placerat in. Quisque pretium, turpis et blandit 
sollicitudin, diam quam gravida erat, vitae rhoncus 
neque nisl eget lacus. Donec suscipit mollis aliquam. 
Fusce suscipit magna et lectus porta, et pellentesque 
magna malesuada. Maecenas tempor consequat imperdiet. 

 </td><td width="160"> 
<img src="http://www.edelsten.org.uk/bruce/images/image1.jpg" alt="image" width="160"/>
 </td>
Finally, change the table's border to zero: 
<table width="800" align="center" border="0" cellspacing="0" cellpaddig="0">
How to create an html e-mail
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod vulputate leo, at facilisis leo sodales nec. Aenean sodales tincidunt ligula, in pharetra tortor placerat in. Quisque pretium, turpis et blandit sollicitudin, diam quam gravida erat, vitae rhoncus neque nisl eget lacus. Donec suscipit mollis aliquam. Fusce suscipit magna et lectus porta, et pellentesque magna malesuada. Maecenas tempor consequat imperdiet. 		Logo2 Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod vulputate leo, at facilisis leo sodales nec. Aenean sodales tincidunt ligula, in pharetra tortor placerat in. Quisque pretium, turpis et blandit sollicitudin, diam quam gravida erat, vitae rhoncus neque nisl eget lacus. Donec suscipit mollis aliquam. Fusce suscipit magna et lectus porta, et pellentesque magna malesuada. Maecenas tempor consequat imperdiet.
         
     
Open the web page with your web browser or refresh the page if it was already open. From your browser's "Edit" menu choose "Select All” to select everything that is displayed in the browser. Then, from your browser's "Edit" menu, select "Copy" or CTRL+C.

With your e-mail client start a new e-mail and then paste (or CTRL+V) the copied web page into the mail message. Job Done.

Next