رموز الأشكال الهندسية في HTML
يا هلا بالجميع! اليوم راح نتكلم عن طريقة عرض رموز الأشكال الهندسية في صفحات الـ HTML. الموضوع سهل ومفيد لو حبيت تضيف لمسة جمالية أو إشارة معينة بدون ما تستخدم صور.
ليش نحتاج رموز الأشكال؟
أحياناً تحتاج تضيف رمز دائرة، مربع، نجمة، أو أي شكل بسيط عشان:
- تزين النصوص.
- توضح نقاط معينة في قائمة (مثل بدل النقاط التقليدية).
- تستخدمها كأيقونات صغيرة جداً.
- تعطي إشارات بصرية سريعة.
الطريقة الأولى: استخدام كيانات HTML الرقمية (Numeric HTML Entities)
هذه الطريقة تعتمد على استخدام أكواد خاصة تبدأ بـ ` و ` وتنتهي بـ `;`، وبينهم رقم يمثل رمز الشكل في جدول Unicode. هذي الطريقة آمنة جداً وتضمن لك ظهور الرمز في أغلب المتصفحات والأنظمة.
مثال:
- الدائرة السوداء: ` ● ` تظهر كـ ●
- المربع الأسود: ` ■ ` يظهر كـ ■
- المثلث العلوي الأسود: ` ▲ ` يظهر كـ ▲
ملاحظة: عشان تعرف الأرقام الخاصة بكل رمز، ممكن تبحث عن "Unicode geometric shapes" وراح تلاقي جداول كثيرة.
الطريقة الثانية: استخدام رموز Unicode مباشرة
معظم المتصفحات الحديثة تدعم عرض رموز Unicode مباشرة إذا كانت صفحتك محفوظة بترميز `UTF-8` (وهو الترميز الافتراضي تقريباً لأي صفحة HTML جديدة). يعني تقدر تنسخ الرمز وتلصقه مباشرة في ملف الـ HTML.
مثال:
لو حبيت تحط نجمة سوداء، تقدر تكتبها كذا: `★`
أو قلب: `♥`
أو شمس: `☀`
هذي الطريقة أسهل بكثير لو كنت تعرف الرمز أو قدرت تنسخه. بس تأكد إن الترميز في صفحتك مضبوط:
<meta charset="UTF-8">أمثلة شائعة لرموز الأشكال
هذي بعض الرموز اللي ممكن تحتاجها بشكل متكرر:
- الدائرة:
- دائرة سوداء: ` ● ` (●)
- دائرة بيضاء: ` ◯ ` (○)
- المربع:
- مربع أسود: ` ■ ` (■)
- مربع أبيض: ` □ ` (□)
- المثلث:
- مثلث علوي أسود: ` ▲ ` (▲)
- مثلث سفلي أسود: ` ▼ ` (▼)
- مثلث علوي أبيض: ` △ ` (△)
- مثلث سفلي أبيض: ` ▽ ` (▽)
- المعين (Diamond):
- معين أسود: ` ◆ ` (◆)
- معين أبيض: ` ◇ ` (◇)
- النجمة:
- نجمة سوداء: ` ★ ` (★)
- نجمة بيضاء: ` ☆ ` (☆)
- القلب:
- قلب أسود: ` ♥ ` (♥)
- قلب أبيض: ` ♡ ` (♡)
ملاحظات مهمة
- دعم الخطوط: بعض الخطوط ممكن ما تدعم كل رموز Unicode. إذا شفت مربع فاضي أو علامة استفهام بدل الرمز، فغالباً المشكلة من الخط المستخدم.
- إمكانية الوصول (Accessibility): لو الرمز بس للزينة وما يحمل معنى مهم، الأفضل تضيف له `aria-hidden="true"` عشان قارئات الشاشة تتجاهله.
- الأشكال المعقدة: إذا احتجت أشكال هندسية معقدة أو قابلة للتخصيص بشكل كبير، الأفضل تستخدم CSS (مثل `border` لإنشاء مثلثات) أو SVG.
وبكذا نكون عرفنا كيف نضيف رموز الأشكال الهندسية لصفحاتنا بطريقتين سهلة ومباشرة. جربها في مشاريعك وشوف كيف ممكن تضيف لمسة مميزة!