Odprite datoteko HTML za spletno stran, ki ji želite dodati sliko, v urejevalniku besedil, kot je Beležnica ali programska oprema za spletno razvijanje.
Datoteki dodajte oznako. Postavite oznako za elementom, pod katerim želite, da se prikaže slika, ko se datoteka HTML odpre v brskalniku. Oznaka nima ločene zaključne oznake. Znotraj oznake morate določiti vir slike, ki jo želite prikazati, tako da vnesete lokacijo slike na internetu z src atribut. Če je slika shranjena v isti mapi kot datoteka HTML, vnesite ime in pripono slike. Če je slika shranjena drugje, vnesite celoten URL slike.
Dodajte alt atribut vaši oznaki. V HTML5 je atribut alt obvezen. Uporabite ta atribut za opis slike, če se ne more naložiti. Če se slika ne more naložiti, brskalnik prikaže besedilo, ki ga vnesete za atributom alt. Poleg tega je atribut alt pomemben za programsko opremo za bralnik zaslona, ki jo uporabljajo osebe z motnjami vida. Programska oprema prebere besedilo v atributu alt, tako da lahko oseba z motnjami vida, ki si ogleduje vaše spletno mesto, sliši, kaj je na sliki, čeprav tega ne vidi.
Določite dimenzije slike v slikovnih pikah z višina in premer lastnosti. Če ne navedete dimenzij, brskalnik ne ve, koliko prostora naj pusti za sliko, ko se stran naloži. Posledica tega je, da se stran nalaga prekinjeno, saj se besedilo najprej naloži, pri čemer ostane majhen prostor za sliko, nato pa se med nalaganjem slike razmakne in povzroči, da se prostor razširi. Z določenimi dimenzijami brskalnik pusti natanko pravo količino prostora med drugimi elementi na strani, ki jo slika zapolni, ko se naloži.
Preizkusite svojo kodo in se prepričajte, da je slika prikazana na pravem mestu, tako da odprete datoteko HTML v brskalniku.
Uporabite CSS, da premaknete sliko na levo ali desno stran zaslona ali da se besedilo zavije okoli nje. Uporabite lahko na primer style="float: left;" ali style="float: desno;" znotraj oznake.
Če ne poznate tako višine kot širine slike, je dobro, da uporabite samo atribut višine ali širine. Za določitev višine in širine lahko uporabite tudi CSS; na primer za sliko velikosti 100 x 100 slikovnih pik uporabite atribut style: style="height: 100px; širina: 100 slikovnih pik."
Naredite sliko v povezavo, ki jo je mogoče klikniti, tako da postavite oznako v par oznak "a href". Na primer, če želite, da se slika poveže s Facebookom, vnesite naslednje.
Ne uporabljajte atributa alt, da bi poskušali povečati SEO vaše strani. Iskalniki se že dolgo zavedajo, da nekateri spletni oblikovalci poskušajo atribut alt napolniti z dodatnimi ključnimi besedami, zato prezrejo besedilo v atributu alt.
