HTMLi kursus #4.1 – Nimekirjad

HTMLi kursus #4.1 – Nimekirjad

Eelmine osa: HTMLi kursus #3 – Tekst

Enne kui lähen tänase postituse juurde ütlen ma kohe ära, et siin on plokkelemendid plokkelemendite sees. Tegemist on võib olla praegu natukene “illegaalse” tegevusega, kuid teatud mõttes on tänased lapselemendid sektsioonelemendid. Need jaotavad elemendi sisu mitmeks erinevateks osadeks.

Näidisleht (pöörake tähelepanu erinevatele nimekirjadele)

Lähtekoodi nägemiseks klikkage paremal üleval nurgas “HTML”  vahelehe peale ja tulemuse nägemiseks (milline veebileht välja näeb antud lähtekoodiga) klikkage “HTML” valiku kõrval olevat “Result” vahelehte.

Täieliku näidislehe võib leida siit (interaktiivne näide siin). Näidislehte soovitaksin kindlasti inspekteerida. Edaspidi on näidisleht kas lihtsalt näidis või oma veebileht.

Lisaks näidisele on ka olemas konspekt (interaktiivne näide siin), mida oleks hea kasutada näiteks koduülesande tegemisel.

Kui hakkate elemente õppima, siis kindlasti inspekteerige näidislehte (just seda elementi, mille kohta parasjagu loete). Konspekti vaatamine tuleb ka kindlasti kasuks.

Nimekirja elemendid

<li></li> – seda elementi kasutatakse väga tihti nimekirjade lapselementidena. Õigemini see on tegelikult kohustuslik element nimekirjades, sest nõnda teab HTML üles märkida, mis on nimekirja osad. <li> element tähistab nimekirja ühte osa ja kujutatakse vastavalt emaelemendile. Lühend li tuleb ingliskeelsest sõnast list item, mille eestikeelne vaste on nimekirja osa/asi.

Emaelement (ehk nimekirja tüüp) määrab ära, kuidas <li> elementi kujutatakse ja ka tegelikult tähistatakse.

<li> elemendil on üks temale iseloomulik parameeter, mida kasutatakse ainult <ol> elemendi juures ja see on value, mis tähistab selle nimekirja osa positisiooni nimekirjas.

value="number"<li> element asub järjestatud nimekirjas antud numbril/arvul (ehk tema ette tuleb järjekorra number antud väärtusega)

<li> elementi kasutasin näidises nii <ul> kui <ol> elemendi sees.

 

<ul></ul> – kõige tavalisem ja kõige rohkem kasutatud nimekirja tüüp. Tähendab järjestamata nimekirja (nt. ostu nimekiri jne). <li> elementi kujutatakse (just <li> elementi, sest <ul> element paneb siin paika lapselementide stiili) siin tavaliselt normaalse tekstina, mille ees on taandreaga ring/punkt. Lühend ul tuleb ingliskeelsest sõnast unordered list, mis eesti keeles tähendab järjestamata nimekirja.

Näidises olen kasutanud <ul> elementi lihtsalt näitamaks mingeid suvalisi fakte minust ja muust suvalises järjekorras.

Järjestamata ehk <ul> nimekiri

 

<ol></ol> – tähistab järjekorras nimekirja. <li> elementi kujutatakse siin ka tavalise tekstina, aga millel on ees taandreaga vastav järjekorra number/täht. Lühend ol tuleb ingliskeelsest väljendist ordered list, mis tähendab järjekorras olevat nimekirja.

<ol> elemendil on kolm temale omast atribuuti.

  1. reversed – kas järjekord on tagurpidi (väärtuseks ei ole tal midagi ehk kui kirjutad atribuudiks reversed, siis nimekiri on juba tagurpidi)
  2. start="number" – mis numbrist järjekord peaks algama
  3. type="1 | a | A | i | I"–  milline on nimekirja tähistamisviis

1 – araabia numbritega
a – väikeste tähtedega (tähestiku järjekorras)
A – suurte tähtedega (tähestiku järjekorras)
i – väikeste rooma numbritega (nt. i ja ix)
I – suurte rooma numbritega (nt. I ja IX)

Oma veebilehes kasutasin <ol> elementi tähistamaks oma lemmiktoite tähtsuse järjekorras.

Järjestatud ehk  <ol> element erinevate atribuutidega

 

Me võime ka ülemised nimekirja elemendid (<ul> ja <ol>) koos lapselementidega panna teise nimekirja sisse. Ehk ühe <ul> elemendi sees on teine <ul> element.

Üks nimekiri teise nimekirja sees (alamnimekiri)

<ul> elemendi puhul muudab HTML <li> stiili, kui tema emaelement on teise <ul> elemendi sees.

<ol> elemendi puhul tuleks stiili muuta kasutades parameetrit type (seda on ka näha konspektis).

Enda veebilehes näitasin seda siis täpsutamiseks, et mis on Soome pealinn.

 

<dl></dl> – on erinev teistest nimekirjadest. Nimelt tal ei ole kohustuslikuks lapselemendiks <li>, vaid selle asemel on <dt> ja <dd> elemendid (nendest räägin allpool). <dl> element tähistab nimekirja erinevatest terminitest ja nende kirjeldusest. Jällegi ühtegi otsest stiili <dl> elemendil pole, vaid tema lapselementidel on. Lühend dl tuleb ingliskeelsest väljendist description list, mis tähendab kirjeldavat nimekirja.

Kasutasin <dl> elementi tähtsamate veebiarendusega seotud terminite välja toomisel ja seletamisel.

 

<dt></dt> – on <dl> elemendi esimene kohustuslik lapselement ja tähistab nimekirja mingit terminit, mida peaks lahti seletama. Kujutatakse tihtipeale tavalise tekstina. Lühend dt tuleb ingliskeelsest väljendist definition (description list) term, mille eestikeelne vaste on (kirjeldusnimekirja) kirjeldatav termin.

<dt> elementi kasutasin näidises <dl> elemendi sees, mis pani paika veebiarendusega seotud terminid.

 

<dd></dd> – on <dl> elemendi teine kohustuslik lapselement ja tähistab nimekirja termini seletust. Kujutatakse tihti taandreaga. Lühend dd tuleb ingliskeelsest väljendist (description list) termin descritpion, mis tähendab eesti keeles (kirjeldusnimekirja) termini kirjeldust.

<dd> elementi kasutasin ka näidises <dl> elemendi sees.

Kirjeldav ehk  <dl> nimekiri

 

Annan sulle ühe koduülesande ka. Lisa kõik siin postituses välja toodud nimekirjad enda tehtud veebilehte (nagu HTMLi kursuse 3. osa koduülesanne). Ja jälle, ära tuubi neid elemente pähe, vaid pigem lihtsalt koguaeg harjuta. Kasuta konspekti!

 

Kas tekkis küsimusi? Kui jah, siis andke kommentaarides teada 🙂 !

Järgmine osa: HTMLi kursus #4.2 – Tabelid

 

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 *