Зургууд нь вэб хуудасны дизайн, гадаад байдлыг сайжруулж чаддаг.
<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
