May 7, 2021

TechXlk

All About Technology

HTML Elements සහ Tags(වැඩිදුර)|TechXlk HTML Tutorial 04

elements and tags 3 html tutorial -04 _techxlk_

HTML  පිලිබද අලුත්ම ලිපියට ඔබව සාධරයෙන් පිලිගන්නවා. මෙම ලිපියෙදී අපි බලමු HTML වෙබ් පිටුවකට List, Table වගේ දේවල් add කරගන්නේ කොහොමද කියලා.

HTML LISTS:

Html වලදී අපි list වර්ග 3ක් ගැන කතා කරනවා, එවා

  • Ordered Lists (numbered lists)
  • Unordered Lists (unnumbered lists)
  • Definition Lists

ඉතින් දැන් අපි බලමු මේ list වර්ග 3ම වෙබ් පිටුවකට ඇතුලත් කරගන්නා ආකාරය.

Ordered lists(OL):

මෙම list එක අපි numbered list එකක් ලෙස හදුන්වනවා. ඒ කියන්නේ මෙම list වලදී අපි සාමාන්‍ය අංක ක්‍රමය භාවිතයෙන් elements list කිරීම සිදු කරනවා. මෙම ක්‍රියාව සඳහා අපිට සාමාන්‍ය අංක, රෝමන් අංකනය හෝ ඉංග්‍රීසි අක්ශර භාවිතා කිරීමට හැක.දැන් අපි බලමු මෙම list එක වෙබ් පිටුවට ඇතුලත් කරනා ආකාරය.

<html>
<head> <title>my web page</title>
</head>
<body>
	Types of transportation:
	<ol>
		<li>Car</li>
		<li>Bike</li>
		<li>Bus</li>
		<li>Train</li>
	</ol>
</body>	
</html>

    ඉහත code එකේ output එක මෙසේ වේ:                 

Description: ol

<li> යනු අපි list එකට ඇතුලත් විය යුතු කරුණු පෙන්වීමට යොදාගන්නා ටැග් එකයි.

හරි දැන් අපි මෙම list එකට වෙනත් ආකාරයක අංකනයක් ලබා දෙමු.

<html>
<head> <title>my web page</title>
</head>
<body>
	Types of transportation:
	<ol type='I'>
		<li>Car</li>
		<li>Bike</li>
		<li>Bus</li>
		<li>Train</li>
	</ol>
</body>	
</html>

ඉහත උදාහරණයේදී මම ‘Upper roman’  අංකනය යොදා ගෙන තිබෙනවා. ඒවගේම ඔබට මෙම අංකනය සඳහා upper alphabet (A), lower alphabet (a), lower roman (i) ද භාවිතා කිරීමේ හැකියාව ඇත.( වරහන තුල දී ඇති සංකේතය ol type එකට ආදේශ කරන්න).

Unordered list(UL):

හරි දැන් අපි unordered list ගැන බලමු. මෙහිදී අපි elements අංකනය සඳහා අංක භාවිතා නොකරයි ඒ වෙනුවට අපි සංකේත භාවිතා කරයි.දැන් අපි unordered list එකක් වෙබ් පිටුවකට ඇතුලත් කරගන්නා ආකාරය ගැන බලමු.

<html>
<head> <title>my web page</title>
</head>
<body>
	Types of transportation:
	<ul>
		<li>Car</li>
		<li>Bike</li>
		<li>Bus</li>
		<li>Train</li>
	</ul>
</body>	
</html>

ඉහත code එකේ output එක මෙසේ වේ:

Description: C:\Users\M.P.WIJESEKARA\AppData\Local\Microsoft\Windows\INetCache\Content.Word\ul output.jpg

මෙම list එකේදීද අපට අංකනය සඳහා විවිධ සංකේත භාවිතා කිරීමේ හැකියාව තිබේ. දැන් අපි බලමු එය සිදු කරන්නේ කෙසේද කියා. එම අංකනය සඳහා අපිට square, disc වැනි සංකේත භාවිතා කිරීමට හැක. ඒ සඳහා  ul type කියන ස්ථනයට මෙම සංකේත ආදේශ කරන්න.

<html>
<head> <title>my web page</title>
</head>
<body>
	Types of transportation:
	<ul type='square'>
		<li>Car</li>
		<li>Bike</li>
		<li>Bus</li>
		<li>Train</li>
	</ul>
</body>	
</html>

Unordered list එකක් වෙබ් පිටුවකට ඇතුලත් කරන්නේ මේ ආකාරයෙන්ය. දැන් අපි ඊළඟ list type එක ගැන බලමු.

Definition list(DL):

මෙම list එකේදී අපි list එකේ ඇති දේවල් එකින් එක වැඩිදුරටත් විස්තර කරයි.

<dl>- definition list, list එක හදුන්වාදේ

<dt>-definition title, title එක හදුන්වාදේ

<dd>- definition description, terms/elements විස්තර කරයි 

