الرموز الخاصة (HTML Entities)

في لغة HTML، هناك بعض الأحرف التي لا يمكنك استخدامها بشكل مباشر في الكود لأن المتصفح قد يسيء فهمها. على سبيل المثال، إذا كتبت علامة "أصغر من"، سيعتقد المتصفح أنك تحاول فتح وسم جديد. بالإضافة إلى ذلك، هناك رموز لا توجد على لوحة المفاتيح العادية (مثل رمز حقوق النشر © أو العملات الأجنبية). هنا يأتي دور "كيانات HTML" أو (HTML Entities). هذا الدرس هو دليلك الشامل لكتابة أي رمز تتخيله داخل صفحات الويب بشكل صحيح واحترافي.

مفهوم الرموز الخاصة (Entities) ولماذا نحتاجها؟

الـ HTML Entity عبارة عن كود قصير يبدأ بعلامة & (Ampersand) وينتهي بفاصلة منقوطة ; (Semicolon). يتم استخدامه لإخبار المتصفح بضرورة عرض رمز معين بدلاً من تفسيره كجزء من كود البرمجة.

آلية عمل الـ Entities

البدء والإنهاء: القاعدة الذهبية هي البدء بـ & والإنهاء بـ ;. نسيان الفاصلة المنقوطة قد يجعل المتصفح يفشل في تحويل الرمز.
لماذا نستخدمها؟
- لتجنب تضارب الرموز مع لغة HTML (مثل الأقواس < و >).
- لكتابة رموز غير موجودة في لوحة المفاتيح (مثل الرموز التعبيرية القديمة، الأسهم، الرموز الرياضية).
- لضمان ظهور الرموز بشكل صحيح بغض النظر عن ترميز الملف (Encoding)، رغم أن UTF-8 حل معظم هذه المشاكل، إلا أن الـ Entities تظل ضرورية للرموز المحجوزة.

اختر - ما هي العلامة التي يجب أن يبدأ بها أي كود لرمز خاص (HTML Entity)؟
(أ) % (ب) $ (ج) & (د) #

الإجابة: (ج) & (علامة Ampersand).

الرموز المحجوزة برمجياً (< > &)

هذه هي أهم فقرة في الدرس. المتصفح يقوم بقراءة الكود ويبحث عن علامات < ليعرف بداية الوسوم. إذا أردت كتابة معادلة رياضية مثل "5 أقل من 10"، لا يمكنك كتابتها مباشرة لأن المتصفح قد يظن أنك تبدأ وسماً جديداً.

أهم 3 رموز يجب حفظها

الرمز	الوصف	اسم الكيان (Entity Name)	رقم الكيان (Entity Number)	سبب الأهمية
<	أصغر من (Less Than)	`<`	`<`	يظنه المتصفح بداية وسم فتح.
>	أكبر من (Greater Than)	`>`	`>`	يظنه المتصفح نهاية وسم إغلاق.
&	علامة العطف (Ampersand)	`&`	`&`	يظن المتصفح أنها بداية رمز خاص جديد.
"	علامة تنصيص مزدوجة	`"`	`"`	مهمة جداً داخل الـ Attributes.
'	علامة تنصيص مفردة	`'`	`'`	مهمة داخل أكواد الجافاسكريبت والـ Attributes.

مثال (1): كتابة أكواد HTML داخل صفحة ويب

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

كيفية عرض كود h1 دون تنفيذه


<p>
    لكتابة وسم العنوان الرئيسي نستخدم الكود التالي:
    <br>
    &lt;h1&gt; هذا عنوان &lt;/h1&gt;
</p>

<p>
    المعادلة الرياضية:
    5 &lt; 10 (خمسة أقل من عشرة)
</p>

اختر - إذا أردت كتابة الكود <br> ليظهر للمستخدم على الشاشة ولا يتم تنفيذه كسطر جديد، ماذا تكتب؟
(أ) <br> (ب) <br> (ج) /br/ (د) #br

الإجابة: (ب) <br> (استبدال الأقواس برموزها).

مشكلة المسافات والحل ( )

في HTML، هناك قاعدة تسمى "Whitespace Collapse" (انهيار المسافات). هذا يعني أنك لو ضغطت زر المسافة (Space) عشر مرات متتالية في الكود، سيعرضها المتصفح كمسافة واحدة فقط. ولحل هذه المشكلة، نستخدم الكيان  .

ما هو NBSP؟

