Kuvien lisääminen HTML-sivustoon

Kuvien lisääminen sivustosi sivuille voi usein tehdä niistä miellyttävämpiä ja välittää tietoa paremmin kuin pelkästään tekstin käyttäminen. Tämä prosessi toteutetaan käyttämällä HTML-koodia ja kuvatiedostoa. Tiedosto voi olla eri verkkosivulta tai tallentaa Web-palvelimelle.

Käyttämällä tag

Web-sivun HTML-koodissa voit lisätä kuvan käyttämällä tag. Vuonna tunniste, sinun on määritettävä neljä ominaisuutta:

  • Src - Lähde-attribuutti ilmaisee kuvan sijainnin. Voit käyttää suhteellista polkua, jos kuva on samalla palvelimella kuin sivustosi, mutta toisen sivuston kuvat vaativat absoluuttisia polkuja.
  • Alt - Vaihtoehtoisen tekstin määrite on kirjallinen kuvaus kuvasta.
  • Leveys - kuvan leveys.
  • Korkeus - kuvan korkeus.

Valinnainen määrite on Border, jonka avulla voit määrittää reunan kuvan ympärille. Raja-määrite määritetään pikselin koossa. Esimerkiksi käyttämällä rajaa = 1 tag tarkoittaa, että kuvan ympärillä oleva raja on 1 pikselin leveä.

Huomautus: Border-attribuutti on poistettu käytöstä HTML5: ssä, eikä sitä tueta.

esimerkit

Seuraavat esimerkit näyttävät todellisen HTML: n, jota käytetään kuvan lisäämiseen tämän sivun yläreunaan. Ne voidaan lisätä mihin tahansa sivusi runkoon. Ensimmäinen on lyhyempi URL-osoite, koska kuva tallennetaan palvelimellemme; toinen on se, miten voit linkittää kuvaan.

Esimerkki 1

Esimerkki 2

Mitä kuvamuotoja voin käyttää verkkosivulla?

Yleisimmät kuvat, valokuvat, logot ja muut kuvat ovat JPEG, GIF ja PNG. Muut kuvamuodot, joita ei tueta laajalti, kuten BMP, eivät välttämättä toimi kaikissa selaimissa.

Tarvitsenko lainauksia img-tagin attribuuttien ympärillä?

Joo. Vaikka nykyiset selaimet voivat yleensä korjata mahdolliset virheet puuttuvien lainausmerkkien ympärillä attribuuttiarvon ympärillä, sinun pitäisi aina olla lainausmerkkejä ominaisuusarvon ympärillä virheiden estämiseksi.