The HTML IMG-märgend reguleerib piltide ja muude staatiliste graafiliste objektide sisestamist veebilehele. See ühine silt toetab mitut kohustuslikku ja valikulist atribuuti, mis lisavad teie rikkalikkust teie võimele kujundada köitvat ja pildile keskenduvat veebisaiti.
Täielikult moodustatud HTML IMG-märgendi näide näeb välja selline:
Nõutavad IMG-märgendi atribuudid
src = "/ tee / aadressile / pilt.jpg"
Ainus atribuut, mida peate pildil veebilehel kuvama, on src atribuut. See atribuut identifitseerib kuvatava pildifaili nime ja asukoha.
alt = "Pildi kirjeldus"
Kehtivate XHTML ja HTML4 kirjutamiseks alt vajalik on ka atribuut. Seda atribuuti kasutatakse mittevisuaalsete brauserite pakkumiseks pilti kirjeldava tekstiga. Brauserid kuvavad alternatiivset teksti erineval viisil. Mõni kuvab selle hüpikakna, kui panete hiire pildi kohale, teine kuvab selle omadustes, kui paremklõpsate pilti, ja mõni ei kuva seda üldse.
Kasuta alt tekst pildi kohta lisateavet, mis pole veebisaidi teksti jaoks asjakohane ega oluline. Kuid pidage meeles, et ekraanilugejate ja muude ainult teksti sirvivate brauserite korral loetakse teksti lehe ülejäänud tekstiga ühesuunaliselt. Segaduste vältimiseks kasutage pelgalt logo asemel kirjeldavat alternatiivteksti, mis ütleb (näiteks) „Veebidisaini ja HTML-i kohta”.
The alt tekst on ka SEO jaoks oluline (otsingumootori optimeerimine). Robotid, mida otsingumootorid, näiteks Google, kasutavad saitide sisu uurimiseks, ei suuda pilte "näha". Nad toetuvad alt tekst, et määrata, mis lehel on.
Sisse HTML5, alt atribuut pole alati vajalik, sest saate kasutada a pealdis et sellele veel kirjeldust lisada. Selle atribuudi abil saate näidata ka täielikku kirjeldust sisaldava ID:
aria-kirjeldatudby = "Pildi kirjeldus"
Alt-teksti pole vaja ka juhul, kui pilt on puhtalt dekoratiivne, näiteks graafika veebilehe ülaosas või ikoonid. Kuid kui te pole kindel, lisage igaks juhuks ka alttekst.
Atribuutide suuruse muutmine
laius = "500"ja.
kõrgus = "500"Sõltuvalt teie kujundusest saate kasutada. kõrgus ja. laius
Üldiselt tahate, et CSS-is määrataks pildi suurus. Enamasti tuleneb see pildi vanemmahuti mõõtmetest. See lähenemine võimaldab suurimat paindlikkust erinevate ekraanisuurustega kohanemisel. Siiski on endiselt juhtumeid, kus võiksite HTML-atribuutidena määrata pildi mõõtmed.
Muud kasulikud IMG-atribuudid
title = "Kirjeldav pildi nimi"Atribuut on globaalne atribuut, mida saab rakendada mis tahes jaoks. HTML-element. Veelgi enam,. pealkiri
Enamik brausereid toetab pealkiri atribuut, kuid nad teevad seda erineval viisil. Mõni kuvab teksti hüpikaknana, teine aga infokuval, kui kasutaja paremklõpsab pilti. Võite kasutada pealkiri atribuut pildi kohta lisateabe kirjutamiseks, kuid ärge arvestage, et see teave on peidetud või nähtav. Kindlasti ei tohiks seda kasutada otsingumootorite märksõnade peitmiseks. Seda tava karistab nüüd enamik otsingumootoreid.
usemap = ""ja.
ismap = ""Need kaks atribuuti määravad kliendipoole () ja serveripoolse (ISMAP) pildikaardid
longdesc = "Teie pildi üksikasjalikum kirjeldus"The. longdesc
Vananenud ja aegunud IMG-atribuudid
Mitmed atribuudid on HTML5-s vananenud või HTML4-s aegunud. Parima HTML-i saamiseks peaksite nende atribuutide kasutamise asemel leidma muid lahendusi.
ääris = "3"
joondama = "vasakule"See atribuut võimaldab teil asetada pildi teksti sisse ja lasta tekstil selle ümber voolata. Pilti saate joondada paremale või vasakule. See on IAS kasuks aegunud. ujuk CSS-i vara
hspcace = "10"ja.
vspace = "10"The. hspace ja. vspace atribuudid lisavad horisontaalselt tühiku ( hspace) ja vertikaalselt ( vspace
lowsrc = "/ path / to / lowres.jpg"The. lowsrc atribuut pakub alternatiivse pildi, kui teie pildiallikas on nii suur, et see laaditakse alla väga aeglaselt. Näiteks võib teil olla pilt, mille maht on 500 kB ja mida soovite oma veebisaidil kuvada, kuid 500 kB laadimiseks kuluks palju aega. Nii et loote pildist palju väiksema koopia, võib-olla mustvalge või lihtsalt äärmiselt optimeeritud, ja panete selle pildile. lowsrc
The lowsrc atribuut lisati sildile Netscape Navigator 2.0. See oli osa DOM-i 1. tasemest, kuid eemaldati seejärel DOM-i 2. tasemest. Brauseri tugi on selle atribuudi osas olnud visandlik, kuigi paljud saidid väidavad, et seda toetavad kõik kaasaegsed brauserid. See ei ole HTML4-s aegunud ega HTML5-s vananenud, kuna see ei olnud kunagi kummagi spetsifikatsiooni ametlik osa.
Vältige selle atribuudi kasutamist ja optimeerige selle asemel oma pilte, et neid saaks kiiresti laadida. Lehe laadimise kiirus on hea veebidisaini kriitiline osa ja suured pildid aeglustavad lehti tohutult - isegi kui kasutate lowsrc atribuut.