---
title: HTML Холбоосууд
description: "> Холбоосууд бараг бүх вэб хуудсанд байдаг. Холбоосууд нь хэрэглэгчидийг хуудсаас хуудас руу чиглүүлэх боломжийг олгодог. ## HTML холбоосууд – Гипер холбоосууд HTML холбоосууд нь гиперхолбоосууд юм. Та холбоос дээр дарж өөр баримт бичиг рүү үсрэх боломжтой. Хулганаа холбоос дээр…"
url: "https://apprentice.mn/docs/html-links/"
updated: "2021-07-06"
category: HTML
---

# HTML Холбоосууд

> Холбоосууд бараг бүх вэб хуудсанд байдаг. Холбоосууд нь хэрэглэгчидийг хуудсаас хуудас руу чиглүүлэх боломжийг олгодог.

## HTML холбоосууд – Гипер холбоосууд

HTML холбоосууд нь гиперхолбоосууд юм.

Та холбоос дээр дарж өөр баримт бичиг рүү үсрэх боломжтой.

Хулганаа холбоос дээр зөөж аваачихад хулганы сум жижиг гар болж хувирна.

**Тэмдэглэл**: Холбоос заавал текст байх албагүй. Холбоос нь зураг эсвэл бусад HTML элемент байж болно!

##  

## HTML Холбоосууд- Синтакс(Syntax)

HTML `<a>` тэмдэглэгээ нь гиперхолбоосыг тодорхойлно. Энэ нь дараах синтаксуудтай:

     `<a href="url">link text</a>`

`<a>` элементийн хамгийн чухал шинж чанар бол  `href` бөгөөд энэ нь холбоосын очих газрыг заана.

*Холбоос текст* нь уншигчдад харагдах хэсэг юм.

Холбоос текст дээр дарахад уншигчийг заасан URL хаяг руу илгээх болно.

     `<a href="apprentice.mn/">Visit Apprentice.mn!</a>`

 Өгөгдмөл байдлаар, холбоосууд бүх хөтөч дээр дараах байдлаар гарч ирнэ:

- Очоогүй холбоос доогуураа зурагдаж, цэнхэр өнгөтэй байна
- Очсон холбоос доогуураа  зурагдаж, нил ягаан өнгөтэй байна
- Идэвхтэй холбоос доогуураа зурагдаж, улаан өнгөтэй байна

**Зөвлөгөө:**Холбоосуудыг CSS-ээр хэв маягыг нь тохируулан өөрөөр харагдаж болно.

---

## HTML холбоосууд – Зорилтот(targeted) шинж чанар

Үндсэн чанараар холбоосын хуудас одоо байгаа хуудсан дээр нээгддэг. Үүний өөрчилхийн тулд холбоосд өөр зорилт өгөх хэрэгтэй.

The `target` attribute specifies where to open the linked document.

 `target` шинж чанар нь холбоостой баримтыг хаана нээхийг зааж өгдөг.

 `target`шинж чанар нь дараах утгуудтай байна

- `_self` – Үндсэн.Одоо байгаа хуудсан дээрээ холбоосыг нээх
- `_blank` – Шинэ цонхон дээр холбоосыг нээх
- `_parent` – Баримтыг эх суурьт нээх
- `_top` – Баримтыг цонхны бүтэн хэсэгт нээнэ

Use target=”_blank” to open the linked document in a new browser window or tab:

     `<a href="apprentice.mn/" target="_blank">Visit Apprentice!</a>`

## Үнэмлэхүй(Absolute) URL ба харьцангуй(Relative) URL

Дээрх жишээнүүд**үнэмлэхүй URL**(Вэбийн бүтэн хаяг)-ийг `href`шинж чанараар ашиглаж байна.

Дотоод холбоос(Вэбсайт доторх хуудасруу холбогдох) хийгдэх болон “https://www” хэсэг байхгүй хаягыг **харьцангүй URL** гэнэ.

     `<h2>Absolute URLs</h2>
<p><a href="https://apprentice.mn/">Appentice</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>`

