---
title: HTML зураг
description: "> Зургууд нь вэб хуудасны дизайн, гадаад байдлыг сайжруулж чаддаг. ![https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/26.jpg](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/26.jpg) `` ## HTML Images Syntax HTML``  таг нь вэб хуудсанд зураг оруулахад ашиглагддаг. Зургийг техникийн хувьд вэб хуудсанд оруулаагүй болно; зургуудыг вэб хуудсуудтай холбодог. `` тэмдэглэгээ нь иш татсан…"
url: "https://apprentice.mn/docs/html-images/"
updated: "2021-07-07"
category: HTML
---

# HTML зураг

> Зургууд нь вэб хуудасны дизайн, гадаад байдлыг сайжруулж чаддаг.

![https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/26.jpg](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/26.jpg)

             `<img src="https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/26.jpg" alt="Mongolia">`

## HTML Images Syntax

HTML`<img>`  таг нь вэб хуудсанд зураг оруулахад ашиглагддаг.

Зургийг техникийн хувьд вэб хуудсанд оруулаагүй болно; зургуудыг вэб хуудсуудтай холбодог. `<img>` тэмдэглэгээ нь иш татсан зургийг хадгалах зай үүсгэдэг.

`<img>`тэмдэглэгээ нь хоосон тэмдэглэгээ бөгөөд зөвхөн шинж чанар агуулдаг төгсгөлийн тэмдэглэгээ байхгүй

`<img>`тэмдэглэгээ нь шаардлагатай хоёр шинж чанартай байна:

- src – Зураг руу хүрэх замыг заана
- alt – Зураг гарахгүй үед өөр текстийг гаргаж өгнө

     `<img src="url" alt="alternatetext">`

## src шинж чанар

Шаардлагатай  `src` шинж чанар нь зураг руу чиглэсэн замыг (URL) зааж өгдөг.

**Тэмдэглэл**: Вэб хуудас ачаалах үед;  хөтөч серверээс зургийг авч, хуудсанд оруулдаг байна. Тиймээс, вэб хуудастай холбоотой зураг байсан байрлалдаа байгаа эсэхийг шалгаарай, байхгүй бол вэбийн зочид эвдэрсэн холбоосын дүрс авах болно. Хөтөч зураг олж чадахгүй бол эвдэрсэн холбоосын оронд `alt`  текстийг харуулна.

     `<img src="https://directory-cms-public.s3.amazonaws.com/images/Markets-Bullets-Mongolia.2e16d0ba.fill-640x360.jpg" alt="Mongolian horses">`

## alt шинж чанар

The required `alt` attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Шаардлагатай `alt` шинж чанар нь: Хэрвээ хэрэглэгчид ямар нэгэн шалтгаанаар`src` -оор орж ирсэн зүйлийг үзэж чадахгүй байгаа тохиолдолд  `alt` текстийг гаргана

 `alt`шинж чанарын утга нь зурагаа тайлбарласан байна

     `<img src="https://directory-cms-public.s3.amazonaws.com/images/Markets-Bullets-Mongolia.2e16d0ba.fill-640x360.jpg" alt="Mongolian horses">`

Хэрэв хөтөч зураг олж чадахгүй бол `alt` шинж чанарын утгыг харуулна:

     `<img src="wrongname.gif" alt="Mongolian horses">`

## Зургийн хэмжээ – Өргөн ба өндөр

Та зургийн өргөн ба өндрийг зааж өгөхдөө `style`  шинж чанарыг  ашиглаж болно.

     `<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">`

Үүнээс гадна та `width`ба  `height`  шинж чанаруудыг ашиглаж болно.

     `<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">`

## Өргөн, өндөр, эсвэл хэв маяг уу?

 `width`, `height`, болон `style` шинж чанарууд бүгд HTML дээр хүчинтэй.

Гэсэн хэдий ч бид `style` шинж чанарыг ашиглахыг санал болгож байна. Энэ нь хэв маягийн хуудас зургийн хэмжээг өөрчлөхөөс сэргийлдэг.

     `<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html`

## Өөр хавтас дахь зургууд

If you have your images in a sub-folder, you must include the folder name in the `src` attribute:

Хэрэв та өөрийн зургуудыг дэд хавтас дотор байрлуулсан бол `src`  шинж чанар дотор хавтасны нэрийг оруулах ёстой.

     `<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">`

## Өөр сервер / вэбсайт дээрх зургууд

Зарим вэбсайтууд өөр сервер дээрх зургийг зааж өгдөг.

To point to an image on another server, you must specify an absolute (full) URL in the `src` attribute:

Өөр сервер дээрх зургийг зааж өгөхийн тулд`src`  шинж чанар дотор үнэмлэхүй (бүрэн) URL-г зааж өгөх ёстой.

     `<img src="https://scontent.fuln6-1.fna.fbcdn.net/v/t1.6435-9/179245169_3517623511670697_6420400679324553103_n.jpg?_nc_cat=111&ccb=1-3&_nc_sid=730e14&_nc_ohc=3Eioss_VZj4AX-d1QY_&_nc_ht=scontent.fuln6-1.fna&oh=e809cd94a646a729b058ed621ba66138&oe=60B614F1" alt="Facebook.com">`

## Хөдөлгөөнт зураг

HTML нь хөдөлгөөнт GIF-ийг зөвшөөрдөг:

     `<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">`

## Зургийг холбоос хэлбэрээр

To use an image as a link, put the `<img>` tag inside the `<a>` tag:

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

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

## Хөвж буй зураг

CSS`float` шинж чанарыг ашиглан текстийг текстийн баруун эсвэл зүүн талд хөвүүлэх боломжийг олгоно

     `<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>`

- ## Chapter Summary

  - HTML  `<img>` зургийг тодорхойлно
  - HTML `src` зургийн URL-г тодорхойлоно
  -  HTML `alt` зургыг харуулах боломжгүй бол өөр текстийг харуулах
  - HTML`width` болон`height` шинж чанарууд эсвэл CSS `width` болон`height` -ууд нь зургийн хэмжээг тохируулдаг

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