() translation by (you can also view the original English article)
किसी भी प्रक्रिया को समझने का सबसे अच्छा तरीका यह है कि वह अपने आप को जमीन से ऊपर उठाए। आज, हम ईमेल डिजाइन के साथ, स्क्रैच से एक HTML ई-मेल टेम्पलेट का निर्माण कर रहे हैं।
किक थिंग्स ऑफ
शुरू करने के लिए, यह उल्लेखनीय है कि मैंने कहां से संसाधनों में से कुछ निकाला था।
- प्यारा 2D आइकन ड्ररबबल पर Pierre Borodin द्वारा दिए गए हैं
- इस्तेमाल किए जाने वाले टाइपफेस हैं Oil Can, Source Sans Pro और Mission Script
- सोशल मीडिया आइकन Metrize Icons से हैं
अब, जैसा हमने previous tutorial में चर्चा की थी, आपको अपने HTML ईमेल डॉक्यूमेंट को XHTML डॉकटाइप के साथ शुरू करना होगा:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
5 |
<title>Demystifying Email Design</title> |
6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
7 |
</head>
|
8 |
</html>
|
उस सॉर्ट के साथ, हम बाकी संरचना का निर्माण शुरू कर सकते हैं।
body और मुख्य table बनाना
सबसे पहले, हम एक <body> tag से शुरू करते हुए, हमारे ईमेल के लिए एक समग्र संरचना जोड़ देंगे। किसी भी अप्रत्याशित स्थान से बचने के लिए हम body tag पर margin और padding शून्य पर सेट करेंगे।
हम 100% की चौड़ाई के साथ एक table भी जोड़ देंगे। यह हमारे ईमेल के लिए सही body tag के रूप में कार्य करता है, क्योंकि body tag की स्टाइल पूरी तरह से समर्थित नहीं है। अगर आप अपने ईमेल के 'body' में बैकग्राउंड का रंग जोड़ना चाहते हैं, तो आपको इसके बजाय इस बड़ी मेज पर आवेदन करना होगा।
table में किसी भी अप्रत्याशित स्थान से बचने के लिए अपनी cellpadding और cellspacing को शून्य पर सेट करें।
नोट: हम अपने सभी table पर border= "1" छोड़ने जा रहे हैं, ताकि हम अपने लेआउट के ढांचे को देख सकें जैसे हम जाते हैं। हम उन्हें सरल खोज और बदलें के साथ अंत में निकाल देंगे।
1 |
<body style="margin: 0; padding: 0;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Hello! |
6 |
</td>
|
7 |
</tr>
|
8 |
</table>
|
9 |
</body>
|
अगर एक विशेषता HTML में मौजूद है, तो इसके बजाय CSS का उपयोग करें
अब inside the container table 600 पिक्सल की एक केंद्रित टेबल में रखें। 600 पिक्सल आपके ईमेल के लिए सबसे अधिक स्क्रीन रिज़ॉल्यूशन पर सबसे अधिक डेस्कटॉप और वेबमेल क्लाइंट के बीच आराम से प्रदर्शित करने के लिए एक सुरक्षित अधिकतम चौड़ाई है।
चौड़ाई विशेषता का उपयोग करके इस चौड़ाई को CSS के बजाय HTML का प्रयोग करें। HTML ईमेल डेवलपमेंट में सुनहरा नियम है: यदि एक विशेषता HTML में मौजूद है, तो इसका उपयोग CSS के बजाय करें।
हम इस टेबल के साथ हमारे छोटे 'Hello!' नमस्कार करेंगे!
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Hello! |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
हमने एक इनलाइन स्टाइल संपत्ति भी जोड़ी है जो border-Collapse प्रॉपर्टी को collapse के लिए निर्धारित करती है। अगर हम ऐसा नहीं करते हैं, आउटलुक के नए संस्करण हमारे टेबल और हमारी सीमा के बीच एक छोटी सी जगह जोड़ देगा।
संरचना और हैडर बनाना
हमारे डिजाइन में हम देख सकते हैं कि ईमेल को तीन लॉजिकल अनुभागों में विभाजित किया गया है, इसलिए हम प्रत्येक के लिए एक पंक्ति बना देंगे।
चलो हम पहले से ही एक पंक्ति बनाते हैं ताकि हमारे पास कुल तीन हो। मैंने उनके अंदर टेक्स्ट को बदल दिया है ताकि हम आसानी से प्रत्येक पंक्ति की पहचान कर सकें।
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td>
|
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
अब हम उन्हें डिज़ाइन के अनुसार रंग देंगे। चूंकि bgcolor एक वैध HTML विशेषता है, हम इसे CSS के बजाय बैकग्राउंड रंग सेट करने के लिए उपयोग करेंगे। हमेशा हेक्स कोड के पूर्ण छः अक्षरों का उपयोग करने के लिए याद रखें, क्योंकि तीन अक्षर शार्ट-हैंड हमेशा काम नहीं करेगा।
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td bgcolor="#70bbd9"> |
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td bgcolor="#ffffff"> |
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td bgcolor="#ee4c50"> |
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
ठीक है, अगली बार हम पंक्ति 1 पर ध्यान केंद्रित करने जा रहे हैं। हम सेल पर पैडिंग को समायोजित करना चाहते हैं और फिर हमारी इमेज डालें।
पैडिंग का उपयोग करना
ईमेल में पैडिंग का उपयोग करते समय, आपको हमेशा प्रत्येक एक मान (ऊपर, दाएं, नीचे और बाएं) को निर्दिष्ट करना चाहिए अन्यथा आप अप्रत्याशित परिणाम प्राप्त कर सकते हैं। मुझे लगता है कि आप अब भी लघुकथ का उपयोग कर सकते हैं, अर्थात padding: 10px 10px 8px 5px ;, लेकिन अगर आपको परेशानी हो रही है, तो आप इसे लंबे समय से लिखना चाहते हैं, अर्थात padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px ;।
यदि आपको पैडिंग के साथ भी अधिक परेशानी हो रही है (उदाहरण के लिए, यदि आपका सेंड प्लेटफ़ॉर्म आपके CSS को बाहर निकाल रहा है), तो इसका उपयोग बिल्कुल नहीं करें। अंतरिक्ष बनाने के लिए बस खाली सेल्स का उपयोग करें। स्पेसर GIF का उपयोग करने की कोई ज़रूरत नहीं है, सिर्फ यह सुनिश्चित करें कि आप style="line-height: 0; font-size: 0;" सेल में, एक अंदर और इसे एक स्पष्ट ऊंचाई या चौड़ाई दे। यहाँ एक उदाहरण है:
1 |
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> |
यह भी ध्यान रखें कि TD टैग पर पैडिंग का उपयोग करना सुरक्षित है लेकिन P टैग या DIVs पर नहीं। वे बहुत अधिक अप्रत्याशित व्यवहार करते हैं।
तो, हम सेल में पैडिंग जोड़ने के लिए कुछ इनलाइन CSS का उपयोग करेंगे। फिर हम अपनी इमेज को सम्मिलित कर देंगे, ऑल्ट टेक्स्ट जोड़कर और style="display:block;" जो एक आम फिक्स है जो कुछ ईमेल क्लाइंट को आपकी इमेजेज के नीचे अंतराल जोड़ता है। हम अपने td टैग पर align="center" जोड़कर इमेज को केन्द्रित करेंगे। हम एक Alt टैग भी जोड़ देंगे जो कि जब हमारे ईमेल को शुरू में लोड किया जाता है, तब ज़्यादा ज़रूरी है, जो अधिकांश मामलों में, इमेजेज के साथ हो जाएगा।
Note: यदि आपके शीर्ष लेख की कंटेंट आपके संदेश के लिए वास्तव में महत्वपूर्ण हैं, तो केवल इमेज-केवल हेडर का उपयोग न करें। याद रखें, इमेजेज अधिकांश ग्राहकों के लिए डिफ़ॉल्ट रूप से अवरुद्ध हैं, इसलिए यदि आपके ईमेल का एक पहलू महत्वपूर्ण है, तो उसे एक इमेज के रूप में शामिल न करें। इस उदाहरण में, हालांकि, मेरा हैडर बहुत अनावश्यक है।
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
कंटेंट क्षेत्र बनाना
सबसे पहले, हम मध्य सेल में कुछ पैडिंग जोड़ देंगे, ताकि हमारे डिजाइन के अनुसार टेबल में इसके आस-पास कुछ जगह हो।
अब हम अपनी मुख्य कंटेंट के लिए तीन पंक्तियों के साथ एक टेबल जोड़ देंगे - एक शीर्षक के लिए, परिचयात्मक टेक्स्ट के लिए एक और दो कॉलम के साथ एक पंक्ति के लिए। हम इस टेबल की चौड़ाई को पिक्सेल मूल्य का उपयोग करने के बजाय 100% पर सेट करेंगे, क्योंकि यह हमारी ट्रैक को और नीचे करने में मदद करेगा अगर हम अपना ईमेल रेस्पॉन्सिव बनाना चाहते हैं। यदि आपके पास हमेशा सबकुछ पर पिक्सेल चौड़ाई है, तो आप मीडिया क्वेरीज़ के साथ ओवरराइड करने के लिए बहुत सारे मानों के साथ समाप्त कर सकते हैं। यदि आपकी नेस्टेड टेबल की चौड़ाई प्रतिशत पर आधारित होती है, तो जब आप पैरेंट एलिमेंट की चौड़ाई समायोजित करते हैं, तो सब कुछ तदनुसार अनुकूलित होगा।
1 |
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Row 1 |
6 |
</td>
|
7 |
</tr>
|
8 |
<tr>
|
9 |
<td>
|
10 |
Row 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
<tr>
|
14 |
<td>
|
15 |
Row 3 |
16 |
</td>
|
17 |
</tr>
|
18 |
</table>
|
19 |
</td>
|
अब हम अपनी कंटेंट में जोड़ देंगे, और मध्य सेल में कुछ पैडिंग जोड़ेंगे।
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Lorem ipsum dolor sit amet! |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td style="padding: 20px 0 30px 0;"> |
9 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
अब हम कंटेंट के दो स्तंभों को पंक्ति 3 में जोड़ सकते हैं। क्योंकि हम इन दो कोशिकाओं के बीच एक 'margin' चाहते हैं, लेकिन मार्जिन समर्थित नहीं है, हम एक तीन-स्तंभ टेबल बना देंगे जिसमें एक खाली सेल दो बाहरी कॉलम हो।
जितना मैं प्रतिशत के साथ रहना पसंद करता हूं, जब आपके पास कंटेंट है जो एक विशिष्ट आकार है, तो इसे एक प्रतिशत में परिवर्तित करने के लिए मुश्किल हो सकता है (इस उदाहरण में, कॉलम 48.1% होंगे जो कि भ्रमित हो सकता है)। इस कारण से, चूंकि हमारी दो इमेजेज 260px चौड़ी हैं, हम उन स्तंभों को बनायेंगे जो मध्य में 20px मार्जिन सेल के साथ 260px चौड़े भी हैं। (यह 540px, जो कि हमारी मेज की 600px चौड़ाई से कम है, दोनों ओर 30px के पैडिंग को शून्य करना होगा।) अपने फ़ॉन्ट-आकार और रेखा-ऊंचाई को शून्य करना सुनिश्चित करें और एक गैर-ब्रेकिंग स्पेस वर्ण जोड़ें मार्जिन सेल में।
हम दोनों सेल्स के लिए "top" के लिए valign सेट भी करेंगे ताकि वे खड़ी शीर्ष पर संरेखित करें, भले ही एक कॉलम में दूसरे की तुलना में अधिक टेक्स्ट हो। डिफ़ॉल्ट वर्टीकल एलाइनमेंट "middle" है।
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
Column 1 |
5 |
</td>
|
6 |
<td style="font-size: 0; line-height: 0;" width="20"> |
7 |
|
8 |
</td>
|
9 |
<td width="260" valign="top"> |
10 |
Column 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
</table>
|
अब हम उन कॉलम में अपनी इमेजेज और कंटेंट जोड़ते हैं। जैसा कि हमें कई पंक्तियों की आवश्यकता है, हम अभी तक एक और टेबल परोसेंगे क्योंकि हम किसी भी colspan या rowspan टैग का उपयोग नहीं कर सकते। हम प्रत्येक कॉलम में इमेज और प्रतिलिपि के बीच कुछ पैडिंग भी जोड़ देंगे।
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
5 |
<tr>
|
6 |
<td>
|
7 |
<img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" /> |
8 |
</td>
|
9 |
</tr>
|
10 |
<tr>
|
11 |
<td style="padding: 25px 0 0 0;"> |
12 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
16 |
</td>
|
17 |
<td style="font-size: 0; line-height: 0;" width="20"> |
18 |
|
19 |
</td>
|
20 |
<td width="260" valign="top"> |
21 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
22 |
<tr>
|
23 |
<td>
|
24 |
<img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" /> |
25 |
</td>
|
26 |
</tr>
|
27 |
<tr>
|
28 |
<td style="padding: 25px 0 0 0;"> |
29 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
30 |
</td>
|
31 |
</tr>
|
32 |
</table>
|
33 |
</td>
|
34 |
</tr>
|
35 |
</table>
|
यहां हमने HTML के 100% कॉलम चौड़ाई पर इमेजेज की चौड़ाई निर्धारित की है। यह, फिर से, यह है कि अगर हम इस ईमेल को रेस्पॉन्सिव बनाते हैं, तो हमें केवल पैरेंट एलिमेंट की चौड़ाई बदलने के लिए मीडिया क्वेरीज का उपयोग करना होगा। हमें ऊंचाई को पिक्सल में ओवरराइड करना होगा क्योंकि style="height: auto" का प्रयोग करने से अब सब कुछ (cough cough, Outlook) में काम नहीं करेगा। तो हम इसे पिक्सेल का उपयोग करके सेट कर देंगे। इसका मतलब है कि हमें सेट करना होगा height: auto!important उन चित्रों पर जरूरी है जो मीडिया क्वेरीज को पिक्सेल मूल्य को ओवरराइड करने के लिए उपयोग करता है, लेकिन हम इसे एक सिंगल क्लास के साथ कर सकते हैं। जैसा कि हम एक प्रतिशत के रूप में चौड़ाई निर्धारित करते हैं, हमें इसे ओवरराइड करने की आवश्यकता नहीं होगी। ओवरराइड करने वाली कम चीजें, बेहतर है।
फुटर
अब हम फुटर पंक्ति में हमारे पैडिंग को जोड़ देंगे।
1 |
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> |
2 |
Row 3 |
3 |
</td>
|
उस सेल के अंदर, हम अपने दो स्तंभों को प्राप्त करने के लिए एक अन्य टेबल में झुंड करेंगे।
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Column 1 |
5 |
</td>
|
6 |
<td>
|
7 |
Column 2 |
8 |
</td>
|
9 |
</tr>
|
10 |
</table>
|
हम अपने सोशल मीडिया आइकनों के लिए एक और छोटी सी टेबल बनाएंगे। हम अपने मूल सेल को align="right" सुनिश्चित करें। कि आप इन इमेज लिंक पर border= "0" निर्धारित करते हैं (नीले लिंक सीमा से बचने के लिए) और प्रदर्शन को मत भूलें display:block।
1 |
<td align="right"> |
2 |
<table border="0" cellpadding="0" cellspacing="0"> |
3 |
<tr>
|
4 |
<td>
|
5 |
<a href="http://www.twitter.com/"> |
6 |
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> |
7 |
</a>
|
8 |
</td>
|
9 |
<td style="font-size: 0; line-height: 0;" width="20"> </td> |
10 |
<td>
|
11 |
<a href="http://www.twitter.com/"> |
12 |
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> |
13 |
</a>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
</td>
|
अब हम अपने टेक्स्ट को जोड़ते हैं और हमारे सेल्स के लिए चौड़ाई जोड़ते हैं, बस सुरक्षित होने के बावजूद, उनके बीच बहुत अधिक सफेद स्थान है। हम इस सेल को 75% और दूसरे से 25% तक सेट करेंगे।
1 |
<td width="75%"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
Unsubscribe to this newsletter instantly |
4 |
</td>
|
एंड देयर वी हैव इट! हमारा लेआउट पूरा हो गया है।
मान्यकरण
चलिए यह सुनिश्चित करने के लिए W3C Validator के माध्यम से इसे चलाएं कि कुछ भी बुरा नहीं है या टूटा हुआ है। यदि आप ठीक से पालन करते हैं, तो यह कहेंगे कि यह पारित हो चुका है।
आगे हम लिमिट्स के माध्यम से एक परीक्षण चलाने जा रहे हैं यह सुनिश्चित करने के लिए कि हमारे ईमेल की संरचना महान काम करती है। मेरे परीक्षण का सारांश यहां दिया गया है:
हमारे टेक्स्ट स्टाइलिंग
हमारी पहली पंक्ति हैडिंग है। हम बोल्ड टेक्स्ट बनाने के लिए <b> टैग का उपयोग करेंगे क्योंकि, जैसा कि हम पहले से जानते हैं, अगर यह HTML में मौजूद है, तो हम इसका उपयोग CSS के बजाय करते हैं।
1 |
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> |
2 |
<b>Lorem ipsum dolor sit amet!</b> |
3 |
</td>
|
हम इस इनलाइन स्टाइल को टेक्स्ट के अन्य सभी सेल्स में भी जोड़ देंगे:
1 |
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" |
इसके बाद हमें फुटर टेक्स्ट स्टाइल की ज़रूरत है, और हम हमारी सदस्यता रद्द लिंक को भी व्यवस्थित कर देंगे। हम CSS और HTML <font> टैग दोनों का उपयोग करते हुए हमारी सदस्यता समाप्त करने के लिए लिंक करेंगे। यह दोहरीकरण ऊपर यह सुनिश्चित करने का सबसे अच्छा तरीका है कि आपके लिंक डिफ़ॉल्ट नीले रंग में कभी नहीं दिखाए जाएंगे।
1 |
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly |
4 |
</td>
|
एंड देयर वी हैव इट! सब कुछ अंदर है। बॉर्डर्स को बंद करने और सुंदर दिखाने का समय। border="1" के साथ border="0" के माध्यम से जाएं और प्रतिस्थापित करें।
इस बिंदु पर, यह सफेद स्पेस में थोड़ा सा उदास दिख रहा है, तो चलो पहले 600px चौड़ी टेबल पर जाएं और जोड़ें:
1 |
style="border: 1px solid #cccccc;" |
अब ऐसा नहीं लगता है कि यह अब फ़्लोटिंग है। एक अंतिम स्पर्श के रूप में, मैं बहुत पहले सेल के नीचे 30px पैडिंग को जोड़ने के लिए जा रहा हूं, ताकि हमारे ईमेल को कुछ वेबमेल क्लाइंट्स (जैसे एप्पल मेल) में नीचे से बंद कर दिया गया हो, और शीर्ष पर पैडिंग की 10px , ताकि हमारे नीले हेडर में थोड़ा सा साँस लेने का कमरा हो।
1 |
<td style="padding: 20px 0 30px 0;"> |
और बस! आप अंतिम परीक्षा के लिए तैयार हैं।
वह एक कवर है!
इससे पहले कि हम इसे एक दिन कहते हैं, अगर आपने कोई टिप्पणी की है, तो उनसे छुटकारा पाएं। कुछ ईमेल क्लाइंट टिप्पणियों पर गड़बड़ी कर सकते हैं, इसलिए यह आपकी फ़ाइलों में कहीं भी कोई भी अनावश्यक कोड नहीं है।
अब अंतिम परीक्षा करने का एक अच्छा समय है, और फिर, आपका HTML ईमेल भेजने के लिए तैयार है!
अगले स्तर तक आपने क्या सीखा है, अगले ट्यूटोरियल देखें:
