Edit in JSFiddle

<!DOCTYPE html>
<html>

    <head>
        <title>Tekstiliigid, tekstiformaadid ja lingid</title>
        <meta charset="UTF-8" />
    </head>

    <body>
        <h1 style="font-size: 40px;">HTMLi kursuse 3. osa konspekt - Tekstid (erinevate teksti liikide kujutamine ja näitamine HTMLis)</h1>

        <h1>Plokkelemendid</h1>
		<p>
            Plokkelemendid (block-level elements) on elemendid, mis eeldavad, et nad saavad alata uuelt realt ja temale järgneb ka sisu uuelt realt.
			<br />
			<br />
			<strong>Plokkelemendid ei tohi olla üksteise sees!</strong>
			<br />
			<br />
			<strong>Siin konspektis olevad plokkelemendid:</strong> &lt;p&gt;, &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, &lt;h6&gt;, &lt;pre&gt;, &lt;blockquote&gt; ja &lt;address&gt;
        </p>
		<br />
		<h1>Siseelemendid</h1>
		<p>
            Siseelemendid (inline elements) on elemendid, mis ei eelda, et nad saavad alata uuelt realt ja temale ei järgne ka sisu uuelt realt.
			<br />
			<br />
			<em>Siseelemendid võivad olla üksteise sees ja ka plokkelementide sees!</em>
			<br />
			<br />
			<strong>Siin konspektis olevad siseelemendid:</strong> &lt;b&gt;, &lt;i&gt;, &lt;u&gt;, &lt;em&gt;, &lt;strong&gt;, &lt;sup&gt;, &lt;sub&gt;, &lt;big&gt;, &lt;small&gt;, &lt;ins&gt;, &lt;del&gt;, &lt;code&gt;, &lt;cite&gt;, &lt;kbd&gt;, &lt;var&gt;, &lt;q&gt;, &lt;dfn&gt; ja &lt;time&gt;
		</p>
		<br />

        <h1>h1 - Kõige suurem pealkiri ehk suuruselt ja tähtsuselt 1. pealkiri</h1>
        <h2>h2 - Suuruselt ja tähtsuselt 2. pealkiri</h2>
        <h3>h3 - Suuruselt ja tähtsuselt 3. pealkiri</h3>
        <h4>h4 - Suuruselt ja tähtsuselt 4. pealkiri</h4>
        <h5>h5 - Suuruselt ja tähtsuselt 5. pealkiri</h5>
        <h6>h6 - Kõige väiksem pealkiri ehk suuruselt ja tähtsuselt 6. pealkiri</h6>

        <br />

        <p>
            <strong>Kasutus:</strong> &lt;h1&gt;pealkirja sisu&lt;/h1&gt;. Teiste pealkirjadega täpselt samamoodi ainult, et number muutub h kõrval (min. 1 ja max 6).
        </p>

        <br />

        <h1>Paragrahvi elemendid</h1>

        <h2>&lt;p&gt; element</h2>
        <p>
            p (p - paragraph) on paragrahvi element; ei allu tühikutele ja reapiiridel
        </p>
        <p>
            <strong>Kasutus:</strong>
            <br /> &lt;p&gt;
            <br /> &emsp; paragrahvi sisu
            <br /> &lt;/p&gt;
        </p>

        <br />

        <h2>&lt;pre&gt; element</h2>
        <strong>Näide:</strong> <pre>pre (pre - preformatted) element jätab kõik
