كل ما تحتاج إلى معرفته عن إنشاء قوالب HTML

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

جدول المحتويات:

• ما هي قوالب HTML؟
• ما الفرق بين قوالب HTML وقوالب CSS؟
• كيفية إنشاء قوالب HTML؟
  • اختيار الأداة المناسبة لإنشاء قوالب HTML
  • إنشاء ملف قالب HTML
  • إنشاء هيكل قالب HTML
  • تنسيق القالب باستخدام CSS
  • إطلاق قالب HTML
• ما تحتاجه لإطلاق صفحة على الويب باستخدام قوالب HTML

ما هي قوالب HTML؟

دعنا نتكلم أولًا عن HTML، وهي اختصار لغة توصيف النص الفائق (HyperText Markup Language)، وتعدّ هذه اللغة أساسًا لصفحات الويب، إذ تحدّد هيكلة محتوى الصفحة وتوزعه حسب الوسوم Tags المختلفة، التي سنوضحها لاحقًا. تشكّل HTML مع لغة التنسيق CSS ولغة البرمجة JavaScript، اللبنة الأساسية لبناء صفحات الويب من طرف المستخدم Front-End.

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

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

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

ما الفرق بين قوالب HTML وقوالب CSS؟

يركز قالب HTML على هيكلة المحتوى وترتيبه ضمن صفحة الويب، بينما يركز قالب CSS (اختصارًا لصفحات الأنماط الانسيابية Cascading Style Sheets) على شكل ومظهر المحتوى، مثل اللون والحركات Animations، بالإضافة إلى نوع الخط المستخدم والتفاصيل الأخرى.

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

كيفية إنشاء قوالب HTML؟

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

أولًا: اختيار الأداة المناسبة لإنشاء قوالب HTML

علينا أن نختار الأداة المناسبة من أجل كتابة السطور البرمجية، فاختيار الأداة التي تحوي على الخصائص التي تحتاجها سيوفر عليك الكثير من الوقت والجهد، وسيساعدك على اكتشاف الأخطاء بشكلٍ أسرع. نلجأ هنا إلى ما يدعى ببيئة التطوير المتكاملة (Integrated Development Environment) واختصارًا IDE، إلا أنه يمكنك استخدام تطبيق المفكرة Notepad الذي يأتي مثبّتًا على نظام ويندوز بشكلٍ تقليدي، ولكن ذلك سيتحول إلى كابوس مع كتابة المزيد والمزيد من الأسطر البرمجية.

نرشح لك المحرر المجاني ومفتوح المصدر Visual Code، إذ إنه صغير الحجم لا يستنزف الكثير من موارد الجهاز ليعمل، وهو البرنامج الذي سنتبعه ضمن هذا الدليل، وتتوفر نسخة تطبيق ويب لاستخدامه دون تثبيت من هنا إن أردت. يمكنك استخدام أي محرّر آخر تفضله مثل Sublime Text أو NotePad++.

ثانيًا: إنشاء ملف قالب HTML

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

وجود فكرة واضحة عن شكل وتصميم الهيكل، من شأنه أن يجنبك العديد من المشاكل مستقبلًا بخصوص التنسيق وتصميم القالب الكُلّي، وسيجعل من توجهك عند برمجة القالب واضحًا. لذا ننصحك بتصميم قالب HTML قبل البدء ببرمجته مباشرةً، بالاستعانة بأدوات إنشاء النماذج الأولية للواجهات مثل Adobe XD أو Figma.

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

علينا أن نضيف الوسوم tags الضرورية أولًا قبل أن نبدأ بالعمل، لحسن الحظ يوفر لنا VS Code اختصارًا لهذه الوسوم عن طريق كتابة إشارة التعجب “!” والضغط على زرّ Tab، وذلك بشرط أن يكون اسم الملف منتهيًا باللاحقة html ليتعرف محرر النصوص على الملف بكونه ملفّ شيفرة HTML.

نحصل على الشيفرة البرمجية التالية بعد تنفيذ ما سبق، وتدعى كلّ سلسة نصية داخل القوسين <> باسم الوسم Tag، إذ يحدد الوسم طبيعة العنصر المُضاف. ستلاحظ في بعض الأحيان تكرار الوسم مرتين مثل <head> و<head/>، إذ تتطلب بعض الوسوم وسمًا للإغلاق، ويكون نفس الاسم بإضافة رمز “/”، وبعضها لا يتطلب ذلك ويدعى باسم الوسم المُنغلق على ذاته (Self-closing tag).

إليك شرحًا موجزًا عن الوسوم:

1. وسم <!DOCTYPE>

