Kuvien lisääminen WWW-sivulle

Kuvien lisäämisellä voimme havainnollistaa tai elävöittää WWW-sivua. Kuvien lisäämisessä on kuitenkin oltava varovainen, koska niiden liikakäytöllä saadaan helposti luotua esteitä esimerkiksi modeemikäyttäjille. Kuvien lisäämisessä kannattaakin muistaa seuraavia asioita:

Kuvat liitetään HTML-dokumenttiin img-elementin avulla. img-elementtiä kutsutaan korvattavaksi elementiksi, koska kuva ladataan elementin sijaintipaikalle WWW-sivulle. Kuvien lisäämisessä tarvitaan img-elementille muutama attribuutti, joiden avulla kerrotaan kuvasta tarpeellisia tietoja.

Esimerkiksi on otettu tämän artikkelin ensimmäinen kuva. Kuvan ja kuvateksti sijoittamista varten on käytetty div-elementtiä, jolle on annettu CSS-tyyleillä haluttuja ominaisuuksia (liu'utus oikeaan laitaan). Tämän jälkeen löytyy img-elementti, johon on määritelty tarvittavat attribuutit. img-elementistä kannattaa huomata, että sillä ei ole lopetuselementtiä ollenkaan. Elementti lopetetaan sijoittamalla aloituselementin loppuun kauttaviiva (/) ennen suurempi kuin -merkkiä.

<div class="pictright">
 <img src="kuva1.png"
   alt="Navigoinnin lisääminen dokumenttiin div-elementin avulla." />
  <p class="caption"><strong>Kuva 1</strong>.
	  Erillisen navigoinnin määrittäminen.</p>
</div>

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/tyovaline/wwwsivu/index16.html
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2003-11-10 10:21:28
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto