HTMLi kursus #3 – Tekst

HTMLi kursus #3 – Tekst

Olen otsustanud alustada uue seeriaga, kus õpetan sulle selgeks HTMLi. See kursus sobib väga hästi algajatele, kes tahavad alustada veebiarendusega.

Eelmine osa: HTMLi kursus #2 – Hello World

HTMLi erinevad tekstiliigid, tekstiformaadid ja lingid

Kui tahad, et sinu veebileht oleks natukene rohkem kui lihtsalt tavaline tekst, siis tekstiformaatidega ja -liikidega saad veebilehe sisu muuta veidikene elavamaks.

Näidis veebileht (osa 2.5 koduülesanne) ehk milliseid elemente täna läbi võtame

Kindlasti vaadake seda veebilehte, kui ma hakkan elemente lahti seletama, hoidke seda kasvõi teise aknana selle blogipostituse kõrval!

Täielikku interaktiivse näite võid leida siit ja veebilehe ise siit.

Väikene nipp: sa saad iga veebilehe lähtekoodi vaadata ka brauseris. Mine soovitud veebilehele ja vajuta paremat hiireklahvi ning vali sealt View Page Source ehk vaata lähtekoodi. Lisaks sellele saad sa ka veebilehti enda brauseris muuta vajutades jälle paremat hiireklõpsu ja valides sealt Inspect Element ehk inspekteeri elementi. Nüüd peaks sul olema lihtsam uusi asju õppida.

Koostasin ka sellest osast konspekti, mida soovitan soojalt lugeda ja ka jälgida nende elemendite õppimise ajal.

Tuleta endale kindlasti meelde, kuidas HTMLi kirjutati. Kas mäletad teist osa?

Näidis veebilehes kasutatud elemendid ehk HTML5 tekstielemendid

Enne kui hakkad uusi elemente õppima (eriti just tekstiformaadi elemente), siis tea, et HTML polnud kunagi mõeldud elementide ilustamiseks, vaid ainult nende näitamiseks. Kõik ilustamised tuleks teha läbi CSSi (mille kohta kavatsen ka tulevikus õpetusi teha).

Kui ma räägin näidisest või oma veebilehest või enda kodulehest, siis ma mõtlen seda veebilehte siin. Lisaks sellele olen märgistanud ära ka tähtsad elemendid (ehk mida sa tulevikus kindlasti kasutad) # – märgiga.

Pealkirjad ehk h elemendid

Igal veebilehel on olemas pealkirjad, millega üritatakse nii inimeste kui ka otsingumootorite tähelepanu tõmmata. HTMLis kasutatakse pealkirjade märgistamiseks h elemente. Pealkirjad lähevad tähtsuse järjekorras, et <h1> element on kõige suurem ja tähtsam ning <h6> on kõige väiksem ning kõige tähtsusetum. Nii, et meil on  #<h1></h1>,  #<h2></h2>,  #<h3></h3>, <h4></h4>, <h5></h5> ja <h6></h6> pealkirja elemendid. Lühend h tuleb ingliskeelsest sõnast heading/header, mille eestikeelne vaste on pealkiri.

Kui vaatad näidet, siis näed, et kõik pealkirja (ka alampealkirja) on kirjutatud h elementidega.

Paragrahvi ja tekstilõikude elemendid

#<p></p> – kõige tavalisem teksti väljendamiseks mõeldud element. Seda kasutatakse tavaliselt siis kui tahetatakse kirjutada mingi pikem teksitlõik, aga sobib ka lihtsalt teksti kirjapanekuks.<p> element ei allu realõppudele, sõltub brauseri akna suurusest. Lühend p tuleb ingliskeelsest sõnast paragraph, mis tähendab eesti keeles tekstilõiku või -osa.

Näites on põhimõtteliselt kõik tekstid <p> elemendi sees (mõned ka pole, aga sellest ma räägin natukene hiljem).

<pre></pre>  – jätab alles kõik realõpud ehk tekst on nõnda vormitud nagu sa selle kirjutasid. Lisaks sellele muudab teksti “algseks” (font muutub monospaci fondiks). Tavaliselt kasutatakse seda teiste tekstilõikude ja tekstiformaatide emaelemendina, et siis tekstilõigud ja tekstiformaadid alluksid realõppudele. Lühend pre tuleb ingliskeelsest sõnast preformatted, mis tähendab eestikeeles eelvormistatud või vormistamata.

Minu veebilehes olen siis kujutanud <pre> elementi kui disaini esindajana. Teatud mõttes on see ka õige, sest see erineb teistest tekstidest, aga põhieesmärk on siiski sellel lugeda ja arvestada teksti tühikute kui ka realõppudega.

Plokk- ja siseelemendid

Nüüd sa võib-olla nägid, et <pre>  element on <p> elemendist väljaspool, siis see on sellepärast, et <pre>  ja <p>  on mõlemad plokkelemendid või siis väliselemendid (block-level elements), mis tähendab seda, et neil mõlemal on alguses realõpud ja nende lõpus on realõpud. Lihtsamalt öeldes eeldab plokkelement, et ta saab alata uuelt realt ja temale järgneb ka sisu uuelt realt. Lisaks sellele on plokkelemendid täielikku laiusega, mis ei jäta ruumi teistele elementidele sama reale.

Nüüd aga kui me paneme kaks plokkelementi ühte plokkelementi, siis me tegelikult lõhume emaplokkelemendi ära. HTML võib küll sinu teksti alguses näidata korralikult, aga inspekteerimisel võib alles näha tõelisi vigu. Lisaks on väga vastik (õigemini võimatu ja mõttetu) sellist veebilehte üldse ilustada ja kujundada CSSiga.

Veebilehe ise leiate siit, soovitaks inspekteerida, et näha vigu.

Kui tahad kontrollida, et kas sinu veebilehe HTML on nõuetele vastav, siis saad seda teha HTMLi validaatoriga. See näitab sulle ette, kus on vead ja kuidas neid lahendada.

Selle tõttu ei tohi plokkelemendid üksteise sees olla (välja arvatud juhul kui plokkelement jaotab emaplokkelemendi sektsioonideks).

Põhilised plokkelemendid on järgmised: <p><h1><h2><h3>, <h4>, <h5>,  <h6><ul><ol><dl><pre>, <hr /> , <blockquote> ja <address> 

Need elemendid ei tohi olla üksteise sees.

 

Nüüd väikene teave neile, kes on võib-olla edasijõudnud või neile kes arvavad, et panin siinkohal nende arvates puusse.

Kui vaatad ülemist näidet, siis näed, et olen üritanud panna <p> elemendi sisse <h1> elemendi, mis lõhub siis emaelementi ehk  <p> elementi. Aga kui ma vahetaksin ümber positsioonid, et <p> elemendi paneksin <h1> elementi, siis näeme, et HTML väljastab koodi täiesti õigesti ja korralikult (nii näiliselt kui ka lähtekoodis).

Ja võib-olla minu suurimaks eksimuseks on see, et ma olen väitnud, et <blockquote> elemendi sees ei saa olla <p> elementi (mõlemad on ju plokkelemendid), kuigi XHTMLi  (karmim ja rangem versioon HTMList) ametlikus dokumentatsioonis on öeldud, et <blockquote> elemendis peavad olema just plokkelemendid.

Miks ma olen siis sellist jama siin hämanud? Paneme nüüd need näited sõnadesse. Väga lihtne küsimus sulle: kas sa paneksid terve suure 50 sõnalise tekstiosa teksti pealkirjaks või tsitaati? Või kas sa paneksid pealkirja või tsitaadi otse tekstilõigu keskele? Ma kahtlen selles, aga miks sa peaksid seda siis tegema HTMLis? See nüüd küll ei ole niivõrd tehniline küsimus, aga rohkem põhimõtteline küsimus.

Ma tahan öelda seda, et kui sa kirjutad koodi, siis kirjuta nõnda, et see oleks ka sõnadesse pannes loogilineSeda tehes sa võid endalt pidevalt küsida, kas ma paneksin nt. mingi elemendi mingi teise elemendi sisse.

Võin ka kohe ära öelda, et HTMLis ei ole sellist reeglit, et plokkelemendid ei tohi käia üksteise sees (kuigi W3C – ametlikul HTMLi arendajal on sarnased printsiibid content kategooriate näol) ehk kirjuta koodi, mis oleks ka sõnades loogiline.

Ma tean, et võib olla mõned on kahtlevad selles mõtteviisis, aga uskuge sellest kinnipidamine tuleb kasuks, eriti alguses kui ei osata kõiki elemente kasutada.

Nüüd mis puudutab  <blockquote> osa, siis minu meelest on tegemist väga huvitava juhtumiga, millega mina ei nõustu. Mina ei paneks mitte mingil juhul tsitaati 50 sõnalisi tekstilõike. Aga teksti loomulikult.

Teatud mõttes jaotab <p> element <blockquote> elemendi sektsioonideks, kuid <p> on siiski element, mille ülesandeks on grupeerida erinevaid tekstilõike.

 

Vastand plokkelementidel on üherealiselemendid või siis siselemendid (inline elements). Need elemendid võivad olla nii plokkelementide kui ka siselementide sees, kuid nende sees ei tohi olla plokkelemente. Siselemendid ei eelda, et nende ees ja taga olevad elemendid peaksid olema teistel ridadel. Lisaks sellele võtavad nad enda laiuseks täpselt sama palju, kui neil vaja läheb, erinevalt plokkelementidele, kes siis võtavad laiust maksimaalselt (kasvõi brauseri akna laiuselt).

Põhilised siseelemendid on järgmised: <b><i>, <u><em><strong>, <sup>,<sub>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd> ja <var>

Kui sa mõnda elementi ülevalt ei tea, siis ära muretse, ma räägin nendest, kas tänases või tulevastes postitustes.

Mida ma veel tahan selle loogika kohta öelda on see, et kirjuta koodi, mis tundub sulle loogiline, mitte kellelegi teisele loogiline. HTMLis on paar kohta, kus loogika võib olla arendajatel täiesti erinev.

Realõpp

#<br /> – natukene eriline (sise)element, sest on isesulguv. Ma praegu ei läheks siin detailidesse, et mis on isesulguv element, sest arvan, et praegu ei mängi see suurt rolli. <br /> elementi kasutatakse manuaalse realõpu sisestamiseks ning ka just <p> elemendi sees (siis sunnime <p> elementi poolitama ning see ei riku HTMLi väljastust, sest <br /> onju siseelement). Lühend br tuleb ingliskeelsest väljendist break-line, mis tähendab eesti keeles realõppu.

Näidis veebilehes kasutan seda põhimõtteliselt igalpool, et teha tekstilõikude vahet suuremaks. Selletõttu näeb veebileht natukene viisakam välja.

HTMLi parameetrid ehk atribuudid

Järgmistes elementides võid kohata selliseid toredaid asju nagu parameetrid ehk atribuute.

Parameetreid kasutatakse tavaliselt selleks, et täpsustada, kuidas elementi peaks näitama või kuidas peaks element teatud olukorras töötama.

Igal HTMLi elemendil on atribuudid, kasvõi globaalsed atribuudid (kõikidel elementidel olemas olevad parameetrid). Parameetrid võivad muuta väga palju HTMLi elementide käitumist, välja nägemist (just klassid ja id CSSis) ning ka funktsioneerimist. Mõnede elementide jaoks on atribuudid isegi hädavajalikud.

NB! Kuigi mõned elemendid ei saa korralikult töötada ilma parameetriteta, ei ole atribuudid kohustuslikud ühelegi elemendile.

HTMLi parameetrid peavad asetsema algusmärgendi sees pärast põhimärgist.

Näitesse pannes oleks siis pilt enam vähem järgmine:

<element parameeter1="parameetri väärtus" parameeter2="parameetri 2 väärtus">
    sisu
</element>
<a href="http://oliverpaljak.com">
    Link minu blogile
</a>

