مسارات الملفات في HTML
تعرف أصلاً كتابة صفحات بعناوين وفقرات وتعليقات. المواقع الحقيقية نادرًا ما تعيش في ملف واحد. الصور والصفحات الأخرى والأنماط والسكربتات تجلس في مجلدات بجانب HTML — ويجب أن يشير HTML إليها بشكل صحيح. هذه المؤشرات هي مسارات الملفات. إذا كان المسار خاطئًا فقد يوجد الملف على القرص بينما يعرض المتصفح صورة مكسورة أو رابطًا ميتًا.
ما هو مسار الملف؟
مسار الملف هو العنوان الذي يستخدمه المتصفح لجلب ملف آخر. عادة تكتبه في سمات مثل src (صور، سكربتات، وسائط) وhref (روابط، أوراق أنماط، وكثير من الموارد المرتبطة). المسار ليس زينة؛ إنه تعليمات: «ابحث هنا». حين تكون التعليمات خاطئة يفشل الطلب حتى لو بدت الوسوم صحيحة.
الإجابة المباشرة
استخدم مسارًا نسبيًا عندما ينتقل الملف الهدف مع مجلدات مشروعك — مثل images/logo.png من صفحة في المجلد الأب نفسه، أو ../images/logo.png من صفحة أعمق بمجلد واحد. استخدم مسارًا مطلقًا من الجذر يبدأ بـ / عندما يكون الموقع مستضافًا وتحتاج كل الصفحات نفس المسار من جذر الموقع. استخدم URL كاملًا (https://…) عندما يعيش الملف على مضيف أو CDN آخر. على المبتدئ إتقان المسارات النسبية أولًا لأن التمرين المحلي يعتمد عليها.
النسبي مقابل المطلق بنظرة سريعة
📊 مقارنة أنواع المسارات
| النوع | يبدأ من | مثال | الأفضل عندما |
|---|---|---|---|
| نسبي | مجلد ملف HTML الحالي | images/photo.jpg | ملفات المشروع تنتقل معًا في المجلدات |
| مطلق من الجذر | جذر الموقع | /images/photo.jpg | صفحات كثيرة على موقع مستضاف تحتاج مسارًا ثابتًا واحدًا |
| URL كامل | البروتوكول + النطاق | https://cdn.example.com/a.png | الملف على مضيف أو CDN آخر |
خريطة مشروع صغير
تخيّل مجلدًا اسمه project. بداخله:
index.html(الصفحة الرئيسية)about.html(نفس مجلد الصفحة الرئيسية)- مجلد
imagesفيهlogo.png - مجلد
pagesفيهcontact.html
العادة المهمة: اسأل دائمًا أي ملف HTML تحرّر قبل كتابةsrcأوhref. الصورة نفسها تحتاج مسارات نسبية مختلفة من صفحات مختلفة.
مسارات نسبية من مجلد المشروع
من index.html أو about.html، المجلدان images وpages أبناؤه. لا تحتاج ../ للوصول إليهما.
مسارات نسبية من index.html
html<img src="images/logo.png" alt="شعار الموقع">
<a href="pages/contact.html">اتصل</a>
<a href="about.html">حول</a>لماذا تعمل هذه القيم
images/logo.pngتعني «ادخل مجلدimagesبجانب ملف HTML هذا ثم افتحlogo.png»pages/contact.htmlتعني «ادخلpagesثم افتحcontact.html»about.htmlتعني «ملفًا آخر في نفس مجلد الصفحة الحالية»- نص
altليس مسارًا؛ إنه نص وصفي عندما لا تُعرض الصورة
إذا اختفى الشعار في المتصفح افحص الإملاء واسم المجلد الحقيقي وما إذا حفظت HTML في المجلد الذي تظنه.
مسارات نسبية من مجلد فرعي
contact.html يعيش داخل pages/. من هناك images/ ليس ابنًا لـ pages/؛ إنه بجانب pages/ تحت project/. يجب أن تصعد مستوى واحدًا بـ ../ ثم تدخل images/.
مسارات نسبية من pages/contact.html
html<img src="../images/logo.png" alt="شعار الموقع">
<a href="../index.html">الرئيسية</a>
<a href="../about.html">حول</a>قراءة ../
../تعني «اصعد إلى المجلد الأب»../images/logo.pngتعني «اصعد إلىproject/ثم إلىimages/logo.png»../index.htmlتعني «اصعد إلىproject/ثم افتحindex.html»- كتابة
images/logo.pngمنcontact.htmlتبحث عنpages/images/logo.pngغير الموجود في هذه الخريطة
هذا الخطأ وحده — نسيان../من مجلد فرعي — يسبب حصة كبيرة من تقارير «الصورة المكسورة» لدى المبتدئين.
المسارات المطلقة من الجذر وURL الكاملة
يبدأ المسار المطلق من الجذر بـ / ويُحل من جذر الموقع على خادم حقيقي، لا من المجلد الحالي. يشمل URL الكامل البروتوكول والنطاق وهو طبيعي لملفات الطرف الثالث. المسارات من الجذر مفيدة عندما تحتاج صفحات كثيرة مسارًا ثابتًا واحدًا.
مسار الجذر وURL كامل
html<img src="/images/logo.png" alt="شعار الموقع">
<img src="https://example.com/images/logo.png" alt="شعار الموقع">
<link rel="stylesheet" href="/styles/main.css">الملفات المحلية مقابل جذر الاستضافة
عندما تفتح HTML مباشرة من القرص (file://…) غالبًا لا يوجد جذر موقع حقيقي. مسار مثل /images/logo.png قد لا يطابق مجلد جهازك كما سيفعل على الخادم. لتمرين المبتدئين فضّل المسارات النسبية المطابقة لمجلداتك الفعلية. بعد الاستضافة تصبح مسارات الجذر أوثق عبر الصفحات.
تمرين: مسارات من خريطة مجلد
مجلد shop يحتوي:
home.html- مجلد
assetsفيهhero.jpg - مجلد
helpفيهfaq.html
افعل في المحرر:
- في
home.htmlأضفimgيحمّلhero.jpgبمسار نسبي. - في
help/faq.htmlأضفimgيحمّل الملف نفسه باستخدام../. - من
faq.htmlأضف رابطًا نسبيًا إلىhome.html. - افتح الصفحتين في المتصفح وتأكد من الصورة والرابط.
- اكسر مسارًا عمدًا، حدّث الصفحة، راقب الفشل، ثم أصلحه — هذا التدريب أسرع من القراءة وحدها.
الإجابات النسبية المتوقعة:assets/hero.jpgمنhome.html؛ و../assets/hero.jpgمع../home.htmlمنfaq.html.
أخطاء المسار التي تكسر الصفحات
- كتابة
images/logo.pngمن مجلد فرعي عندما يحتاج المسار الصحيح../images/logo.png - خطأ إملائي في اسم الملف أو المجلد، أو اختلاف حالة الأحرف على مضيفات تعامل
Logo.PNGوlogo.pngكملفين مختلفين - استخدام
\في ويندوز داخل مسارات الويب — فضّل/في سمات HTML - وضع مسار قرص مثل
C:\site\img.pngفيsrcأوhrefلصفحة ويب عادية - نسخ مسار جذر
/images/...إلى مشروع تفتحه كملف محلي فقط وتتوقع سلوك موقع مستضاف - الربط إلى
contact.htmlبينما الملف فعليًا فيpages/contact.html - نقل المجلدات دون تحديث كل المسارات التي كانت تشير إلى الترتيب القديم
الملخص
- تخبر مسارات الملفات المتصفح أين تعيش الملفات المرتبطة لـ
srcوhrefوما شابه - تُحل المسارات النسبية من مجلد ملف HTML الحالي
../تصعد مجلدًا واحدًا في مسار نسبي؛ استخدمها عندما يكون الهدف فوق الملف الحالي- تبدأ مسارات الجذر بـ
/؛ وتشمل URL الكاملة البروتوكول والنطاق - طابق أسلوب المسار مع ترتيبك: نسبي للتمرين المحلي، جذر/URL عندما يتطلب نموذج الاستضافة ذلك
- المسارات المكسورة من أكثر أسباب فشل الصور والروابط «الغامض»
- قرّر المسار دائمًا من الملف الذي تحرّره، لا من ذاكرة صفحة أخرى
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى