مسیرهای فایل در HTML
قبلاً میتوانید صفحه با تیتر، پاراگراف و کامنت بنویسید. سایت واقعی معمولاً در یک فایل تنها زندگی نمیکند. تصویر، صفحهٔ دیگر، استایل و اسکریپت در پوشههای کنار HTML مینشینند — و HTML باید درست به آنها اشاره کند. این اشارهها مسیر فایل هستند. اگر مسیر غلط باشد، فایل میتواند روی دیسک باشد ولی مرورگر هنوز تصویر شکسته یا لینک مرده نشان دهد.
مسیر فایل چیست؟
مسیر فایل آدرسی است که مرورگر برای گرفتن فایل دیگر استفاده میکند. معمولاً آن را در ویژگیهایی مثل src (تصویر، اسکریپت، رسانه) و href (لینک، استایل، بسیاری از منابع مرتبط) مینویسید. مسیر تزئین نیست؛ دستور است: «اینجا را ببین.» اگر دستور غلط باشد، درخواست شکست میخورد حتی وقتی تگها درست به نظر میرسند.
پاسخ مستقیم
وقتی فایل هدف همراه پوشههای پروژه جابهجا میشود از مسیر نسبی استفاده کنید — مثلاً images/logo.png از صفحهای در همان پوشهٔ والد، یا ../images/logo.png از صفحهای یک پوشه عمیقتر. وقتی سایت میزبانی شده و همهٔ صفحات باید یک مسیر پایدار از ریشه داشته باشند، مسیر ریشه-مطلق با / مناسب است. وقتی فایل روی میزبان یا CDN دیگر است از URL کامل (https://…) استفاده کنید. مبتدی اول مسیر نسبی را مسلط شود، چون تمرین محلی به آن وابسته است.
نسبی در برابر مطلق در یک نگاه
📊 مقایسهٔ انواع مسیر
| نوع | شروع از | مثال | بهترین زمان |
|---|---|---|---|
| نسبی | پوشهٔ فایل HTML فعلی | images/photo.jpg | فایلهای پروژه با هم در پوشهها جابهجا میشوند |
| ریشه-مطلق | ریشهٔ وبسایت | /images/photo.jpg | صفحات زیاد روی یک سایت میزبانیشده به یک مسیر پایدار نیاز دارند |
| URL کامل | پروتکل + دامنه | https://cdn.example.com/a.png | فایل روی میزبان یا CDN دیگر است |
نقشهٔ یک پروژهٔ کوچک
پوشهای به نام project را تصور کنید. داخلش دارید:
index.html(صفحهٔ خانه)about.html(همان پوشهٔ صفحهٔ خانه)- پوشهٔ
imagesباlogo.png - پوشهٔ
pagesباcontact.html
عادت مهم این است: قبل از نوشتنsrcیاhrefهمیشه بپرسید کدام فایل HTML را ویرایش میکنید. همان تصویر از صفحات مختلف مسیر نسبی متفاوت میخواهد.
مسیر نسبی از پوشهٔ پروژه
از index.html یا about.html، پوشههای images و pages فرزند هستند. برای رسیدنشان به ../ نیاز ندارید.
مسیر نسبی از index.html
html<img src="images/logo.png" alt="لوگوی سایت">
<a href="pages/contact.html">تماس</a>
<a href="about.html">درباره</a>چرا این مقدارها درستاند
images/logo.pngیعنی «وارد پوشهٔimagesکنار این HTML شو، بعدlogo.pngرا باز کن»pages/contact.htmlیعنی «واردpagesشو، بعدcontact.htmlرا باز کن»about.htmlیعنی «فایل دیگری در همان پوشهٔ صفحهٔ فعلی»- متن
altمسیر نیست؛ متن دسترسپذیر است وقتی تصویر نشان داده نمیشود
اگر لوگو در مرورگر نیست، املا، نام واقعی پوشه، و اینکه HTML را در همان پوشهای که فکر میکنید ذخیره کردهاید بررسی کنید.
مسیر نسبی از زیرپوشه
contact.html داخل pages/ است. از آنجا images/ فرزند pages/ نیست؛ کنار pages/ زیر project/ نشسته. باید با ../ یک سطح بالا بروید و بعد وارد images/ شوید.
مسیر نسبی از pages/contact.html
html<img src="../images/logo.png" alt="لوگوی سایت">
<a href="../index.html">خانه</a>
<a href="../about.html">درباره</a>خواندن ../
../یعنی «برو به پوشهٔ والد»../images/logo.pngیعنی «برو بالا بهproject/، بعد برو داخلimages/logo.png»../index.htmlیعنی «برو بالا بهproject/، بعدindex.htmlرا باز کن»- نوشتن
images/logo.pngازcontact.htmlدنبالpages/images/logo.pngمیگردد که در این نقشه وجود ندارد
همین یک اشتباه — فراموش کردن../از زیرپوشه — بخش بزرگی از گزارشهای «تصویر شکسته» در پروژههای مبتدی را میسازد.
مسیر ریشه-مطلق و URL کامل
مسیر ریشه-مطلق با / شروع میشود و روی سرور واقعی از ریشهٔ سایت حل میشود، نه از پوشهٔ فعلی. URL کامل پروتکل و دامنه دارد و برای فایل شخص ثالث عادی است. مسیر ریشه-مطلق وقتی مفید است که صفحات زیاد روی سایت میزبانیشده یک مسیر پایدار بخواهند.
مسیر ریشه و URL کامل
html<img src="/images/logo.png" alt="لوگوی سایت">
<img src="https://example.com/images/logo.png" alt="لوگوی سایت">
<link rel="stylesheet" href="/styles/main.css">فایل محلی در برابر ریشهٔ میزبانیشده
وقتی HTML را مستقیم از دیسک باز میکنید (file://…)، اغلب ریشهٔ واقعی وبسایت وجود ندارد. مسیری مثل /images/logo.png ممکن است مثل سرور با پوشهٔ رایانه جور نشود. برای تمرین مبتدی، مسیر نسبی مطابق پوشههای واقعی را ترجیح دهید. بعد از میزبانی، مسیر ریشه-مطلق بین صفحات پایدارتر میشود.
تمرین: مسیر از روی نقشهٔ پوشه
پوشهٔ shop شامل اینهاست:
home.html- پوشهٔ
assetsباhero.jpg - پوشهٔ
helpباfaq.html
در ویرایشگر این کارها را بکنید:
- در
home.htmlیکimgبگذارید کهhero.jpgرا با مسیر نسبی بار کند. - در
help/faq.htmlیکimgبگذارید که همان فایل را با../بار کند. - از
faq.htmlیک لینک نسبی بهhome.htmlبسازید. - هر دو صفحه را در مرورگر باز کنید و تصویر و لینک را تأیید کنید.
- عمداً یک مسیر را خراب کنید، تازه کنید، شکست را ببینید، بعد درستش کنید — این بازخورد سریعتر از خواندنِ خالی چشم را آموزش میدهد.
پاسخهای نسبی مورد انتظار: ازhome.htmlمقدارassets/hero.jpg؛ ازfaq.htmlمقدارهای../assets/hero.jpgو../home.html.
اشتباهات مسیری که صفحه را میشکنند
- نوشتن
images/logo.pngاز زیرپوشه وقتی مسیر درست../images/logo.pngاست - غلط املایی نام فایل یا پوشه، یا ناهماهنگی حروف بزرگ/کوچک روی میزبانهایی که
Logo.PNGوlogo.pngرا جدا میدانند - استفاده از
\ویندوز در مسیر وب — در ویژگیهای HTML ترجیح با/است - گذاشتن مسیر دیسک مثل
C:\site\img.pngدرsrcیاhrefبرای صفحهٔ وب عادی - کپی مسیر ریشه
/images/...در پروژهای که فقط بهصورت فایل محلی باز میشود و انتظار رفتار سایت میزبانیشده - لینک به
contact.htmlوقتی فایل واقعاً درpages/contact.htmlاست - جابهجایی پوشهها در Explorer/Finder بدون بهروز کردن همهٔ مسیرهایی که به چیدمان قبلی اشاره میکردند
خلاصه
- مسیر فایل به مرورگر میگوید فایلهای پیوندشده برای
src،hrefو ویژگیهای مشابه کجا هستند - مسیر نسبی از پوشهٔ فایل HTML فعلی حل میشود
../در مسیر نسبی یک پوشه بالا میرود؛ وقتی هدف بالای فایل فعلی است از آن استفاده کنید- مسیر ریشه-مطلق با
/شروع میشود؛ URL کامل پروتکل و دامنه دارد - سبک مسیر را با چیدمان خود جور کنید: نسبی برای تمرین محلی، ریشه/URL وقتی مدل میزبانی لازم دارد
- مسیر شکسته یکی از رایجترین علتهای «عجب، تصویر/لینک کار نمیکند» است
- مسیر را همیشه از فایلی که ویرایش میکنید تصمیم بگیرید، نه از حافظهٔ صفحهٔ دیگر
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود