الرموز المطبعية في HTML

الرموز المطبعية في HTML

مرحباً يا مهندسي الويب!

اليوم سنتحدث عن الرموز المطبعية في HTML. قد تبدو تفصيلاً صغيراً، لكنها أساسية لجعل محتواك يظهر بشكل صحيح واحترافي على الويب.

لماذا نحتاج الرموز المطبعية الخاصة؟

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

طرق تمثيل الرموز

هناك طريقتان رئيسيتان لتمثيل الرموز الخاصة في HTML:

الكيانات الحرفية المسماة (Named Character Entities)

هذه هي الطريقة الأسهل والأكثر قابلية للقراءة. تبدأ بعلامة & وتنتهي بفاصلة منقوطة ;، وفي المنتصف يكون اسم الكيان. إليك بعض الأمثلة الشائعة:

  • < لعرض < (علامة أصغر من)
  • > لعرض > (علامة أكبر من)
  • & لعرض & (علامة العطف)
  • " لعرض " (علامة اقتباس مزدوجة)
  • ' لعرض ' (علامة اقتباس مفردة - ليست مدعومة بالكامل في جميع إصدارات HTML القديمة، يفضل استخدام الكيان الرقمي ')
  •   لمسافة غير قابلة للكسر (Non-breaking space)

الكيانات الحرفية الرقمية (Numeric Character Entities)

هذه الطريقة تستخدم رمز ASCII أو Unicode الخاص بالحرف. تبدأ أيضاً بعلامة & وتنتهي بفاصلة منقوطة ;. هناك نوعان:

  • الكسرية (Decimal): تبدأ بـ &# متبوعة بالرقم العشري. مثال: < لعرض <.
  • السداسية عشرية (Hexadecimal): تبدأ بـ &#x متبوعة بالرقم السداسي عشري. مثال: < لعرض <.

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

رموز شائعة الاستخدام وكيفية كتابتها

  • علامة حقوق النشر (Copyright):
    • الاسم: ©
    • الرقمي (عشري): ©
    • الرقمي (سداسي عشري): ©
    • النتيجة: ©
  • علامة تجارية مسجلة (Registered Trademark):
    • الاسم: ®
    • الرقمي (عشري): ®
    • الرقمي (سداسي عشري): ®
    • النتيجة: ®
  • علامة تجارية (Trademark):
    • الاسم: ™
    • الرقمي (عشري): ™
    • الرقمي (سداسي عشري): ™
    • النتيجة: ™
  • المسافة غير القابلة للكسر (Non-breaking Space):
    • الاسم:  
    • الرقمي (عشري):  
    • الرقمي (سداسي عشري):  
    • النتيجة: (مسافة تمنع الكسر بين الكلمات)
  • الشرطة الطويلة (Em Dash):
    • الاسم: —
    • الرقمي (عشري): —
    • الرقمي (سداسي عشري): —
    • النتيجة: —
  • الشرطة المتوسطة (En Dash):
    • الاسم: –
    • الرقمي (عشري): –
    • الرقمي (سداسي عشري): –
    • النتيجة: –

ملاحظة هامة: مع انتشار استخدام ترميز UTF-8 (الذي يجب أن يكون الترميز الافتراضي لصفحاتك)، يمكنك في كثير من الأحيان كتابة الرموز مباشرةً في ملف HTML دون الحاجة إلى الكيانات. مثلاً، يمكنك كتابة © مباشرةً بدلاً من ©. لكن معرفة الكيانات تظل ضرورية للتوافقية مع المتصفحات القديمة، وللأحرف التي قد لا تظهر بشكل صحيح في بعض البيئات، وللفهم العام لكيفية عمل HTML.

مثال عملي

دعنا نرى كيف نستخدم هذه الرموز في HTML:

<p>حقوق النشر © 2023 لشركتنا. جميع الحقوق محفوظة ®.</p>
<p>هذا المنتج هو علامة تجارية مسجلة ™ لـ "اسم الشركة".</p>
<p>هذه مسافة لن تنكسر.</p>
<p>هذا مثال على الشرطة الطويلة—تستخدم للفصل بين الأفكار.</p>
<p>وهذا مثال على الشرطة المتوسطة–تستخدم في نطاقات الأرقام (مثل 2000–2023).</p>
<p>هذه جملة تحتوي على علامتي اقتباس "مزدوجة" و 'مفردة'.</p>

أتمنى أن يكون هذا الدرس قد أوضح لك أهمية وكيفية استخدام الرموز المطبعية في HTML. استمر في البناء، ونتطلع لرؤية إبداعاتك!

مقالات ذات صلة قد تهمك: