Sisestage pildid HTML-iga - kuidas see töötab
Kui soovite oma veebisaidile pildi lisada HTML-iga, kasutage silti img. Siit saate lugeda, kuidas see täpselt töötab ja mida peate jälgima.
Kujutiste sisestamine HTML-iga - põhitõed
- Päevaga
saab pilte sisestada. - Kujutise allikas antakse sildi sees:
lisab veebisaidi alamkausta "pildid" faili "testbild.webp". - Võimalikud on ka välised allikad URL-i kaudu:
integreerib meie serveritest CHIP logo.
Manustatud piltide HTML-atribuudid
Img-sildi saab lisada arvukalt atribuute:
- Veebisaidil oleva pildi suuruse määramiseks kasutage "laius" ja "kõrgus": Pilt
kuvatakse ruudukujulise külje pikkusega 100 pikslit. - "Alt" abil määratlete alternatiivse teksti, mis kuvatakse juhul, kui vastavat pilti ei saa laadida. HTML-i piltide lisamisel peaksite selle atribuudi alati määrama.
- Atribuut "border" määrab raami paksuse pikslites. Pilt koos
on viie piksliga suhteliselt paks raam. - Graafika joondamiseks kasutage "joonda". Selle atribuudi väärtused on "alt", "ülalt", "keskelt", "vasakule", "paremale" ja "keskele".
- "Hspace" ja "vspace" abil saate (horisontaalselt ja vertikaalselt) seada pildi kauguse.
Millist vormingut peaksin kasutama?
HTML-koodi saab lisada erinevaid vorminguid.
- JPG: JPG-vormingus pilte kasutatakse kõige sagedamini veebilehtede jaoks. See formaat esindab 16, 7 miljonit värvi. Lisaks saab JPG-d väga hästi tihendada. Seetõttu saab pildifaili teha väga väikeseks, mis võimaldab kiiret laadimisaega.
- PNG: PNG-vormingus saab kuvada ka 16, 7 miljonit värvi ja seda saab tihendada. JPG-vormingu eeliseks on see, et pakkimine on võimalik kadudeta.
- PNG-vormingus määratletud alasid saab ka läbipaistvalt kuvada. Kuid väga vanadel brauseritel on lüümikute kuvamisega probleeme.
- GIF: kui soovite sisestada liikuvaid pilte HTML-iga, sobib GIF-vorming. Selles vormingus kuvatakse ainult 256 värvi ja pakkimine toimub automaatselt ilma sätete valikuteta.
- GIF-vorming sobib kõige paremini väikeste, animeeritud graafika või logode jaoks. Tagamaks, et logod sobiksid lehele harmooniliselt, saab lüümikuid kasutada GIF-vormingus nagu PNG.
HTML näiteks
- See integreerib meie veebisaidi CHIP logo.
- Seda kuvatakse kõrgusega 100 pikslit ja laiusega 200 pikslit.
- Kui seda ei saa laadida, kuvatakse tühja tekstina "CHIP-Logo".
- Pilt on raamitud kahe piksli raamiga.
- See on joondatud paremale ja on teistest küljeelementidest 50 piksli kaugusel.