HTML

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

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

التاريخ

03 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

6247

المواضيع

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

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 File Path
    HTML File Path

    مسار ملف HTML

    File
    File

    ملف

    Path
    Path

    مسار

    Images
    Images

    صور

    Folder
    Folder

    مجلد

    Pathes
    Pathes

    مسارات

    Backslash
    Backslash

    شرطة مائلة للخلف

    Double Dot
    Double Dot

    نقطة مزدوجة

    Path with files
    Path with files

    المسار مع الملفات

    Web Pages Files
    Web Pages Files

    ملفات صفحات الإنترنت

    Images Files
    Images Files

    ملفات الصور

    Style Sheets Files
    Style Sheets Files

    ملفات أوراق الأنماط

    JavaScript Files
    JavaScript Files

    ملفات الجافا سكريبت

    Audio Files
    Audio Files

    ملفات الصوت

    Videos Files
    Videos Files

    ملفات الفيديوهات

    اختصارات الدرس
    HTML
    HTML

    Hypertext Markup Language

    لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
    CSS
    CSS

    Cascading Style Sheets

    صفحات التنسيق المتتالية
    JS
    JS

    Java Script

    لغة برمجة موجهة للكائنات
    معلومات تهمك
    • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
    • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
    مشاركة
    0
    0
    0
    0
    عدد المشاركات
    هل هذه المعلومات نالت إعجابك ؟
    0
    0
    عدد التقييمات

    لديك استفسار ؟

    يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.