آدرس دهی فایل یا File Paths
برای اشاره کردن و دسترسی به یک فایل باید آن را آأرس دهی کنیم.
از آدرس دهی در تگ img، تگ a و حتی در زبان های دیگر مانند CSS، JS و ... می توان استفاده کرد.
به صورت کلی به دو صورت می شود آدرس دهی کرد:
- آدرس دهی مطلق (Absolute Path): از ریشه (root) آدرس دهی می شود.
- آدرس دهی نسبی (Relative Path): نسبت به فایلی فعلی (فایلی که در آن کد می نویسیم) آدرس دهی می شود.
آدرس دهی فایل در HTML
در HTML برای دسترسی به فایل های مانند:
- صفحات وب (مثلا در تگ a)
- تصاویر
- فایل های CSS
- فایل های JS
- ...
نیاز به آدرس دهی فایل داریم.
آدرس دهی مطلق - Absolute Path
در آدرس دهی مطلق برای مسیر دهی فایل، باید از ریشه (root) آدرس دهی کنیم.
نکته: در آدرس دهی absolute باید آدرس را به صورت کامل وارد کنیم.
ریشه به معنی بالاترین سطح آدرس دهی در سیستم عامل (محل شروع آدرس دهی) می باشد. مثلا
- در سیستم های ویندوزی نام درایوها (D:\) ریشه است.
- در سیستم های لینوکسی، از /home است.
- در صفحات وب، بدون توجه به پروتکل ها (مانند www یا http یا https) صرفا می توان از نام دامنه استفاده کرد. مانند google.com
در زیر تمام آدرس دهی ها به صورت مطلق (از ریشه) نوشته شده است.
D:\a\img.jpg // سیستم های ویندوزی
home/user/a/img.jpg // سیستم های لینوکسی
https://pnldev.com/a/img.jpg // صفحات وب<img src="https://pnldev.com/pic.jpg">آدرس دهی نسبی - Relative Path
در آدرس دهی نسبی (relative) برای مسیر دهی فایل، باید نسبت به آدرس فعلی فایل (که در آن کد می نویسیم) آدرس دهی کنیم. و نیازی به آدرس دهی از ریشه فایل نیست.
برای آدرس دهی نسبی:
- کارکتر اسلش ( / ) یا بک اسلش ( \ ) (با توجه به نوع سیستم عامل) در آدرس دهی، به ریشه اشاره می کند.
- کارکتر ../ به یک پوشه بالاتر (قبل تر) اشاره می کند.
- اگر مستقیما اسم پوشه یا فایل نوشته شود، مسیر دهی از پوشه فعلی، شروع می شود.
نکته: اگر بخواهیم به چند پوشه بالاتر (مثلا سه پوشه بالاتر) اشاره کنیم باید به همان تعداد از ../ (مثلا ../../../) استفاده کنیم.
| آدرس | مسیر دهی | توضیحات |
| pic.jpg | در کنار سند html -> فایل pic.jpg | - |
| img/pic.jpg | در کنار سند html -> پوشه img -> فایل pic.jpg | - |
| ../img/pic.jpg | در کنار سند html -> یک پوشه بالاتر -> پوشه img -> فایل pic.jpg | استفاده از ../ در آدرس به یک پوشه بالاتر اشاره می کند. |
| ../../img/pic.jpg | در کنار سند html -> یک پوشه بالاتر -> یک پوشه بالاتر -> پوشه img -> فایل pic.jpg | استفاده از ../../ در آدرس به دو پوشه بالاتر اشاره می کند. |
| /pic.jpg | ریشه سایت (pnldev.com) -> فایل pic.jpg | استفاده از / در ابتدای آدرس به ریشه اشاره می کند. |
| /img/pic.jpg | ریشه سایت (pnldev.com) -> پوشه img -> فایل pic.jpg | استفاده از / در ابتدای آدرس به ریشه اشاره می کند. |
اگر دو تگ img زیر را در همین صفحه اجرا کنیم.
فایل فعلی: https://pnldev.com/fa/tutorial/html/file-paths-html
پوشه فعلی: https://pnldev.com/fa/tutorial/html
<img src="pic.jpg"> ---> https://pnldev.com/fa/tutorial/html/pic.jpg
<img src="img/pic.jpg"> ---> https://pnldev.com/fa/tutorial/html/img/pic.jpgکارکتر ../ به یک پوشه بالاتر (قبل تر) اشاره می کند.
با توجه به آدرس پوشه فعلی (https://pnldev.com/fa/tutorial/html):
- یک پوشه بالاتر(../)، به https://pnldev.com/fa/tutorial اشاره می کند.
- دو پوشه بالاتر(../../)، به https://pnldev.com/fa اشاره می کند.
<img src="../img/pic.jpg"> ---> https://pnldev.com/fa/tutorial/img/pic.jpg
<img src="../../img/pic.jpg"> ---> https://pnldev.com/fa/img/pic.jpgکارکتر اسلش ( / ) در آدرس دهی، به ریشه اشاره می کند. ریشه ما در اینجا https://pnldev.com می شود.
<img src="/pic.jpg"> ---> https://pnldev.com/pic.jpg
<img src="/img/pic.jpg"> ---> https://pnldev.com/img/pic.jpg
احسان اسلامی
