چگونگی نحوه آدرس دهی به فایل در html

امروزتصمیم گرفتم در مورد موضوع مهمی که در طراحی وب مورد استفاده قرار می‌گیرد صحبت کنم. آدرس دهی به فایل در html یکی از موارد مهم در طراحی وب است که حتما شما باید به آن توجه کنید، شاید به این فکر کنید که آدرس یک فایل چقدر میتونه مهم باشه و اصلا چه چیزی هست که بخواهیم بهش توجه کنیم؟

درسته که آدرس دهی به فایل در html کار ساده‌ای بنظر میاد اما باید بدانید که همین کار ساده به روش‌های مختلف از آن استفاده می‌کنند.

آدرس‌دهی به فایل در html چیست؟

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

آدرس‌دهی به فایل در بخش‌های زیر کاربرد دارد:

صفحات وب
تصویر
استایل
جاوا اسکریپت

آدرس‌دهی به فایل درhtml به دو روش انجام می‌شود:

آدرس‌دهی مطلق (absolute)
آدرس‌دهی نسبی (relative)

معرفی مقاله ای دیگر از html: چطور میتوانم یک لیست کشویی وابسته به هم در html ایجاد کنم؟

آدرس‌دهی مطلق

در روش مطلق، آدرس یک فایل به صورت کامل و ثابت ایجاد می‌شود یعنی اینکه آدرس اون فایل ثابت است و تغییری نمی‌کند. در این روش لازم نیست که حتما فایل را دانلود کنیم فقط کافیست که آدرسش را وارد کنیم به همین دلیل سرعت بالایی در این روش وجود دارد.

مثال:

<!DOCTYPE html>
<html>
<body>
<h2>Using a Full URL File Path</h2>
<img src=”https://www.javatpoint.com/images/nature-1.webp” alt=”image” style=”width:300px”>
</body>
</html>

آدرس دهی نسبی

در روش نسبی، آدرس به طور کامل نوشته نمی‌شود در واقع آدرس مقصد نسبت به فایل جاری تعریف می‌شود.

مزایای روش نسبی

خوانایی بیشتر و آدرس کوتاه تر
احتمال رخ دادن خطا در نمایش فایل صفر درصد اگر مسیر را درست داده باشید
امکان جابه جایی پوشه اصلی به مکان‌های دیگر

مثال: آدرس فایل قرار گرفته در پوشه images، سایت فعلی را نمایش می‌دهد.

<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src=”/images/nature-2.webp” alt=”Mountain” style=”width:300px”>
</body>
</html>

مثال: آدرس فایل قرار گرفته در پوشه images، پوشه صفحه جاری را نمایش می‌دهد.

<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src=”images/nature-3.webp” alt=”Mountain” style=”width:300px”>
</body>
</html>

مثال: آدرس فایل قرار گرفته در پوشه images، یک سطح بالا تر از پوشه صفحه جاری را نمایش می‌دهد.

<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src=”../images/nature4.webp” alt=”Mountain” style=”width:300px”>
</body>
</html>

تا اینجا با آدرس‌دهی فایل درhtml و روش‌های آن آشنا شدیم ، حالا باید بدانیم که چه زمان از روش مطلق و چه زمان از روش نسبی استفاده کنیم؟

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

نتیجه گیری:

در این مقاله با آدرس‌دهی به فایل در html و انواع آن آشنا شدیم. امیدوارم که نهایت استفاده از این مطلب را برده باشید و اگر می‌خواهید با این موضوع کامل آشنا شوید نیاز به تمرین دارید.

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