HTMLi kursuse 3. osa konspekt - Tekstid (erinevate teksti liikide kujutamine ja näitamine HTMLis)

Plokkelemendid

Plokkelemendid (block-level elements) on elemendid, mis eeldavad, et nad saavad alata uuelt realt ja temale järgneb ka sisu uuelt realt.

Plokkelemendid ei tohi olla üksteise sees!

Siin konspektis olevad plokkelemendid: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <pre>, <blockquote> ja <address>


Siseelemendid

Siseelemendid (inline elements) on elemendid, mis ei eelda, et nad saavad alata uuelt realt ja temale järgneb ka sisu uuelt realt.

Siseelemendid võivad olla üksteise sees ja ka plokkelementide sees!

Siin konspektis olevad siseelemendid: <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <ins>, <del>, <code>, <cite>, <kbd>, <var>, <q>, <dfn> ja <time>


h1 - Kõige suurem pealkiri ehk suuruselt ja tähtsuselt 1. pealkiri

h2 - Suuruselt ja tähtsuselt 2. pealkiri

h3 - Suuruselt ja tähtsuselt 3. pealkiri

h4 - Suuruselt ja tähtsuselt 4. pealkiri

h5 - Suuruselt ja tähtsuselt 5. pealkiri
h6 - Kõige väiksem pealkiri ehk suuruselt ja tähtsuselt 6. pealkiri

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


Paragrahvi elemendid

<p> element

p (p - paragraph) on paragrahvi element; ei allu tühikutele ja reapiiridel

Kasutus:
<p>
  paragrahvi sisu
</p>


<pre> element

Näide:
pre (pre - preformatted) element jätab kõik
reapiirid ja
                       tühikud alles
                       
        nagu näha, aga ta ka muudab teksti "algseks"
        

Kasutus:
<pre>
 sisu
</pre>.


HTMLi parameetrid (atribuudid)

Et edasi minna peaksid sa enne mõistma, mis on HTMLi parameetrid.

HTMLi parameetrid annavad täpsemat informatsiooni, kuidas elemente näidata. Kõikidele elementidele saab lisada atribuute (kasvõi globaalseid parameetreid), aga kohe kindlasti peavad need asetsema algusmärgendi sees pärast põhitähist ja eraldatud põhitähisest tühikuga

Kuiv Näide:<algusmärgend parameeter="väärtus" parameeter2="väärtus">elemendi sisu<lõppmärgend>
Näide: <var class="variable">E<var>

NB! Parameetrid pole ühelgile elemendile kohustuslikud, aga need võivad muuta elementide käitumist.
Näiteks: <a> elemendil on kaks talle iseloomulikku parameetrit href ja target. Tihtipeale jäetakse target lihtsalt välja, sest see pole oluline <a> elemendi töötamisel ja toimimisel.


Tekstiformaadi elemendid

Enne kui kasutad tekstiformaate, siis tea, et HTML polnud kunagi mõeldud elementide ilustamiseks, vaid lihtsalt nende näitamiseks. Elemente peaks ilustama koos CSSiga.

Olemas on ka stiili poolest sarnaseid elemente (brauser kujutab neid ühte moodi), aga tähenduse poolest täiesti erinevaid elemente

Tihtipeale kasutatakse tekstiformaate paragrahvi ehk <p> elemendi sees


<b> element

b element muudab teksti boldiks, mida lihtsalt kujutatakse kui stiilina (b - bold text)

Kasutus: <b>paksuks minev sisu</b>.


<strong> element

strong element muudab teksti tihtipeale ka boldiks, aga tähistab hoopis olulist osa tekstist (strong - strong text)

Kasutus: <strong>tähenduse/tähtis sisu</strong>.


<i> element

i element muudab teksti kaldtekstiks (või kirjaks), mida tähistatakse kui teise väljenduslaadiga (algselt tähendas lihtsalt stiili; i - italic text)

Kasutus: <i>kaldkirjas olev sisu</i>.


<em> element

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

Kasutus: <em>rõhutatud/tähtis sisu</em>.


Kokku võtvalt tähistavad <strong> ja <em> elemendid tähtsat teksti


<small> element

small element muudab teksti väikseks ja ebaoluliseks (small - small text)

Kasutus: <small>väike ja tähtsusetu sisu</small>.


<mark> element

mark element muudab teksti märgituks, mida kujutatakse lihtsalt stiilina (mark - marked text)

Kasutus: <mark>märgitud sisu</mark>.


<del> element

del element muudab teksti maha tõmmatuks ehk eemaldab teksti dokumendist, mis ei sobi (del - deleted text)

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


<s> element

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

Kasutus: <s>mitte kehtiv sisu</s>.


<u> element

u element muudab teksti allajoonituks, millega tahetakse tekstist mingit osa eristada (algselt tähendas <u> element lihtsalt stiili; u - underlined)

Kasutus: <u>allajoonitud sisu</u>.


<ins> element

ins element muudab teksti ka tihtipeale allajoonituks, aga tähistab hiljem lisatud teksti (ins - inserted text)

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


