{"id":129,"date":"2020-03-01T11:49:43","date_gmt":"2020-03-01T11:49:43","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=129"},"modified":"2020-10-28T08:26:35","modified_gmt":"2020-10-28T08:26:35","slug":"html-pais","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-pais\/","title":{"rendered":"HTML p\u00e4is"},"content":{"raw":"HTML dokumendi p\u00e4ises (element <head><\/code>) on elemendid, mida veebilehe vaataja reeglina otseselt ei n\u00e4e. Nende abil m\u00e4\u00e4ratakse siiski mitmeid veebilehe v\u00e4ljan\u00e4gemist m\u00e4\u00e4ravaid parameetreid nagu veebilehe pealkiri, tekstikodeering, stiilid, skriptid jm.\r\n\r\n<head><\/code> element paigutatakse lehel <html><\/code> elemendi ja <body><\/code> elemendi vahele.\r\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n...\r\n<\/head>\r\n<body>\r\n...\r\n<\/body>\r\n<\/html><\/pre>\r\n
Veebilehe pealkiri<\/h1>\r\nVeebilehe pealkiri defineeritakse HTML dokumendi p\u00e4ises elemendiga <title><\/code>. See pealkiri paigutatakse veebilehitseja tiitliribale, seda kasutatakse veebilehe salvestamisel lemmikute v\u00f5i j\u00e4rjehoidjate (favorites v\u00f5i bookmarks) hulka.\r\n
<title>Rocca al Mare Kool<\/title><\/pre>\r\nSelle elemendi toime avaldub veebilehitseja tiitliribal j\u00e4rgmiselt:\r\n\r\n[caption id=\"attachment_143\" align=\"aligncenter\" width=\"430\"]\"veebilehe Veebilehe pealkiri veebilehitseja tiitliribal.[\/caption]\r\n\r\nNB! Tegemist on veebilehe p\u00e4ise kohustusliku elemendiga!<\/span>\r\n
Kujunduse lisamine<\/h1>\r\nVeebilehtede kujundus lisatakse t\u00e4nap\u00e4eval k\u00fcll eelk\u00f5ige v\u00e4liseid CSS stiililehti kasutades, kuid vajadusel saab CSS-stiili kirjutada ka otse HTML-koodi sisse, selleks kasutatakse elementi <style><\/code>.\r\n
<style>\r\n  body {background-color: lightblue;}\r\n  p {color:red;}\r\n<\/style><\/pre>\r\n
Teiste ressursside linkimine<\/h1>\r\nV\u00e4liste ressursside (CSS stiililehed, favicon jms) sidumiseks veebilehega kasutatakse elementi <link><\/code>. Tegemist on t\u00fchja elemendiga ehk tal puudub l\u00f5pum\u00e4rgend.\r\n\r\n<link><\/code> elemente v\u00f5ib veebilehe p\u00e4ises olla ka mitu. Elemendiga koos saab kasutada j\u00e4rgnevaid atribuute:\r\n
    \r\n \t
  • rel<\/code> \u2013 kohustuslik atribuut, mis m\u00e4\u00e4rab antud veebilehe ja v\u00e4lise ressursi vahelise seose. V\u00f5imalikud v\u00e4\u00e4rtused on n\u00e4iteks stylesheet, alternate, author\u00a0 jt.<\/li>\r\n \t
  • href<\/code> \u2212 lingitava materjali URL (aadress).<\/li>\r\n \t
  • media<\/code> \u2013 meediap\u00e4ring, millise seadmega kuvamiseks on antud ressurss m\u00f5eldud. V\u00f5imalikud v\u00e4\u00e4rtused on n\u00e4iteks all, print, screen, tv jne.<\/li>\r\n<\/ul>\r\n
    Stiililehe linkimine<\/h3>\r\nLisame veebilehele stiililehe nimega stiilileht.css:\r\n
    <link rel=\"stylesheet\" href=\"stiililehet.css\u201c>\r\n<\/pre>\r\n
    Favicon<\/h3>\r\nFavicon on pisike ikoon, mida kasutatakse veebilehe t\u00e4histamiseks j\u00e4rjehoidjate (bookmarks<\/em>) ja lemmikute (favorites<\/em>) nimekirjas. Nimetus tulenebki ingliskeelsest v\u00e4ljendist favorites icon<\/em>.\r\n\r\n[caption id=\"attachment_143\" align=\"aligncenter\" width=\"430\"]\"veebilehe Favicon Rocca al Mare Kooli veebilehel (R-t\u00e4ht kollasel taustal).[\/caption]\r\n\r\nFaviconi lisamiseks veebilehele HTML-koodi kasutades tuleb dokumendi p\u00e4isesse lisada element <link><\/code> (sarnaselt css faili linkimisega). N\u00e4iteks k\u00f5ige tavap\u00e4rasema .ico faili linkimiseks:\r\n
    <link rel=\"icon\" href=\"ico_faili_URL\"><\/pre>\r\nKasutades jpg, png v\u00f5i gif faili, tuleks m\u00e4\u00e4rata ka failit\u00fc\u00fcp. N\u00e4iteks:\r\n
    <link rel=\"icon\" type=\"image\/jpg\" href=\"jpg_faili_URL\">\r\n<link rel=\"icon\" type=\"image\/png\" href=\"png_faili_URL\">\r\n<link rel=\"icon\" type=\"image\/gif\" href=\"gif_faili_URL\"><\/pre>\r\n