{"id":270,"date":"2020-03-06T22:39:57","date_gmt":"2020-03-06T22:39:57","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=270"},"modified":"2020-05-18T14:40:45","modified_gmt":"2020-05-18T14:40:45","slug":"html-lihtsad-naited","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-lihtsad-naited\/","title":{"rendered":"HTML lihtsad n\u00e4ited"},"content":{"raw":"Selles peat\u00fckis on toodud v\u00e4lja m\u00f5ned lihtsamad n\u00e4ited veebilehtedel enim kasutust leidvatest elementidest. \u00c4rge muretsege kui peat\u00fckis on juttu elementidest ja m\u00e4rgenditest, milest te veel midagi ei tea. L\u00e4hemalt on k\u00f5igist elementidest juttu j\u00e4rgnevates peat\u00fckkides.\r\n

HTML dokument<\/h1>\r\nK\u00f5ik HTML dokumendid peavad algama deklaratsiooniga. HTML5-e puhul n\u00e4eb deklaratsioon v\u00e4lja j\u00e4rgnev: <!DOCTYPE html><\/code>.\r\n\r\nHTML dokument ise algab m\u00e4rgendiga <html><\/code> l\u00f5ppeb m\u00e4rgendiga <\/html><\/code>.\r\n\r\nHTML dokumendi kasutajale n\u00e4htav osa j\u00e4\u00e4b m\u00e4rgendite <body><\/code> ja <\/body><\/code> vahele.\r\n\r\nN\u00e4ide:\r\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h1>Esimene pealkiri<\/h1>\r\n<p>Esimene l\u00f5ik.<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\r\n
Pealkirjad<\/h1>\r\nPealkirjad defineeritakse HTML-keeles m\u00e4rgenditega <h1><\/code> kuni <h6><\/code>.\r\n\r\n<h1><\/code> on seejuures k\u00f5ige t\u00e4htsam pealkiri ning <h6><\/code> k\u00f5ige v\u00e4hemt\u00e4htsam pealkiri.\r\n\r\nN\u00e4ide:\r\n
<h1>See on esimese taseme pealkiri<\/h1>\r\n<h2>See on teise taseme pealkiri<\/h2>\r\n<h3>See on kolmanda taseme pealkiri<\/h3><\/pre>\r\n
L\u00f5igud<\/h1>\r\nL\u00f5igud defineeritakse m\u00e4rgendiga <p><\/code>.\r\n\r\nN\u00e4ide:\r\n
<p>Mina olen esimene l\u00f5ik.<\/p>\r\n<p>Mina olen teine l\u00f5ik.<\/p><\/pre>\r\n
Lingid<\/h1>\r\nLinke defineeritakse HTML-keeles m\u00e4rgendiga <a><\/code> (anchor<\/em>).\r\n\r\nLingi sihtkoht m\u00e4\u00e4ratakse atribuudiga href<\/code> (hypertext reference<\/em>).\r\n\r\nAtribuute kasutatakse elemendi kohta lisateabe andmiseks.\r\n\r\nN\u00e4ide:\r\n
<a href=\"https:\/\/ramkool.edu.ee\">Rocca al Mare Kool<\/a><\/pre>\r\n
Pildid<\/h1>\r\nPilte defineeritakse m\u00e4rgendiga <img><\/code>.\r\n\r\nAtribuutidena on n\u00e4ites kasutusel src<\/code>, alt<\/code>, width<\/code> ja height<\/code>.\r\n\r\nN\u00e4ide:\r\n
<img\u00a0src=\"banaan.jpg\"\u00a0alt=\"Pilt banaanist\"\u00a0width=\"100\"\u00a0height=\"50\"><\/pre>\r\n
Nupud<\/h1>\r\nNuppude puhul kasutatakse m\u00e4rgendit <button><\/code>.\r\n\r\nN\u00e4ide:\r\n
<button>*Kliki mind<\/button><\/pre>\r\n
Loendid<\/h1>\r\nLoendite defineerimiseks kasutatakse nummerdatud loendi puhul m\u00e4rgendit <ol><\/code> (ordered list) ja t\u00e4pploendi puhul m\u00e4rgendit <ul><\/code> (unordered list). Loendi elemente defineeritakse m\u00e4rgenditega <li><\/code>.\r\n\r\nN\u00e4ide:\r\n
<ul>\r\n  <li>Banaan<\/li>\r\n  <li>\u00d5un<\/li>\r\n  <li>Pirn<\/li>\r\n<\/ul>\r\n\r\n<ol>\r\n  <li>Kartul<\/li>\r\n  <li>Peet<\/li>\r\n  <li>Kaalikas<\/li>\r\n<\/ol><\/pre>\r\n
Enesekontroll (1 \u00fclesanne)<\/h3>\r\n[h5p id=\"2\"]\r\n\r\n