HTML & CSS: مفاهيم تشفير البريد الإلكتروني

قد يبدو الانغماس في عالم البرمجة أمرًا شاقًا إذا لم تفعل ذلك من قبل. ترميز البريد الإلكتروني ، على وجه الخصوص ، لديه مجموعة القواعد الخاصة به. إذا كنت جديدًا في مجال البرمجة ، فإليك بعض الأشياء التي يجب مراعاتها قبل الغوص مباشرة في HTML و CSS للبريد الإلكتروني.

هل أحتاج إلى كود بريدي الإلكتروني؟

إذا لم تكن لديك خبرة في البرمجة ، فقد لا يكون ترميز بريد إلكتروني من البداية حلاً عمليًا لك ، وهو بالتأكيد غير مطلوب. يوفر VerticalResponse مجموعة واسعة من القوالب المتوافقة مع الأجهزة المحمولة ويوفر محررًا سهل الاستخدام حتى تتمكن من تخصيص قوالبنا الجاهزة للاستخدام مع المحتوى الخاص بك.

إذا كانت لديك خبرة ومستوى معين من الراحة باستخدام أو تعلم HTML ، فإن ترميز قالب بريد إلكتروني مخصص قد يكون خيارًا رائعًا. كما هو الحال مع الترميز لصفحة الويب ، ما زلت بحاجة إلى التفكير في سلوكيات المتصفح والجهاز. بالإضافة إلى ذلك ، ضع في اعتبارك الإعدادات الافتراضية الفريدة للأنماط لعشرات من عملاء البريد الإلكتروني مثل Gmail و Yahoo و Outlook والمزيد. إذا كنت معتادًا على ترميز صفحة ويب بتنسيق HTML وتطبيق ورقة أنماط CSS خارجية ، فستحتاج إلى التعود على العمل مع CSS داخليًا ومضمّنًا حتى لا يتم الكتابة فوق أنماطك من خلال الإعدادات الافتراضية لعميل البريد الإلكتروني.

المفردات التي يجب معرفتها

إذا كنت جديدًا في مجال الترميز تمامًا ، فإليك ما تحتاج إلى معرفته حول HTML و CSS:

HTML هي لغة ستستخدمها في هيكلة المحتوى الخاص بك ووصفه. HTML تعني لغة ترميز النص التشعبي. عند كتابة التعليمات البرمجية بتنسيق HTML ، فأنت تقوم بترميز المحتوى الخاص بك بعلامات تخبر متصفح الويب بكيفية عرض معلومات مثل الصور والكلمات على صفحة الويب.

CSS هي لغة تؤثر على عرض المحتوى الخاص بك. باستخدام CSS ، يمكنك تعيين أنماط لعناصر HTML. يرمز CSS إلى ورقة الأنماط المتتالية. كلمة تتالي مهمة لأن تصريحات النمط ، أو القواعد ، سيتم تكريمها بترتيب الظهور. إذا قمت بعمل إعلانين لنفس العنصر ، فسيتم تكريم الأخير لأنه يحل محل ما يأتي قبله.

فيما يلي طرق ربط CSS الخاص بك بـ HTML الخاص بك:

CSS الخارجية: استخدام ورقة أنماط خارجية (ملف يسمى style.css) تتم الإشارة إليه في ملف HTML الخاص بك. يعد هذا أمرًا رائعًا لمواقع الويب لأنه إذا كان لديك 100 عنصر مشترك تمتد على أكثر من 100 صفحة ، فيمكنك تغييرها جميعًا مرة واحدة بإعلان CSS واحد.

CSS الداخلية ، والمعروفة أيضًا باسم Embedded CSS: بما في ذلك كود CSS الخاص بك ضمن علامات <style> في الجزء العلوي من ملف HTML الخاص بك. عند ترميز بريد إلكتروني ، يمكن أن يكون هذا رائعًا لتعيين الأنماط العامة التي تنطبق على العناصر المشتركة. ومع ذلك ، لا يتم دعم هذه الطريقة دائمًا عن طريق البريد الإلكتروني.

Inline CSS: إرفاق كود CSS بعنصر HTML واحد داخل كود HTML. في ترميز البريد الإلكتروني ، تضمن هذه الطريقة عدم الكتابة فوق أنماط معينة من خلال الإعدادات الافتراضية للمستعرض وعميل البريد الإلكتروني.

