Žymos HTML IMG naudojimas nuotraukoms ir objektams
Žymė HTML IMG reglamentuoja nuotraukų ir kitų statinių grafinių objektų įterpimą tinklalapyje. Ši bendroji žyma palaiko keletą privalomų ir neprivalomų atributų, kurie papildo jūsų galimybes kurti įdomią, į vaizdą orientuotą svetainę.
Visiškai suformuotos HTML IMG žymos pavyzdys yra toks:
Būtini IMG žymos atributai
SRC Vienintelis požymis, kurio reikia, kad vaizdas būtų rodomas tinklalapyje, yra SRC atributas. Šis atributas nurodo rodomo vaizdo failo pavadinimą ir vietą.
ALT Norint parašyti teisingą XHTML ir HTML4, taip pat reikalingas ALT atributas. Šis atributas naudojamas norint pateikti ne visoms naršyklėms tekstą, kuriame aprašomas vaizdas. Naršyklėje alternatyvų tekstą rodomas įvairiais būdais. Kai kurie iš jų rodomi kaip iššokantieji langai, kai įdėkite pelės žymeklį ant nuotraukos, kiti rodo jo ypatybes, kai dešiniuoju pelės klavišu spustelėjote vaizdą, o kai kurie iš jų nerodomi.
Naudokite alt tekstą, jei norite pateikti papildomos informacijos apie vaizdą, kuris nėra tinkamas arba svarbus tinklalapio tekstui. Tačiau atminkite, kad ekrano skaitytuvuose ir kitose tik teksto naršyklėse tekstas bus skaitomas į eilutę su likusiu teksto puslapiu. Siekiant išvengti painiavos, naudokite aprašomąjį alt tekstą, kuris sako (pavyzdžiui), "Apie žiniatinklio dizainą ir HTML", o ne tiesiog "logotipą".
HTML5 atributas ALT ne visada reikalingas, nes galite naudoti antraštę, kad pridėtumėte daugiau aprašymo. Taip pat galite naudoti atributas ARIA-DESCRIBEDBY, norėdami nurodyti ID, kuriame yra išsamus aprašymas.
Alt tekstas taip pat nereikalingas, jei vaizdas yra grynai dekoratyvus, pvz., Grafika, esanti interneto puslapio viršuje arba piktogramose. Bet jei nesate tikras, įtraukite alt tekstą bet kuriuo atveju.
Rekomenduojami IMG atributai
Plotis ir auksas . Turėtumėte įeiti į įprotį visada naudoti atributus WIDTH ir HEIGHT. Ir visada turėtumėte naudoti tikruosius dydžius, o ne pakeisti vaizdus per naršyklę.
Šie atributai pagreitina puslapio atvaizdavimą, nes naršyklė gali priskirti vietos vaizdui dizainą ir toliau atsisiųsti likusį turinį, o ne laukti, kol atsiųs visą vaizdą.
Kiti naudingi IMG atributai
TITLE . Atributas yra visuotinis atributas, kuris gali būti taikomas bet kuriam HTML elementui . Be to, atributas TITLE leidžia jums pridėti papildomos informacijos apie vaizdą.
Dauguma naršyklių palaiko atributą TITLE, tačiau jie tai daro įvairiais būdais. Kai kurie rodomi kaip iššokančiajame tekste, o kiti - ekranuose, kai vartotojas paspaudžia ant vaizdo. Galite naudoti atributą TITLE, norėdami parašyti papildomą informaciją apie vaizdą, bet neatsižvelgiama į tai, kad ši informacija nebūna paslėpta ar matoma. Jūs turėtumėte neabejotinai nenaudoti šio, kad paslėptų raktažodžius paieškos varikliams. Šią praktiką dabar baudžia dauguma paieškos sistemų.
USEMAP ir ISMAP . Šie du atributai, kuriuos nustato kliento pusės () ir serverio pusės (ISMAP) vaizdas, nukreipia į jūsų atvaizdus.
LONGDESC . Šis atributas palaiko URL adresus ilgesniam vaizdo aprašui. Ši funkcija leidžia jūsų vaizdus lengviau pasiekti.
Neišsamūs ir pasenę IMG atributai
Keli atributai dabar yra pasenę HTML5 ar pasenę HTML4. Siekiant geriausio HTML, turėtumėte rasti kitų sprendimų, o ne naudoti šiuos atributus.
BORDER . Šis atributas apibrėžia bet kokios nuotraukos rėmelio pikselių plotį. Tai buvo laikoma naudinga CSS HTML4 ir yra pasenusi HTML5.
ALIGN Šis atributas leidžia įterpti vaizdą į tekstą ir jį apvynioti. Galite suderinti vaizdą į dešinę arba į kairę. Tai buvo pasenusi HTML4 populiarios CSS nuosavybės naudai ir HTML5 yra pasenusi.
HSPACE ir VSPACE . HSPACE ir atributai VSPACE prideda baltą erdvę horizontaliai (HSPACE) ir vertikaliai (VSPACE). Balta erdvė bus pridėta abiejose grafikos pusėse (viršuje ir apačioje arba kairėje ir dešinėje), taigi, jei jums reikia tik vienos pusės vietos, turėtumėte naudoti CSS. Šie atributai HTML4 nepasiekė naudai maržos CSS nuosavybei, o jie yra pasenę HTML5.
LOWSRC . LOWSRC atributas suteikia alternatyvų vaizdą, kai jūsų vaizdo šaltinis yra toks didelis, kad atsisiunčia labai lėtai. Pavyzdžiui, galite turėti 500 kB paveikslėlį, kurį norite rodyti savo tinklalapyje, tačiau 500 KB užtruktų ilgai. Taigi sukursite daug mažesnę vaizdo kopiją, galbūt juodos ir baltos spalvos ar tiesiog labai optimizuotą, ir įtraukite ją į atributą LOWSRC. Mažesnis vaizdas bus parsisiunčiamas ir rodomas pirmiausia, o tada, kai atsiras didesnis atvaizdas, jis pakeis šaltinio kodą.
LOWSRC atributas buvo pridėtas prie "Netscape Navigator 2.0" IMG žyme. Tai buvo DOM 1 lygmens dalis, bet tada buvo pašalinta iš 2 lygio DOM. Šis atributas buvo naudojamas naršyklės palaikymui, nors daugelis svetainių teigia, kad jos palaiko visos šiuolaikinės naršyklės. Tai nėra pasenusi HTML4 ar pasenusi HTML5, nes ji niekada nebuvo oficiali bet kokios specifikacijos dalis.
Venkite naudoti šį atributą ir vietoj to optimizuoti savo vaizdus, kad jie būtų greitai įkeliami. Puslapio įkėlimo greitis yra svarbi gero interneto dizaino dalis, o dideli vaizdai lėtai nukrenta puslapiuose, net jei naudojate atributą LOWSRC.