Lisää kuvia HTML: llä - miten se toimii
Jos haluat lisätä kuvan verkkosivustollesi HTML-koodilla, käytä img-tunnistetta. Lue tästä kuinka tämä toimii ja mitä sinun on pidettävä silmällä.
Kuvien lisääminen HTML: llä - perusteet
- Päivän kanssa
voi lisätä kuvia. - Kuvalähde annetaan tunnisteessa:
lisää tiedoston "testbild.webp" verkkosivuston alikansioon "kuvat". - Ulkoiset lähteet URL-osoitteen kautta ovat myös mahdollisia:
integroi CHIP-logon palvelimiltamme.
Upotettujen kuvien HTML-määritteet
Img-tunnisteeseen voidaan lisätä useita määritteitä:
- Käytä "leveyttä" ja "korkeutta" määrittääksesi kuvan koon verkkosivustolla: Kuva
näytetään neliönä, jonka sivupituus on 100 pikseliä. - "Alt" määrität vaihtoehtoisen tekstin, joka tulee näkyviin, jos kuvaa ei voi ladata. Sinun tulisi aina asettaa tämä ominaisuus lisättäessä kuvia HTML-muodossa.
- "Reuna" -attribuutti määrittelee kehyksen paksuuden pikseleinä. Kuva kanssa
on kehys, joka on suhteellisen paksu viidellä pikselillä. - Käytä "kohdista" kohdistaaksesi grafiikka. Tämän ominaisuuden arvot ovat "alhaalta", "ylhäältä", "keskeltä", "vasemmalta", "oikealta" ja "keskeltä".
- "Hspace" ja "vspace" -sovelluksilla voit (vaaka- ja pystysuunnassa) asettaa etäisyyden kuvaan.
Mitä muotoa minun pitäisi käyttää?
HTML-koodiin voi sisällyttää erilaisia kuvaformaatteja.
- JPG: JPG-muotoisia kuvia käytetään yleisimmin verkkosivuilla. Tämä muoto edustaa 16, 7 miljoonaa väriä. Lisäksi JPG voidaan pakata erittäin hyvin. Kuvatiedosto voidaan siis tehdä hyvin pieneksi, mikä mahdollistaa nopean latausajan.
- PNG: PNG-muoto voi myös näyttää 16, 7 miljoonaa väriä ja voidaan pakata. Etuna JPG-muotoon nähden on, että pakkaus on mahdollista ilman häviöitä.
- PNG-muodossa määritellyt alueet voidaan myös näyttää läpinäkyvästi. Hyvin vanhoilla selaimilla on kuitenkin ongelmia piirtoheitinkalvojen näyttämisessä.
- GIF: Jos haluat lisätä liikkuvia kuvia HTML-muodossa, GIF-muoto on sopiva. Tässä muodossa näytetään vain 256 väriä ja pakkaus tapahtuu automaattisesti ilman asetusvaihtoehtoja.
- GIF-muoto sopii parhaiten pienille, animoiduille grafiikoille tai logoille. Varmista, että logot sopivat harmonisesti sivulle, kalvoja voidaan käyttää GIF-muodossa kuten PNG.
HTML esimerkki
- Tämä integroi verkkosivuiltamme CHIP-logon.
- Sen korkeus on 100 pikseliä ja leveys 200 pikseliä.
- Jos sitä ei voi ladata, "CHIP-logo" näkyy tyhjänä tekstinä.
- Kuva on kehystetty kahden pikselin kehyksellä.
- Se on kohdistettu oikealle ja on 50 pikseliä erillään muista sivuelementeistä.