إذا كنت معتادًا على إعداد CSS خارجيًا أو داخليًا ، فيمكنك بنائه بهذه الطريقة ثم استخدام أداة داخلية مثل هذه من PutsMail لتحويل أنماطك إلى CSS مضمنة.

العلاقة بين HTML و CSS

للحصول على فكرة أفضل عن كيفية ارتباط HTML و CSS وكيف يمكن لفصل CSS عن HTML تحرير عرض HTML الخاص بك ، انتقل إلى موقع الويب الرائع والمحتفى به CSS Zen Garden ، حيث يمكنك عرض ترميز HTML نفسه باستخدام CSS مختلف تمامًا ، مشفرة من قبل المصممين المشهورين.

الاقتراب من ترميز البريد الإلكتروني

عند ترميز بريد إلكتروني من البداية ، اجعله بسيطًا قدر الإمكان. استخدم محرر نص عادي ، مثل TextWrangler أو Notepad أو Sublime ، وابتعد عن برامج التحرير المرئية مثل Dreamweaver لأنها يمكن أن تضيف عناصر غير ضرورية إلى التعليمات البرمجية الخاصة بك.

بالنسبة للتخطيط ، حاول اتباع نهج المحمول أولاً. هذا يعني التصميم للشاشات الصغيرة والعمل في طريقك للأعلى. مع تزايد مشاهدة الهاتف المحمول باستمرار ، أصبح التأكد من ظهور بريدك الإلكتروني بشكل جيد على الهواتف والأجهزة اللوحية أكثر أهمية من أي وقت مضى ؛ لا يوجد سبب لإنشاء تصميم معقد يبدو جيدًا فقط على سطح المكتب. سيكون الحفاظ على رسالتك وتصميمك بسيطًا بما يكفي لأصغر الأجهزة أسهل في البرمجة ، وسيكون في متناول مستخدمي جميع الأجهزة وسيبقي انتباه القارئ مركّزًا على العبارة الرئيسية التي تحث المستخدم على اتخاذ إجراء.

بمجرد اكتمال التخطيط والترميز ، تأكد من استخدام أداة مثل Litmus أو VerticalResponse's Inbox Preview لمحرر HTML لمعاينة كيفية ظهور بريدك الإلكتروني عبر العديد من المتصفحات وعملاء البريد الإلكتروني حتى تتمكن من استكشاف أي مشكلات وإصلاحها قبل الضغط على إرسال.

من أين تبدأ التعلم

هناك العديد من البرامج التعليمية عبر الإنترنت حيث يمكنك التعلم بشكل عملي ، بالتفصيل كيفية كتابة رمز بريد إلكتروني. تتمثل إحدى الطرق الجيدة للتعمق في ترميز البريد الإلكتروني في العثور على قالب بسيط تريده وقضاء بعض الوقت في فحص الكود. تعرف على العلامات الرئيسية مثل <body> و <head> و <div> أولاً ثم لاحظ كيف يتم تعريف العلامات أحيانًا بشكل أكبر في معرفات أو فئات ، مثل <div class = "half-column">. لاحظ أن التسمية في قالب HTML عالي الجودة ستكون واضحة ومنطقية بحيث يسهل معرفة ما يحدث عند ظهوره في CSS.

إذا كنت مستعدًا للحصول على درس خطوة بخطوة ، فابحث عن البرامج التعليمية الأخيرة (خلال العام الماضي). يتم إعادة النظر باستمرار في نهج الترميز. من الطرق الملائمة للجوّال التي اكتسبت شعبية في العامين الماضيين ، على سبيل المثال ، أسلوب السوائل / الهجين. يعد هذا البرنامج التعليمي السائل / الهجين من Envato Tuts + رائعًا لأولئك الذين لديهم بالفعل بعض الفهم لـ HTML. للمبتدئين ، يقدم موقع Lynda.com العديد من دورات الترميز الخاصة بالبريد الإلكتروني. ستوجهك الدورة التدريبية الجيدة خلال تمرين الترميز وتوفر نموذجًا لملف مشروع قابل للتنزيل يمكنك استخدامه كمرجع.

اقض وقتًا أقل في الوصول إلى المزيد من العملاء

جرب الرد العمودي اليوم

(انه مجانا!)

ملاحظة المحرر: تم نشر منشور المدونة هذا في الأصل في مارس 2016 وتم تجديده وتحديثه للتأكد من دقته وأهميته.