{"id":724,"date":"2020-05-05T20:18:23","date_gmt":"2020-05-05T20:18:23","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=724"},"modified":"2020-05-12T12:29:01","modified_gmt":"2020-05-12T12:29:01","slug":"html-ploki-ja-rea-elemendid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-ploki-ja-rea-elemendid\/","title":{"rendered":"HTML ploki- ja rea-elemendid"},"content":{"raw":"

Plokielemendid<\/h1>\r\nOsa elemente HTML keeles on blokielemendid (block<\/em>), mis t\u00e4hendab, et nad algavad alati uuelt realt, h\u00f5ivavad veebilehel kogu rea ja ei luba teisi elemente enda k\u00f5rvale.\r\n\r\nPlokielementideks on n\u00e4iteks pealkirjad (<h1><\/code>...<h6><\/code>), tekstil\u00f5igud <p><\/code>, loendid <ol><\/code> ja <ul><\/code>, tabelid <table><\/code>, alajaotused <div><\/code> jt.\r\n\r\nPlokielemente ei kirjutata reaelementide sisse!\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Plokielemendid<\/strong><\/td>\r\n<\/tr>\r\n
<address>\r\n<\/code>Kontaktinformatsioon<\/td>\r\n<article><\/code>\r\nArtikli sisu<\/td>\r\n<aside>\r\n<\/code>\u00c4\u00e4rem\u00e4rkus<\/td>\r\n<blockquote>\r\n<\/code>Pikk tsitaat<\/td>\r\n<canvas>\r\n<\/code>\"L\u00f5uend\"<\/td>\r\n<\/tr>\r\n
<dd>\r\n<\/code>Kirjeldusloendi kirjeldus<\/td>\r\n<div>\r\n<\/code>Plokk-konteiner<\/td>\r\n<dl>\r\n<\/code>Loendielement<\/td>\r\n<dt>\r\n<\/code>Kirjeldusloendi elment<\/td>\r\n<fieldset>\r\n<\/code>Vormi elementide koondamine<\/td>\r\n<\/tr>\r\n
<figcation>\r\n<\/code>Pildile pealdise lisamine<\/td>\r\n<figure>\r\n<\/code>Meediaelementide koondamine<\/td>\r\n<footer>\r\n<\/code>Jalus<\/td>\r\n<form>\r\n<\/code>Vorm<\/td>\r\n<h1><\/code>, <h2><\/code>, <h3><\/code>, <h4><\/code>, <h5><\/code>, <h6>\r\n<\/code>Pealkirjad<\/td>\r\n<\/tr>\r\n
<header>\r\n<\/code>P\u00e4is<\/td>\r\n<hr>\r\n<\/code>Horisontaaljoon<\/td>\r\n<li>\r\n<\/code>Loendi element<\/td>\r\n<main>\r\n<\/code>Lehe p\u00f5hiosa<\/td>\r\n<nav>\r\n<\/code>Navigatsiooniplokk<\/td>\r\n<\/tr>\r\n
<noscript>\r\n<\/code>Teavitus skripti kasutamisest<\/td>\r\n<ol>\r\n<\/code>Nummerdatud loend<\/td>\r\n<p>\r\n<\/code>Tekstil\u00f5ik<\/td>\r\n<pre>\r\n<\/code>Eelnevalt vormindatud tekst<\/td>\r\n<section>\r\n<\/code>Sektsioon<\/td>\r\n<\/tr>\r\n
<table>\r\n<\/code>Tabel<\/td>\r\n<tfoot>\r\n<\/code>Tabeli p\u00e4is<\/td>\r\n<tfoot>\r\n<\/code>Tabeli jalus<\/td>\r\n<ul>\r\n<\/code>T\u00e4pploend<\/td>\r\n<video>\r\n<\/code>Video<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Rea-elemendid<\/h1>\r\nTeine osa HTML elemente on j\u00e4llegi rea-elemendid (inline<\/em>). Rea-elemendid ei alga uuelt realt ja nad v\u00f5tavad enda alla nii palju ruumi kui parasjagu vajalik.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Rea-elemendid<\/strong><\/td>\r\n<\/tr>\r\n
<a><\/code>\r\nH\u00fcperlink<\/td>\r\n<abbr><\/code>\r\nL\u00fchend<\/td>\r\n<b><\/code>\r\nPaks kiri<\/td>\r\n<bdo><\/code>\r\nTeksti suund<\/td>\r\n<br>\r\n<\/code>Reavahetus<\/td>\r\n<\/tr>\r\n
<button>\r\n<\/code>Nupp<\/td>\r\n<cite>\r\n<\/code>Teose pealkiri<\/td>\r\n<code>\r\n<\/code>Koodil\u00f5ik<\/td>\r\n<dfn>\r\n<\/code>Definitsioon<\/td>\r\n<em>\r\n<\/code>R\u00f5hutatud kiri<\/td>\r\n<\/tr>\r\n
<i>\r\n<\/code>Kaldkirjas kiri<\/td>\r\n<img>\r\n<\/code>Pilt<\/td>\r\n<input>\r\n<\/code>Sisend<\/td>\r\n<kbd>\r\n<\/code>Klaviatuurik\u00e4sklus<\/td>\r\n<label>\r\n<\/code>Silt<\/td>\r\n<\/tr>\r\n
<map>\r\n<\/code>Interaktiivne pilt<\/td>\r\n<object>\r\n<\/code>Objekt<\/td>\r\n<output>\r\n<\/code>V\u00e4ljund<\/td>\r\n<q>\r\n<\/code>Tsitaat<\/td>\r\n<samp>\r\n<\/code>Koodin\u00e4ite stiil<\/td>\r\n<\/tr>\r\n
<script>\r\n<\/code>Programmikood<\/td>\r\n<select>\r\n<\/code>Rippmen\u00fc\u00fc<\/td>\r\n<small>\r\n<\/code>V\u00e4ike tekst<\/td>\r\n<span>\r\n<\/code>Reasisene konteiner<\/td>\r\n<strong>\r\n<\/code>Oluline tekst<\/td>\r\n<\/tr>\r\n
<sub>\r\n<\/code>Allindeks tekst<\/td>\r\n<sup>\r\n<\/code>\u00dclaindeks tekst<\/td>\r\n<textarea>\r\n<\/code>Tekstisisestus kast<\/td>\r\n<var><\/code>\r\nMuutuja<\/td>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Konteinerid <div><\/code> ja <span><\/code><\/h1>\r\nKeerulisemas HTML koodis leiavad tihti kasutust ka <div><\/code> ja <span><\/code> elemendid. Element <div><\/code> on plokielement ja teda kasutatakse enamasti teiste elementide grupeerimiseks. N\u00e4iteks saame seda elementi kasutades stiliseerida korraga mitut tema sees asuvat elementi.\r\n
<div style=\"background-color:#fff700;padding:20px;\">\r\n  <h1>P\u00f5hiv\u00e4\u00e4rtused<\/h1>\r\n  <p>Meile olulisi m\u00e4rks\u00f5nu ja p\u00f5him\u00f5tteid lugedes joonistuvad selgelt v\u00e4lja kolm l\u00e4bivat p\u00f5hiv\u00e4\u00e4rtust. Need on \u00d5NNELIKKUS, EETILISUS ja VAIMSUS.\r\nNeed kolm on v\u00e4\u00e4rtuseks k\u00f5iges, mida me teeme ja mille poole me p\u00fc\u00fcdleme. RaM Kooli pedagoogiline kontseptsioon on suunatud sellele, et kogu koolipere, eriti aga iga laps, oleks praegu ja tulevikus:<\/p>\r\n  <h2>\u00d5NNELIK<\/h2>\r\n  <p>Siia kuuluvad m\u00e4rks\u00f5nad tervis, loovus, v\u00f5rdsus, individuaalsust arvestav kohtlemine, lapses\u00f5bralikkus, iseseisvus, ettev\u00f5tlikkus, tasakaalukus, vabadus, ennast armastav eluhoiak.<\/p>\r\n<\/div><\/pre>\r\n\"div\r\n\r\nElement <span><\/code> on aga reasisene element ning enamasti kasutatakse seda tekstil\u00f5igus m\u00f5ne osa stiliseerimiseks:\r\n
<p>Mulle maitsevad <span style=\"background-color:yellow\">banaanid<\/span> ja <span style=\"color:red;\">\u00f5unad<\/span>.<\/p><\/pre>\r\n\"span\r\n\r\nLisaks style<\/code> atribuudile lisatakse <div><\/code> ja <span><\/code> elemendile tihti ka class<\/code> v\u00f5i id<\/code> atribuut, et meil oleks v\u00f5imalik neid elemente ka stiililehe kaudu stiliseerida.\r\n
Enesekontroll (1 k\u00fcsimus)<\/h3>\r\n[h5p id=\"21\"]\r\n