19 HTML pildid
Pildid veebilehel
Piltide lisamisega veebilehele saab viimistleda ja täiendada veebilehe kujundust ja välimust.
Pildi lisamiseks on <img> element, mis on nn tühi element (empty) (pole eraldi lõpumärgendit) ja millel on kaks kohustuslikku atribuuti:
src− viide pildifailile (ingliskeelsest sõnast source), mille sisuks on soovitud pildifaili aadress ehk URL;alt− alternatiivtekst (alternative text), mille sisuks on pilti lühidalt kirjeldav tekst näiteks nägemispuuetega inimestele ekraani sisu ettelugeva tarkvara jaoks. Seda teksti näidatakse veebilehel ka siis, kui mingil tehnilisel põhjusel ei õnnestu pilti näidata.
Pildi element võib seega välja näha selline:
<img src="ilusfoto.jpg" alt="Punane auto">
Lisaks on soovitatav kasutada <style> atribuuti pildi laiuse (width) ja kõrguse (height) määramiseks. Kui pildi laiust ja kõrgust pole määratud võib veebileht pildi laadimise ajal virvendada.
<img src="ilusfoto.jpg" alt="Banaan" style="width:400px; height:300px;">
Pildi laiust ja kõrgust saame määrata ka kasutades width ja height atribuute, mis määravad laiuse ja kõrguse pikslites.
<img src="ilusfoto.jpg" alt="Punane auto" width="360" height="288">
Soovituslik on määrata pildi laius ja kõrgus ikkagi <style> atribuudi omadusena. Siis ei ole ohtu, et välisel stiililehel määratud üldised reeglid meie poolt varasmalt paika pandud pildi kõrguse ja laiuse meile sobimatuks muudaks.
Enesekontroll (3 ülesannet)
Pildid teises kaustas
Kui me ei määra ise teisti, siis otsib brauser HTML koodis viidatud pildifaile samast kaustast, kuhu on salvestatud ka meie .html fail. Mõistlik on aga piltide tarvis kasutada eraldiseisvat kausta. Sellisel juhul peame src atribuudi väärtusele lisama ka kausta nime. Kui näiteks kaustas kuhu on salvestatud meie .html fail on ka kaust nimega “pildid” ning antud kaustas asub pildifail nimega “ilusfoto.jpg”, saame kasutada järgnevat viidet:
<img src="pildid/ilusfoto.jpg" alt="Tomat" style="width:100px;height:100px;">
Kui meil on aga näiteks projektikaust, milles on omakorda kaks erinevat kausta “kood” ja “pildid”, siis peame “kood” kaustas olevas failis pildid kaustale viitamiseks kasutama viite alguses kahte punkti. Kaks punkti näitavad, et kataloogis liigutakse üks samm ülespoole ning alles siis otsitakse kausta “pildid”.
<img src="../Pildid/ilusfoto.jpg" alt="Tomat" style="width:100px;height:100px;">
Pildid internetist
Soovi korral saame kasutada oma veebilehel ka pilte, mis asuvad hoopis kusagil mujal internetis (mõnes teises serveris). Sellejaoks kirjutame pildi allikaks täispika aadressi, kus see pilt asub. Näiteks kasutame enda veebilehel pilti, mis pärineb Rocca al Mare Kooli kodulehelt:
<img src="https://ramkool.edu.ee/wp-content/uploads/2015/10/ram_logo.jpg" alt="ramk logo">
Sellisel viisil piltide veebilehel kasutusega tuleb olla aga väga ettevaatlik. Kui pilt kustutatakse viidatud lehel, kaob see ka meie lehelt.
Pildi “hõljumine” float
Omadust float kasutades saab pildi panna hõljuma tekstist vasakule (left) või paremale (right).
<p><img src="ramk_logo.jpg" alt="Rocca al Mare Kooli logo" style="float:left;width:100px;height:100px;"> See pilt hõjub tekstist vasakul.</p> <p><img src="ramk_logo.jpg" alt="Rocca al Mare Kooli logo" style="float:right;width:100px;height:100px;"> See pilt hõjub tekstist paremal.</p>
Taustapilt
Taustapildi saame lisada pea-aegu kõigile HTML elementidele. Taustapildi lisamiseks kasutame <style> elementi ja background-image omadust. Lisame taustapildi ühele tekstilõigule:
<p style="background-image: url('pildid/banaanid.jpg');">Selle teksti taustapildiks on banaan.</p>
Taustapildi lisamisl pange tähele, et pildi allikat ümbritsevad ühekordsed jutumärgid (tüüpiliselt klahv enterist vasakul).
Taustapildi saame määrata ka kasutades stiilielementi:
<style>
p{
background-image: url('pildid/banaanid_small.jpg');
}
</style>
Taustapilt kogu lehele
Kui me soovime taustapildi lisada kogu veebilehele, siis saame pildi lisada <body> elemendile.
<style>
body {
background-image: url('pildid/banaanid_small.jpg');
}
</style>
Taustapildi omadused
Taustapildi kohandamiseks saame muuhulgas kasutada omadusi nagu
background-repeat – kas taustapilt hakkab lehel korduma, väärtused repeat, repeat-x, repeat-y ja no-repeat.
background-attachment – saame määrata kuidas käitub pilt veebilehe kerimisel, väärtused scroll, fixed, local.
background-size – saame määrata taustapildi suuruse pikkusühikutes, protsentides või kasutada väärtusi nagu cover või contain.
background-position – saame määrata kus elemendi suhtes taustapilt asub kas koordinaatide põhjal, protsentides või konstantide põhjal.
Täpsemalt on neist CSS omadustest juttu CSS peatükis.
Kohanduv pilt
Kohanduva veebi (responsive web) jaoks pakub HTML elementi <picture>, mis laseb ühe lähtefaili asemel määrata mitu. Seega saame veebilehe külastajale kuvada pilti, mis sobib kõige paremini just tema seadmele või ekraanisuurusele.
Elemendil <picture> on kahte tüüpi tütarelemente: <source> ja <img>.
Tütarelement <source> määrab mingisugusele seadmele/ekraanisuurusele vastava pildifaili. Neid elemente võib olla mitu. <source> elemendil on järgmised atribuudid:
srcset– määrab pildifaili URL-i (kohustuslik atribuut);media– määratleb meedia/väljundseadme, mille jaoks vastav pilt mõeldud on.sizes– üks laius, üks meediapäring laiuse kirjeldusega või komadega eraldatud meediapäringute loend;type– MIME tüüp.
Brauser valib esimese sobiva pildifaili ning ignoreerib ülejäänuid.
Teise tütarelemendi tüübina on <img>, mis peab olema viimane (ainult üks), et tagada ühilduvus brauseritega, mis ei toeta <picture> elementi. <img> elementi kasutatakse ka, kui ükski <source> element pole sobiv.
NB! Tütarelement <img> peab olema viimane!
Näiteks:
<picture> <source media="(min-width: 1100px)" srcset="suur_pilt.jpg"> <source media="(max-width: 600px)" srcset="tilluke_pilt.jpg"> <img src="keskmine_pilt.jpg" alt="ilus pilt"> </picture>
NB! Meediapäring peab olema sulgudes!
