Kako postaviti slike na html

Slike so pomembni elementi na spletnem mestu, saj pomagajo vizualno prenašati informacije in narediti vsebino privlačnejšo. V tem članku se naučimo, kako postaviti slike na HTML z ustreznimi oznakami.

oznaka

Oznaka & lt; img & gt; se uporablja za vstavljanje slik na strani HTML. Nima zaključne oznake, saj je prazna oznaka. Glej primer:

& lt; img src = “path_da_imagem.jpg” alt = “Opis slike” & gt;

Atributi:

• src: Določi pot slike. To je lahko absolutna pot (celoten URL) ali relativna pot (pot glede na datoteko HTML).
• alt: ponuja alternativni opis slike, ki je prikazan, če slike ni mogoče naložiti ali za vizualno okvarjene uporabnike.

Primer uporabe oznake

Predpostavimo, da imamo v isti mapi kot datoteka HTML z imenom “Image.jpg”. Lahko ga vstavimo na naslednji način:

& lt; img src = “Image.jpg” alt = “Primer slike” & gt;

Pomembno je omeniti, da je dobra praksa dodati opisno alternativno besedilo vsem slikam, saj to izboljša dostopnost na spletnem mestu in pomaga pri indeksiranju iskalnikov.

drugi načini za vstavljanje slik

Poleg oznake & lt; img & gt; obstajajo tudi drugi načini za vstavljanje slik v html:

oznaka

Oznaka & lt; figura & gt; se uporablja za združevanje slike z vašim napisom. Glej primer:

& lt; figura & gt;
& nbsp; & nbsp; & nbsp; & nbsp; & lt; img src = “Image.jpg” alt = “Primer slike” & gt;
& nbsp; & nbsp; & nbsp; & nbsp; & lt; figcation & gt;
& Lt;/figura & gt;

Ta oznaka je uporabna, ko želite sliki dodati napis.

tag

Oznaka & lt; se uporablja za zagotavljanje več različic slike, kar omogoča brskalniku, da izbere najboljšo možnost glede na značilnosti uporabniške naprave. Glej primer:

& lt; slika & gt;
& nbsp; & nbsp; & nbsp; & nbsp; & lt; vir srcset = “slika.webp” type = “slika/webp” & gt;
& nbsp; & nbsp; & nbsp; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & lt; img src = “Image.jpg” alt = “Primer slike” & gt;
& Lt;/slika & gt;

V tem primeru imamo dve različici slike: eno v formatu WebP in eno v obliki JPEG. Brskalnik bo izbral najboljšo možnost na podlagi podpore naprave.

Sklep

Vstavljanje slik v HTML je preprosta naloga z uporabo & lt; img & gt; oznake. Pomembno je zagotoviti opisno alternativno besedilo za vse slike in razmisliti o drugih oblikah vstavitve, kot sta & lt; figura & gt; in & lt; slika & gt; Tako naredite svoje spletno mesto bolj dostopno in izboljšate uporabniško izkušnjo.