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
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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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