يُستخدم هذا الوسم ليدلّ على نوع الملف، مما يحدد الطريقة التي سيتعامل بها المستعرض مع الملف. وفي حالتنا هذه يدل الوسم: <!DOCTYPE html> على أن الملف هو ملف HTML5 (الإصدار الخامس الحالي من HTML).

2. وسم <html>

يضمّ هذا الوسم جميع الوسوم الأخرى الموجودة في ملف HTML -عدا الوسم السابق-، وهو من الوسوم التي تحتاج إلى وسم إغلاق مترافقًا معها <html/>.

3. وسم <head>

يضمّ هذا الوسم بداخله جميع البيانات الوصفية عن ملف HTML، ويحتوي وسومًا توضح طبيعة محتوى وترميز الصفحة، مثل وسم <meta> و<style> و<title> و<script>، تحدد هذه الوسوم تصرّف العناصر ضمن الصفحة، ولا تظهر بشكلٍ مباشر للزائر.

4. وسم <meta>

يُعرف باسم وسم البيانات الوصفية metadata، وتُضمّن البيانات الوصفية المختلفة ضمنه، باستخدم السمات Attributes، مثل سمة charset التي تحدّد ترميز المحارف المُستخدمة ضمن الصفحة، وسمة content التي تحوي على قيم تساعد في سهولة عرض الصفحة ووضوحها على مختلف قياسات الأجهزة.

5. وسم <title>

يضمّ هذا الوسم اسم صفحة الويب الخاصة بملف HTML، وهي التسمية التي تظهر على لسان تبويبة المستعرض، ومن الضروري وجود هذا الوسم في أي ملف HTML.

6. وسم <body>

يحتوي هذا الوسم على جميع محتويات صفحة الويب التي ستكون مرئية للزائر، وسيكون صلب تركيزنا هنا، إذ سنبدأ بإضافة الوسوم واحدًا تلو الآخر ضمن هذا الوسم، حتى نصل إلى النتيجة المرجوّة.

ثالثًا: إنشاء هيكل قالب HTML

دعنا نبدأ أولًا بتغيير محتوى وسم العنوان إلى عنوان صفحتنا، وفي حالتنا هذه سنغيّر محتوى الوسم <title> من Document إلى “التسجيل على دورة تصميم الويب”. نلاحظ أيضًا أنّ تصميم صفحتنا ينقسم إلى قسمين، ألا وهما قسم العنوان والدعوة للتسجيل باستخدام البريد الإلكتروني، والقسم الآخر الذي يستعرض مزايا الدورة التدريبية، من المناسب إذًا فصل محتوى القسمين داخل وسم <body>، باستخدام الوسمين <header> و<main> بالشكل التالي:

نضيف عنوان صفحتنا الرئيسي باستخدام وسم <h2>، إذ يُستخدم هذا الوسم (بإضافة الوسوم <h1> إلى <h6>) في إضافة العناوين الرئيسة، باستخدام رقم أقلّ كلّما كان مستوى العنوان أعلى -أي أكثر أهميّة-، ونكتب بين الوسمين <h2> و<h2\> العنوان “تصميم الويب للمبتدئين” في هذه الحالة.

نضيف العنوان: “احجز مقعدك الآن!” بوسم <h1> والعنوان: “كُن أول من يسجّل واحصل على تخفيض بنسبة 30 بالمئة من قيمة الدورة” بوسم <h3> بطريقة مماثلة أيضًا، لاحظ أنّنا استخدمنا الوسم <em> حول “تخفيض بنسبة” للتشديد عليها بتنسيق مائل.

إليك نتيجة ما سبق:

نستخدم الوسم <img> لإضافة الشعار، لاحظ أن السمة src تأخذ موقع الشعار إن كان موجود محليًا على حاسوبك، أو بإدخال رابط ويب.

لاحظ إضافة وسم <div> أكثر من مرة، قد تتسائل عن الهدف من هذه الوسوم المتشابهة، فما الفرق بينها؟ نستخدم الوسم <div> كوسيلة لتحديد أجزاء من صفحة HTML ونُسند إليها أسماء صفوف مختلفة، ليمكننا التحكم بطريقة تنسيقها وعرضها لاحقًا باستخدام CSS، وسنوضح ذلك عندما ننتقل لمرحلة التنسيق.

