HTML File Path
مسار الملفات في لغة HTML
سوف تتعلم في هذا الدرس كيفية الحصول على عناوين ( مسارات ) الملفات وكيفية ربطها بملفات HTML، سواء كانت المسارات internal محلية أو من external سيرفر خارجي.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML File Path
مسار الملفات في لغة HTML
</>
HTML file path
مقدمة عن مسار الملفات في لغة HTML
HTML File Path هو طريقة الإشارة إلى الصور والفيديوهات وأي ملفات أخرى داخل ملف HTML، بناء على تقسيمة أو هيكلة المشروع أو مجلد المشروع (مشروع الويب).
أي مشروع ويب يكون بداخل مجلد كعملية تنظيمية ويكون بداخله ملفات HTML files وبجانبهم folders مجلدات، فمثلاً جميع ملفات CSS تكون بداخل فولدر css وملفات JavaScript بداخل مجلد js وهكذا...
يجب أن تكون الصور بداخل مجلد images، ولكي نحدد أو نحمل أي ملف أو أي صورة على موقعنا يجب علينا التعرف على مسارات الملفات.
أنواع المسارات:
- relative file paths المسارات التي يتم استخدامها من مجلدات أو مسارات بجانب ملف HTML.
مثال: images/1606050835_18202.png
يشير هذا المسار إلى أن المتصفح سيقرأ الملف من داخل فولدر images بجوار ملف index.html
- Absolute File Paths المسارات التي يتم استخدامها من خوادم خارجية أو من خلال وضع رابط الملف.
مثال: https://www.closetag.com/images/materials/1606050835_18202.png
يشير هذا المسار إلى أن الملف من server خادم أونلاين خارجي.
Relative file paths
الإشارة إلى أن المتصفح سيقرأ الملف من داخل فولدر images بجوار ملف index.html
<img src="images/1606050835_18202.png">
Absolute file paths
الإشارة إلى أن الملف من server خادم أونلاين خارجي.
<img src="https://www.closetag.com/images/materials/1606050835_18202.png">
ملاحظة
</>
Absolute HTML file path
مسار ملف HTML المطلق
يسمى Relative HTML File Path بالمسار النسبي وهو عبارة عن رابط الملف سواء كان صورة أو أي ملف وذا الرابط هو عبارة عن رابط خارجي ويتكون من:
- HTTPS بروتوكول نقل البيانات.
- Domain Name أسم النطاق.
- Folder Name أسم المجلد الزي يحمل الملفات مثل الصور والفيديوهات.
- File Name أسم الملف وهو يتكون من جزئين أسم الملف والامتداد الخاص بالملف علي سبيل المثال kids.jpg.
Absolute HTML file path
رابط صورة كامل من النوع absolute.
https://www.closetag.com/images/mountain.jpg
Absolute image
تحديد مسار الصورة من النوع absolute.
<img src="https://www.closetag.com/images/mountain.jpg" alt="Mountain">
</>
Relative HTML file path
مسار ملف HTML النسبي
يسمى relative HTML file path بالمسار النسبي وهو عبارة عن رابط الملف مهما كان نوع هذا الملف.
رابط الملف هو مكان الملف بجوار صفحة الويب، ويتبع مكان المجلد الذي يحتوي على ملف الصورة لأحد الحالات التالية:
- relative folder يكون المجلد داخلي أي أنه بدخل مجلد المشروع الرئيسي، في هذه الحالة نكتب اسم المجلد قبل اسم الملف: images/kids.jpg
- outside folder يكون المجلد خارج مجلد المشروع أو خارج المجلد المتواجد بداخله صفحة الويب، في هذه الحالة نكتب علامتين / slash، حيث تعني كل علامة / الرجوع لخارج المسار الحالي خطوة واحدة ليصبح بهذا الشكل: images/kids.jpg/..
- without folder يكون الملف بجوار صفحة الويب، في هذه الحالة نكتب اسم الملف مباشرة: kids.jpg بدون أسماء المجلدات.
- root folder يمكن إضافة علامة / slash في بداية المسار للإشارة إلى المجلد الرئيسي للمشروع، ثم إلى الصورة داخل المجلد root الرئيسي: images/kids.jpg/
Without Folder
الصورة بجوار صفحة الويب مباشرة.
<img src="picture.jpg">
Relative folder
الصورة موجودة داخل مجلد folder بجوار ملف HTML.
<img src="images/picture.jpg">
Root folder
صورة خارج ملف HTML ضمن المجلد الرئيسي للمشروع الذي هو root folder المجلد الأول.
<img src="/images/picture.jpg">
Outside folder
الصورة خارج المسار الحالي لملف الويب والرجوع للخلف بخطوة واحدة.
<img src="../picture.jpg">
Outside folder
الصورة خارج المسار الحالي لملف الويب، والرجوع لخطوتين، أي يذهب لخارج المسار الحالي بخطوة ثم يخرج منه مرة ثانية أيضا بخطوة.
<img src="../../picture.jpg">
ملاحظة
- يجب مراعاة وضع المسار الصحيح عند استدعاء الصورة داخل صفحة HTML الخاصة بك، مع مراعاة وضع اسم folder المجلد واسم الصورة بشكل صحيح. كما يجب الانتباه إلى أن حالة الحروف حساسة في لغة HTML عند كتابة مسار الملف.
- يُوصي جميع مطوري الويب استخدام مسارات الملفات النسبية، وذلك لكي تَكونَ جميع الملفات الخاصة بك مستقلة تماماً عن ملفات URL التي تتعامل دائماُ مع server الخادم.
مسار ملف HTML
ملف
مسار
صور
مجلد
مسارات
شرطة مائلة للخلف
نقطة مزدوجة
المسار مع الملفات
ملفات صفحات الإنترنت
ملفات الصور
ملفات أوراق الأنماط
ملفات الجافا سكريبت
ملفات الصوت
ملفات الفيديوهات
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنتCascading Style Sheets
صفحات التنسيق المتتاليةJava Script
لغة برمجة موجهة للكائنات
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
