{"id":127,"date":"2020-03-01T11:24:24","date_gmt":"2020-03-01T11:24:24","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=127"},"modified":"2020-05-11T20:22:09","modified_gmt":"2020-05-11T20:22:09","slug":"html-elemendid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-elemendid\/","title":{"rendered":"HTML elemendid"},"content":{"raw":"HTML dokument koosneb elementidest. Elementidel on reeglina algusm\u00e4rgend<\/strong> (tag<\/em>) ja l\u00f5pum\u00e4rgend<\/strong>, millede vahele j\u00e4\u00e4b elemendi sisu. L\u00f5pum\u00e4rgendi tunnuseks on kaldkriips elemendi nime ees. M\u00e4rgendeid endid \u00fcmbritsevad \"v\u00e4iksem kui\" ja \"suurem kui\" m\u00e4rgid. Tihti kutsutakse neid ka nurksulgudeks v\u00f5i eesti keeles ka noolsulgudeks (angle brackets<\/em>).\r\n\r\n<elemendinimi> Siia kirjutatakse elemendi sisu <\/elemendinimi><\/code>\r\n\r\nHTML element <\/strong>ongi k\u00f5ik algusm\u00e4rgendist kuni l\u00f5pum\u00e4rgendini. Elemendi sisu on info, mis j\u00e4\u00e4b m\u00e4rgendite vahele.\r\n\r\nAllolevas tabelis on toodud m\u00f5ned n\u00e4ited elementidest koos m\u00e4rgenditega:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Element<\/strong><\/td>\r\nAlgusm\u00e4rgend<\/strong><\/td>\r\nElemendi sisu<\/strong><\/td>\r\nL\u00f5pum\u00e4rgend<\/strong><\/td>\r\n<\/tr>\r\n
Pealkiri<\/td>\r\n<h1><\/code><\/td>\r\nEsimese taseme pealkiri<\/td>\r\n<\/h1><\/code><\/td>\r\n<\/tr>\r\n
Pealkiri<\/td>\r\n<h2><\/code><\/td>\r\nTeise taseme pealkiri<\/td>\r\n<\/h2><\/code><\/td>\r\n<\/tr>\r\n
Tekstil\u00f5ik<\/td>\r\n<p><\/code><\/td>\r\nPikem tekstil\u00f5ik<\/td>\r\n<\/p><\/code><\/td>\r\n<\/tr>\r\n
Reavahetus<\/td>\r\n<br><\/code><\/td>\r\n<\/td>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nOn olemas ka ilma sisuta t\u00fchjad elemendid (empty elements v\u00f5i void elements), millel pole eraldi l\u00f5pum\u00e4rgendit! \u00dclevalolevas tabelis on selliseks n\u00e4iteks reavahetuse element <br><\/code>.\r\n

Pesastatud elemendid<\/code><\/h2>\r\nElemendid v\u00f5ivad \u00fcksteisele j\u00e4rgneda kuid v\u00f5ivad olla lisatud ka \u00fcksteise sisse ehk pesastatud (nested), n\u00e4iteks:\r\n\r\n<esimene_element> <teine_element> Sisu <\/teine_element> <\/esimene_element><\/code>\r\n\r\nTegelikult koosnevad k\u00f5ik HTML dokumendid pesastatud elementidest. N\u00e4iteks see lihtne HTML dokument:\r\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h1>Tere, maailm!<\/h1>\r\n<p>See on tekstil\u00f5ik.<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\r\n\u00dclevalolevas n\u00e4ites piiritleb <html><\/code> elment kogu dokumendi. Tal on algusm\u00e4rgend <html><\/code> ja l\u00f5pum\u00e4rgend <\/html><\/code>.\r\n\r\n<html><\/code> elemendi sees on omakorda <body><\/code> element. <body><\/code> element piiritleb dokumendi keha (kasutajale n\u00e4htava osa).\r\n\r\n<body><\/code> elemendi sees on aga omakorda veel kaks elementi: <h1><\/code> ja <p><\/code>.\r\n\r\n<h1><\/code> element t\u00e4histab esimese taseme pealkirja ja <p><\/code> element tekstil\u00f5iku.\r\n
L\u00f5pum\u00e4rgend<\/h2>\r\nHTML koodi kirjutamisel tuleb meeles pidada, et elemendid peavad olema ka korrektselt suletud l\u00f5pum\u00e4rgendiga.\r\n\r\n<h1><\/strong>See on pealkiri<\/h1><\/strong>\r\n\r\n<p><\/strong>See on l\u00f5ik!<\/p><\/strong>\r\n\r\nM\u00f5ned elemendid v\u00f5ib j\u00e4tta ka sulgemata,\u00a0sest j\u00e4rgmist sarnast elementi ei saa nagunii alustada ilma eelnevat sulgemata. Selliseid elemente nimetatakse isesulguvateks (selfclosing<\/em>).\u00a0 Siiski v\u00f5iks koodi selguse ja vigadest hoidumise huvides need k\u00f5ik sulgeda.\r\n
T\u00fchjad elemendid<\/h2>\r\nIlma sisuta HTML-elemente kutsutakse t\u00fchjadeks elementideks.\r\n\r\nN\u00e4iteks on t\u00fchi element reavahetuse element <br><\/code>, millel puudub l\u00f5pum\u00e4rgend.\r\n
<p>See on tekstil\u00f5ik, <br>mille keskel on reavahetus.<\/p><\/pre>\r\n