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.

Kommentaarid

<!-- 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.

HTMLi entities

Tihtipeale peavad veebiarendajad kasutama HTMLis erilisi märke nagu näiteks copyright‘i märki. Otseselt sellist sümbolit meil klaviatuuril ei ole ning kopeerimine mingist muust allikast ei pruugi alati tulemust anda.

Lisaks sellele on kopeerimine üsnagi halb viis sümbolite sisestamiseks HTMLi, kuna HTMLi sümbolite kasutus sõltub erinevatest fontidest ja ka dokumendi tähestiku koodist (<meta> element koos charset atribuudiga).

Üks võimalus oleks siis kasutada vastavaid fonte, kuid need on mahurohked ja ühe sümboli pärast ei hakkaks keegi uusi fonte importima. Teine võimalus oleks kasutada siis õiget tähestiku koodi, kuid seegi võib erilisemate sümbolite puhul alt vedada. Näiteks < ja > sümbolid alustavad alati HTMLis uut elementi, kuid nagu ise näed, suudab ka HTML neid siiski renderdada ilma vigadeta.

Sellisteks puhtudeks on õnneks HTMLis olemas entities (eesti keeles kõige parem vaste vist oleks sümbolite koodid), mis lubavad HTMLi sisestada erinevaid erilisi sümboleid (kaasa arvatud < ja >), olenemate fondist ja dokumendi tähestiku koodist.

Entities ülesanne tegelikult sellega piirdubki – neid kasutataksegi ainult selleks, et HTMLi erinevaid sümboleid sisestada.

Nende kasutamine on üsnagi lihtne, üldkuju nende kasutamisel on selline:

&entity_nimi;
&#entity_number;
&#xunicode_hex;

Ehk tuleks teada, kas kindla entity nime, numbrit või unicode hex‘i.

Näiteks, et dokumenti sisestada järgmisi sümboleid, tuleb kasutada järgmisi entity koode (nimi; number; hex):

  • & – &amp; või &#38; või &#x2193;
  • < – &lt; või &#60; või &#x3c;
  • > – &gt; või &#62; või &#x3e;
  • € – &euro; või &#8364; või &#x20AC;
  • © – &copy; või &#169; või &#xa9;

Veel on võimalus kasutada HTML entity‘ed rõhkudena ja sümbolitena tähtede peal (tähtede pealised on ainult koodidega):

  • à – a&#768;
  • á – a&#769;
  • â – a&#770;
  • ã – a&#771;

Iseenesest on ka olemas nimed, koodid ja unicode hex‘id erinevate eriliste tähtede (nt täpitähtede) jaoks olemas, aga need on tegelikult täiesti eraldi olevad (tähe)sümbolid (nt á = &aacute;).

