Matumizi ya Tag IMG ya HTML ya Picha na Vitu
Kitambulisho cha IMG cha HTML kinatawala kuingizwa kwa picha na vitu vingine vya picha vilivyomo ndani ya ukurasa wa wavuti. Lebo hii ya kawaida inasaidia sifa kadhaa za lazima na za hiari ambazo huongeza utajiri kwa uwezo wako wa kuunda tovuti ya kujishughulisha, iliyozingatia picha.
Mfano wa tag kamili ya HTML IMG inaonekana kama hii:
Matumizi ya Tag ya IMG inahitajika
SRC. Sifa pekee unayohitaji kupata picha kuonyeshwa kwenye ukurasa wa wavuti ni sifa ya SRC. Tabia hii inabainisha jina na eneo la faili ya picha inayoonyeshwa.
ALT. Kuandika XHTML na HTML4 halali, sifa ya ALT pia inahitajika. Tabia hii hutumiwa kutoa browsers zisizo za kawaida na maandiko yanaelezea picha. Watazamaji wanaonyesha maandishi mbadala kwa njia tofauti. Wengine huionyesha kama pop-up wakati wewe kuweka mouse yako juu ya picha, wengine kuonyeshwa katika mali wakati click haki juu ya picha, na wengine hawana kuonyesha kabisa.
Tumia maandishi ya alt ili kutoa maelezo ya ziada juu ya picha ambayo haifai au muhimu kwa maandishi ya ukurasa wa wavuti. Lakini kumbuka kwamba katika wasomaji wa screen na browsers nyingine tu ya maandishi, maandiko yatahesabiwa kwa muhtasari na maandishi yote kwenye ukurasa. Ili kuepuka kuchanganyikiwa, tumia maelezo maandishi ya wazi ambayo inasema (kwa mfano), "Kuhusu Muundo wa Mtandao na HTML" badala ya "alama" tu.
Katika HTML5, sifa ya ALT haipaswi daima, kwa sababu unaweza kutumia maelezo ya kuongeza maelezo zaidi. Unaweza pia kutumia sifa ARIA-DESCRIBEDBY ili kuonyesha ID ambayo ina maelezo kamili.
Maandishi ya Alt pia hayatakiwi ikiwa picha ni mapambo ya kupendeza, kama vile picha iliyo juu ya ukurasa wa wavuti au icons. Lakini ikiwa huna hakika, washirikisha maandishi ya dhahabu tu ikiwa huenda.
Vipengee vya IMG vilivyopendekezwa
WIDTH na HEIGHT . Unapaswa kuingia katika tabia ya kutumia kila mara sifa za WIDTH na HEIGHT. Na unapaswa kutumia ukubwa wa kawaida daima na usibadilishe picha zako na kivinjari.
Tabia hizi zinaharakisha utoaji wa ukurasa kwa sababu kivinjari anaweza kugawa nafasi katika kubuni kwa picha, na kisha kuendelea kupakua maudhui yote, badala ya kusubiri picha nzima ya kupakua.
Makala nyingine muhimu ya IMG
TITLE . Tabia ni sifa ya kimataifa ambayo inaweza kutumika kwa kipengele chochote cha HTML . Aidha, sifa ya TITLE inakuwezesha kuongeza maelezo zaidi kuhusu picha.
Vinjari zaidi vinasaidia sifa ya TITLE, lakini hufanya kwa njia tofauti. Wengine huonyesha maandishi kama pop-up wakati wengine wanaionyesha kwenye skrini za habari wakati mtumiaji anachochea haki kwenye picha. Unaweza kutumia sifa ya TITLE kuandika maelezo ya ziada juu ya picha, lakini usiwe na hesabu habari hii kuwa imefichwa au inayoonekana. Unapaswa kabisa kutumia hii kuficha maneno ya injini za utafutaji. Mazoezi haya sasa yameadhibiwa na injini nyingi za utafutaji.
USEMAP na ISMAP . Tabia hizi mbili ziliweka ramani za picha za mteja () na upande wa seva (ISMAP) kwa picha zako.
LONGDESC . Tabia husaidia URL kwa maelezo marefu zaidi ya picha. Kipengele hiki hufanya picha zako ziweze kupatikana.
Sifa za IMG zisizo na kizuizi
Tabia kadhaa sasa zimeharibika katika HTML5 au zimeondolewa katika HTML4. Kwa HTML bora, unapaswa kupata ufumbuzi mwingine badala ya kutumia sifa hizi.
BORDER . Tabia hufafanua upana katika saizi za mpaka wowote karibu na picha. Imepunguzwa kwa neema ya CSS katika HTML4 na imekamilika kwa HTML5.
ALIGN . Tabia hii inakuwezesha kuweka picha ndani ya maandiko na kuwa na mtiririko wa maandishi kuzunguka. Unaweza kuunganisha picha kwa haki au kushoto. Imepunguzwa kwa neema ya mali ya kuelekezwa ya CSS katika HTML4 na imekamilika kwa HTML5.
HSPACE na VSPACE . HSPACE na sifa za VSPACE zinaongeza nafasi nyeupe kwa usawa (HSPACE) na vertically (VSPACE). Nafasi nyeupe itaongezwa kwa pande mbili za picha (juu na chini au kushoto na kulia), hivyo ikiwa unahitaji tu nafasi upande mmoja, unapaswa kutumia CSS. Tabia hizi zimeachwa katika HTML4 kwa kuzingatia mali ya kiasi cha CSS, na ni kizamani katika HTML5.
LOWSRC . Sifa ya LOWSRC hutoa picha mbadala wakati chanzo chako cha picha ni kikubwa sana kinachopakua polepole sana. Kwa mfano, unaweza kuwa na picha ambayo ni 500KB ambayo unataka kuonyesha kwenye ukurasa wako wa wavuti, lakini 500KB ingachukua muda mrefu kupakua. Kwa hiyo ununda nakala ndogo sana ya picha, labda katika nyeusi na nyeupe au tu imefungwa sana, na kuweka hiyo katika sifa ya LOWSRC. Picha ndogo itapakua na kuonyesha kwanza, halafu wakati picha kubwa inaonekana itabadilisha chanzo cha chini.
Sifa ya LOWSRC iliongezwa kwa Netscape Navigator 2.0 kwenye tag ya IMG. Ilikuwa ni sehemu ya DOM ngazi ya 1 lakini iliondolewa kutoka ngazi ya DOM 2. Msaada wa kivinjari imekuwa sketchy kwa sifa hii, ingawa tovuti nyingi zinasema kwamba zinasaidiwa na browsers zote za kisasa. Haijachukuliwa katika HTML4 au kwa muda mrefu katika HTML5 kwa sababu haikuwepo sehemu rasmi ya vipimo vyote.
Epuka kutumia sifa hii na badala yake uboresha picha zako ili waweze kupakia haraka. Kasi ya upakiaji wa ukurasa ni sehemu muhimu ya kubuni Mtandao mzuri, na picha kubwa za kurasa za chini sana-hata kama unatumia sifa ya LOWSRC.