ICT With Shantha Bandara: Basic 03

13.ලැයිස්තු ඇතුලත් කිරිම.

ආංකිත නොවන ලැයිස්තු (unordered list)

ආංකිත ලැයිස්තු ආරම්භ කරනුයේ ul සලකුණ භාවිතා කරන අතර එහි මූලිකාංගය සමග අදාළ විශේෂ සංකේතයේ හැඩය නිරූපණය කිරිමට type ගුණාංගය භාවිතා කෙරේ.ලැයිස්තුවේ එක් එක් අයිතම එකිනෙක වෙන් කර දැක්වීමට li ගුණාංගය භාවිත කරයි

Disc
Square
Circle

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

	<ul type="Disc">
		<li>සිංහල</li>
		<li>දෙමළ</li>
		<li>මුස්ලිම්</li>
		<li>බර්ග</li>
	</ul>

	<ul type="Square">
		<li>සිංහල</li>
		<li>දෙමළ</li>
		<li>මුස්ලිම්</li>
		<li>බර්ග</li>
	</ul>

	<ul type="circle">
		<li>සිංහල</li>
		<li>දෙමළ</li>
		<li>මුස්ලිම්</li>
		<li>බර්ග</li>
	</ul>	
	
</body>
</html>

ආංකිත ලැයිස්තු (ordered list)

ආංකිත ලැයිස්තු ආරම්භ කරනුයේ ol සලකුණ භාවිතා කරන අතර එහි මූලිකාංගය සමග අදාළ විශේෂ සංකේතයේ හැඩය නිරූපණය කිරිමට type ගුණාංගය භාවිතා කෙරේ.ලැයිස්තුවේ එක් එක් අයිතම එකිනෙක වෙන් කර දැක්වීමට li ගුණාංගය භාවිත කරයි

අගය	අර්ථය
1	හින්දු අරාබි ඉලක්කම්
A	ඉංග්‍රීසි හෝඩියේ Capital අක්ෂර
a	ඉංග්‍රීසි හෝඩියේ Simple අක්ෂර
i	ඉංග්‍රීසි Simple අක්ෂර සහිත රෝම ඉලක්කම්
I	ඉංග්‍රීසි Capital අක්ෂර සහිත රෝම ඉලක්කම්

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

	<ol type="1">
		<li>සිංහල</li>
		<li>දෙමළ</li>
		<li>මුස්ලිම්</li>
		<li>බර්ග</li>
	</ol>

	<ol type="A">
		<li>සිංහල</li>
		<li>දෙමළ</li>
		<li>මුස්ලිම්</li>
		<li>බර්ග</li>
	</ol>
	
	<ol type="a">
		<li>සිංහල</li>
		<li>දෙමළ</li>
		<li>මුස්ලිම්</li>
		<li>බර්ග</li>
	</ol>
	
	<ol type="i">
		<li>සිංහල</li>
		<li>දෙමළ</li>
		<li>මුස්ලිම්</li>
		<li>බර්ග</li>
	</ol>

	<ol type="I">
		<li>සිංහල</li>
		<li>දෙමළ</li>
		<li>මුස්ලිම්</li>
		<li>බර්ග</li>
	</ol>
</body>
</html>

විස්තරාත්මක ලැයිස්තු.

අයිතම සමූහයක් ඊට ආයත් විස්තරයක් ද සමගින් ලැයිස්තුවක් ලෙස නිරූපණය කිරිමට විස්තරාත්මක ලැයිස්තු යොදා ගනියි. විස්තරාත්මක ලැයිස්තු ආරම්භ කරනුයේ dl (tag) මගින් වේ.මෙහි අයිතමය හැඳින්විම සඳහා dt (tag) භාවිතා කරන අතර අයිතමයට අදාල විස්තර දැක්වීමට dd (tag) යොදා ගනු ලබයි.

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

	<dl>
		<dt>වාණිජ විෂය ධාරාවට අයත් ප්‍රධාන විෂයන්</dt>
			<dd>ගිණුම්කරණය</dd>
			<dd>ආර්ථික විද්‍යාව</dd>
			<dd>ව්‍යාපාර අධ්‍යනය</dd>
	</dl>
	<dl>
		<dt>විද්‍යා විෂය ධාරාවට අයත් ප්‍රධාන විෂයන්</dt>
			<dd>භෙෳතික විද්‍යාව</dd>
			<dd>රසායනික විද්‍යාව</dd>
			<dd>ජීව විද්‍යාව</dd>
	</dl>
</body>
</html>

14.Table ඇතුලත් කිරිම.

