عناوين URL المطلقة مقابل النسبية
افهم الفرق بين المسارات المطلقة والنسبية
عناوين URL المطلقة مقابل النسبية درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما عنوان URL؟
عنوان URL (محدِّد موقع الموارد الموحّد) هو العنوان الكامل لمورد على الويب.
يتكوّن عنوان URL من الأجزاء التالية:
https://example.com:443/products/widget?color=red#reviews
│ │ │ │ │ │
│ │ │ │ │ └─ Fragment
│ │ │ │ └─ Query string
│ │ │ └─ Path
│ │ └─ Port
│ └─ Domain
└─ Protocolعناوين URL المطلقة
يحتوي عنوان URL المطلق على العنوان الكامل — البروتوكول والنطاق والمسار:
<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">
<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->عناوين URL النسبية
يشير عنوان URL النسبي إلى موقع الصفحة الحالية — ولا حاجة إلى بروتوكول أو نطاق:
<!-- Current page: https://example.com/blog/post.html -->
<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->
<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->
<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->ثلاثة أنواع من عناوين URL النسبية
لعناوين URL النسبية ثلاثة أشكال:
<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>
<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>
<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">التنقّل باستخدام ../ --
استخدم ../ للانتقال إلى مستوى دليل واحد أعلى:
<!-- File structure:
/
├── index.html
├── about.html
└── blog/
├── post1.html
└── post2.html
-->
<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a> <!-- same folder -->
<a href="../">Home</a> <!-- up one level -->
<a href="../about.html">About</a> <!-- up then file -->متى تستخدم العناوين المطلقة أو النسبية
إرشادات:
- الموارد الخارجية — استخدم عناوين مطلقة دائمًا:
https://... - موارد CDN — عناوين مطلقة أو نسبية للبروتوكول
- التنقّل الداخلي — العناوين النسبية إلى الجذر (
/page) هي الأكثر أمانًا - الدليل نفسه — العناوين النسبية (
page.html) ملائمة
العنوان النسبي إلى الجذر قابل للنقل
تظل عناوين URL النسبية إلى الجذر (/path) صالحة عند نقل الصفحات:
<!-- If this page moves from /blog/post.html to /articles/post.html -->
<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a> <!-- always → example.com/contact -->
<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a> <!-- different result in new location -->عنصر base
يحدّد عنصر <base> في <head> عنوان URL الأساسي لجميع الروابط النسبية:
<head>
<base href="https://example.com/docs/">
</head>
<body>
<!-- This resolves to: https://example.com/docs/guide.html -->
<a href="guide.html">Guide</a>
</body>ترميز عناوين URL
يجب ترميز الأحرف الخاصة بترميز النسبة المئوية في عناوين URL:
<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>
<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>
<!-- Common encodings:
space → %20
& → %26
= → %3D
# → %23
-->عناوين URL الأساسية
عندما يمكن الوصول إلى الصفحة من خلال عدة عناوين URL، استخدم وسمًا أساسيًا للإعلان عن العنوان المفضّل:
<head>
<!-- Prevents duplicate content SEO penalty -->
<link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->أفضل ممارسات عناوين URL
اتّبع اصطلاحات عناوين URL التالية:
- استخدم الأحرف اللاتينية الصغيرة فقط
- استخدم الشرطات (وليس الشرطة السفلية) للفصل بين الكلمات
- اجعل عناوين URL قصيرة ووصفية
- تجنّب الأحرف الخاصة — ورمّزها عند الحاجة
- استخدم العناوين النسبية إلى الجذر للروابط الداخلية
تحقّق سريعًا
لديك ملف في /blog/post.html وتريد إنشاء رابط إلى /about.html. ما عنوان URL النسبي الأكثر أمانًا؟
مراجعة: عناوين URL المطلقة والنسبية
ملخّص أنواع عناوين URL:
- المطلق — عنوان URL كامل يتضمّن البروتوكول والنطاق
- النسبي إلى الجذر — يبدأ بـ
/ويشير إلى جذر النطاق - النسبي — يشير إلى موقع الملف الحالي
../— الانتقال إلى مستوى دليل واحد أعلى<base href>— يحدّد الأساس لجميع عناوين URL النسبية
الأسئلة الشائعة
هل درس «عناوين URL المطلقة مقابل النسبية» مجاني؟
نعم — نص درس «عناوين URL المطلقة مقابل النسبية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «عناوين URL المطلقة مقابل النسبية»؟
افهم الفرق بين المسارات المطلقة والنسبية تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «عناوين URL المطلقة مقابل النسبية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- عنصر anchor وسمته href
- عناوين URL المطلقة مقابل النسبية
- فتح الروابط في علامات تبويب جديدة وسمة Download
- الربط بأقسام الصفحة ومعرّفات الأجزاء