ما الفرق بين عنوان URL النسبي والمطلق؟

القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة.

يحتاج كل موقع ويب إلى الرجوع إلى موارد معينة ، سواء كانت صورًا أو ملفات أو صفحات ويب أخرى. يعد تحديد كيفية الارتباط بالملفات الأخرى أمرًا في غاية الأهمية للتأكد من أن المستعرضات تحدد موقعها بشكل صحيح.

يمكنك الارتباط بالموارد باستخدام عنوان URL نسبي أو مطلق. ينطبق هذا على كل من الملفات المحلية الموجودة على جهاز الكمبيوتر وعناوين URL المستندة إلى البروتوكول التي يتم الوصول إليها عبر الويب.

كيفية استخدام مسار URL مطلق

يحتوي عنوان URL المطلق على المسار الكامل لموقع ملف معين. تتضمن أمثلة ذلك المسار الكامل للملفات الموجودة على جهاز الكمبيوتر الخاص بك:

• ملف: /// C: /Users/Sharl/Desktop/test.html
• ملف: /// C: /Users/John/Documents/Work/Q4Summary.docx
• ملف: /// 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 المطلق على كافة المعلومات المطلوبة لتحديد موقع الملف أو المورد الذي تحاول الوصول إليه. هذا مطلوب إذا كنت تقوم بالارتباط بموقع خارجي.

1. قم بإنشاء موقع ويب بسيط بتنسيق HTML عن طريق إنشاء مجلد جديد وإضافة ملفين جديدين يسمى index.html و Styles.css.
2. في index.html، أضف بعض تعليمات HTML البرمجية لإنشاء موقع ويب أساسي:

   <! DOCTYPE html>
   <أتش تي أم أل لانج ="ar">
   <رأس>
   <عنوان> موقع الويب الخاص بي </title>
   <meta charset ="UTF-8">
   <اسم التعريف ="منفذ العرض" المحتوى ="العرض = عرض الجهاز ، المقياس الأولي = 1">
   <ارتباط rel ="ورقة الأنماط" href ="Styles.css" />
   </head>
   <جسم>
   <فئة div ="حاوية">
   <h1> موقع الويب الخاص بي </h1>
   <ص> مرحبا بكم في موقع الويب الخاص بي. </ ص>
   </div>
   </body>
   </html>

3. في Styles.css، أضف بعض الأنماط إلى صفحة الويب.

   جسم {
    عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛
   }
   .حاوية {
    العرض: فليكس ؛
    الاتجاه المرن: العمود.
    محاذاة العناصر: مركز ؛
   }
   .mb28 {
    الهامش السفلي: 28 بكسل ؛
   }

4. في index.html، إضافة علامة داخل الحاوية div ، وأضف عنوان URL المطلق إلى موقع Google الرئيسي ( https://www.google.com).

   <أ href ="https://www.google.com" فئة ="ميغابايت 28">Google.com</أ>

5. يمكنك أيضًا الوصول إلى الصور عبر الإنترنت باستخدام المسار المطلق الكامل للملف المخزن. يمكنك أيضًا اتخاذ خطوات إضافية للتأكد من أنك قمت بالإضافة تستجيب الصور إلى HTML الخاص بك صفحة على الإنترنت.

   <img src ="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid = MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&تلقائي = تنسيق&تناسب = المحاصيل&ث = 3870&ف = 80" بديل ="صور طائر لطيف" فئة ="ميغابايت 28" العرض ="900" الارتفاع ="600">

6. اضغط على index.html لفتحه في المتصفح وعرض الصورة المسترجعة من موقعها الخارجي.
7. من المجلد الجذر لموقع الويب الخاص بك ، قم بإنشاء مجلد جديد لتخزين الصور ، يسمى الصور. داخل المجلد ، أضف صورة جديدة وقم بتسميتها ، مثل CuteBird.jpg.
8. حدد المسار المطلق لملف الصورة الذي أضفته للتو. يمكنك القيام بذلك من خلال العثور عليه في مسار التنقل لتطبيق مدير ملفات نظام التشغيل الخاص بك. ستحتاج أيضًا إلى إضافة اسم الملف إلى نهاية المسار. على سبيل المثال ، "C: \ Users \ Sharl \ Desktop \ Website \ Images \ CuteBird.jpg"
9. في index.html، فاستبدل علامة صورتك بصورة جديدة تستخدم المسار المطلق الذي يشير إلى ملف CuteBird.jpg الملف المخزن على جهاز الكمبيوتر الخاص بك. تذكر أن تضيف الملف: // بادئة للإشارة إلى مورد نظام ملفات محلي. في نظامي التشغيل Unix و macOS ، يمكنك بعد ذلك إلحاق المسار المطلق الذي حددته في الخطوة السابقة. في نظام التشغيل Windows ، ستحتاج إلى استبدال الشرطات المائلة للخلف بشرطة مائلة للأمام وإضافة شرطة مائلة إضافية للأمام قبل حرف محرك الأقراص ، على سبيل المثال:

10. اضغط على index.html لفتحه في المتصفح وعرض الصورة المخزنة على جهاز الكمبيوتر الخاص بك.

كيفية استخدام مسار URL النسبي

لا يخزن عنوان URL النسبي سوى جزء من عنوان URL أو المسار ، وعادة ما يكون مرتبطًا بموقع الملف أو القسم الحالي من موقع الويب.

في المثال أعلاه ، للوصول Logo.ico من index.html باستخدام عنوان URL نسبي ، يمكنك استخدام المسار "Images / Icons / Logo.ico". تشمل الأمثلة الأخرى:

• الصفحات / Bird1.html
• الصور / CuteBird.jpg
• Styles.css

عند استخدام نفس بنية المجلد على جهاز كمبيوتر آخر ، سيظل موقع الويب قادرًا على استرداد الملف. عند التوجيه عبر الويب ، بدلاً من استخدام الرابط الكامل مثل " https://example.com/about", يمكنك استخدام التوجيه النسبي بدلاً من ذلك:

• /about
• /contact
• /projects/local-clients

يمكنك استخدام عنوان URL نسبي لإنشاء روابط أو صور مرجعية داخل صفحة ويب HTML الخاصة بك.

1. داخل جذر دليل موقع الويب الخاص بك ، قم بإنشاء مجلد جديد يسمى الصفحات.
2. داخل مجلد Pages الجديد ، قم بإنشاء ملف جديد يسمى Bird1.html.
3. يسكن Bird1.html مع كود HTML لإنشاء الصفحة.

   <! DOCTYPE html>
   <أتش تي أم أل لانج ="ar">
   <رأس>
   <عنوان> طائر 1 </title>
   <meta charset ="UTF-8">
   <اسم التعريف ="منفذ العرض" المحتوى ="العرض = عرض الجهاز ، المقياس الأولي = 1">
   <ارتباط rel ="ورقة الأنماط" href ="../styles.css" />
   </head>
   <جسم>
   <فئة div ="حاوية">
   <h1> قهوة </h1>
   <ص> القهوة طائر حلو يحب اللعب! </ ص>
   </div>
   </body>
   </html>

4. داخل الحاوية div ، أضف علامة صورة ، واستخدم عنوان URL نسبيًا للارتباط بملف CuteBird.jpg صورة.

   <img src ="../Images/CuteBird.jpg" بديل ="صور طائر لطيف" فئة ="ميغابايت 28" العرض ="900" الارتفاع ="700">

5. في ال index.html ملف ، قم بإزالة المحتوى الموجود داخل حاوية div. استبدلها بأخرى أ العلامة التي تستخدم ارتباطًا نسبيًا لفتح ملف Bird1.html ملف.

   <فئة div ="حاوية">
   <h1> موقع الويب الخاص بي </h1>
   <ص> مرحبا بكم في موقع الويب الخاص بي. </ ص>
   <أ href ="الصفحات / Bird1.html" فئة ="ميغابايت 28">الطائر 1: القهوة</أ>
   </div>

6. اضغط على index.html لفتحه في المتصفح ، وانقر على الرابط الجديد للانتقال إليه Bird1.html.

يمكنك الآن تحديد الفرق بين عناوين URL المطلقة والنسبية. يمكنك الآن توخي مزيد من العناية لضمان استرداد مواردك دائمًا.

يجب عليك أيضًا التأكد دائمًا من أن جميع الروابط التي يمكن للمستخدمين الوصول إليها آمنة ومأمونة.