وأخيرًا للانتهاء من هذا القسم، نضيف استمارة التسجيل باستخدام البريد الإلكتروني، وذلك عن طريق إضافة وسم <form>، الذي يحتوي على وسم <button> لزرّ التسجيل، ووسم <input> لصندوق إدخال البريد الإلكتروني. سنضيف أيضًا وسوم <div> بهدف التنسيق، ووسمين لتحقيق تنسيق الأمواج في القالب، إذ سنلجأ إلى حيلة بسيطة نوظف فيها اللون المختار -عن طريق إضافة صف CSS كما سنرى لاحقًا- وصورة موجة موافقة للون صف الوسم.

انتقالًا إلى القسم الآخر من قالب HTML داخل الوسم <main>، نُضيف الوسم <section> ليحتوي الفقرات النصية الثلاث، ومن ثم وسم <div> يحتوي كل من عناوين الفقرات الثلاث ومحتوى الفقرات أيضًا، مع ملاحظة استخدام صف مختلف لكل وسم من وسوم <div>.

رابعًا: تنسيق القالب باستخدام CSS

ما زال قالب HTML بحاجة بعض التنسيق، إذ يبدو الآن بشكل غير مناسب أو محبذ، دون أي تنسيق أو ألوان!

تتكفل CSS بتنسيق صفحات الويب ويمكنك تضمين شيفرات CSS بثلاث طرق:

1. داخل الوسم Inline: وذلك يتم باستخدام سمة style بداخل الوسم المُراد تنسيقه. على الرغم من بساطة هذه الطريقة، إلا أنها تصبح صعبة الإدارة عند احتواء صفحة تحتوي العديد من الوسوم، ولا يمكن الاعتماد عليها في المشاريع الكبيرة.
2. داخلي Internal: وذلك بتضمين شيفرة CSS بملف شيفرة HTML داخل الوسم <style> في قسم <head>، تعدّ الطريقة هذه أفضل من سابقتها بخصوص تنظيم الشيفرة البرمجية، إلا أنها ليست الأفضل.
3. خارجي External: وذلك بإنشاء ملف منفصل يتضمن على شيفرة CSS (باسم styles.css عادةً)، على أن يتم ربط الملف باستخدام وسم <link> في قسم <head> ضمن ملف شيفرة HTML، وسنتّبع هذه الطريقة.

لنبدأ بإنشاء ملف جديد باسم styles.css بداخل مجلد المشروع الحالي، ومن ثم إضافة وسم <link> بسمة href التي تدلّ على موقع الملف، وسمة rel التي تدلّ على وظيفته (stylesheet). كما سنستخدم قالب normalize.css، الذي سيساعدنا في عرض العناصر على صفحة الويب بشكل أفضل. لاحظ أننا نكتب وسوم <link> بداخل وسم <head> وليس في <body>.

نبدأ أولًا بتخصيص تنسيق محتويات الوسم <body> عمومًا عن طريق كتابة اسم الوسم وإلحاقه بالقوسين {}، وكتابة تفاصيل التنسيق بداخل القوسين. نكتب فيما بعد تنسيق بعض الصفوف التي ستستخدمها معظم العناصر، وهي grid وgrid-benefit-detail وcontent، لاحظ أننا نسبق اسم الصف بالنقطة “.” بدلًا عن كتابة اسمه كما في حالتنا السابقة، وذلك لنحدّد أن المذكور صف وليس وسم.

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

ننتقل الآن إلى كتابة تنسيق الصفوف الخاصة بعناوين قالبنا الأساسية والفرعية، ذات الصف title وsub-title والشعار ذو الصف brand-row وlogo، وتنسيق تأثير الموجة ذات اللونين باستخدام الصفوف dark-header وlight-header وdark-header-divider وlight-header-divider، ولاحظ أن الصفين الأخيرين يستخدمان صورة الموجة كخاصية background-image لخلق تأثير الموجة.

نستخدم صفوف email-form المختلفة لضبط طريقة عرض استمارة التسجيل وتنسيقها، إذ يُقصد بـ “email-form button” الوسم button بداخل الوسم ذو الصف email-form، ويُقصد بـ”email-form input:focus” تنسيق العنصر ذو الصف email-form عندما يتم النقر على المربع النصي، وتُدعى هذه الطريقة بالصفوف الزائفة.

أخيرًا، نكتب تنسيق صفوف تفاصيل الدورة التدريبية بإضافة السطور التالية:

خامسًا: إطلاق قالب HTML

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

تسبق مرحلة إطلاق قالب HTML على الانترنت ربطه أوّلًا بواجهة تحكم الموقع مع الواجهة الخلفية Back-end، وقاعدة البيانات في حال أردت الحصول على بعض المعلومات، مثل البريد الإلكتروني كما هو الحال في قالبنا هذا.

ما تحتاجه لإطلاق صفحة على الويب باستخدام قوالب HTML

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

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