HTML

HTML File Path
مسار الملفات في لغة HTML

سوف تتعلم في هذا الدرس كيفية الحصول على عناوين ( مسارات ) الملفات وكيفية ربطها بملفات HTML، سواء كانت المسارات internal محلية أو من external سيرفر خارجي. 

التاريخ

03 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

7065

المواضيع

12
الشروحات chevron_left HTML File Path chevron_left HTML

HTML File Path
مسار الملفات في لغة HTML

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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 الخادم. 
    معلومات تهمك
    • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
    • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
    مشاركة
    0
    0
    0
    0
    عدد المشاركات
    هل هذه المعلومات نالت إعجابك ؟
    0
    0
    عدد التقييمات