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

أين يجب أن يوضع موقعك على حاسبك؟

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

  1. اختر مكان لتحتفظ فيه على ملفات المشروع. فم بإنشاء مجلد في ذلك المكان ولتدعوه ب web-projects (أو شيء ما مشابه). في هذا المجلد سيكون جميع المشاريع.
  2. في نفس المجلد، أنشئ مجلداً أخر سمه test-site (أو شيء أكثر إبداعاً). 

حول حالة الحرف والمسافات

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

  1. العديد من الحواسيب، وخاصةً خوادم الويب، حساسة لحالة الحرف. لذا فعلى سبيل المثال، إذا وضعت صورة في موقعك على المسار test-site/MyImage.jpg، ومن ثم في ملف أخر حاول استدعاء الصورة بالاسم test-site/myimage.jpg، قد لا ينجح الاستدعاء.
  2. الخوادم، وخوادم الويب، ولغات البرمجة لاتتعامل مع المسافات بشكل جيد. فعلى سبيل المثال، إذا قمت باستخدام مسافات خلال كتابتك لاسم ملفك، بعض الأنظمة قد تعامل اسم الملف على أنه اسم لملفين. بعض الخوادم ستستبدل المسافات في اسم ملفك ب "%20" (رمز المسافات في روابط URI)، مما سيؤدي إلى تلف جميع الروابط. من الأفضل الفصل بين الكلمات باستخدام شرطات بدلاً من شارطة سفلية: my-file.html بدلاً من my_file.html.

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

ما هي الهيكلة التي يجب على موقعك أن يملكها؟

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

  1. الملف index.html: يحوي هذا الملف عادةً محتويات الصفحة الرئيسية لموقعك، والتي تحتوي على النصوص والصور التي سيراها الناس عندما سيزورون موقعك. استخدم محرر النصوص وانشئ ملف جديد وقم بتسميته index.html وثم احفظه بداخل المجلد text-site.
  2. المجلد images: سيحتوي هذا المجلد على جميع الصور التي ستستخدمها في موقعك. انشئ مجلداً يسمى images بداخل المجلد test-site.
  3. المجلد styles: سيحتوي هذا المجلد على جميع ملفات السي إس إس المستخدمة لتنسيق محتوى موقعك (على سبيل المثال، خصائص النص وألوان الخلفية).
  4. مجلد scripts: سيحتوي هذا المجلد على جميع ملفات الجافا السكربت المستخدمة لإضافة وظائف تفاعلية لموقعك (مثال: تحميل بيانات عندما يتم الضغط على أزرار معينة). أنشئ مجلد يدعى scripts بداخل المجلد test-site.

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

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

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

  1. انسخ الصورة التي اخترتها وضعها في المجلد images.
  2. افتح الملف index.html، وضع هذه الشفرة بداخله كما أدناه. لا تهتم حيال ما تعنيه تلك الشفرة حالياً — سنتكلم عن الهياكل بالتفصيل لاحقاً في السلسلة.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. السطر <img src="" alt="My test image"> هو التعليمة التي تستخدم لعرض صورة في الصفحة. علينا إخبار الأتش تي أم إل أية صورة نريد. توجد هذه الصورة في المجلد images، والذي هو نفس المجلد الذي يوجد فيه الملف index.html. لتستطيع الصفحة أن تصل لمجلد تلك الصورة، نحن بحاجة إلى وضع المسار التالي images/your-image-filename. على سبيل المثال، إن كانت صورتنا تسمى firefox-icon.png إذا مسار الملف سيكون images/firefox-icon.png.
  4. ضع مسار الملف داخل شفرة الأتش تي أم إل بين علامتي التنصيص في التعليمة src="".
  5. قم بحفظ الملف index.html وقم بفتحه في متصفح الويب (انقر عليه مرتين). يجب أن ترى صفحة ويب جديدة تعرض صورتك!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

بعض القواعد الأساسية لمسارات الملفات:

  • لتربط الملف الهدف الموجود في نفس المجلد الذي يوجد فيه ملف الأتش تي أم إل، استخدم اسم الملف فقط، مثال my-image.jpg.
  • للإشارة إلى ملف في دليل فرعي، اكتب اسم الدليل في مقدمة المسار، وبعدها شرطة مائلة، مثال subdirectory/my-image.jpg.
  • لربط الملف الهدف الموجود بمجلد يسبق المجلد الذي يوجد فيه ملف الأتش تي أم إل، اكتب نقطتين. فعلى سبيل المثال، اذا كان الملف index.html داخل مجلد فرعي في المجلد test-site وكانت الصورة my-image.jpg داخل المجلد test-site، يمكنك الإشارة للصورة my-image.jpg من الملف index.html باستخدام المسار ../my-image.jpg.
  • يمكنك الدمج بين تلك القواعد كما تشاء، على سبيل المثال: ../subdirectory/another-subdirectory/my-image.jpg.

حالياً، هذا كل ما تحتاج لمعرفته.

ملاحظة: يستخدم نظام ملفات ويندوز المائلة الخلفية، وليس الأمامية، مثال C:\windows. هذا لا يهم عند استخدام الأتش تي أم إل — حتى عندما تقوم بتطوير موقعك على ويندوز، فعليك استخدام المائلة الأمامية في شفرتك.

ماذا يجب أن يحدث أيضاً؟

هذا كل شيء للوقت الراهن. هيكلة مجلداتك يجب أن تبدو كشيء من هذا القبيل:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

 

في هذه الوحدةEditEdit

Document Tags and Contributors

 المساهمون في هذه الصفحة: ahmadnourallah
 Last updated by: ahmadnourallah,