Wolf Mailing and Marketing Services, Inc. - Library - How to Make html eMails Online Tutorial

This article will give a better understanding of what it takes to create a html email. Below is an exploded view of html email code. Write the tags down in notepad for a completed html email by the end of the page.

Open Notepad. Write each tag, the text that is bold, on a seperate line. When finished, there should be the same number of lines of code as there are steps here.

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> This piece of code will tell the browser or email program that it is a html message. The W3C has specified this line of code. Learn more about the W3C and about writing html at http://www.w3.org.

2. <html> This tag explains to the email program or the browser that the document, until the closing tag </html>, will be a html document.

3. <head> This tag puts information that will not be displayed in the page. There is plenty to place here, but for now, stick with the title.

4. <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> This is another line of code that tells the browser or email program that it is being sent an html message.

5. <title>Your Company Email</title> This area is reserved for the page title. When a webpage is created, the title is displayed in the top bar of the browser. Insert the title and close this tag with </title>

6. </head> Close the head tag so that the browser or email program knows it is done with this section.

7. <body> This tag lets the browser or email program know that it is ready for the meat of our message. There are plenty of attributes you can add to this tag; such as, background color or a background image. However, some email programs ignore these attributes.

8. <table width="550" border="1" bordercolor="#000000" bgcolor="#ffffff"> A table is a set of rows and columns that has information in them. The table tag makes it known that we are ready to setup a grid. The attributes to the right of table tell the computer to make the message a width of 550 pixels, create a border 1 pixel thick, the border should be the color black, and the background color should be white. This table will be the barrier that will confine all other information to that 550 pixel width.

9. <tr><td> The table row and cell is created with these tags. Now information can be plugged into this cell.

10. <table> This table is where our message starts.

11. <tr><td> Create another table row and cell within this table.

12. <img src="http://www.wolfmailing.com/ images/yourcompanylogo.gif"> In the first cell put the company logo.

13. </td><td width="100%" align="center"> Close the first cell and open a new one. This cell will have a width that stretches across all the available space left and aligns the information inside the cell to the center.

14. <font face="arial" size="2"><b>The Company Motto</b></font> Here the company motto is inserted and formatted in a special way. By using the font tag, it is told to be an arial type and a size of 2. Also, the b tag tells the text to be bold.

15. </td></tr> Close the table cell and the row.

16. <tr height="1"><td colspan="2" bgcolor="#000000"></td></tr> Next, create a row only 1 pixel high and open a table cell that will span across the two cells made previously. Also, make the background color black. This will make a horizontal line

17. <tr><td colspan="2"><font face="arial" size="3"><b>Headline</b></font> A new row is opened, a new cell is opened, and formatted text is entered.

18. <br><img src="http://www.wolfmailing.com/ images/yourcompanypicture.gif" align="right"> The img tag does have one special attribute. Align="right" will make a picture appear at the right and the text will wrap around it. And the br tag in the front starts a new line for our picture and text to follow.

19. <font face="arial" size="2">The Company Message</font> The text is formatted just like the rest.

20. </td></tr> Close the cell and the row.

21. <tr><td colspan="2" bgcolor="#cccccc">Your Contact Information</td></tr> Color the background grey to separate it from the text.

22. </table> Close the second table.

23. </td></tr></table> Close the first cell, row, and table.

24. </body> Close the body of our page.

25. </html> Close the html page.

Now save the page as a text document with the suffix extension .htm. Double click on the new html page to see it in a browser.

The page should look something like this. yourcompanyemail.htm

To view the source code of this page, right click on the page and then click VIEW SOURCE.

(Back to the Library Menu)