ريادة الأعمال

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

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

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

دليل:

ما هو قالب الويب؟

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

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

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

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

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

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

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

كيف يمكنني إنشاء قالب؟

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

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

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

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

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

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

إنشاء ملف قالب

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

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

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

استخدام اسم ملف ينتهي بلاحقة html

بعد القيام بما سبق ، نحصل على التعليمة البرمجية التالية ، تسمى كل سلسلة نصية بين قوسين <> كرمز مميز ، لأن الترميز يحدد طبيعة العنصر المضاف. في بعض الأحيان ستلاحظ تكرار علامتين ، مثل <head> و <head/> ، لأن بعض العلامات تتطلب علامة تصنيف لإغلاقها ، نفس الاسم عن طريق إضافة الرمز “/” ، في حين أن البعض الآخر لا يحتاج إليها ، تسمى علامة الإغلاق الذاتي.

علامات الإغلاق الذاتي

فيما يلي وصف موجز لهذه العلامات:

1. مارك <! نوع المستند >

يتم استخدام هذه العلامة للإشارة إلى نوع الملف وتحدد كيفية تعامل المستعرض مع الملف. في هذه الحالة ، تقول الملصق: <! نوع المستند> الملف هو ملف HTML5 (الإصدار الخامس الحالي من html).

2. مارك <>

تتضمن هذه العلامة جميع العلامات الأخرى في ملف HTML باستثناء العلامة السابقة، وهي واحدة من العلامات التي تتطلب علامات ضيقة مقترنة بها<html/>.

3. ضع علامة على < >

تحتوي هذه العلامة على جميع البيانات الوصفية حول ملف HTML وتحتوي على علامات تشرح محتوى الصفحة وطبيعتها الترميزية، مثل العلامات<meta>، < النمط، > < العناوين>، والبرنامج النصي <> والتي تحدد سلوك العناصر في الصفحة ولا يتم عرضها مباشرة للزوار.

4. مارك <>

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

5. مارك < العنوان >

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

6. مارك < > الجسم

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

ثالثا: إنشاء بنية قالب HTML

لنبدأ بتغيير محتوى علامة العنوان إلى عنوان الصفحة ، وفي هذه الحالة نقوم بتغيير محتوى العلامة < عنوان > من المستند إلى “الاشتراك في دورة تصميم ويب”. كما نلاحظ أن تصميم صفحتنا ينقسم إلى قسمين، هما جزء الرأس والدعوة للتسجيل باستخدام البريد الإلكتروني، وجزء آخر من مراجعة مزايا الدورة، إذا تم فصل محتوى الجزأين في التسمية < > الجسم، باستخدام الوسم <الرأس> < الرئيسي> على النحو التالي:

فصل محتوى جزأين من العلامة - قوالب HTML

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

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

استخدام علامات H2 لإضافة عنوان للصفحة الرئيسية - قالب THML

فيما يلي النتائج المذكورة أعلاه:

استخدام القوالب

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

إضافة شعار باستخدام علامة img

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

إضافة علامة div عدة مرات

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

استخدام البريد الإلكتروني لإضافة نموذج تسجيل

انتقل إلى قسم آخر من قالب HTML داخل الترميز < > الرئيسي، وأضف الترميز < الجزء > إلى فقرات النص الثلاث في Toi، ثم الترميز <div> يحتوي على عناوين الفقرات الثلاث ومحتوى الفقرة، ولاحظ أن علامة div< > بسطر مختلف.

إضافة علامة مقطعية لتحتوي على ثلاث فقرات من النص

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

لا تزال قوالب HTML بحاجة إلى بعض التنسيق لأنها تبدو الآن غير مناسبة أو مرغوب فيها دون أي تنسيق أو لون!

استخدام CSS لتنسيق القالب

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

  1. علامات التبويب المضمنة: يتم ذلك باستخدام سمة النمط داخل العلامة المراد تنسيقها. على الرغم من أن هذه الطريقة بسيطة ، إلا أنه يصبح من الصعب إدارتها عندما تحتوي الصفحة على العديد من العلامات ، ولا يمكن الاعتماد عليها في المشاريع الكبيرة.
  2. التصميم الداخلي الداخلي: من خلال تضمين رمز CSS في نمط < الترميز في ملف شفرة HTML >< قسم > الرأس ، تكون هذه الطريقة أفضل في تنظيم التعليمات البرمجية من الطريقة السابقة ، ولكنها ليست الأفضل.
  3. الخارجية الخارجية: سنتبع هذا النهج من خلال ربط الملف عن طريق إنشاء علامة .css < تحتوي على رمز CSS (عادة ما يكون نمطا> باستخدام شفرة HTML < في قسم >.

دعنا أولا ننشئ ملفا جديدا باسم الأنماط .css في مجلد المشروع الحالي ، ثم نضيف ترميزا <رابط> والذي يحتوي على سمة href التي تشير إلى موقع الملف والسمة rel التي تمثل وظائفه (ورقة الأنماط). سنستخدم أيضا قوالب .css العادية ، مما سيساعدنا على عرض العناصر بشكل أفضل على صفحات الويب الخاصة بنا. لاحظ أننا < نكتب تسميات <> < > الجسم >.

إنشاء ملف جديد .css باسم النمط

نقوم أولا بتخصيص تنسيق محتوى الترميز< النص الأساسي > عادة عن طريق كتابة اسم الترميز وإلحاقه بالأقواس {} وكتابة تفاصيل التنسيق داخل الأقواس. ثم نكتب تنسيق بعض الأسطر ، مع ملاحظة أن معظم العناصر (أي الشبكة وتفاصيل أرباح الشبكة والمحتويات) تلاحظ أننا نسبق اسم السطر بالنقطة “.”، بدلا من كتابة اسمه كما في المثال السابق للتأكد من أنه سطر وليس تسمية.

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

تغيير قيمة خاصية كل صف، ولاحظ التغيير

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

تنسيق الصفوف الخاصة بعناوين قالبنا الأساسية والفرعية e1652802982117

كتابة تنسيق الصف لرؤوس القوالب الأساسية ورؤوس القوالب الفرعية

نستخدم خطوط نماذج بريد إلكتروني مختلفة لضبط كيفية عرض نموذج التسجيل وتنسيقه ، لأن “زر نموذج البريد الإلكتروني” يشير إلى الزر الموجود داخل علامة نموذج البريد الإلكتروني ، ويشير “إدخال نموذج البريد الإلكتروني: التركيز” إلى تنسيق العنصر باستخدام سطر نموذج البريد الإلكتروني عند النقر فوق مربع النص ، وتسمى هذه الطريقة بالخط الزائف.

استخدام بنود نماذج بريد إلكتروني مختلفة لضبط كيفية عرض نموذج التسجيل وتنسيقه

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

كتابة تنسيق صف تفاصيل المقرر الدراسي

خامسا: بدء تشغيل قالب HTML

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

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

ما تحتاجه لتشغيل صفحة ويب باستخدام قالب HTML

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

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

نشر في: الموقع الإلكتروني

زر الذهاب إلى الأعلى