Median lisääminen sivuille.

Kuva

Pelkkä tekstisivu ilman kuvia saattaa jäädä hieman tylsäksi. Kuvan lisäät <img> tagilla. Se on yksi harvoista tageista jolla ei ole erillistä päättävää tagia, vaan päätös merkitään määrittelyn loppuun kauttaviivalla />

<img src=”kuva.jpg” />

src (source) kertoo kuvan osoitteen, viitteen joka voi olla absoluuttinen tai suhteellinen. Näiden lisäksi on hyvä lisätä määritteeseen kuvan mitat, jolla varmistetaan että kuvia ei jäädä odottamaan ennen kuin koko sivu latautuu ja vaihtoehtoinen teksti (alt) niitä käyttäjiä varten, joilla kuvat on pois päältä selaimessa tai lukija käytössä.

<img src=”kuva.jpg” height=”280” width=”460” alt=”kissa ottaa aurinkoa” />

Kuvat pitää valmistella asianmukaisesti nettikäyttöä varten kokonsa ja tiedostomuodon puolesta. Taustakuvat ym käsittelemme myöhemmin.

Ääni

Äänen lisääminen sivuille on helpottunut HTML5:n myötä. Voit käyttää uutta, mutta hyvin tuettua <audio> tagia vaikkapa seuraavasti:

<audio controls=”controls”> <source src=”biisi.mp3” type=”audio/mpeg”> Selaimesi ei tue HTML5 audiota, käytä tätä linkkiä: <a href=”biisi.mp3”>Reggae-biisi</a> </audio>

Kaikki ”pää”selaimet tukevat mp3-muotoa, mutta voit halutessasi lisätä myös OGG ja WAV muotoja, joita osa selaimista tukee. Controls luo kappaletta varten säätimiä (play, volume). Vanhoja selaimia varten voi vielä luoda tavallisen a href-linkin kappaleeseen.

Video

Uusi <video> tagi toimii samalla lailla audion kanssa. Video näkyy suoraan sivullasi, etkä enää tarvitse Flashin kaltaista lisäosaa hommaan. Ihan näin helpolla ei kuitenkaan päästä, sillä standardeista (H.264 vai OGG) ei olla päästy yhteisymmärrykseen ja koodauskin voi olla väärä. (Voit käyttää ilmaista VLC ohjelmaa muodon vaihtamiseen.) Muista myös että videotiedostot ovat todella isoja. Usein kannattaa harkita videon lataamista esim YouTubeen ja sen koodin upottamista sivulle. Jos kuitenkin lisäät videon sivuillesi, on mp4 laajimmin tuettu muoto:

<video width="320" height="240" controls><source src="leffa.mp4" type="video/mp4"></video>