آموزش مسیرهای فایل در HTML به زبان ساده

رتبه: 0 ار 0 رای sssss
HTML
نویسنده: میلاد حیدری زمان مطالعه 2 دقیقه
Banner Image

مسیر فایل برای نشان دادن مکان فایل در یک پوشه وب سایت استفاده می شود. مسیرهای فایل مانند آدرس فایل برای مرورگر وب هستند. با کمک مسیرهای فایل می توانیم به هر نوع منبع خارجی مانند تصاویر، فایل ها، فایل CSS، فایل جاوا اسکریپت، ویدئو و …. لینک دهیم تا به فایل HTML اضافه شود.

ویژگی های src یا href به مقداری نیاز دارند تا بتوانند هر منبع خارجی را به سند پیوند دهند.

موارد زیر انواع مختلف برای تعیین مسیرهای فایل را نشان می دهند:

  1. <img src=”picture.jpg”> : نشان می دهد که تصویر picture.jpg در همان پوشه صفحه جاری قرار دارد.
  2. <img src=”images/picture.jpg”> : نشان می دهد که تصویر picture.jpg در پوشه images قرارگرفته در پوشه حاوی صفحه فعلی قرار دارد.
  3. <img src=”/images/picture.jpg”> : نشان می دهد که تصویر picture.jpg در پوشه images در ریشه سایت فعلی قرار دارد.
  4. <img src=”../picture.jpg”>: نشان می دهد که تصویر picture.jpg در پوشه ای قرار گرفته که یک سطح از پوشه ی حاوی صفحه فعلی بالاتر است.

مسیرهای فایل برای پیوند دادن صفحات وب به سندهای خارجی نیز اسفاده می شود. سندهای خارجی مانند:

  1. صفحات وب
  2. تصاویر
  3. صفحات سبک
  4. جاوا اسکریپت

دو نوع مسیر فایل وجود دارد:

  1. مسیرهای فایل مطلق
  2. مسیرهای فایل نسبی

مسیرهای فایل مطلق

در مسیر فایل مطلق آدرس URL به صورت کامل مشخص می شود.

مثال

<!DOCTYPE html>

<html>

<body>

<h2>Using a Full URL File Path</h2>

<img src=”https://www.javatpoint.com/images/nature-1.jpg” alt=”image” style=”width:300px”>

</body>

</html>

مسیرهای فایل نسبی

مسیر فایل نسبی، مکان فایلی را مشخص می کند که با مکان صفحه جاری ارتباط و وابستگی دارد.

مثال

مثال زیر مسیر فایل قرار گرفته در پوشه images واقع در ریشه سایت فعلی را نشان می دهد.

<!DOCTYPE html>

<html>

<body>

<h2>Using a Relative File Path</h2>

<img src=”/images/nature-2.jpg” alt=”Mountain” style=”width:300px”>

</body>

</html>

مثال

مثال زیر مسیر فایل قرار گرفته در پوشه images واقع در پوشه حاوی صفحه جاری را نشان می دهد.

<!DOCTYPE html>

<html>

<body>

<h2>Using a Relative File Path</h2>

<img src=”images/nature-3.jpg” alt=”Mountain” style=”width:300px”>

</body>

</html>

مثال

مثال زیر مسیر فایل قرار گرفته در پوشه images واقع در یک سطح بالاتر از پوشه حاوی صفحه جاری را نشان می دهد.

<!DOCTYPE html>

<html>

<body>

<h2>Using a Relative File Path</h2>

<img src=”../images/nature4.jpg” alt=”Mountain” style=”width:300px”>

</body>

</html>

نکات مهم برای مسیر فایل

  • همیشه به یاد داشته باشید که از مقدار URL، نام سند و نام تصویر مناسبی استفاده کنید در غیر این صورت فایل در صفحه وب نمایش داده نمی شود.
  • سعی کنید از مسیرهای فایل نسبی استفاده کنید، در نتیجه کد شما از URL مستقل می شود.
profile name
میلاد حیدری

بخندید کتاب بخونید و خوب باشید تا جامعه مون به آرامش برسه. لطفا ! هر سوالی دارید در بخش نظرات مطرح کنید. ما یا سایر هموطنان عزیز پاسخ خواهیم داد. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید.

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه
آموزش برنامه نویسی سی پلاس پلاس
آموزش برنامه نویسی سی پلاس پلاس
قیمت محصول 230,000 تومان 250,000
ادامه مطلب

دیدگاهتان را بنویسید

1 2 3 4 5

0 نظر درباره «آموزش مسیرهای فایل در HTML به زبان ساده»

    هنوز نظری برای این بخش ثبت نشده است
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید