Įdėkite paveikslėlius su HTML - kaip tai veikia
Jei norite įterpti vaizdą į savo svetainę su HTML, naudokite img žymą. Čia skaitykite, kaip tiksliai tai veikia ir į ką turite atkreipti dėmesį.
Kaip įterpti vaizdus naudojant HTML - pagrindai
- Su diena
gali įterpti paveikslėlius. - Vaizdo šaltinis pateikiamas žymos viduje:
įterpia failą „testbild.webp“ iš poaplankio „nuotraukos“ tinklalapyje. - Taip pat galimi išoriniai šaltiniai per URL:
integruoja CHIP logotipą iš mūsų serverių.
Įterptų vaizdų HTML atributai
Į „img“ žymą galima pridėti daugybę atributų:
- Norėdami nustatyti paveikslėlio dydį svetainėje, naudokite „plotis“ ir „aukštis“: Vaizdas
rodomas kvadratas, kurio šoninis ilgis yra 100 taškų. - „Alt“ apibrėžiate alternatyvų tekstą, kuris rodomas, jei atitinkamo vaizdo negalima įkelti. Įdėdami vaizdus su HTML, visada turėtumėte nustatyti šį atributą.
- Atributas „border“ nurodo kadro storį pikseliais. Nuotrauka su
rėmas yra gana storas su penkiais taškais. - Norėdami sulygiuoti grafiką, naudokite „lygiuoti“. Šio atributo reikšmės yra „apačia“, „viršuje“, „viduryje“, „kairėje“, „dešinėje“ ir „centre“.
- Naudodami „hspace“ ir „vspace“, galite (horizontaliai ir vertikaliai) nustatyti atstumą iki vaizdo.
Kokį formatą turėčiau naudoti?
Yra įvairių vaizdo formatų, kuriuos galite įtraukti į HTML kodą.
- JPG: JPG formato atvaizdai dažniausiai naudojami tinklalapiuose. Šis formatas atspindi 16, 7 milijono spalvų, be to, JPG gali būti labai gerai suspaustas. Todėl vaizdo failą galima padaryti labai mažą, o tai įgalina greitą įkėlimo laiką.
- PNG: PNG formatas taip pat gali parodyti 16, 7 milijono spalvų ir gali būti suglaudintas. Pranašumas, palyginti su JPG formatu, yra tas, kad glaudinti galima be nuostolių.
- PNG formatu apibrėžtos sritys taip pat gali būti rodomos skaidriai. Tačiau labai senose naršyklėse yra problemų, susijusių su skaidrių rodymu.
- GIF: Jei norite įterpti judančius paveikslėlius su HTML, tinka GIF formatas. Šiuo formatu rodomos tik 256 spalvos, o glaudinimas atliekamas automatiškai be jokių nustatymo parinkčių.
- GIF formatas yra tinkamiausias mažoms, animuotoms grafikoms ar logotipams. Norėdami užtikrinti, kad logotipai harmoningai tilptų į puslapį, skaidrės gali būti naudojamos GIF formatu, kaip PNG.
HTML pavyzdys
- Čia integruotas CHIP logotipas iš mūsų svetainės.
- Jis rodomas 100 pikselių aukščio ir 200 pikselių pločio.
- Jei jo negalima įkelti, „CHIP-Logo“ rodomas kaip tuščias tekstas.
- Paveikslas įrėmintas dviejų pikselių kadru.
- Jis nukreiptas į dešinę ir yra 50 pikselių atstumu nuo kitų šoninių elementų.