HTML5 Hap Pas Hapi: Përpilimi i listave

0

Autor: Skender Mustafi

Nga elementet shumë të rëndësishme të ueb faqes janë edhe listat të cilat mundësojnë organizimin e numërimeve ose rradhitjes së përmbajtjeve të ndryshme.

Njihen tre lloje të listave të cilat mund të programohen përmes HTML-së:

  1. Listat e numërimit
  2. Listat e me shenja
  3. Listat e definicioneve

Etiketa për paraqitjen e listave të numërimit është <ol></ol>, etiketa për paraqitjen e listave të shenjave është <ul></ul>, kurse etiketa për paraqitjen e listave të definuara është <dl></dl>. Etiketa, pjesë përbërëse e listave të numërimit dhe atyre me shenja që paraqet elementet e listës është <li></li>.

Listat e numërimit

Për të paraqitur një listë numrash shkruajmë:

Kodi Rezultati
<ol>
<li>HTML</li>
<li>CSS</b></li>
<li>Web</li>
<li>Programim</b></li>
</ol>
  1. HTML
  2. CSS
  3. Web
  4. Programim

Lista e më sipërme mund të thellohet në nën-lista të elementeve të saja duke shtuar po të njëjtin kod më sipër tek elementi ose elementet që duam t’i thellojmë. Le të thellojmë për shembull <li>Web</li>, kështu lista e plotë duhet paraqitur si vijon:<ol>

Kodi Rezultati
<ol>
<li>HTML</li>
<li>CSS</b></li>
<li>Web</li>
<ol>
<li>Programim</li>
<li>Dizajn</b></li>
<li>Menaxhim</li>
<li>Mirëmbajtje</li>
</ol>
<li>Programim</b></li>
</ol>
  1. HTML
  2. CSS
  3. Web
    1. Programim
    2. Dizajn
    3. Menaxhim
    4. Mirëmbajtje
  4. Programim

Listat e numërimit mund të manipulohen edhe më tej duke ndikuar në rregullimin e numrave sipas dëshirës. Le të marrim shembull që një listë duam të e fillojmë me një numër të caktuar x që ndryshon nga numri 1, sepse me numrin 1 në mënyrë standarde fillon lista, atëherë thjeshtë duke vendosur start=”x” tek etiketa <ol> bëjmë që lista të fillojë me numrin e dëshiruar. Shembull:

Kodi Rezultati
<ol start=”8″>
<li>HTML</li>
<li>CSS</b></li>
<li>Web</li>
<li>Programim</b></li>
</ol>
  1. HTML
  2. CSS
  3. Web
  4. Programim

Për më tepër mund të bëjmë që lista të thyhet në numërim sa herë që të duam dhe me vlerat që ne duam, varësisht nga nevoja. Këtë mund të e bëjmë duke u dhënë vlerë etiketave të radhitjes së elementeve në listë <li>, value=”x”.  Ajo që është lehtësuese në këtë rast është se etiketat pasuese të mbajtjes së elementeve nuk ka nevojë të marrin vlera meqë e marrin vlerën pasuese automatikisht nga etiketa me vlerë siç kemi në shembullin e më poshtëm 5,6,7,8… që marrin vlerën nga etiketa e definuar me 4 ose 101, 102, 103 që marrin vlerën nga etiketa e definuar me 100:

Kodi Rezultati
<ol>
<li value=”4″>HTML</li>
<li>CSS</b></li>
<li>Web</li>
<li>Programim</b></li><li>HTML</li>
<li>CSS</b></li>
<li>Web</li>
<li value=”100″>Programim</b></li>
<li>HTML</li>
<li>CSS</b></li>
<li>Web</li>
<li>Programim</b></li>
</ol>
  1. HTML
  2. CSS
  3. Web
  4. Programim
  5. HTML
  6. CSS
  7. Web
  8. Programim
  9. HTML
  10. CSS
  11. Web
  12. Programim

Listat e shenjave

Për të paraqitur një listë një listë shenjash shkruajmë:

Kodi Rezultati
<ul>
<li>Lista</li>
<li>sipas</li>
<li>shenjave</li>
<li>të ndryshme</li>
</ul>
  • Lista
  • sipas
  • shenjave
  • të ndryshme

Gjithashtu edhe listat e shenjave mund të thellohen në të njëjtën mënyrë sikur listat e numrave.

Kodi Rezultati
<ul>
<li>Lista</li>
<ul>
<li>të numërimit</li>
<li>të shenjave</li>
<li>të definuara</li>
</ul>
<li>sipas</li>
<li>shenjave</li>
<li>të ndryshme</li>
</ul>
  • Lista
    • të numërimit
    • të shenjave
    • të definuara
  • sipas
  • shenjave
  • të ndryshme

Kombinimi i listave të shenjave dhe listave të numërimit

Madje këto dy lloje të listave mund të kombinohen sipas dëshirës.

Kodi Rezultati
 <ol>
<li>HTML</li>
<li>CSS</b></li>
<li>Web</li>
<ul>
<li>Programim</li>
<ol>
<li>ASP</li>
<li>PHP</li>
<li>JavaScript</li>
</ol>
<li>Dizajn</b></li>
<li>Menaxhim</li>
<li>Mirëmbajtje</li>
</ul>
<li>Programim</b></li>
</ol>
  1. HTML
  2. CSS
  3. Web
    • Programim
      1. ASP
      2. PHP
      3. JavaScript
    • Dizajn
    • Menaxhim
    • Mirëmbajtje
  4. Programim

