HTML / رموز الكتل

الناشر :كودا فوكس -

HTML / رموز الكتل

طريقة عرض رموز الكتل

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

HTML / رموز الكتل


الأحرف التي نستخدمها لعرض الكتل يمكن وضعها بأسلوب عشري (Decimal) أو بأسلوب سداسي عشري (Hexadecimal).

قاعدة عامة

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

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

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

أمثلة على رموز الكتل

📋

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

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

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

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

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

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

جدول رموز الكتل

الرمز Decimal Hexadecimal الإسم
▀ &#9600; &#x2580; Upper Half Block
▁ &#9601; &#x2581; Lower One Eighth Block
▂ &#9602; &#x2582; Lower One Quarter Block
▃ &#9603; &#x2583; Lower Three Eighths Block
▄ &#9604; &#x2584; Lower Half Block
▅ &#9605; &#x2585; Lower Five Eighths Block
▆ &#9606; &#x2586; Lower Three Quarters Block
▇ &#9607; &#x2587; Lower Seven Eighths Block
█ &#9608; &#x2588; Full Block
▉ &#9609; &#x2589; Left Seven Eighths Block
▊ &#9610; &#x258A; Left Three Quarters Block
▋ &#9611; &#x258B; Left Five Eighths Block
▌ &#9612; &#x258C; Left Half Block
▍ &#9613; &#x258D; Left Three Eighths Block
▎ &#9614; &#x258E; Left One Quarter Block
▏ &#9615; &#x258F; Left One Eighth Block
▐ &#9616; &#x2590; Right Half Block
░ &#9617; &#x2591; Light Shade
▒ &#9618; &#x2592; Medium Shade
▓ &#9619; &#x2593; Dark Shade
▔ &#9620; &#x2594; Upper One Eighth Block
▕ &#9621; &#x2595; Right One Eighth Block
▖ &#9622; &#x2596; Quadrant Lower Left
▗ &#9623; &#x2597; Quadrant Lower Right
▘ &#9624; &#x2598; Quadrant Upper Left
▙ &#9625; &#x2599; Quadrant Upper Left And Lower Left And Lower Right
▚ &#9626; &#x259A; Quadrant Upper Left And Lower Right
▛ &#9627; &#x259B; Quadrant Upper Left And Upper Right And Lower Left
▜ &#9628; &#x259C; Quadrant Upper Left And Upper Right And Lower Right
▝ &#9629; &#x259D; Quadrant Upper Right
▞ &#9630; &#x259E; Quadrant Upper Right And Lower Left
▟ &#9631; &#x259F; Quadrant Upper Right And Lower Left And Lower Right
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال