HTML Зураг /Images/
Зураг нь вэб хуудасны өнгө төрхийг гоё сайхан харагдуулдгаас гадна маш их мэдээлэл өгч чаддаг хүчирхэг хэрэгсэл юм..
HTML Зураг оруулах бичиглэл /Images Syntax/
HTML-д зургийг <img> tag-д тодорхойлдог. <img> tag-д хаалтын tag байдаггүй. Зургийн байршлыг src атрибутад зааж өгнө.
<img src="url">
Alt атрибут
Вэб хуудсыг хэт удаан ачаалах, эсвэл зурагт ямар нэгэн алдаа гарсан тохиолдолд alt атрибутад зааж өгсөн зурагтай холбоотой текстийг дэлгэцэд харуулна.
Өөрөөр хэлбэл alt атрибутын утга нь зургийг дүрсэлсэн текст байх ёстой.
Жишээлбэл:
Зурагт ямар нэгэн алдаа гараагүй тохиолдол зөвхөн зураг дэлгэцэд харагдах болно
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<img src="/static/img/horgo.jpg" alt="Монголын үзэсгэлэнт газар Хорогын Тогоо">
</body>
</html>
Жишээлбэл:
Алдаа гарвал дараах байдалтай харагдана
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<img src="/static/img/horgiin_togoo.gif" alt="Монголын үзэсгэлэнт газар Хорогын Тогоо">
</body>
</html>
Зургийн хэмжээ Өндөр ба Өргөн
Зургийн өндөр, өргөнийг тодорхойлохдоо style атрибутыг ашиглаж болно.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<h1>Зургийн хэмжээ</h1>
<img src="/static/img/horgo.jpg" alt="Монголын үзэсгэлэнт газар Хорогын Тогоо" style="width:350px; height:250px;">
</body>
</html>
Эсвэл HTML-ийн өөрийн width ба height атрибутыг ашиглаж болно.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<h1>Зургийн хэмжээ</h1>
<img src="/static/img/horgo.jpg" alt="Монголын үзэсгэлэнт газар Хорогын Тогоо" width="350"; height="250;">
</body>
</html>
Анхаар: width ба height атрибут нь үргэж pixel-ээр тодорхойлогдсон байдаг.
Тэмдэглэл: Зургийн өргөн, өндрийг зааж өгч байхыг зөвлөж байна. Хэрэв зааж өгөхгүй бол таны хүссэнээс өөр хэмжээтэй дэлгэцэд харагдах болно.
Өргөн, өндөр атрибутыг сонгох уу? Style-г сонгох уу?
width, height болон style атрибутууд нь бүгд HTML-ийн атрибут юм.
Өргөн ба өндрийг style атрибутад зааж өгч байхыг зөвлөж байна. Хэрвээ CSS-ээс зургийн хэмжээг өөрчилөх комманд өгвөл HTML атрибутад зааж өгсөн зургийн хэмжээ хүчингүй болно.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
img {
/* Энд зургийн өргөнийг 100% гэж зааж өгсөн нь бүх зурганд хамаарна. */
width: 100%;
}
</style>
</head>
<body>
<h1>Өргөн өндөр HTML атрибут</h1>
<p>HTML атрибутад зааж өгсөн тул дээрх команд энд хамаарна</p>
<img src="/static/horgo.jpg" alt="Монголын үзэсгэлэнт газар Хорогын Тогоо" width="350"; height="250;">
<h1>Style атрибут</h1>
<p>Style атрибутад зааж өгсөн тул дээрх команд энд үйлчлэхгүй</p>
<img src="/static/img/horgo.jpg" alt="Монголын үзэсгэлэнт газар Хорогын Тогоо" style="width:350px; height:250px;">
</body>
</html>
Өөр хавтсанд байгаа зургийг зааж өгөх
Зургийн байрлалыг зааж өгөөгүй тохиолдолд Интернет хөтөч вэб хуудас байрлаж байгаа хавтаснаас зургийг хайдаг. Гэвч зургийг дэд хавтсан байрлуулах нь илүү тохиромжтой байдаг бөгөөд доорх байдлаар замыг зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<img src="/img/horgiin_togoo.gif" alt="Монголын үзэсгэлэнт газар Хорогын Тогоо" style="width:400px; height:300px;">
</body>
</html>
Өөр серверээс зургийг ачаалах
Сүүлийн үеийн олон нийтийн сүлжээ сайт зургийг өөр серверээс ачаалдаг.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<img src="http://www.iexpo.mn/static/banner1/kacc.jpg" alt="Касс.Мн Лого">
</body>
</html>
Хөдөлгөөнт зураг
HTML хөдөлгөөнт зургийг зөвшөөрдөг.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<img src="/static/img/giphy.gif" alt="Funny moment">
</body>
</html>
Зураг холбоос хийж чадна
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<a href="http://www.abcd.mn">
<img src="/static/img/horgo.jpg" alt="Монголын үзэсгэлэнт газар Хорогын Тогоо" style="width:350px; height:250px;">
</a>
</body>
</html>
Зургийг зэрэгцүүлэх /Image Floating/
CSS-ийн float шинж чанарыг ашиглан зургийг текстийн баруун эсвэл зүүн тал руу зэрэгцүүлж болно.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<p>
<img src="/static/img/html/icon.jpg" style="float:right; width:48px; height:48px;">
Зургийг догол мөрийн баруун талд зэрэгцүүлж байна.
</p>
<p>
<img src="/static/img/html/icon.jpg" style="float:left; width:48px; height:48px;">
Зургийг догол мөрийн зүүн талд зэрэгцүүлж байна.
</p>
</body>
</html>
HTML Дэвсгэр зураг
HTML-д бараг бүх элемент дэвсгэр зураг авдаг.
HTML нь дэвсгэр зургийг авахдаа CSS-ийн background-image шинж чанарыг ашиглана.
Дэвсгэр зургийг HTML элементэд авч үзье
style атрибутыг ашиглан HTML элементэд дэвсгэр зураг авч үзье.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<div style="background-image: url('/static/img/html/mongolia.jpg');">
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
</div>
</body>
</html>
Мөн style элементэд зааж өгч болно.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
div {
background-image: url('/static/img/html/mongolia.jpg');
}
</style>
</head>
<body>
<div>
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
сур сур бас дахин сур<br />
</div>
</body>
</html>
Background Repeat
Дэвсгэр зураг нь HTML элементээс жижиг бол зураг хэвтээ болон босоо тэнхлэгт давтдаг.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
body {
background-image: url('/static/img/html/mongolia.jpg');
}
</style>
</head>
<body>
<div">
<p>Дэвсгэр зураг нь HTML элементээс жижиг бол босоо болон хэвтээ тэнхлэгт давтна</p>
сур сур бас дахин сур
</div>
</body>
</html>
background-repeat шинж чанарын тусламжтайгаар давталтаас татгалзаж болно.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
body {
background-image: url('/static/img/html/mongolia.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div">
<p>Дэвсгэр зураг нь HTML элементээс жижиг байсан ч давтахгүй</p>
сур сур бас дахин сур
</div>
</body>
</html>
Background Cover
Таны оруулсан дэвсгэр зураг давталт ашиглахгүй HTML элементийг бүхэлд нь хамрахыг хүс байвал background-size шинж чанарт хамрах утгыг зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
body {
background-image: url('/static/img/html/mongolia.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
Background Stretch
Таны оруулсан дэвсгэр зураг элементийг бүхэлд нь давталтгүй хамрах өөр нэг арга бол background-size шинж чанарт хамрах утгыг 100% 100% гэж урт болон өргөнийг зааж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<style>
body {
background-image: url('/static/img/html/mongolia.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
</body>
</html>
Сэтгэгдэлүүд
