شرح الرموز والإيموجي في HTML بالعربي — Symbols & Emojis

السابق التالي

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

طريقتان لكتابة أي رمز

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

الاسم النصي: مثل © أو ∑ — سهل القراءة لكن ليس كل رمز له اسم.
الرقم العددي: مثل © أو ∑ — يعمل مع كل رمز بدون استثناء لأنه رقم Unicode.

<!-- الطريقتان تُعطيان نفس النتيجة: © -->
<p>جميع الحقوق محفوظة &copy; 2025</p>     <!-- اسم نصي -->
<p>جميع الحقوق محفوظة &#169; 2025</p>    <!-- رقم عددي -->

الرموز الرياضية الشائعة

هذه الرموز غير موجودة على لوحة المفاتيح العادية، لكنها شائعة جداً في المواقع التعليمية والعلمية:

الرمز	الكود النصي	الكود العددي	الاستخدام
∑	`∑`	`∑`	المجموع (Sum)
∞	`∞`	`∞`	اللانهاية (Infinity)
√	`√`	`√`	الجذر التربيعي
≠	`≠`	`≠`	لا يساوي (Not equal)
≤	`≤`	`≤`	أصغر من أو يساوي
≥	`≥`	`≥`	أكبر من أو يساوي
π	`π`	`π`	العدد باي (Pi)

الحروف اليونانية

تُستخدم كثيراً في المعادلات والأوصاف العلمية (الفيزياء، الرياضيات، الكيمياء):

الرمز	الكود	الاسم
α	`α`	Alpha — يُستخدم للإصدارات التجريبية الأولى
β	`β`	Beta — الإصدار التجريبي الثاني
γ	`γ`	Gamma
Δ	`Δ`	Delta (كبير) — التغيير في الرياضيات
θ	`θ`	Theta — الزاوية في الهندسة
λ	`λ`	Lambda — الطول الموجي في الفيزياء
μ	`μ`	Mu — الميكرو (مليونث)
σ	`σ`	Sigma — الانحراف المعياري في الإحصاء
Ω	`Ω`	Omega (كبير) — الأوم في الكهرباء

تنبيه حالة الأحرف: الحروف اليونانية حساسة — Δ (بـ D كبيرة) تُعطي Δ، بينما δ (بـ d صغيرة) تُعطي δ. انتبه للفرق عند الكتابة.

الإيموجي (Emojis) في HTML

الإيموجي ليست صوراً! هي في الحقيقة أحرف نصية من معيار Unicode، تماماً كالحروف العربية والإنجليزية. يمكنك كتابتها في HTML بثلاث طرق:

<!-- الطريقة الأولى: لصق الإيموجي مباشرة (تعمل مع UTF-8) -->
<p>مرحباً بكم في DevArabi 🚀</p>

<!-- الطريقة الثانية: الكود العددي العشري -->
<p>مرحباً بكم في DevArabi &#128640;</p>

<!-- الطريقة الثالثة: الكود Hex (ست عشري) -->
<p>مرحباً بكم في DevArabi &#x1F680;</p>

الثلاث طرق تُعطي نفس النتيجة: 🚀

إليك بعض الإيموجي الشائعة مع أكوادها:

الإيموجي	الكود العددي	الوصف
😀	`😀`	وجه مبتسم
❤️	`❤`	قلب أحمر
⭐	`⭐`	نجمة
🚀	`🚀`	صاروخ
✅	`✅`	علامة صح خضراء
⚠️	`⚠`	تحذير

شرط أساسي: لكي تظهر الإيموجي والرموز بشكل صحيح في كل المتصفحات، يجب أن يكون في <head> صفحتك:
<meta charset="UTF-8">
بدونه قد تظهر رموز غريبة أو مربعات فارغة بدل الإيموجي.

مثال عملي — صفحة تستخدم الرموز

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>مميزات الدورة</title>
</head>
<body>

    <h1>لماذا تتعلم معنا؟ 🚀</h1>

    <ul>
        <li>✅ شرح مبسط بالعربي من الصفر</li>
        <li>✅ أمثلة عملية حقيقية</li>
        <li>✅ مجاني 100% &amp; بدون تسجيل</li>
        <li>⭐ أكثر من 10,000 طالب راضٍ</li>
    </ul>

    <p>النسبة الدراسية: &gt; 95% من الطلاب يُكملون الكورس كاملاً</p>

    <footer>
        <p>جميع الحقوق محفوظة &copy; 2025 DevArabi</p>
    </footer>

</body>
</html>

الأسئلة الشائعة — FAQ

هل يمكنني نسخ الإيموجي من الهاتف ولصقه مباشرة في الكود؟

نعم! طالما صفحتك تستخدم charset="UTF-8"، يمكنك لصق أي إيموجي مباشرة في نص HTML. هذه هي الطريقة الأسهل والأكثر وضوحاً عند قراءة الكود.

أين أجد رقم Unicode لأي إيموجي أريده؟

ابحث في موقع emojipedia.org — أي إيموجي يُظهر لك رقمه تماماً. أيضاً يمكنك البحث في جوجل عن اسم الإيموجي مع كلمة "unicode codepoint".

هل يجب استخدام الكود العددي أم الاسم النصي؟

استخدم الاسم النصي متى وُجد — هو أوضح وأسهل للقراءة. استخدم الكود العددي للرموز التي ليس لها اسم نصي (مثل الإيموجي والرموز النادرة).

ممتاز! أصبحت الآن قادراً على إضافة أي رمز في العالم لصفحتك. في الدرس القادم، سنختم الكورس بموضوع ترميز الأحرف (Charsets) — وسوم الميتا الأساسية لكل صفحة HTML احترافية.

السابق التالي

DevArabi

دورة تعلم HTML