التعامل مع الملفات : كيفية التعامل مع ملفات موقع الويب

 

يتكون موقع الويب من العديد من الملفات: محتوى نصي، كود، أنماط، الوسائط (صور، وفيديوهات)، وما إلى ذلك.

 

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

 

أين يجب عليّ وضع الملفات الخاصة بموقع الويب على حاسوبي؟

 

 

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

 

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

 

  1. اختر مكان لتخزين مشاريع مواقع الويب. وهنا ستقوم بإنشاء مجلد باسم projects أو أي اسم مشابه. وبه سنقوم بتخزين مشاريع العمل.
  2. في داخل المجلد السابق، قم بإنشاء مجلد آخر باسم test أو أي اسم مشابه لتخزين ملفات أول موقع ويب.

 

المسافات وحجم الحروف في تسمية الملفات والمجلدات:

 

ستلاحظ أننا في خلال المقالة، سنطلب منك تسمية الملفات والمجلدات بحروف إنجليزية صغيرة وبدون مسافات، وكل ذلك بسبب:

 

  1. العديد من أجهزة الكمبيوتر، خاصة خوادم الويب، تستشعر حجم الحروف. مثل، عندما تقوم بوضع صورة على موقع الويب كـ test/My-Image.jpg ، وفي ملف آخر أردت إدخالها كـ test/my-image.jpg ، في أغلب الأحوال لن يتم قرائتها.

 

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

 

  1. كما تقوم بعض الخوادم بتبديل المسافات في اسم الملف بـ “20%” ( وهو كود المسافة في الـ URL )، مما ينتج عنه فشل في جميع الروابط الخاصة بالموقع.
  2. لذا من الأفضل الفصل بين الكلمات باستخدام الشرطة (-) والتي يتم تفضيلها عن الشرطة السفلية (_).

 

باختصار، يجب عليك استخدام الشرطة (-) في تسمية ملفات موقع الويب.

يعامل محرك البحث Google الشرطة (-) كفاصل بين الكلمات، ولكنه لا يُعامل الشرطة السفلية (_) بالمثل.

 

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

 

ما هو البناء المناسب للملفات الخاصة بموقع الويب ؟

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

كفهرس، ومجلدات لاحتواء الصور، والأنماط، والنص. دعنا نقم بإنشاء ما يلي :

 

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

 

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

 

  1. مجلد الأنماط، يحتوي هذا المجلد على أنماط CSS المُستخدمة في المحتوى (على سبيل المثال، إعدادات الخط، وألوان الخلفية). قم بإنشاء مجلد باسم styles ، داخل مجلد test .

 

  1. مجلد المخطوطات (scripts)، يحتوي هذا المجلد على كود جافا سكربت المُستخدم لاضافة الوظيفة التفاعلية لموقع الويب ( مثل الأزرار التي تقوم بتحميل بيانات عند الضغط عليها ). قم بإنشاء مجلد باسم scripts ، داخل مجلد test .

 

ملحوظة: على نظام التشغيل Windows ، قد تواجه مشاكل في رؤية أسماء الملفات؛ لأن الـ Windows يحتوي على خاصية تسمى “إخفاء إمتداد الملفات المعروفة” والتي تعمل في الوضع الإفتراضي. بشكل عام يمكنك تعطيل هذه الخاصية عن طريق الدخول إلى مستكشف الويندوز، وإختيار Folder Options وإزالة علامة الصح من أمام “إخفاء إمتدادات الملفات المعروفة” ، واضغط على

موافق.

 

مسارات الملفات :

لجعل الملفات قادرة على التواصل فيما بينها، يجب عليك صنع مسارات بينيّة للملفات – بمعنى آخر صنع طريق ليعلم كل ملف مكان الملفات الأخرى. وللتوضيح سنقوم بكتابة القليل من HTML في ملف index.html لجعله يقوم بإظهار صورة:

 

  1. قم بنسخ الصورة في ملف images .

 

  1. قم بفتح html ، وقم بإدخال الكود التالي كما هو:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>test page</title>

</head>

<body>

<img src=”images/test-image.jpg“ alt=”my image”>

</body>

</html>

  1. السطر <img src=” “ alt=”my image”> هو كود HTML الخاص بعرض الصورة في الموقع. يجب عليك إخبار HTML مكان الصورة. توجد الصورة في مجلد الصور، حيث يوم ملف index.html ، للسير من index.html إلى الصورة، سيكون المسار images/image-filename. على سبيل المثال، الصورة تُسمى test-image.jpg، ليكون المسار images/test-image.jpg .
  2. أدخل مسار الصورة بين علامة التنصيص بعد scr= كما في الكود.
  3. إحفظ ملف الـ HTML ، وقم بتحميله على المتصفح. سترى صفحة ويب تقوم بعرض الصورة المُسجلة باسم test-image.jpg .

 

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

 

هل لديك أي تجارب مع بناء موقع ويب؟ شاركنا!

WhatsApp chat