HTMLi kursus #9 – Erilised elemendid

HTMLi kursus #9 – Erilised elemendid

Eelmine osa: HTMLi kursus #8 – Back-end

HTMLi kursus hakkab vaikselt (vähemalt elementide poole pealt) lõpule jõudma ja tänases osas võtamegi läbi sellised erilised elemendid, mida on natukene raske grupeerida ja ühe pealkirja alla panna.

Üks siinses postituses käsitletud “element” ei ole tegelikkuses isegi element, nii et see postitus on ünsagi special 😀 .

Olemas on ka näidisveebileht ja selle interaktiivne näide. Konspekt ise on siin ja selle interaktiivne näide siin.

Erilised elemendid seletatult

<!-- Sinu kommentaar --> – see ei ole element, tegemist on kommentaariga. Ma tõin selle välja ka mitu postitust tagasi kõrvalise tekstina, kuid ma arvan, et see väärib natukene rohkem seletust. Nimelt kasutatakse kommentaare programmeerimises peamiselt koodi lahti seletamiseks, et teised programmeerijad saaksid koodist aru. Kommentaaride vahele võib sisestada ükskõik, mis teksti – neid arvuti ei arvesta ning kompileerimises/renderdamises jäetakse kommentaarid välja.

HTMLis aga kasutatakse kommentaare veel tingimuslausetena. Nimelt, et toetada väga vanu IE (Internet Explorer) brausereid, siis oleks hea kui HTML kasutaks elemente/resursse, mis on üldtoetatud. Siin tulevadki appi tingimuslaused.

Näiteks, kui tahame, et IEs kasutaksime vanemat JSi teeki, kuid muudes brauserites uuemat, siis peaksime selle kirja panema järgmiselt:

Kui tegemist ei ole IEga, siis kasuta uut teeki
<!--[if !IE]><!-->
    <script src="uus.js"></script>
<!--<![endif]-->

Kui tegemist on IEga, siis kasuta vana teeki
<!--[if IE]>
    <script src="vana.js"></script>
![endif]-->

Ehk lühemalt öeldes:
<!--[if !IE]><!-->
    Kui brauser ei ole IE, siis kasuta seda koodi siin
<!--<![endif]-->

<!--[if IE]>
    Kui brauser on IE, siis kasuta seda koodi siin
<![endif]-->

Nagu näed on üldine süntaks järgmine: kõik tingimuslaused käivad nurksulgude [] sees; kõik tingimuslaused on piiritletud kommentaaridega; IE kood on teistes, laiemini toetatud brauserites kommentaarina; tingimuslaused lõpetakse ära ![endif] käsklusega.

Tingimuskommentaarid ei ole tänapäeval eriti enam levinud, kuid neid võib siiski aeg-ajalt märgata.

Kuna selle teema peale võib eraldi postituse teha (mida ma võib olla ka teen), siis ei hakka ma praegu detailidesse minema.

Kui kedagi väga huvitab, siis siit võib leida päris korraliku õpetuse.

Enda veebilehes kasutasin kommentaare kohe pärast veebilehe pealkirja. Inspekteeri veebilehte või vaata veebilehe lähtekoodi, et neid näha.

 

<span></span> – siseelement; tähistab siseelementide grupeeringut ehk kahe sõnaga öeldes on <span> siseelementide sektsioonielement. <span> elementi ei kasutata ainult siseelementide grupeerimiseks, vaid seda kasutatakse väga tihti teksti ja muu sellise stiilimiseks. <span> on väga levinud ja seda võib leida põhimõtteliselt kõikjalt. Teda võib võrrelda elemendiga <div>, sest ühtegi kindlalt otstarbet ega stiili <span> (nagu <div> elementki) ei oma. Sõna span on ingliskeelne sõna ja tähendab eesti keeles vahet/sillet.

Näidises kasutasin <span> elementi illusteerimaks, kuidas minu kass välja näeb (erilised sõnad on <span> elemendid).

 

<progress></progress> – defineerib HTMLis ära edenemisnäituri. Tavaliselt kujutatakse seda kui edenemisriba (progress bar). <progress> elementi kasutatakse tihti koos JavaScriptiga ja selle põhimõte on anda kasutajale teavet kuidas on olnud senine progress mingi ülesande täitmisel. Progress on inglise keelne sõna, mis eesti keeles tähendab progressi ehk edasiarengut.

