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

نمایش کدهای کامپیوتری

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

کدهای کامپیوتری تنها متونی نیستند که از نظر ظاهری چنین تفاوت هایی دارند، بلکه ورودی های کیبورد (مثلا وقتی می گوییم کلیدهای Ctrl و S را برای ذخیره سازی فشار دهید و ...) و موارد دیگری نیز در این گروه هستند و ما می خواهیم تک تک آن ها را بررسی کنیم.

ورودی های صفحه کلید

ورودی های صفحه کلید ورودی هایی هستند که از طرف کاربر و با فشردن کلیدهای خاص انجام می گیرند. برای نمایش این نوع ورودی ها می توانید از تگ <kbd> استفاده کنید. نوشته هایی که درون این تگ قرار بگیرند با فونت monospace نمایش داده خواهند شد. به این مثال توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>The kbd Element</h2>
<p>The kbd element represents user input:</p>

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

</body>
</html>

مشاهده ی خروجی در JSBin

به خروجی بروید تا قسمت Ctrl و S را در فونت monospace مشاهده کنید.

خروجی برنامه ها

معمولا برای نمایش خروجی یک کد برنامه نویسی یا یک برنامه ی کامپیوتری از تگ <samp> استفاده می کنند. متنی که در این تگ نوشته شود نیز با فونت monospace مرورگر نمایش داده خواهد شد. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>The samp Element</h2>
<p>The samp element represents output from a program or computing system:</p>

<p>If you input wrong value, the program will return <samp>Error!</samp></p>

</body>
</html>

مشاهده ی خروجی در JSBin

کد برنامه نویسی

کدهای برنامه نویسی مهم ترین و شایع ترین دلیل استفاده از این نوع فونت هستند و شکل کاملا متفاوتی دارند. اگر شما بخواهید قسمتی از کدی را در وب سایت خود نمایش دهید می توانید از تگ <code> استفاده کنید تا کدها در فونت monospace به نمایش در بیایند.

در مثال زیر چند خط کد ساده را نوشته ایم:

<!DOCTYPE html>
<html>
<body>

<h2>The code Element</h2>
<p>Programming code example:</p>

<code>
x = 5;
y = 6;
z = x + y;
</code>

</body>
</html>

مشاهده ی خروجی در JSBin

حتما متوجه نکته ای شده اید. در خروجی ما اینترها رعایت نشده اند و تمام کد در یک خط نوشته شده است، به این شکل:

x = 5; y = 6; z = x + y;

اما معمولا هنگام کدنویسی کسی اینطور کد نمی نویسد بنابراین راه حل چیست؟ تگ <code> مانند خود HTML کاری با اینترها و فضای خالی ندارد. برای آنکه اینترها (البته نحوه ی صحیح بیان آن line break است) را رعایت کنیم باید از تگ <pre> استفاده شود:

<!DOCTYPE html>
<html>
<body>

<p>The code element does not preserve whitespace and line-breaks.</p>
<p>To fix this, you can put the code element inside a pre element:</p>

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین برای نمایش متغیرها، چه در زبان های برنامه نویسی و چه در معادلات فیزیکی و ریاضی، می توانیم از <var> استفاده کنیم:

<!DOCTYPE html>
<html>
<body>

<h2>The var Element</h2>
<p>Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

سوال: چه تفاوتی دارد که از کدام یک از این تگ ها استفاده کنیم؟ همه ی آن ها ظاهر یکسانی دارند!

پاسخ: بله درست است، تمام آن ها ظاهر یکسانی دارند و با فونت monospace نمایش داده می شوند اما شما نباید برای نمایش همه ی آن ها از یک تگ استفاده کنید. دلیل اش هم این است که این تگ ها برای موتور های جست و جو معنی دارند و به مبحث کدنویسی Semantic (به معنی «معنایی») مربوط می شوند. یک موتور جست و جو می تواند به دیدن این تگ ها بفهمد که محتوای روبرویش چیست و آن را بهتر درک کند.

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

