الرموز التعبيرية، أو الـ Emojis، هي شخصيات مميزة تضافي نكهةً وحيويةً إلى المحتوى الإلكتروني. في لغة HTML، يمكنك استخدام الرموز التعبيرية مباشرةً من مجموعة الأحرف UTF-8. إليك بعض الأمثلة:
- 😄 😍 💗
لكل رمز تعبيري قيمة رقمية خاصة تمثله في مجموعة الأحرف. يمكنك استخدام هذه القيمة لكتابة الرمز مباشرةً،
جدول مرجعي:
يمكنك أيضًا الاستفادة من جداول مرجعية لرموز HTML التعبيرية، والتي تظهر جميع الرموز المتاحة مع قيمها العددية ووصف بسيط لكل رمز. إليك جدول مرجعي مختصر:
| Emoji | Value |
|---|---|
| 🗻 | 🗻 |
| 🗼 | 🗼 |
| 🗽 | 🗽 |
| 🗾 | 🗾 |
| 🗿 | 🗿 |
| 😀 | 😀 |
| 😁 | 😁 |
| 😂 | 😂 |
| 😃 | 😃 |
| 😄 | 😄 |
| 😅 | 😅 |
أمثلة على رموز تعبيرية HTML
🚀🚁🚂🚃🚄
💺💻💼💽💾
👮👯👰👱👲
🐂🐃🐄🐅🐆
ما هي الرموز التعبيرية (Emojis)؟
قد تبدو الرموز التعبيرية كصور صغيرة أو أيقونات، لكنها في الحقيقة ليست كذلك!
هي في الواقع رموز (حروف) ضمن مجموعة الأحرف UTF-8 (Unicode). تعتبر UTF-8 واحدة من أوسع مجموعات الأحرف التي تشمل تقريبًا كل الحروف والرموز المستخدمة في العالم.
لذلك، عندما تكتب رمزًا تعبيريًا مثل ، فأنت في الواقع تكتب سلسلة محددة من الأحرف في UTF-8 والتي يتعرف عليها المتصفح كرمز تعبيري يعرضه بشكل الصورة الصغيرة التي نعرفها.
هذا يجعل استخدام الرموز التعبيرية أمرًا سهلًا ومرنًا، حيث يمكنك إدراجها ضمن نصوص HTML أو مواقع التواصل الاجتماعي أو أي مكان يمكن كتابة النصوص فيه، وستظهر بالشكل الصحيح طالما أن البرنامج المستخدم يدعم مجموعة أحرف UTF-8.
صفة charset في HTML: تحديد لغة الأحرف للمحتوى
لكي يعرض متصفح الإنترنت صفحة HTML بشكل صحيح، يحتاج إلى معرفة مجموعة الأحرف المستخدمة في تلك الصفحة.
يتم تحديد مجموعة الأحرف باستخدام الصفة charset داخل عنصر meta، كما يلي:
<meta charset="UTF-8">إذا لم يتم تحديده، فإن UTF-8 هو مجموعة الأحرف الافتراضية في HTML.
أحرف UTF-8: أكثر من مجرد لوحة مفاتيح!
تحتوي مجموعة أحرف UTF-8 على العديد من الرموز والحروف التي لا تتوفر عادة على لوحة المفاتيح التقليدية. لكن هذا لا يعني أنه لا يمكنك استخدامها!
الخبر السار هو أنه يمكنك دائمًا عرض هذه الأحرف عن طريق استخدام أرقام تسمى بـ “أرقام الكيانات” (entity numbers).
على سبيل المثال:
- حرف “A” يعادل الرقم 65.
- حرف “B” يعادل الرقم 66.
- حرف “C” يعادل الرقم 67.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<p>I will display A B C</p>
<p>I will display A B C</p>
</body>
</html>
شرح المثال: تفعيل الأحرف باستخدام الكيانات
في المثال الذي قدمته، هناك نقطتين مهمتين يجب التركيز عليهما:
1- تحديد مجموعة الأحرف:
- يحدد العنصر
meta charset="UTF-8"أن الصفحة تستخدم مجموعة أحرفUTF-8. كما ذكرنا سابقًا، تحتويUTF-8على العديد من الرموز والحروف التي لا تتوفر على لوحة المفاتيح العادية.
2- استخدام أرقام الكيانات لعرض الأحرف:
- الأحرف “A”، “B”، و “C” يتم عرضها باستخدام أرقام الكيانات الخاصة بها، وهي 65، 66، و 67 على التوالي.
- لإخبار المتصفح أنك تستخدم كيانًا (رمزًا خاصًا)، يجب أن تبدأ الرقم بشاشته (#) وتنهيه بفاصلة منقوطة (؛).
- على سبيل المثال، لعرض حرف “A” باستخدام الكيان، ستكتب
A. وبالمثل، لعرض “B”، ستكتبB، ولـ “C” ستكتبC.
باستخدام هذه الطريقة، يمكنك عرض أي حرف أو رمز من مجموعة UTF-8 داخل نصوص HTML الخاصة بك، حتى وإن لم يكن متاحًا على لوحتك.
رموز الرموز التعبيرية
الرموز التعبيرية هي أيضًا رموز من أبجدية UTF-8. يتم تخصيص كل رمز تعبيري برقم محدد، يسمى “قيمة الكيان” (entity value). يمكنك استخدام هذه القيمة لعرض الرمز التعبيري داخل نص HTML.
- 😄 128516
- 😍 128525
- 💗 128151
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
بما أن الرموز التعبيرية (Emojis) هي في الأساس رموز ضمن مجموعة الأحرف UTF-8، فهي تتمتع بنفس المرونة والوظائف مثل أي حرف آخر في لغة HTML. وهذا يعني:
- النسخ واللصق: يمكنك بسهولة نسخ ولصق الرموز التعبيرية بين نصوصك ومحتوياتك المختلفة.
- العرض: تظهر الرموز التعبيرية بشكل صحيح على معظم الأجهزة والبرامج المتوافقة مع UTF-8، مما يضمن وصول المحتوى كما هو مقصود.
- التحكم بالحجم: يمكنك تعديل حجم الرموز التعبيرية باستخدام أنماط CSS مثل أي عنصر آخر في HTML، سواء لتكبيرها أو تصغيرها حسب الحاجة في تصميمك.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
