Vstavite slike s HTML - kako deluje
Če želite na spletno mesto vstaviti sliko s HTML, uporabite oznako img. Tukaj preberite, kako natančno to deluje in na kaj morate biti pozorni.
Kako vstaviti slike z HTML - osnove
- Z dnevom
lahko vstavite slike. - Vir slike je podan v oznaki:
v spletno mesto vstavi datoteko "testbild.webp" iz podmape "slike". - Možni so tudi zunanji viri prek URL-ja:
integrira logotip CHIP z naših strežnikov.
Atributi HTML za vdelane slike
Številni atributi se lahko dodajo znotraj oznake img:
- S pomočjo "širine" in "višine" določite velikost slike na spletnem mestu: Slika
je prikazan kvadrat s stransko dolžino 100 pik. - Z "alt" določite nadomestno besedilo, ki se prikaže, če ustrezne slike ni mogoče naložiti. Vedno nastavite ta atribut, ko vstavljate slike s HTML.
- Atribut »meja« določa debelino okvira v slikovnih pikah. Slika s
ima okvir, ki je razmeroma debel s petimi pikami. - Uporabite "poravnavo" za poravnavo grafike. Vrednosti tega atributa so "spodaj", "zgoraj", "sredina", "levo", "desno" in "sredina".
- Z "hspace" in "vspace" lahko (vodoravno in navpično) nastavite razdaljo do slike.
Kateri format naj uporabim?
Obstajajo različni formati slik, ki jih lahko vključite v kodo HTML.
- JPG: Slike v formatu JPG se najpogosteje uporabljajo za spletne strani. Ta oblika predstavlja 16, 7 milijona barv, poleg tega pa je JPG mogoče zelo dobro stisniti. Slikovno datoteko je zato mogoče narediti zelo majhno, kar omogoča hiter čas nalaganja.
- PNG: Format PNG lahko prikazuje tudi 16, 7 milijona barv in ga je mogoče stisniti. Prednost pred JPG formatom je, da je stiskanje možno brez izgub.
- Območja, določena v formatu PNG, se lahko prikažejo tudi pregledno. Vendar imajo zelo stari brskalniki težave s prikazom prosojnic.
- GIF: Če želite vstaviti gibajoče se slike z HTML, je primerna oblika GIF. V tej obliki je prikazanih samo 256 barv, stiskanje pa poteka samodejno brez možnosti nastavitve.
- Format GIF je najbolj primeren za majhne, animirane grafike ali logotipe. Da bi zagotovili, da se logotipi harmonično prilegajo na stran, je mogoče prosojnice uporabiti v obliki GIF kot PNG.
primer HTML
- To vključuje logotip CHIP z našega spletnega mesta.
- Prikaže se z višino 100 slikovnih pik in širino 200 slikovnih pik.
- Če ga ni mogoče naložiti, je "CHIP-Logo" prikazan kot prazno besedilo.
- Slika je uokvirjena z okvirjem z dvema pikama.
- Je pravilno poravnana in je od drugih stranskih elementov ločena s 50 pikami.