ترميز URL في HTML
يحدد charset كيف يحوّل ملف HTML البايتات إلى حروف. ترميز URL (percent-encoding) مشكلة مختلفة: كيف تنتقل الأحرف بأمان داخل عنوان URL — في الروابط وإعادة التوجيه وبيانات استعلام النماذج — دون كسر بنية الـ URL نفسها. المسافات والحروف غير ASCII والرموز المحجوزة غالبًا تحتاج شكل % + hex حتى يتفق المتصفح والخادم على المعنى.
ما هو ترميز URL
لعنوان URL أحرف محجوزة تبني البنية: ? يبدأ الاستعلام، & يفصل الأزواج، = يربط الاسم بالقيمة، # يبدأ المقطع. إذا ظهرت تلك الأحرف كـ بيانات داخل قيمة، يجب ترميزها حتى لا تُفهم بنيةً بالخطأ. الأحرف غير الآمنة مثل المسافات تُرمَّز أيضًا للنقل الموثوق.
إجابة مباشرة
يستبدل ترميز URL الحرف بـ % متبوعًا برقمين ست عشريين. المثال الكلاسيكي: المسافة تصبح %20. كثير من المتصفحات ونماذج HTML ترمّز قيم الاستعلام تلقائيًا عند الإرسال. ما زلت تحتاج الفكرة عندما تكتب سلاسل استعلام href يدويًا، أو تصحّح رابطًا معطوبًا، أو تقرأ شريط عنوان مليئًا برموز النسبة المئوية.
ترميزات النسبة الشائعة
📊 ترميزات النسبة الشائعة
| الحرف | المرمَّز | ملاحظة |
|---|---|---|
| مسافة | %20 | شائع جدًا في سلاسل الاستعلام |
| # | %23 | وإلا يبدأ # مقطعًا (fragment) |
| & | %26 | & يفصل أزواج الاستعلام |
| = | %3D | = يفصل الاسم عن القيمة |
| ? | %3F | ? يبدأ سلسلة الاستعلام |
| / | %2F | الشرطة المائلة داخل قيمة قد تحتاج ترميزًا |
استعلام مرمَّز في رابط
كتابة استعلام بحث يدويًا مع مسافة أوضح ديمو للمبتدئين. رمّز المسافة في القيمة؛ واترك ? و = البنيويين كما هما.
رابط بمسافة مرمَّزة في الاستعلام
html<p>
<a href="search.html?q=html%20links">Search for html links</a>
</p>قراءة العينة
search.htmlهو المسار؛ أبقِ أسماء ملفات المسار بسيطة عندما تتحكم بها?q=يبدأ معامل استعلام اسمهqhtml%20linksهي القيمة «html links» بمسافة مرمَّزة%20- نص الرابط الظاهر يمكن أن يبقى مقروءًا للإنسان؛ الترميز ينتمي إلى الـ URL
فضّل أسماء ملفات نظيفة؛ رمّز القيم
ترميز اسم ملف صفحة كامل يحتوي مسافات مزعج للجميع. فضّل my-page.html على my page.html. استخدم percent-encoding أساسًا لقيم الاستعلام والأحرف الخاصة داخل عناوين URL يجب أن تجمعها يدويًا.
مسار نظيف مقابل قيمة استعلام مرمَّزة
html<!-- Prefer a clean path -->
<a href="my-page.html">My page</a>
<!-- Encode spaces inside query values when needed -->
<a href="results.html?topic=url%20encode">URL encode results</a>النماذج والمتصفحات غالبًا تساعد
عندما يُرسل المستخدم نموذج HTML بـ method="get"، ترمّز المتصفحات عادةً قيم الحقول في سلسلة الاستعلام نيابةً عنك. ذلك لا يلغي الحاجة لفهم %20 عندما تقرأ السجلات، أو تشارك روابط، أو تكتب href يدويًا. معرفة النمط تجعل التصحيح أسرع.
ليست نفس كيانات HTML
في نص HTML، & كيان لحرف علامة العطف. في URL، علامة عطف تكون بيانات قد تظهر كـ %26. أدوات مختلفة، سياقات مختلفة. وبالمثل، charset الملف UTF-8 يتعلق بفك ترميز ملف .html — ولا يحل محل percent-encoding داخل عناوين URL.
غير ASCII في عناوين URL (ملاحظة للمبتدئين)
الحروف خارج ASCII الأساسي قد تظهر كتسلسلات نسبة أطول في العناوين الحقيقية. لا تحتاج حفظ تلك الجداول في هذه الجلسة. تذكّر القاعدة: عندما يكون الحرف غير آمن أو محجوزًا كبيانات، percent-encoding هو كيف تحملها عناوين URL. لصفحات التعلم، أبقِ استعلامات الديمو بلاتينية بسيطة مع %20 حتى تصبح مرتاحًا.
تمرّن في محررك
- أنشئ رابطًا يتضمن
hrefاستعلامًا مثل?q=hello%20world. - افتح الرابط وراقب شريط العنوان.
- غيّر
%20إلى مسافة خام في المصدر، أعد التحميل، وقارن كيف يُطبّع المتصفح الـ URL أو يكسره. - أعد تسمية ملف تمرين بواصلات بدل المسافات وحدّث الروابط وفقًا لذلك.
- اكتب قيمة استعلام تحتاج
%26لو كانت علامة العطف جزءًا من البيانات — ثم تأكد أنك لم ترمّز&البنيوي بين المعاملات.
أخطاء سهلة
- لصق مسافات خام في عناوين URL داخل الكود دون التحقق من النتيجة
- ترميز مخطط
https://أو الهيكل البنيوي كله بالخطأ - الخلط بين كيانات HTML (
&) ورموز URL (%26) - وضع مسافات في كل اسم ملف والأمل أن الترميز ينقذ التنقل إلى الأبد
- ترميز
?/&/=البنيوية التي يجب أن تبقى نحو URL بين الأجزاء
ملخص
- يستخدم ترميز URL
%مع رقمين hex (مسافة →%20) - الأحرف المحجوزة وغير الآمنة تحتاج ترميزًا عندما تكون بيانات
- فضّل أسماء ملفات بسيطة؛ رمّز قيم الاستعلام عندما تكتبها يدويًا
- النماذج والمتصفحات غالبًا ترمّز تلقائيًا عند الإرسال
- percent-encoding ليس نفس عمل كيانات HTML أو charset الملف
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى