Kuvat ja linkit

Kuvat

  • Kuvan lisääminen html-sivulle onnistuu <img> -tagilla.
  • Kuva voi olla valmiiksi netissä tai sen voi tallentaa samaan kansioon html-tiedoston kanssa.
    • jos kuvia tulee paljon, kannattaa tehdä html-tiedoston kanssa samaan kansioon esim. "img"-niminen kansio
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
  • img-tagia ei tarvitse sulkea
  • src="nimi.gif" kertoo kuvan nimen/osoitteen netissä. huom! tiedostopääte (gif/jpg/png)
  • alt kertoo näytettävän tekstin jos kuvaa ei voida jostain syystä näyttää
  • height ja width kertoo kuvan koon pikseleinä
    • alt, height ja width eivät ole pakollisia, mutta suositeltavia
esim. seuraava käsky lataa sivulle googlen logon
<img src="https://www.google.fi/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png ">

  • Netissä olevan kuvan osoitteen saa selville hiiren oikealla napilla -> Kopioi kuvan osoite
  • Huom! kaikki sivustot eivät tykkää kuvin linkkaamisesta ("hotlinking")

Linkit

  • Tekstin sekaan saa lisättyä linkkejä <a> -tagilla

<a href="http://www.kotka.fi/asukkaalle ">Kotkan kaupungin internetsivut.</a>

Näyttää käyttäjälle tältä: Kotkan kaupungin internetsivut. Ja linkin jälkeen teksti voi jatkua normaalisti.
  • href="osoite" kertoo selaimelle mihin linkki johdattaa
  • <a> ja </a> tagien väliin tulee linkin teksti joka näkyy käyttäjälle
  • Attribuuteilla voi esim. pakottaa linkin aukeamaan uuteen ikkunaan (target="_blank")

Lisätietoa: Linkitys saman sivun sisällä

  • tagi <a> tarkoittaa oikeasti ankkuria (anchor).
  • tagilla <a name="ankkurin_nimi"> voidaan määrittää sivulla kohta johon voidaan linkittää suoraan
  • ankkuriin viitataan <a href="#ankkurin_nimi ">linkin teksti</a>
  • ankkuriin voi linkittää myös ulkopuoliselta sivulta <a href="http://www.sivusto.fi/sivu.html#ankkurin_nimi ">näin.</a>