Përdorimi i img HTML IMG për fotot dhe objektet
HTML IMG tag rregullon futjen e fotove dhe objekteve të tjera grafike statike brenda një faqeje interneti. Ky etiketë e përbashkët mbështet disa atribute të detyrueshme dhe fakultative që shtojnë pasurinë në aftësinë tuaj për të hartuar një faqe interneti të angazhuar dhe të fokusuar në imazhin.
Një shembull i një IMG HTML formuar plotësisht duket si ky:
Kërkohet atributet e IMG-së
SRC. Atributi i vetëm që ju nevojitet për të marrë një imazh për t'u shfaqur në një faqe uebi është atributi SRC. Ky atribut identifikon emrin dhe vendndodhjen e skedarit të imazhit që do të shfaqet.
ALT. Për të shkruar XHTML dhe HTML4 të vlefshëm, kërkohet edhe atributi ALT. Ky atribut përdoret për të siguruar shfletues jo-shikues me tekst që përshkruan imazhin. Shfletuesit shfaqin tekstin alternativ në mënyra të ndryshme. Disa e shfaqin atë si një pop-up kur vendosni miun mbi imazhin, të tjerët e shfaqin atë në pronat kur klikoni me të djathtën mbi imazhin dhe disa nuk e shfaqin fare.
Përdorni tekstin alt për të dhënë detaje shtesë në lidhje me imazhin që nuk janë të rëndësishme ose të rëndësishme për tekstin e faqes Web. Por mos harroni se në lexuesit e ekranit dhe në shfletuesit e tjerë të tekstit, teksti do të lexohet në vijë me pjesën tjetër të tekstit në faqe. Për të shmangur konfuzionin, përdorni tekstin përshkrues të tekstit që thotë (për shembull), "Rreth Web Design dhe HTML" në vend të vetëm "logos".
Në HTML5, atributi ALT nuk kërkohet gjithmonë, sepse mund të përdorni një titull për të shtuar më shumë përshkrime. Ju gjithashtu mund të përdorni atributin ARIA-DESCRIBEDBY për të treguar një ID që përmban një përshkrim të plotë.
Edhe teksti i Alt nuk kërkohet nëse imazhi është thjesht dekorativ, siç është një grafik në krye të një faqeje interneti ose ikona. Por nëse nuk jeni i sigurt, përfshini alt tekstin vetëm në rast.
Atributet e rekomanduara të IMG
WIDTH dhe HEIGHT . Ju duhet të merrni në zakonin e gjithmonë duke përdorur atributet WIDTH dhe HEIGHT. Dhe gjithmonë duhet të përdorni madhësinë reale dhe mos ndryshoni imazhet tuaja me shfletuesin.
Këto atribute përshpejtojnë paraqitjen e faqes, sepse shfletuesi mund të ndajë hapësirën në dizajnin për imazhin dhe pastaj vazhdojë të shkarkojë pjesën tjetër të përmbajtjes, në vend që të presë që të shkarkojë tërë imazhin.
Atribute të tjera IMG të dobishme
TITULLI . Atributi është një atribut global që mund të zbatohet në çdo element HTML . Për më tepër, atributi TITLE ju lejon të shtoni informacion shtesë në lidhje me imazhin.
Shumica e shfletuesve mbështesin atributin TITLE, por e bëjnë këtë në mënyra të ndryshme. Disa e shfaqin tekstin si një pop-up ndërsa të tjerët e shfaqin atë në ekranet e informacionit kur përdoruesi klikon me të drejtë në imazh. Ju mund të përdorni atributin TITLE për të shkruar informata shtesë për imazhin, por mos llogarisni që ky informacion të jetë i fshehtë ose i dukshëm. Ju nuk duhet patjetër të përdorni këtë për të fshehur fjalë kyçe për motorët e kërkimit. Kjo praktikë ndëshkohet tani nga shumica e motorëve të kërkimit.
USEMAP dhe ISMAP . Këto dy atribute vendosin skedarët e imazhit të klientit () dhe server-side (ISMAP) imazheve tuaja.
LONGDESC . Atributi mbështet URL për një përshkrim më të gjatë të imazhit. Kjo veçori i bën imazhet tuaja më të arritshme.
Atribute deprecated dhe Obsolete IMG
Disa atribute tani janë të vjetruara në HTML5 ose janë depërtuar në HTML4. Për HTML më të mirë, duhet të gjesh zgjidhje të tjera në vend të përdorimit të këtyre atributeve.
KUFIRI . Atributi përcakton gjerësinë në piksele të çdo kufiri rreth imazhit. Ajo është deprecated në favor të CSS në HTML4 dhe është e vjetëruar në HTML5.
ALIGN . Kjo atribut ju lejon të vendosni një imazh brenda tekstit dhe të keni rrjedhën e tekstit rreth tij. Ju mund ta drejtoni një imazh në të djathtë ose në të majtë. Ajo është deprecated në favor të pronës float CSS në HTML4 dhe është i vjetëruar në HTML5.
HSPACE dhe VSPACE . HSPACE dhe atributet VSPACE shtojnë hapësira të bardha horizontalisht (HSPACE) dhe vertikalisht (VSPACE). Hapësira e bardhë do të shtohet në të dyja anët e grafikut (lart dhe poshtë ose majtas dhe djathtas), kështu që nëse keni nevojë vetëm për hapësirë nga njëra anë, duhet të përdorni CSS. Këto atribute janë deprecated në HTML4 në favor të pronës CSS margjin, dhe ata janë të vjetëruara në HTML5.
LOWSRC . Atributi LOWSRC jep një imazh alternativ kur burimi juaj i imazhit është aq i madh sa që shkarkon jashtëzakonisht ngadalë. Për shembull, mund të keni një imazh që është 500KB që dëshironi të shfaqni në faqen tuaj të internetit, por 500KB do të marrë një kohë të gjatë për ta shkarkuar. Kështu që ju krijoni një kopje shumë më të vogël të imazhit, ndoshta në të zezë dhe të bardhë ose thjesht optimizuar, dhe vendoseni atë në atributin LOWSRC. Imazhi më i vogël do të shkarkohet dhe shfaqet së pari, dhe kur të shfaqet imazhi më i madh, ai do të zëvendësojë një burim të ulët.
Atributi LOWSRC u shtua te Netscape Navigator 2.0 në tag IMG. Ishte pjesë e nivelit 1 të DOM-it, por u hoq nga niveli DOM 2. Mbështetja e shfletuesit ka qenë e skemës për këtë atribut, megjithëse shumë faqe pretendojnë se mbështeten nga të gjithë shfletuesit modernë. Nuk është deprecated në HTML4 ose i vjetëruar në HTML5 sepse ajo kurrë nuk ishte pjesë zyrtare e asnjërës specifikim.
Shmangni përdorimin e këtij atributi dhe në vend të kësaj zgjedhni imazhet tuaja në mënyrë që ato të ngarkohen shpejt. Shpejtësia e ngarkimit të faqeve është një pjesë kritike e dizajnit të mirë të uebit dhe imazhet e mëdha ngadalësojnë faqet e faqeve të mëdha - edhe nëse përdorni atributin LOWSRC.