---
title: HTML танилцуулга
description: "> HTML бол Веб хуудас үүсгэх стандарт тэмдэглэгээний хэл юм. ## HTML гэж юу вэ? - HTML гэдэг нь Hyper Text Markup Language гэсэн үг юм. - HTML бол Веб хуудас үүсгэх стандарт тэмдэглэгээний хэл юм.  - HTML нь Веб…"
url: "https://apprentice.mn/docs/html-introduction/"
updated: "2021-06-04"
category: HTML
---

# HTML танилцуулга

> HTML бол Веб хуудас үүсгэх стандарт тэмдэглэгээний хэл юм.

## HTML гэж юу вэ?

- HTML гэдэг нь Hyper Text Markup Language гэсэн үг юм.
- HTML бол Веб хуудас үүсгэх стандарт тэмдэглэгээний хэл юм. 
- HTML нь Веб хуудасны бүтцийг бүрдүүлдэг хэл юм. 
- HTML нь бүлэг бүхий элементүүдээс бүрддэг.
- HTML-н элементүүд нь хөтчид (browser) яаж мэдээллийг дүрслэн гарахыг зохицуулдаг.
- HTML нь “энэ бол гарчиг” “энэ бол эх бичвэр”, “энэ бол өөр хуудас руу шилжих холбоос (link)” гэх мэт мэдээллийн хэсгүүдийг элементээр дамжуулан тэмдэглэдэг.

## HTML-н энгийн бичиглэл иймэрхүү байдаге

      `<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Миний эхний гарчиг</h1>
<p>Миний эхний өгүүлбэр</p>

</body>
</html>`

### Дээрхи кодыг тайлбарлавал:

- Энэ `<!DOCTYPE html>` зарлал нь HTML5 document болохыг тодорхойлж байна. dec
- Энэ `<html>` элемент нь HTML хуудасны үндсэн элемент юм. 
- Энэ `<head>` элемент нь HTML хуудасны компьютерийн ойлгох мэдээллийг агуулдаг. (нүдэнд харагдахгүй)
- Энэ `<title>` элемент нь хуудасны гарчгийг агуулна.  
- Энэ `<body>` элемент нь ерөнхийдөө бүх хэрэглээний, нүдэнд харагдах элементүүд багтана. Жишээ нь: гарчиг, эх бичвэр, зураг, hyperlink (хуудасруу шилжих холбоос) хүснэгт, жагсаалт гэх мэт. 
- Энэ `<h1>` хамгийн том хэмжээтэй гарчигийг харуулдаг.
- Энэ `<p>` текст бичихдээ хэрэглэнэ. 

## HTML-н элемент гэж юу вэ?

HTML элемент нь зүүн гурвалжин хаалт (<), доторх агуулга, баруун гурвалжин хаалт (>)-үүдээс бүрдэнэ/тодорхойлогдоно.

<тэмдэгийн нэр>Агуулга энд бичигдэнэ…</тэмдэгийн нэр>

HTML элемент нь эхлэлийн тэмдгээс эхлээд хаалтын тэмдэг хүртэлх бүх зүйлийг багтаана. 

 <h1>Миний эхний гарчиг/h1> <p>Миний эхний өгүүлбэр.</p>  

| Эхлэлийн тэмдэг | Элементийн агуулга |  Хаалтын тэмдэг |
| --- | --- | --- |
| <h1> | Миний эхний гарчиг | </h1> |
| <p> | Миний эхний өгүүлбэр | </p> |
| <br> | *Байхгүй* | *Байхгүй* |

**Тэмдэглэл:** Зарим HTML элементэд ямар ч агуулга байдаггүй (жишээ нь <br> элемент). Эдгээр элементүүдийг хаалтын тэмдэг бичих шаардалгагүй учраас хоосон элемент гэж дууддаг. 

## Веб хөтөч 

Веб хөтчийн (Chrome, Edge, Firefox, Safari) зорилго бол HTML кодыг уншиж дэлгэцэнд дүрсий нь гаргах юм. 

Хөтөч нь HTML-н элементийн тэмдэгтийг харуулдаггүй ба доторх бичиглэлийг харуулахад ашигладаг.![View in Browser](https://www.w3schools.com/html/img_chrome.png)

---

## HTML хуудасны бүтэц

Доорхи нь HTML хуудасны бүтцийн харагдах байдал юм:

      `<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>

</html>`

Тэмдэглэл:  <body> элементэн доторх зүйл хөтчид харагдана. <title>  доторх агуулга нь хөтчийн гарчиг хэсэг дээр гарна. 

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-introduction%2F&linkname=HTML%20%D1%82%D0%B0%D0%BD%D0%B8%D0%BB%D1%86%D1%83%D1%83%D0%BB%D0%B3%D0%B0](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-introduction%2F&linkname=HTML%20%D1%82%D0%B0%D0%BD%D0%B8%D0%BB%D1%86%D1%83%D1%83%D0%BB%D0%B3%D0%B0)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-introduction%2F&linkname=HTML%20%D1%82%D0%B0%D0%BD%D0%B8%D0%BB%D1%86%D1%83%D1%83%D0%BB%D0%B3%D0%B0](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-introduction%2F&linkname=HTML%20%D1%82%D0%B0%D0%BD%D0%B8%D0%BB%D1%86%D1%83%D1%83%D0%BB%D0%B3%D0%B0)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-introduction%2F&linkname=HTML%20%D1%82%D0%B0%D0%BD%D0%B8%D0%BB%D1%86%D1%83%D1%83%D0%BB%D0%B3%D0%B0](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-introduction%2F&linkname=HTML%20%D1%82%D0%B0%D0%BD%D0%B8%D0%BB%D1%86%D1%83%D1%83%D0%BB%D0%B3%D0%B0)[https://www.addtoany.com/share](https://www.addtoany.com/share)