نشانی وب یا URL یه شناسه منحصر به فرده که برای پیدا کردن یه منبع در اینترنت ازش استفاده میشه. URLها شامل بخش‌های متعددی هستن؛ از جمله پروتکل و نام دامنه - که مشخص میکنن مرورگر کجا و به چه طریقی میتونه به یه منبع دسترسی پیدا کنه.
کاربرا از URL از طریق تایپ مستقیم در نوار آدرس مرورگر یا کلیک کردن روی لینک تو یه صفحه‌‌وب، بوک‌مارک‌ها و ... استفاده میکنن.
وقتی آدرسی رو در مرورگرتون تایپ می‌کنید، اتفاقات زیادی در پشت صحنه می‌افته. و بیشترش توسط قسمت‌های مختلف URL که تایپ کردید تعیین میشه. بیایید نگاه دقیق تری داشته باشیم.
يو آر ال میتونه از بخش‌های مختلفی تشکیل شده باشه. مثل یه hostname که به آدرس IP یه منبع بخصوص تو اینترنت مربوط میشه، و یه سری اطلاعات بیشتر که به مرورگر و سرور میگن که چطور باهم در تعامل باشن.
میتونید آدرس IP رو چیزی شبیه به شماره تلفن و نامِ هاست رو اسم کسی که شماره تلفن متعلق بهشه در نظر بگیرید. DNS در پس‌زمینه مثل یه دفترچه تلفن کار میکنه و hostname رو به آدرس‌های IP که شبکه‌ها برای مسیریابی ترافیک استفاده میکنن، ترجمه میکنه.
در تئوری، هر URL معتبر به یه منبع منحصر به فرد اشاره میکنه. این منبع میتونه یه صفحه CSS، HTML، یه تصویر و ... باشه. ولی در عمل، بعضی استثناها وجود داره، رایج ترینشون URLیه که به منبعی اشاره میکنه که دیگر وجود ندارد یا منتقل شده. از اونجایی که منبع نشان‌داده‌شده توسط URL و خود URL توسط وب سرور مدیریت میشن، این بر عهده مالک وب سروره که به منبع و URL مرتبط باهاش به دقت رسیدگی کنه.
خب از اینکه چی بر عهده کیه بگذریم. ساختار URL چطوریه؟ URLهای مطلق و نسبی چه فرقی باهم دارن؟ در ادامه به این موضوعات می‌پردازیم.
اساسا URL ایده نام دامنه رو با مسیر فایل(file patch) ترکیب کرده. همرا با یسری چیزای دیگه که به پیدا کردن سرور مورد نظر تو اینترنت و نحوه تعامل باهاش کمک میکنه.
C:\Documents\Personal\myfile.txt
بخش اول URL مربوط به پروتکوله که مشخص میکنه مروگر به چه نحوی با منبع تعامل داشته باشه. قسمت دوم مربوط به نام دامنه‌ست؛ مثل virgool.io بعد از نام دامنه، URL میتونه حاوی موارد زیر باشه:
توجه: میتونید URL رو مثل یه آدرس پستی معمولی فرض کنید: رویه (Scheme) یا پروتکل شبیه خدمات پستیه که می‌خواید استفاده کنید، نام دامنه مثل اسم شهر. مسیر ساختمانی رو که تحویل‌گیرنده توش مستقره نشون میده. پارامترها اطلاعات بیشتری مثل: تعداد واحدهای اون ساختمان رو نشون میدن. و در نهایت، anchor نشان دهنده شخصیه که بسته رو براش ارسال کردید.
اولین بخش URL رویه‌ست (Scheme). این بخش نشان دهنده پروتکلیه که مرورگر و سرور باید طبقش باهم ارتباط برقرار کنن. (پروتکل مجموعه قوائدی برای تبادل یا انتقال داده‌ها تو یه شبکه کامپیوتریه).
یه سری از پروتکل‌هایی که بیشتر باهاش سروکار داریم:
این پروتکل بنیادی وبه و تعیین میکنه که وب‌سرورها و مرورگرها در پاسخ به دستورات خاص چه اقداماتی انجام بدن.
یه فرم از HTTP که با استفاده از یه لایه امن و رمزگذاری شده برای انتقال امن‌تر اطلاعات کار میکنه.
از این پروتکل برای انتقال فایل‌ها از طریق اینترنت استفاده میشه.
تو مرورگر‌های امروزی دیگه نیازی به نوشتن پروتکل نیست. اگر وارد وب سایتی مثل «virgool.io» بشین، مرورگر شما به طور خودکار پروتکل مناسب رو تعیین میکنه.
بعدی Authority هستش که با « //: » از رویه جدا میشه. در تصویر بالا Authority یا مرجع شامل دو بخش:
بخش مرجع URL، مرورگر شما (یا هر برنامه دیگری) رو به سرور مناسب در شبکه وصل میکنه. مسیری که بعدش نوشته‌میشه - که درست مثل یه مسیر تو ویندوز، macOS یا لینوکس کار میکنه - شما رو به پوشه یا فایل مورد‌نظر در سرور می‌رسونه. قبل از مسیر و بین هر دایرکتوری و زیر شاخه یه اسلش وجود داره، مثل این:
www.example.com/folder/subfolder/filename.html
آخرین بخش نام فایلیه که با ورود به وب سایت باز میشه. ممکنه اون رو در نوار آدرس نبینید، اما به این معنی نیست که اونجا نیست. برخی از زبان‌هایی که برای ایجاد صفحات وب استفاده میشن، نام و پسوند فایلی رو که مشاهده می‌کنید پنهان میکنن. این باعث میشه به خاطر سپردن URL و تایپ کردنش آسون تر بشه و ظاهر تمیزتری بهش میده.
پ.ن: در روزهای ابتدایی وب، مسیر نشان دهنده مکان فیزیکی فایل در وب سرور بود. امروزه، مسیر بیشتر یه انتزاعه که توسط وب سرورها مدیریت میشه و الزاماً به معنای مکان فیزیکی فایل نیست.
این پارامترها لیستی از جفت‌های کلید/مقدار هستن که با علامت & از هم جدا میشن. وب سرور میتونه از این پارامترها برای انجام کارهای بیشتری مثل جستار استفاده کنه.
بخش جستارِ URL برای شناسایی مواردی استفاده میشه که بخشی از ساختار مسیر نیستند. غالباً، وقتی جستجویی انجام می‌دیم یا زمانی که صفحه وب داده‌ها رو از طریق یک فرم ارائه میده باهاشون مواجه میشیم. قسمت query در URL بعد از یه علامت سوال قرار می‌گیره.
به عنوان مثال، زمانی که ما در آمازون کلمات کلیدی "wi-fi extensioner" رو جستجو کردیم، با URL زیر مواجه شدیم.
https://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=wi-fi+extender
فرم جستجو اطلاعات رو به موتور جستجوی آمازون ارسال کرد. همونطور که میبینید، بعد از علامت سوال دو بخش برای جستار(query) وجود داره:
url=search-alias%3Daps&field
۲. کلمات کلیدی‌ای که تایپ کردیم:
keywords=wi-fi+extender
این یه مثال نسبتاً ساده‌ست، شما بیشتر وقتا URLهایی رو با متغیرهای بیشتر(و پیچیده تر) میبینید. به عنوان مثال، این URL زمانیه که ما کلمه کلیدی "howtogeek" رو تو گوگل جستجو کردیم:
https://www.google.com/search?q=howtogeek&rlz=1C1GCEA_enUS751US751&oq=howtogeek&aqs=chrome..69i57j69i60l4j0.1839j1j4&sourceid=chrome&ie=UTF-8
همانطور که می بینید، تو این URL یه سری اطلاعات متفاوتی وجود داره. تو این مورد URL اطلاعاتی درباره زبان جستجو، مرورگر مورد استفاده ما (Chrome) و حتی شماره نسخه مرورگر بهمون میده.
آخرین بخش URL که ممکنه مشاهده کنید Fragment نامیده میشه. Fragment بعد از علامت هشتگ (#) وجود داره و برای نشون دادن یه مکان بخصوص تو یه صفحه وب استفاده میشه. هنگام کدنویسی صفحه وب، میشه anchorهایی رو برای متن‌های بخصوص مثل عنوان‌ها ایجاد کرد. هنگامی که Fragment مناسب در انتهای URL استفاده میشه، مرورگر بعد از بارگذاری صفحه به آن anchor مراجعه میکنه. anchorها و URLهای دارای Fragment اغلب برای ایجاد فهرست مطالب در صفحات وب استفاده میشن که باعث آسون‌تر شدن جستجو میشه. در ادامه یه مثال رو بررسی می‌کنیم.
صفحه ویکی‌پدیای رنسانس یه صفحه طولانیه و حدوداً به ۱۱ بخش تقسیم شده که هرکدومشون چندین زیربخش دارن. برای هر عنوان در صفحه یه anchor گنجانده شده و از طریق فهرست مطالبی که در ابتدای مقاله وجود داره که حاوی لینک‌هایی به بخش‌هایی از مقاله‌ن میتونید به بخش‌های مختلف مقاله رجوع کنید. این لینک‌ها با گنجاندن Fragmentها کار میکنن.
همچنین می تونید از این Fragmentها به طور مستقیم در نوار آدرس یا به عنوان لینک‌های قابل اشتراک‌گذاری استفاده کنید. مثلاً فرض کنید می‌خواید بخشی از صفحه رو که به «روسیه» می‌پردازه به کسی نشون بدید. فقط کافیهه این لینک را براش ارسال کنید:
https://en.wikipedia.org/wiki/Renaissance#Russia
قسمت «Russia#» در انتهای URL، بعد از لود شدن صفحه اون‌ها رو مستقیم به بخش روسیه میبره.
آنچه تا الان بهش پرداختیم URL مطلق نامیده میشه، اما چیزی به نام URL نسبی وجود داره. در ادامه به بررسی دقیق تفاوت بین این دو می‌پردازیم.
بخش های مورد نیاز URL تا حد زیادی به زمینه‌ای که URL در آن استفاده میشه بستگی داره. در نوار آدرس مرورگر شما، یه URL هیچ زمینه‌ای نداره، ولی وقتی از URL تو یه سندی مثل یه صفحه HTML استفاده میشه، ماجرا یکم تغییر میکنه. ازاونجایی که مرورگر، URL خودِ سند رو از قبل داره میتونه از این اطلاعات برای پر کردن قسمت‌های خالی URLهای موجود در سند استفاده کنه.
فقط با نگاه کردن به قسمت مسیر URL میتونیم تفاوت بین URL مطلق و URL نسبی رو متوجه بشیم. اگر قسمت مسیر URL با کاراکتر "/" شروع بشه، مرورگر اون منبع رو از ریشه بالای سرور، بدون ارجاع به زمینه ارائه شده توسط سند فعلی می‌گیره.
برای روشن تر شدن این موضوع به مثال‌های زیر توجه کنید.
https://developer.mozilla.org/en-US/docs/Learn
//developer.mozilla.org/en-US/docs/Learn
در این حالت، مرورگر اون URL را با همان پروتکلی که برای بارگیری سند میزبانِ اون URL استفاده شد فراخوانی می کنه.
/en-US/docs/Learn
این رایج ترین مورد استفاده برای URL مطلق در HTML است. مرورگر از همون پروتکل و نام دامنه مورد استفاده برای بارگیری سند میزبان آن URL استفاده میکنه.
توجه: حذف نام دامنه بدون حذف پروتکل امکان پذیر نیست.
برای درک بهتر مثال‌های زیر، فرض می‌کنیم که URLها از داخل سند واقع در URL زیر فراخوانی میشن:
https://developer.mozilla.org/en-US/docs/Learn
Skills/Infrastructure/Understanding_URLs
از آنجایی که این URL با « / » شروع نمیشه، مرورگر سعی میکنه سند رو در زیر شاخه‌ای از دایرکتوری که حاوی منبع فعلی است پیدا کنه. پس تو این مثال، ما در واقع می‌خوایم به این URL برسیم:
https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs
../CSS/display
در این مورد، ما از قرارداد نوشتنِ« ../ » استفاده می‌کنیم - که از فایل سیستم یونیکس به ارث رسیده- تا به مرورگر بگیم که می‌خوایم از یه دایرکتوری بالا بریم. در اینجا می‌خوایم به این URL برسیم:
https://developer.mozilla.org/en-US/docs/Learn/../CSS/display
که بصورت زیر میشه ساده‌ش کرد:
https://developer.mozilla.org/en-US/docs/CSS/display
