HTML lists - HTML ලැයිස්තු
වෙබ් පිටුවල විවිධ තොරතුරු ඉදිරිපත් කරනවිට ලැයිස්තු ආකාරයට ඒවා සඳහන් කරන්න පුළුවනි. එවිට වෙබ්පි ටුව කිසියම් පිළිවෙලකට සකස් වී ඉදිරිපත් කරන තොරතුරු වඩාත් පැහැදිලි වෙනවා. ඉතින් මේ html වල ලැයිස්තු හෙවත් lists සකස් කරන්නේ කොහොමද කියලා අපි බලමු. office මෘදුකාංගයේත් කරුණු පිළිවෙලකට සකස් කර පෙන්වීමට විවිධ ලැයිස්තු ආකාර තිබෙනවා. අපි ඒවාට කියන්නේ bullet types කියලා. එහිදී තිබෙන්නේ විවිධ බෝල,කොටු,තරු ආදී රූප. එමෙන්ම 1,2,3 a,b,c, A,B,C සහ i,ii,iii ආදී ලෙසත් ලැයිස්තු ඉදිරිපත් කරන්න පුළුවන්. html වල මෙම සියලු දේවල් යොදාගැනීමට භාවිතා කරන elements කිහිපයක් තිබෙනවා.
<ul> - An unordered list. මින් කියවෙන්නේ පිළිවෙලක් නැති ලැයිස්තුවක් කියන එකයි.
<ol> - An ordered list. මින් කියවෙන්නේ පිළිවෙලක් ඇති අංකිත ලැයිස්තුවක් කියන එකයි.
<dl> - A definition list. ශබ්දකෝෂ වල තිබෙන ආකාරයක් තමයි මෙය. එනම් කිසියම් කෙටි යෙදුමකට අදාළ දීර්ඝ අර්ථයක් තිබෙන ඒවා ඉදිරිපත් කිරීමට definition list භාවිතා කරනවා.
ලැයිස්තුවට ඇතුලත් කරන දත්ත සහ තොරතුරු ගොනු කරගැනීම සඳහා <li> යන tag එක යොදාගනී.
unordered list -
කිසියම් විශේෂිත පිළිවෙලක් හෝ අංකිත ආකාරයක් නොමැති දත්ත හෝ තොරතුරු ඉදිරිපත් කරන විට මෙම ක්‍රමය භාවිතා කරයි. මේ සංධා භාවිතා කරන html tag එක වන්නේ <ul> වේ. bullet ආකාරයකට මෙය නිරූපණය වේ.
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Science</li>
<li>Maths</li>
<li>Englsih</li>
<li>ICT</li>
</ul>
</body>
</html>
ඉහත නිදසුනෙන් අපිට ලැබෙන්නේ සාමාන්‍යය (default) ආකාරය වේ. නමුත් අපට අවශ්‍ය නම් එහිදී ලැබෙන හැඩතලයන් වෙනස් කරගත හැකිය. මේ සඳහා type attribute යොදාගනී. එනම් කුමන ආකාරයේ හැඩ භාවිතා කල හැකිද යන්න ඉදිරිපත් කෙරේ. Type attribute සඳහා යොදාගන්නේ square (සමචතුරශ්‍ර), disc(කවය) හෝ circle(වෘත්ත) වේ.
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Science</li>
<li>Maths</li>
<li>Englsih</li>
<li>ICT</li>
</ul>
</body>
</html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Science</li>
<li>Maths</li>
<li>Englsih</li>
<li>ICT</li>
</ul>
</body>
</html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Science</li>
<li>Maths</li>
<li>Englsih</li>
<li>ICT</li>
</ul>
</body>
</html>
