مسیر فایل ها در HTML

در اغلب صفحات وب لازم است برای مقاصد متنوعی، مسیر یا نشانی فایل های مختلف درج شود. مسیر فایل، در واقع موقعیت فایل موردنظر را در ساختار دایرکتوری سایت مشخص می‌کند. ایجاد لینک یا ارجاع به یک صفحه وب دیگر داخل سایت، درج تصویر و ارجاع به فایل سی‌اس‌اس یا جاوااسکریپت خارجی از جمله این موارد هستند. با توجه به این موضوع، داشتن درک مناسب و آشنایی با نحوه درج مسیر فایل ها در HTML از اهمیت ویژه‌ای برخوردار است.

بیشتر بخوانید: ارجاع به استایل شیت های خارجی با کمک المان <link> در HTML

انواع مسیرهای فایل در HTML

در اچ‌تی‌ام‌ال از دو نوع مسیر یا نشانی متداول برای تعیین موقعیت صفحه های وب، فایل های تصاویر و … استفاده می‌شود: مسیرهای مطلق و مسیرهای نسبی. در ادامه با مفهوم و جزئیات این مسیرها بیشتر آشنا می‌شوید.

مسیر یا نشانی های مطلق

مسیر مطلق (یا Absolute) در واقع نشانی (یا URL) کامل صفحه یا فایل موردنظر است. در مثال زیر نحوه درج یک تصویر با کمک المان <img> را مشاهده می‌کنید که در آن مسیر فایل تصویر به صورت مطلق به عنوان مقدار برای خصوصیت src ثبت شده است.

<img src="https://www.example.com/images/sample.jpg" alt="Sample image">

بیشتر بخوانید: نحوه درج تصویر در HTML – المان <img>

مثال زیر نیز لینکی را نمایش می‌دهد که با یک نشانی مطلق (به عنوان مقدار خصوصیت href) به یک صفحه وب اشاره می‌کند.

<a href="https://example.com/about.html">Link text</a>

بیشتر بخوانید: نحوه ایجاد پیوند یا لینک در HTML – المان <a>

مسیر یا نشانی های نسبی

مسیر نسبی (یا Relative) موقعیت فایل موردنظر را براساس موقعیت فایل یا صفحه وب فعلی مشخص می‌کند. در مثال زیر، مسیر فایل تصویر به صورت نسبی درج شده است. با این فرض که فایل sample.jpg در همان دایرکتوری یا فولدر فعلی است (منظور فولدری است که فایل سند یا صفحه وب جاری شامل المان زیر در آن قرار دارد).

<img src="sample.jpg" alt="Sample image">

برای مثال اگر index.html در دایرکتوری www، فایل سند HTML ای باشد که المان <img> فوق در آن قرار دارد با این شرط که فایل sample.jpg نیز در همین دایرکتوری www باشد مسیر این فایل به درستی درج شده است.

مثال زیر نیز لینکی را نمایش می‌دهد که با یک نشانی نسبی به صفحه وب about.html در دایرکتوری فعلی اشاره می‌کند.

<a href="about.html">Link text</a>

حالت های مختلف در مسیرهای نسبی

در ادامه، حالت‌های مختلف مسیرهای نسبی را مورد بررسی قرار می‌دهیم. در هر حالت برای درک بهتر مفهوم مسیر، مثال‌هایی با نمایش ساختار درختی دایرکتوری ها و فایل ها آورده شده است.

فراموش نکنید در تمام مثال ها فرض بر اینست که صفحه وب فعلی همان فایل index.html است و در این صفحه می‌خواهیم به یک فایل با نام sample.jpg اشاره کنیم. این حالت‌ها برای ارجاع به هر نوع فایل دیگری نظیر صفحات وب و فایل های CSS و JavaScript نیز صادق است.

حالت اول: برای ارجاع به فایلی که در همان دایرکتوری صفحه HTML قرار دارد کافیست نام فایل درج شود. به عنوان مثال sample.jpg به فایلی با همین نام که در دایرکتوری فعلی قرار دارد اشاره می‌کند.

حالت دوم: برای ارجاع به فایلی که در یک زیردایرکتوری قرار دارد لازم است نام زیردایرکتوری همراه با یک / پیش از نام فایل درج شود. به عنوان مثال اگر فایل sample.jpg در دایرکتوری images داخل دایرکتوری صفحه فعلی HTML قرار دارد مسیر images/sample.jpg به این فایل اشاره می‌کند.

به عنوان مثالی دیگر مسیر images/2022/sample.jpg به فایل sample.jpg در دایرکتوری 2022 اشاره می‌کند که این دایرکتوری نیز در دایرکتوری images قرار دارد. دایرکتوری images هم داخل همان دایرکتوری است که فایل صفحه وب فعلی را دربرگرفته است.

حالت سوم: برای ارجاع به فایلی که در یک دایرکتوری سطح بالاتر قرار دارد لازم است دو نقطه (به صورت ..) همراه با یک / در ابتدای مسیر درج شود. به عنوان مثال ../sample.jpg به فایلی با نام sample.jpg اشاره می‌کند که در دایرکتوری والد دایرکتوری فعلی قرار گرفته است.

به عنوان مثالی دیگر اگر دایرکتوری images در دایرکتوری والد دایرکتوری فعلی قرار داشته باشد مسیر ../images/sample.jpg به فایل sample.jpg در دایرکتوری images اشاره می‌کند.

چند نکته در مورد مسیر فایل ها در HTML

در سیستم فایل ویندوز از بک اسلش (یا \) برای مسیرهای فایل استفاده می‌شود (مانند c:\images\sample.jpg). با این حال همواره برای تعیین مسیر فایل ها در HTML (حتی اگر سیستم عامل شما ویندوز است) لازم است از فوروارد اسلش (یا /) استفاده کنید.

از مزایای مسیرهای نسبی در مقایسه با مسیرهای مطلق می‌توان به کوتاهی مسیر، خوانایی و درک آسان‌تر مسیرهای موجود در کد اشاره کرد (فراموش نکنید گاهی اوقات استفاده از مسیرهای نسبی پیچیده می‌تواند درک محل فایل را به خصوص برای افراد مبتدی دشوار کند). از سوی دیگر مسیرهای نسبی صرفا به ارجاعات داخلی محدود می‌شوند. برای مثال شما نمی‌توانید به یک فایل CSS که روی سایتی دیگر میزبانی می‌شود با کمک یک مسیر نسبی ارجاع بدهید. همچنین عدم توجه به موقعیت فایل ها هنگام جابجایی آن‌ها می‌تواند باعث بروز اشکال در مسیرهای نسبی شود.