Kako vstaviti sliko v HTML na vaši spletni strani

10. 3. 2020

Dodajanje slik na spletno mesto ali profil socialne mreže je odličen način za dekoriranje vaše strani. HTML (Hypertext Markup Language) se odlikuje po velikem številu funkcij za razvoj spletnih strani in koda, ki je potrebna za dodajanje slik, je preprosta.

kako vstaviti sliko v html

Torej, kako vstaviti sliko v HTML?

Naložite sliko na brezplačno spletno stran za gostovanje slik, na primer Photobucket ali TinyPic, ki omogoča stalen dostop do prenesene datoteke. Po kopiranju bo povezava do slike prikazana neposredno na spletnem gostovanju. Vendar, če plačate za premijske storitve take storitve, je bolje uporabiti dodatne funkcije. To je bolj zanesljivo, saj v prostem gostovanju slik slike včasih zaradi preobremenitve niso odprte. Ko prenesete sliko v eno od spletnih storitev, odprite nov dokument v računalniku v urejevalniku besedila (na primer v Beležnici) ali obiščite ploščo za urejanje na želeni strani spletnega mesta (kjer lahko spremenite kodo HTML).

html kako vstaviti sliko

Pisanje oznak

Nadaljevanje pogovora o tem, kako vstaviti sliko v HTML, začnite z oznako IMG. Po njem morate pred zaprtim znakom dodati presledek in poševnico. Zato morate klicati naslednjo kombinacijo - <img />. Poleg tega je na voljo veliko atributov, vendar je samo eden od njih nujno potreben. To je naslov ali URL vaše slike. Določena je na naslednji način - <img src = "URL_ vaše slike" />.

Nadomestno besedilo

Nato poskusite vstaviti sliko v HTML, zato morate dodati atribut Alt. To definira nadomestno besedilo, če se slika ne naloži. Takšno besedilo je namenjeno tudi slabovidnim uporabnikom, ki uporabljajo bralnike zaslona. Če lebdiš kazalec miške na sliki se bo pojavilo alternativno besedilo v opisu orodja, vendar je ta funkcija prisotna samo v Internet Explorerju. Da bi jo videli v drugih aplikacijah, boste potrebovali posebne vtičnike. Če želite vnesti tak ukaz, ga vnesite poleg možnosti Alt. (Ta korak lahko po želji preskočite). Če uporabljate to funkcijo, bo povezava izgledala takole:

<img src = "URL_your_article" alt = "pop-up_text" "title =" Namig "/>

vstavite sliko v html

Velikosti in parametri slike

Če želite nadaljevati navodila za vstavljanje slike v HTML, lahko dodatno določite velikost slike z atributi višine in širine, ki kažejo v slikovnih pikah ali v odstotkih. Upoštevajte, da bo slika prikazana zaradi spreminjanja velikosti ob zagonu. Brskalnik bo še vedno uporabljal dejansko velikost slike. Če je slika prevelika, jo je bolje spremeniti. velikosti z uporabo programi za urejanje fotografij in ne samo naslov povezave. Sedaj lahko vaša koda izgleda takole:

<img src = "URL vaše slike" alt = "texttip besedila" title = "Namig za orodje" height = "50%" width = "50%" />

<img src = "URL vaše slike" alt = "texttip besedila" title = "Namig za orodje" height = "25px" width = "50px" />

Drugi atributi

Vrednost teh atributov je bodisi pozitivna vrednost piksla bodisi odstotek z izvirnikom (1-100%). Ko govorimo o tem, kako vstaviti sliko v HTML, lahko opazimo, da jo lahko postavite kjerkoli na spletni strani z atributom poravnave - zgornji, spodnji, srednji, desni, levi itd. Atribut HSPACE se uporablja za vstavljanje slik vodoravno na levo in desno stran, VSPACE - za nalaganje navpično med zgornjo in spodnjo stranjo strani in glede na drugo vsebino. Če govorimo na splošno o HTML - kako vstaviti sliko, in kako dodati vsebino na stran, glavna stvar je, da ne pretiravajte. V nasprotnem primeru bo vaš vir videti površen in preveč "barvit". GIF bo najboljša rešitev za prikazovanje logotipov ali animacij, JPEG pa je bolj primeren za kakovostne slike in fotografije.