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

طراحی سایت

..آدرس دهی فایل ها در HTML..
طراحی سایت

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

 

آدرس دهی فایل‌‌ها در HTML چیست و آدرس‌ها چه تفاوتی با یکدیگر دارند؟ تفاوت آدرس‌ فایل‌های وابسته و مطلق چیست؟ برای دستیابی به پاسخ این سوالات این مقاله را از دست ندید و تا پایان با ما همراه باشید.

سرفصل‌های پست

آشنایی با آدرس فایل‌ها

مسیر‌های فایل یا File Path در وب تعیین‌کننده محل فایل داخل پوشه‌های هاست وب سایت شما است. این آدرس به مرورگر کمک می‌کند تا به فایل مورد نظر دست پیدا کند.

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

برای اضافه کردن یک فایل به صفحه وب، فایل منبع باید از قبل تعیین شده و شناخته شده باشد، به عنوان مثال کد <img src=”” alt=””> برای اضافه کردن یک فایل عکس به صفحه وب استفاده می‌شود که در کد بالا آدرس فایل عکس در خاصیت src قرار می‌گیرید.

قابل توجه هست که با File Path ها پیش‌تر در مقاله آشنایی با تگ <a> تا حدودی آشنا شدیم. با این‌حال در این مقاله تخصصی‌تر آن را مورد بررسی قرار می‌دهیم.

انواع آدرس دهی فایل‌ها

آدرس فایل ها به دو بخش تقسیم می‌شوند:

  • آدرس فایل‌های مطلق
  • آدرس فایل‌های وابسته

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

بیانگر آدرس کامل (URL) فایل داخل اینترنت می‌باشد، مانند :

<img src=”https://mizfa.com/blog/wp-content/uploads/2019/04/filepath.jpg” alt=”My Image”>

تگ <img> که در نمونه کد بالا استفاده کنیم در مقاله آشنایی با تگ <img> مورد بررسی قرار گرفته شده است و وظیفه آن نمایش تصاویر در صفحات وب است.

آدرس دهی فایل های وابسته

به آدرس فایل قرار گرفته در صفحه فعلی وب اشاره دارد.

مثال 1 نشان دهنده آدرس یک فایل در فولدر تصاویر صفحه فعلی است:

<!DOCTYPE html>
  <html>
    <head>
    <title>Relative file path</title>
  </head>
  <body>
    <h2>File present in a folder above the current folder</h2>
    <img src="../images/geeks.jpg" alt="My Image" style="width:400px">
  </body>
</html>

مثال 2 نشانگر آدرس‌دهی فایل در فولدر بالای این صفحه می باشد که صفحه فعلی وب زیر مجموعه این فولدر است:

<!DOCTYPE html>
  <html>
    <head>
      <title>Relative file path</title>
    </head>
    <body>
      <h2>File present in a folder which is located at
      <br>the root of the the current subdirectories</h2>
      <img src="/images/picture.jpg" alt="My Image" style="width:400px">
    </body>
  </html>

مثال 3 نمایانگر آدرس‌دهی فایل در مسیر روت فولدر زیر مجموعه صفحه فعلی است:

<html>
  <head>
    <title>Relative file path</title>
  </head>
  <body>
    <h2>File present in a folder which is located at
    <br>the root of the the current subdirectories</h2>
    <img src="/images/picture.jpg" alt="My Image" style="width:400px">
  </body>
</html>

مسیر دهی رو به عقب و جلو

برای آدرس‌دهی وابسته در داخل ساختار پوشه‌های صفحه فعلی از روش‌های زیر استفاده می‌کنیم:

  • شروع آدرس با “/” از مسیر روت صفحه فعلی آغاز می‌کند.
  • شروع آدرس با “../” به یک فولدر به عقب حرکت می‌کند.
  • شروع آدرس با “../../” به دو فولدار به عقب حرکت می کند. (برای حرکت رو به عقب فولدار های بیشتر به همین منوال ادامه می‌یابد.)

تمرین کنیم

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

اگر با دقت مسیر‌دهی‌ها را وارد کنید به هیچ مشکلی بر نمی‌خورید ولی اگر هم به مشکل خوردید هم آنقدر تلاش کنین تا بالاخره تصویر یا فایل در سند HTML‌ شما فراخوانی شود.

نتیجه گیری

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

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

این مبحث هم تمام شد و امیدوارم از آن استفاده لازم را کرده باشید

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

 

734
27 فروردین 1398
..نظرات..
بهرامیان

عرض سلام و خسته نباشید. بنده یک وبسایت دارم که پرستاشاپی هست. در یک قسمت میخوام که باکس ساده ایجاد کنم. تغییرات css رو اعمال کردم و باکس ایجاد شدولی متاسفانه نمیتونم به خود سایت منتقل کنم چون باید html هم دستکاری بشه که در ویرایشگر قالب محلی برای اون نیست. نمیدونم کدهای html در کجای هاست قرار داده شده اند. اگه میشه یه راهنمایی بفرمایید.

10 اردیبهشت 1399
وب پن تست

سلام لطفا شماره تماستون رو همراه با ادرس سایتتون ارسال کنید که دوستان ببینند

11 اردیبهشت 1399
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

19422
24 فروردین 1398
سئو

چگونه ویدیو کلاس های آنلاین (وبینار) را ضبط کنیم؟| آموزش ۳ روش

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

4963
08 اردیبهشت 1399
طراحی سایت

bit.ly چیست ؟

بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند. علت استفاده از...

4738
27 آذر 1398