<a></a> elemendi (millest ma räägin allpool) atribuudiks ehk parameetriks on praegusel juhul parameeter nimega href, mis viitab siis minu blogile. Iga parameeter tähendab erinevaid asju ja igale elemendile omaseid parameetreid seletan juba nende elementide juures.

Aga mõned tuntumad ja kasutatumad globaalsed parameetrid räägin ära siin:

  • class="tekst" – defineerib ära, mis klassi element kuulub. Seda kasutatakse tihti ilustamisel ja kujundamisel. Elemendil võib olla üks kõik kui palju klasse ja sama klass võib ka olla teistel elementidel.
  • id="tekst" – annab elemendile unikaalse id. Sedagi kasutatakse ka tihti CSSi kujundamise jaoks. Aga vahe klassil ja idel on see, et id võib olla elemendil ainult üks ja see sama id ei tohi olla ühelgi teisel elemendil.
  • style="CSSi omadus(ed)" – annab elemendile CSSi omadus(ed). Nõnda ei pea kasutama välist CSS faili.
  • title="selgiyav tekst" – annab elemendi kohta täpsemat informatsiooni (kuvab väärtust), kui hiirega peatud antud elemendil. Seda võib-olla ei kasutata nii tihti, aga see on üsna kasulik.

Tekstiformaadid

Kõik tekstiformaadid on siseelemendid

Tekstiformaatides on olemas päris mitu sarnast elementi just HTMLi kujutuse ehk stiili poolest, aga tähenduslikult tähistavad need hoopis teist asja.

Näiteks <i> ja <em> . Mõlemad kujutatakse tavaliselt kaldkirjas, aga tähendus on täiesti erinev. <i>  tähistab sõna, mida peaks väljendama teise väljenduslaadiga, aga <em> tähistab tähtsat ja rõhutatud teksti.

Tekstiformaate võib kasutada ka täiesti eraldi seisvate tekstielementidena, aga siiski kasutatakse neid tihedamini plokkelementide sees, sest tekstiformaatide üldine eesmärk on eristada väikest ja tihti tähtsat osa suurest tekstist.

Kui ma räägin, et miskit midagi tähistab ja defineerib, siis ma mõtlen selle all seda, et sellel mingi tähendus (nt. olulise välja toomine). Kui ma aga räägin kuidas miskit kujutatakse, siis ma mõtlen selle all stiili, et kuidas seda brauseris näidatakse.

 

<b></b> – tähistab ja kujutab paksu või siis boldi teksti. Kasutataksegi selleks, et mingit sõna lihtsalt stiili pärast muuta paksuks. Lühend b tuleb ingliskeelsest sõnast bold, mille eestikeelne vaste siin kontekstis on paks.

HTML5 dokumentatsioonis on kirjas, et <b> elementi võiks ainult kasutada, siis kui teised elemendid selleks ei sobi.

Enda veebilehes olen siis kasutanud <b>  elementi näitamiseks, et mu kass on paks. Ma ei pea seda tähtsaks, vaid lihtsalt tahan edasi viia stiili. Võta seda kui kujundit.

 

#<strong></strong> – muudab teksti ka boldiks ehk kujutab teksti paksuna, aga tähistab hoopis väga olulist osa tekstist. Tihtipeale kasutatakse seda inimeste tähelepanu köitmiseks tähtsale. Strong on ingliskeelne sõna, mis tähendab tugevat, eristuvat eesti keeles.

Näidises olen kasutanud <strong> elementi tähtsustamiseks, et ma olen laisk (kas see ka tõele vastab, seda peab vist iga inimene ise otsustama 😀 ). Selle põhimõte ei ole lihtsalt stiili lisamine sõnale laisk, vaid on ka mõeldud selleks, et see on oluline.

 

<i></i> – kujutatakse kaldkirjana, aga tähistab hoopis sõna, mida peaks väljendama erinevalt kogu tekstist. Kasutatakse ka võõrkeelte sõnade kirja panekuks. Lühend tuleb ingliskeelsest väljendist italic, mis eesti keeles kaldteksti.

Veebilehes olen <i> elementi kasutanud võõrsõna näitamiseks nii kassiga seotud lauses kui ka pealkirjas

 

