{"id":640,"date":"2020-05-03T20:28:15","date_gmt":"2020-05-03T20:28:15","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=640"},"modified":"2020-05-12T08:36:58","modified_gmt":"2020-05-12T08:36:58","slug":"html-varvid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-varvid\/","title":{"rendered":"HTML v\u00e4rvid"},"content":{"raw":"HTML keeles saame v\u00e4rve m\u00e4\u00e4rata mitmel erineval moel:\r\n<ul>\r\n \t<li>konstantidena \u2013 nimetustega (red, blue, green, coral, cyan jne);<\/li>\r\n \t<li>HEX v\u00e4\u00e4rtustena \u2013 kuueteistk\u00fcmnends\u00fcsteemi (<em>hexadecimal<\/em>) arvudena;<\/li>\r\n \t<li>RGB ja RGBA v\u00e4\u00e4rtustena \u2013 RGB v\u00e4rvimudeli j\u00e4rgi;<\/li>\r\n \t<li>HSL ja HSLA v\u00e4\u00e4rtustena \u2013 HSL v\u00e4rvimudeli j\u00e4rgi.<\/li>\r\n<\/ul>\r\nN\u00e4iteks<strong>:<\/strong>\r\n<table style=\"border-collapse: collapse; width: 100%; height: 62px;\" border=\"0\">\r\n<tbody>\r\n<tr style=\"height: 13px;\">\r\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\"><\/th>\r\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\">konstant<\/th>\r\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\">HEX<\/th>\r\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\">RGB<\/th>\r\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\">HSL<\/th>\r\n<\/tr>\r\n<tr style=\"height: 13px;\">\r\n<td style=\"width: 20%; height: 10px;\">must<\/td>\r\n<td style=\"width: 20%; height: 10px;\">black<\/td>\r\n<td style=\"width: 20%; height: 10px;\">#000000<\/td>\r\n<td style=\"width: 20%; height: 10px;\">rgb(0,0,0)<\/td>\r\n<td style=\"width: 20%; height: 10px;\">hsl(0,0%,0%)<\/td>\r\n<\/tr>\r\n<tr style=\"height: 13px;\">\r\n<td style=\"width: 20%; height: 13px;\">valge<\/td>\r\n<td style=\"width: 20%; height: 13px;\">white<\/td>\r\n<td style=\"width: 20%; height: 13px;\">#FFFFFF<\/td>\r\n<td style=\"width: 20%; height: 13px;\">rgb(255,255,255)<\/td>\r\n<td style=\"width: 20%; height: 13px;\">hsl(0,0%,100%)<\/td>\r\n<\/tr>\r\n<tr style=\"height: 13px;\">\r\n<td style=\"width: 20%; height: 13px;\">punane<\/td>\r\n<td style=\"width: 20%; height: 13px;\">red<\/td>\r\n<td style=\"width: 20%; height: 13px;\">#FF0000<\/td>\r\n<td style=\"width: 20%; height: 13px;\">rgb(255,0,0)<\/td>\r\n<td style=\"width: 20%; height: 13px;\">hsl(0,100%,50%)<\/td>\r\n<\/tr>\r\n<tr style=\"height: 13px;\">\r\n<td style=\"width: 20%; height: 13px;\">hall<\/td>\r\n<td style=\"width: 20%; height: 13px;\">gray<\/td>\r\n<td style=\"width: 20%; height: 13px;\">#808080<\/td>\r\n<td style=\"width: 20%; height: 13px;\">rgb(128,128,128)<\/td>\r\n<td style=\"width: 20%; height: 13px;\">hsl(0,0%,50%)<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nKokku on HTML keeles v\u00f5imalik kasutada 140 erinevat eelm\u00e4\u00e4ratud v\u00e4rvinimetust. T\u00e4ieliku nimekirja v\u00f5id leida <a href=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp\" target=\"_blank\" rel=\"noopener noreferrer\">siit<\/a>.\r\n\r\nVeebilehtedel leiavad tihti kasutust k\u00f5ik eelmainitud v\u00e4rvi m\u00e4\u00e4ramise liigid kuid enamasti kasutatakse HEX-v\u00e4\u00e4rtuseid. N\u00e4idetes leiavad kasutust enamasti v\u00e4rvi nimetused v\u00f5i HEX-v\u00e4\u00e4rtused.\r\n<h2>Taustav\u00e4rv (<em>background-color<\/em>)<\/h2>\r\nElemendi taustav\u00e4rvi saame muuta <code>&lt;style&gt;<\/code> atribuudiga ja omadusega <code>background-color<\/code>. Muudame n\u00e4iteks kogu kehaelemendi tausta taevasiniseks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;body style=\"background-color:DeepSkyBlue;\"&gt;\r\n  &lt;h1&gt;Pealkiri&lt;\/h1&gt;\r\n  &lt;p&gt;See on tekstil\u00f5ik.&lt;\/p&gt;\r\n&lt;\/body&gt;<\/pre>\r\nV\u00f5i muudame tekstil\u00f5igu tausta oran\u017eiks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;body&gt;\r\n  &lt;p style=\"background-color:orange;\"&gt;See on tekstil\u00f5ik.&lt;\/p&gt;\r\n&lt;\/body&gt;<\/pre>\r\n<p style=\"background-color: orange;\">See on tekstil\u00f5ik.<\/p>\r\n\r\n<h2>Teksti v\u00e4rv (<em>color<\/em>)<\/h2>\r\nTeksti v\u00e4rvi muutmiseks saame kasutada omadus <code>color<\/code>. Allolevas n\u00e4iteks kasutan pealkirja v\u00e4rvi muutmiseks v\u00e4rvinimetust ja tekstil\u00f5igu v\u00e4rvi muutmiseks HEX-v\u00e4\u00e4rtust.\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;h1 style=\"color:blue;\"&gt;See pealkiri on sinine&lt;\/h1&gt;\r\n&lt;p style=\"color:#FF0000;\"&gt;See tekstil\u00f5ik on punane.&lt;\/p&gt;<\/pre>\r\n<h1 style=\"color: blue;\">See pealkiri on sinine<\/h1>\r\n<p style=\"color: #ff0000;\">See tekstil\u00f5ik on punane.<\/p>\r\n\r\n<h2>Raami v\u00e4rv (<em>border color<\/em>)<\/h2>\r\nKui me oleme elemendile lisanud raami, saame muuta me ka raami v\u00e4rvi. Lisame n\u00e4iteks <code>style<\/code> atribuuti ja <code>border<\/code> omadust kasutades tekstil\u00f5igule 2px suuruse raami ja v\u00e4rvime selle lillaks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p style=\"border:2px solid violet\"&gt;See on lilla raamiga tekst&lt;\/p&gt;<\/pre>\r\n<p style=\"border: 2px solid violet;\">See on lilla raamiga tekst<\/p>\r\n\r\n<h3>Enesekontroll (1 k\u00fcsimus)<\/h3>\r\n[h5p id=\"13\"]\r\n\r\n<iframe src=\"https:\/\/www.youtube.com\/embed\/MdGJARv8fVY?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>","rendered":"<p>HTML keeles saame v\u00e4rve m\u00e4\u00e4rata mitmel erineval moel:<\/p>\n<ul>\n<li>konstantidena \u2013 nimetustega (red, blue, green, coral, cyan jne);<\/li>\n<li>HEX v\u00e4\u00e4rtustena \u2013 kuueteistk\u00fcmnends\u00fcsteemi (<em>hexadecimal<\/em>) arvudena;<\/li>\n<li>RGB ja RGBA v\u00e4\u00e4rtustena \u2013 RGB v\u00e4rvimudeli j\u00e4rgi;<\/li>\n<li>HSL ja HSLA v\u00e4\u00e4rtustena \u2013 HSL v\u00e4rvimudeli j\u00e4rgi.<\/li>\n<\/ul>\n<p>N\u00e4iteks<strong>:<\/strong><\/p>\n<table style=\"border-collapse: collapse; width: 100%; height: 62px;\">\n<tbody>\n<tr style=\"height: 13px;\">\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\"><\/th>\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\">konstant<\/th>\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\">HEX<\/th>\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\">RGB<\/th>\n<th class=\"shaded\" style=\"width: 20%; height: 13px;\">HSL<\/th>\n<\/tr>\n<tr style=\"height: 13px;\">\n<td style=\"width: 20%; height: 10px;\">must<\/td>\n<td style=\"width: 20%; height: 10px;\">black<\/td>\n<td style=\"width: 20%; height: 10px;\">#000000<\/td>\n<td style=\"width: 20%; height: 10px;\">rgb(0,0,0)<\/td>\n<td style=\"width: 20%; height: 10px;\">hsl(0,0%,0%)<\/td>\n<\/tr>\n<tr style=\"height: 13px;\">\n<td style=\"width: 20%; height: 13px;\">valge<\/td>\n<td style=\"width: 20%; height: 13px;\">white<\/td>\n<td style=\"width: 20%; height: 13px;\">#FFFFFF<\/td>\n<td style=\"width: 20%; height: 13px;\">rgb(255,255,255)<\/td>\n<td style=\"width: 20%; height: 13px;\">hsl(0,0%,100%)<\/td>\n<\/tr>\n<tr style=\"height: 13px;\">\n<td style=\"width: 20%; height: 13px;\">punane<\/td>\n<td style=\"width: 20%; height: 13px;\">red<\/td>\n<td style=\"width: 20%; height: 13px;\">#FF0000<\/td>\n<td style=\"width: 20%; height: 13px;\">rgb(255,0,0)<\/td>\n<td style=\"width: 20%; height: 13px;\">hsl(0,100%,50%)<\/td>\n<\/tr>\n<tr style=\"height: 13px;\">\n<td style=\"width: 20%; height: 13px;\">hall<\/td>\n<td style=\"width: 20%; height: 13px;\">gray<\/td>\n<td style=\"width: 20%; height: 13px;\">#808080<\/td>\n<td style=\"width: 20%; height: 13px;\">rgb(128,128,128)<\/td>\n<td style=\"width: 20%; height: 13px;\">hsl(0,0%,50%)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Kokku on HTML keeles v\u00f5imalik kasutada 140 erinevat eelm\u00e4\u00e4ratud v\u00e4rvinimetust. T\u00e4ieliku nimekirja v\u00f5id leida <a href=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp\" target=\"_blank\" rel=\"noopener noreferrer\">siit<\/a>.<\/p>\n<p>Veebilehtedel leiavad tihti kasutust k\u00f5ik eelmainitud v\u00e4rvi m\u00e4\u00e4ramise liigid kuid enamasti kasutatakse HEX-v\u00e4\u00e4rtuseid. N\u00e4idetes leiavad kasutust enamasti v\u00e4rvi nimetused v\u00f5i HEX-v\u00e4\u00e4rtused.<\/p>\n<h2>Taustav\u00e4rv (<em>background-color<\/em>)<\/h2>\n<p>Elemendi taustav\u00e4rvi saame muuta <code>&lt;style&gt;<\/code> atribuudiga ja omadusega <code>background-color<\/code>. Muudame n\u00e4iteks kogu kehaelemendi tausta taevasiniseks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;body style=\"background-color:DeepSkyBlue;\"&gt;\r\n  &lt;h1&gt;Pealkiri&lt;\/h1&gt;\r\n  &lt;p&gt;See on tekstil\u00f5ik.&lt;\/p&gt;\r\n&lt;\/body&gt;<\/pre>\n<p>V\u00f5i muudame tekstil\u00f5igu tausta oran\u017eiks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;body&gt;\r\n  &lt;p style=\"background-color:orange;\"&gt;See on tekstil\u00f5ik.&lt;\/p&gt;\r\n&lt;\/body&gt;<\/pre>\n<p style=\"background-color: orange;\">See on tekstil\u00f5ik.<\/p>\n<h2>Teksti v\u00e4rv (<em>color<\/em>)<\/h2>\n<p>Teksti v\u00e4rvi muutmiseks saame kasutada omadus <code>color<\/code>. Allolevas n\u00e4iteks kasutan pealkirja v\u00e4rvi muutmiseks v\u00e4rvinimetust ja tekstil\u00f5igu v\u00e4rvi muutmiseks HEX-v\u00e4\u00e4rtust.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;h1 style=\"color:blue;\"&gt;See pealkiri on sinine&lt;\/h1&gt;\r\n&lt;p style=\"color:#FF0000;\"&gt;See tekstil\u00f5ik on punane.&lt;\/p&gt;<\/pre>\n<h1 style=\"color: blue;\">See pealkiri on sinine<\/h1>\n<p style=\"color: #ff0000;\">See tekstil\u00f5ik on punane.<\/p>\n<h2>Raami v\u00e4rv (<em>border color<\/em>)<\/h2>\n<p>Kui me oleme elemendile lisanud raami, saame muuta me ka raami v\u00e4rvi. Lisame n\u00e4iteks <code>style<\/code> atribuuti ja <code>border<\/code> omadust kasutades tekstil\u00f5igule 2px suuruse raami ja v\u00e4rvime selle lillaks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p style=\"border:2px solid violet\"&gt;See on lilla raamiga tekst&lt;\/p&gt;<\/pre>\n<p style=\"border: 2px solid violet;\">See on lilla raamiga tekst<\/p>\n<h3>Enesekontroll (1 k\u00fcsimus)<\/h3>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-13\" class=\"h5p-iframe\" data-content-id=\"13\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"HTML v\u00e4rvid 1\"><\/iframe><\/div>\n<p><iframe src=\"https:\/\/www.youtube.com\/embed\/MdGJARv8fVY?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"author":1,"menu_order":11,"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\/640"}],"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":16,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/640\/revisions"}],"predecessor-version":[{"id":849,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/640\/revisions\/849"}],"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\/640\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=640"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=640"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=640"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}