 | Peatüki sisukord |  |
4.2 Pildid
Eelmise mooduli lõpus vaatasime, kuidas lisada viiteid teistele veebidokumentidele. Lisaks linkidele saab lehekülgedele lisada ka pilte. Selleks kasutame märgendi <img>. Pildi märgend on eriline selle poolest, et märgend <img> on isesulguv - lõpus pole vaja lisada </img>. Veel üks erilisus seisneb selles, et sisu (pilt) ei panda märgendite vahele, vaid näidatakse omaduse src (ingl. k. source) abil pildi asukohta (URL-aadress). Hea praktika on hoida pilte samas kataloogis, kus on veebidokement, või siis spetsiaalses kataloogis, mis on mõeldud graafika jaoks.
Näide pilti lisamise kohta:
<img src="https://courses.cs.ut.ee/topic_wikis/nooredkoodi/uploads/Veebilehed/pilt14.jpg">
Pööra tähelepanu ka sellele, et nii veebilehtede kui ka piltide URLi paneme jutumärkide vahele.
Veebilehitsejad toetavad järgmisi pildiformaate:
- rastergraafika – png, gif, jpg, jpeg
- vektorgraafika – svg
- animeeritud rastergraafika – gif, apng
Igale pildile peab alternatiivteksti (pildi nimi) lisama juhuks, kui mingil põhjusel pilt ei ole enam veebilehitsejale kättesaadav. Selleks kasutatakse omadus alt:
<img src="https://courses.cs.ut.ee/topic_wikis/nooredkoodi/uploads/Veebilehed/pilt14.jpg" alt="Siiami kass">
Kui valitud pilt on liiga suur ja ei mahu lehele (laiuse või kõrguse poolest), siis soovitame pilti teha parajaks (kärpida) pilditöötlusprogrammis. Samas pilditöötlusprogrammis saab muuta ka pildi resolutsiooni - mida väiksem on pilt (megabaitide poolest), seda kiiremini jõuab veebilehitseja veebidokumenti avada.
Kui pilt on lisatud otseviitena või pildile määratud autoriõigused ei luba originiaalpilti muuta, siis pildi suurust saab muuta ka HTML abil. Pildi suuruse määramiseks kasutatakse omadusi height ja width. Kui on määratud ainult üks omadus (näiteks kõrgus), siis laius sätitakse automaatselt, hoides pilti külgede suhte paigas. Laiuse ja kõrguse korraga lisamisel on oht, et pilt venitatakse proportsioonidest välja.
Näited:
<p>Pildi kõrgus 100px<br> <img src="https://courses.cs.ut.ee/topic_wikis/nooredkoodi/uploads/Veebilehed/pilt14.jpg" alt="Siiami kass" height="100"> </p>
<p>Pildi laius 100px<br> <img src="https://courses.cs.ut.ee/topic_wikis/nooredkoodi/uploads/Veebilehed/pilt14.jpg" alt="Siiami kass" width="100"> </p>
<p>Venitatud pilt 100x50px<br> <img src="https://courses.cs.ut.ee/topic_wikis/nooredkoodi/uploads/Veebilehed/pilt14.jpg" alt="Siiami kass" width="100" height="50"> </p>
Iseseisev ülesanne:
- Otsi pilt veebikeskkonnast https://www.flickr.com/. Kontrolli, mis tingimustel võib valitud pilti jagada.
- Lisa oma veebidokumenti pilt koos allikaga.
Lõpetuseks, proovime pilte ja linke omavahel kombineerida - pildile vajutades avaneks veebileht. Selleks kirjuta viite kirjeldusse pildi märgendid. Ehk siis näiteks:
<a href="https://www.flickr.com/search/?text=cat&license=2%2C3%2C4%2C5%2C6%2C9"> <img src="https://courses.cs.ut.ee/topic_wikis/nooredkoodi/uploads/Veebilehed/pilt14.jpg" alt="Kassid"> </a>
| Peatüki sisukord | |