برخی از کاراکترها در زبان های برنامه نویسی رزرو شده هستند؛ به طور مثال ما در گذشته در مورد کلمات رزرو شده در زبان جاوا اسکریپت در دوره ی جاوا اسکریپت صحبت کرده ایم. برخی کاراکترها نیز در زبان HTML رزرو شده هستند یعنی در زبان HTML معنی خاصی دارند (مثلا کاراکترهای < و > که نشان دهنده ی تگ ها هستند). حالا اگر بخواهیم از این کاراکترها به صورت عادی در متن صفحاتمان استفاده کنیم چه می شود؟ باید از HTML Entities استفاده کنید. در واقع برای دو هدف اصلی از HTML Entities استفاده می شود:

زمانی که کاراکتر مورد نظر ما در زبان HTML رزرو شده باشد
زمانی که کاراکتر مورد نظر ما اصلا روی کیبورد وجود نداشته باشد

به طور مثال اگر بخواهیم از علامت کمتری یا بیشتری (> <) در متن خود استفاده کنیم، ممکن است مرورگر تصور کند در حال نوشتن HTML هستیم و تمام متن ما را خراب کند.

معمولا ساختار کلی entity ها به این شکل است:

&entity_name;
OR

&#entity_number;

به طور مثال برای حل مشکل استفاده از علامت کمتری باید از ;&lt یا ;&#60 استفاده کنیم! مزیت استفاده از entity ها آسان بودن حفظ و کار با آن ها است اما نکته ی منفی آن ها این است که برخی از مرورگر ها از تمام entity پشتیبانی نمی کنند و باید مواظب این مورد باشید.

کاراکتر Non-breaking Space

کاراکتری در زبان HTML وجود دارد به نام Non-breaking Space (به معنی «اسپیس غیر شکستنی») که به این شکل نوشته می شود: ;&nbsp .

ما از آن جهت به این کاراکتر اسپیس غیر شکستنی می گوییم که اگر دو کلمه با این اسپیس از هم جدا شوند دیگر در آخر خط شکسته نمی شوند و یکی از آن ها به خط بعد نمی رود بلکه همیشه به هم چسبیده اند. تصور کنید می خواهیم بگوییم 10 کیلومتر بر ساعت؛ باید آن را اینطور بنویسیم:

10 km/h

مواردی مانند بالا (10 کیلومتر بر ساعت) نباید از هم جدا شوند چرا که قسمت عددی مقدار را نشان می دهد و قسمت حرفی نیز واحد آن را نشان می دهد، اما در عین حال باید بینشان اسپیس باشد و به هم نچسبند. در این حالت از Non-breaking Space استفاده می کنیم.

اما استفاده ی اصلی از Non-breaking Space زمانی است که می خواهیم چندین اسپیس را در متن خود داشته باشیم اما همانطور که می دانید HTML اسپیس های بیشتر از یک عدد را حذف می کند و به آن ها اهمیت نمی دهد. اگر در سورس کد خود تنها اسپیس بزنید هیچ اتفاقی نمی افتد اما اگر از Non-breaking Space استفاده کنید اسپیس ها سر جایشان خواهند ماند.

دیگر Entity ها

در اینجا لیست برخی از Entity های مختلف در زبان HTML را برایتان آورده ایم:

کد عددی Entity	کد حرفی Entity	نام یا توضیح	نتیجه
		non-breaking space
<	<	کمتر از (در فارسی برعکس است)	<
>	>	بیشتر از (در فارسی برعکس است)	>
&	&	علامت ampersand	&
"	"	علامت نقل قول double	"
'	'	علامت نقل قول single	'
¢	¢	سنت (پول)	¢
£	£	پوند (پول)	£
¥	¥	ین (پول)	¥
€	€	یورو (پول)	€
©	©	علامت کپی رایت (حق انتشار)	©
®	®	علامت تجاری ثبت شده	®