HTML-kuvat

HTML:n avulla voit näyttää kuvia dokumentissa.

Esimerkki

Lisää kuva
Tämä esimerkki näyttää, kuinka voit näyttää kuvia verkkosivulla.
Lisää kuvia eri sijainneilta
Tämä esimerkki näyttää, kuinka voit näyttää muiden kansiot tai palvelinten kuvia verkkosivulla.

（Lisää esimerkkejä löytyy tämän sivun alaosasta。)

Kuvatunniste (<img>) ja lähdeominaisuus (Src)

HTML:ssä kuvat määritellään <img>-tunnisteella.

<img> on tyhjä tunniste, mikä tarkoittaa, että se sisältää vain ominaisuuksia eikä ole suljettu merkki.

Näyttääksesi kuvan sivulla, sinun täytyy käyttää lähdeominaisuutta (src). src tarkoittaa "source". Lähdeominaisuuden arvo on kuvan URL-osoite.

Kuvan määrittämisen syntaksi on:

<img src="url" />

URL osoittaa kuvan sijainnin. Jos nimeltä "boat.gif" oleva kuva sijaitsee www.codew3c.com:n images-kansiossa, sen URL on http://www.codew3c.com/images/boat.gif。

Selausohjelma näyttää kuvat dokumentissa kuvatunnisteiden sijaintina. Jos asetat kuvatunnisteen kahden kappaleen välille, selain näyttää ensin ensimmäisen kappaleen, sitten kuvan ja viimeksi toisen kappaleen.

Vaihda tekstiparametrit (Alt)

alt-ominaisuus käytetään määrittämään sarja valmiiksi korvaavia tekstejä kuvalle. Korvaavan tekstin arvo on käyttäjän määrittämä.

<img src="boat.gif" alt="Big Boat">

Jos selain ei voi ladata kuvaa, korvaava teksti kertoo lukijoille menetetyn tiedon. Tässä tapauksessa selain näyttää tämän korvaavan tekstin kuvan sijaan. On hyvä tapa lisätä korvaava teksti kaikille kuville sivulla, mikä auttaa paremmin näyttämään tietoja ja on erittäin hyödyllistä niille, jotka käyttävät pelkkää tekstiversiota selaimessa.

Perus huomiot - hyödyllisiä vinkkejä:

Jos jokin HTML-tiedosto sisältää kymmenen kuvaa, tätä sivua varten tarvitaan 11 tiedostoa. Kuvien lataaminen vie aikaa, joten suosittelemme: Käytä kuvia varoen.

Lisää esimerkkejä

Taustakuva
Tämä esimerkki näyttää, kuinka taustakuvaa voidaan lisätä HTML-sivulle.
Sijoita kuva
Tämä esimerkki näyttää, kuinka kuvaa voidaan sijoittaa tekstiin.
Liikeydä kuvaa
Tämä esimerkki näyttää, kuinka kuvaa voidaan tehdä liikkuvaksi otsikon vasemmalle tai oikealle puolelle.
Säädä kuvan kokoa
Tämä esimerkki näyttää, kuinka kuvaa voidaan säätää eri kokoihin.
Näytä kuvaa korvaavalla tekstillä
Tämä esimerkki näyttää, kuinka kuvaa voidaan näyttää korvaavalla tekstillä. Jos selain ei voi ladata kuvaa, korvaava teksti kertoo lukijoille menetetyn tiedon. On hyvä tapa lisätä korvaava teksti kaikille kuville sivulla.
Luo kuvalinkki
Tämä esimerkki näyttää, kuinka kuvaa voidaan käyttää linkkinä.
Luo kuvamaapallo
Tämä esimerkki näyttää, kuinka luodaan kuvamaapallo, jossa on klikattavia alueita. Jokainen alue on hyperlinkki.
Muunna kuva kuvamaapalloksi
Tämä esimerkki näyttää, kuinka tavallinen kuva voidaan asettaa kuvamaapalloksi.

Kuvatunniste

Tunniste Kuvaus
<img> Määritä kuva.
<map> Määritä kuvamaapallo.
<area> Määritä kuvamaapallon klikattava alue.