HTML LIST (ලිස්ට්) එකක් හදමු...

“ලිස්ට්“ අහලා පුරුදු වචනයක් නේද? ඔවු ඔවු..  අහලනම් තියෙනවා..  “ලිස්ට්“ සමහර අවස්ථාවලදී මේ වගේ ලිස්ට් අපේ වෙබ් අඩවි වලටත් ඔනි වෙනවා...  අන්න ඒ වගේ අවස්ථාවක අපේ වෙබ් අඩවියකටත් ලිස්ට් එකක් දාගන්නේ කොහොමද කියලා කියලා දෙන්න තමයි අද මම උත්සහ කරන්නේ...

හරි ඔයාලා දන්නවත් ඇති ලිස්ට් එක එක විදිහේ ඒවා තියෙනවානේ...  ඉතින් මේ එක එක විදිහේ ලිස්ට් ප්‍රධාන කොටස් දෙකකට බෙදා දක්වන්න පුළුව්න් ඒවා තමයි


                             01. Order List - එකේ සිට අපට අවශතරම් අංකනය කරමින් දක්වන ලිස්ට්
                             02. Unorder List. -  අංකනය කිරීමකින් තොරව දක්වන ලිස්ට්.

මීට අමතරව භාවිතා වෙනවා. Definition Lists කියන ඒවාත්..

ඉතින් මේ ලිස්ට් වර්ග දෙක මේ විදිහටම වෙබ් ඩිසයින් වලදීත් භාවිතා වෙනවා...


01. Order List - එකේ සිට අපට අවශතරම් අංකනය කරමින් දක්වන ලිස්ට්

අපි බලමු කොහොමද මේ ඕඩර් ලිස්ට් එකක් හදන්නේ කියලා...

මේ සදහා අපි ප්‍රධාන වශයෙන් පාවිච්චි කරනවා <ol></ol> = order list  කියන ටැග් එක . මීට අමතරව පොදුවේ <li></li> = list  කියන ටැග් එක භාවිතා කරනවා...  වෙබ් ඩිසයින් වලදී නිවැරදි ආකාරයට ඕඩර් ලිස්ට් එකක් හදාගන්න නම් මේ ටැග් දෙකම අත්‍යාවශ්‍යයි...
පහල උදාහරණය බලන්නකෝ..

1. අටුව වෙබ් අවකාශය
2. වෙබ් ඩිසයින් ඉගනගමු

මෙන්න මේ ක තමා අපි හදන්න යන්නේ...  මේකනම් කියලා දෙන්න තරම් දෙයක් නෙවේ කියලා හිතෙයි පහල කෝඩ් ටික දැක්කහම


<ol>
       <li>අටුව වෙබ් අවකාශය</li>
       <li>වෙබ් ඩිසයින් ඉගනගමු</li>
</ol>


මේ විදිහට අපිට අවශ්‍ය තරම්  “<li> ටෙක්ස්ට්</li>“  වැනි කොටස් එක්කරගත හැකි අතර ඒ එකින් එක පිළිවලින් ස්වයංක්‍රීයව අංකනය වේ.

 02. Unorder List. -  අංකනය කිරීමකින් තොරව දක්වන ලිස්ට්.

අපි බලමු දැන් අන්ඕඩර් ලිස්ට් එකක් හසන හැටි..
හරිම පහසුවෙන් කරන්න පුළුවන් . මේ සදහා කළ යුත් තේ ඩතාම සරළ දෙයක් පමණි...  ඉහක උදාහරණය සලකමු..
 කළයුත්තේ ඒහි ඇති  <ol></ol>   ටැග් වෙනුවට <ul></ul> = unorder list යන ටැග් භාවිතා කරීම පමණි...

• අටුව වෙබ් අවකාශය
• වෙබ් ඩිසයින් ඉගනගමු

පෙන්වා නේද වෙනස ? මෙතනදී වෙලා තියෙන්නේ අංක වෙනුවට වෙන හඩතලයක් ආදේශ වීමයි...


<ul>
       <li>අටුව වෙබ් අවකාශය</li>
       <li>වෙබ් ඩිසයින් ඉගනගමු</li>
</ul>

මේ විදිහට අපිට අවශ්‍ය තරම්  “<li> ටෙක්ස්ට්</li>“  වැනි කොටස් එක්කරගත හැකි අතර ඒ එකින් එක පිළිවලින් ස්වයංක්‍රීයව අංකනය නොවේ.

03. Definition Lists

මොනවාද මේ Definition Lists කියන්නේ...  පහත උදිහරණය බලන්නකෝ

පළතුරු

- අඹ

- පේර

- ජම්බු

එළවළු

- කැරට්

- බතල

- ගොවා

වෙනස පේනවා නේද? මේක වඩනින් විස්තර කරන්න නම් මට තේරෙන්නේ නැහැ...  මේ Definition ලිස්ට් වලදී ටැග් වර්ග තුනක් භාවිතා කරනවා..

ප්‍රධාන ටැග් එක තමා <DL> </DL> = Definition List   සරලව කියනවානම් ඉහත <ol></ol> = order list ටැග් එක වෙනුවට තමා මේක භාවිතා කරන්නේ...

මේ තුළට භාවිතා කරනවා <dt></dt> = Definition Text කියන ටැග් එක. මෙහි ඇතුලත් වෙන්නේ “මාතෘකාව, නම හෝ විස්තරයට අදාල කරුණ“ වගේ දෙයක් උදාහරණයට අනූවනම් “පළතුරු“  කියලා සදහන් වෙන්නේ මෙහියි.

එයත් ඇතිලට තමා එකතු කරගතයුත්තේ <dd></dd> = Definition description කියන ටැග් එක.  ඒ කියන්නේ මෙහි තමා ඇතුලත් වෙන්නේ විස්ථරය.  උදාහරණයට අනූවනම් “අඹ , පේර , කැරට්“ යන වදන් භාවිතා කර ඇත්තේ මේ ටැග්යන් තුළය.

පහත කෝඩ් පරික්ෂා කර බැලීමෙන් ඔබට වටහා ගත හැකි වේවී...


<dl>
      <dt>පළතුරු</dt>
             <dd>- අඹ</dd>
             <dd>- පේර</dd>
             <dd>- ජම්බු</dd>
      <dt>එළවළු</dt>
             <dd>- කැරට්</dd>
             <dd>- බතල</dd>
             <dd>- ගොවා</dd>
</dl>



එහෙනම් හැමෝම මේවා කරලාම බලන්න නැත්නම් වැඩක් නැහැ... පෝස්ට් දනාන්න කල් යන එක ගැන සමාවෙන්න. විවිධ වැඩ නිසා කාලය මග හැරෙනවා මේකට... හැකි විදිහට පෝස්ට් එකතු කරන්න උත්සහ කරන්නම්...  ඔබටත් ප්‍රෙයා්ජනවත් වූවානම් එයයි මාගේ සතුට...  මම ගියා...