مسارات الملفات في HTML

مسارات الملفات في HTML

يا هلا والله بالشباب! اليوم بنتكلم عن شيء أساسي ومهم جداً في أي مشروع ويب: مسارات الملفات (File Paths). ببساطة، كيف تقول للمتصفح وين يلقى ملف معين سواء كانت صورة، ملف CSS، ملف JavaScript، أو حتى صفحة HTML ثانية.

أنواع المسارات

عندنا نوعين رئيسيين للمسارات:

1. المسارات المطلقة (Absolute File Paths)

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

ملاحظة: استخدام المسارات المطلقة لملفات داخل مشروعك ممكن يسبب مشاكل لو غيرت اسم النطاق أو نقلت المشروع لسيرفر ثاني. الأفضل تستخدمها للمصادر الخارجية.

مثال:

<img src="https://www.example.com/images/logo.png" alt="شعار الموقع">
<a href="https://www.google.com">اذهب إلى جوجل</a>

هنا، المتصفح بيعرف بالضبط وين يروح عشان يجيب الصورة أو يفتح الرابط.

2. المسارات النسبية (Relative File Paths)

هذي هي اللي بتستخدمها أغلب الوقت داخل مشروعك. المسارات النسبية تحدد موقع الملف بالنسبة لموقع ملف الـ HTML اللي أنت فيه حالياً. يعني ما تحتاج تكتب الموقع الكامل، بس تقول للمتصفح "الملف اللي أبغاه موجود هنا، أو في المجلد اللي جنبنا، أو في المجلد اللي فوقنا".

ملاحظة: المسارات النسبية هي الأفضل للمشاريع الداخلية لأنها تخلي مشروعك متنقل (portable). لو نقلت المشروع كله لمجلد ثاني أو لسيرفر ثاني، بتظل المسارات شغالة طالما الهيكل الداخلي للملفات والمجلدات ما تغير.

أمثلة على المسارات النسبية

أ. الملف في نفس المجلد

إذا كان الملف اللي تبغاه (مثلاً صورة) موجود في نفس المجلد اللي فيه صفحة الـ HTML حقتك، تكتب اسمه مباشرة.

<!-- ملف index.html في نفس المجلد مع صورة my-image.jpg -->
<img src="my-image.jpg" alt="صورة">

ب. الملف في مجلد فرعي (Subfolder)

إذا كان الملف في مجلد داخل المجلد الحالي، تكتب اسم المجلد بعدين سلاش / بعدين اسم الملف.

<!-- ملف index.html
     المجلد images/
        داخلة صورة my-image.jpg -->
<img src="images/my-image.jpg" alt="صورة">

<!-- لملف CSS في مجلد styles/ -->
<link rel="stylesheet" href="styles/main.css">

<!-- لملف JavaScript في مجلد js/ -->
<script src="js/script.js"></script>

ج. الملف في المجلد الأب (Parent Folder)

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

<!-- هيكل الملفات:
     project/
     ├── index.html
     ├── css/
     │   └── style.css
     └── images/
         └── my-image.jpg

     إذا كنت في ملف style.css وتبغى توصل لـ my-image.jpg -->
<!-- في ملف style.css -->
body {
    background-image: url('../images/my-image.jpg');
}

تقدر ترجع أكثر من مجلد باستخدام ../ أكثر من مرة. مثلاً ../../filename.ext يرجع خطوتين.

د. المسار من جذر الموقع (Root-Relative Path)

هذا النوع من المسارات يبدأ بسلاش / ويعني أن المسار يبدأ من جذر موقع الويب الخاص بك (root directory). هذا مفيد جداً للمواقع الكبيرة ويضمن أن المسار يعمل بغض النظر عن عمق الصفحة الحالية في هيكل المجلدات.

<!-- ملف index.html
     المجلد images/
        داخلة صورة logo.png
     المجلد css/
        داخلة style.css

     إذا كان جذر موقعك هو مجلد 'mywebsite' -->
<img src="/images/logo.png" alt="شعار">
<link rel="stylesheet" href="/css/style.css">

ملاحظة: هذا المسار / يختلف عن file:/// اللي يستخدم للملفات المحلية. / يعني جذر الويب سيرفر.

نصائح سريعة

• استخدم السلاش الأمامي / : دائمًا استخدم السلاش الأمامي / في مسارات الويب، حتى لو كنت على نظام ويندوز. المتصفحات والسيرفرات تفضل هذا التنسيق.
• حافظ على التنظيم: رتب ملفاتك في مجلدات واضحة (مثل images/, css/, js/) عشان تسهل على نفسك وعلى غيرك فهم المسارات.
• اختبر مساراتك: دائمًا اختبر المسارات في متصفحك عشان تتأكد إن كل شيء شغال صح.

وبكذا نكون غطينا أساسيات مسارات الملفات في HTML. هذا جزء حيوي في بناء أي موقع، وإتقانه بيوفر عليك وقت وجهد كثير.

← السابقالفهرس