100% کامل شده تا

عناصر کد کامپیوتری در اچ‌تی‌ام‌ال (HTML Computer Code Elements)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


HTML شامل چندین عنصر برای تعریف ورودی کاربر و کد رایانه است.


مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Computer Code</h2>
<p>Some programming code:</p>

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

</body>
</html>

Responsive demo.svg



تگ <kbd> در HTML برای ورودی صفحه کلید

عنصر <kbd> در HTML، برای تعریف ورودی صفحه کلید استفاده می‌شود. متن‌های احاطه شده با تگ‌های <kbd>، با قلم monospace که پیش‌فرض مرورگر است نمایش داده می‌شود.[۱]

مثال

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

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

نتیجه:

Save the document by pressing Ctrl + S

مثال

<!DOCTYPE html>
<html>
<body>

<h2>The kbd Element</h2>

<p>The kbd element is used to define keyboard input:</p>

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

</body>
</html>

Responsive demo.svg



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

عنصر <samp> در HTML، برای تعریف نمونه خروجی از یک برنامه کامپیوتری استفاده می‌شود. محتوای درون تگ <samp> با فونت monospace که پیش‌فرض مرورگر است نمایش داده می‌شود.

مثال

برخی از متن‌ها را به عنوان نمونه خروجی از برنامه رایانه ای در یک سند تعریف کنید:

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

نتیجه:

Message from my computer:

File not found.
Press F1 to continue

مثال

<!DOCTYPE html>
<html>
<body>

<h2>The samp Element</h2>

<p>The samp element is used to define sample output from a computer program.</p>

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

</body>
</html>

Responsive demo.svg





تگ <code> در HTML برای کد کامپیوتری

عنصر <code> در HTML، برای تعریف یک قطعه کد کامپیوتر استفاده می‌شود. محتوای درون تگ <code> با فونت monospace که پیش‌فرض مرورگر است نمایش داده می‌شود.

مثال

برخی از متن‌ها را به عنوان کد رایانه در یک سند تعریف کنید:

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

نتیجه:

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

مثال

<!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>

Responsive demo.svg


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

برای حل این مشکل، می‌توانید عنصر <code> را در یک عنصر<pre> قرار دهید:

مثال

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

نتیجه:

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

مثال

<!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>

Responsive demo.svg



تگ <var> در HTML برای متغیرها

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

مثال

برخی از متن‌ها را به عنوان متغیر در یک سند تعریف کنید:

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

نتیجه:

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.

مثال

<!DOCTYPE html>
<html>
<body>

<h2>The var Element</h2>

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

</body>
</html>

Responsive demo.svg



خلاصهٔ بخش

عنصر <kbd> ورودی صفحه‌کلید (کیبورد) را تعریف می‌کند.
عنصر <samp> نمونه خروجی را از یک برنامه کامپیوتری تعریف می‌کند
عنصر <code> قطعه ای از کد کامپیوتر را تعریف می‌کند
عنصر <var> متغیری را در برنامه‌نویسی یا در یک عبارت ریاضی تعریف می‌کند
عنصر <pre> متن از پیش قالب بندی شده را تعریف می‌کند


عناصر کد کامپیوتر در HTML


منابع آموزشی




به‌روزرسانی شده: ۷ روز پیش