Зургууд нь вэб хуудасны дизайн, гадаад байдлыг сайжруулж чаддаг.
<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>
Хөвж буй зураг #
CSSfloat
шинж чанарыг ашиглан текстийг текстийн баруун эсвэл зүүн талд хөвүүлэх боломжийг олгоно
<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
шинж чанарууд эсвэл CSSwidth
болонheight
-ууд нь зургийн хэмжээг тохируулдаг
- HTML