<html>
<head> <title>my web page</title>
</head>
<body>
Types of drinks:
<dl>
	<dt>Coffee</dt>
	<dd>Black hot drink</dd>
	<dt>Juice</dt>
	<dd> Cool tasty drink</dd>
	<dt> Milk</dt>
	<dd> White drink</dd>
</dl>
</body>	
</html>

ඉහත code එකේ output එක මෙසේ වේ:

Description: dl out

Tables:

වෙබ් පිටුවක ඔබ අනිවාර්යෙන් වගු(Tables) දැක තිබේ. ඒවා rows සහ columns වලින් සමන්විතවේ. සිරස් පේළි columns ලෙසද තිරස් පේළි rows ලෙසද හැදින්වේ. දැන් අපි වෙබ් පිටුවකට table එකක් ඇතුලත් කරන ආකාරය ගැන බලමු.

ඊට පෙර ඔබ දැනගත යුතු ටැග්ස් කිහිපයක් ඇත:

<table>- this initialize the table into a website.

<tr>-this initialize a row of the table.

<th>- we can enter text in a form of a heading.

<td>- used to enter content into a table.

හරි දැන් අපි බලමු වෙබ් පිටුවකට table එකක් ඇතුලත් කරගන්නේ කෙසේද කියලා.

ඒ වගේම මතක තබාගන්න html වලදී අපි  table එකක් පුරවන්නේ උඩ සිට පහලට නොව වමේ සිට දකුණටයි එක් කොටුවෙන් කොටුවට.

පහත දැක්වෙන්නේ columns 3ක් සහ rows 2ක් ඇති table එකක් වෙබ් පිටුවකට ඇතුලත් කිරීමට යොදාගන්නා කේතයයි.

<html>
<head> <title>my web page</title>
</head>
<body>
	<table border='1'>
		<tr>
			<th>Name</th>
			<th>Age</th>
		</tr>
		<tr>
			<td>Anna</td>
			<td>25</td>
		</tr>
		<tr>
			<td>John</td>
			<td>20</td>
		</tr>
	</table>

</body>	
</html>

  <tr> ටැග් එක භාවිතයෙන් අපට කැමති සිරස් පේළි ප්‍රමාණයක්ද <td> ටැග් එක භාවිතයෙන් අපට කැමති තිරස් පේළි ප්‍රමාණයක්ද ඇතුලත් කර ගැනීමේ හැකියාව ඉතා පහසුවෙන් ඇත.

ඒවගේම ඔබ <table> ටැග් එක සමඟ ‘border ‘attribute එක භාවිතා නොකළොත් එමගින් අපට borders නැති table  එකක් ලැබේ, එම නිසා අනිවාර්යයෙන්ම ‘border’ attribute එක භාවිතා කරන්න

ඉහත code එකේ output එක මෙය වේ:

Description: table out

මෙහි පලමු පේළිය <th> වලින් ඇතුලත් කර ඇති නිසා ඔබට <th> සහ <td> අතර වෙනස හදුනා ගැනීමට පුලුවන් වේවී.

Colspan and Rowspan:

සමහර වෙබ් පිටුවල ඔබ merge කළ(එකට සම්බන්ද කළ ) cells ඇති tables දැක ඇති. ඉතින් දැන් අපි බලමු මේ merge කිරීම කරන්නේ කෙසේද කියා.

Colspan: සිරස් පේළි merge කිරීමට යොදා ගැනේ

Rowspan: තිරස් පේළි merge කිරීමට යොදා ගැනේ

දැන් අපි බලමු මෙය සිදු කරන්නේ කෙසේද කියා : 

<html>
<head> <title>my web page</title>
</head>
<body>
	<table border='1'>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Address</th>
		</tr>
		<tr>
			<td>Anna</td>
			<td>25</td>
			<td>Uphill Street</td>
		</tr>
		<tr>
			<td>John</td>
			<td>20</td>
			<td rowspan='2'>Lake road</td>
		</tr>
		<tr>
			<td>Mike</td>
			<td>35</td>
	</table>

</body>	
</html>

ඉහත code එකේ output එක මෙය වේ:

Description: rowspan

මෙහිදී ඔබට දැක ගැනීමට හැකි වේවී දෙදෙනෙකුට එකම address තිබෙන බව ඉතින් අප ඒ දෙදෙනාගේ rows 2 merge කර තිබෙනවා. ඒවගේම ඔබට columns 2ක් merge කිරීමට අවශ්‍ය නම් මෙහි කළ යුත්තේ colspan ලෙස rowspan දුන් ආකාරයටම යෙදීම පමණයි.

හරි අද අපි HTML වල ටිකක් සංකීර්ණ elements කිහිපයක් ගැන කතා කළා ඉතින් මෙවා ටිකක් සංකීර්ණ නිසා ඔබ HTML වලට අලුත්නම් මෙවා ඉක්මනින් අමතක වෙන්න පුලුවන් ඉතින් අනිවාර්යෙන්ම මෙම Elements තනියම code  කර පුරුදු වන්න. මීළඟ ලිපියෙන් ඔබව හමු වන්නම්.