සුභ දවසක් හැමෝටම,

අද අපි ඉගෙන ගන්න යන්නේ HTML වලින් Ordered List එකක් හා Unordered List එකක් හදන්නේ කොහොමද කියලා. අද පාඩම පටන් ගන්න කලින් අපි පසුගිය HTML  පාඩම් මාලා මතක් කරගනිමු,

  1. ‌HTML හැදින්වීම හා ඉතිහාසය #පාඩම් මාලාව 01
  2. Basic HTML Tags හදුනගනිමු #පාඩම් මාලාව 02
  3. Simple Web Page එකක් හදමු. #HTML පාඩම් මාලාව 03
  4. වෙබ් පිටු නිර්මාණය #HTML Text Formatting Explained #Lesson04
  5. HTML Style වලින් වැඩකරන්න ඉගෙනගමු #පාඩම් මාලාව 05
  6. HTML Page එකකට Image එකක් Add කිරීම. #පාඩම් මාලාව 06
  7. HTML Page එකකට Links – Hyperlinks ඇතුළත් කිරීම #පාඩම් මාලාව 07
  8. Web Development – Underline,Line-through හා Overline භාවිතය
  9. HTML Table ණිර්මාණය කරමු #පාඩම් මාලාව 08

ඉස්සල්ලම අපි මේ පාඩමට අදාල ටැග්ස් ගැන දැනගෙන ඉමු.

<ol></ol> = Ordered List එකක් හදුනා ගැනීමට මෙම ටැග භාවිතා කරයි

<ul> </ul> = Unordered List එකක් හදුනා ගැනීමට මෙම ටැග භාවිතා කරයි.

<li></li> = මේ ලැයිස්තු තුල ඇති  අයිතම එකින් එක  ඇතුලත් කිරීමට මෙම ටැග භාවිතා කරයි.

List ප්‍රධාන වශයෙන් type දෙකයි. ඒ Ordered List හා Unordered List වශයෙනුයි. හරි අපි එහෙනම් බලමු මොනවද මේ Ordered හා Unordered කියන්නේ කියලා.

1.) An Ordered List –

Ordered List කියන්නේ කිසියම් පිලිවෙලකට සලකුණු කරන ලද List එකක්. උදාහරණයක් විදිහට අපි පොඩි List එකක් ලියාගමු.

  1. දුලාන්
  2. හසුන්
  3. සමිත
  4. ලක්ශාන්

බලන්න මේ list එක ඇවිත් තියෙන්නේ පිළිවෙලට. 1 ඉලක්කමෙන් පටන් අරන් 2,3,4 ආදී වශයෙන්. එසේ පිළිවෙලකට සදහන් කරන ලිස්ට් Ordered List ලෙස හදුන්වන්න පුළුවන්.  මෙය a b c d හෝ i ii iii iv  ලෙසද දැක්විය හැකිය.

දැන් අපි බලමු html භාවිතයෙන් මේ Ordered List එකක් හදන්නේ කොහොමද කියලා.

  • Ordered List එකක් හදුනා ගැනීමට <ol></ol> ටැග භාවිතා කරයි.
  • මේ තුල ඇති ලැයිස්තු අයිතම එකින් එක <li></li> ටැග තුල ඇතුලත් කරනු ලබයි.
  • Ordered List එකක් Numbers,Letters හා Roman Numbers ලෙස නිර්මාණය කල හැක.

Ordered List with Numbers

<ol type=”1″> මගින් list එක ඉලක්කම් වලින් පටන් ගන්නා එකක් බව තීරණය කරයි.

OUTPUT:- 



Ordered List with Letters

<ol type=”A”> මගින් list එක Letters වලින් පටන් ගන්නා එකක් බව තීරණය කරයි. Uppercase Letters වලින් ලිස්ට් එක දැක්වීමට අවශ්‍යයනම් <ol type=”A”> ලෙසද, Lowercase Letters වලින් ලිස්ට් එක දැක්වීමට අවශ්‍යයනම් <ol type=”a”>  ලෙසද සදහන් කල යුතුය.

OUTPUT:- 



Ordered List with Roman Numbers

<ol type=”I”> මගින් list එක Roman Numbers වලින් පටන් ගන්නා එකක් බව තීරණය කරයි. Uppercase Roman Numbers වලින් ලිස්ට් එක දැක්වීමට අවශ්‍යයනම් <ol type=”I”> ලෙසද, Lowercase Roman Numbers වලින් ලිස්ට් එක දැක්වීමට අවශ්‍යයනම් <ol type=”i”>  ලෙසද සදහන් කල යුතුය.

OUTPUT :- 



2.) Unordered List –

Unordered List කියන්නේ කිසියම් සංකේතයක් එහෙමත් නැත්නම් Bullets යොදාගෙන හදනු ලබන list එකකටයි. පහත උදාහරණය බලන්න.

  • දුලාන්
  • හසුන්
  • සමිත
  • ලක්ශාන්

මෙහි යොදාගෙන තියෙන්නේ Bullets . මේ Bullets වර්ග 3කට බෙදන්න පුළුවන් Disc Bullets,Circle Bullets හා Square Bullets වශයෙන්.

දැන් අපි බලමු html භාවිතයෙන් මේ Unordered List එකක් හදන්නේ කොහොමද කියලා.

  • Unordered List එකක් හදුනා ගැනීමට <ul> </ul> ටැග භාවිතා කරයි.
  • මේ තුල ඇති ලැයිස්තු අයිතම එකින් එක <li></li> ටැග තුල ඇතුලත් කරනු ලබයි.
  • Unordered List එකක් Disc Bullets,Circle Bullets හා Square Bullets වශයෙන් නිර්මාණය කල හැක.

 

Disc Bullets

<ul style=”list-style-type:disc”> මගින් List එක Disc Bullets වලින් සමන්විත එකක් බව තීරණය කරයි.

OUTPUT:-

 


Circle Bullets

<ul style=”list-style-type:circle”> මගින් List එක Circle Bullets වලින් සමන්විත එකක් බව තීරණය කරයි.

OUTPUT:-


Square Bullets

<ul style=”list-style-type:square”> මගින් List එක Square Bullets වලින් සමන්විත එකක් බව තීරණය කරයි.

OUTPUT:-


මීට අමතරව කිසිදු Bullets එකකින් තොර list එකක් සාදාගන්නද පුළුවන් මේ ආකාරයෙන්

<ul style=”list-style-type:none”> මගින් කිසිදු Bullets එකක් භාවිතා නොකර ඇති බව තීරණය කරයි,

OUTPUT:-

 

අද අපි මේ කතා කලේ HTML List බෙදෙන ප්‍රධාන වර්ග දෙක ගැනයි, එනම් Ordered List හා Unordered List සම්බන්ධවයි. මීට අමතරව Description Lists,Nested Lists හා Horizontal Lists ලෙස වර්ග කරයි. අපි ඒවා ඊලග HTML පාඩමෙන් කථා කරමු,

සැමට සුභ දවසක්!

අදහස් දක්වන්න

අදහස්

  • පට්ට ලිපියක්
  • සතුටු දායකයි
  • අපරාදේ
  • වැඩක් නෑ
‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,