HTML5 – Sisu loomine (Ülesanne 3)

Teemad

Semantiline veeb
Pealkirjad ja lõigud
Block, Inline ja Inline Block elemendid
Kommentaarid
Reamurdmine ja eraldusjoone lisamine
Tsitaadid

Semantiline veeb

Veebis abi otsimisel võid kohata sellist toredat vihjet, et koduleht peaks olema semantiline. See tähendab meie jaoks, et asjad on loogiliselt ülesehitatud ning sellel on tähendus. See omakorda annab arvutitel mõista, mida me tahame kodulehel kuvada. Kindlasti oled tähele pannud, et kui vaatad videosid, kuulad muusikat või ostad midagi, siis terve internet teab seda ja sulle pakutakse sarnaseid veebilehti/tooteid. Meie alustame lihtsalt – alustame kõige madalamast tasemest ja teeme selgeks kuidas toimivad pealkirjad ja lõigud.

Pealkirjad ja lõigud

Kõik oma artiklid, mida sa veebis kirjutad tuleks jagada peatükkideks, alamteemadeks ja lõikudeks. Nagu teeksid referaati, praktikaaruannet või uurimustööd. Pealkirjasid on kuni kuus astet ning tähistatakse vastavalt siltidega <h1> kuni <h6>

<h1>Pealkiri 1</h1>
<h2>Pealkiri 2</h2>
<h3>Pealkiri 3</h3>
<h4>Pealkiri 4</h4>
<h5>Pealkiri 5</h5>
<h6>Pealkiri 6</h6>

Visuaalselt on need vaikimisi üksteisest erinevad, kuid sellepärast ära muretse, sest need muudatakse hiljem CSS’is ilusaks. Lõigud tuleb kirja panna silti <p> abil.

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra ultricies metus, 
eget dignissim metus mattis a. Nam et aliquam nunc. Integer tempor nisi quam. Aenean sit 
amet massa ante, vel posuere ligula. Vestibulum sit amet nulla elit. Fusce non risus arcu, 
quis auctor lorem. Curabitur dignissim pulvinar vehicula. </p>
<p> Phasellus consectetur interdum eros quis luctus. Proin dignissim ligula id nibh pulvinar
 consectetur non in nisl. Sed consectetur mi dolor, a pretium justo. Proin ut tellus sapien. 
Nam purus lectus, scelerisque vel blandit eget, posuere ac nisl. Sed dolor neque, 
euismod non malesuada nec, accumsan ut libero. Praesent eget nibh diam. </p>

Ja kui nüüd pealkirjad ja lõigud kokku lükata, siis võiks midagi sellist alguses välja paista.

<!DOCTYPE html>
<html>
<head>
	<title>Pealkirjad ja lõigud</title>
	<meta name="description" content="Õpime veebitehnoloogiat" />
	<meta name="keywords" content="HTML,CSS,HTML5,CSS3" />
	<meta name="author" content="Mario Metshein" />
	<meta charset="UTF-8" />
</head>
<body>
<h1>HTML</h1>
	<h2>Ajalugu</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<h2>Süntaks</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<h2>Viited</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Kas lehe stuktuur on õigesti ülesehitatud aitab kontrollida veebileht https://gsnedders.html5.org/outliner/. Google Chrome kasutajad saavad kasutada HTML5 Outliner laiendust, mis töötab kahjuks ainult veebi ülespandud lehtedega.

Block, Inline ja Inline Block elemendid

Elementide kirjapanekul on vaja teada kuidas nad käituvad – millal on need osa reast/tekstist või millal nad tahavad olla täiesti üksi oma real. Sellisel juhul räägitakse kolmest põhimõttest:

reasisene (inline) – need elemendid on märgendid, mis ühtib tavalise tekstiga. Tehes näiteks teksti rasvaseks (<strong>), ei muutu teksti paigutus.
blokk (block) – võtavad endale mingi ruumi, millele on võimalik anda näiteks oma kõrgust, laiust, paigutust jne. Blokk-elementide alla kuuluvad ka meie pealkirjad <h1> kuni <h6> ja lõik <p>. Ehk kui oled lisanud pealkirja või lõigu, siis mis iganes sellele järgneb, hakkab uuelt realt.
reasisene blokk (inline block) – see on kombineeritud kahest eelmisest, kus element on blokkelement, millel on reasisese elemendi omadused.

See tähendab, et uue lõigu lisamiseks ei pea paaniliselt reavahetust otsima.

Kommentaarid

HTML koodi kirjutades oleks kasulik oma koodi ka kommenteerida. See võimaldab endal lisada nö järjehoidjaid või märkusi, mis võimaldab endal ja teistel koodis paremini orienteeruda. HTMLis on kommentaarimine üks raskemaid – alustamiseks lisa <!– (väiksem-kui, hüüumärk, miinus, miinus ) ja lõpetamiseks –> (miinus, miinus, suurem-kui).

<!-- Siia sinu tähtis kommentaar -->

Kommentaarid ei pea olema üherealised!

<!--
   mitme
   realine
   tekst
-->

Kommentaarid ei ole nähtavad nö front-end vaates. Küll on nähtavad kui vaadata veebilehe lähtekoodi (source code, Ctrl+U)

<body>
<!-- siit algab html osa -->
<h1>HTML</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

Reamurdmine ja eraldusjoone lisamine

Lihtsalt koodis Enterite vajutamine ei mõjuta koodi kuvamist. Kui ikka soovid rida vahetada, siis kasuta elementi <br>. Lisades neid mitu tükki järjest saame tühje ridu. Aga siinkohal ära üle pinguta, sest kui on vaja suuremaid vahesid, siis tasub mõelda, kuidas seda teha CSS’is.

Teine element, mida siin paelkirja all tutvustada tahan, on <hr>. See loob horisontaaljoone. Mõlemad tutvustatud elemendid on üksikelemendid ja neil puudub lõpetav silt.

<h1>HTML</h1>
<hr>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
	<br><br><br>
	exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Tsitaadid

Tsiteerimine on teisest kirjalikust või suulisest tekstist pärineva tekstilõigu paigutamine kirjalikku või suulisse teksti koos selle toimingu märgatavaks tegemisega, tavaliselt koos selle tekstilõigu autori, allika või mõlema äranäitamisega

Lühemate ehk reasiseste tsitaatite lisamiseks kaasutame <q> elementi koos <cite> elemendiga.

<h2>Lühike reasisene tsitaat</h2>
<cite>Lenin: </cite><q>Õppida, õppida, õppida!</q>

Pikemate tsitaatide puhul kasuta aga <blockquote> ja <cite> elementide abi

<h2>Pikem tsitaat</h2>
<blockquote>
  Õigusriik, nagu hea auto, vajab pidevat hooldust, logisevate kruvide pingutamist ja kulunud osade asendamist.
</blockquote>
<cite> Toomas H. Ilves</cite>