آموزش مسیرهای فایل در HTML به زبان ساده
مسیر فایل برای نشان دادن مکان فایل در یک پوشه وب سایت استفاده می شود. مسیرهای فایل مانند آدرس فایل برای مرورگر وب هستند. با کمک مسیرهای فایل می توانیم به هر نوع منبع خارجی مانند تصاویر، فایل ها، فایل CSS، فایل جاوا اسکریپت، ویدئو و …. لینک دهیم تا به فایل HTML اضافه شود.
ویژگی های src یا href به مقداری نیاز دارند تا بتوانند هر منبع خارجی را به سند پیوند دهند.
موارد زیر انواع مختلف برای تعیین مسیرهای فایل را نشان می دهند:
- <img src=”picture.jpg”> : نشان می دهد که تصویر picture.jpg در همان پوشه صفحه جاری قرار دارد.
- <img src=”images/picture.jpg”> : نشان می دهد که تصویر picture.jpg در پوشه images قرارگرفته در پوشه حاوی صفحه فعلی قرار دارد.
- <img src=”/images/picture.jpg”> : نشان می دهد که تصویر picture.jpg در پوشه images در ریشه سایت فعلی قرار دارد.
- <img src=”../picture.jpg”>: نشان می دهد که تصویر picture.jpg در پوشه ای قرار گرفته که یک سطح از پوشه ی حاوی صفحه فعلی بالاتر است.
مسیرهای فایل برای پیوند دادن صفحات وب به سندهای خارجی نیز اسفاده می شود. سندهای خارجی مانند:
- صفحات وب
- تصاویر
- صفحات سبک
- جاوا اسکریپت
دو نوع مسیر فایل وجود دارد:
- مسیرهای فایل مطلق
- مسیرهای فایل نسبی
مسیرهای فایل مطلق
در مسیر فایل مطلق آدرس 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 مستقل می شود.
