کدهای کامپیوتری در HTML

آموزش کد کامپیوتری در HTML به زبان ساده

با عرض سلام خدمت کاربران سایت آپ وب. در آموزشهایی که تا کنون در دوره html ارائه کردیم، با مباحث مهمی از جمله ویژگی Responsive در html ، آشنا شدید. در ادامه این آموزشها ، و در این بخش قصد داریم به بحث نمایش کدهای کامپیوتری در html ، بپردازیم.

برای نمایش کد در html و دستورات ، تگ هایی تعریف شده است که هر کدام در مواردی خاصی کاربرد دارد.

این تگ ها بیشتر برای وارد کردن محتوای دستوری ، علمی و آموزشی که شامل فرمول های ریاضی و … هستند بکار می رود.

در ادامه این بخش به موضوع نمایش کدهای کامپیوتر در html ، می پردازیم.

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

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

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

خروجی:

 

تگ
<kbd> 

برای نمایش ورودی های کاربر، ورودی صفحه کلید، فرمان صوتی و … استفاده می شود.

از این تگ برای نمایش کلید های ترکیبی صفحه کلید استفاده می شود.

مثال:

تعدادی متن را به عنوان ورودی صفحه کلید در یک سند تعریف کنید

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

خروجی:

تگ <samp> در HTML برای خروجی برنامه

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

<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

خروجی:

استفاده از <code> در HTML

تگ
<code>
یک قطعه کد کامپیوتر را تعریف می کند.

متنی که توسط برچسب های <code> احاطه شده است معمولا در فونت یکپارچه پیش فرض مرورگر نمایش داده می شود:

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

خروجی:

 

توجه داشته باشید که عنصر <code> فضای خالی فضای اضافی و خط فاصله را حفظ نمی کند.

برای رفع این، شما می توانید تگ
<code>
را داخل تگ
<pre>
قرار دهید:

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

خروجی:

توابع و فرمول ها

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

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

خروجی:

 

کلام آخر

در محتواهای علمی و خصوصا آموزشی در صفحات وب گاها از کدهای برنامه نویسی ، کامپیوتری و … استفاده می شود که برای درج کدهای کامپیوتری در html نیاز است که با استفاه از تگ های خاصی که در مباحث فوق به آن اشاره کردیم این کدها را تعریف کنید.

امیدواریم این آموزش برایتان مفید واقع شده باشد.