Kuva joka esitetään www-sivulla voi sijaita www-palvelimella samassa kansiossa kuin html-tiedosto jonka avulla kuva esitetään selaimeen. Kuva voi sijaita myös palvelimella eri kansiossa tai täysin eri palvelimella. Kuva voi olla myös gif-animaatio.
Mikäli sivustolla on paljon kuvia on niille syytä luoda www-sivuja tehdessä oma kansionsa.
img-elementti
Taulukossa img-elementin atribuutit ja määritteet:
Atribuutti | Määritteet | Tarkoitus |
---|---|---|
align | "top" "bottom" "middle" "left" "right" | Tasaustapa EI HTML5 - käytä CSS |
alt | Esim.<img src="kuva1.gif" alt="Hymynaama" align="middle"> | Oletusteksti, näkyy mikäli kuva ei näy. |
border | Esim.<img src="kuva1.gif" alt="Hymynaama" border="5"> | Kehyksen eli kehysviivan paksuus pikseleinä EI HTML5 - käytä CSS |
crossorigin | ? ? | UUSI HTML5 ? ? |
height | Esim.<img src="kuva1.gif" alt="Hymynaama" height="120" width="260"> | Kiinnitetty korkeus pikseleinä. Käytä harkitusti yhdessä CSS:n kanssa |
hspace | Esim.<img src="kuva1.gif" alt="Hymynaama" hspace="20"> | Vaakasuuntainen tila pikseleinä EI HTML5- käytä CSS |
ismap | Katso opas LINKIT
| Palvelinpohjainen karttatiedosto |
longdesc | ? ? | Kehyksen sisällön kuvaus Ei HTML5:ssä |
src | Esim.<img src="../kuvat/kuva1.gif" alt="Hymynaama" align="middle"> | Linkitettävän kuvan osoite. Osoite paikkaan jonne www-sivun kuvat on talletettu. Osoitteella voidaan viitata muulle www-sivustollakin. |
usemap | Katso opas LINKIT
| Asiakaskohtainen karttatiedosto |
vspace |
| Pystysuuntainen tila EI HTML5 |
width | Esim.<img src="kuva1.gif" alt="Hymynaama" height="120" width="260"> | Kiinnitetty leveys, käytä mielummin CSS |
Esimerkkejä img-elementin atribuuttien ja määritteiden käyttämisestä:
<img src="kaara.jpg" alt="Tyylikäs, mutta ei näy?" style="width:500px;height:600px;">
src - kuvatiedoston nimi
alt - jos kuva ei näy, näyttävä teksti
style - CSS-ohjeina leveys ja korkeus pikseleinä (ongelmallinen)
Parempi vaihtoehto antaa kuvan leveys prosenttilukuna !
Suositeltu tapa:
<img src="kaara.jpg" alt="Tyylikäs, mutta ei näy?" width="80%">
Suositeltu tapa määrittää leveyden jolloin kuvan korkeus muuttuu automaattisesti
eikä kuva vääristy.
Kuva-tiedosto kuvat-kansiossa:
<img src="/kuvat/kaara.jpg" alt="Tyylikäs, mutta ei näy?" width="80%">
Kuva-tiedosto joltain www-sivustolta:
<img src="http://tietokanta.edu.hel.fi/salmonplayer/kala1.png" alt="Tyylikäs, mutta ei näy?" width="60%">
Alla kuva player:n www-treenaussivustolta, käyttäen em ohjeen viimeistä esimerkkiä:
figure ja figcaption-elementit
Kuva voidaan sijoitetaan img-elementissä figure-elementin sisään sekä kohdistaa figure-elementtiin CSS-ohjeita. Alla kuvaan
on lisäksi liitetty kuvan alle teksti figcaption-elementillä, joka voidaan muotoilla CSS-ohjeilla.
(Esimerkissä käytetty Googlen fonttityyppiä).
<figure>
<img src="Inarinhopea.jpg" alt="Inarinhopea, yrityksen nimikkoperho" width="75%"/>
<figcaption class="lohiperho"> Inarinhopea ja wanha perhosidonta-opas. </figcaption>
</figure>