شرح مسارات الملفات في HTML بالعربي — File Paths بالتفصيل

لاحظت في الدروس السابقة أننا نكتب src="/assets/images/logo.png" أو href="about.php". هذه تسمى مسارات الملفات (File Paths). فهم المسارات بشكل صحيح هو ما يفصل بين موقع يعمل 100% وموقع مليء بالصور المكسورة والروابط الميتة.

ما هو مسار الملف؟

المسار هو العنوان الذي يخبر المتصفح: "الملف الذي تريده موجود هنا". تماماً مثل العنوان البريدي — بدون عنوان محدد، لن تصل رسالتك.

يُستخدم المسار في:

• <img src="..."> — مسار الصورة
• <a href="..."> — مسار الصفحة المرتبطة
• <link href="..."> — مسار ملف CSS
• <script src="..."> — مسار ملف JavaScript

النوع الأول: المسار المطلق (Absolute Path)

المسار المطلق هو العنوان الكامل للملف — بما فيه البروتوكول والنطاق ومسار الملف. يمكن الوصول إليه من أي مكان في العالم.

<!-- مسار مطلق لصورة خارجية -->
<img src="https://www.devarabi.com/assets/images/logo.png" alt="شعار DevArabi">

<!-- مسار مطلق لرابط -->
<a href="https://www.devarabi.com/courses/html/intro.php">دورة HTML</a>

المسارات المطلقة جيدة للملفات الخارجية (مواقع أخرى). لكن لملفات موقعك الخاص — لا تستخدمها.

النوع الثاني: المسار النسبي (Relative Path)

المسار النسبي يعتمد على موقع الملف الحالي كنقطة انطلاق. لا يحتوي على اسم النطاق — يبدأ من مجلد الصفحة أو من جذر الموقع.

هناك ثلاث حالات:

الحالة 1: الملف في نفس المجلد

<!-- الملف الحالي: /courses/html/index.php -->
<!-- الصورة: /courses/html/banner.jpg -->

<img src="banner.jpg" alt="بانر">
<!-- أو بشكل صريح: -->
<img src="./banner.jpg" alt="بانر">

الحالة 2: الملف في مجلد فرعي

<!-- الملف الحالي: /courses/html/index.php -->
<!-- الصورة: /courses/html/images/photo.jpg -->

<img src="images/photo.jpg" alt="صورة">

الحالة 3: الملف في مجلد أعلى — ../

<!-- الملف الحالي: /courses/html/index.php -->
<!-- الصورة: /courses/shared-image.jpg -->

<!-- ../  تعني: "ارجع مجلداً للخلف" -->
<img src="../shared-image.jpg" alt="صورة مشتركة">

<!-- مجلدان للخلف -->
<img src="../../assets/logo.png" alt="شعار من الجذر">

الحالة 4: من جذر الموقع — /

<!-- يبدأ من جذر الموقع بغض النظر عن مكان الصفحة الحالية -->
<img src="/assets/images/logo.png" alt="شعار">
<a href="/index.php">الصفحة الرئيسية</a>
<link rel="stylesheet" href="/assets/css/style.css">

جدول ملخص — جميع أنواع المسارات

مثال عملي — هيكل مشروع حقيقي

تخيّل هذا الهيكل لمشروعك:

my-website/
├── index.html
├── about.html
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   └── images/
│       ├── logo.png
│       └── banner.jpg
└── courses/
    └── html/
        └── intro.html

من ملف courses/html/intro.html، كيف نصل لكل الملفات؟

<!-- من courses/html/intro.html -->

<!-- CSS — من الجذر (الأفضل) -->
<link rel="stylesheet" href="/assets/css/style.css">

<!-- أو نسبي بـ ../ -->
<link rel="stylesheet" href="../../assets/css/style.css">

<!-- شعار الموقع -->
<img src="/assets/images/logo.png" alt="الشعار">

<!-- رابط للصفحة الرئيسية -->
<a href="/index.html">الصفحة الرئيسية</a>

<!-- رابط لصفحة في نفس المجلد -->
<a href="basic.html">الدرس الثاني</a>

أخطاء شائعة يجب تجنبها

• حساسية الأحرف: على معظم الخوادم (Linux)، Photo.jpg تختلف عن photo.jpg. استخدم أحرفاً صغيرة دائماً.
• المسافات في أسماء الملفات: تجنب my photo.jpg واستخدم my-photo.jpg بدلاً منه.
• الخلط بين / و./: /logo.png يبحث من جذر الموقع. ./logo.png يبحث في نفس المجلد.
• نسيان الامتداد: اكتب photo.jpg وليس فقط photo.

الأسئلة الشائعة — FAQ

ما الفرق بين / في البداية و./؟

/ تعني انطلق من جذر الموقع (المجلد الرئيسي الأعلى). ./ تعني انطلق من مجلد الصفحة الحالية. في معظم الحالات يمكنك حذف ./ لأنه ضمني.

كيف أعرف كم مرة أحتاج ../؟

عدّ عمق الصفحة الحالية. إذا كانت الصفحة في courses/html/page.html فهي في مستوى 3 عمق. كل ../ ترجعك مستوى واحداً. لتصل للجذر تحتاج ../../.

هل المسارات تعمل بنفس الطريقة على Windows وLinux؟

Windows يستخدم \ للمسارات محلياً، لكن في HTML نستخدم دائماً / — وهذا يعمل على كل الأنظمة. الفرق الهام: Linux حساس لحالة الأحرف، Windows لا. لذلك التزم بالأحرف الصغيرة لتجنب المفاجآت عند رفع الموقع للخادم.