email ट्यूटोरियल
ईमेल से शुरुआत करना

Android ASP.NET C# Language CSS HTML Java Language JavaScript PHP Python Language Ruby on Rails

टिप्पणियों

HTML ईमेल HTML और CSS का उपसमुच्चय है, जो रंगों, ग्राफिक्स, टेबल कॉलम और लिंक का उपयोग करके वेब पेज की तरह एक ईमेल संदेश को प्रारूपित करता है।

उपयोगी कड़ियाँ:

HTML और सादा पाठ

जब आप एक ईमेल भेजते हैं तो यह सादे पाठ और HTML दोनों को भेजने के लिए महत्वपूर्ण है। आप अपने ईमेल को मल्टी-पार्टटाइम MIME के रूप में भेजकर ऐसा करते हैं। अधिकांश ईमेल सेवा प्रदाताओं के पास आपके लिए MIME का निर्माण करने के लिए उपकरण हैं। कुछ आपके HTML संस्करण के आधार पर एक सादा पाठ संस्करण उत्पन्न करेंगे, और तीसरे पक्ष के उपकरण भी हैं।

केवल-पाठ ईमेल का उदाहरण:

# EMAIL TITLE GOES HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.

Learn more: http://www.website.com/landing-page-1

---

## Subheader goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.

Learn more: http://www.website.com/landing-page-2

---

Footer and Sender information

Unsubscribe here: http://www.website.com/unsubscribe

ध्यान दें कि Apple वॉच के हालिया लॉन्च के साथ, एक नया MIME हिस्सा सामने आया है: text/watch-html । यह सामग्री केवल Apple वॉच में दिखाई जाएगी (और कोई भी अन्य क्लाइंट जो इस MIME प्रकार का समर्थन करता है)।

ईमेल ग्राहकों और प्रतिपादन इंजन

ईमेल क्लाइंट HTML ईमेल को रेंडर करने के लिए विभिन्न रेंडरिंग इंजन का उपयोग करते हैं:

ऐप्पल मेल, मैक के लिए आउटलुक, एंड्रॉइड मेल और आईओएस मेल वेबकिट का उपयोग करते हैं
Outlook 2000/02/03 इंटरनेट एक्सप्लोरर 6 का उपयोग करें
Outlook 2007/10/13 Microsoft Word का उपयोग करें
वेब क्लाइंट अपने ब्राउज़र के संबंधित इंजन का उपयोग करते हैं (जैसे सफारी वेबकिट का उपयोग करता है, क्रोम ब्लिंक का उपयोग करता है)

कुछ क्लाइंट आपकी खुद की शैलियों को भी आपके ऊपर जोड़ देंगे जैसे जीमेल सेट करता है सभी <td> फ़ॉन्ट से font-family: arial,sans-serif; , जो प्रभावित कर सकता है कि एक ईमेल कैसे प्रस्तुत करता है।

2016 से पहले, सभी जीमेल उत्पादों ने <link> टैग, किसी भी सीएसएस के अंदर <style> टैग, और किसी भी अन्य सीएसएस को इनलाइन नहीं किया। 2016 के अंत में, जीमेल ने अपने अधिकांश उत्पादों में <style> टैग और मीडिया-प्रश्नों का समर्थन करना शुरू कर दिया। यहाँ 23-Nov-2016 के रूप में एक अद्यतन है :

मूल बातें (टेबल्स और इनलाइन सीएसएस)

लेआउट के लिए टेबल्स

HTML ईमेल फ़ाइल की संरचना वेब पेज के समान है:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is a simple paragraph.</p>
    </body>
</html>

हालाँकि <div> -based CSS लेआउट ईमेल में काम नहीं करता है क्योंकि यह वेब पर होता है। प्रमुख ईमेल क्लाइंट या तो फ़्लोट्स और फ्लेक्सबॉक्स जैसी चीजों के लिए कोई समर्थन नहीं देते हैं, या इसे अलग-अलग तरीकों से प्रबंधित करते हैं। <div> विभिन्न क्लाइंट्स, विशेष रूप से आउटलुक में पोजिशनिंग और बॉक्स मॉडल के मुद्दे भी हैं। केवल <div> s का उपयोग करके ईमेल को कोड करने के लिए कुछ तकनीकें हैं , लेकिन लेआउट के लिए तालिकाओं के साथ रहना सुरक्षित है।

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body>
        <table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
            <tr>
                <td width="200">
                    <h1>Hello World!</h1>
                </td>
                <td width="400">
                    <p>This is a simple paragraph.</p>
                </td>
            </tr>
        </table>
    </body>
</html>

इनलाइन सीएसएस

एक स्टाइल इनलाइन लागू करने से यह शैलियों पर और अधिक प्राथमिकता देता है (जैसे वेबमेल क्लाइंट स्टाइल), और यह भी ईमेल क्लाइंट के आसपास काम करता है जो सीएसएस को सिर या बाहरी सीएसएस फाइलों से बाहर निकालता है। इनलाइन सीएसएस हर ईमेल क्लाइंट में लगातार प्रदर्शन सुनिश्चित करने का सबसे अच्छा तरीका है।

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body style="background: #000000;">
        <table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
            <tr>
                <td width="200" style="padding: 20px; background-color: #eeeeee;">
                    <h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
                </td>
                <td width="400" style="padding: 20px;">
                    <p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
                </td>
            </tr>
        </table>
    </body>
