Step By step process of making an Email template in html

Posted By : Saloni Arora | 31-Jul-2018

Here, are the following tips that are needed to develop and make an emailer. 

The emailer is mostly required in any project because almost every project which is developed needs to have an email verification process.

 so for that, we need an emailer just to send email verification to the users.


Few Things to be kept in mind before starting the design of the emailer.

 

1) We have to make it inside the table tag.  


2) It Should have a proper opening and closing tag.


3) We need to write inline CSS for it.


4) For adding images we must have the images on the same location. so that it can be picked easily.


5) Table tag does not accept padding property.


6) It does not accept a button tag also.  So if you want to make a button then you must make it in the span tag.


7) A <tr> </tr> will work as a div in this.


It should be made in proper html format.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
       <title>
       </title>
   </head>
   <body>

   </body>
</html>

The table tag must be inside a body tag.

Demo of the emailer.  here is the simple example of any emailer.


 
<div style="max-width:700px; width:100%; margin:0 auto;">
<table style="width:600px; margin:0 auto;">
   <tbody>
      <tr>
         <td style="padding:10px 0;">
            <p style="text-align:center;color:red"> Welcome </p>
         </td>
      </tr>
      <tr  style=" border: 1px solid grey;
         box-shadow: 0px 0px 2px 2px #aeaeae;">
         <td>
            <table style="width:
               100%">
               <tbody>
                  <tr>
                     <td style="height:120px; background:#aeaeae">
                        <p style="text-align:center ; color:black; font-size:18px;"> Emailer</p>
                     </td>
                  </tr>
                  <tr>
                     <td>
                     </td>
                  </tr>
                  <tr>
                     <td style="padding: 30px 0;">
                        <h5 style="    margin: 0 auto;
                           text-align: center;"> Email Verification</h5>
                        <span style="margin:0 auto; display:block;text-align: center;">
                           <p style="margin: auto 0 !important;">
                              you are one step away from email verification
                           </p>
                           <p style="margin: auto 0 !important;">
                              Click on the button given below to verify your account.
                           </p>
                        </span>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <span style="    margin: 0 auto;
                           display: block;
                           height: 35px;
                           background: red;
                           width: 150px;
                           color: white;
                           text-transform: uppercase;      text-align: center;  padding-top: 10px; box-shadow: 1px 1px 1px 0px #aeaeea;">
                        Verify email
                        </span>
                     </td>
                  </tr>
                  <tr>
                     <td style="    text-align: center;
                        padding-top: 50px;">
                        <p> Best Regards </p>
                        <p>
                           <strong>XYZ Limited</strong>
                        </p>
                     </td>
                  </tr>
                  </td>
                  </tr>  
               </tbody>
            </table>
      </tr>
   </tbody>
</table>

OUTPUT

 

 

 

 

 

About Author

Author Image
Saloni Arora

Saloni Arora is a very positive person she always likes to take things positively. she has a desire of being a talented Front end developer . and she is seeking to grab more opportunities in future

Request for Proposal

Name is required

Comment is required

Sending message..