آدرس دهی فایل ها در 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‌ شما فراخوانی شود. دیگه اگر نشد بپرسید کمکتون میکنیم =)))

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

آموزش HTML‌ ما را دنبال کنید.

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

13 نظر

13 پاسخ

  1. جواب پایانترم به صورت اسکرین شات:
    خط 7 کد عکس رو از یه دایرکتوری قبل گرفتم
    تو خطوط 8 و 9 از دو دایرکتوری قبل تر
    خط 10 هم عکس از پوشه ای که فایل سند html کنونی توش هست
    دریافت میشه

    تست هم کردم ، کار می کنه و سند نیازی به کمک گرفتن از صفت alt پیدا نکرد

    تو نوشتن جواب سوال ، فک کنم اشتباه تایپی داشتم
    فایلی که با / آدرسش رو شروع کردم رو تو درایو c ویندوز قرار داده بودم که فک کنم اشتباها نوشتم پوشه فعلی!

    1. درسته علی اکبر، کدت اجرا هم شد؟ تونستی خروجیش رو ببینی؟

    1. سلام محمد، یک مقدار کدت نا مفهومه، میتونی خروجی‌ای که دریافت کردی رو هم بفرستی ؟

    1. سلام. پوشه public_html رو باید پیدا کنید. وقتی وارد فایل منیجر میشید میتونید مشاهده کنید.

  2. سلام و ممنونم از سایت خوبتون من میخوام که یک جوری آدرس بدم که کسی اسم فولدر های من رو متوجه نشه ممنون میشم اگر جواب بدید😊

    1. سلام مبین. چون HTML و CSS سمت کاربر هستند نمیتونی این کار رو انجام بدی، مگر اینکه با استفاده از زبان های برنامه نویسی مثل PHP براشون Short link درست بکنی.

  3. سلام
    یه سوال اگه بخوام آدرس عکسو تغییر بدم یعنی از=src. استفاده کنم و عکس در یک پوشه دیگه باشه باید چیکار کنم

    1. سلام احمد عزیز.
      شما میتونید به مقدار src یک ادرس از همون پوشه بدید و یا یک پوشه عقب تر باشه یا یک پوشه دیگه باشه، یا اصلا از سایت دیگری باشه.
      حالا وقتی میگی یک پوشه دیگه باید دید این پوشه کجای سایت هست و عقب و جلو کرد. طبیعتا ما که اطلاع نداریم و باید خودت پیدا کنی.
      لطفا مقاله رو بخونید و از بخش “مسیر دهی رو به عقب و جلو” استفاده کنید. همینطور مثال ها.
      موفق باشید.

  4. سلام من برای گرفتن درگاه پرداخت پرفکت مانی میگه یک فایل خالی به یک آدرسی که اونا میدهند در سایتم ایجاد کنم که وقتی سایتم را چک میکنند مطمئن شوند فایلی به آدرسی که اونا معلوم کردند وجود دارد تا مطمئن شوند سایت مال خودم هست و بقیه مراحل برای تایید سایتم انجام شود. من هم یک برگه خالی با آدرسی که اونا گفته بودند ایجاد کردم ولی اونا قبول نکردند و میگویند یک فایل با آدرس ما در سایت قرار بده من نمیدونم باید دقیقا کجای هاست برم و چگونه یک فایل با آدرس اونا ایجاد کنم لطفا دقیق توضیح بدهیدکه باید چه کار کنم ؟

    1. سلام محمد. طبیعتا شما توضیحات دقیق رو باید از اونا بخواین نه ما. ولی پیشنهاد میکنم در اینترنت سرچ کن How To Create Verified Perfect Money و کلی مقاله و ویدیو میتونی مشاهده کنی. ب نظر من شما باید وارد هاست بشی و در پوشه public_html سایتت اونجا یک فایل درست کنی. مثل وریفای کردن سرچ کنسول به کمک فایل.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=