Kasutades aga neid, mis üleval on, siis saan lisada sümboleid ükskõik, mis tähtedele (nt b̀ = b&#768;; c̀ = c&#768; jne.)

Võib olla tekkis sul vahepeal küsimus, et millist varianti eelistada, kas nimega, numbriga või hex‘iga. Erilist vahet tegelikult seal ei ole, kuid arvatavasti on kõige mõtekam kasutada nimega varianti (&euro;), sest siis võib olla jäävad mõningad korduvkasutatavad entity‘d sulle pähe ning aitavad sul aega kokkuhoida.

Otseselt neid sümbolite koode pole mõtet pähe õppida, kuna neid on lihtsalt liiga palju. Üleüldse tuleks tegelikult kõik veebiarendusega lihtsalt läbi praktika meelde jätta, sest ka enamustest elementidest ei ole kogu aeg kasutuses.

Kui sul tekib vajadus mingit sümbolit kasutada, siis nende koodid selleks võid leida siit, siit ja siit.

Erilised elemendid seletatult

<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 edenemisribana (progress bar). <progress> elementi kasutatakse tihti koos JavaScriptiga ja selle põhimõte on anda kasutajale teavet kuidas on olnud senine progress mingi ülesande, nt formi täitmisel või faili üleslaadimisel. <progress> elementi võib lisada ka teksti, mis toimiks kui fallback option brauseritele, mis seda elementi ei toeta. Progress on ingliskeelne 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. Ka <meter> elementi lisada fallback teksti. Sõna meter tuleb inglise keeles ja eesti keeles tähendab see mõõdikut.

<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 😀 .

 

<wbr /> – tegemist on tegelikult tekstiga seotud elemendiga, aga kuna ta on natukene erilisem, siis otsustasin, et lisan antud elemendi siia postitusse. Nimelt <wbr> tähistab tekstis kohta, kus brauser võib sõna poolitada. Näiteks kui sul on pikk sõna “telekommunikatsiooniministeerium” ja sa märkad, et brauser poolitab seda väiksemal ekraanil imelikult või ei poolita üldse, siis sa saad panna paika, kus brauser peaks seda poolitama. Lühend wbr tuleb inglise keelest (word break opportunity) ja tähendab eesti keeles sõna poolitamise võimalust, kuid ma ei soovitaks sellega tegelikult poolitada, kuna HTMLis on olemas veel parem võimalus antud otstarbeks. Nimelt sobib selleks väga hästi &shy; entity, mis tekitab sõna poolitamisel “-” märgi.

<wbr> ei ole ühtegi temale omast atribuuti.

Näidises kasutasin <wbr> pikas sõnas kohe enne <dialog> elementi. Nagu kasti suuruse muutmisel näha võid, poolitub “telekommunikatsiooniministeerium” õigete kohtade peal, kuid “infotehnoloogiaministeerium” ei poolitu üldse. Sõna “telekommunikatsiooniministeerium” puhul on kasutuses <wbr> elemendid. Lisasin näitesse ka sõna “põllumajandusministeerium” koos entity‘idega &shy;.

 

<details></details> – üsna halva toetusega sektsioonielement; kasutatakse lisainfo edastamiseks kasutajale. <details> loob tegelikult HTMLi kasti, mida kasutaja saab ise avada ja ka kinni panna. Siia sisse tuleks kirjutada mitte-oluline info. Lisaks sellele kasutatakse <details> elementi koos <summary> elemendiga, mis teeb mitte-olulisest infost kokkuvõtte (sellest ka allpool). Details on inglise keelne sõna ja eesti keeles tähendab detaile.

<details> elemendil on olemas üks temale omane kahendloogika atribuut ning see on open="open", mis tähistab seda, et <details> elemendi sisu peaks olema kasutajale koheselt näha (element on koheselt avatud). Selle puudumisel (vaikimisi olekus) on <details> element kinni (sisu ei ole näha).

<details> elementi kasutasin koos <summary> elemendiga enda veebilehe lõpus (Copyright notice). Klikka noole peal, et <details> sisu näha.

 

<summary></summary> – loob <details> elemendile nähtava pealkirja, mille peale klikkamisel on võimalik näha <details> elemendi sisu või see ka kinni panna. Nagu nimigi ütleb, siis <summary> eesmärk on teha <details> elemendist kokkuvõte (inglise k. summary on kokkuvõte).

<summary> puudumisel kasutab brauser <details> pealkirjaks lihtsalt “Details“.

Nagu varem mainisin, siis kasutasin <summary> elementi <details> elemendiga veebilehe lõpus. See on see Copyright notice.

 

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

<dialog> elemendil on üks talle omane atribuut ja see on kahendloogika atribuut open="open", mis nagu <details> elemendil, määrab ära, kas dialoogi kast on nähtav või nähtamatu. Siin otseselt kasutaja <dialog> elementi ise avada/kinni panna ei saa.

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 atribuute. 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 reaalselt 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.

 

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

Järgmine osa: HTMLi kursus #10.1 – Elementide tähendus ja content model


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 *