الاختصار: ترمز إلى Non-Breaking SPace (مسافة غير قابلة للكسر).
الوظيفة 1 (تعدد المسافات): تسمح لك بوضع مسافات متعددة متجاورة دون أن يتم دمجها.
الوظيفة 2 (منع الكسر): تمنع المتصفح من فصل كلمتين عن بعضهما عند نهاية السطر. مثال: عند كتابة "10 kg"، لا تريد أن يكون الرقم "10" في نهاية سطر و "kg" في بداية السطر التالي. وضع   بينهما يجبر المتصفح على إبقائهم ككتلة واحدة ("لصق" الكلمات).

مثال (2): استخدام المسافات

إجبار المسافات ومنع فصل الوحدات


<p>
    هذه جملة عادية بمسافة       واحدة (رغم وجود مسافات كثيرة بالكود).
</p>

<p>
    هذه جملة بمسافات&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;حقيقية.
</p>

<p>
    وزن الحقيبة هو 20&nbsp;kg (لاحظ هنا لن ينفصل الرقم عن الوحدة أبداً).
</p>

اختر - ما هو الكود المستخدم لمنع المتصفح من دمج المسافات المتعددة؟
(أ) &space; (ب) &break; (ج)   (د) ∅

الإجابة: (ج)   (Non-Breaking Space).

رموز العملات والعلامات التجارية

كثيراً ما نحتاج لوضع رموز حقوق الملكية أو أسعار المنتجات بعملات مختلفة. هذه الرموز مدعومة بشكل ممتاز عبر الـ Entities.

جدول الرموز الشائعة

الرمز	الوصف	الكود (Entity Name)	الكود (Entity Number)
©	حقوق النشر (Copyright)	`©`	`©`
®	علامة مسجلة (Registered)	`®`	`®`
™	علامة تجارية (Trademark)	`™`	`™`
€	اليورو (Euro)	`€`	`€`
£	الجنيه الإسترليني (Pound)	`£`	`£`
¥	الين الياباني (Yen)	`¥`	`¥`

مثال (3): تذييل صفحة (Footer)

مثال عملي لاستخدام رموز الحقوق


<footer>
    <p>جميع الحقوق محفوظة &copy; 2025 لشركة المستقبل.</p>
    <p>اسم المنتج هو علامة تجارية مسجلة &reg; ولا يجوز استخدامه.</p>
    <p>السعر: 50&euro; فقط لفترة محدودة.</p>
</footer>

اختر - أي من الرموز التالية يستخدم لعلامة حقوق النشر ©؟
(أ) © (ب) &right; (ج) &c; (د) &cr;

الرموز الرياضية والأسهم

إذا كنت تبني موقعاً تعليمياً لمواد الرياضيات أو العلوم، ستحتاج بشدة لهذه الرموز لكتابة المعادلات بشكل سليم.

رموز الرياضيات والاتجاهات

الرمز	المعنى	الكود
×	علامة الضرب (أفضل من حرف x)	`×`
÷	علامة القسمة	`÷`
∑	علامة الجمع (سيجما)	`∑`
∞	علامة اللانهاية (Infinity)	`∞`
←	سهم لليسار	`←`
↑	سهم للأعلى	`↑`
↓	سهم للأسفل	`↓`
→	سهم لليمين	`→`

مثال (4): معادلة رياضية بسيطة

كتابة معادلة رياضية


<p>
    حل المعادلة التالية:
    <br>
    10 &times; 2 &divide; 5 = 4
</p>
<p>
    اضغط على السهم للمتابعة: &larr; السابق | التالي &rarr;
</p>

اختر - ما هو الرمز المناسب لعلامة الضرب الحسابية (ليس حرف X)؟
(أ) &multi; (ب) × (ج) &x; (د) &cross;

الإجابة: (ب) ×

الفرق بين الاسم (Name) والرقم (Number)

مقارنة سريعة

الاسم (Entity Name):
- الميزة: سهل التذكر (كلمة copy أسهل من رقم 169).
- العيوب: قد لا تدعم المتصفحات القديمة جداً كل الأسماء (رغم أن هذا نادر الآن).
الرقم (Entity Number):
- الميزة: مدعوم عالمياً بنسبة 100% لأنه يشير لموقع الرمز في جدول ASCII أو Unicode.
- العيوب: صعب الحفظ والتذكر.
نصيحة: استخدم الأسماء للرموز الشائعة (مثل gt, lt, amp, copy, nbsp)، واستخدم الأرقام للرموز النادرة جداً.

اختر - لماذا يفضل المطورون غالباً استخدام "الاسم" (مثل ©) بدلاً من "الرقم"؟
(أ) لأنه أقصر في الكتابة. (ب) لأنه أسهل في التذكر والقراءة. (ج) لأن الرقم غير مدعوم في HTML5. (د) لأن الاسم يعطي ألواناً أفضل.

الإجابة: (ب) لأنه أسهل في التذكر والقراءة.