Kuvien lisääminen verkkosivustosi sivuille voi usein tehdä niistä miellyttävämpiä ja välittää tietoa paremmin kuin pelkkä teksti. Tämä prosessi suoritetaan HTML-koodilla ja kuvatiedostolla. Tiedosto voi olla toiselta verkkosivulta tai tallennettu verkkopalvelimelle.
![]()
-tunnisteen käyttäminen
Web-sivun HTML-koodiin voit lisätä kuvan -tunnisteen avulla.
-tunnisteessa sinun on määritettävä neljä attribuuttia:
- Src – Lähdeattribuutti osoittaa kuvan sijainnin. Voit käyttää suhteellista polkua, jos kuva on samalla palvelimella kuin sivustosi, mutta toisen sivuston kuvat vaativat absoluuttiset polut.
- Alt – Vaihtoehtoinen teksti -määrite on kuvan kirjallinen kuvaus.
- Leveys – kuvan leveys.
- Korkeus – kuvan korkeus.
Valinnainen attribuutti on Border, jonka avulla voit määrittää reunuksen kuvan ympärille. Reunus-attribuutti määritellään pikselikokona. Esimerkiksi border=1:n käyttö -tunnisteessa tarkoittaa, että kuvan ympärillä oleva reunus on 1 pikselin leveä.
Border-attribuutti on vanhentunut HTML5:ssä, eikä sitä tueta.
Esimerkkejä
Seuraavat esimerkit näyttävät todellisen HTML-koodin, jota käytetään kuvan lisäämiseen tämän sivun yläosassa. Ne voidaan lisätä mihin tahansa sivusi tekstiosaan. Ensimmäisellä on lyhyempi URL-osoite, koska kuva ja HTML-tiedosto ovat samalla palvelimella. Toinen on se, kuinka linkität kuvaamme toiselta palvelimelta.
Esimerkki yksi
<img src="/jargon/h/html.png" alt="HTML" width="350" height="250">
Esimerkki kaksi
<img src="https://www.computerhope.com/jargon/h/html.png" alt="3D HTML" width="350" height="350">
Mitä kuvamuotoja voin käyttää verkkosivulla?
Yleisimmät kuville, valokuville, logoille ja muille kuville käytettävät kuvamuodot ovat JPEG, GIF ja PNG. Muut kuvamuodot, joita ei tueta laajasti, kuten BMP, eivät välttämättä toimi kaikissa selaimissa.
Tarvitsenko img-tunnisteen attribuuttien ympärille lainausmerkkejä?
Joo. Vaikka nykyiset selaimet voivat yleensä korjata virheet puuttuvilla lainausmerkeillä määritteen arvon ympäriltä, suosittelemme, että määritteen arvon ympärillä on lainausmerkkejä virheiden välttämiseksi.
