Tehtävä 1
Etsi sopiva kuva netistä.
Tallenna se kurssin hakemistoon.
(Hiiren oikea näppäin, tallenna kuva nimellä).
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 - parametrin käyttö palvelee sellaisia käyttäjiä, joilla ei ole graafista selainta tai jotka eivät halua ladata kuvia (esim. hitaiden modeemiyhteyksien käyttäjät). 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>