Avage tekstiredaktoris (nt Notepadis või veebiarendustarkvaras) selle veebilehe HTML-fail, millele soovite pildi lisada.
Lisage failile silt. Asetage silt selle elemendi järele, mille all soovite HTML-faili brauseris avamisel pilti kuvada. Märgendil ei ole eraldi sulgevat silti. Märgendis peate määrama kuvatava pildi allika, sisestades pildi asukoha Internetis src atribuut. Kui pilt on salvestatud HTML-failiga samasse kausta, tippige pildi nimi ja laiend. Kui pilt on mujal salvestatud, tippige pildi täielik URL.
Lisage alt atribuut teie märgendile. HTML5-s on alt atribuut nõutav. Kasutage seda atribuuti pildi kirjeldamiseks juhuks, kui seda ei saa laadida. Kui pilti ei saa laadida, kuvab brauser alt atribuudi järel sisestatud teksti. Lisaks on atribuut alt oluline ekraanilugeja tarkvara jaoks, mida kasutavad nägemispuudega inimesed. Tarkvara loeb teksti alt atribuudis, nii et nägemispuudega inimene, kes vaatab teie veebisaiti, kuuleb pildil olevat, kuigi ta seda ei näe.
Määrake pildi mõõtmed pikslites nupuga
kõrgus ja laius atribuudid. Kui te mõõtmeid ei määra, ei tea brauser lehe laadimisel, kui palju ruumi jätta pildile. Selle tulemusena laaditakse leht katkendlikult, kuna esmalt laaditakse tekst, jättes pildile väikese ruumi, seejärel hüppab pildi laadimisel laiali ja ruum laieneb. Määratud mõõtmetega jätab brauser lehe teiste elementide vahele täpselt paraja ruumi, et pilt pärast laadimise lõpetamist saaks täita.Testige oma koodi ja veenduge, et pilt kuvatakse õiges kohas, avades brauseris HTML-faili.
Kasutage CSS-i, et nihutada pilt ekraani vasakusse või paremasse serva või lasta selle ümber mähitud tekst. Näiteks võite kasutada style="float: left;" või style="float: right;" sildi sees.
Kui te ei tea nii pildi kõrgust kui ka laiust, on hea kasutada kas kõrguse või laiuse atribuuti. CSS-i saate kasutada ka kõrguse ja laiuse määramiseks; näiteks 100 x 100 pikslise pildi puhul kasutage stiiliatribuuti: style="height: 100px; laius: 100 pikslit."
Muutke pilt klõpsatavaks lingiks, asetades sildi "a href" märgendipaari. Näiteks kui soovite, et pilt lingiks Facebookiga, tippige järgmine.
Ärge kasutage atribuuti alt, et proovida oma lehe SEO-d tõhustada. Otsingumootorid on juba ammu teadlikud, et mõned veebidisainerid üritavad alt atribuuti lisada täiendavate märksõnadega ja seetõttu eiravad nad alt atribuudi teksti.
