شرح HTML Entities and emoji

تعتبر الـ Entities عناصر هامة في HTML، حيث تُستخدم لتمثيل الحروف والرموز التي يكون من الصعب إدراجها مباشرة في صفحات الويب. يتم تعريف الـ "Entities" باستخدام شخصيات خاصة وعلامات محددة في HTML.
وبما أن الحروف والرموز يجب أن تُعرض بشكل صحيح على جميع المستعرضات، فإن استخدام الـ Entities يسمح بضمان تمثيلها بشكل صحيح دون تغيير معناها.
يتم تمثيل الـ Entities باستخدام علامة ampersand (&) وبعد ذلك توضع الشخصية المطلوبة وأخيرًا يتم إغلاق الـ Entity" بواسطة فاصلة منقوطة ( ; ). فيما يلي بعض الأمثلة على استخدام الـ Entities في صفحات الويب:

تمثيل الأحرف الخاصة

HTML


<!DOCTYPE html>
<html>
<head>
    <title>welcome</title>
</head>
<body>
    <ul>
        <li>< - &lt;</li>
        <li>> - &gt;</li>
        <li>& - &amp;</li>
        <li>@ - &#64;</li>
    </ul>
</body>
</html>

تمثيل الأحرف ذات الأكواد العشرية والثمانية يمكن استخدام الـ Entities لتمثيل الأحرف ذات الأكواد العشرية والثمانية، مثل:

HTML


<!DOCTYPE html>
<html>
<head>
    <title>welcome</title>
</head>
<body>
    <ul>
        <li>&#x2600; - ☀/li>
        <li>&#x1F601; - 😁/li>
        <li>&#9733; - &#x2605; - ★/li>
    </ul>
</body>
</html>

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

على أي حال، فيما يلي بعض الأمثلة على بعض الـ "Entities" الشائعة المستخدمة في صفحات الويب:

< تمثل علامة "أقل من" ( < ) > تمثل علامة "أكبر من" (> )

& تمثل علامة "و" ( & )

" تمثل علامة الاقتباس ( " )

' تمثل علامة التنصيص الفردي ( ' )

© تمثل علامة حقوق النشر ( © )

® تمثل علامة العلامة التجارية ( ® )

€ تمثل رمز اليورو ( € )

£ تمثل رمز الجنيه الاسترليني ( £ )

¥ تمثل رمز الين الياباني ( ¥ )

° تمثل علامة الدرجة ( ° )

± تمثل علامة زائد أو ناقص ( ± )

× تمثل علامة الضرب ( × )

÷ تمثل علامة القسمة ( ÷ )

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

á تمثل حرف "A" مع حرف اللفظ القصير الإسباني ( á )

ç تمثل حرف "C" مع حرف اللفظ القصير الفرنسي ( ç )

ò تمثل حرف "O" مع الحرف اللفظ القصير الإيطالي ( ò )

ß تمثل حرف "S" مزدوج الحرف (ß) المستخدم في اللغة الألمانية

كما يمكن استخدام الـ "Entities" لتمثيل الرموز الرياضية والرموز العلمية، مثل:

∞ تمثل علامة لا نهائية ( ∞ )

∑ تمثل علامة المجموع ( ∑ )

α تمثل حرف "ألفا" اليوناني ( α )

β تمثل حرف "بيتا" اليوناني ( β )

HTML Emoji

يمكن استخدام الإيموجي (emoji) في صفحات الويب باستخدام عناصر HTML المخصصة لها، والتي تدعمها معظم المتصفحات الحديثة. يمكن استخدام الإيموجي في العناصر مثل

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

HTML

<ul>
    <li>أهلاً بالعالم 🌎</li>
</ul>

إضافة إيموجي باستخدام الرموز المختصرة:

HTML


<ul>
    <li>أهلاً بالعالم &#x1F30E;</li>
</ul>

وفيما يلي قائمة ببعض أكواد الإيموجي الأكثر شيوعًا:

😀 : 😀
😃 : 😃
😄 : 😄
😁 : 😁
😆 : 😆
😉 : 😉
😊 : 😊
😍 : 😍
😘 : 😘
😜 : 😜
😝 : 😝
😛 : 😛
😎 :😎
😏 : 😏
😇 : 😇
🤔 : 🤔
🤨 : 🤨
🤯 :🤯
😴 : 😴
🥰 : 🥰
❤️ : ❤
🎉 : 🎉
🎁 : 🎁
...

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.