الكيانات والرموز والإيموجي في HTML شرح شامل للمبتدئين

الكيانات والرموز والإيموجي في HTML

في درس النهاردة من كورس تعلم HTML من الصفر، هنتكلم عن حاجة مهمة جدًا وهتشوفها كتير أثناء كتابة الكود وهي: الكيانات النصية (Entities)، الرموز (Symbols)، والإيموجي (Emojis).

يعني إيه HTML Entities؟

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

علشان كده بنكتبهم باستخدام الكيانات الخاصة:

<  معناها less than (أصغر من)
>  معناها greater than (أكبر من)
&  معناها and (علامة &)
"  معناها double quote (علامة تنصيص مزدوجة)
'  معناها single quote (علامة تنصيص مفردة)

الكيان بيبدأ بعلامة & وبينتهي بعلامة ;. مهم جدًا تكتب الاتنين علشان الرمز يظهر صح.

HTML Symbols: الرموز المختلفة في HTML

HTML بتوفرلك رموز كتير تقدر تضيفها في صفحتك زي العلامات الرياضية، الأسهم، العملات، ورموز خاصة بالتنسيق.

أمثلة على الرموز:

©  👉 علامة حقوق النشر ©
®  👉 علامة ® مسجلة
€  👉 رمز اليورو €
$ 👉 رمز الدولار $
¥   👉 رمز الين ¥
→ 👉 سهم لليمين →
← 👉 سهم لليسار ←
↑ 👉 سهم للأعلى ↑
↓ 👉 سهم للأسفل ↓
± 👉 رمز زائد أو ناقص ±
√ 👉 الجذر التربيعي √

فيه طريقتين تكتب بيهم الرمز:

الاسم: زي ©
الكود الرقمي: زي ©

Emojis في HTML: الإيموجي والرموز التعبيرية

دلوقتي تعالوا نشوف إزاي نضيف إيموجي لصفحة HTML. لو بتستخدم الترميز UTF-8 (وده مهم جدًا تكتبه في <head>) تقدر تضيف الإيموجي بطريقتين:

1. باستخدام كود Unicode:

  👉 😀 وجه مبتسم
  👉 🔥 نار
  👉 🚀 صاروخ
  👉 🎉 احتفال

2. استخدام الإيموجي مباشر: زي كده 😀🔥🚀

بس علشان الإيموجي يشتغل صح لازم تحط السطر ده داخل الوسم <head>:

<meta charset="UTF-8">

أهم النصائح في التعامل مع الكيانات والرموز

دايمًا ابدأ الكيان بـ & واختتمه بـ ;
لو نسيت الـ ; الرمز مش هيظهر
اتأكد إنك كاتب الترميز UTF-8 في أول الصفحة
الإيموجي بتضيف لمسة لطيفة للتصميم لكن بلاش إفراط في استخدامها

ليه بنستخدم الكيانات النصية؟

لو حاولت تكتب بعض الحروف في HTML زي < أو &، المتصفح هيترجمهم على إنهم أكواد، ومش هيعرضهم كنص عادي، فبيحصل خطأ في الصفحة. عشان كده بنستخدم الكيانات النصية كبديل آمن.

استخدام الرموز لتحسين تجربة المستخدم

ممكن تستخدم الرموز لتحسين التنسيق زي:

الأسهم لتوجيه المستخدم
علامات التنصيص لتوضيح اقتباس
العملات لتوضيح الأسعار
العلامات الرياضية في صفحات الحساب أو التعليم

الخلاصة

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

لو بتكتب كود HTML وعايز تعرض أي رمز خاص أو علامة مش موجودة في الكيبورد بسهولة، هتلاقي الكيانات دي مفيدة جدًا ليك.

استمر في التجربة واستخدم الرموز والإيموجي بشكل ذكي في شغلك، وده هيساعدك تخلي صفحاتك أكتر تفاعل وجاذبية.

تابع باقي دروس كورس تعلم HTML من الصفر علشان تطور مهاراتك وحدة بوحدة.

رابط الحصول علي الرموز