Nggunakake Tag HTML IMG kanggo Gambar lan Obyek
Tag HTML IMG ngatur panilitane gambar lan objek grafis statis liyane ing kaca web. Tag umum iki ndhukung sawetara atribut sing wajib lan opsional sing nambahake kekayaan kanggo kemampuan kanggo ngrancang situs web sing fokus lan nyenengake.
Conto saka tag HTML IMG sing wis kabentuk katon kaya iki:
Atribut IMG Tag sing dibutuhake
SRC. Atribut mung sampeyan kudu njupuk gambar kanggo nampilake ing kaca web iku atribut SRC. Atribut iki ngenali jeneng lan lokasi file gambar sing bakal ditampilake.
ALT. Kanggo nulis XHTML lan HTML4 bener, atribut ALT uga dibutuhake. Atribut iki digunakake kanggo nyedhiyani browser nonvisual kanthi teks sing nggambarake gambar kasebut. Browser nampilake teks alternatif ing macem-macem cara. Sawetara nuduhake minangka pop-up nalika sampeyan numpuk mouse ing gambar, liyane nuduhake ing properti nalika sampeyan klik-tengen ing gambar, lan sawetara ora nuduhake ing kabeh.
Gunakake teks alt kanggo menehi katrangan tambahan babagan gambar sing ora cocog utawa penting kanggo teks kaca Web. Nanging elinga yen ing layar sing maca lan browser liyane mung teks, teks bakal diwaca sakderenge karo sisa teks ing kaca kasebut. Kanggo ngindhari kebingungan, gunakake teks alt deskriptif sing nyatakake (contone), "About Web Design and HTML" tinimbang mung "logo".
Ing HTML5, atribut ALT ora tansah dibutuhake, amarga sampeyan bisa nggunakake caption kanggo nambah katrangan liyane. Sampeyan uga bisa nggunakake atribut ARIA-DESCRIBEDBY kanggo nunjukaké ID sing ngemot gambaran lengkap.
Teks teks uga ora dibutuhake yen gambar kasebut sejatine hiasan, kayata grafis ing sisih ndhuwur kaca web utawa lambang. Nanging yen sampeyan ora yakin, klebu alt teks mung.
Disaranake IMG Atribut
WIDTH lan HEIGHT . Sampeyan kudu njaluk menyang pakulinan tansah nggunakake atribut WIDTH lan HEIGHT. Lan sampeyan kudu nggunakake ukuran nyata lan ora ngowahi ukuran gambar kanthi browser.
Atribut kasebut nyepetake panampil kaca amarga browser bisa nyedianake spasi ing rancangan kanggo gambar kasebut, lan banjur terus ngundhuh isi liyane, tinimbang nunggu kabeh gambar sing diunduh.
Atribut IMG Migunani liyane
TITLE . Atribut punika atribut global sing bisa diterapake ing sembarang elemen HTML . Menapa malih, atribut TITLE nyedhiyakake sampeyan nambahake informasi tambahan babagan gambar kasebut.
Paling browser ndhukung atribut TITLE, nanging padha nglakoni kanthi cara sing beda-beda. Sawetara nampilake teks minangka pop-up nalika wong nampilake ing layar informasi nalika pangguna klik ing gambar kasebut. Sampeyan bisa nggunakake atribut TITLE kanggo nulis informasi tambahan babagan gambar, nanging ora dianggep minangka informasi kasebut sing disembunyikan utawa katon. Sampeyan kudu paling mesthi ora nggunakake iki kanggo ndhelikake tembung kunci kanggo mesin telusur. Praktek iki saiki diasilake dening akeh mesin pencari.
USEMAP lan ISMAP . Iki loro atribut atur gambar gambar klien (lan) lan server-side (ISMAP) menyang gambar sampeyan.
LONGDESC . Atribut ndhukung URL kanggo katrangan maneh gambar. Fitur iki ndadekake gambar sampeyan luwih gampang diakses.
Disimpulake lan Luwih saka Atribusi IMG
Sawetara atribut saiki wis ora sah ing HTML5 utawa dipungkasi ing HTML4. Kanggo HTML paling apik, sampeyan kudu nemokake solusi liyane tinimbang nggunakake atribut kasebut.
BORDER . Atribut nemtokake jembaré piksel ing sembarang watesan ing gambar. Sampun dipungkasi kanthi milih CSS ing HTML4 lan liwati ing HTML5.
ALIGN . Atribut iki ngidini sampeyan kanggo nyelehake gambar ing sajrone teks kasebut lan entuk dhaptar teks ing kono. Sampeyan bisa ndelehake gambar ing sisih tengen utawa ing sisih kiwa. Sampeyan ora bisa nggunakake properti CSS float ing HTML4 lan ora ono ing HTML5.
HSPACE lan VSPACE . Ing HSPACE lan atribut VSPACE nambah spasi putih sacara horisontal (HSPACE) lan vertikal (VSPACE). Spasi putih bakal ditambahake ing loro-lorone grafik (ndhuwur lan ngisor utawa kiwa lan tengen), supaya yen sampeyan mung perlu spasi ing salah siji, sampeyan kudu nggunakake CSS. Atribut-atribut iki wis ora bisa ditemokaké ing HTML4 sing mbiyantu properti margin CSS, lan ora ana sing ilang ing HTML5.
LOWSRC . Atribut LOWSRC menyediakan gambar alternatif nalika sumber gambar dadi gedhe sing diundhuh alon-alon. Umpamane, sampeyan bisa duwe gambar sing 500KB sing pengin ditampilake ing kaca web, nanging 500KB bakal entuk akeh wektu kanggo ngundhuh. Supaya sampeyan nggawe salinan gambar sing luwih cilik, mbok menawa dadi ireng lan putih utawa mung banget dioptimalake, lan sijine sing ana ing atribut LOWSRC. Gambar sing luwih cilik bakal ngundhuh lan nampilake luwih dhisik, banjur nalika gambar sing luwih gedhe katon bakal ngganti sawijining sumber sing kurang.
Atribut LOWSRC ditambah ing Netscape Navigator 2.0 ke tag IMG. Iku bagéan saka DOM tingkat 1 nanging banjur dibusak saka level DOM 2. Dhukungan browser wis samar-samar kanggo atribut iki, senadyan akeh situs pratelan sing didhukung dening kabeh browser modern. Sampeyan ora ditrapake ing HTML4 utawa liwati ing HTML5 amarga iku ora tau dadi bagian resmi saka salah sijine spesifikasi.
Aja nggunakake atribut iki lan malah ngoptimalake gambar supaya bisa diunduh kanthi cepet. Kacepetan pangreksan kaca minangka bagéan penting saka desain Web sing apik, lan gambar gedhe ngowahi kaca kanthi alon-sanajan sampeyan nggunakake atribut LOWSRC.