HTML / رموز التنقيط

HTML / رموز التنقيط

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

رموز التنقيط عبارة عن مجموعة أحرف إن تم وضعها مع بعضها يقوم المتصفح بعرض رمز تنقيط محدد مكانها. هذه الأحرف مهمة جداً فهي تتيح لك إمكانية عرض أي تنقيط تريد في الصفحة حتى و إن كان غير موجوداً على الكيبورد الذي تستخدمه.
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>&#33;</p>
        <p>&#x21;</p>
        <p>&excl;</p>
    </body>
</html>        
📋

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

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

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

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

جدول رموز التنقيط

الرمزDecimalHexadecimalEntityالإسم
! &#33; &#x21; &excl; Exclamation Mark
" &#34; &#x22; &quot; Quotation Mark
# &#35; &#x23; &num; Number Sign
% &#37; &#x25; &percnt; Percent Sign
& &#38; &#x26; &amp; Ampersand
' &#39; &#x27; &apos; Apostrophe
( &#40; &#x28; &lpar; Left Parenthesis
) &#41; &#x29; &rpar; Right Parenthesis
* &#42; &#x2A; &ast; Asterisk
, &#44; &#x2C; &comma; Comma
. &#46; &#x2E; &period; Period
/ &#47; &#x2F; &sol; Slash
: &#58; &#x3A; &colon; Colon
; &#59; &#x3B; &semi; Semicolon
? &#63; &#x3F; &quest; Question Mark
@ &#64; &#x40; &commat; At Symbol
[ &#91; &#x5B; &lbrack; Left Bracket
\ &#92; &#x5C; &bsol; Backslash
] &#93; &#x5D; &rbrack; Right Bracket
^ &#94; &#x5E; &Hat; Caret
_ &#95; &#x5F; &lowbar; Underscore
` &#96; &#x60; &grave; Grave Accent
{ &#123; &#x7B; &lbrace; Left Brace
| &#124; &#x7C; &vert; Vertical Bar
} &#125; &#x7D; &rbrace; Right Brace
~ &#126; &#x7E; &tilde; Tilde
  &#160; &#xA0; &nbsp; Non-Breaking Space
¡ &#161; &#xA1; &iexcl; Inverted Exclamation Mark
¦ &#166; &#xA6; &brvbar; Broken Vertical Bar
§ &#167; &#xA7; &sect; Section Sign
¨ &#168; &#xA8; &uml; Umlaut
© &#169; &#xA9; &copy; Copyright Sign
ª &#170; &#xAA; &ordf; Feminine Ordinal Indicator
« &#171; &#xAB; &laquo; Double Left-Pointing Angle Quotation Mark
¬ &#172; &#xAC; &not; Not Sign
­ &#173; &#xAD; &shy; Soft Hyphen
® &#174; &#xAE; &reg; Registered Trade Mark Sign
¯ &#175; &#xAF; &macr; Spacing Macron
² &#178; &#xB2; &sup2; Superscript Two
³ &#179; &#xB3; &sup3; Superscript Three
´ &#180; &#xB4; &acute; Acute Accent
µ &#181; &#xB5; &micro; Micro Sign
&#182; &#xB6; &para; Paragraph Sign
· &#183; &#xB7; &middot; Middle Dot
¸ &#184; &#xB8; &cedil; Spacing Cedilla
¹ &#185; &#xB9; &sup1; Superscript One
º &#186; &#xBA; &ordm; Masculine Ordinal Indicator
» &#187; &#xBB; &raquo; Double Right-Pointing Angle Quotation Mark
¿ &#191; &#xBF; &iquest; Inverted Question Mark
&#8208; &#x2010; &hyphen; Hyphen
&#8209; &#x2011; &ndash; Non-Breaking Hyphen
&#8210; &#x2012; &figuredash; Figure Dash
&#8211; &#x2013; &endash; En Dash
&#8212; &#x2014; &mdash; Em Dash
&#8213; &#x2015; &horbar; Horizontal Bar
&#8214; &#x2016; &Vert; Double Vertical Line
&#8215; &#x2017; &Double Low Line; Double Low Line
&#8216; &#x2018; &lsquo; Left Single Quotation Mark
&#8217; &#x2019; &rsquo; Right Single Quotation Mark
&#8218; &#x201A; &sbquo; Single Low-9 Quotation Mark
&#8219; &#x201B; &singlehighreversed; Single High-Reversed-9 Quotation Mark
&#8220; &#x201C; &ldquo; Left Double Quotation Mark
&#8221; &#x201D; &rdquo; Right Double Quotation Mark
&#8222; &#x201E; &bdquo; Double Low-9 Quotation Mark
&#8223; &#x201F; &doublehighreversed; Double High-Reversed-9 Quotation Mark
&#8224; &#x2020; &dagger; Dagger
&#8225; &#x2021; &Dagger; Double Dagger
&#8226; &#x2022; &bullet; Bullet
&#8227; &#x2023; &triangularbullet; Triangular Bullet
&#8228; &#x2024; &onedotleader; One Dot Leader
&#8229; &#x2025; &twodotleader; Two Dot Leader
&#8230; &#x2026; &hellip; Horizontal Ellipsis
&#8231; &#x2027; &hyphen; Hyphenation Point
&#8240; &#x2030; &permil; Per Mille Sign
&#8241; &#x2031; &pertenk; Per Ten Thousand Sign
&#8242; &#x2032; &prime; Prime
&#8243; &#x2033; &Prime; Double Prime
&#8244; &#x2034; &Triple Prime; Triple Prime
&#8245; &#x2035; &reversedprime; Reversed Prime
&#8246; &#x2036; &reverseddoubleprime; Reversed Double Prime
&#8247; &#x2037; &reversedtripleprime; Reversed Triple Prime
&#8248; &#x2038; &caret; Caret
&#8249; &#x2039; &lsaquo; Single Left-Pointing Angle Quotation Mark
&#8250; &#x203A; &rsaquo; Single Right-Pointing Angle Quotation Mark
&#8251; &#x203B; &reference; Reference Mark
&#8252; &#x203C; &doubleexclamation; Double Exclamation Mark
&#8253; &#x203D; &interrobang; Interrobang
&#8254; &#x203E; &overline; Overline
&#8255; &#x203F; &undertie; Undertie
&#8256; &#x2040; &harr; Spacing

إرسال تعليق

أحدث أقدم

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