---
title: HTML Компьютерийн кодын элементүүд
description: "> HTML нь хэрэглэгчийн оруулах  оролт болон компьютерийн кодийг тодорхойлор хэд хэдэг элементүүд байдаг ` x = 5; y = 6; z = x + y; ` ## HTML Гар оруулах [#](https://apprentice.mn/docs/html-computer-code-elements/#0-toc-title) HTML `` элемент нь гарын оролтыг тодорхойлоход хэрэглэгддэг. Дотор агуулга нь…"
url: "https://apprentice.mn/docs/html-computer-code-elements/"
updated: "2021-07-08"
category: HTML
---

# HTML Компьютерийн кодын элементүүд

> HTML нь хэрэглэгчийн оруулах  оролт болон компьютерийн кодийг тодорхойлор хэд хэдэг элементүүд байдаг

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

## HTML <kbd> Гар оруулах [#](https://apprentice.mn/docs/html-computer-code-elements/#0-toc-title)

HTML `<kbd>` элемент нь гарын оролтыг тодорхойлоход хэрэглэгддэг. Дотор агуулга нь хөтөчийн үндсэн monospace фонтоор харагдана.

### Жишээ

Зарим текстийн баримт бичигт гар оруулах гэж тодорхойл.

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

Result:
 Save the document by pressing Ctrl + S

## HTML <samp> Программийн гаралт

`<samp>` элемент нв компьютерийн программийи жишэг гаралтыг гаргахад ашиглагдана. Доторх агуулга нь **monospace **гэх үндсэн фонтоор бичигдэнэ.

Жишээ

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

Result:

 Message from my computer:

`File not found.Press F1 to continue`

## HTML <code> Компьютерийн код

HTML `<code>` элемент нь бичигдэх зүйлсийг компьютерийн код мэт харуулхад хэрэглэгддэг. Дотор агуулга нь хөтөчийн үндсэн monospace фонтоор харагдана.

### Жишээ

Текстийг компьютер код болгон харуулах:

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

Үр дүн:

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

Санамж: `<code>` элемент нь нэмэлт хоосон зай болон мөр таслал хадгалахгүй гэдгийг анхаарна уу.

 Энийг янзлахын тулд `<code>` элементийн дотор `<pre>` элементийг нэмнэ:

### Жишээ

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

Result:

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

## 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>`

Result:

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

## Бүлгийн хураангуй

- `<kbd>`элемент нь гарын(keyboard) оролтыг тодорхойлдог
- `<samp>` элемент нь компьютерийн програмын жишиг гаралтыг тодорхойлдог
- `<code>` элемент нь компьютерийн кодын багахан хэсгийг тодорхойлдог
- `<var>`элемент нь програмчлалийн эсвэл математикийн илэрхийлэлд хувьсагчийг тодорхойлдог
- `<pre>` элемент нь урьдчилан форматлагдсан текстийг тодорхойлдог

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-computer-code-elements%2F&linkname=HTML%20%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%B8%D0%B9%D0%BD%20%D0%BA%D0%BE%D0%B4%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-computer-code-elements%2F&linkname=HTML%20%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%B8%D0%B9%D0%BD%20%D0%BA%D0%BE%D0%B4%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-computer-code-elements%2F&linkname=HTML%20%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%B8%D0%B9%D0%BD%20%D0%BA%D0%BE%D0%B4%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-computer-code-elements%2F&linkname=HTML%20%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%B8%D0%B9%D0%BD%20%D0%BA%D0%BE%D0%B4%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-computer-code-elements%2F&linkname=HTML%20%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%B8%D0%B9%D0%BD%20%D0%BA%D0%BE%D0%B4%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-computer-code-elements%2F&linkname=HTML%20%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%B8%D0%B9%D0%BD%20%D0%BA%D0%BE%D0%B4%D1%8B%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D2%AF%D2%AF%D0%B4)[https://www.addtoany.com/share](https://www.addtoany.com/share)