#<em></em>  – kujutatakse ka üsna tihti kaldkirjana, aga tähistab rõhutatud sisu. Kasutakse siis, kui tahatetakse midagi rõhutada ja välja tuua. Lühend em tuleb ingliskeelsest sõnast emphasized, mille eestikeelne vaste on rõhutatud, võimendatud.

Näidises kasutasin <em> elementi selleks, et rõhutada, et minu kass pole laisk. Nagu näha muutus sõna laisk stiili poolest ka kaldkirjaks, aga tähistab hoopis rõhutatud sisu.

Tegelikult on mõlemal <strong> kui ka <em> elemendil enam-vähem üks eesmärk: tuua välja tähtis ja oluline sisu.

 

<small></small> – kujutatakse ja tähistatakse väikse ja mitte olulise kirjana. Selle elemendi eesmärk on kajastada mitte olulist või kõrvalist infot. Sõna small tähendab eesti keeles väikest.

Kasutasin seda enda veebilehes ütlemiseks, et minu kass on suur. Tahtsin sellega edasi anda sisu, mis tegelikult ei mängi erilist rolli.

 

<mark></mark> – kujutatakse ja tähistatakse märgistatud või tähistatud tekstina. Kasutataksegi siis, kui on soov midagi ära tähistada. Sõna mark tähendab inglise keeles markeerima.

Näidis veebilehes kasutasin, siis seda markeerimiseks tähtsat lauset, et see koheselt silma hakkaks.

 

<del></del> – kujutatakse tekstina, mis on maha tõmmatud ja tähendab seda, et dokumendist on tekst “eemaldatud”. Kasutatakse siis kui soovitakse midagi dokumendist eemaldada ning kasutatakse tihti koos <ins> elemendiga. Lühend del on tulnud ingliskeelsest sõnast deleted, mis tähendab eesti keeles kustutatud, eemaldatud.

<del> elemendil on kaks temale iseloomulikku parameetrit – datetime=" YYYY-MM-DDThh:mm:ss" ja cite="URL" . Parameeter datetime näitab seda, millal tekst eemaldati (aasta-kuu-päev:tunnid:minutid:sekundid). Cite aga näitab linki dokumendile, mis seleteb miks tekst eemaldati.

Näidises kasutasin <del> elementi parandamiseks oma arvutus viga 🙂 ning ka näitamaks, et mind ei sega vali muusika, aga segab väga vali muusika (kasutasin  <ins> elementi, millest saad rohkem teada allpool)!

 

 

<s></s> – kujutatakse ka maha tõmmatuna, aga tähistab teksti, mis ei ole enam ajakohane. Kasutatakse siis, kui soovitakse mitte ajakohast informatsiooni maha võtta.

Algselt kasutati <s> elementi ainult maha tõmmatud teksti näitamiseks (stiili poolest). Sellest tuleb ka lühend s, mis pikalt ingliskeeles on striked. Eestikeelne vaste sellele on maha tõmmatud.

Enda veebilehes kasutasin <s> elementi näitamaks, et piletid konsterdile on välja müüdud ehk müügikuulutus oli aegunud.

 

<u></u> – muudab teksti allajoonituks, aga tähistab teksti, mis peaks olema kuidagi stiililiselt erinev (nagu näiteks valesti kirjutatud sõna). Kasutatakse juhul, kui tahetakse mingit teksti osa stiililselt eristada ülejäänud tekstist. Algselt kasutati seda lihtsalt kui stiili elemendina. Sellest tuleb ka lühend u, mis inglise keeles vastab sõnale underlined. Eesti keels tähendab see allajoonitud.

Veebilehes kasutasin  <u> elementi võib-olla natukene valesti. Ma tõin välja, et mitte just nii tähtsaid lauseid me ei markeeri, vaid tõmbame joone alla.

 

