کدهای رایانه ای (Computercode)
اینجا با «کد رایانه ای HTML» آشنا می شویم. ساده پیش می رویم. هر تگ یک کار دارد. «تگ (Tag)» یعنی برچسب های HTML. بعد از این صفحه، متن کد را خواناتر می نویسی. همچنین خروجی برنامه را دقیق تر نشان می دهی.
کد رایانه ای HTML چیست؟
چند المان مهم داریم: <kbd> برای ورودی کیبورد، <samp> برای خروجی نمونه، <code> برای قطعه کد، <pre> برای حفظ فاصله ها، و <var> برای متغیرها. «کیبورد (Keyboard)» یعنی دکمه های ورودی. «متغیر (Variable)» یعنی ظرف داده.
نکته: اگر دنبال مفاهیم پایه هستی، صفحه المان های معنایی را هم ببین. همچنین می توانی درباره طراحی واکنش گرا بخوانی. این ها کنار «کد رایانه ای HTML» دید خوبی می دهند.
نمایش ورودی کیبورد با <kbd>
وقتی می خواهی کلیدهای فشرده شده را نشان دهی، از «<kbd>» استفاده کن. مرورگر آن را با فونت یکدست نمایش می دهد. فونت یکدست یعنی حرف ها هم عرض هستند.
<p>
Save the document by pressing <kbd>Ctrl + S</kbd>
</p>
نمایش خروجی نمونه با <samp>
پیام برنامه یا خطا را با «<samp>» نمایش بده. برای آموزش و داکیومنت عالی است. «خروجی (Output)» یعنی نتیجه اجرای برنامه.
<p>
Message from my computer:
</p>
<p>
<samp>File not found.<br>Press F1 to continue</samp>
</p>
نوشتن قطعه کد با <code>
برای نشان دادن یک تکه کد از «<code>» استفاده کن. این تگ فاصله های اضافی را حفظ نمی کند. پس خطوط جدا بنویس.
<code>
x = 5;
y = 6;
z = x + y;
</code>
حفظ فاصله ها با <pre> + <code>
برای حفظ فاصله ها و شکست خط از «<pre>» کمک بگیر. «پیش فرمت شده (Preformatted)» یعنی همان طور که نوشته ای نشان می دهد.
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
هشدار: فقط <code> فاصله ها را نگه نمی دارد. اگر چیدمان مهم است، حتماً <pre> را اضافه کن.
نشان دادن متغیر با <var>
برای نمایش «متغیر (Variable)» از «<var>» استفاده کن. معمولاً کج نوشته می شود. در فرمول ها بسیار کاربردی است.
<p>
The area of a triangle is: 1/2 × <var>b</var> × <var>h</var>.
</p>
گام های سریع تمرین
- یک پاراگراف بساز. کلیدها را با
<kbd>نشان بده. - یک پیام خطا بنویس. آن را در
<samp>بگذار. - سه خط کد بنویس. از
<pre>و<code>استفاده کن. - یک فرمول ساده بنویس. متغیرها را با
<var>مشخص کن.
لینک پیشنهادی برای مطالعه بیشتر
برای درک بهتر، صفحه کد رایانه ای HTML را نشانه گذاری کن. سپس به المان های معنایی سر بزن.
جمع بندی سریع
<kbd>: نمایش کلیدهای کیبورد.<samp>: نمایش خروجی نمونه برنامه.<code>: نمایش قطعه کد کوتاه.<pre>همراه کد: حفظ فاصله ها و خطوط.<var>: نمایش متغیر در متن و فرمول.