{"id":545,"date":"2020-04-21T19:17:30","date_gmt":"2020-04-21T19:17:30","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=545"},"modified":"2020-05-08T12:40:30","modified_gmt":"2020-05-08T12:40:30","slug":"html-alajaotused","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-alajaotused\/","title":{"rendered":"HTML alajaotused"},"content":{"raw":"Veebilehe struktuuri loomisel saame kasutada HTML keeles eksisteerivaid semantilisi elemente, millega jaotada veebileht erinevateks t\u00e4henduslikeks osadeks. N\u00e4iteks saame veebilehe osi, mis jaotavad veebilehe osadeks nagu navigatsioon, p\u00e4is, jalus, artikkel jm.\r\n\r\nM\u00f5ned kasutusel olevad semantilised elemendid:\r\n\r\n<main><\/code> - veebilehe p\u00f5hisisu\r\n<header><\/code> - veebilehe sisuosa p\u00e4ises olev info (mitte segi ajada <head> elemendiga)\r\n<footer><\/code> - veebilehe jaluses olev info\r\n<nav><\/code> - veebilehe navigatsioon\/men\u00fc\u00fc\r\n<section><\/code> - sektsioon, peat\u00fckk\r\n<article><\/code> - artikkel\r\n<aside><\/code> - \u00e4\u00e4rem\u00e4rkus\r\n<address><\/code> - kontaktinformatsioon\r\n

Lehe sisu p\u00f5hiosa<\/h1>\r\nVeebilehe sisu p\u00f5hiosa defineerimiseks v\u00f5ib kasutada elementi <main><\/code>, mille sisuks v\u00f5ivad olla artiklid, \u00e4\u00e4rem\u00e4rkused jne. P\u00f5hiosa peab sisaldama lehe unikaalset sisu, mis ei kordu lehestiku servadel ja mujal.\r\n\r\nElement <main><\/code> ei tohi olla <article><\/code>, <aside><\/code>, <footer><\/code>, <header><\/code> ja <nav><\/code> elementide t\u00fctarelemendiks.\r\n\r\nN\u00e4iteks:\r\n
<main>\r\n  <header> \u2026 <\/header>\r\n    <article>\r\n      <section> \u2026 <\/section>\r\n      <section> \u2026 <\/section>\r\n      \u2026\r\n    <\/article>\r\n    <article> \u2026 <\/article>\r\n  <footer> \u2026 <\/footer>\r\n<\/main><\/pre>\r\n
Artikkel<\/h2>\r\nArtikkel ehk element <article><\/code> sisaldab iseseisvat sisu (mida saab ka \u00fclej\u00e4\u00e4nud lehest eraldi levitada). T\u00fc\u00fcpiliselt on <article><\/code> elemendi sisuks foorumi v\u00f5i blogi postitused, uudislood v\u00f5i kommentaarid.\r\n
<article>\r\n  <h1>Kaspersky Lab piilus 2030. aastasse: inimene ei kao<\/h1>\r\n  <p>Tehnoloogia arengu praeguse tempo p\u00fcsimine viib inimkonna v\u00e4ga kiiresti uude, t\u00e4iendatud tegelikkuse, kvantarvutite, pilvehoidlate ning mitte inimeste, vaid masinate vahel peetavate infos\u00f5dade ajastusse.<\/p>\r\n<\/article><\/pre>\r\n
Sektsioon<\/h2>\r\nSektsioon jagab dokumendi sisu osadeks, n\u00e4iteks peat\u00fckkideks. Sektsioon v\u00f5ib olla n\u00e4iteks osa artiklist v\u00f5i ka vastupidi, artikkel v\u00f5ib olla osa sektsioonist.\r\n
<section>\r\n  <h2>Pealkiri<\/h2>\r\n  <p>See siin ongi sisu, mis antud sektsiooni lisatud<\/p>\r\n<\/section><\/pre>\r\n
\u00c4\u00e4rem\u00e4rkus\/t\u00e4iendav info<\/h2>\r\n\u00c4\u00e4rem\u00e4rkuste laadse t\u00e4iendava info lisamiseks mingi sisuga elemendile kasutatakse elementi <aside><\/code>. Selle elemendi sisu v\u00f5iks olla seotud \u00fcmbritseva sisuga.\r\n
<p>Tallinn oli keskajal tuntud kaubanduskeskus ning kuulus Hansa Liitu<\/p>\r\n<aside>\r\n  <h5>Hansa Liit<\/h5>\r\n  <p>Hansa Liit oli 13.\u201317. sajandil tegutsenud P\u00f5hja-Saksamaa, Skandinaaviamaade, Madalmaade ja Liivimaa linnade kaubanduslik ja poliitiline liit.<\/p>\r\n<\/aside><\/pre>\r\n<aside><\/code> elemendi sisu v\u00f5ib paigutada n\u00e4iteks artikli (element <article><\/code>) k\u00f5rvale.\r\n
P\u00e4is ja jalus<\/h2>\r\nTerve dokumendi v\u00f5i selle sektsiooni sissejuhatava informatsiooni v\u00f5i navigatsiooni jaoks kasutatakse p\u00e4ist ehk elementi <header><\/code>. N\u00e4iteks:\r\n
<section>\r\n  <header>\r\n    <h1>Esimene peat\u00fckk<\/h1>\r\n    <p>See siin on pikem jutt p\u00e4ises<\/p>\r\n  <\/header>\r\n<\/section><\/pre>\r\nTerve dokumendi v\u00f5i sektsiooni jalus defineeritakse elemendiga <footer><\/code>. Jalusesse lisatakse info teda sisaldava elemendi kohta (info autori kohta, dokumendi loomise kuup\u00e4ev jms peenes kirjas info). N\u00e4iteks:\r\n
<section>\r\n  <footer>\r\n    <p>Selles peat\u00fckis oli hulk tarka juttu!<\/p>\r\n  <\/footer>\r\n<\/section><\/pre>\r\n
Navigatsiooniblokk<\/h2>\r\nH\u00fcperlinkide kogumi ehk navigatsiooniploki defineerimiseks kasutatakse elementi <nav><\/code>. Element on kasulik n\u00e4iteks vaegn\u00e4gijatele m\u00f5eldud ekraanilugejate puhul, mis v\u00f5ivad selliselt grupeeritud linkide ettelugemise vahele j\u00e4tta. N\u00e4iteks:\r\n
<nav>\r\n  <a href=\"teine.html\">Teine<\/a>\r\n  <a href=\"kolmas.html\">Kolmas<\/a>\r\n  <a href=\"neljas.html\">Neljas<\/a>\r\n<\/nav><\/pre>","rendered":"
Veebilehe struktuuri loomisel saame kasutada HTML keeles eksisteerivaid semantilisi elemente, millega jaotada veebileht erinevateks t\u00e4henduslikeks osadeks. N\u00e4iteks saame veebilehe osi, mis jaotavad veebilehe osadeks nagu navigatsioon, p\u00e4is, jalus, artikkel jm.<\/p>\n
M\u00f5ned kasutusel olevad semantilised elemendid:<\/p>\n
<main><\/code> – veebilehe p\u00f5hisisu
\n<header><\/code> – veebilehe sisuosa p\u00e4ises olev info (mitte segi ajada <head> elemendiga)
\n<footer><\/code> – veebilehe jaluses olev info
\n<nav><\/code> – veebilehe navigatsioon\/men\u00fc\u00fc
\n<section><\/code> – sektsioon, peat\u00fckk
\n<article><\/code> – artikkel
\n<aside><\/code> – \u00e4\u00e4rem\u00e4rkus
\n<address><\/code> – kontaktinformatsioon<\/p>\n
Lehe sisu p\u00f5hiosa<\/h1>\n
Veebilehe sisu p\u00f5hiosa defineerimiseks v\u00f5ib kasutada elementi <main><\/code>, mille sisuks v\u00f5ivad olla artiklid, \u00e4\u00e4rem\u00e4rkused jne. P\u00f5hiosa peab sisaldama lehe unikaalset sisu, mis ei kordu lehestiku servadel ja mujal.<\/p>\n
Element <main><\/code> ei tohi olla <article><\/code>, <aside><\/code>, <footer><\/code>, <header><\/code> ja <nav><\/code> elementide t\u00fctarelemendiks.<\/p>\n
N\u00e4iteks:<\/p>\n
<main>\r\n  <header> \u2026 <\/header>\r\n    <article>\r\n      <section> \u2026 <\/section>\r\n      <section> \u2026 <\/section>\r\n      \u2026\r\n    <\/article>\r\n    <article> \u2026 <\/article>\r\n  <footer> \u2026 <\/footer>\r\n<\/main><\/pre>\n
Artikkel<\/h2>\n
Artikkel ehk element <article><\/code> sisaldab iseseisvat sisu (mida saab ka \u00fclej\u00e4\u00e4nud lehest eraldi levitada). T\u00fc\u00fcpiliselt on <article><\/code> elemendi sisuks foorumi v\u00f5i blogi postitused, uudislood v\u00f5i kommentaarid.<\/p>\n
<article>\r\n  <h1>Kaspersky Lab piilus 2030. aastasse: inimene ei kao<\/h1>\r\n  <p>Tehnoloogia arengu praeguse tempo p\u00fcsimine viib inimkonna v\u00e4ga kiiresti uude, t\u00e4iendatud tegelikkuse, kvantarvutite, pilvehoidlate ning mitte inimeste, vaid masinate vahel peetavate infos\u00f5dade ajastusse.<\/p>\r\n<\/article><\/pre>\n
Sektsioon<\/h2>\n
Sektsioon jagab dokumendi sisu osadeks, n\u00e4iteks peat\u00fckkideks. Sektsioon v\u00f5ib olla n\u00e4iteks osa artiklist v\u00f5i ka vastupidi, artikkel v\u00f5ib olla osa sektsioonist.<\/p>\n
<section>\r\n  <h2>Pealkiri<\/h2>\r\n  <p>See siin ongi sisu, mis antud sektsiooni lisatud<\/p>\r\n<\/section><\/pre>\n
\u00c4\u00e4rem\u00e4rkus\/t\u00e4iendav info<\/h2>\n
\u00c4\u00e4rem\u00e4rkuste laadse t\u00e4iendava info lisamiseks mingi sisuga elemendile kasutatakse elementi <aside><\/code>. Selle elemendi sisu v\u00f5iks olla seotud \u00fcmbritseva sisuga.<\/p>\n
<p>Tallinn oli keskajal tuntud kaubanduskeskus ning kuulus Hansa Liitu<\/p>\r\n<aside>\r\n  <h5>Hansa Liit<\/h5>\r\n  <p>Hansa Liit oli 13.\u201317. sajandil tegutsenud P\u00f5hja-Saksamaa, Skandinaaviamaade, Madalmaade ja Liivimaa linnade kaubanduslik ja poliitiline liit.<\/p>\r\n<\/aside><\/pre>\n
<aside><\/code> elemendi sisu v\u00f5ib paigutada n\u00e4iteks artikli (element <article><\/code>) k\u00f5rvale.<\/p>\n
P\u00e4is ja jalus<\/h2>\n
Terve dokumendi v\u00f5i selle sektsiooni sissejuhatava informatsiooni v\u00f5i navigatsiooni jaoks kasutatakse p\u00e4ist ehk elementi <header><\/code>. N\u00e4iteks:<\/p>\n
<section>\r\n  <header>\r\n    <h1>Esimene peat\u00fckk<\/h1>\r\n    <p>See siin on pikem jutt p\u00e4ises<\/p>\r\n  <\/header>\r\n<\/section><\/pre>\n
Terve dokumendi v\u00f5i sektsiooni jalus defineeritakse elemendiga <footer><\/code>. Jalusesse lisatakse info teda sisaldava elemendi kohta (info autori kohta, dokumendi loomise kuup\u00e4ev jms peenes kirjas info). N\u00e4iteks:<\/p>\n
<section>\r\n  <footer>\r\n    <p>Selles peat\u00fckis oli hulk tarka juttu!<\/p>\r\n  <\/footer>\r\n<\/section><\/pre>\n
Navigatsiooniblokk<\/h2>\n
H\u00fcperlinkide kogumi ehk navigatsiooniploki defineerimiseks kasutatakse elementi <nav><\/code>. Element on kasulik n\u00e4iteks vaegn\u00e4gijatele m\u00f5eldud ekraanilugejate puhul, mis v\u00f5ivad selliselt grupeeritud linkide ettelugemise vahele j\u00e4tta. N\u00e4iteks:<\/p>\n
<nav>\r\n  <a href=\"teine.html\">Teine<\/a>\r\n  <a href=\"kolmas.html\">Kolmas<\/a>\r\n  <a href=\"neljas.html\">Neljas<\/a>\r\n<\/nav><\/pre>\n","protected":false},"author":1,"menu_order":21,"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\/545"}],"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":10,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/545\/revisions"}],"predecessor-version":[{"id":784,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/545\/revisions\/784"}],"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\/545\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=545"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=545"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}