<ins></ins> – muudab ka teksti tihti allajoonituks, aga tähistab hoopis teksti, mis on dokumenti sisestatud hiljem. Kasutatakse tihtipeale juhul kui dokumendist eemaldatakse vana tekst koos <del> elemendiga ja asendatakse siis <ins> elemendiga. Aga sobib ka lihtsalt dokumendi uuendamiseks, kui tahetakse uuendusi lihtsalt näidata. Lühend ins on tulnud inglise keelsest sõnas inserted, mille eestikeelne vaste on sisestatud.

Näidises kasutasin, siis seda näitamaks, et mind ei sega vali muusika, vaid väga vali muusika. Maha tõmmatud osa on tehtud <del> elemendiga ja allajoonitud ehk sisestatud osa on <ins> elemendiga.

<ins> elemendil sarnaselt <del> elemendiga on kaks iseloomulikku parameetrit – datetime ja cite. Mis tähistavad täpselt samu asju, mis <del> elemendil, aga ainult uuendamise suhtes.

 

<sub></sub> – tähistab ja kujutab teksti alamindeksina. Tihti kasutatakse erinevates valemites. Lühend sub tuleb ingliskeelsest sõnast subscript, mille eestikeelne vaste on indeks.

Veebilehes kasutasin siis <sub> elementi ühes füüsikalises valemis (väike g, mis <sub> elemendis tähendab gravitatisooni).

 

<sup></sup> – tähistab ja kujutab teksti ülaindeksina või siis astendajana. Tihtipeale kasutatakse erinevates füüsikalistes ja matemaatilistes tehetes. Lühend sup tuleb ingliskeelsest sõnast superscript, mille eestikeelne vaste on ülaindeks.

Näidises kasutasin <sup> elementi maailma ühes kuulsamas füüsikalises valemis.

Programmeerimisega seotud elemendid

Kõik selle osa elemendid on ka siseelemendid.

<code></code> – tähistab arvutikoodi teksti ja kujutatakse “algse” tekstina. Kasutatakse siis kui veebilehel tahetakse kujutada mingi koodiosa otse dokumendil. Sõna code on ingliskeelne sõna, mis eesti keeles tähendab (arvuti)koodi.

Näidises kasutasin seda siis “Hello World” veebilehe koodi näitamiseks.

 

<kbd></kbd> – kujutatakse ka “algse” tekstina ja tähistab klaviatuuri sisestust või klahvide kombinatsiooni (ühesõnaga klaviatuuri käsklust). Kasutatakse tihtipeale, siis kui kasutaja peaks vajutama või sisestama klaviatuurilt midagi. Lühend kbd tuleb ingliskeelsest sõnast keyboard, mis eesti keeles tähendab klaviatuuri.

Enda veebilehes kasutasin seda näitamaks, et saad selle (või tegelikult ükskõik), mis veebilehe endale arvutisse salvestada, vajutades Ctrl ja S klahvi üheaegselt.

 

<samp></samp> – tähistab arvuti poolt väljastatud teksti ja kujutatakse sarnaselt eelnevatele elementidele “algselt”. Kasutatakse tihtipeale, siis kui tahetakse ära märkida dokumendis arvuti poolt väljastud teksti. Lühend samp tuleb ingliskeelsest sõnast sample, mille eestikeelne vaste on proov, näidis.

Kasutasin seda näidises näitamaks, mis teksti peaks “Hello World” veebileht väljastama.

 

<var></var> – tähistab muutujat ja kujutatakse tihtipeale kaldkirjana. Kasutatakse matemaatilistes, füüsikalistes ning ka programmeerimisega seotud valemites ja koodiosades. Lühend var tuleb ingliskeelsest sõnast variable, mis eesti keeles tähendab muutujat.

Näidis veebilehes kasutasin seda siis erinevates füüsikalistes valemites. Nagu sa ka näha võid, et ei ole ainult F ja E muudetud muutujateks, vaid ka m, c ja suur g. Need kõik tähistavad muutujaid.

HTMLi amtelik pool

<q></q> – siseelement, mis tähistab lühikest tsitaati ja kujutatakse tekstina, millel on jutumärgid. Kastutatakse selleks, et tsiteerida kedagi. Lühend q tuleb ingliskeelsest sõnast qoute, mille eestikeelne vaste on tsitaat.

