{"id":1490,"date":"2010-05-31T16:19:58","date_gmt":"2010-05-31T06:19:58","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=1490"},"modified":"2020-12-28T18:10:21","modified_gmt":"2020-12-28T08:10:21","slug":"how-to-code-an-html-email-newsletter","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/","title":{"rendered":"How to code an HTML Email Newsletter"},"content":{"rendered":"<p>In this step-by-step tutorial, I'm going to show you exactly how to code an HTML email; be it an HTML Email Signature or HTML Email Newsletter.  <\/p>\n<p><strong>1.  Changing the background color<\/strong><\/p>\n<pre>\r\n&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#333333&quot;&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;\r\n\t\r\n\t&lt;\/td&gt;\r\n   &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p><strong>2. Setting a fixed width and background color for the content area<\/strong><\/p>\n<pre>\r\n&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#333333&quot;&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;\r\n\t\t&lt;table width=&quot;600&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;5&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;\r\n\t\t\t\r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;\/table&gt;\r\n\t&lt;\/td&gt;\r\n   &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p><strong>3.  Changing the font size, style and color of the content area<\/strong><\/p>\n<pre>\r\n&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#333333&quot;&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;\r\n\t\t&lt;table width=&quot;600&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;5&quot; style=&quot;font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;\r\n\t\t\t\r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;\/table&gt;\r\n\t&lt;\/td&gt;\r\n   &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p><strong>4. Setting a different font, color and style for headings<\/strong><\/p>\n<pre>&lt;span style=&quot;font-size: 14px; font-weight: bold; color: #ed0000; \r\nfont-family:Arial, Helvetica, sans-serif;&quot;&gt;Latest News from the Web Development Blog&lt;\/span&gt;<\/pre>\n<p><strong>5. Inserting a line between two blocks of text<\/strong><\/p>\n<pre>\r\n\t&lt;table width=&quot;600&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;5&quot; style=&quot;font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;\r\n\t\t\t\tFirst block of text. \r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td style=&quot;border-top: 1px solid #66666;&quot;&gt;\r\n\t\t\t\tSecond block of text. \r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t&lt;\/table&gt;\r\n<\/pre>\n<p><strong>6. Inserting and floating an image to the left<\/strong><\/p>\n<pre>\r\n\t&lt;table width=&quot;600&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;5&quot; style=&quot;font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td width=&quot;150&quot; align=&quot;left&quot; valign=&quot;top&quot;&gt;\r\n\t\t\t\t&lt;img src=&quot;http:\/\/full.path.to.the.image\/image.jpg&quot; width=&quot;120&quot; height=&quot;100&quot; alt=&quot;My image&quot; \/&gt;\r\n\t\t\t&lt;\/td&gt;\r\n\t\t\t&lt;td width=&quot;450&quot; align=&quot;left&quot; valign=&quot;top&quot;&gt;\r\n\t\t\t\tText next to the image \r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td colspan=&quot;2&quot;&gt;\r\n\t\t\t\tCopyright text\r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t&lt;\/table&gt;\r\n<\/pre>\n<p><strong>7. Aligning text to right (or left or center)<\/strong><\/p>\n<pre>\r\n\t&lt;table width=&quot;600&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;5&quot; style=&quot;font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;\r\n\t\t\t\t&lt;div&gt;Some text goes here&lt;\/div&gt;\r\n\t\t\t\t&lt;div align=&quot;right&quot;&gt;&lt;a href=&quot;#&quot;&gt;Read more&lt;\/a&gt;&lt;\/div&gt;\r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t&lt;\/table&gt;\r\n<\/pre>\n<p><strong>8. Changing a link color <\/strong><\/p>\n<pre>&lt;a href=&quot;#&quot; style=&quot;color: #00ccff; \r\ntext-decoration: none;&quot;&gt;Read more&lt;\/a&gt;<\/pre>\n<p><strong>9. Adding a border around the content area<\/strong><\/p>\n<pre>\r\n&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#333333&quot;&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;\r\n\t\t&lt;table width=&quot;600&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;5&quot; style=&quot;font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px; border: 1px solid #00ccff; border-collapse: collapse;&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;\r\n\t\t\t\r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;\/table&gt;\r\n\t&lt;\/td&gt;\r\n   &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p><strong>10. Opening a link in a new window<\/strong><\/p>\n<pre>&lt;a href=&quot;http:\/\/www.google.com&quot; target=&quot;_blank&quot; \r\nstyle=&quot;color: #00ccff; text-decoration: none;&quot;&gt;Go to Google&lt;\/a&gt;<\/pre>\n<p><strong>Putting it altogether<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sample-newsletter-300x280.gif\" alt=\"\" title=\"Sample Email Newsletter\" width=\"300\" height=\"280\" class=\"alignnone size-medium wp-image-1496\" srcset=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sample-newsletter-300x280.gif 300w, https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sample-newsletter.gif 735w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<pre>\r\n&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;10&quot; bgcolor=&quot;#cccccc&quot;&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;\r\n\t\t&lt;table width=&quot;600&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;10&quot; cellspacing=&quot;5&quot; style=&quot;font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px; border: 1px solid #999999; border-collapse: collapse;&quot; bgcolor=&quot;#ffffff&quot;&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td colspan=&quot;2&quot; height=&quot;70&quot; bgcolor=&quot;#000033&quot;&gt;\r\n\t\t\t\t&lt;span style=&quot;font-size: 14px; font-weight: bold; color: #ff6600; font-family:Arial, Helvetica, sans-serif;&quot;&gt;Latest News from the Web Development Blog&lt;\/span&gt;\r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td colspan=&quot;2&quot; height=&quot;10&quot; bgcolor=&quot;#ff6600&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td width=&quot;150&quot; align=&quot;left&quot; valign=&quot;top&quot;&gt;\r\n\t\t\t\t&lt;img src=&quot;https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sexy-web-design.jpg&quot; width=&quot;250&quot; height=&quot;326&quot; alt=&quot;Sexy Web Design Book Cover&quot; \/&gt;\r\n\t\t\t&lt;\/td&gt;\r\n\t\t\t&lt;td width=&quot;450&quot; align=&quot;left&quot; valign=&quot;top&quot;&gt;\r\n\t\t\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt nisl et felis sodales faucibus. In hac habitasse platea dictumst. Sed tincidunt egestas velit mollis faucibus. Aliquam feugiat, neque nec porta accumsan, odio nulla laoreet risus, ut vestibulum lacus velit eget mi. Aliquam vehicula magna sed leo lobortis et luctus magna venenatis. Nunc et massa ipsum. In tristique, elit hendrerit tincidunt consectetur, diam purus tempor ante, eget scelerisque velit est vitae lorem. Nullam vulputate blandit dui et tempor. Curabitur quam lectus, suscipit non placerat a, consectetur vel velit. &lt;\/p&gt;\r\n\t\t\t\t&lt;p&gt;Vestibulum egestas ipsum quis elit pulvinar ullamcorper. Vestibulum ac neque sed neque consequat ornare eu et justo. Phasellus pulvinar vestibulum nisl, ut tempus dolor commodo at. Morbi ultricies nisl vel massa accumsan tempor. Donec quam nibh, euismod vitae vestibulum ac, ullamcorper non eros. Integer quis sapien ac enim rhoncus auctor. Nulla facilisi. Vivamus et varius massa. Integer aliquam ultricies risus nec vulputate. Donec porta viverra magna, a suscipit arcu porta non. &lt;\/p&gt;\r\n\t\t\t\t&lt;div align=&quot;right&quot;&gt;&lt;a href=&quot;#&quot; style=&quot;color: #ff6600; text-decoration: none;&quot; target=&quot;_blank&quot;&gt;Read more&lt;\/a&gt;&lt;\/div&gt;\r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td colspan=&quot;2&quot;&gt;\r\n\t\t\t\t&lt;p&gt;Praesent ut purus sit amet elit tincidunt laoreet a sed mauris. Integer a lacinia augue. Donec hendrerit sapien et lorem tincidunt a luctus purus vehicula. Cras magna diam, auctor sit amet pretium in, pretium a odio. Proin sed laoreet lorem. Mauris tortor diam, tempus sit amet lacinia in, egestas eu lectus. Vivamus aliquet hendrerit tellus sit amet pretium. Praesent dictum libero pretium magna pretium congue. Pellentesque consequat est a tortor tincidunt placerat in a ante. Sed non elit enim, vitae scelerisque ipsum. Integer fringilla, massa in ultrices bibendum, orci neque luctus arcu, in pulvinar elit risus eu nunc. Etiam dignissim malesuada consequat. Donec eget magna risus, eu vehicula ante. Quisque adipiscing placerat tincidunt. Aliquam ultrices vehicula velit, vel dignissim sem feugiat malesuada. Donec magna nisi, pretium at ullamcorper ultrices, sodales eu odio. Nulla facilisi. Curabitur hendrerit dictum rhoncus. Praesent bibendum dapibus ligula, ut placerat dolor vulputate vel. &lt;\/p&gt;\r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td colspan=&quot;2&quot; bgcolor=&quot;#cccccc&quot;&gt;\r\n\t\t\t\t&lt;span style=&quot;font-size: 10px; font-weight: bold; color: #666666; font-family:Arial, Helvetica, sans-serif;&quot;&gt;Copyright 2010 All Rights Reserved.&lt;\/span&gt;\r\n\t\t\t&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t&lt;\/table&gt;\r\n\t&lt;\/td&gt;\r\n   &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p><strong>Email Newsletter Templates<\/strong><\/p>\n<p>If you are looking for professional email newsletter designs, <a href=\"http:\/\/themeforest.net\/?ref=eisabai\">ThemeForest<\/a> is the best place to buy email newsletter templates because each template package comes with a complete HTML code and layered PSD file (and sometimes multiple color variations).  Our favourites are:<\/p>\n<p><a href=\"http:\/\/themeforest.net\/item\/inewsletter\/82750?ref=eisabai\">iNewsletter<br \/>\n<img decoding=\"async\" src=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/inewsletter.jpg\" alt=\"\" title=\"iNewsletter\" width=\"450\" class=\"alignnone size-full wp-image-1498\" srcset=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/inewsletter.jpg 590w, https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/inewsletter-300x152.jpg 300w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/themeforest.net\/item\/platnum-email-template-6-layouts-8-colors\/92281?ref=eisabai\">Platnum<br \/>\n<img decoding=\"async\" src=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/platnum.jpg\" alt=\"\" title=\"Platnum\" width=\"450\" class=\"alignnone size-full wp-image-1499\" srcset=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/platnum.jpg 590w, https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/platnum-300x152.jpg 300w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><br \/>\n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this step-by-step tutorial, I&#8217;m going to show you exactly how to code an HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,8,11,3],"tags":[],"class_list":["post-1490","post","type-post","status-publish","format-standard","hentry","category-css","category-snippets","category-tutorials","category-xhtml"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to code an HTML Email Newsletter | Tech Leadership Advice &amp; Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to code an HTML Email Newsletter | Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"og:description\" content=\"In this step-by-step tutorial, I&#039;m going to show you exactly how to code an HTML\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"article:published_time\" content=\"2010-05-31T06:19:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-28T08:10:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sample-newsletter-300x280.gif\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#\\\/schema\\\/person\\\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"How to code an HTML Email Newsletter\",\"datePublished\":\"2010-05-31T06:19:58+00:00\",\"dateModified\":\"2020-12-28T08:10:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/\"},\"wordCount\":160,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#\\\/schema\\\/person\\\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"image\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/sample-newsletter-300x280.gif\",\"articleSection\":[\"CSS\",\"Snippets\",\"Tutorials\",\"xHTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/\",\"url\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/\",\"name\":\"How to code an HTML Email Newsletter | Tech Leadership Advice &amp; Resources\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/sample-newsletter-300x280.gif\",\"datePublished\":\"2010-05-31T06:19:58+00:00\",\"dateModified\":\"2020-12-28T08:10:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/#primaryimage\",\"url\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/sample-newsletter-300x280.gif\",\"contentUrl\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/sample-newsletter-300x280.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2010\\\/05\\\/31\\\/how-to-code-an-html-email-newsletter\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to code an HTML Email Newsletter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#website\",\"url\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors\",\"publisher\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#\\\/schema\\\/person\\\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#\\\/schema\\\/person\\\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to code an HTML Email Newsletter | Tech Leadership Advice &amp; Resources","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/","og_locale":"en_US","og_type":"article","og_title":"How to code an HTML Email Newsletter | Tech Leadership Advice &amp; Resources","og_description":"In this step-by-step tutorial, I'm going to show you exactly how to code an HTML","og_url":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/","og_site_name":"Tech Leadership Advice &amp; Resources","article_published_time":"2010-05-31T06:19:58+00:00","article_modified_time":"2020-12-28T08:10:21+00:00","og_image":[{"url":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sample-newsletter-300x280.gif","type":"","width":"","height":""}],"author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"How to code an HTML Email Newsletter","datePublished":"2010-05-31T06:19:58+00:00","dateModified":"2020-12-28T08:10:21+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/"},"wordCount":160,"commentCount":7,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"image":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/#primaryimage"},"thumbnailUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sample-newsletter-300x280.gif","articleSection":["CSS","Snippets","Tutorials","xHTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/","url":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/","name":"How to code an HTML Email Newsletter | Tech Leadership Advice &amp; Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/#primaryimage"},"image":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/#primaryimage"},"thumbnailUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sample-newsletter-300x280.gif","datePublished":"2010-05-31T06:19:58+00:00","dateModified":"2020-12-28T08:10:21+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/#primaryimage","url":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sample-newsletter-300x280.gif","contentUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2010\/05\/sample-newsletter-300x280.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/05\/31\/how-to-code-an-html-email-newsletter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"How to code an HTML Email Newsletter"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=1490"}],"version-history":[{"count":17,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1490\/revisions"}],"predecessor-version":[{"id":3489,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1490\/revisions\/3489"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=1490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=1490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=1490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}