رموز متنوعة في HTML

أهلاً يا مهندس! اليوم بنتكلم عن موضوع بسيط بس مهم جداً في HTML: الرموز المتنوعة. كيف تكتب علامة حقوق النشر ©، أو علامة السهم →، أو حتى المسافة اللي ما تنكسر  ؟ الموضوع سهل جداً، ركز معي.

ليش نحتاج الرموز أصلاً؟

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

ملاحظة: HTML مصمم عشان يفهم أكواد معينة. لما تحط رمز خاص مباشرة، ممكن يفهمها غلط أو ما يعرضها أبدًا. هنا يجي دور "كيانات الرموز" (Character Entities).

كيف نكتب الرموز؟

عندنا طريقتين أساسيتين لكتابة الرموز الخاصة في HTML:

بالاسم (Named Entities): هذي أسهل طريقة لأنها تستخدم اسم معروف للرمز. تبدأ بعلامة & وتنتهي بـ ;. مثلاً، علامة حقوق النشر هي ©.

مثال:
```
<pre><code>حقوق النشر &copy; 2023. جميع الحقوق محفوظة.</code></pre>
```
بالرقم (Numeric Entities): هذي الطريقة تستخدم رقم الرمز (سواء عشري أو سداسي عشري). تبدأ بـ &# للرقم العشري أو &#x للرقم السداسي العشري، وتنتهي بـ ;.

مثال (نفس علامة حقوق النشر):
```
<pre><code>حقوق النشر &#169; 2023. جميع الحقوق محفوظة.</code></pre>
```
أو بالسداسي عشري:
```
<pre><code>حقوق النشر &#xA9; 2023. جميع الحقوق محفوظة.</code></pre>
```

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

أشهر الرموز اللي ممكن تحتاجها

هذي قائمة بأكثر الرموز استخداماً:

< (أقل من) يعرض: <
> (أكبر من) يعرض: >
& (علامة &) يعرض: &
" (علامة اقتباس مزدوجة) يعرض: "
' (علامة اقتباس مفردة / Apostrophe) يعرض: '
© (حقوق النشر) يعرض: ©
® (علامة تجارية مسجلة) يعرض: ®
™ (علامة تجارية) يعرض: ™
  (مسافة لا تنكسر - Non-breaking space)
– (واصلة قصيرة - En dash) يعرض: –
— (واصلة طويلة - Em dash) يعرض: —
€ (رمز اليورو) يعرض: €
£ (رمز الجنيه الإسترليني) يعرض: £
¥ (رمز الين الياباني) يعرض: ¥
→ (سهم لليمين) يعرض: →
← (سهم لليسار) يعرض: ←

أمثلة عملية

شوف كيف ممكن نستخدمها في صفحتك:

<pre><code>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>درس الرموز المتنوعة</title>
</head>
<body>
    <h1>مرحباً بك في موقعنا!</h1>
    <p>هذا النص يحتوي على علامة &copy; حقوق النشر لعام 2023.</p>
    <p>السعر: &euro;19.99 فقط!</p>
    <p>اضغط هنا &rarr; للمزيد من المعلومات.</p>
    <p>المسافة اللي ما تنكسر: كلمة&nbsp;&nbsp;&nbsp;كلمة أخرى.</p>
    <p>علامة تجارية مسجلة: اسم المنتج &reg;</p>
</body>
</html>
</code></pre>

نصيحة أخيرة

عشان تتجنب مشاكل الترميز بشكل عام، دائماً تأكد إنك تستخدم <meta charset="UTF-8"> في قسم <head> لصفحتك. هذا بيخلي المتصفح يتعامل مع أغلب الرموز واللغات بشكل صحيح بدون الحاجة لاستخدام الكيانات في كثير من الأحيان، لكن الكيانات تظل ضرورية للرموز اللي لها معنى خاص في HTML (مثل < و > و &).

أتمنى إن الدرس كان مفيد وسهل! بالتوفيق.

← السابق الفهرس