<sub> element

sub element muudab teksti alamindeksiks või alamtekstiks (sub - subscripted text)

Kasutus: <sub>alamindeksi sisu</sub>.


<sup> element

sup element muudab teksti ülaindeksiks või ülatekstiks (sup - superscripted text)

Kasutus: <sup> ülaindeksi sisu</sup>.

Programmeerimisega/matemaatikaga seotud elemendid

<code> element

code element kujutab teksti "algelisena" ja tähistab mingit koodiosa või juppi

Näide: var a = 5; var b = 5; var ab = a * b;

Kasutus: <code>kood</code>.


<kbd> element

kbd element kujutab ka teksti "algelisena" ja tähistab klaviatuuri sisestust (kbd - keyboard)

Näide: Vajuta Ctrl+S, et salvestada see veebileht enda arvutisse

Kasutus: <kbd>klaviatuuri klahvid</kbd>.


<samp> element

samp element kujutab ka teksti "algelisena" ja tähistab arvuti väljastusteksti (samp - sample)

Näide: Hello World!

Kasutus: <samp>arvuti väljastustekst</samp>.


<var> element

var element kujutab teksti kaldkirjana ja tähistab muutujat (var - variable)

Näide: Einsteini kuulsa valemi E = mc2 esimene muutuja m tähistab massi

Kasutus: <var>muutuja</var>.

HTMLi ametlik pool

<q> element

q element kujutab teksit jutumärkides ja tähistab lühikest tsitaati (q - quotation)

Näide: Whether you think you can, or you think you can't--you're right. - Henry Ford

Kasutus: <q>tsitaadi sisu</q>.


<blockquote> element

blockquote element kujutab teksti taandreaga ja tähistab tsitaati, mis on võetud kuskilt teisest allikast (algselt tähendas pikka tsitaati)

Näide:
Whether you think you can, or you think you can't--you're right
- Henry Ford

Brauserid tavaliselt eristavad <blockquote> elemendi lisades talle ette ruumi.

Kasutus:
<blockquote cite="tsitaadi algne allikas, link">
  eraldi seisev tsitaat
</blockquote>


<abbr> element

abbr element kujutab teksti tavaliselt ja tähistab mingit sõna või lühendit seletatult (abbr - abbreviations)

Näide: TTÜ asub Tallinnas.

Et näha TTÜ täispikka nime üleval lauses, siis mine hiirega TTÜ peale ja oota natukene

Kasutus: <abbr title="lühend pikalt">lühend</abbr>.


<dfn> element

dfn element kujutab teksti kaldkirjana ja tähistab terminit (dfn - definition)

Näide: TTÜ asub Tallinnas.

Et näha TTÜ täispikka nime üleval lauses, siis mine hiirega TTÜ peale ja oota natukene

Kasutus:

Tihtipeale kasutatakse <dfn> elementi <abbr> emaelemendina

<dfn><abbr title="lühend või termin pikalt">termin</abbr></dfn>.


<address> element

address element kujutab teksti kaldkirjana ja tähistab mingi kontakti (tavaliselt veebilehe autori/omaniku) infot

Näide:

Smuuli 48, Tallinn, Eesti, 94234

Kasutus: <address> ei tohiks olla teksti paragrahvi sees, sest tegemist on juba täiesti eraldi seisva elemendiga

<address>
 aadressi andmed
</address>


<time> element

time element kujutab teksti tavaliselt ja tähistab aega

Näide:

Kasutus:

<time datetime="kuupäev ja kellaaeg">aeg</time>.

Parameetrit datetime kasutatakse lihtsalt täpsema aja ütlemiseks, kasutajale ta midagi juurde ei anna, küll aga arvutitele.


<cite> element

cite element kujutab teksti kaldkirjana ja tähistab mingi töö nimetust (cite - citation)

Näide: Raamatu Soft Skills autor on John Sonmez

Kasutus: <cite>töö nimi</cite>.

Midagi muud - lingid ja tagurpidi tekst

<a> element

a element loob lingi teisele veebilehele, millega kasutaja saab minna teistele veebilehekülgedele (a - anchor)

Näide: Oliver Paljaku blogi

Kasutus: <a href="link veebilehele" target="target parameeter">sisu</a>.

target parameetriks kasutatakse tavaliselt 2 väärtust.
1. _blank - avab lingi uues tabis (vahelehes)
2. _top - avab lingi uues aknas

NB! a elemendil on veel palju atribuute, aga kuna href ja target on kõige tähtsamad, siis ma teisi välja ei toonud


<bdo> element

bdo element muudab teksti suunda (bdo - bi-directional override)

Näide: See tekst on õiget pidi ja see siin valet pidi

Kasutus: <bdo dir="suund">sisu</bdo>.

dir parameetril on kaks väärtust:
1. rtl - paremalt vasakule (right to left)
2. ltr - vasakult paremale (left to right)

Kas tahad veel veebiarenduse kohta teada saada? Kui jah, siis külasta mu blogi.