{"id":176,"date":"2020-03-01T20:49:52","date_gmt":"2020-03-01T20:49:52","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=176"},"modified":"2020-11-20T10:51:11","modified_gmt":"2020-11-20T10:51:11","slug":"html-pildid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-pildid\/","title":{"rendered":"HTML pildid"},"content":{"raw":"<h1>Pildid veebilehel<\/h1>\r\nPiltide lisamisega veebilehele saab viimistleda ja t\u00e4iendada veebilehe kujundust ja v\u00e4limust.\r\n\r\nPildi lisamiseks on <code>&lt;img&gt;<\/code> element, mis on nn t\u00fchi element (<em>empty<\/em>) (pole eraldi l\u00f5pum\u00e4rgendit) ja millel on kaks kohustuslikku atribuuti:\r\n<ul>\r\n \t<li><code>src<\/code> \u2212 viide pildifailile (ingliskeelsest s\u00f5nast <em>source<\/em>), mille sisuks on soovitud pildifaili aadress ehk URL;<\/li>\r\n \t<li><code>alt<\/code> \u2212 alternatiivtekst (<em>alternative text<\/em>), mille sisuks on pilti l\u00fchidalt kirjeldav tekst n\u00e4iteks n\u00e4gemispuuetega inimestele ekraani sisu ettelugeva tarkvara jaoks. Seda teksti n\u00e4idatakse veebilehel ka siis, kui mingil tehnilisel p\u00f5hjusel ei \u00f5nnestu pilti n\u00e4idata.<\/li>\r\n<\/ul>\r\nPildi element v\u00f5ib seega v\u00e4lja n\u00e4ha selline:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"ilusfoto.jpg\" alt=\"Punane auto\"&gt;<\/pre>\r\n[caption id=\"attachment_177\" align=\"aligncenter\" width=\"168\"]<img class=\"wp-image-177 size-full\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/Alternatiivtekst.png\" alt=\"alternatiivtekst\" width=\"168\" height=\"64\" \/> Pildi puudumisel on n\u00e4ha alternatiivtekst.[\/caption]\r\n\r\nLisaks on soovitatav kasutada <code>&lt;style&gt;<\/code> atribuuti pildi laiuse (<em>width<\/em>) ja k\u00f5rguse (<em>height<\/em>) m\u00e4\u00e4ramiseks. Kui pildi laiust ja k\u00f5rgust pole m\u00e4\u00e4ratud v\u00f5ib veebileht pildi laadimise ajal virvendada.\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"ilusfoto.jpg\" alt=\"Banaan\" style=\"width:400px; height:300px;\"&gt;<\/pre>\r\nPildi laiust ja k\u00f5rgust saame m\u00e4\u00e4rata ka kasutades <em>width<\/em> ja <em>height<\/em> atribuute, mis m\u00e4\u00e4ravad laiuse ja k\u00f5rguse pikslites.\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"ilusfoto.jpg\" alt=\"Punane auto\" width=\"360\" height=\"288\"&gt;<\/pre>\r\nSoovituslik on m\u00e4\u00e4rata pildi laius ja k\u00f5rgus ikkagi <code>&lt;style&gt;<\/code> atribuudi omadusena. Siis ei ole ohtu, et v\u00e4lisel stiililehel m\u00e4\u00e4ratud \u00fcldised reeglid meie poolt varasmalt paika pandud pildi k\u00f5rguse ja laiuse meile sobimatuks muudaks.\r\n<h3>Enesekontroll (3 \u00fclesannet)<\/h3>\r\n[h5p id=\"18\"]\r\n<h1>Pildid teises kaustas<\/h1>\r\nKui me ei m\u00e4\u00e4ra ise teisti, siis otsib brauser HTML koodis viidatud pildifaile samast kaustast, kuhu on salvestatud ka meie .html fail. M\u00f5istlik on aga piltide tarvis kasutada eraldiseisvat kausta. Sellisel juhul peame <code>src<\/code> atribuudi v\u00e4\u00e4rtusele lisama ka kausta nime. Kui n\u00e4iteks kaustas kuhu on salvestatud meie .html fail on ka kaust nimega \"pildid\" ning antud kaustas asub pildifail nimega \"ilusfoto.jpg\", saame kasutada j\u00e4rgnevat viidet:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"pildid\/ilusfoto.jpg\" alt=\"Tomat\" style=\"width:100px;height:100px;\"&gt;<\/pre>\r\nKui meil on aga n\u00e4iteks 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\u00e4itavad, et kataloogis liigutakse \u00fcks samm \u00fclespoole ning alles siis otsitakse kausta \"pildid\".\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"..\/Pildid\/ilusfoto.jpg\" alt=\"Tomat\" style=\"width:100px;height:100px;\"&gt;<\/pre>\r\n<iframe src=\"https:\/\/www.youtube.com\/embed\/ZGwzmiLcUXs?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>\r\n<h1>Pildid internetist<\/h1>\r\nSoovi korral saame kasutada oma veebilehel ka pilte, mis asuvad hoopis kusagil mujal internetis (m\u00f5nes teises serveris). Sellejaoks kirjutame pildi allikaks t\u00e4ispika aadressi, kus see pilt asub. N\u00e4iteks kasutame enda veebilehel pilti, mis p\u00e4rineb Rocca al Mare Kooli kodulehelt:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"https:\/\/ramkool.edu.ee\/wp-content\/uploads\/2015\/10\/ram_logo.jpg\" alt=\"ramk logo\"&gt;<\/pre>\r\nSellisel viisil piltide veebilehel kasutusega tuleb olla aga v\u00e4ga ettevaatlik. Kui pilt kustutatakse viidatud lehel, kaob see ka meie lehelt.\r\n<iframe src=\"https:\/\/www.youtube.com\/embed\/zRVyGMw2Tdg?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>\r\n<h1>Pildi \"h\u00f5ljumine\" <code>float<\/code><\/h1>\r\nOmadust <code>float<\/code> kasutades saab pildi panna h\u00f5ljuma tekstist vasakule (<em>left<\/em>) v\u00f5i paremale (<em>right<\/em>).\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;p&gt;&lt;img src=\"ramk_logo.jpg\" alt=\"Rocca al Mare Kooli logo\" style=\"float:left;width:100px;height:100px;\"&gt;\r\nSee pilt h\u00f5jub tekstist vasakul.&lt;\/p&gt;\r\n\r\n&lt;p&gt;&lt;img src=\"ramk_logo.jpg\" alt=\"Rocca al Mare Kooli logo\" style=\"float:right;width:100px;height:100px;\"&gt;\r\nSee pilt h\u00f5jub tekstist paremal.&lt;\/p&gt;<\/pre>\r\n<h1>Taustapilt<\/h1>\r\nTaustapildi saame lisada pea-aegu k\u00f5igile HTML elementidele. Taustapildi lisamiseks kasutame <code>&lt;style&gt;<\/code> elementi ja <code>background-image<\/code> omadust. Lisame taustapildi \u00fchele tekstil\u00f5igule:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p style=\"background-image: url('pildid\/banaanid.jpg');\"&gt;Selle teksti taustapildiks on banaan.&lt;\/p&gt;<\/pre>\r\n<img class=\"aligncenter wp-image-701\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/banaan_tekst.png\" alt=\"banaan taustal\" width=\"450\" height=\"163\" \/>\r\n\r\nTaustapildi lisamisl pange t\u00e4hele, et pildi allikat \u00fcmbritsevad \u00fchekordsed jutum\u00e4rgid (t\u00fc\u00fcpiliselt klahv enterist vasakul).\r\n\r\nTaustapildi saame m\u00e4\u00e4rata ka kasutades stiilielementi:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;style&gt;\r\np{\r\n background-image: url('pildid\/banaanid_small.jpg');\r\n}\r\n&lt;\/style&gt;<\/pre>\r\n<h2>Taustapilt kogu lehele<\/h2>\r\nKui me soovime taustapildi lisada kogu veebilehele, siis saame pildi lisada <code>&lt;body&gt;<\/code> elemendile.\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;style&gt;\r\nbody {\r\n  background-image:\u00a0url('pildid\/banaanid_small.jpg');\r\n}\r\n&lt;\/style&gt;<\/pre>\r\n<h2>Taustapildi omadused<\/h2>\r\nTaustapildi kohandamiseks saame muuhulgas kasutada omadusi nagu\r\n\r\n<code>background-repeat<\/code> - kas taustapilt hakkab lehel korduma, v\u00e4\u00e4rtused <code>repeat<\/code>, <code>repeat-x<\/code>, <code>repeat-y<\/code> ja <code>no-repeat<\/code>.\r\n<code>background-attachment<\/code> - saame m\u00e4\u00e4rata kuidas k\u00e4itub pilt veebilehe kerimisel, v\u00e4\u00e4rtused <code>scroll<\/code>, <code>fixed<\/code>, <code>local<\/code>.\r\n<code>background-size<\/code> - saame m\u00e4\u00e4rata taustapildi suuruse pikkus\u00fchikutes, protsentides v\u00f5i kasutada v\u00e4\u00e4rtusi nagu <code>cover<\/code> v\u00f5i <code>contain<\/code>.\r\n<code>background-position<\/code> - saame m\u00e4\u00e4rata kus elemendi suhtes taustapilt asub kas koordinaatide p\u00f5hjal, protsentides v\u00f5i konstantide p\u00f5hjal.\r\n\r\nT\u00e4psemalt on neist CSS omadustest juttu CSS peat\u00fckis.\r\n<iframe src=\"https:\/\/www.youtube.com\/embed\/SZrK4jMw_BE?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>\r\n<h1>Kohanduv pilt<\/h1>\r\nKohanduva veebi (<em>responsive web<\/em>) jaoks pakub HTML elementi <code>&lt;picture&gt;<\/code>, mis laseb \u00fche l\u00e4htefaili asemel m\u00e4\u00e4rata mitu. Seega saame veebilehe k\u00fclastajale kuvada pilti, mis sobib k\u00f5ige paremini just tema seadmele v\u00f5i ekraanisuurusele.\r\n\r\nElemendil <code>&lt;picture&gt;<\/code> on kahte t\u00fc\u00fcpi t\u00fctarelemente: <code>&lt;source&gt;<\/code> ja <code>&lt;img&gt;<\/code>.\r\n\r\nT\u00fctarelement <code>&lt;source&gt;<\/code> m\u00e4\u00e4rab mingisugusele seadmele\/ekraanisuurusele vastava pildifaili. Neid elemente v\u00f5ib olla mitu. <code>&lt;source&gt;<\/code> elemendil on j\u00e4rgmised atribuudid:\r\n<ul>\r\n \t<li><code>srcset<\/code> \u2013 m\u00e4\u00e4rab pildifaili URL-i (kohustuslik atribuut);<\/li>\r\n \t<li><code>media<\/code> - m\u00e4\u00e4ratleb meedia\/v\u00e4ljundseadme, mille jaoks vastav pilt m\u00f5eldud on.<\/li>\r\n \t<li><code>sizes<\/code> \u2013 \u00fcks laius, \u00fcks meediap\u00e4ring laiuse kirjeldusega v\u00f5i komadega eraldatud meediap\u00e4ringute loend;<\/li>\r\n \t<li><code>type<\/code> \u2013 MIME t\u00fc\u00fcp.<\/li>\r\n<\/ul>\r\nBrauser valib esimese sobiva pildifaili ning ignoreerib \u00fclej\u00e4\u00e4nuid.\r\n\r\nTeise t\u00fctarelemendi t\u00fc\u00fcbina on <code>&lt;img&gt;,<\/code> mis peab olema viimane (ainult \u00fcks), et tagada \u00fchilduvus brauseritega, mis ei toeta <code>&lt;picture&gt;<\/code> elementi. <code>&lt;img&gt;<\/code> elementi kasutatakse ka, kui \u00fckski <code>&lt;source&gt;<\/code> element pole sobiv.\r\n\r\n<span class=\"nb\">NB! T\u00fctarelement <code>&lt;img&gt;<\/code> peab olema viimane!<\/span>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;picture&gt;\r\n  &lt;source media=\"(min-width: 1100px)\" srcset=\"suur_pilt.jpg\"&gt;\r\n  &lt;source media=\"(max-width: 600px)\" srcset=\"tilluke_pilt.jpg\"&gt;\r\n  &lt;img src=\"keskmine_pilt.jpg\" alt=\"ilus pilt\"&gt;\r\n&lt;\/picture&gt;<\/pre>\r\n<span class=\"nb\">NB! Meediap\u00e4ring peab olema sulgudes!<\/span>\r\n<iframe src=\"https:\/\/www.youtube.com\/embed\/XgJz118ILeY?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>","rendered":"<h1>Pildid veebilehel<\/h1>\n<p>Piltide lisamisega veebilehele saab viimistleda ja t\u00e4iendada veebilehe kujundust ja v\u00e4limust.<\/p>\n<p>Pildi lisamiseks on <code>&lt;img&gt;<\/code> element, mis on nn t\u00fchi element (<em>empty<\/em>) (pole eraldi l\u00f5pum\u00e4rgendit) ja millel on kaks kohustuslikku atribuuti:<\/p>\n<ul>\n<li><code>src<\/code> \u2212 viide pildifailile (ingliskeelsest s\u00f5nast <em>source<\/em>), mille sisuks on soovitud pildifaili aadress ehk URL;<\/li>\n<li><code>alt<\/code> \u2212 alternatiivtekst (<em>alternative text<\/em>), mille sisuks on pilti l\u00fchidalt kirjeldav tekst n\u00e4iteks n\u00e4gemispuuetega inimestele ekraani sisu ettelugeva tarkvara jaoks. Seda teksti n\u00e4idatakse veebilehel ka siis, kui mingil tehnilisel p\u00f5hjusel ei \u00f5nnestu pilti n\u00e4idata.<\/li>\n<\/ul>\n<p>Pildi element v\u00f5ib seega v\u00e4lja n\u00e4ha selline:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"ilusfoto.jpg\" alt=\"Punane auto\"&gt;<\/pre>\n<figure id=\"attachment_177\" aria-describedby=\"caption-attachment-177\" style=\"width: 168px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-177 size-full\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/Alternatiivtekst.png\" alt=\"alternatiivtekst\" width=\"168\" height=\"64\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/Alternatiivtekst.png 168w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/Alternatiivtekst-65x25.png 65w\" \/><figcaption id=\"caption-attachment-177\" class=\"wp-caption-text\">Pildi puudumisel on n\u00e4ha alternatiivtekst.<\/figcaption><\/figure>\n<p>Lisaks on soovitatav kasutada <code>&lt;style&gt;<\/code> atribuuti pildi laiuse (<em>width<\/em>) ja k\u00f5rguse (<em>height<\/em>) m\u00e4\u00e4ramiseks. Kui pildi laiust ja k\u00f5rgust pole m\u00e4\u00e4ratud v\u00f5ib veebileht pildi laadimise ajal virvendada.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"ilusfoto.jpg\" alt=\"Banaan\" style=\"width:400px; height:300px;\"&gt;<\/pre>\n<p>Pildi laiust ja k\u00f5rgust saame m\u00e4\u00e4rata ka kasutades <em>width<\/em> ja <em>height<\/em> atribuute, mis m\u00e4\u00e4ravad laiuse ja k\u00f5rguse pikslites.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"ilusfoto.jpg\" alt=\"Punane auto\" width=\"360\" height=\"288\"&gt;<\/pre>\n<p>Soovituslik on m\u00e4\u00e4rata pildi laius ja k\u00f5rgus ikkagi <code>&lt;style&gt;<\/code> atribuudi omadusena. Siis ei ole ohtu, et v\u00e4lisel stiililehel m\u00e4\u00e4ratud \u00fcldised reeglid meie poolt varasmalt paika pandud pildi k\u00f5rguse ja laiuse meile sobimatuks muudaks.<\/p>\n<h3>Enesekontroll (3 \u00fclesannet)<\/h3>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-18\" class=\"h5p-iframe\" data-content-id=\"18\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML pildid 1\"><\/iframe><\/div>\n<h1>Pildid teises kaustas<\/h1>\n<p>Kui me ei m\u00e4\u00e4ra ise teisti, siis otsib brauser HTML koodis viidatud pildifaile samast kaustast, kuhu on salvestatud ka meie .html fail. M\u00f5istlik on aga piltide tarvis kasutada eraldiseisvat kausta. Sellisel juhul peame <code>src<\/code> atribuudi v\u00e4\u00e4rtusele lisama ka kausta nime. Kui n\u00e4iteks kaustas kuhu on salvestatud meie .html fail on ka kaust nimega &#8220;pildid&#8221; ning antud kaustas asub pildifail nimega &#8220;ilusfoto.jpg&#8221;, saame kasutada j\u00e4rgnevat viidet:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"pildid\/ilusfoto.jpg\" alt=\"Tomat\" style=\"width:100px;height:100px;\"&gt;<\/pre>\n<p>Kui meil on aga n\u00e4iteks projektikaust, milles on omakorda kaks erinevat kausta &#8220;kood&#8221; ja &#8220;pildid&#8221;, siis peame &#8220;kood&#8221; kaustas olevas failis pildid kaustale viitamiseks kasutama viite alguses kahte punkti. Kaks punkti n\u00e4itavad, et kataloogis liigutakse \u00fcks samm \u00fclespoole ning alles siis otsitakse kausta &#8220;pildid&#8221;.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"..\/Pildid\/ilusfoto.jpg\" alt=\"Tomat\" style=\"width:100px;height:100px;\"&gt;<\/pre>\n<p><iframe src=\"https:\/\/www.youtube.com\/embed\/ZGwzmiLcUXs?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h1>Pildid internetist<\/h1>\n<p>Soovi korral saame kasutada oma veebilehel ka pilte, mis asuvad hoopis kusagil mujal internetis (m\u00f5nes teises serveris). Sellejaoks kirjutame pildi allikaks t\u00e4ispika aadressi, kus see pilt asub. N\u00e4iteks kasutame enda veebilehel pilti, mis p\u00e4rineb Rocca al Mare Kooli kodulehelt:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"https:\/\/ramkool.edu.ee\/wp-content\/uploads\/2015\/10\/ram_logo.jpg\" alt=\"ramk logo\"&gt;<\/pre>\n<p>Sellisel viisil piltide veebilehel kasutusega tuleb olla aga v\u00e4ga ettevaatlik. Kui pilt kustutatakse viidatud lehel, kaob see ka meie lehelt.<br \/>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/zRVyGMw2Tdg?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h1>Pildi &#8220;h\u00f5ljumine&#8221; <code>float<\/code><\/h1>\n<p>Omadust <code>float<\/code> kasutades saab pildi panna h\u00f5ljuma tekstist vasakule (<em>left<\/em>) v\u00f5i paremale (<em>right<\/em>).<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;p&gt;&lt;img src=\"ramk_logo.jpg\" alt=\"Rocca al Mare Kooli logo\" style=\"float:left;width:100px;height:100px;\"&gt;\r\nSee pilt h\u00f5jub tekstist vasakul.&lt;\/p&gt;\r\n\r\n&lt;p&gt;&lt;img src=\"ramk_logo.jpg\" alt=\"Rocca al Mare Kooli logo\" style=\"float:right;width:100px;height:100px;\"&gt;\r\nSee pilt h\u00f5jub tekstist paremal.&lt;\/p&gt;<\/pre>\n<h1>Taustapilt<\/h1>\n<p>Taustapildi saame lisada pea-aegu k\u00f5igile HTML elementidele. Taustapildi lisamiseks kasutame <code>&lt;style&gt;<\/code> elementi ja <code>background-image<\/code> omadust. Lisame taustapildi \u00fchele tekstil\u00f5igule:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p style=\"background-image: url('pildid\/banaanid.jpg');\"&gt;Selle teksti taustapildiks on banaan.&lt;\/p&gt;<\/pre>\n<div class=\"wp-nocaption aligncenter wp-image-701\"><img class=\"aligncenter wp-image-701\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/banaan_tekst.png\" alt=\"banaan taustal\" width=\"450\" height=\"163\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/banaan_tekst.png 708w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/banaan_tekst-300x108.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/banaan_tekst-65x24.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/banaan_tekst-225x81.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/banaan_tekst-350x127.png 350w\" \/><\/div>\n<p>Taustapildi lisamisl pange t\u00e4hele, et pildi allikat \u00fcmbritsevad \u00fchekordsed jutum\u00e4rgid (t\u00fc\u00fcpiliselt klahv enterist vasakul).<\/p>\n<p>Taustapildi saame m\u00e4\u00e4rata ka kasutades stiilielementi:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;style&gt;\r\np{\r\n background-image: url('pildid\/banaanid_small.jpg');\r\n}\r\n&lt;\/style&gt;<\/pre>\n<h2>Taustapilt kogu lehele<\/h2>\n<p>Kui me soovime taustapildi lisada kogu veebilehele, siis saame pildi lisada <code>&lt;body&gt;<\/code> elemendile.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;style&gt;\r\nbody {\r\n  background-image:\u00a0url('pildid\/banaanid_small.jpg');\r\n}\r\n&lt;\/style&gt;<\/pre>\n<h2>Taustapildi omadused<\/h2>\n<p>Taustapildi kohandamiseks saame muuhulgas kasutada omadusi nagu<\/p>\n<p><code>background-repeat<\/code> &#8211; kas taustapilt hakkab lehel korduma, v\u00e4\u00e4rtused <code>repeat<\/code>, <code>repeat-x<\/code>, <code>repeat-y<\/code> ja <code>no-repeat<\/code>.<br \/>\n<code>background-attachment<\/code> &#8211; saame m\u00e4\u00e4rata kuidas k\u00e4itub pilt veebilehe kerimisel, v\u00e4\u00e4rtused <code>scroll<\/code>, <code>fixed<\/code>, <code>local<\/code>.<br \/>\n<code>background-size<\/code> &#8211; saame m\u00e4\u00e4rata taustapildi suuruse pikkus\u00fchikutes, protsentides v\u00f5i kasutada v\u00e4\u00e4rtusi nagu <code>cover<\/code> v\u00f5i <code>contain<\/code>.<br \/>\n<code>background-position<\/code> &#8211; saame m\u00e4\u00e4rata kus elemendi suhtes taustapilt asub kas koordinaatide p\u00f5hjal, protsentides v\u00f5i konstantide p\u00f5hjal.<\/p>\n<p>T\u00e4psemalt on neist CSS omadustest juttu CSS peat\u00fckis.<br \/>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/SZrK4jMw_BE?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h1>Kohanduv pilt<\/h1>\n<p>Kohanduva veebi (<em>responsive web<\/em>) jaoks pakub HTML elementi <code>&lt;picture&gt;<\/code>, mis laseb \u00fche l\u00e4htefaili asemel m\u00e4\u00e4rata mitu. Seega saame veebilehe k\u00fclastajale kuvada pilti, mis sobib k\u00f5ige paremini just tema seadmele v\u00f5i ekraanisuurusele.<\/p>\n<p>Elemendil <code>&lt;picture&gt;<\/code> on kahte t\u00fc\u00fcpi t\u00fctarelemente: <code>&lt;source&gt;<\/code> ja <code>&lt;img&gt;<\/code>.<\/p>\n<p>T\u00fctarelement <code>&lt;source&gt;<\/code> m\u00e4\u00e4rab mingisugusele seadmele\/ekraanisuurusele vastava pildifaili. Neid elemente v\u00f5ib olla mitu. <code>&lt;source&gt;<\/code> elemendil on j\u00e4rgmised atribuudid:<\/p>\n<ul>\n<li><code>srcset<\/code> \u2013 m\u00e4\u00e4rab pildifaili URL-i (kohustuslik atribuut);<\/li>\n<li><code>media<\/code> &#8211; m\u00e4\u00e4ratleb meedia\/v\u00e4ljundseadme, mille jaoks vastav pilt m\u00f5eldud on.<\/li>\n<li><code>sizes<\/code> \u2013 \u00fcks laius, \u00fcks meediap\u00e4ring laiuse kirjeldusega v\u00f5i komadega eraldatud meediap\u00e4ringute loend;<\/li>\n<li><code>type<\/code> \u2013 MIME t\u00fc\u00fcp.<\/li>\n<\/ul>\n<p>Brauser valib esimese sobiva pildifaili ning ignoreerib \u00fclej\u00e4\u00e4nuid.<\/p>\n<p>Teise t\u00fctarelemendi t\u00fc\u00fcbina on <code>&lt;img&gt;,<\/code> mis peab olema viimane (ainult \u00fcks), et tagada \u00fchilduvus brauseritega, mis ei toeta <code>&lt;picture&gt;<\/code> elementi. <code>&lt;img&gt;<\/code> elementi kasutatakse ka, kui \u00fckski <code>&lt;source&gt;<\/code> element pole sobiv.<\/p>\n<p><span class=\"nb\">NB! T\u00fctarelement <code>&lt;img&gt;<\/code> peab olema viimane!<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;picture&gt;\r\n  &lt;source media=\"(min-width: 1100px)\" srcset=\"suur_pilt.jpg\"&gt;\r\n  &lt;source media=\"(max-width: 600px)\" srcset=\"tilluke_pilt.jpg\"&gt;\r\n  &lt;img src=\"keskmine_pilt.jpg\" alt=\"ilus pilt\"&gt;\r\n&lt;\/picture&gt;<\/pre>\n<p><span class=\"nb\">NB! Meediap\u00e4ring peab olema sulgudes!<\/span><br \/>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/XgJz118ILeY?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n","protected":false},"author":1,"menu_order":14,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":25,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/176"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":22,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/176\/revisions"}],"predecessor-version":[{"id":900,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/176\/revisions\/900"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/25"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/176\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=176"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=176"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=176"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}