## HTML холбоосууд – Зургийг холбоос болгон ашигла

Зургийг холбоос болгон ашиглахын тулд `<img>` тэмдэглэгээг `<a>` тэмдэглэгээн дотор оруулаад л болоо:

     `<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>`

## Имайл хаягруу холбоос(link) үүсгэх

Use `mailto:` inside the `href` attribute to create a link that opens the user’s email program (to let them send a new email):

`href` шинж чанар дотор `mailto:` тэмдэглэгээг ашиглаж хэрэглэгчийн имайл нээдэг программын холбоосыг үүсгэнэ( Тэднийг шинэ имайл илгээлгүүлхийн тулд)

     `<a href="mailto:someone@example.com">Send email</a>`

## Холбоостой товчлуур

HTML товчийг холбоос болгон ашиглахын тулд та зарим нэг JavaScript кодыг нэмэх хэрэгтэй.

JavaScript нь товчлуур дарах гэх мэт тодорхой үйлдүүдэд юу хийх вэ зэрэгийг хийхэд хэрэгтэй.

     `<button onclick="document.location='default.asp'">HTML Tutorial</button>`

## Холбоостой гарчиг

Гарчиг шинж чанар нь элементийн талаар нэмэлт мэдээллийг зааж өгдөг. Хулгана элементийн дээгүүр шилжих үед мэдээллийг ихэвчлэн хэрэгслийн зөвлөмж(tooltip)  хэлбэрээр харуулдаг.

     `<a href="https://apprentice.mn/docs-category/html/" title="Go to Apprentice HTML section">Visit our HTML Tutorial</a>`

## Үнэмлэхүй URL ба харьцангуй URL-ийн талаар дэлгэрэнгүй үзэх

Вэб хуудас руу холбохын тулд бүрэн URL ашиглана уу:

     `<a href="https://apprentice.mn/docs/html-introduction/">HTML tutorial</a>`

Одоогийн вэбсайт дээрх html хавтсанд байрлах хуудасны холбоос:

     `<a href="/html/default.asp">HTML tutorial</a>`

Одоогийн хуудастай ижил фолдерт байрлах хуудасны холбоос:

     `<a href="default.asp">HTML tutorial</a>`

## Chapter Summary

-  `<a>` элемент нь холбоосыг тодорхойлдог
-  `href`шинж чанар нь холбоосын хаягыг тодорхойлдог
-  `target` шинж чанар холбоос хаана нээгдэх вэ гэдэгийг тохируулна
- `<a>`шинж чанар доторх `<img>` элемент нь
- `href` шинж чанар дотор байх `mailto:` систем нь хэрэглэгчийн имэйлийн програмыг нээх холбоосыг бий болгоно

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-links%2F&linkname=HTML%20%D0%A5%D0%BE%D0%BB%D0%B1%D0%BE%D0%BE%D1%81%D1%83%D1%83%D0%B4](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-links%2F&linkname=HTML%20%D0%A5%D0%BE%D0%BB%D0%B1%D0%BE%D0%BE%D1%81%D1%83%D1%83%D0%B4)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-links%2F&linkname=HTML%20%D0%A5%D0%BE%D0%BB%D0%B1%D0%BE%D0%BE%D1%81%D1%83%D1%83%D0%B4](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-links%2F&linkname=HTML%20%D0%A5%D0%BE%D0%BB%D0%B1%D0%BE%D0%BE%D1%81%D1%83%D1%83%D0%B4)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-links%2F&linkname=HTML%20%D0%A5%D0%BE%D0%BB%D0%B1%D0%BE%D0%BE%D1%81%D1%83%D1%83%D0%B4](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-links%2F&linkname=HTML%20%D0%A5%D0%BE%D0%BB%D0%B1%D0%BE%D0%BE%D1%81%D1%83%D1%83%D0%B4)[https://www.addtoany.com/share](https://www.addtoany.com/share)