في هذا الدرس 7تصفّح المواضيع
يُمثل مسار الملف (File Path) العنوان الدقيق الذي يصف موقع ملف أو مورد ما ضمن الهيكل الشجري لمجلدات الموقع على خادم الويب. يعتمد المتصفح على هذه المسارات لجلب الصور وملفات التنسيق وأوراق الأنماط ومقاطع الفيديو والصفحات المرتبطة لعرضها بتناسق تام أمام الزائر.
HTML
<!-- Browser follows path to download resource -->
<img src="images/examples/header-banner.webp"
alt="Website glassmorphic header banner"
width="720" height="180">إن فهم الطريقة الهندسية التي يتبعها المتصفح في قراءة مسارات الملفات يضمن استقرار الموقع وتفادي أخطاء الروابط التالفة والصفحات المفقودة (404 Not Found). تضمن صياغة المسارات المتقنة استمرار عمل الموقع بسلاسة تامة سواء قمت بتشغيله على حاسوبك الشخصي أثناء البرمجة أو رفعته إلى خوادم الإنتاج السحابية.
عندما يقع الملف المستهدف في نفس المجلد الذي تتواجد فيه صفحة HTML الحالية بالضبط، يمكنك استدعاؤه مباشرة بكتابة اسمه وامتداده فقط، أو كتابة البادئة
./ التي تعني بصورة صريحة "ابحث داخل المجلد الحالي الذي نتواجد فيه الآن".
HTML
<!-- Direct filename reference -->
<img src="favicon.svg" alt="Site icon" width="48" height="48">
<!-- Explicit current directory reference -->
<img src="./favicon.svg" alt="Site icon" width="48" height="48">تؤدي كتابة
avatar.svg وكتابة ./avatar.svg إلى نفس النتيجة البرمجية تماماً في كافة متصفحات الويب. ولكن استخدام النقطة والشرطة المائلة ./ يعتبر ممارسة هندسية مفضلة في بيئات التجميع البرمجية الحديثة وأنظمة الوحدات لأنها تزيل أي غموض حول مكان الملف.تنظم المشاريع الاحترافية ملفاتها في مجلدات متخصصة مثل مجلد الصور والأنماط. للدخول إلى مجلد فرعي داخل المجلد الحالي، تكتب اسم المجلد متبوعاً بشرطة مائلة. بينما للصعود خطوة واحدة إلى المجلد الأب الذي يحوي مجلدك الحالي، تستخدم رمز النقطتين المتبوعتين بشرطة
../.
| نمط الصياغة | المعنى الهندسي | مثال كود HTML |
|---|---|---|
| اسم الملف مباشرة | الملف يقع في نفس المجلد مع الصفحة | pic.webp |
| المجلد الفرعي / | الدخول إلى مجلد ابن داخل المجلد الحالي | images/pic.webp |
| الصعود خطوة للأب ../ | الرجوع لمستوى واحد للأعلى ثم البحث | ../images/pic.webp |
| الصعود خطوتين ../../ | الرجوع لمستويين اثنين للأعلى في الشجرة | ../../assets/pic.webp |
HTML
<!-- Accessing assets from /pages/blog.html -->
<img src="../images/examples/growth-chart.webp"
alt="Quarterly growth chart"
width="540" height="300">يتضمن الرابط المطلق (Absolute URL) العنوان الشبكي الكامل للمورد على الإنترنت، شاملاً بروتوكول الاتصال المشفر مثل
https://، واسم النطاق الخادم بالكامل، والمسار التفصيلي المؤدي للملف المستهدف بدقة.
HTML
<!-- Absolute URL to remote CDN asset -->
<img src="https://www.closetag.com/images/closetag-mark.svg"
alt="Official brand mark on external CDN"
width="180" height="96">تُعتبر الروابط المطلقة إلزامية كلما أردت استدعاء مورد خارجي من شبكة توزيع محتوى CDN أو موقع شريك. ومع ذلك، يُنصح بتجنب كتابة النطاق المطلق لملفات موقعك الداخلية أثناء البرمجة، لأنها ستشير إلى الخادم الخارجي بدلاً من قراءة التعديلات الحديثة على جهازك المحلي (localhost).
يبدأ المسار النسبي لجذر الموقع بالشرطة المائلة في المقدمة
/. تخبر هذه الشرطة البادئة محرك المتصفح بالقفز الفوري إلى المجلد الرئيسي في خادم الويب (Web Root) والبدء منه مباشرة، بغض النظر عن مدى عمق الصفحة الحالية داخل المجلدات الفرعية.
HTML
<!-- Resolves from domain root: /images/... -->
<img src="/images/closetag-mark.svg"
alt="Universal site logo"
width="180" height="96">تقضي المسارات المنسوبة للجذر على التعقيد الناتج عن تكرار النقطتين
../../. سواء كان الزائر يتصفح الصفحة الرئيسية /index.html أو مقالاً عميقاً مثل /blog/2026/post.html، فإن المسار /images/logo.svg سيصل لنفس الملف الأصلي بدقة وثبات.يمنع اتباع القواعد الهندسية المنضبطة في تسمية الملفات وقوع أخطاء خفية ومزعجة بعد رفع الموقع للإنترنت. تعمل أغلب خوادم الويب على أنظمة لينكس، وهي أنظمة حساسة لحالة الأحرف تماماً؛ حيث يعتبر ملف
Photo.JPG ملفاً مختلفاً كلياً عن photo.jpg.
HTML
<!-- Clean naming: lowercase, hyphens, no spaces -->
<img src="images/examples/developer-desk.webp"
alt="Clean modern coding workstation"
width="600" height="400">تجنب استخدام المسافات البيضاء في أسماء الملفات والمجلدات نهائياً. فرغم أن أنظمة التشغيل المحلية تسمح بوجود المسافات، فإن متصفحات الويب تقوم بترميز المسافة برمز
%20، وهو ما يتسبب غالباً في تلف الروابط البرمجية وأخطاء في معالجة الصور.تحمل مسارات الملفات أبعاداً أمنية بالغة الحساسية في تطبيقات ومواقع الويب. تحدث ثغرة التنقل عبر مسارات الأدلة (Directory Traversal) عندما يتم تمرير مدخلات غير موثوقة من المستخدم مباشرة إلى دوال استدعاء الملفات في الخادم دون تنقية وفحص أمني صارم.
HTML
<!-- Safe static asset path from public whitelist -->
<img src="/images/examples/course-banner.webp"
alt="Verified course banner"
width="480" height="240">
<!-- Never pass raw ../ user input to file endpoints -->يستغل المهاجمون تسلسل النقاط والشرطات
../ في محاولة القفز خارج مجلد الويب العام والوصول إلى ملفات النظام الحساسة أو مفاتيح التشفير وبيانات قواعد البيانات. تفرض خوادم الويب الآمنة حبساً صارماً داخل مجلد الجذر العام Document Root وترفض تلقائياً أي طلب يحاول الخروج عنه.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس كيفية بناء المسارات النسبية داخل المجلد نفسه والمجلدات الفرعية والأب، والفرق بين المسار المطلق والنسبي لجذر الموقع، وقواعد التسمية والحماية الأمنية. الخطوة التالية تستعرض أنواع وصيغ الصور المختلفة المستخدمة في صفحات الويب ومزايا كل منها.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 4 مفهومةأول بطاقة، أول خطوة
- 01 Relative Path المسار النسبي للملف
- مسار يحدد مكان الملف بالاعتماد على موقع المجلد الحالي لصفحة HTML التي تستدعي المورد.
- للمراجعة
- 02 Root-Relative Path المسار النسبي لجذر الموقع
- مسار يبدأ بشرطة مائلة بادئة وينطلق دائماً من المجلد الرئيسي لخادم الويب بغض النظر عن عمق الصفحة.
- للمراجعة
- 03 Absolute URL الرابط المطلق الكامل
- عنوان ويب كامل يتضمن بروتوكول الاتصال واسم النطاق الخادم والمسار الدقيق للوصول للمورد.
- للمراجعة
- 04 Directory Traversal التنقل عبر مسارات الأدلة
- ثغرة أمنية يحاول فيها المهاجم استغلال نقاط الرجوع للخلف للوصول لملفات حساسة خارج مجلد الويب.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 2 مفهومةأول بطاقة، أول خطوة
- 01 URL محدد موقع الموارد
- Uniform Resource Locator
- العنوان القياسي العالمي المستخدم لتحديد مواقع الموارد والملفات على شبكة الإنترنت.
- للمراجعة
- 02 CDN شبكة توزيع المحتوى
- Content Delivery Network
- شبكة خوادم موزعة جغرافياً حول العالم لتسليم ملفات الويب والصور للمستخدمين بأعلى سرعة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/2مهام منجزة
-
اكتب وسم img من صفحة فرعية داخل مجلد يتنقل خطوة للأعلى بالرمز ../ ثم يدخل لمجلد الصور images.
-
أنشئ رابطاً يبدأ بشرطة مائلة / للإشارة المباشرة لمجلد الموارد في جذر الموقع الرئيسي دون أي تشويش.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
2أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.