HTML - رموز الأشكال الهندسية

طريقة عرض رموز الأشكال الهندسية

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

الأحرف التي نستخدمها لعرض الأشكال الهندسية يمكن وضعها بأسلوب عشري (Decimal) أو بأسلوب سداسي عشري (Hexadecimal)، بالإضافة لأسلوب أصل الإسم (Entity) الذي تم توفيره لبعض الرموز لأنه يعتبر أسهل لك حيث أن الأحرف المستخدمة فيه تكون مكونة من أسماء الأشكال الهندسية نفسها.

قاعدة عامة

عند استخدام الأسلوب Entity يجب إضافة & قبل وضع أحرف الرمز.

عند استخدام الأسلوب Decimal يجب إضافة &# قبل وضع أحرف الرمز.

عند استخدام الأسلوب Hexadecimal يجب إضافة &#x قبل وضع أحرف الرمز.

كما أنه يفضّل دائماً وضع فاصلة منقوطة ; بعد كتابة أحرف الرمز و هذا أمر اختياري و لكننا ننصح بفعله.

أمثلة على رموز الأشكال الهندسية

📋

المثال الأول:

<!DOCTYPE html>
<html>
    <head>
		<!-- ليظهر بشكل أوضح CSS يواسطة كود p هنا قمنا بتغيير نوع و حجم خط الوسم -->
        <style>
            p { font-family: Helvetica, Arial, Sans-Serif; font-size: 26px; }
        </style>
    </head>
    <body>
        <!-- △ :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#9651;</p>
        <p>&#x25B3;</p>
    </body>
</html>

📋

المثال الثاني:

<!DOCTYPE html>
<html>
    <head>
		<!-- ليظهر بشكل أوضح CSS يواسطة كود p هنا قمنا بتغيير نوع و حجم خط الوسم -->
        <style>
            p { font-family: Helvetica, Arial, Sans-Serif; font-size: 26px; }
        </style>
    </head>
    <body>
        <!-- ▲ :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#9650;</p>
        <p>&#x25B2;</p>
    </body>
</html>

📋

المثال الثالث:

<!DOCTYPE html>
<html>
    <head>
		<!-- ليظهر بشكل أوضح CSS يواسطة كود p هنا قمنا بتغيير نوع و حجم خط الوسم -->
        <style>
            p { font-family: Helvetica, Arial, Sans-Serif; font-size: 26px; }
        </style>
    </head>
    <body>
        <!-- ▤ :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#9636;</p>
        <p>&#x25A4;</p>
    </body>
</html>

جدول رموز الأشكال الهندسية

الرمز	Decimal	Hexadecimal	الإسم
■	■	■	Black Square
□	□	□	White Square
▢	▢	▢	White Square With Rounded Corners
▣	▣	▣	White Square Containing Black Small Square
▤	▤	▤	Square With Horizontal Fill
▥	▥	▥	Square With Vertical Fill
▦	▦	▦	Square With Orthogonal Crosshatch Fill
▧	▧	▧	Square With Upper Left To Lower Right Fill
▨	▨	▨	Square With Upper Right To Lower Left Fill
▩	▩	▩	Square With Diagonal Crosshatch Fill
▪	▪	▪	Black Small Square
▫	▫	▫	White Small Square
▬	▬	▬	Black Rectangle
▭	▭	▭	White Rectangle
▮	▮	▮	Black Vertical Rectangle
▯	▯	▯	White Vertical Rectangle
▰	▰	▰	Black Parallelogram
▱	▱	▱	White Parallelogram
▲	▲	▲	Black Up-Pointing Triangle
△	△	△	White Up-Pointing Triangle
▴	▴	▴	Black Up-Pointing Small Triangle
▵	▵	▵	White Up-Pointing Small Triangle
▶	▶	▶	Black Right-Pointing Triangle
▷	▷	▷	White Right-Pointing Triangle
▸	▸	▸	Black Right-Pointing Small Triangle
▹	▹	▹	White Right-Pointing Small Triangle
►	►	►	Black Right-Pointing Pointer
◄	◄	◄	Black Left-Pointing Pointer
▼	▼	▼	Black Down-Pointing Triangle
▽	▽	▽	White Down-Pointing Triangle

آخر الأخبار

CSS / نظرة عامة

HTML / الرموز المطبعية

HTML / الروابط

إنشاء موقعك الإلكتروني أنيق ومخصص للجيم والرياضه الحديد HTML وCSS وJavaScript

HTML / رموز الأشكال الهندسية