آموزش آدرس دهی به فایل ها در HTML بصورت جامع
نحوه آدرس دهی به فایل در HTML
مسیردهی یا آدرس دهی یا به انگلیسی ( File Paths ) یکی از مهمترین مواردی است که یک طراح وب باید بطور کامل با آن آشنایی داشته باشد.
مسیر فایل برای نشان دادن مکان فایل در یک پوشه وب سایت استفاده می شود.
مسیرهای فایل مانند آدرس فایل برای مرورگر وب هستند. با کمک مسیرهای فایل می توانیم به هر نوع منبع خارجی مانند تصاویر، فایل ها، فایل CSS، فایل جاوا اسکریپت، ویدئو و …. لینک دهیم تا به فایل HTML اضافه شود.
این آدرس به مرورگر کمک میکند تا به فایل مورد نظر دست پیدا کند.
بطور کلی ۲ روش برای آدرس دهی فایل ها داریم :
- آدرس دهی مطلق
- آدرس دهی نسبی
1.آدرس دهی مطلق فایل ها در HTML(آدرس دهی کامل)
بیانگر آدرس کامل (URL) فایل داخل اینترنت میباشد.
در این روش ، آدرس یک فایل بصورت کامل و ثابت ایجاد می شود، منظور از ثابت یعنی اینکه آدرس فایل ثابته و عملا قابل تغییر یا جابه جایی را ندارد.
اگر در قالب یک مثال بخواهیم بیان کنیم:
شما یک عکس را با آدرس ثابت c:/upweb-image.jpg در سیستم خودتان در درایو C به نمایش درآورده اید.اما اگر شما فایل html تان را برداشته و به سیستم دیگری انتقال دهید، خواهید دید که هیچ عکسی نمایش داده نخواهد شد.
به این علت که در سیستم دیگر نیز میبایست در درایو C فایلی با نام c:/upweb-image.jpg وجود داشته باشد تا قابل نمایش باشد در غیراینصورت
هیچ عکسی نمایش داده نخواهد شد.
مثال:
|
1 |
<img src="https://upweb.ir/wp-content/uploads/2022/05/Top-Uses-Of-HTML.jpg" |
نتیجه:
تگ <img> در بخش: تصاویر HTML توضیح داده شده است:
2.آدرس دهی نسبی فایل ها در HTML
مسیر فایل نسبی، مکان فایلی را مشخص می کند که با مکان صفحه جاری ارتباط و وابستگی دارد.
در این روش برخلاف روش مسیردهی فایل ها بصورت مطلق،نیاز به وارد کردن آدرس کامل و دقیق یک فایل نمیباشد.
میتوانیم آدرس یک فایل را به نسبت رابطه ای که با پوشه قبل و بعد از خود دارد مشخص کنیم و طبق مثال قبلی که بیان شد دیگر لازم نیست که نگران تغییر دادن ادرس فایل باشید!
زیرا در روش آدرس دهی نسبی،آدرس شما وابستگی به سایت یا هرچیزی ندارد و دیگر لازم نیست مثلا فایل عکس شما در سیستم شخص دیگری در درایو C قرار داشته باشد.
تنها کافیست فایل مورد نظر خود را دانلود نموده(عکس،ویدیو…) یا در هر صورت فایل مورد نظر را داشته باشید و آن را در پوشه اصلی فایل های وب خود قرار دهید.
مثال
در نمونه مثال زیر آدرس تنظیم شده برای src اشاره به فایلی دارد که در فولدر images قرار دارد که خود این فولدر در ریشه ی اصلی وب سایت ما واقع شده است :
|
1 |
<img src="/images/picture.jpg" alt="Mountain"> |
در نمونه مثال زیر آدرس تنظیم شده برای src اشاره به فایلی دارد که در فولدر images قرار دارد که خود این فولدر در فولدر جاری (منظور از فولدر جاری فولدریست که صفحه ی جاری در آن قرار گرفته است) واقع شده است :
|
1 |
<img src="images/picture.jpg" alt="Mountain"> |
در نمونه مثال زیر آدرس تنظیم شده برای برای src اشاره به فایلی دارد که در فولدر images قرار دارد و خود این فولدر یک سطح بالاتر از فولدر جاری است :
|
1 |
<img src="../images/picture.jpg" alt="Mountain"> |
استفاده از مسیر مطلق یا نسبی؟
تا آنجایی که ممکن است از مسیر های فایل نسبی (relative) استفاده کنید.
وقتی شما از مسیر های relative استفاده میکنید ، صفحات وب سایت شما به آدرس اینترنتی شما (برای مثال در سایت ما www.upweb.ir) وابستگی نخواهند داشت و در صورتی که در آینده تغییری در نام دامنه ی شما ایجاد شود از تغییرات در امان خواهید بود.
