HTML Image
Вебсайтад зураг оруулах
Adding Images
Зураг оруулахад <img> элемент ашиглана.
<img> нь хоосон элемент (хаах tag хэрэглэдэггүй гэсэн үг).
Adding Images
Энэ tag нь дараах 3 attribute-ийг заавал авдаг.
- src: Энэ attribute дээр зургийг хаанаас олохыг заадаг.
- alt: Энэ attribute нь зураг харагдах боломжгүй байгаа тохиолдолд зургийн оронд харагдах товч тайлбар байна.
- title: Үүнд мөн адил тайлбар бичиж болно. Веб хөтөч тэр тайлбарыг нь зураг дээгүүр mouse очих үед харуулдаг.
Adding images
Height & Width of Images
WHERE TO PLACE IMAGES IN YOUR CODE
1. Paragraph-ийн өмнө: Теĸст нь зургийн дараа шинэ мөрөнд харагдана.
2. Paragraph дотор эхэнд нь: Теĸстийн эхний мөр нь зургийн доод хэсгээс залгаж харагдана.
3. Paragraph дунд.
WHERE TO PLACE IMAGES IN YOUR CODE
1. Paragraph-ийн өмнө: Теĸст нь зургийн дараа шинэ мөрөнд харагдана.
2. Paragraph дотор эхэнд нь: Теĸстийн эхний мөр нь зургийн доод хэсгээс залгаж харагдана.
3. Paragraph дунд.
Three rules for creating images
1. Зургийг зөв форматаар хадгалах
Website-д голчлон jpeg, gif, png форматтай зураг хэрэглэдэг. Буруу формат сонгосны улмаас зураг байх ёстой шигээ тод харагдахгүй байх эсвэл таны web хуудас илүү удаан ачаалах асуудал гарна.
Three rules for creating images
2. Зургийг зөв хэмжээтэй хадгалах
Зургийг website дээр харагдах хэмжээтэй нь яг ижил хэмжээтэйг хадгалах хэрэгтэй. Хэрэв таны заасан хэмжээнээс өргөн эсвэл өндөр нь ялгаатай зураг байвал сунаж гажуудсан юм шиг харагдах магадлалтай. Харин заасан өргөн өндрөөс том байвал хуудас дээр илүү их зай эзлэх магадлалтай.
Three rules for creating images
3. Зөв нягтаршилтайг ашигла
Компьютерын дэлгэц нь pixel гэдэг цэгүүдээс бүтдэг. Website дээрх зургууд нь мөн адил олон жижиг цэгүүдээс бүтдэг. Нягтаршил буюу resolution гэж нэг inch-д оногдох цэгүүдийн тоог хэлдэг. Ихэнх компьютерын дэлгэц нэг inch-д 72 pixel харуулдаг. Тиймээс шаардлагатай хэмжээнээс илүү нягтаршилтай зураг хадгалах нь зургийг татаж авахад их хугацаа шаарддаг.
Image resolution
Web дээрх зургуудын нягтрал 1 inch тутамд 72 pixel (72ppi) байдгийг бид өмнө нь үзсэн. Зургийн нягтрал их байх тусам тухайн file-ийн эзлэх хэмжээ ихэснэ.
HTML Images
Summary
- <img> tag нь веб хуудсанд зураг нэмэхэд хэрэгдэнэ.
- src attribute ашиглан зурагийн замыг мөн alt attribute ашиглан зургийн агуулгыг тодорхойлж өгнө.
- Зургийг вебсайт дээр хэрэглэгдэх хэмжээ болон форматад тохируулж хадгалах хэрэгтэй.