WEB-opas, HTML - Kuva

Kuvien lisääminen www-sivuille

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"
Esim.
<img src="kuva1.gif" alt="Hymynaama" align="middle">
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ä:

Tyylikäs, mutta ei näy?

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>
  

Inarinhopea, yrityksen nimikkoperho
Inarinhopea ja wanha perhosidonta-opas.