كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني

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

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

المتطلبات

إن كنت تتابع سلسلة المقالات التعليمية هذه منذ البداية تستطيع الاستمرار في استخدام مسار المشروع css-practice وملف index.html ومجلد images ومجلد css وملف styles.css التي أنشأتها سابقًا ضمن السلسلة، لكن إن لم تتابع السلسلة من بدايتها وتحتاج تعليمات لضبط هذه المجلدات والملفات عليك الاطلاع على المقال الأول من هذه السلسلة.

اقتباس

إن قررت استخدام التسميات الخاصة بك للمجلدات والملفات تأكد من تجنب استخدام المحارف الخاصة والفراغات (مثل ! و # وغيرها) والأحرف الكبيرة حيث يُمكن أن تُسبب مشاكل لاحقًا، وانتبه إلى أنك بحاجة لتغيير مسارات الملفات في بعض الخطوات في ما تبقى من هذه السلسلة لضمان أنها تتوافق مع أسماء ملفاتك.

يجب أن تملك مجلد مشروع بالاسم css-practice تضمن المجلدات والملفات التالية الضرورية لتعلم CSS في هذه السلسلة:

مجلد باسم css يتضمن الملف styles.css
مجلد فارغ باسم images
ملف بالاسم index.html

سوف تُحضر ملف index.html في القسم الأول من هذا المقال ليكون جاهزًا لتلقي محتويات المقالات القادمة.

كيفية تجهيز ملف index.html لمحتوى HTML

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

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
   <title>Sammy the Shark</title>
   <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
  </body>
</html>

تأكد من تغيير النص ضمن وسم title لعنوان موقعك الذي تختاره ثم احفظ ملف index.html، وقبل المتابعة لنتعرف على تفاصيل الشيفرة السابقة التي أضفناها.

يُعلم التصريح <DOCTYPE html!> المتصفح أي نوع من HTML يستخدمه الملف، والتصريح عن هذه القيمة مهم جدًا بسبب وجود عدة إصدارات من HTML ويحتاج المتصفح أن يعلم أي منها سوف يستخدم، وفي هذا التصريح فإن html تُعرف عن الإصدار الحالي المعياري لـ HTML وهو HTML5.
وسم الفتح والإغلاق <html> تُعلم المتصفح أن المحتوى الموجود بين هذين الوسمين يجب تفسيره على أنه HTML، وضمن هذا الوسم أضفت سمة اللغة lang التي تُحدد لغة صفحة الويب، وفي هذا المقال فإن اللغة مضبوطة على الإنجليزية باستخدام en، وللحصول على القائمة الكاملة لوسوم اللغة اطلع على سجل IANA لوسوم اللغة..
تُنشئ وسوم الفتح والإغلاق <head> قسمًا ضمن ملف HTML يتضمن عادةً معلومات عن الصفحة بدلًا من محتوى الصفحة نفسه، ولا تعرض المتصفحات المعلومات الموجودة في قسم <head>.
يُحدد الوسم <meta charset="utf-8"‎> أن مجموعة محارف الملف يجب أن تكون UTF-8 وهي صيغة ترميز أحادية تدعم معظم المحارف من مجموعة متنوعة من اللغات المكتوبة.
يُعلم الوسم <title> المتصفح باسم صفحة الويب، حيث يظهر هذا الاسم ضمن تبويب المتصفح وعند عرض الموقع ضمن نتائج بحث لكنه لا يظهر ضمن صفحة الويب نفسها، ولا تنسى استبدال عبارة "Sammy the Shark" باسمك أو عنوان من اختيارك إن أردت تخصيص الموقع.
يُعلم <link rel="stylesheet" href="css/styles.css"‎> المتصفح بمكان وجود ملف التنسيق CSS الذي يتضمن قواعد التنسيق، وفي حال تابعت التعليمات السابقة في هذه السلسلة يجب أن يكون ملف التنسيق موجود ضمن مسار الملف هذا.
سوف تتضمن وسوم الفتح والإغلاق <body> المحتوى الرئيسي لصفحة لويب، وسوف تُضيف محتوى HTML بين هذين الوسمين في ما يلي من مقالات ضمن هذه السلسلة.

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

نظرة عامة على الموقع الإلكتروني التوضيحي المبني باستخدام HTML و CSS

سوف تتعرف في هذا المقال على بنية الموقع الإلكتروني الذي سوف تبنيه وخطوات إنشائه في القادم من المقالات، يُمكن تقسيم موقعك بصريًا إلى عدة أقسام أفقية.

نظرة عامة على الموقع الإلكتروني التوضيحي المبني باستخدام HTML و CSS

يظهر في الصورة السابقة عنوان كل من الأقسام السبعة السابقة.

قسم الترويسة (في الأعلى).
قسم "عني" (الثاني من الأعلى).
قسم المشاريع (الثالث من الأعلى).
قسم التجارب (الرابع من الأعلى).
قسم التعليم والمهارات (الخامس من الأعلى).
قسم الاقتباس المميز (السادس من الأعلى).
قسم التذييل الذي يلتصق بأسفل الصفحة.

وستتعلم كيفية إنشاء جميع هذه الأقسام في مقالات لاحقة في هذه السلسلة

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

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

الخلاصة

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

ترجمة -وبتصرّف- للمقالات How To Set Up Your CSS and HTML Website Project و An Overview of Our Demonstration HTML and CSS Website لصاحبها Erin Glass.