3 سال پیش / خواندن دقیقه

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

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

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

<code>
<kbd>
<samp>
<var>
<pre>

عنصر <code> در HTML

این عنصر برای نمایش کدهای برنامه نویسی در وب سایت استفاده می شود. محتوای نوشته شده در این تگ به صورت پیش فرض با قلم مونواسپیس (Monospace)نمایش داده می شود.

قلم مونواسپیس: قلمی است که هر کاراکتر در آن به یک اندازه فضا اشغال می کند و با نام قلم تک فاصله نیز شناخته می شود.

مثال

<!DOCTYPE html>
<html>
<body>
<h2>Computer Code</h2>
<p>This is a programming code:</p>
<code>
x = ۵;<br>
y = ۶;<br>
z = x + y;
</code>
</body>
</html>

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

<!DOCTYPE html>
<html>
<body>
<h2>The kbd Element</h2>
<kbd>This is how  content written within kbd element looks like.</kbd></p>
</body>
</html

خروجی

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

عنصر <samp>

عنصر <samp> برای نمایش خروجی برنامه استفاده می شود. متن نوشته شده در عنصر samp به طور معمول با قلم monospace پیش فرض مرورگر نمایش داده می شود.

مثال

<!DOCTYPE html>
<html>
<body>
<h2>The samp Element</h2>
<samp>This is how the content within samp element looks like. </samp>
</body>
</html>

خروجی

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

عنصر <var>

عنصر <var> برای تعریف متغیر استفاده می شود. متغیر می تواند یک متغیر در عبارات ریاضی یا یک متغیر در محتوای برنامه نویسی باشد.

مثال

<!DOCTYPE html>
<html>
<body>
<h2>The var Element</h2>
<p>This is a famous formula: <var>E</var> = <var>mc</var><sup>2</sup>.</p>
</body>
</html>

خروجی

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

عنصر <pre>

عنصر <pre> متن از پیش فرمت شده را تعریف می کند که محتوای درون آن توسط یک فونت با عرض ثابت نمایش داده می شود. محتوا را در قالب اصلی و فرمت شده خود نگه می دارد و تمام قالب بندی های آن را نادیده می گیرد.

مثال

<!DOCTYPE html>
<html>
<body>
<h3>Example of pre tag</h3>
  <pre>
    This is content written
    within pre tag, and  pre tag will ignore all
    spaces,     break lines, and will display the content
    as in original format.
  </pre>
 </body>
</html>