آدرس دهی فایل یا File Paths
برای اشاره کردن و دسترسی به یک فایل باید آن را مسیردهی کنیم.
به صورت کلی به دو صورت می شود آدرس دهی کرد:
- آدرس دهی مطلق (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