<q></q> elemendil on üks temale iseloomulik parameeter ehk atribuut ning see on cite="URL", mis tähistab URLi, kust tsitaat võeti. Tegelikult pole soovituslik kasutada <q> elementi kasutada tsitaatide jaoks, mis on võetud teisest allikast, vaid selle asemele peaks kasutama <blockqoute> elementi.

Kasutasin <q> elementi enda veebilehes, et tsiteerida ühte mu lemmiktsitaati.

 

<blockqoute></blockqoute> – plokkelement, mis tähistab tsitaati, mis on võetud teisest allikast. Kujutatakse tavaliselt tekstina, mille ees on taandrida. Kasutatakse selleks, et näitada, et tsitaat on teisest allikast ja ka tihtipeale pikkade tsitaatide jaoks. Sõna blockquote on moodustatud ingliskeelsetest sõnadest block ja qoute ning mille eestikeelne vaste oleks plokktsitaat. Kuigi targem oleks seda meelde jätta kui pika tsitaadina.

<blockqoute> elemendil on üks temale iseloomulik parameeter (sarnaselt <q> elemendile) – cite, mis viitab URLile, kust tsitaati võeti.

Näidises kasutasin  <blockqoute> elementi näitamaks ka ühte oma lemmiktsitaati. Aga kuna tegemist oli pika tsitaadiga, siis selle tõttu oli mõistlik kasutada just <blockqoute> elementi, mitte <q> elementi.

 

<abbr></abbr> – siseelement, mis tähistab lühendit. Kujutatakse tavalise tekstina. Kasutatakse siis, kui tekstis on mingi lühend ja seda soovitakse ära märkida (nt. TTÜ – Tallinna Tehnika Ülikool jne) ja tihtipeale on tema emaelemendiks <dfn> element. Lühend abbr tuleb ingliskeelsest sõnast abbreviation, mis eesti keeles tähendab lühendit.

<abbr> elemendil kasutatakse tavaliselt title parameetrit (kuulub globaalsetesse atribuudidesse), mis siis näitab mingi asja seletust pikemalt, kui hiirega olla selle elemendi peal.

Oma veebilehes kasutasin <abbr> elementi, siis koos <dfn> elemendiga (selle tõttu ka kaldkirjas), mis tähistab lühendit HTML (mine veebilehel hiirega HTMLi peale ja vaata, mis juhtub).

 

<dfn></dfn> – siseelement, mida kujutatakse kaldkirjana ja tähistab terminit. Kasutatakse termini defineerimiseks ja tihtipeale näeb seda elementi koos elemendiga <abbr>, kus <abbr> on lapselement. <abbr> element defineerib ära siis termini pika seletuse koos title parameetriga. Lühend dfn tuleb ingliskeelsest sõnast definition, mis eesti keeles tähendab definitsiooni.

Näidises kasutasin <dfn> elementi siis termini ja ka lühendi HTML näitamiseks.

 

#<address></address> – plokkelement, mis tähistab tavaliselt kontaktinformatsiooni selle veebilehe/artilkli autorist või omanikust. Kujutatakse kaldkirjana. Kasutatakse siis kui tahetakse edasi anda informatsiooni artikli või veebilehe autorist või omanikust. Sõna address on ingliskeelne sõna, mille eestikeelne vaste on aadress.

Kasutasin seda veebilehes näitamaks minu (valesid) kontakt andmeid.

 

<time></time> – siseelement, mis tähistab aega ja kujutatakse tavalise tekstina. Kasutatakse tavaliselt mingi aja näitamiseks lihtsalt kasutajatele, aga ka parameetri datetime abil saab muuta <time> element arvutile ja otsingumootorile kasulikuks. Sõna time on inglise sõna, mille eestikeelne vaste on aeg.

Enda veebilehes näitasin, siis aega millal JÄÄÄÄRi kontsert algab.

 

<cite></cite> – siseelement, mis tähistab (kunstilise) töö pealkirja ja see kujutatakse tihti kaldkirjas. Kastutatakse mingi töö pealkirja kirjutamiseks (rõhutamiseks). Algselt defineeriti sellega tsitaati, millest tuleb ka cite ehk inglise keeles citation. Eestikeelne vaste sellele oleks tsitaat.