<progress> elemendil on kaks unikaalset atribuuti:

  • value="number" – tähistab ja kujutab praeguse ülesande progressi ja järele jäänud samme/ülesandeid.
  • max="number" – tähistab praeguse ülesande lõppstaadiumit.

<progress> elementi kasutasin enda veebilehes näitamaks, kuidas edeneb minu päevaplaan. Praegu on umbes 20% tehtud.

 

<meter></meter> – tähistab HTMLis mingit suurusjärku (nt. kettakasutust). <meter> on sarnane elemendiga <progress>, kuid erinevalt <progress> elemendist ei tohi <meter> elementi kasutada progressi näitamiseks. <progress> elementi aga ei tohi kasutada mingi mõõtühiku/suurusjärgu näitamiseks. Sõna meter tuleb inglise keeles ja eesti keeles tähendab see meetrit, kuid siin oleks sellest targem mõelda kui mõõtühikut/suurusjärku.

<meter> elemendil on päris palju atribuute:

  • form="form-id" – määrab ära, millise formi juurde kuulub <meter> element. Väärtuseks on formi (globaalne) atribuut id.
  • value="number" – paneb paika praeguse väärtuse <meter> elemendil. Tegemist on ainukese kohustusliku atribuudiga.
  • min="number" – määrab ära, mis on <meter> elemendi minimaalne lubatud väärtus.
  • max="number" – erinevalt min atribuudist, paneb max paika, mis on <meter> elemendi maksimaalne lubatud väärtus.
  • low="number" – määrab ära, millist väärtust loetakse kui madalaks väärtuseks. Alla low atribuudi väärtusest loetakse <meter> väärtust madalaks.
  • optimal="number" – paneb paika, millist väärtust loetakse optimaalseks/parimaks väärtuseks.
  • high="number" – sarnaselt kahe viimasele, paneb high atribuut paika, millist väärtust loetakse kõrgeks väärtuseks.

Enda veebilehes kasutasin <meter> elementi näitamaks minu kettamahu kasutust. Võib olla peaks tegema väikese puhastuse 😀 .

 

<dialog></dialog> – defineerib ära dialoogi/sõnumi kasti. <dialog> elemendi toetus ei ole eriti suur ja seda eriti ei kasutata. Sõna dialog on inglise keelne sõna ja tähendab eesti keeles dialoogi.

<dialog> elemendil on üks talle omane atribuut ja see on kahendloogika atribuut open="open", mis määrab ära, kas dialoogi kast on nähtav või nähtamatu.

Näidises kasutasin <dialog> elementi viitamaks tagasi minu veebilehele, et lugeja saaks veel nautida minu contenti.

 

<menu></menu> – ma ei räägi siin sellest elemendist pikalt, sest tema toetus on väga väga halb – selletõttu ei ole ma seda lisanud näidetesse ega ka välja toonud atribuudid. Praegu toetab ametlikult <menu> elementi ainult Firefox ja seda ka ainult osaliselt. <menu> elemendi ülesandeks on luua HTMLi rippmenüü erinevatest käskudest. Tal on olemas üks poolkohustuslik lapselement ja see on <menuitem>. Ingliskeelne sõna menu tähendab eesti keeles menüüd.

Kui kedagi huvitab <menu> ja <menuitem> rohkem, siis siit võib leida lisainfromatsiooni

 

Ja ongi HTMLi erilised elemendid läbi võetud.

Koduülesannet ma sulle ei annaks, aga vaata need elemendid üle ja mõtle, et kas sa saad aru, miks ja kuidas neid kasutatakse. Kui jah, siis sa ei pea neid elemente realselt koodi panema. Kui aga ei, siis kirjuta need koodi ümber – harjutamine teeb meistriks.

Ma ütlen veel ühe asja ära, et järgmist HTMLi kursuse osa ei pruugi tulla järgmise kuu teisel nädalavahetusel, sest ma plaanin täiendada natukene HTMLi kursuse postitusi, et saada kõik elemendid läbi võetud – siis saame asuda teooria kallale.

Ma arvan, et mingi update siiski tuleb.

 

Kui sul küsimusi/probleeme tekkis, siis anna julgelt kommenteerides teada 🙂 !


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 *