reapiirid ja
                       tühikud alles
                       
        nagu näha, aga ta ka muudab teksti "algseks"
        </pre>

        <p>
            <strong>Kasutus:</strong>
            <br /> &lt;pre&gt;
            <br />&emsp;sisu
            <br />&lt;/pre&gt;.
        </p>

        <br />
		
        <h1>HTMLi parameetrid (atribuudid)</h1>
        <p>
            Et edasi minna peaksid sa enne mõistma, mis on HTMLi parameetrid.
            <br />
            <br /> HTMLi parameetrid annavad täpsemat informatsiooni, kuidas elemente näidata. Kõikidele elementidele saab lisada atribuute (kasvõi <a href="http://www.w3schools.com/tags/ref_standardattributes.asp">globaalseid parameetreid</a>), aga kohe kindlasti peavad need asetsema algusmärgendi sees pärast põhitähist ja eraldatud põhitähisest tühikuga
            <br />
            <br /> Kuiv Näide:&lt;algusmärgend parameeter="väärtus" parameeter2="väärtus"&gt;elemendi sisu&lt;lõppmärgend&gt;
            <br /> Näide: &lt;var class="variable"&gt;E&lt;var&gt;
            <br />
            <br />
            <strong>NB!</strong> Parameetrid võivad muuta elementide käitumist ja funksionaalsust.
            <br /> Näiteks: &lt;a&gt; elemendil on olemas atribuut target - target muudab &lt;a&gt; elemendi funktsionaalsust.
        </p>
		
		<br />

        <h1>Tekstiformaadi elemendid</h1>
        <p>
            Enne kui kasutad tekstiformaate, siis tea, et HTML polnud kunagi mõeldud elementide ilustamiseks, vaid lihtsalt nende näitamiseks. Elemente peaks ilustama koos CSSiga.
            <br />
            <br /> Olemas on ka stiili poolest sarnaseid elemente (brauser kujutab neid ühte moodi), aga tähenduse poolest täiesti erinevaid elemente
            <br />
            <br /> Tihtipeale kasutatakse tekstiformaate paragrahvi ehk &lt;p&gt; elemendi sees
        </p>

        <br />


        <h2>&lt;b&gt; element</h2>
        <p>
            b element muudab teksti <b>boldiks, mida lihtsalt kujutatakse kui stiilina</b> (b - bold text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;b&gt;paksuks minev sisu&lt;/b&gt;.
        </p>

        <br />

        <h2>&lt;strong&gt; element</h2>
        <p>
            strong element muudab teksti tihtipeale ka <strong>boldiks, aga tähistab hoopis olulist osa tekstist</strong> (strong - strong text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;strong&gt;tähenduse/tähtis sisu&lt;/strong&gt;.
        </p>


        <br />

        <h2>&lt;i&gt; element</h2>
        <p>
            i element muudab teksti <i>kaldtekstiks (või -kirjaks), mida tähistatakse kui teise väljenduslaadiga</i> (algselt tähendas lihtsalt stiili; i - italic text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;i&gt;kaldkirjas olev sisu&lt;/i&gt;.
        </p>

        <br />

        <h2>&lt;em&gt; element</h2>
        <p>
            em element muudab teksti tihtipeale ka <em>kaldtekstiks (või kirjaks), aga selle all mõeldakse rohkem seda, et sa tahad midagi rõhutada/välja tuua</em> (em - emphasized text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;em&gt;rõhutatud/tähtis sisu&lt;/em&gt;.
        </p>

        <br />


        <p>
            Kokku võtvalt tähistavad <strong>&lt;strong&gt;</strong> ja <em>&lt;em&gt;</em> elemendid tähtsat teksti
        </p>

        <br />

        <h2>&lt;small&gt; element</h2>
        <p>
            small element muudab teksti <small>väikseks ja ebaoluliseks</small> (small - small text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;small&gt;väike ja tähtsusetu sisu&lt;/small&gt;.
        </p>
		
		<br />

        <h2>&lt;mark&gt; element</h2>
        <p>
            mark element muudab teksti
            <mark>märgituks</mark>, mida kujutatakse lihtsalt stiilina (mark - marked text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;mark&gt;märgitud sisu&lt;/mark&gt;.
        </p>

        <br />

        <h2>&lt;del&gt; element</h2>
        <p>
            del element muudab teksti <del datetime="2016-09-10 15.00">maha tõmmatuks</del> ehk eemaldab teksti dokumendist, mis ei sobi (del - deleted text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;del datetime="kuupäev ja kellaeg, millal eemaldati" cite="URL dokumendini, mis seletab, miks eemaldati"&gt;eemaldatud sisu&lt;/del&gt;.
        </p>

        <br />

        <h2>&lt;s&gt; element</h2>
        <p>
            s element muudab teksti ka <s>maha tõmmatuks</s>, aga tähistab teksti, mis pole enam õige või ajakohane (algselt tähendas &lt;s&gt; element lihtsalt stiili; s - strike)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;s&gt;mitte kehtiv sisu&lt;/s&gt;.
        </p>

        <br />

        <h2>&lt;u&gt; element</h2>
        <p>
            u element muudab teksti <ins>allajoonituks</ins>, millega tahetakse tekstist mingit osa eristada (algselt tähendas &lt;u&gt; element lihtsalt stiili; u - underlined)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;u&gt;allajoonitud sisu&lt;/u&gt;.
        </p>

        <br />

        <h2>&lt;ins&gt; element</h2>
        <p>
            ins element muudab teksti ka tihtipeale <ins>allajoonituks</ins>, aga tähistab hiljem lisatud teksti (ins - inserted text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;ins datetime="kuupäev ja kellaeg, millal lisati" cite="URL dokumendini, mis seletab, miks lisati"&gt;listaud sisu&lt;/del&gt;.
        </p>

        <br />

        <h2>&lt;sub&gt; element</h2>
        <p>
            sub element muudab teksti <sub>alamindeksiks või alamtekstiks</sub> (sub - subscripted text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;sub&gt;alamindeksi sisu&lt;/sub&gt;.
        </p>

        <br />

        <h2>&lt;sup&gt; element</h2>
        <p>
            sup element muudab teksti <sup>ülaindeksiks või ülatekstiks</sup> (sup - superscripted text)
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;sup&gt; ülaindeksi sisu&lt;/sup&gt;.
        </p>

        <h1>Programmeerimisega/matemaatikaga seotud elemendid</h1>

        <h2>&lt;code&gt; element</h2>
        <p>
            code element kujutab teksti "algelisena" ja tähistab mingit koodiosa või juppi
            <br />
            <br />
            <strong>Näide:</strong> <code>var a = 5; var b = 5; var ab = a * b;</code>
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;code&gt;kood&lt;/code&gt;.
        </p>

        <br />

        <h2>&lt;kbd&gt; element</h2>
        <p>
            kbd element kujutab ka teksti "algelisena" ja tähistab klaviatuuri sisestust (kbd - keyboard)
            <br />
            <br />
            <strong>Näide:</strong> Vajuta <kbd>Ctrl+S</kbd>, et salvestada see veebileht enda arvutisse
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;kbd&gt;klaviatuuri klahvid&lt;/kbd&gt;.
        </p>

        <br />

        <h2>&lt;samp&gt; element</h2>
        <p>
            samp element kujutab ka teksti "algelisena" ja tähistab arvuti väljastusteksti (samp - sample)
            <br />
            <br />
            <strong>Näide:</strong> <samp>Hello World!</samp>
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;samp&gt;arvuti väljastustekst&lt;/samp&gt;.
        </p>

        <br />

        <h2>&lt;var&gt; element</h2>
        <p>
            var element kujutab teksti kaldkirjana ja tähistab muutujat (var - variable)
            <br />
            <br />
            <strong>Näide:</strong> Einsteini kuulsa valemi <var>E</var> = <var>m</var><var>c</var><var><sup>2</sup></var> esimene muutuja <var>m</var> tähistab massi

        </p>

        <p>
            <strong>Kasutus:</strong> &lt;var&gt;muutuja&lt;/var&gt;.
        </p>

        <h1>HTMLi ametlik pool</h1>
        <h2>&lt;q&gt; element</h2>
        <p>
            q element kujutab teksti jutumärkides ja tähistab lühikest tsitaati (q - quotation)
            <br />
            <br />
            <strong>Näide:</strong> <q cite="https://www.goodreads.com/author/quotes/203714.Henry_Ford">Whether you think you can, or you think you can't--you're right.</q> - Henry Ford
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;q&gt;tsitaadi sisu&lt;/q&gt;.
        </p>

        <br />

        <h2>&lt;blockquote&gt; element</h2>
        <p>
            blockquote element kujutab teksti taandreaga ja tähistab tsitaati, mis on võetud kuskilt teisest allikast (algselt tähendas pikka tsitaati)
            <br />
        </p>
        <strong>Näide:</strong>
        <blockquote cite="https://www.goodreads.com/author/quotes/203714.Henry_Ford">
			Whether you think you can, or you think you can't--you're right
        </blockquote> - Henry Ford

        <p>
            Brauserid tavaliselt eristavad &lt;blockquote&gt; elemendi lisades talle ette ruumi.
            <br />
            <br />
            <strong>Kasutus:</strong>
            <br /> &lt;blockquote cite="tsitaadi algne allikas, link"&gt;
            <br />&emsp; eraldi seisev tsitaat
            <br />&lt;/blockquote&gt;
        </p>

        <br />

        <h2>&lt;abbr&gt; element</h2>
        <p>
            abbr element kujutab teksti tavaliselt ja tähistab mingit sõna või lühendit seletatult (abbr - abbreviations)
            <br />
            <br />
            <strong>Näide:</strong> <abbr title="Tallinna Tehnika Ülikool">TTÜ</abbr> asub Tallinnas.
            <br />
            <br /> Et näha TTÜ täispikka nime üleval lauses, siis mine hiirega TTÜ peale ja oota natukene
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;abbr title="lühend pikalt"&gt;lühend&lt;/abbr&gt;.
        </p>

        <br />

        <h2>&lt;dfn&gt; element</h2>
        <p>
            dfn element kujutab teksti kaldkirjana ja tähistab terminit (dfn - definition)
            <br />
            <br />
            <strong>Näide:</strong> <dfn><abbr title="Tallinna Tehnika Ülikool">TTÜ</abbr></dfn> asub Tallinnas.
            <br />
            <br /> Et näha TTÜ täispikka nime üleval lauses, siis mine hiirega TTÜ peale ja oota natukene
        </p>

        <p>
            <strong>Kasutus:</strong> 
			<br />
			<br />
			Tihtipeale kasutatakse &lt;dfn&gt; elementi &lt;abbr&gt; emaelemendina
			<br />
			<br />
			&lt;dfn&gt;&lt;abbr title="lühend või termin pikalt"&gt;termin&lt;/abbr&gt;&lt;/dfn&gt;.
        </p>
		
        <br />

        <h2>&lt;address&gt; element</h2>
        <p>
            address element kujutab teksti kaldkirjana ja tähistab mingi kontakti (tavaliselt veebilehe autori/omaniku) infot
            <br />
            <br />
            <strong>Näide:</strong>
        </p>
        <address>
			Suure Vale 4, 
			Tallinn, 
			Eesti, 
			95555 
		</address>


        <p>
            <strong>Kasutus:</strong> &lt;address&gt; ei tohiks olla teksti paragrahvi sees, sest tegemist on juba täiesti eraldi seisva elemendiga
            <br />
            <br /> &lt;address&gt;
            <br /> &emsp;aadressi andmed
            <br /> &lt;/address&gt;
        </p>
		
		<br />
		
        <h2>&lt;time&gt; element</h2>
        <p>
            time element kujutab teksti tavaliselt ja tähistab aega
            <br />
            <br />
            <strong>Näide:</strong> <time datetime="2016-09-10 15.00">15.00</time>
        </p>

        <p>
            <strong>Kasutus:</strong>
			<br />
			<br />
			&lt;time datetime="kuupäev ja kellaaeg"&gt;aeg&lt;/time&gt;.
			<br />
			<br />
			Parameetrit datetime kasutatakse lihtsalt täpsema aja ütlemiseks, kasutajale ta midagi juurde ei anna, küll aga arvutitele.
        </p>

        <br />

        <h2>&lt;cite&gt; element</h2>
        <p>
            cite element kujutab teksti kaldkirjana ja tähistab mingi töö nimetust (cite - citation)
            <br />
            <br />
            <strong>Näide:</strong> Raamatu <cite>Soft Skills</cite> autor on John Sonmez
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;cite&gt;töö nimi&lt;/cite&gt;.
        </p>

        <h1>Midagi muud - lingid ja tagurpidi tekst</h1>
        <h2>&lt;a&gt; element</h2>
        <p>
            a element loob lingi teisele veebilehele, millega kasutaja saab minna teistele veebilehekülgedele (a - anchor)
            <br />
            <br />
            <strong>Näide:</strong> <a href="https://oliverpaljak.com/" target="_blank">Oliver Paljaku blogi</a>
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;a href="link veebilehele" target="target parameeter"&gt;sisu&lt;/a&gt;.
            <br />
            <br /> target parameetriks kasutatakse tavaliselt 2 väärtust.
            <br /> 1. _blank - avab lingi uues tabis (vahelehes)
            <br /> 2. _top - avab lingi uues aknas
			<br />
            <br />
			<strong>NB!</strong> a elemendil on veel palju atribuute, aga kuna href ja target on kõige tähtsamad, siis ma teisi välja ei toonud
        </p>
        <br />

        <h2>&lt;bdo&gt; element</h2>
        <p>
            bdo element muudab teksti suunda (bdo - bi-directional override)
            <br />
            <br />
            <strong>Näide:</strong> See tekst on õiget pidi ja <bdo dir="rtl"> see siin valet pidi</bdo>
        </p>

        <p>
            <strong>Kasutus:</strong> &lt;bdo dir="suund"&gt;sisu&lt;/bdo&gt;.
            <br />
            <br /> dir parameetril on kaks väärtust:
            <br /> 1. rtl - paremalt vasakule (right to left)
            <br /> 2. ltr - vasakult paremale (left to right)
        </p>

        <p>
            Kas tahad veel veebiarenduse kohta teada saada? Kui jah, siis külasta mu <a href="https://oliverpaljak.com">blogi</a>.
        </p>

    </body>

</html>