تفاوت بین URL نسبی و مطلق چیست؟

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

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

می توانید با استفاده از URL نسبی یا مطلق به منابع پیوند دهید. این هم برای فایل‌های محلی روی رایانه و هم برای URL‌های مبتنی بر پروتکل که از طریق وب قابل دسترسی هستند، اعمال می‌شود.

نحوه استفاده از مسیر URL مطلق

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

file:///C:/Users/Sharl/Desktop/test.html
file:///C:/Users/John/Documents/Work/Q4Summary.docx
file:///C:/Users/Mark/Documents/Music/Recording.mp3

مثال دیگر شامل یک URL کامل پروتکل است که می توانید از آن برای شناسایی منبعی برای ارسال از طریق اینترنت استفاده کنید. معمولاً اینها با “https” یا “http” شروع می شوند:

https://www.google.com
https://calendar.google.com/calendar
https://www.airbnb.com.au/rooms

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

با ایجاد یک پوشه جدید و افزودن دو فایل جدید به نام های index.html و styles.css یک وب سایت ساده در HTML بسازید.
در index.html، مقداری کد HTML برای ایجاد یک وب سایت اصلی اضافه کنید:             وب سایت من


وب‌سایت من



به وب‌سایت من خوش آمدید.
در styles.css، مقداری استایل به صفحه وب اضافه کنید. body { font-family: Arial، Helvetica، sans-serif;} .container { display: flex; flex-direction: ستون. align-item: center;} .mb28 { margin-bottom: 28px;}
در index.html، یک تگ را در داخل کانتینر div اضافه کنید و URL مطلق را به سایت اصلی گوگل (https://www.google.com) اضافه کنید. Google.com
همچنین می توانید با استفاده از مسیر مطلق کامل فایل ذخیره شده به تصاویر به صورت آنلاین دسترسی داشته باشید. همچنین می‌توانید برای اطمینان از اینکه تصاویر واکنش‌گرا را به صفحه وب HTML خود اضافه کرده‌اید، اقدامات بیشتری انجام دهید.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> My Website </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="container">
            <h1> My Website </h1>
            <p> Welcome to my website. </p>
        </div>
    </body>
</html>

body {
    font-family: Arial, Helvetica, sans-serif;
}
 
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.mb28 {
    margin-bottom: 28px;
}

<a href="https://www.google.com" class="mb28">Google.com</a>

<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3870&q=80" alt="Cute bird photo" class="mb28" width="900" height="600">

روی فایل index.html کلیک کنید تا آن را در مرورگر باز کنید و تصویر بازیابی شده را از مکان خارجی آن مشاهده کنید.
از پوشه اصلی وب سایت خود، یک پوشه جدید برای ذخیره تصاویر به نام Images ایجاد کنید. در داخل پوشه، یک تصویر جدید اضافه کنید و نامی مانند CuteBird.jpg به آن بدهید.
مسیر مطلق فایل تصویری که به تازگی اضافه کرده اید را شناسایی کنید. می توانید این کار را با پیدا کردن آن در مسیر ناوبری برنامه مدیریت فایل سیستم عامل خود انجام دهید. همچنین باید نام فایل را به انتهای مسیر اضافه کنید. به عنوان مثال، “C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg”
در index.html، تگ تصویر خود را با یک تصویر جدید جایگزین کنید که از مسیر مطلق اشاره به فایل CuteBird.jpg ذخیره شده در رایانه شما استفاده می کند. به خاطر داشته باشید که برای نشان دادن یک منبع فایل سیستم محلی، پیشوند file:// را اضافه کنید. در یونیکس و macOS، می‌توانید مسیر مطلقی را که در مرحله قبل شناسایی کرده‌اید، اضافه کنید. در ویندوز، باید اسلش های عقب را با اسلش های جلو جایگزین کنید و قبل از حرف درایو یک اسلش جلو اضافه کنید، به عنوان مثال:
روی فایل index.html کلیک کنید تا آن را در مرورگر باز کنید و تصویر ذخیره شده در رایانه خود را مشاهده کنید.

نحوه استفاده از یک مسیر URL نسبی

URL نسبی فقط بخشی از URL یا مسیر را ذخیره می کند و معمولاً به محل فایل یا بخش فعلی یک وب سایت مربوط می شود.

در مثال بالا، برای دسترسی به Logo.ico از index.html با استفاده از یک URL نسبی، از مسیر “Images/Icons/Logo.ico” استفاده می کنید. نمونه های دیگر عبارتند از:

Pages/Bird1.html
Images/CuteBird.jpg
styles.css

هنگامی که از همان ساختار پوشه در رایانه دیگری استفاده می کنید، وب سایت همچنان می تواند فایل را بازیابی کند. هنگام مسیریابی از طریق وب، به جای استفاده از پیوند کامل مانند “https://example.com/about”، می توانید به جای آن از مسیریابی نسبی استفاده کنید:

/در باره
/مخاطب
/projects/local-clients

می توانید از یک URL نسبی برای ایجاد پیوندها یا تصاویر مرجع در داخل صفحه وب HTML خود استفاده کنید.

در ریشه دایرکتوری وب سایت خود، یک پوشه جدید به نام Pages ایجاد کنید.
در پوشه جدید Pages یک فایل جدید به نام Bird1.html ایجاد کنید.
برای ایجاد صفحه، Bird1.html را با کد HTML پر کنید.              Bird 1


قهوه

قهوه پرنده ای شیرین است که عاشق بازی است!
در داخل کانتینر div، یک تگ تصویر اضافه کنید و از یک URL نسبی برای پیوند دادن به تصویر CuteBird.jpg استفاده کنید.
در فایل index.html محتوای موجود داخل ظرف div را حذف کنید. آن را با یک تگ جایگزین کنید که از یک پیوند نسبی برای باز کردن فایل Bird1.html استفاده می کند.


وب سایت من



به وب سایت من خوش آمدید.

    پرنده 1: قهوه
روی فایل index.html کلیک کنید تا در مرورگر باز شود و روی پیوند جدید کلیک کنید تا به Bird1.html بروید.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bird 1 </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <link rel="stylesheet" href="../styles.css" />
    </head>
    <body>
        <div class="container">
            <h1> Coffee </h1>
            <p> Coffee is a sweet bird who loves to game! </p>
        </div>
    </body>
</html>

<img src="../Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">

<div class="container">
    <h1> My Website </h1>
    <p> Welcome to my website. </p>
    <a href="Pages/Bird1.html" class="mb28">Bird 1: Coffee</a>
</div>

دسترسی به فایل ها با استفاده از پیوندهای URL مطلق یا نسبی

اکنون می توانید تفاوت بین URL های مطلق و نسبی را تعیین کنید. اکنون می توانید مراقب باشید تا مطمئن شوید که منابع شما همیشه بازیابی می شوند.

همچنین باید همیشه اطمینان حاصل کنید که همه پیوندهایی که کاربران شما می توانند به آنها دسترسی داشته باشند، ایمن و امن هستند.

مطلب مرتبط: نحوه دانلود عکس پروفایل اینستاگرام با استفاده از پایتون

Tags: اچ تی ام ال توسعه وب فایل سیستم

نحوه استفاده از مسیر URL مطلق

وب‌سایت من

نحوه استفاده از یک مسیر URL نسبی

قهوه

وب سایت من

دسترسی به فایل ها با استفاده از پیوندهای URL مطلق یا نسبی