HTML Email help

1

Hi Guys, I’ve been asked to produce a HTML email and I need a little help with a few things, because it’s my first time at producing one.

I know I have to use tables and use a minimum of CSS and when I do attach it to the table itself.

The problem I’m having is that when I copy and paste my source code into my email client it doesn’t do anything, it just shows the code.

Now I know I’m doing something wrong. I think it has something to do with ‘MIME’ but I’m not sure where to begin or how to implement it. Could you please help me out a bit.

Here is my current source code.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

		<head>

			<title>hidden newsletter</title>
            
            <style type="text/css">
			
			a:link { color:#000000; text-decoration:none;}
			
			a:hover { color:#666666; text-decoration:underline;}
			
			a:active {color:#000000; text-decoration:none;}
			
			a:visited {color:#000000; text-decoration:none;}
			
			a:visited:hover{color:#666666; text-decoration:underline;}
			
			</style>

		</head>


	<body>    

		<table width="570" height="700" border="0" cellpadding="0" cellspacing="0" align="center">

		  <tr>
          
		    <td height="81" colspan="4" valign="top" style="background-color:#E8E8E8;">
            
            <div id="title1" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size: 20px;width:159px; height:auto; margin:10px 0px 0px 8px; float:left; z-index:2;">Welcome to the hidden E-Newsletter</div>
            
            <div id="title2" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size: 16px; text-align:right; width:74px; height:auto; float:right; margin:10px 8px 0px 0px;">hidden</div>
            
            <br /><br /><br />
            
            <div id="date" style="float:right;color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:11px; margin:0px 5px 0px 0px;">November 2007</div></td>
            
          </tr>
          
		  <tr>
          
		    <td height="250" width="570" colspan="4" valign="top" style=" width:577px; height:250px; background: url(images/main_img.jpg) no-repeat;" ><div id="feature_txt" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size: 14px; background: url(imgs/feature_bkg.png) no-repeat; width:186px; height:250px; z-index:3;"></div></td>
            
	      </tr>
          
		  <tr>
		    <td width="191" height="231" valign="top" style=" width:191px; height:231px; background: url(images/img1.jpg) no-repeat; border:1px solid #CCCCCC;"><div id="txt" style="color:#FFFFFF;   font-family:Helvetica, Arial, sans-serif; font-size: 14px; background: url(imgs/img_bit.png) repeat-x; width:auto; height:57px; margin:175px 0px 0px 0px; z-index:2;"></div></td>
            
	        <td width="191" valign="top" style="width:191px; height:231px; background: url(images/img2.jpg) no-repeat; border:1px solid #CCCCCC;"><div id="txt" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size: 14px; background: url(imgs/img_bit.png) repeat-x; width:auto; height:57px; margin:175px 0px 0px 0px; z-index:2;"></div></td>
            
		    <td width="191" valign="top" style=" width:191px; height:231px; background: url(images/img3.jpg) no-repeat; border:1px solid #CCCCCC;"><div id="txt" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size: 14px; background: url(imgs/img_bit.png) repeat-x; width:auto; height:57px; margin:175px 0px 0px 0px; z-index:2;"></div></td>
            
	      </tr>
          
          <tr>
          
            <td  width="570" height="138" colspan="3" valign="top" style="background-color:#E8E8E8;">
            
            <div id="quickNav" style="padding:4px 0px 4px 7px;font-family:Helvetica, Arial, sans-serif; font-size: 11px; width:570px; background-color:#cccccc; margin:20px 0px 0px 0px;"><a href="#">Contact Us</a> | <a href="#" target="_blank">Downloads</a></div>
            
            <div style="padding:4px 0px 4px 7px;font-family:Helvetica, Arial, sans-serif; font-size: 11px; width:420px; color:#666666;"><p>&copy; Hidden 2006</p><p>To Unsubscribe, simply click on the following link : <a href="#" target="_blank">unsubscribe</a>.</p><p>Please do not reply to this email. It has been sent from an address that does not accept incoming emails.</p><p><a href="#" target="_blank">Terms and Conditons</a></p></div>
            
            </td>
            
          </tr>
          
</table>
	
    </body>

</html>

Perhaps I’m just going about it all wrong. I’m rubbish with tables, I’ve normally stayed away from them and stuck with CSS.

I’ve also got to produce a cms of some form to produce this also! :frowning: . I’ll contact you guys later about that hehe.

Thanks, any advice or tips would be greatly appreciated.

Addendum: I’ve been looking at the source of a few other HTML emails that I have recieved and I see a lot of “3D” and “=09” is there anything to do with that? Or is that just random junk?