24. HTML - kuva

  
     

Takaisin

Etsi sopiva kuva netistä.
Tallenna se kurssin hakemistoon.

Lisää kuva sivuillesi siten, että teksti lähtee kuvan keskikohdasta ja käytä myös ALT-parametria.

  
  WWW-sivuilla käytetään yleensä kuvia, jotka ovat .gif tai .jpg (.jpeg) muodossa. Näissä kuvamuodoissa kuvan sisältämä tieto on pakattu normaalia pienempään tilaan, joten niiden lataaminen selaimeen on nopeampaa.

IMG-tagilla (pariton) kuva liitetään dokumenttiin. SRC-parametrin arvoksi annetaan kuvan osoite tai kuvan sijaitessa samassa hakemistossa kuin sivut, niin pelkkä kuvan nimi riittää.

  
  ALIGN -parametrin avulla kerrotaan, miten kuva asetellaan suhteessa ympäröivään tekstiin:
top - teksti kirjoitetaan kuvan yläreunan tasalle
middle - teksti kirjoitetaan kuvan keskelle
bottom - teksti kirjoitetaan kuvan alareunan tasalle
left - kuva "kelluu" selaimen vasemmassa reunassa ja teksti kiertää sitä oikealta
right - kuva "kelluu" selaimen oikeassa reunassa ja teksti kiertää sitä vasemmalta 		 
  Jos kuvaa kiertävä teksti halutaan katkaista tietyssä kohtaa, tehdään se <BR>-tagilla, jolle annetaan parametri CLEAR.  
  HSPACE ja VSPACE -parametrien avulla voidaan kuvan ympärille luoda tyhjää tilaa, jos ei haluta tekstin olevan ”kiinni kuvassa”. Tila määritellään pikseleinä.  
  BORDER -parametri määrittelee kuvan kehyksen (perustekstin värinen) paksuuden pikseleinä. Jos BORDER-parametrin arvoksi annetaan 0, niin kuvaan ei piirretä kehystä. Kehyksen väriä voidaan muuttaa <FONT></FONT>-tagien avulla.  
  WIDTH ja HEIGHT -parametrien avulla voidaan kertoa selaimelle kuvan koko (leveys ja korkeus). Tämä nopeuttaa jonkin verran kuvan lataamista. Näin voi tehdä, jos kuvan koko on tiedossa. Kuvan koko täytyy tietää myös sen vuoksi, että se pysyisi ”muodossaan”.  
  ALT - parametri - jos kuvaa ei näytetä selaimessa, lukee kuvan paikalla ALT-parametriin kirjoitettu teksti.

 

  
  Esimerkki:

<IMG SRC="auto.gif" ALT="Kuva autostani">

<IMG SRC="http://www.kase.fi/logo.gif"> <IMG SRC="kuva.gif">

<IMG SRC="vihrea.gif" ALIGN=right> <BR CLEAR=right>

<IMG SRC="kuva.gif" HSPACE=5 VSPACE=8> <IMG SRC="kuva.gif" BORDER=5>

<FONT COLOR="#FF0080"> <IMG SRC="kuva.gif" BORDER=5></FONT>

<IMG SRC="kuva.gif" WIDTH=150 HEIGHT=180>