HTML / مسارات الملفات
مفهوم مسار الملف
مسار الملف (File path) يقصد بها المكان الذي يوجد فيه الملف.
عند إضافة رابط في الصفحة سواء لصورة، فيديو، أغنية، برنامج، ملف مضغوط، صفحة أخرى إلخ.. فلا بد من تحديد المسار الموجود فيه بدقة و بدون أي خطأ لأنه في حال وجود خطأ في حرف واحد فإنه لن يعمل.
في هذا الدرس ستتعلم أساليب تحديد مسارات الملفات على اختلاف أنواعها مما يجعلك قادر على تضمينها في الصفحات.
أساليب تحديد المسار
هناك أسلوبين يمكنك إعتمادهما عند تحديد مكان وجود الملف:
- وضع مسار نسبي (Relative Path) للملف و معنى ذلك أن مساره يوضع نسبةً لمكان الصفحة التي سيتم إضافته فيها.
- وضع مسار كامل (Absolute Path) للملف و معنى ذلك أن مساره يوضع كما هو بالنسبة للحاسوب.
.css و ملفات .js في صفحاتك أو حتى حين تقوم بعرض صور المستخدمين في المواقع التي تبنيها حينها.أمثلة شاملة حول وضع مسارات نسبية
في الأمثلة التالية سنفترض أننا نريد عرض صورة في الصفحة و في كل مرة سنفترض أن الصورة موجودة في مكان مختلف بالنسبة للصفحة التي سنعرضها فيها حتى تعرف كيف يمكنك تحديد مسارها نسبةً للمكان الذي تكون موجودة فيه.
لعرض صورة في الصفحة نستخدم الوسم <img src=""> و مسارها نمرره كقيمة للخاصية src.
في الدرس التالي ستتعرف على جميع الخصائص التي يمكن إضافتها للصور، الآن ركز فقط على أسلوب تحديد المسارات.
المثال الأول
في المثال التالي سنفترض أننا نريد عرض صورة في الصفحة إسمها logo.png و هي موجودة بجانب الصفحة التي سنعرضها فيها كما يلي.
المثال الثاني
نفس المسار السابق كان بإمكانك إضافة ./ في بدايته ليصبح ./logo.png و هكذا سيعلم المتصفح أن الصورة موجودة في نفس المكان.
سواء وضعت ./ في بداية المسار أم لم تضع فإن ذلك لا يشكل أي فرق و هذا الأسلوب أيضاً يعتبر أسلوب نسبي.
في برنامج VSCode سيظهر شكل الملفات كالتالي.
المثال الثالث
في المثال التالي سنفترض أن الصورة موجودة بداخل مجلد إسمه images كما يلي.
في برنامج VSCode سيظهر شكل الملفات كالتالي مع الإشارة إلى أننا قمنا بتحديد مسار الصورة بشكل نسبي.
المثال الرابع
في المثال التالي سنفترض أن الصفحة موجودة بداخل مجلد إسمه pages و الصورة التي سيعرضها فيها موجودة بجانب هذا المجلد كما يلي.
../ في بداية المسار حتى يعلم المتصفح بأنه يجب الرجوع خطوة واحدة للوراء حتى يجدها.
المثال الخامس
في المثال التالي سنفترض أن الصفحة موجودة بداخل مجلد إسمه pages و الصورة التي سيعرضها فيها موجودة في مجلد إسمه images كما يلي.
../images/ في بداية المسار حتى يعلم المتصفح بأنه يجب الرجوع خطوة واحدة للوراء و بعدها يجب الدخول للمجلد images حتى يجدها.في برنامج VSCode سيظهر شكل الملفات كالتالي مع الإشارة إلى أننا قمنا بتحديد مسار الصورة بشكل نسبي.
أمثلة شاملة حول وضع مسارات كاملة المثال الأول
المثال الأول
استخدام المسار الكامل الذي يبدأ من الجذر في النظام، وهذا يحدد موقع الملف بدقة على الحاسوب.
<p>المثال الأول: <img src="D://workspaces/html/images/logo.png"></p>
المثال الثاني
استخدام URL كامل للوصول إلى صورة موجودة على الإنترنت.
<p>المثال الثاني: <img src="https://raw.githubusercontent.com/alnajm1/CodaFox/main/HTML%20CODAFOX.png"></p>
هنا مثال يوضح كيف يمكن استخدام المسار الكامل والنسبي للوصول إلى نفس الملف على الويب.
وضع نفس المسار بشكل كامل و بشكل نسبي
<p> <!-- هنا وضعنا مسار الصورة الكامل في موقعنا --> <img src="https://raw.githubusercontent.com/alnajm1/CodaFox/main/HTML%20CODAFOX.png"> <!-- هنا وضعنا مسار الصورة النسبي في موقعنا بالنسبة للمحرر --> <img src="../tutorials/html/files-paths/CODAFOX-logo.png">
</p>
هل أستخدم المسار الكامل أو المسار النسبي؟
الأفضل لك دائماً هو تحديد مسارات الملفات بشكل نسبي طالما أن ذلك ممكناً لأن لذلك عدة فوائد منها على سبيل المثال أن تصميمك الذي تفعله على الحاسوب يمكنك رفعه كما هو أونلاين أو تغيير مكانه في حاسوبك و سيعمل بدون الحاجة لإجراء أي تعديل على مسارات الملفات المستخدمة في الصفحات.