HTML-i IMG-märgendi kasutamine piltide ja objektide jaoks
HTML-i IMG-sild reguleerib veebilehtede piltide ja muude staatiliste graafiliste objektide sisestamist. See ühine silt toetab mitut kohustuslikku ja vabatahtlikku atribuuti, mis lisab rikkust teie võimele luua huvitavat, pildipõhist veebisaiti.
Täielikult moodustatud HTML-i IMG-i sildi näide näeb välja selline:
Nõutav IMG sildi atribuudid
SRC Ainuke atribuut, mida peate pilti kuvama veebilehel kuvamiseks, on SRC atribuut. See atribuut identifitseerib kuvatava pildifaili nime ja asukoha.
ALT Kehtivate XHTML- ja HTML4-kirjade kirjutamiseks on vajalik ka atribuut ALT. Seda atribuuti kasutatakse mittevideeritud brauserite esitamiseks tekstiga, mis kirjeldab pilti. Brauserid näitavad alternatiivset teksti erineval viisil. Mõned näitavad seda hüpikkuvalt, kui hiirega pilti liigutate, teised näitavad seda omadustes, kui paremal klõpsate pilti, ja mõned ei näita seda üldse.
Kasutage alt-teksti, et anda pildile lisateavet, mis ei ole veebilehe teksti jaoks olulised või olulised. Kuid pidage meeles, et ekraanilugejatel ja muudel teksti ainult brauseritel tekst loetakse tekstiga ülejäänud teksti lehel. Segaduse vältimiseks kasutage lihtsalt "logo" asemel kirjeldavat alt-teksti, mis ütleb (näiteks), "Teave veebisisestuse ja HTML-i kohta".
HTML5-s pole atribuut ALT alati vajalik, kuna võite kasutada pealkirja, et lisada sellele rohkem kirjeldust. Samuti võite kasutada atribuuti ARIA-DESCRIBEDBY, et näidata täielikku kirjeldust sisaldavat ID-d.
Alt tekst ei nõuta ka siis, kui pilt on puhtalt dekoratiivne, näiteks veebilehe ülaosas olev graafik või ikoonid. Aga kui te pole kindel, lisage alt tekst igaks juhuks.
Soovitatud IMG-atribuudid
Laius ja kõrgus . Te peaksite harjumuselt alati kasutama atribuute WIDTH ja HEIGHT. Ja te peaksite alati kasutama tõelist suurust ja mitte oma pilte oma brauseris muutma.
Need atribuudid kiirendavad lehe esitamist, sest brauser võib pilti kujundusele eraldada ruumi ning seejärel jätkata ülejäänud sisu allalaadimist, selle asemel et oodata kogu piltide allalaadimist.
Muud kasulikud IMG-i atribuudid
JAOTIS . Atribuut on globaalne atribuut, mida saab rakendada igale HTML-elemendile . Lisaks võimaldab atribuut TITLE lisada pilti lisateavet.
Enamik brauseritest toetavad atribuuti TITLE, kuid nad teevad seda erineval viisil. Mõned näitavad teksti hüpikaknas, teised näitavad seda teabeekraanidel, kui kasutaja pildil klõpsab paremal klõpsamisel. Pildi lisateabe kirjutamiseks võite kasutada atribuudi TITLE, kuid ei võta arvesse seda teavet, mis on peidetud või nähtav. Peaksite kindlasti seda mitte kasutama otsingumootorite märksõnade peitmiseks. Enamik otsingumootoreid karistab seda tava.
USEMAP ja ISMAP . Need kaks atribuuti, mis määravad kliendipoolse () ja serveripoolse (ISMAP) pildi, kujutab teie pilte.
LONGDESC . Atribuut toetab URL-ideid pildi pikema kirjelduse jaoks. See funktsioon muudab teie pildid ligipääsetavamaks.
Varastatud ja vananenud IMG-atribuudid
Mitmed atribuudid on HTML5-s praegu vananenud või HTML4-is vananenud. Parima HTML-i jaoks peaksite nende atribuutide asemel leidma muid lahendusi.
PIIRKOND . Atribuut määrab pildi ümber oleva piiri laiuse pikslites. HTML4-s on CSS-i kasuks see aegunud ja HTML5-s on see vananenud.
ALIGN . See atribuut võimaldab teil asetada pildi teksti sisse ja selle teksti ümbritsev tekst. Saate joonistada pildi paremale või vasakule. See on HTML4-ga varjatud CSS-i vara kasuks ja HTML5-s on see vananenud.
HSPACE ja VSPACE . HSPACE ja VSPACE atribuudid lisavad tühja ruumi horisontaalselt (HSPACE) ja vertikaalselt (VSPACE). Graafika mõlemale küljele (ülemine ja alumine või vasak ja parem) lisab valge ruumi, nii et kui teil on vaja ainult ühte kohta, peate kasutama CSS-i. Need atribuudid on HTML4-le tagurpidi CSS-i vara kasuks ära aetud ja HTML5-s on need vananenud.
LOWSRC . LOWSRC atribuut pakub alternatiivset kujutist, kui teie pildi allikas on nii suur, et see laaditakse väga aeglaselt alla. Näiteks võib teil olla 500KB pilt, mida soovite oma veebisaidil kuvada, kuid 500KB laadimiseks kulub kaua aega. Nii saate luua palju väiksema kujutise koopia, ehk mustvalge või lihtsalt äärmiselt optimeeritud, ja asetage see LOWSRC atribuudi. Väiksem pilt laaditakse alla ja kuvatakse kõigepealt, ja siis, kui ilmub suurem pilt, asendab see väikese päritoluga pildi.
LOWSRC atribuut lisati IMG-i märgendisse Netscape Navigator 2.0. See oli osa DOM-i 1. tasemest, kuid eemaldati seejärel DOM-i 2. tasemest. Brauseritugi on selle atribuudi jaoks visandatud, kuigi paljud saidid väidavad, et seda toetavad kõik kaasaegsed brauserid. See ei ole HTML4-s vananemine ega HTML5-s vananenud, sest see ei olnud kunagi ühegi spetsifikatsiooni ametlik osa.
Vältige seda atribuuti ja optimeerige oma pilte, et need kiiresti koormataksid. Lehe laadimise kiirus on hea veebidisaini kriitiline osa, ja suured pildid aeglustavad lehekülgi väga tohutult - isegi kui kasutate LOWSRC atribuuti.