Otvorite HTML datoteku za web stranicu kojoj želite dodati sliku u uređivaču teksta kao što je Notepad ili softver za razvoj weba.
Dodajte oznaku u datoteku. Postavite oznaku iza elementa ispod kojeg želite da se pojavi slika kada se HTML datoteka otvori u pregledniku. Oznaka nema zasebnu završnu oznaku. Unutar oznake morate odrediti izvor slike koju želite prikazati tako da upišete lokaciju slike na internetu s src atribut. Ako je slika pohranjena u istoj mapi kao i HTML datoteka, upišite naziv i ekstenziju slike. Ako je slika pohranjena negdje drugdje, upišite puni URL slike.
Dodajte alt atribut vašoj oznaci. U HTML5 atribut je obavezan. Koristite ovaj atribut da opišete sliku u slučaju da se ne može učitati. Ako se slika ne može učitati, preglednik prikazuje tekst koji unesete nakon atributa alt. Osim toga, atribut alt važan je za softver čitača zaslona koji koriste osobe s invaliditetom. Softver čita tekst u atributu alt tako da osoba s oštećenjem vida koja gleda vašu web stranicu može čuti što je na slici iako to ne može vidjeti.
Odredite dimenzije slike u pikselima pomoću visina i širina atributima. Ako ne navedete dimenzije, preglednik ne zna koliko prostora treba ostaviti za sliku dok se stranica učitava. To rezultira isprekidanim učitavanjem stranice, budući da se tekst prvo učitava, ostavljajući mali prostor za sliku, a zatim se raspada kako se slika učitava i uzrokuje proširenje prostora. S navedenim dimenzijama, preglednik ostavlja točno odgovarajuću količinu prostora između ostalih elemenata na stranici da bi slika popunila kada završi učitavanje.
Testirajte svoj kôd kako biste bili sigurni da se slika prikazuje na pravom mjestu otvaranjem svoje HTML datoteke u pregledniku.
Koristite CSS za pomicanje slike na lijevu ili desnu stranu zaslona ili za prelamanje teksta oko nje. Na primjer, možete koristiti style="float: left;" ili style="float: desno;" unutar oznake.
Ako ne znate i visinu i širinu slike, dobro je koristiti samo atribut visine ili širine. Također možete koristiti CSS za određivanje visine i širine; na primjer, sa slikom od 100 x 100 piksela, koristite atribut style: style="height: 100px; širina: 100px."
Pretvorite sliku u vezu na koju se može kliknuti postavljanjem oznake u par oznaka "a href". Na primjer, ako želite da se slika poveže s Facebookom, upišite sljedeće.
Nemojte koristiti atribut alt da biste pokušali poboljšati SEO svoje stranice. Tražilice su već dugo svjesne da neki web dizajneri pokušavaju ubaciti alt atribut dodatnim ključnim riječima, pa stoga zanemaruju tekst u atributu alt.