</html>

आपके पास CSS को इनलाइन करने के लिए कुछ विकल्प हैं:

आप जाते ही CSS इनलाइन लिखें
अपने संपादक में स्थानीय स्निपेट का उपयोग करें
इस तरह से एक वेब-आधारित सीएसएस इनलाइनर का उपयोग करें
इस तरह के एक प्रोग्राम सीएसएस इनलाइनर का उपयोग करें
इस तरह की एक निर्माण प्रक्रिया का उपयोग करें या एक अस्थायी भाषा
अपने ईमेल सेवा प्रदाता को आपके लिए इनलाइनिंग को संभालने दें (यदि वे इसका समर्थन करते हैं)

सभी ईमेल क्लाइंट के लिए कोडिंग ईमेल

कोडिंग विधि का इस्तेमाल किया: हाइब्रिड / स्पंजी

यह हमेशा के लिए एक मिथक रहा है कि div का उपयोग ईमेल में नहीं किया जा सकता है। ईमेल क्लाइंट (आउटलुक के विपरीत) जो डिव के ठीक से रेंडर कर सकते हैं। नीचे दिए गए उदाहरण से स्पष्ट होगा कि एक ईमेल को कैसे कोडित किया जा सकता है जो जीमेल ऐप पर काम करेगा (अपडेट अभी तक नहीं लुढ़का है), सैमसंग डिवाइस और अन्य ईमेल क्लाइंट जो मीडिया क्वेरी नहीं पढ़ते हैं।

प्रस्तुत है आउटलुक सशर्त बयान

आउटलुक के स्टेटमेंट स्टेटमेंट बहुत उपयोगी होते हैं, जब यह ईमेल प्रदान करने या आउटलुक के लिए फ़ॉल बैक जैसे कुछ विशिष्ट दिखाने की बात आती है।

<!--[if (gte mso 9)|(IE)]>
<![endif]-->

उपरोक्त कोड पढ़ता है यदि Microsoft दृष्टिकोण 9 या IE से अधिक है

Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15

सूचीबद्ध सशर्त विवरणों के लिए संस्करण।

एक हाइब्रिड ईमेल टेम्पलेट शुरू करना

प्रत्येक चरण को इस तरह से समझाया गया है कि मूल HTML ज्ञान वाले किसी के लिए भी इसे समझना आसान होना चाहिए।

सबसे पहले हम एक रैपर टेबल के साथ शुरू करते हैं जो स्क्रीन के पार और कंटेनर के एक वर्ग के साथ सभी तरह से फैलेगी।

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[CONTENT GOES HERE]</td>
    </tr>
  </tbody>
</table>

उसके बाद हम ईमेल क्लाइंट के लिए एक मीडिया क्वेरी में जोड़ते हैं जो न तो अधिकतम चौड़ाई पढ़ता है बल्कि हेडर में सीएसएस पढ़ता है। मीडिया क्वेरी सभी स्क्रीन को लक्षित कर रही होगी और कंटेनर को 700 पिक्सेल चौड़ाई पर दिखा रही होगी।

@media only screen and (max-width : 700px) {
.container{width:700px;}
}

आगे हम एक आउटलुक सशर्त विवरण जोड़ते हैं जो तालिका (क्लास कंटेनर के साथ) को 700 पिक्सेल की चौड़ाई पर रखता है।

<!--[if (gte mso 9)|(IE)]>
    <table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="left" valign="top" width="700">
    <![endif]-->
    
        <table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
              <tbody>
                <tr>
                  <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
                </tr>
              </tbody>
        </table>

    <!--[if (gte mso 9)|(IE)]>
            </td>
        </tr>
    </table>
<![endif]-->

उपरोक्त कोड को अब आपके टेम्पलेट को 700px चौड़े पर आउटलुक में रखना चाहिए।

अब कॉलम के लिए। नीचे दिए गए कोड दोनों 350x चौड़ा पर टेम्पलेट पर दो समान कॉलम बनाएंगे।

<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>
                                  
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->

<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>

 <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

इसके बाद यह सीमा केवल आपकी कल्पना या डिजाइनर है। जब डिजाइन किए जाते हैं तो तार फ्रेमिंग चरण में शामिल होना महत्वपूर्ण होता है, ताकि डिजाइन कोडिंग चरण में होने के बाद कोई सुपरराइज न हो।

ध्यान दें:

रेटिना की छवियों को अपनी शैली पर तत्व स्तर पर सेट छवियों की आवश्यकता होगी <img src = "" width = "" ...
आप अभी भी इन-लाइन सीएसएस करना चुन सकते हैं या आप सिर में सीएसएस का चयन तभी कर सकते हैं जब आपके सभी क्लाइंट सिर में सीएसएस का समर्थन करते हैं।

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow