في هذا الدرس 3تصفّح المواضيع
HTML File Paths
مسارات الملفات في لغة HTML
HTML File Paths مسارات الملفات في لغة HTML
تُستخدم مسارات الملفات في HTML لتحديد مواقع الملفات والموارد مثل الصور والفيديوهات والسكربتات والمستندات الأخرى داخل مشروع الويب. هذه المسارات تُمكِّن المتصفح من عرض المحتوى بصورة صحيحة وتنفيذ المهام المطلوبة بكفاءة.
عادةً ما يُنظَّم مشروع الويب داخل مجلد يحتوي على ملفات HTML ومجلدات مخصصة لملفات CSS و JavaScript وغيرها.
لتحديد أو إدراج ملف في صفحة ويب، يجب معرفة مصدره بدقة. على سبيل المثال، الصيغة [<img src="image-path" alt="description">] تُستخدم لإدراج صورة، حيث يُكتب مسار الصورة في خاصية [src].
أنواع مسارات الملفات نوعان:
- المسارات النسبية [Relative File Paths]: تُحل بالاعتماد على عنوان الأساس للمستند، وقد تشير إلى المجلد الحالي أو مجلد آخر.
مثال: images/mountain.jpg.
يشير هذا المسار إلى أن المتصفح سيقرأ الملف من داخل المجلد [images] الموجود بجانب ملف [index.html].
- المسارات المطلقة [Absolute File Paths]: تحدد عنوان المورد كاملًا، سواء كان في الموقع نفسه أو في موقع آخر. تُحدد موقع ملف أو مورد على الإنترنت باستخدام عنوان URL كامل.
مثال: https://www.closetag.com/images/mountain.jpg
يحدد هذا العنوان المصدر كاملًا؛ كونه خارجيًا أو داخليًا يعتمد على الموقع الذي تستخدمه فيه.
Relative File Paths
يشير المثال إلى أن المتصفح سيقرأ الملف من داخل المجلد [images] الموجود بجوار ملف [index.html].
<img src="images/mountain.jpg">Absolute File Paths
يحدد عنوان الصورة كاملًا؛ قد يكون في الموقع نفسه أو في موقع آخر.
<img src="https://www.closetag.com/images/mountain.jpg">
Relative File Path in HTML
المسار النسبي لملف في HTML
Relative File Path in HTML المسار النسبي لملف في HTML
المسار النسبي Relative File Path: وهو عبارة عن رابط يشير إلى موقع الملف، بغض النظر عن نوع هذا الملف. يحدد المسار موقع المورد بالنسبة لعنوان الأساس، وهو عادةً عنوان الصفحة ويمكن تغييره بعنصر base. يمكن أن يشير المسار النسبي إلى موقع المجلد الذي يحتوي على ملف الصورة في الحالات التالية:
- المجلد الداخلي [Internal Folder]: إذا كان المجلد داخليًا، أي أنه داخل مجلد المشروع الرئيسي، نكتب اسم المجلد قبل اسم الملف هكذا: [images/mountain.jpg].
- المجلد الخارجي [Outside Folder]: إذا كان المجلد الذي ترغب في الوصول إليه موجودًا خارج المجلد الذي تحتويه صفحة الويب، يجب استخدام [../] للرجوع إلى المجلد الأعلى في الهيكل. كل [../] تعني الرجوع خطوة واحدة للخارج من المجلد الحالي.
على سبيل المثال، للوصول إلى مجلد images الموجود داخل المجلد الأعلى، استخدم ../images/mountain.jpg. - بدون مجلد [Without Folder]: إذا كان الملف بجوار صفحة الويب، نكتب اسم الملف مباشرة مثل: [mountain.jpg] بدون ذكر أسماء المجلدات.
- المجلد الرئيسي [Home Folder]: يمكن إضافة علامة slash [/] في بداية المسار للإشارة إلى جذر مسار URL على الأصل الحالي؛ لا يعني ذلك جذر القرص أو مجلد المشروع على الخادم. مثال: [/images/mountain.jpg].
Image in the Same Directory
المثال يوضح أن الصورة موجودة في نفس المجلد الذي تحتويه صفحة الويب مباشرة.
<img src="mountain.jpg">Internal Folder
الصورة موجودة داخل مجلد يسمى images بجوار ملف HTML.
<img src="images/mountain.jpg">Home Folder
يبدأ /images/mountain.jpg من جذر مسار URL على الأصل الحالي. يسمى مرجعًا بمسار مطلق absolute-path reference، لكنه ليس URL مطلقًا كاملًا لأنه لا يتضمن المخطط والمضيف.
<img src="/images/mountain.jpg">Outside Folder
الصورة موجودة في مجلد أعلى من المجلد الحالي الذي يحتوي على ملف HTML، ويتم الوصول إليها عن طريق الرجوع خطوة واحدة للخلف في المسار.
<img src="../mountain.jpg">Two Levels Up
الصورة موجودة في مجلد أعلى بمستويين من المجلد الحالي لملف الويب. يتم الرجوع خطوتين للخلف في تسلسل المجلدات للوصول إلى موقع الصورة.
<img src="../../mountain.jpg">
Absolute File Path in HTML
المسار المطلق لملف في HTML
Absolute File Path in HTML المسار المطلق لملف في HTML
يسمى [Absolute HTML File Path] بالمسار المطلق، وهو يشير إلى رابط [URL] كامل للملف سواء كان صورة أو أي نوع آخر من الملفات، وقد يشير إلى الموقع نفسه أو إلى موقع آخر. في المثال التالي يتكون من:
- HTTPS: بروتوكول نقل البيانات.
- Domain Name: اسم النطاق.
- Folder Name: اسم المجلد الذي يحتوي على الملفات مثل الصور أو الفيديوهات.
- File Name: اسم ملف في هذا المثال مثل [mountain.jpg]؛ لا يشترط أن ينتهي كل URL باسم ملف أو امتداد.
على سبيل المثال، الرابط التالي هو مسار مطلق لملف صورة: [https://www.example.com/images/mountain.jpg].
في هذا المثال، [https] هو بروتوكول نقل البيانات، و [www.example.com] هو اسم النطاق، [images] هو اسم المجلد،
و [mountain.jpg] هو اسم الملف.
المسار في URL ليس بالضرورة نسخة من مجلدات القرص؛ قد يعالجه نظام توجيه وينتج المورد ديناميكيًا.
Absolute Image File Path
رابط URL كامل لصورة من النوع المطلق absolute.
https://www.closetag.com/images/mountain.jpgImage With Absolute URL
تحديد مسار الصورة من النوع المطلق absolute.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات15
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML File Path مسار ملف HTML
- للمراجعة
- 02 File ملف
- للمراجعة
- 03 Path مسار
- للمراجعة
- 04 Images صور
- للمراجعة
- 05 Folder مجلد
- للمراجعة
- 06 Pathes مسارات
- للمراجعة
- 07 Backslash شرطة مائلة للخلف
- للمراجعة
- 08 Double Dot نقطة مزدوجة
- للمراجعة
- 09 Path with files المسار مع الملفات
- للمراجعة
- 10 Web Pages Files ملفات صفحات الإنترنت
- للمراجعة
- 11 Images Files ملفات الصور
- للمراجعة
- 12 Style Sheets Files ملفات أوراق الأنماط
- للمراجعة
- 13 JavaScript Files ملفات الجافا سكريبت
- للمراجعة
- 14 Audio Files ملفات الصوت
- للمراجعة
- 15 Videos Files ملفات الفيديوهات
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- صفحات التنسيق المتتالية
- للمراجعة
- 03 JS JS
- Java Script
- لغة برمجة موجهة للكائنات
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.