<cite></cite> elementi kasutasin veebilehes viitamaks ühele väga heale raamatule – Soft Skills (mida ma soovitaksin kõigil läbi lugeda). Soft Skillsi autor on John Sonmez.

Midagi muud

#<a></a> – siseelement, mis tähistab (hüper)linki mingile teisele veebilehele ja seda kujutatakse tavaliselt allajoonitud sinise tekstina. Kasutatakse siis kui on soov juhtida kasutaja mingile teisele veebilehele või alamlehele. Lühend a tuleb ingliskeelsest sõnast anchor, mille eestikeelne vaste on ankur, aga parem mõtle <a> elemendi tähenduseks hüperlinki, mis viitab teisele veebilehele või alamlehele.

<a> elemendil on kaks kõige tihedamini kasutatud parameetrit:

  1. href="URL" – peaaegu kohustuslik parameeter, sest tähistab linki teisele veebilehele
  2. target="_blank|_self|_parent|_top|framename"– defineerib ära, kuidas link avatakse (väärtus1 | väärtus2 – nõnda pannakse kirja parameetri kindald väärtused)

Parameetri href väärtuseks on alati link teisele veebilehele. Link peab olema täielik ehk link peaks algama http:// või mõne muu protokolliga.

Teise parameetri, target, väärtuseks on tavaliselt 4 võimalust:

  1. _self – avab lingi samas vahelehes, kus lingile vajutasite (see on vaikimisi parameetriks)
  2. _blank – avab lingi uues vahelehes või uues brauseri aknas
  3. _parent – avab lingi emaaknas (siinkohal on mängus <iframe> element, millest räägin tuleviku postitustes)
  4. _top – avab lingi kõikidest akendest väljaspool (jällegi <iframe> elemendiga seotud)
  5. akna_nimi – avab lingi antud aknas (<iframe>)

href parameeter peaks olema, aga target nii tähtis pole (tihtipeale ei kasutata seda).

<a> elemendil on veel palju atribuute, aga enamasti kasutatakse ainult neid kahte, mis ma välja tõin.

Enda veebilehes kasutasin <a> elementi enda blogile viitamiseks. Lõin lingi, et minu veebilehe lugeja saaks tulla ka minu blogisse.

 

<bdo></bdo> – siseelement, milles tähistatakse teksti, mille lugemissuunda soovitakse muuta. Kujutatakse vastavalt parameetrile. Lühend bdo tuleb ingliskeelsest sõnast bidirectional-override, mis eesti keeles põhimõtteliselt tähendab suuna muutmist.

<bdo> elemendil on üks kohustuslik parameeter (s.t. et element ei tööta ilma selleta) ja see on dir.Parameeter dir määrab ära suuna, kuidas pidi peaks tekst olema.

Kui dir väärtuseks on rtl (right to left), siis pööratakse tekst ümber nõnda, et teksti lugemissuund algab paremalt (nt. kodu muutub udok). Aga kui dir väärtuseks on ltr (left to right), siis “pööratakse” tekst vasakult paremale (mis tegelikult on õiget pidi).

<bdo> elementi kasutasin oma veebilehe lõpus, et lihtsalt näidata, mida see element suudab.

 

Enne kui lõpetan, siis annan sulle koduülesande. Täpselt selle sama, mis tegelikult HTMLi kursuse 2.5 osas oli ja see on see, et tee nendest kõikidest elementidest enda koduleht (nagu minulgi tehtud on). Kasuta kindlasti konspekti ning inspekteeri minu veebilehte. Pähe pole neid elemente tuupida, lihtsalt harjutada veebilehtede tegemist ja need kuluvad ise pähe.

 

Ja ongi see pikk postitus tehtud (aega läks, aga valmis sai). Kas tekkis küsimusi? Kui jah, siis andke kommentaarides teada 🙂 !

Järgmine osa: HTMLi kursus #4.1 – Nimekirjad

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *