HTML-opas v.14.11.1997

KUVAT

KUVA SIVULLE - <IMG SRC=
KEHYS - BORDER=
SUHDE TEKSTIIN - ALIGN=
TILAA YMPÄRILLE - HSPACE= ja VSPACE=
KOKO - HEIGHT= ja WIDTH=
TEKSTIKUVAUS - ALT=
ALOITUSKUVA - LOWSRC=
SUORA LINKKI - <A HREF=

SISÄLLYSLUETTELOON

KUVA SIVULLE - <IMG SRC=

Esimerkissä:
<IMG SRC="kuvat/sharks.gif">

Polku periaatteella: <IMG SRC="tiedoston sijainti ja nimi">

Esimerkissä kuva on "kuvat"-hakemistossa, joka on samassa hakemistossa html-tiedoston kanssa.

Jos kuva olisi samassa hakemistossa html-tiedoston kanssa, ei osoitepolkua tarvita,
pelkkä kuvatiedoston nimi riittää. Jolloin linkki olisi muotoa: <IMG SRC="sharks.gif">

Polun voi myös tehdä koko URL-osoitteena. esim:
<IMG SRC="http://www.lehtikanta.fi/pvuorenm/html-ohje/kuvat/sharks.gif">

SISÄLLYSLUETTELOON

KEHYS - BORDER=

Esimerkissä:
<IMG SRC"kuvat/powrbook.gif" BORDER="1">

Esimerkissä:
<IMG SRC"kuvat/powrbook.gif" BORDER="4">

Linkkikuvissa voi kehyksen määritellä nollaksi, niin kuvaa ympäroivää linkkikehystä ei näytetä.

SISÄLLYSLUETTELOON

KUVAN SUHDE TEKSTIIN - ALIGN=


| top 
| texttop |

| middle 
| absmiddle |

| bottom 
| absbottom 
| baseline |

| left 
| right 
|

Esimerkiksi:
< IMG SRC="kuvat/sharks.gif" ALIGN=top>

Teksti sijoittuu kuvan yläreunaan ja kuva on kuin yhdellä rivillä tekstin kanssa ja seuraava rivi alkaa vasta kuvan alta.

Tekstin pitäisi olla kuvan yläreunan tasolla.

Esimerkiksi:
< IMG SRC="kuvat/sharks.gif" ALIGN=texttop>

Teksti sijoittuu kuvan yläreunaan ja kuva on kuin yhdellä rivillä tekstin kanssa ja seuraava rivi alkaa vasta kuvan alta.

Tekstin korkeimman kohdan pitäisi olla kuvan yläreunan tasolla.

Esimerkiksi:
<IMG SRC="kuvat/sharks.gif" ALIGN=middle>

Teksti sijoittuu kuvan keskelle ja kuva on kuin yhdellä rivillä tekstin kanssa ja seuraava rivi alkaa vasta kuvan alta.

Teksti pitäisi olla kuvan keskikohdan tasolla.

Esimerkiksi:
<IMG SRC="kuvat/sharks.gif" ALIGN=absmiddle>

Teksti sijoittuu kuvan keskelle ja kuva on kuin yhdellä rivillä tekstin kanssa ja seuraava rivi alkaa vasta kuvan alta.

Tekstin keskikohta pitäisi olla kuvan keskikohdan tasolla.

Esimerkiksi:
<IMG SRC="kuvat/sharks.gif" ALIGN=bottom>

Teksti sijoittuu kuvan alareunaan ja kuva on kuin yhdellä rivillä tekstin kanssa.

tekstin x-korkeuden alalalaidan taso pitäisi olla kuvan alareunan tasolla.

Esimerkiksi:
<IMG SRC="kuvat/sharks.gif" ALIGN=absbottom>

Teksti sijoittuu kuvan alareunaan ja kuva on kuin yhdellä rivillä tekstin kanssa.

Tekstin alin kohta pitäisi olla kuvan alareunan tasolla.

Esimerkiksi:
<IMG SRC="kuvat/sharks.gif" ALIGN=baseline>

Teksti sijoittuu kuvan alareunaan ja kuva on kuin yhdellä rivillä tekstin kanssa.

Tekstin x-korkeuden alalalaidan taso pitäisi olla kuvan alareunan tasolla eli sama kuin "bottom".

Esimerkiksi:
<IMG SRC="kuvat/sharks.gif" ALIGN=left>

Tekstiä ennen kuvan sijoittamista. Kuva suljettu vasemmalle. Kuva sijoittuu ihan vasempaan reunaan ja teksti kiertää kuvaa. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx.xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx.

Esimerkiksi:
<IMG SRC="kuvat/sharks.gif" ALIGN=right>

Tekstiä ennen kuvan sijoittamista. Kuva suljettu oikealle. Kuva sijoittuu ihan oikeaan reunaan ja teksti kiertää kuvaa. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx.xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx.

SISÄLLYSLUETTELOON

TILAA YMPÄRILLE - hspace= ja vspace=

h = horisontal - vaaka

v = vertical - pysty

Esimerkissä:
<IMG hspace="50" SRC="kuvat/sharks.gif" ALIGN=LEFT>

Tekstiä ennen kuvaa. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx.xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx. xxx xx xxxxxx xxx xx xxxxxxxx xxx xxxxxx.

Esimerkissä:
<IMG vspace="20" SRC="kuvat/sharks.gif" ALIGN=LEFT>

Esimerkissä:
<IMG hspace="50" vspace="20" SRC="kuvat/sharks.gif" ALIGN=LEFT>

SISÄLLYSLUETTELOON

KOKO - HEIGHT= WIDTH=

height = korkeus

width = leveys

( Esimerkeissä käytetty samaa kuvaa! )

Esimerkissä:
<IMG SRC="kuvat/sharks.gif">

Siis ilman kokoarvoja jolloin selari lataa kuvan ja jatkaa sitten vasta sivun latausta eteenpäin tai näyttää sivun vasta kun kaikki kuvat on luettu.

Esimerkissä:
<IMG SRC="kuvat/sharks.gif" WIDTH="113" HEIGHT="85">

Siis kokoarvoilla, jolloin kuvalle varataan paikka tekstin latautuessa ja teksti voidaan näyttää ennen "raskaita" kuvia.

Esimerkissä:
<IMG SRC="kuvat/sharks.gif" WIDTH="50" HEIGHT="30">

Kuva pakotettu kokoon.

Esimerkissä:
<IMG SRC="kuvat/sharks.gif" WIDTH="200" HEIGHT="100">

Kuva pakotettu kokoon.

Esimerkissä:
<IMG SRC="kuvat/sharks.gif" WIDTH="200">

Kuvan korkeuden laskee kone.

Esimerkissä:
<IMG SRC="kuvat/sharks.gif" WIDTH="400" HEIGHT="5">

Kuva pakotettu kokoon.

Esimerkissä:
<IMG SRC="kuvat/sharks.gif" WIDTH="70%">

Eli 50% ikkunan leveydestä. Eli jos muutat ikkunan kokoa niin kuvakin muuttuu kooltaan.

Mitan voi asettaa vain leveyden tai korkeuden osalta jolloin kone "laskee" puuttuvan koon.
Kun kaikkiin kuviin asetetaan korkeus ja leveys niin latautuu sivusta ensin teksti kokonaan ja sen jälkeen vasta kuvat.

SISÄLLYSLUETTELOON

ALT= Määre
(tekstillinen kuvaus kuvasta)

Esimerkissä:
<IMG SRC="joku.gif">

Linkki ei toimi - eli selaaja ei löydä kuvaa. (eipä kuvaa olekkaan)
Ei ALT-määrettä, joten tulee vain kuvaus puuttuvasta kuvasta.

Esimerkissä:
<IMG SRC="joku.gif" ALT="joku.gif">

ALT=määreellä tulee kuvasta tekstillistä informaatiota.

SISÄLLYSLUETTELOON

LOW - ALOITUSKUVA

Kuvasta voidaan ladata niinsanottu aloituskuva, joka on tiedostoltaan pieni ( mustavalko / pakattu ) kun määritellään LOWSRC=. Tällöin selari lataa ensin LOWSRC-kuvan, ja kun muut osat on ladattu, ladataan LOWSRC:n päälle vielä lopullinen SRC-kuva, eli katsoja saa lähes heti jonkinlaisen kuvan sivulle ja voi sitten odottaa lopullisen kuvan latautumista tai jatkaa taas muualle.

Ominaisuus on erittäin hyvä suuremmissa map-kuvakartoissa jolloin selaaja voi heti low-kuvan tultua nähdä mitä linkkejä kartassa on eikä tarvi odottaaaaaa kuvaa latautuvaksi, varsinkin jos on hidas modeemilinja.

Voit ladata sivua uudelleen (Reload) niin näet low-kuvien latautumisen.

Esimerkissä mustavalko .gif aloituskuvana:
<IMG LOWSRC="kuvat/sharkslo.gif" SRC="kuvat/sharkslo.gif">

sharkslo.gif sharks.gif LOW-versio

Esimerkissä jpg. aloituskuvana:
<IMG LOWSRC="kuvat/sharkslo.jpg" SRC="kuvat/sharks.gif">

sharkslo.jpg sharks.gif LOW-versio

Esimerkissä pienennetty jpg. aloituskuvana, joka pakotetaan lopullisen kuvan kokoiseksi:
<IMG WIDTH="113" HEIGHT="85" LOWSRC="kuvat/sharkspi.jpg" SRC="kuvat/sharks.gif">

sharkspi.jpg sharks.gif LOW-versio suurennettu koosta (28x21).