در حال بارگزاری ...

کاراکترهای کدنویسی در زبان HTML

توسط مریم مهربان
آخرین به روز رسانی چهارشنبه 01 بهمن 1399

HTML، یک زبان نشانه گذاری برای صفحات وب است و در دنیای وب بسیار پرکاربرد است. برنامه‌های کاربردی PHP یا دیگر زبان‌های برنامه نویسی سطح وب، غالبا از این زبان برای تولید محتوای قابل نمایش در مرورگر استفاده می‌کنند.

 زبان HTML، از مجموعه کاراکترهای خاصی استفاده می‌کند که توسط مرورگر قابل تفسیر است. در ادامه مقاله در لیداوب، درباره این کاراکترها صحبت خواهیم کرد.

کاراکترهای کدنویسی در زبان HTML

کاراکترهای <  و >

نام تگ‌های HTML بین این دو کاراکتر قرار می‌گیرند و به این طریق، مرورگر متوجه می‌شود که چه چیزی را نمایش دهد. به عبارت دیگر، این کاراکترها در صفحه نمایش داده نمی‌شود. برای نمونه، کد <b>this bold text</b>، عبارت this bold text را نشان می‌دهد.

کاراکترهای رزرو شده HTML

چهار کاراکتر اصلی رزرو شده در HTML وجود دارد که در جدول زیر، آن‌ها را مشاهده می‌کنید:

کاراکتر کدگذاری
> ;lt&
<  ;gt&
&  ;amp&
 "  ;quot&

طبق این جدول، اگر بخواهید هر یک از کاراکترهای بالا را در صفحه وب نمایش دهید، باید از معادل کدگذاری آن استفاده کنید. برای مثال، برای نمایش عبارت Twitter is > Facebook، باید در کد HTML خود کد Twitter  is &gt; Facebook را وارد کنید.

تابع ()htmlspecialchars

فرض کنید که قصد دارید لینکی را در صفحه اضافه کنید که متن آن به صورت  <Click Here> & Prosper! باشد. اگر این متن را به طور عادی در کدهای HTML خود بنویسید، به نتیجه دلخواه نمی‌رسید.

<html>
<head>
<meta charset="utf-8">
<title>HTML Encode Like a PRO</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/respond.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>

<body>

<a href="http://localhost/bootstrapsandbox/encode.php">
    <Click Here> & Prosper!
</a>


</body>
</html>
& Prosper!

علت آن هم این است که مرورگر کاراکترهای <> را به عنوان شروع و پایان تگ در نظر می‌گیرد. در حالی که ما قصد داریم آن ها را به کاربران نمایش دهیم. یکی دیگر از راه‌های نمایش این کاراکترها، استفاده از تابع htmlspecialchars است.

دقت داشته باشید که این تابع تنها چهار کاراکتر خاصی را که در جدول بالا آمده است، کدگذاری می‌کند. کاراکترهای بسیار دیگری هم وجود دارد که مرورگر در حالت عادی آن را شناسایی نمی‌کند و باید از کدگذاری ویژه‌ای برای آن استفاده کرد.

<html>
<head>
<meta charset="utf-8">
<title>HTML Encode Like a PRO</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/respond.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>

<body>

<a href="http://localhost/bootstrapsandbox/encode.php">
    <?php echo htmlspecialchars('<Click Here> & Prosper!'); ?>
</a>


</body>
</html>
<Click Here> & Prosper!

تابع ()htmlentities

این تابع، همه کاراکترهایی را که در HTML معنای خاصی دارد و در حالت عادی در صفحه نمایش داده نمی‌شود، پوشش می‌دهد. بنابراین این تابع، قدرتمندتر است. برای نمونه، کاراکترهای زیر بدون استفاده از این تابع، ممکن است روی برخی دستگاه‌ها نمایش داده شود و در برخی دیگر خیر. برای اطمینان بیشتر، می‌توانید از این تابع استفاده کنید:

<?php
$text = '© ® ™ £ € ¥';
echo $text;
?>
<?php
$text = '© ® ™ £ € ¥';
echo htmlentities($text);
?>


در جدول‌های زیر می‌توانید تمام کاراکترهای HTML و معادل‌های کدگذاری آن‌ها را مشاهده کنید.

کاراکترهای مختلف کدگذاری اسکی

کاراکتر کدگذاری
À ;Agrave&
Á ;Aacute&
 ;Acirc&
à ;Atilde&
Ä ;Auml&
Å ;Aring&
Æ ;AElig&
Ç ;Ccedil&
È ;Egrave&
É ;Eacute&
Ê ;Ecirc&
Ë ;Euml&
Ì ;Igrave&
Í ;Iacute&
Î ;Icirc&
Ï ;Iuml&
Ð ;ETH&
Ñ ;Ntilde&
Ò ;Ograve&
Ó ;Oacute&
Ô ;Ocirc&
Õ ;Otilde&
Ö ;Ouml&
Ø ;Oslash&
Ù ;Ugrave&
Ú ;Uacute&
Û ;Ucirc&
Ü ;Uuml&
Ý ;Yacute&
Þ ;THORN&
ß ;szlig&
à ;agrave&
á ;aacute&
â ;acirc&
ã ;atilde&
ä ;auml&
å ;aring&
æ ;aelig&
ç ;ccedil&
è ;egrave&
é ;eacute&
ê ;ecirc&
ë ;euml&
ì ;igrave&
í ;iacute&
î ;icirc&
ï ;iuml&
ð ;eth&
ñ ;ntilde&
ò ;ograve&
ó ;oacute&
ô ;ocirc&
õ ;otilde&
ö ;ouml&
ø ;oslash&
ù ;ugrave&
ú ;uacute&
û ;ucirc&
ü ;uuml&
ý ;yacute&
þ ;thorn&
ÿ ;yuml&

 کدگذاری مختلف کاراکترهای استاندارد ISO-8859-1 

کاراکتر کدگذاری
  ;nbsp&
¡ ;iexcl&
¢ ;cent&
£ ;pound&
¤ ;curren&
¥ ;yen&
¦ ;brvbar&
§ ;sect&
¨ ;uml&
© ;copy&
ª ;ordf&
« ;laquo&
¬ ;not&
­ ;shy&
® ;reg&
¯ ;macr&
° ;deg&
± ;plusmn&
² ;sup2
³ ;sup3
´ ;acute
µ ;micro&
;para&
¸ ;cedil&
¹ ;sup1&
º ;ordm&
» ;raquo&
¼ ;frac14&
½ ;frac12&
¾ ;frac34&
¿ ;iquest&
× ;times&
÷ ;divide&

 کاراکترهای مختلف ریاضیاتی

کاراکتر کدگذاری
&forall&
&part&
&exist&
&empty&
;nabla&
;isin&
;notin&
;ni&
;prod&
;sum&
;minus&
;lowast&
;radic&
;prop&
;infin&
;ang&
;and&
;or&
;cap&
;cup&
;int&
;there4&
;sim&
;cong&
;asymp&
;ne&
;equiv&
;le&
;ge&
;sub&
;sup&
;nsub&
;sube&
;supe&
;oplus&
;otimes&
;perp&
;sdot&

دوره‌های آموزش طراحی سایت در لیداوب:

آموزش پایه لاراول

آموزش CSS

آموزش HTML مقدماتی

 امیدوارم این آموزش برای شما مفید بوده باشد. سایر آموزش‌های ما را می‌توانید در کتابخانه لیداوب دنبال کنید.

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
سورس خرید و فروش ارزهای دیجیتال
ثبت امتیاز
5 (1 رای)

   لطفا صبر کنید ...