table උසුලනය මගින් ආරම්භ කරන අතර border=" " ගුණාංගය මගින් වගුවේ කෝෂ වටා බෝඩරයක් පෙන්වනයි.tr උසුලනය මගින් වගුවේ පේළි පිළිබඳව විස්තර කෙරෙන අතර td උසුලනය මගින් දත්ත ඇතුලත් කෝෂ නිරූපණය කරනු ලබයි.

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<table border="1">
 		<tr>
 			<td>පරිගණක පරම්පරාව</td>
 			<td>භාවිතා කළ තාක්ෂණය/උපකරණය</td>
 		</tr>

 		<tr>
 			<td>පළමු පරම්පරාව</td>
 			<td>රික්තක නළ</td>
 		</tr>

  		<tr>
 			<td>දෙවන පරම්පරාව</td>
 			<td>ට්‍රාන්සිස්ටර</td>
 		</tr>

 		 <tr>
 			<td>තුන්වන පරම්පරාව</td>
 			<td>සංගෘහිත පරිපථ</td>
 		</tr>

 		<tr>
 			<td>හතරවන පරම්පරාව</td>
 			<td>ක්ෂුද්‍ර සකසනය</td>
 		</tr>

 		 <tr>
 			<td>පස්වන පරම්පරාව</td>
 			<td>කෘතිම බුද්ධිය</td>
 		</tr>
 	</table>

</body>
</html>

උසුලනයට අදාළ ගුණාංග පහත වගුවේ දැක්වේ.

ගුණාංගය	විස්තරය
align	පිටුවේ වූ අනෙකුත් පාඨ සමග වගුව එකෙල්ල විය යුතු ආකාරය පෙන්වයි.අගය left,center,right ලෙස භාවිත වේ. align="left", align="center", align="right"
width	වගුවේ පළල පික්සල සංඛ්‍යාවක් ලෙස හෝ වෙබ් පිටුවේ පළලින් ප්‍රතිශතයක් ලෙස දක්වයි. width="50", width="50%"
height	වගුවේ උස පික්සල සංඛ්‍යාවක් ලෙස හෝ වෙබ් පිටුවේ පළලින් ප්‍රතිශතයක් ලෙස දක්වයි. height="50", height="50%"
bgcolor	වගුවේ පසුබිම් වර්ණය දක්වයි.පාඨ සඳහා වර්ණය යෙදු ආකාරයට ම අගයන් යෙදිය හැකි ය. bgcolor="red"
boder	වගුවේ කෝෂ වටා බෝඩරයක් අවශ්‍ය නම් "1" ද එසේ නොවේ නම් "0" ද අගය ලෙස භාවිත වේ. border="1", border="0"
bordercolor	බෝඩරයේ වර්ණය දක්වයි. bordercolor="blue"
background	වගුවේ පසුබිමට රූපයක් යෙදීමට භාවිතා වේ.අගය ලෙස ගොනු නාමය හෝ රූපයට අදාළ path යොදයි. background=" "
cellpadding	කෝෂයේ මායිම සහ එහි අන්තර්ගතය අතර පරතරය පෙන්වයි.අගය ලෙස පික්සල සංඛ්‍යාවක් ලෙස දක්වයි. cellpadding="5"
cellspacing	කෝෂයේ අතර පරතරය පෙන්වයි.අගය ලෙස පික්සල සංඛ්‍යාවක් ලෙස දක්වයි. cellspacing="5"

15.ඉහත වගුවේ ඇති ගුණාංග යොදා වගුවක් හදමු.

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<table border="3" bgcolor="yellow" bordercolor="red" align="center" cellspacing="5" cellpadding="5" width="600" height="500">
 		<tr>
 			<td>පරිගණක පරම්පරාව</td>
 			<td>භාවිතා කළ තාක්ෂණය/උපකරණය</td>
 		</tr>

 		<tr>
 			<td>පළමු පරම්පරාව</td>
 			<td>රික්තක නළ</td>
 		</tr>

  		<tr>
 			<td>දෙවන පරම්පරාව</td>
 			<td>ට්‍රාන්සිස්ටර</td>
 		</tr>

 		 <tr>
 			<td>තුන්වන පරම්පරාව</td>
 			<td>සංගෘහිත පරිපථ</td>
 		</tr>

 		<tr>
 			<td>හතරවන පරම්පරාව</td>
 			<td>ක්ෂුද්‍ර සකසනය</td>
 		</tr>

 		 <tr>
 			<td>පස්වන පරම්පරාව</td>
 			<td>කෘතිම බුද්ධිය</td>
 		</tr>
 	</table>

</body>
</html>

ICT With Shantha Bandara

Basic 03

No comments:

Post a Comment