Kako umetnuti sliku pomoću HTML-a

Začinite svoje web stranice dodavanjem slika na njih. Slike možete umetnuti u HTML datoteke koristeći oznaku koju koristite za određivanje lokacije slike na internetu, visine i širine slike i alternativnog teksta koji se prikazuje ako se slika ne učita ili ako netko koristi čitač zaslona za pregled stranice. Tri uobičajene vrste slikovnih datoteka koje se koriste na webu su GIF, PNG i JPEG.

1. korak

Otvorite HTML datoteku za web stranicu kojoj želite dodati sliku u uređivaču teksta kao što je Notepad ili softver za web razvoj.

2. korak

Dodajte oznaku u datoteku. Postavite oznaku nakon elementa ispod kojeg želite da se slika pojavi kada se HTML datoteka otvori u pregledniku. Oznaka nema zasebnu završnu oznaku. Unutar oznake morate navesti izvor slike koju želite prikazati upisivanjem lokacije slike na internetu pomoću 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.

3. korak

Dodajte alt atribut vašoj oznaci. U HTML5 je potreban atribut alt. Koristite ovaj atribut za opis slike 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 oštećenjima vida. 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 vidi.

4. korak

Odredite dimenzije slike u pikselima s visinom i širina atributi. Ako ne navedete dimenzije, preglednik ne zna koliko prostora treba ostaviti za sliku dok se stranica učitava. To rezultira isprekidanim učitavanjem stranice jer se prvo učitava tekst, ostavljajući mali prostor za sliku, a zatim se odskače dok se slika učitava i uzrokuje širenje prostora. S navedenim dimenzijama, preglednik ostavlja točnu količinu prostora između ostalih elemenata na stranici da bi se slika ispunila nakon što se završi s učitavanjem.

Korak 5

Testirajte svoj kôd kako biste bili sigurni da se slika prikazuje na pravom mjestu otvaranjem HTML datoteke u pregledniku.

Savjet

Upotrijebite CSS za premještanje slike na lijevu ili desnu stranu zaslona ili za prelamanje teksta oko nje. Na primjer, možete koristiti style="float:left;" ili style="float:right;" unutar oznake.

Ako ne znate visinu i širinu slike, u redu 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 upotrijebite atribut stila:style="height:100px;width:100px."

Pretvorite sliku u poveznicu koju je moguće kliknuti postavljanjem oznake unutar para oznaka "a href". Na primjer, ako želite sliku povezati s Facebookom, upišite sljedeće.

Upozorenje

Nemojte koristiti atribut alt da pokušate poboljšati SEO svoje stranice. Tražilice su odavno svjesne da neki web dizajneri pokušavaju natrpati alt atribut dodatnim ključnim riječima i stoga ignoriraju tekst u alt atributu.