Listat e definicioneve

Listat e definicioneve janë listat që paraqesin termet me definicionet e tyre. Pra, ky është qëllimi kryesorë i këtyre listave, por që sipas nevojës mund të shfrytëzohen dhe për qëllime tjera. Etiketa e definimit të këtyre listave është <dl></dl>, etiketa e paraqitjes së termeve në listë është <dt></dt>, kurse etiketa e paraqitjes së definicioneve është <dd></dd>. Shembull:

Kodi Rezultati
<dl>
<dt>Arie</dt>
<dd>Pjesë lirike për një zë, që shoqërohet me një vegël ose me orkestër (zakonisht pjesë e një opere ose operete). Arie nga opera. Këndoj një arie.</dd>
<dt>Babanace</dt>
<dd>Bukë misri e zënë me ujë të ftohtë dhe e pa kulluar mirë në të pjekur; bukë e qullët, e papjekur mirë. S’hahej babanacja.</dd>
<dt>Cece</dt>
<dd>Miza cece zool.: mizë e vendeve të Afrikës, që me pickimin e saj shkakton sëmundjen e gjumit te njerëzit ose helmimin e kafshëve.</dd>
<dt>Gabel</dt>
<dd>Cigan endacak, arixhi.</dd>
</dl>
Arie
Pjesë lirike për një zë, që shoqërohet me një vegël ose me orkestër (zakonisht pjesë e një opere ose operete). Arie nga opera. Këndoj një arie.
Babanace
Bukë misri e zënë me ujë të ftohtë dhe e pa kulluar mirë në të pjekur; bukë e qullët, e papjekur mirë. S’hahej babanacja.
Cece
Miza cece zool.: mizë e vendeve të Afrikës, që me pickimin e saj shkakton sëmundjen e gjumit te njerëzit ose helmimin e kafshëve.
Gabel
Cigan endacak, arixhi.

Stilizimi i listave përmes CSS

Listat mund të marrin dhe atribute të ndryshme të cilat u përcaktohen përmes kodit të stilizimit. Atributet që mund t’i marrin janë:

  • Për listat me shenja
    • circle – rreth i zbrazët
    • square – katror i mbushur
  • Për listat e numërimit
    • decimal-leading-zero – numra të cilëve u prinë zero: 01, 02, 03, 04
    • lower-roman – numrat romak: i, ii, iii, iv
    • upper-roman – numrat romak me shkronja të mëdha: I, II, III, IV
    • lower-alpha – shkronjat e vogla të alfabetit: a, b, c, d
    • upper-alpha – shkronjat e mëdha të alfabetit: A, B, C, D
  • none – asgjë

Atributet e mësipërme mund të i bashkëngjiten cilësdo listë ose nën-listë që dëshirojmë. Kështu për të aplikuar një atribut të dëshiruar në listën e shenjave shfrytëzojmë kodin <ul style=”list-style-type: square”> ose në listën e numërimit <ol style=”list-style-type: upper-roman”>.

Më poshtë po paraqesim listën e plotë të atributeve të cilat mund tu bashkëngjiten etiketave të sipër trajtuara për të rregulluar listat. Në kllapa janë etiketat për të cilat atributi ka vlerë:

  • reversed (<ol>) – numërimi bëhet nga prapa, 9, 8, 7, … Shembull: <ol reversed>
  • start (<ol>) – numërimi fillon nga një numër i caktuar. Shembull: <ol start=”5″>
  • type (<ol>) – lloji i numërimit. Shembull: <ol type=”1|a|A|i|I”> (njëra nga 1|a|A|i|I për të marrë vlerat vazhduese lista.
  • value (<li>) – numërimi fillon nga një numër i caktuar. Shembull: <li value=”4″>

Shembull
Ja një shembull i një liste të rregulluar:

Kodi Rezultati
<ol start=”4″ style=” background: 888fff; border: 1px; border-color: ffeeff; padding: 5px;”>
<li>HTML</li>
<li>CSS</b></li>
<li>Web</li>
<ul reversed style=” background: 666fff; border: 1px; border-color: ffeeff; list-style-type: square; padding: 7px;”>
<li>Programim</li>
<li>Dizajn</b></li>
<li>Menaxhim</li>
<li>Mirëmbajtje</li>
</ul>
<li>Programim</b></li>
</ol>
  1. HTML
  2. CSS
  3. Web
    • Programim
    • Dizajn
    • Menaxhim
    • Mirëmbajtje
  4. Programim

Komentet nga Facebook:

SHPËRNDAJE
Artikulli paraprakHTML5 Hap Pas Hapi: Nyjezimi
Artikulli tjetërHTML5 Hap Pas Hapi: Vendosja e simboleve
Themelues dhe mirëmbajtës i portalit “Fjalaime.ch”. BSc. i Administrimit të Biznesit dhe MSc. i Sistemeve Informative të Biznesit. Me punë dhe qendrim të përkohshëm në Zvicër, Winterthur. Studimet e mia qoftë akademike, qoftë private pasojnë sferën e ekonomsë me përqëndrim në drejtimet e menaxhimit dhe marketingut dhe teknologjisë informative me përqëndrim në shfrytëzimin e teknologjisë informative për zhvillim të biznesit..

S'KA KOMENTE

PËRGJIGJU

Kodi i sigurisë *