20 حيل HTML و CSS أساسية للمسوقين
نشرت: 2015-04-24
مرة أخرى في اليوم (برنامج أتمتة ما قبل التسويق) ، لم يتطلب التسويق الكثير من المهارات الفنية. أصبح من الضروري اليوم للمسوق المتمرس أن يكون قادرًا على إنشاء وتعديل قوالب البريد الإلكتروني أو الصفحات المقصودة أو مواقع الويب دون الحاجة إلى الاستعانة بمطور. المهارات التقنية الأكثر استخدامًا لهذه المهام هما HTML و CSS . أسهل تفسير للاثنين هو أن HTML هي الكود الذي تستخدمه لتحديد وظائف موقعك أو نموذجك وأن CSS هي ما تستخدمه لتزيينه وجعله يبدو جيدًا. من موقع ironspider.ca : "يمكنك التفكير في CSS على أنها الإرشادات التي تخبر متصفح الويب بكيفية عرض صفحة الويب الخاصة بك بينما يهدف HTML إلى توفير إرشادات حول ما سيتم عرضه على صفحة الويب الخاصة بك."
الغرض من هذا المنشور ليس تزويدك بدورة تدريبية مكثفة في أساسيات HTML و CSS. أوصي بمراجعة w3schools لذلك ، من الرائع تعلم الأساسيات وكذلك لمراجع بناء الجملة السريعة. يهدف هذا المنشور إلى الجمع بين أفضل 20 نصيحة وحيلة قد تحتاجها على أساس يومي عند إنشاء أصول التسويق.
1. كيفية عرض النهاية الخلفية لأي موقع (Chrome)
أول شيء - أهم شيء تحتاج إلى معرفته هو كيفية إلقاء نظرة على الكود المصدري لموقع ما وكيفية فحص عنصر معين في الصفحة. سيساعدك هذا في تحديد المشكلات وحلها وفهم كيفية ترميز الموقع.
2. بناء وفهم كيفية عمل جداول Html
الجداول هي اللبنات الأساسية لقوالب البريد الإلكتروني وهي بشكل عام جزء مهم من HTML يحتاج جميع المسوقين إلى معرفته.
فيما يلي مثال بسيط لجدول مكون من 3 صفوف وعمودين:
أدناه هو رمز الجدول أعلاه. اقرأ التعليقات باللون البني لفهم كيفية عمل الجدول. <! - التعليقات بهذا التنسيق ->
3. إضافة فواصل الأسطر <BR>
ساعدتني هذه القاعدة البسيطة في التعامل مع أكثر مشكلات النص تعقيدًا. عندما لا يتم تباعد النص بشكل صحيح - ستؤدي إضافة فاصل سطر أو <br> إلى نقل النص إلى السطر التالي.
4. إضافة في خط أفقي <HR>
تعد إضافة خط أفقي طريقة رائعة لفصل مربعات النص المختلفة. يتم استخدامه بشكل شائع في الرسائل الإخبارية عبر البريد الإلكتروني أو في الصفحات المقصودة حيث تريد فصل الصفوف.
5. نمط خط أفقي مع CSS
سيبدو الخط الأفقي الافتراضي عادةً غريبًا عن تصميمك إذا لم تكن تستخدم الخطوط الافتراضية. أثناء إنشاء صفحة مقصودة مؤخرًا ، وجدت هذا الموقع مفيدًا الذي يحتوي على بضعة أنماط مختلفة من الخطوط الأفقية مع تحديد فئة CSS لك - يمكنك ببساطة نسخ ولصق الرمز الذي تريد استخدامه في رأس القالب والرجوع إليه داخل القالب.
في المثال أدناه - يحدد العمود الأيمن العلوي نمط hr داخل علامتي <head> و </head>. اليسار هو html ، الذي يشير إلى نمط hr ، وأسفل اليمين هو النتيجة.
6. تحديد الألوان والخط
من السهل معرفة كيفية تحديد الكود السداسي العشري للألوان التي تجدها على الويب. يمكنك استخدام امتداد الكروم ColorZilla لفعل هذا.
يمكنك بعد ذلك استخدام لون الخط في html أو css: <font color = "# 82B900"> أو في إنشاء الصور (Word ، powerpoint ، Photoshop كلها أمثلة على البرامج الشائعة التي تتيح لك تلوين العناصر برمز سداسي عشري محدد)
من المفيد أيضًا أن تكون قادرًا على تحديد الخط في مواقع مختلفة - WhatFont عظيم لهذا. يمكن الإشارة إلى الخطوط الافتراضية مثل Verdana على النحو التالي: <font face = "verdana" color = "green"> هذا نص! </ font>. يمكنك أيضًا تضمين خطوط مخصصة باستخدام خطوط Google المجانية - انظر رقم 15 حول كيفية القيام بذلك.
تحقق من امتدادات الكروم الأكثر فائدة للمسوقين في رسالتي السابقة هنا)
7. Div Block For Gmail
يضيف Gmail أحيانًا مساحة إضافية لخلايا الجدول التي تحتوي على صورة فقط. لإصلاح هذه المشكلة ، يمكنك إضافة علامة الصورة كما يلي: <img src = "image.jpg" />. فيما يلي الشكل الذي كانت عليه من قبل (مثال من Campaign Monitor )
بعد:
8. إنشاء وتحرير عنوان URL للصورة
يوضح المثال أدناه كيفية إضافة صورة - قم بتضمين علامة alt وتحديد الارتفاع والعرض. تحدد علامة الصورة أدناه <img> المصدر - عنوان URL حيث يتم تخزين صورتك ، وعلامة alt - وهو ما يتم عرضه بدلاً من الصورة في حالة حدوث مشكلات فنية.
9. كيفية إضافة الهوامش
يوضح المثال أدناه كيفية تحديد الهوامش والنتيجة. في الصورة أدناه - الجملة الثانية على اليمين بها هامش 2 سم (أعلى) 4 سم (يمين) 3 سم (أسفل) و 4 سم (يسار) معرّفين على النحو التالي: الهامش: 2 سم 4 سم 3 سم 4 سم.
10. كيفية الرجوع إلى فئة CSS ضمن عناصر HTML
في المثال أدناه حددنا أولاً فئة ".center" داخل الرأس. يمكنك بعد ذلك تعيين عنصري h1 و p HTML ليكونا class = center. هذا يعني أنه يتم الآن سحب علامات HTML بتنسيق CSS من الفئة التي حددتها أعلاه.
لتعيين عنصر HTML معين لاستخدام فئة ، يمكنك أن ترى أدناه أنني قمت بتعريف p.center ليكون الفصل. علامة h1 - لن تتأثر حتى إذا قمت بالإشارة إلى مركز الفصل داخل علامة h1. فقط عندما تتصل بمركز الفصل داخل علامة ap ، فسوف يتبع القواعد المحددة لفئة المركز.
11. كيفية إضافة أنماط CSS
هناك ثلاث طرق لإدراج أنماط CSS. يمكن إنشاء ورقة أنماط في أي محرر نصوص وحفظها كملف .css. عندما يقرأ المستعرض ورقة أنماط ، فإنه يقوم بتنسيق عناصر الصفحة كما هو محدد في ورقة الأنماط هذه. الخيار الآخر هو تصميم عناصر HTML فردية مضمنة.
أ. ورقة الأنماط الداخلية
تكون ورقة الأنماط الداخلية مفيدة عندما يكون للقالب نمط فريد. يمكنك تحديد الأنماط الداخلية بين قسمي <head> و </ head> في HTML ضمن علامات <style>.
ورقة الأنماط الخارجية
تعتبر ورقة الأنماط الخارجية مثالية إذا كنت تريد تطبيق وتغيير النمط للعديد من الصفحات المختلفة مرة واحدة. يمكنك تضمين ورقة أنماط خارجية في صفحات متعددة مثل هذا:
<head> <link rel="stylesheet" type="text/css" href="myfilename.css"> </head>
C. الأنماط المضمنة
باستخدام الأنماط المضمنة ، يمكنك إضافة أنماط محددة لكل عنصر باستخدام HTML الخاص بك. يمكن أن تحتوي سمة النمط على أي خاصية CSS. في المثال أدناه ، قمت بتغيير اللون والهامش الأيسر لعنصر h1 في السطر.
12. كيف تستضيف ورقة الأنماط الخاصة بك في Google Drive
قم أولاً بتحميل ملف css على محرك جوجل. ثم قم بمشاركة الملف وتعيين الإذن على "يمكن لأي شخص على الإنترنت البحث والعرض" أو في الإصدار القديم من محرك الأقراص "عام على الويب".
احصل على الرابط - ستحتاج إلى تعديله قليلاً. يجب أن يبدو رابط المشاركة كما يلي:
https://docs.google.com/file/d/file_code/edit؟usp=sharing
الآن قم بتغيير الرابط إلى:
https://googledrive.com/host/file_code
في المثال أعلاه:
https://drive.google.com/file/d/0B_Fv5uvm1EqoZ04wbzkxZ0NITEk/edit؟usp=sharing
يصبح:
https://googledrive.com/host/0B_Fv5uvm1EqoZ04wbzkxZ0NITEk
لتضمين ملف CSS الخارجي في القالب الخاص بك:
13. استخدام وحدات قابلة للتطوير
استخدام وحدة "em" بدلاً من px لجعل عناصر مثل الخط أو ارتفاع الخط أو الهوامش قابلة للتطوير عبر العديد من الأجهزة. المثال أدناه من مدارس W3 يوضح لك كيفية تعيين الخط لعلامة H1 ليكون 2em - وهذا يعني أن حجم الخط المعروض سيكون ضعف حجم الخط الافتراضي للمتصفح.
لا تقتصر فائدة وحدة em على أحجام الخطوط. يمكن تحديد أي أطوال - بما في ذلك المساحة المتروكة والهوامش حول العناصر في نظام الإدارة البيئية. هذا يجعل القوالب الخاصة بك قابلة للتطوير لأي حجم جهاز ، وهو أمر بالغ الأهمية مع النمو السريع لتصفح الأجهزة المحمولة.
14. الحشو
الصورة أدناه من goer.org هو شرح رائع لكيفية عمل الحشو والهوامش:
يوضح لك التعريف من مدارس W3 كيفية تحديد المساحة المتروكة:
15. استخدام خطوط Google في أنماط CSS الخاصة بك
خطوط Google هي خطوط مجانية مفتوحة المصدر يمكنك الرجوع إليها في CSS الخاص بك. بعد تحديد الخطوط التي تريدها من https://www.google.com/fonts يمكنك الرجوع إلى ورقة الأنماط داخل علامات <head> في التعليمات البرمجية الخاصة بك. انظر اللقطة في الاسفل.
يمكنك بعد ذلك الرجوع إلى هذه الخطوط عند تصميم كل عنصر من عناصر القالب الخاص بك. في المثال أدناه - قمت بسحب الخط "Lato" عن طريق إضافة الكود الذي قدمته لي Google Fonts ثم استخدمته لتعريف أنماط الجسم و h1 و h2:
16. التعديلات الأساسية لجعل القالب الخاص بك مستجيبًا
لإنشاء صورة رأس بريد إلكتروني بتنسيق HTML سريعة الاستجابة تكون مرنة في جميع طرق العرض على أي جهاز ، يجب عليك استخدام جداول HTML مع CSS مضمّن بعرض 100٪ وارتفاع تلقائي. يمكنك اتخاذ خطوة أخرى إلى الأمام وإضافة استعلامات وسائط الهاتف المحمول في ورقة الأنماط الخاصة بك ، والتي تخبر جميع عملاء البريد الإلكتروني والمتصفحات عبر الهاتف المحمول بعرض المحتوى بعرض بكسل الذي قمت بتعيينه. يمكن تطبيق هذه الطريقة الأساسية على جميع الصور الموجودة في قالب HTML الخاص بك ، وتحويلها إلى سريعة الاستجابة. (نصيحة القبعة: مصمم SEP نايجل)
17. بناء وتصميم نموذج مخصص
يتم إنشاء نموذج HTML باستخدام علامات <form>. يمكنك بعد ذلك استخدام علامة <input> لإنشاء حقول متنوعة مثل حقول النص ومربعات الاختيار وأزرار الاختيار وأزرار الإرسال وما إلى ذلك. يحدد هذا حقل إدخال من سطر واحد يمكن للمستخدم إدخال نص فيه. يمكنك العثور على قائمة كاملة من الحقول التي يمكنك إنشاؤها هنا .
بمجرد إنشائه ، سترغب في تصميم النموذج الخاص بك. لقد وجدت هذا الموقع مؤخرا الذي يزودك برمز لبعض الأشكال المختلفة ذات الأنماط. في المثال أدناه ، يمكنك رؤية جزء من الكود (هذا مجرد مقتطف منه) والشكل الذي ينتج تحته.
في المثال أعلاه ، بمجرد تحديد الفئة في الرأس ، يمكنك الرجوع إلى هذا النمط عن طريق إضافة الفئة إلى علامة HTML <form> مثل هذا:
18. كيفية التحقق من صحة نموذج وعرض رسائل الخطأ المضمنة
سيتناول هذا المثال كيفية الحصول على نموذج إرجاع "هذا الحقل مطلوب" وتمييز الحقول باللون الأحمر إذا ترك المستخدم أيًا منها فارغًا.
سأعترف أنه كان عليّ أن أقوم بتجميع هذا المصدر لأنني لست على دراية كبيرة بـ Javascript (بفضل مطورنا Scott) لكنني أعتقد أنه من المفيد جدًا أن تكون قادرًا على تنفيذ ذلك.
تحتاج إلى إضافة مستمع الحدث إلى زر الإرسال حتى يتمكن البرنامج النصي من التنفيذ قبل إرسال النموذج. بعد ذلك ، تمر عبر حلقة وتحقق من الحقول المطلوبة للتأكد من ملء كل شيء (يمكنك القيام بذلك بسهولة عن طريق إضافة فئة معينة إلى كل حقل تريد التحقق من صحته).
إذا كانت هناك أي أخطاء (الحقول غير مملوءة) ، فسنضطر إلى تعيين علامة تفيد بوجود أخطاء. إذا تم تعيين هذه العلامة ، يتعين علينا منع إرسال النموذج وإضافة تمييز خطأ للمستخدم النهائي. إذا لم تكن هناك أخطاء يمكننا متابعة النموذج كالمعتاد!
// The ID of the submit button on the form (in our example) was 'get-quote' so we bind our listener to that
jQuery("#get-quote").click(function() {
// Declare and reset our error value each time the script runs
var error = false;
//'input-validate' is the class I would set on each of the fields I wanted to check
jQuery(".input-validate").each(function() {
// Get the value of the current item in the loop
var isSet = jQuery(this).val();
// Check to see if the variable is an empty string or a null value
if (isSet == "" || isSet == null) {
// Indicates we found an error
error = true;
}
// This adds our user-facing error highlighting
// We run this within our .each() loop so we can use jQuery's 'this' selector to modify the current item in the loop
If (error == true) {
// This adds a red border around the element with an error
jQuery(this).css("borderColor", "#ff0000");
// This changes the placeholder text of the form element
jQuery(this).attr("placeholder", "This field is required");
}
// If no errors are found we need to remove our past error highlighting
else {
// This returns our borders to their original colour
// There's no need to overwrite 'placeholder' this time because the user will have done that themselves
jQuery(this).css("borderColor", "#3c3c3c");
}
});
// If we have any errors we need to stop the form from being submitted
If (error == true) {
event.preventDefault();
}
// If there are no errors we proceed with submission
else {
jQuery("#get-quote").submit();
}
});
يمكن تعديل عناصر الكود أعلاه لتلائم حالة الاستخدام المحددة الخاصة بك.
19. محاذاة الصورة
لمحاذاة صورة ، كل ما عليك فعله هو إضافة "أسفل" أو "وسط" أو "أعلى" أو "يمين" أو "يسار إلى علامة <img> في المثال أدناه ، يمكنك رؤية ما يحدث عندما نستخدم هذه العلامات. ملاحظة أن هذه ليست مدعومة في HTML 5 (مدارس W3 )
20. كولسبان وروسبان
يتيح لك Colspan إنشاء بيانات الجدول التي تمتد على أعمدة متعددة. في المثال أدناه ، يمكنك معرفة ما يحدث عند تعيين البيانات في الصف الرابع ("إجمالي المدخرات: 200 دولار أمريكي") لتمتد عبر عمودين.
يسمح لك Rowspan بإنشاء بيانات جدول تمتد إلى صفوف متعددة. في المثال أدناه ، قمت بإنشاء عمود إضافي يسمى "إجمالي المدخرات" وقمت بتعيين القيمة "200 دولار" لتشمل صفين.
خاتمة
هذه ليست بأي حال من الأحوال قائمة كاملة بالأشياء التي تحتاج إلى معرفتها. هناك العديد من الموارد التي يمكنك استخدامها لمعرفة المزيد ولكن أهم شيء هو التدرب. لقد تعلمت الكثير بمجرد القفز وإجراء التعديلات ومعاينة النتائج (تأكد من إنشاء نسخة يمكنك كسرها دون أي تداعيات). شبيبة كمان هي أداة مجانية عبر الإنترنت تتيح لك إضافة HTML و CSS و Javascript وعرض النتيجة المجمعة. لقد استخدمته لتوضيح العديد من الأمثلة في هذا المنشور وأنا أوصي بشدة باستخدامه للتلاعب بالكود.
بناء وانكسار سعيد!
* عمل الصورة عبر Kaptain Kobold ، nidhug 