Suratlar va ob'ektlar uchun HTML IMG kirishidan foydalanish
HTML IMG yorlig'i veb-sahifadagi rasm va boshqa statik grafik obyektlarni kiritishni boshqaradi. Ushbu umumiy yorliq bir necha majburiy va ixtiyoriy attributlarni qo'llab-quvvatlaydi va siz o'zingizning qiziqarli va rasmga asoslangan veb-saytlarni ishlab chiqish qobiliyatiga boyitadi.
To'liq yaratilgan HTML IMG yorlig'i misoli shunday ko'rinadi:
Kerakli IMG Tag xususiyatlari
SRC. Veb-sahifada ko'rsatiladigan rasmni olishingiz kerak bo'lgan yagona xususiyat SRC xususiyati. Ushbu atribut tasvirlangan faylning nomi va joylashishini belgilaydi.
ALT. Joriy XHTML va HTML4 yozish uchun ALT xususiyati ham talab qilinadi. Ushbu atribut tasvirni aniqlanadigan nosavdo brauzerlarni taqdim qilish uchun ishlatiladi. Brauzerlar muqobil matnni turli yo'llar bilan ko'rsatadi. Ba'zilar uni sichqonchani rasm ustiga qo'yishganda pop-up ko'rinishini, boshqasiga esa tasvirni o'ng tugmasini bosganda xususiyatlarini ko'rsatishadi, ba'zilari esa uni butunlay aks ettirmaydi.
Veb-sahifaning matniga tegishli bo'lmagan yoki ahamiyatli bo'lmagan tasvir haqida qo'shimcha ma'lumot berish uchun pastki matndan foydalaning. Shuni esda tutingki, ekranda o'qiydiganlar va boshqa matnli brauzerlar matnni sahifadagi matnning qolgan qismi bilan inline qilinadi. Chalkashishning oldini olish uchun "logotip" o'rniga (masalan, "Veb-dizayn va HTML haqida") tavsiflovchi pastki matndan foydalaning.
HTML5-da, ALT xususiyati har doim ham talab qilinmaydi, chunki unga qo'shimcha tavsiflarni qo'shish uchun sarlavhadan foydalanishingiz mumkin. To'liq tavsifini o'z ichiga olgan identifikatorni ko'rsatish uchun ARIA-DESCRIBEDBY xususiyatidan foydalanishingiz mumkin.
Agar rasm veb-sahifaning yoki piktogrammalarning yuqori qismidagi grafik kabi oddiy bezak bo'lsa, pastki matn ham talab qilinmaydi. Agar siz ishonchingiz komil bo'lmasa, unda faqat matnni kiriting.
Tavsiya etilgan IMG xususiyatlari
Kenglik va balandlik . Siz odatda WIDTH va HEIGHT xususiyatlarini ishlatish odatiga kirishingiz kerak. Va siz har doim haqiqiy o'lchamidan foydalanishingiz va rasmlarni brauzer bilan o'lchamasligingiz kerak.
Ushbu atributlar sahifani ko'rsatish jarayonini tezlashtiradi, chunki brauzer tasvir uchun dizayndagi bo'sh joyni ajratishi va so'ngra butun rasmni yuklab olishni kutmasdan, qolgan tarkibni yuklab olishni davom ettiradi.
Boshqa foydali IMG xususiyatlari
TITLE . Atribut har qanday HTML elementiga qo'llaniladigan global xususiyatdir. Bundan tashqari, TITLE xususiyati tasvir haqida qo'shimcha ma'lumotni kiritish imkonini beradi.
Ko'pgina brauzerlar TITLE xususiyatini qo'llab-quvvatlaydi, ammo ular uni turli usullarda amalga oshiradilar. Ba'zilari matnni pop-up sifatida aks ettirsa, boshqalari tasvirni o'ng chertganida boshqalar uni informatsion ekranlarda aks ettiradi. TITLE attributini tasvir haqida qo'shimcha ma'lumot yozish uchun foydalanishingiz mumkin, lekin bu ma'lumot yashirin yoki ko'rinadigan hisoblanmaydi. Siz, albatta, bu qidiruv tizimlariga kalit so'zlarni yashirish uchun foydalanmasligingiz kerak. Ushbu dastur endi ko'pchilik qidirish mexanizmlari tomonidan jazolanadi.
USEMAP va ISMAP . Ushbu ikkita atributlar mijozlarga () va server tomoni (ISMAP) tasvirini rasmlarga o'rnatadi.
LONGDESC . Atribut URL-ni tasvirning uzoqroq ta'rifiga qo'llaydi. Bu xususiyat sizning tasvirlaringizni yanada qulayroq qilish imkonini beradi.
Eskirgan va foydalanilmagan IMG attributes
Bir necha xususiyatlar HTML5 da eskirgan yoki HTML4 da eskirgan. Eng yaxshi HTML uchun bu xususiyatlardan foydalanish o'rniga boshqa echimlarni topishingiz kerak.
SIDER . Atribut tasvirning atrofidagi chegara pikselidagi kengligi belgilaydi. HTML4 da CSS foydasiga bekor qilingan va HTML5 da eskirgan.
ALIGN . Bu atribut matni ichkaridagi tasvirni joylashtirishga imkon beradi va uning atrofidagi matn oqimiga ega. Rasmni o'ngga yoki chapga tekislashingiz mumkin. HTML4-da float CSS xususiyatidan foydalangandir va HTML5 da eskirgan.
HSPACE va VSPACE . HSPACE va VSPACE atributlari gorizontal oq bo'shliqni (HSPACE) va vertikal (VSPACE) qo'shadi. Grafika ikkala tomoniga (yuqori va pastki, chap yoki o'ng) oq bo'shliq qo'shiladi, shuning uchun siz faqat bitta tomonga bo'sh joy kerak bo'lsa CSS-dan foydalaning. Ushbu atributlar HTML4-da margin CSS-ning foydasi uchun bekor qilindi va HTML5 da eskirgan.
LOWSRC . LOWSRC xususiyati sizning rasmingiz juda sekin tushadigan darajada katta bo'lsa, muqobil tasvirni taqdim etadi. Misol uchun, sizning veb-sahifangizda ko'rsatmoqchi bo'lgan 500KB bo'lgan rasmga ega bo'lishingiz mumkin, ammo 500KB yuklab olish uchun juda ko'p vaqt kerak bo'ladi. Shunday qilib, rasmning juda kichik nusxasini, ehtimol qora va oq rangda yoki juda optimallashtiradigan qilib yaratasiz va LOWSRC xususiyatiga kiritasiz. Keyinchalik kichik rasm tushiriladi va birinchi bo'lib ko'rsatiladi va keyinroq kattaroq rasm paydo bo'lganda quyi manba kodini o'zgartiradi.
LOWSRC xususiyati Netscape Navigator 2.0 ga IMG tagiga qo'shildi. Bu DOM 1-darajali qismi bo'lib, keyinchalik DOM-dan 2-darajadan chiqarildi. Ko'pchilik saytlar barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanayotganini da'vo qilsa-da, brauzerni qo'llab-quvvatlashi bu xususiyat uchun sketchy bo'ldi. HTML5 da eskirmaydi yoki HTML5 da eskirmaydi, chunki u hech qanday texnik xususiyatlarning rasmiy qismi emas edi.
Ushbu xususiyatdan foydalanmaslikka harakat qiling va o'rniga rasmlarni optimallashtirishga harakat qiling. Sahifani yuklash tezligi yaxshi veb-dizaynning muhim qismidir va katta rasmlar LOWSRC xususiyatidan foydalansangiz ham, sahifalarni juda past darajada sekinlashtiradi.