May 6, 2021

TechXlk

All About Technology

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

elments and tags 2 Html tutorial 03 _techxlk_

හරි අද අපි HTML වල තිබෙන Elements පිලිබදව වැඩිදුරටත් කතා කරමු. මෙතෙක් අපි ඉගෙනගත්තේ මූළික Element කිහිපයක් පමනි.අද අපි HTML වල ‘BODY’ කොටසේ ඇති Element ගැන කතා කරමු.

මාතෘකාව යෙදීම( Adding a Heading)

මුලින්ම අපි වෙබ් පිටුවකට ‘Heading’ එකක් යොදන හැටි බලමු.මේ සඳහා අපට ක්‍රම කිහිපයක් තිබුනත් HTML මගින් අපට මේ සඳහා භාවිතා කිරීමට පෙර සැකසූ ‘sizes’ වලින් tags ලබාදී තිබෙනවා. මේ නිසා ඉතා පහසුවෙන් මෙම ටැග්ස් භාවිතා කර අපට මාතෘකා යෙදීමේ හැකියාව තියෙනවා. මේ ටැග්ස් ‘sizes’ 6කින් තිබෙන අතර අපට අවශ්‍ය විදිහට ඒවා භාවිතා කිරීමට හැක.

                         <H1>, <H2>, <H3>, <H4>, <H5>, <H6>

මෙහිදී H1 විශාලතම ‘HEADING’ එක වන අතර H6 කුඩාම ‘HEADING’ එක වේ.ඉතින් ඉතාපහසුවෙන් මෙම ටැග්ස් භාවිතා කර අපට වෙබ් පිටුවකට ‘HEADING’ එකක් දැමීමට හැකී.

මෙම උදාහරණයේදි සියලුම ‘HEADING’ වල ‘sizes’ අපි සන්සන්දනය කරලා බලමු.

<html>
<head> <title>my web page</title>
</head>
<body>
	<h1> Hello World!</h1>
	<h2> Hello World!</h2>
	<h3> Hello World!</h3>
	<h4> Hello World!</h4>
	<h5> Hello World!</h5>
	<h6> Hello World!</h6>

</body>	
</html>

ඉතින් ඉහත උදාහරණයේ දී ඇති පරිදි ඉතා පහසුවෙන් අපට මෙම Heading ඇතුලත් කර ගැනීම සිදුකල හැකි වන අතර මේ සඳහා අපට ‘Capital’ හො ‘Simple’ අකුරු භාවිතා කිරීමේ හැකියාව ඇත.

පහත රූපය මගින් එම heading වල එක් එක් ප්‍රමාණය පිලිබදව ඔබට අදහසක් ගැනීමට හැකියාවක් ලැබේ. දැන්අපි එය බලමු. 

හරි දැන් ඔබ html පිටුවකට heading එකක් ඇතුලත් කර ගැනීම ගැන දැනුවත් වුනා ඉතින් දැන් අපි html වල තවත් ටැග්ස් පිලිබඳව කතා කරමු.

Opening පමණක් ඇති tags

මීට පෙර ලිපිවලදී ඔබ බොහෝ ටැග්ස් ප්‍රමානයක් දැක තිබේ. ඉන් සමහරක් ටැග්ස් වල opening tag එක පමණක් තිබෙනවා ඔබ දැක ඇති,(<p> ටැග් එක) ඉතින් දැන් අපි එවැනි ටැග්ස් පිලිබඳව කතා කරමු.

Line break element <br>:

මෙම එලෙමෙන්ට් එකට opening tag එකක් පමණක් තිබේ. තවද මෙම ටැග් එක භාවිතයෙන් අපට ‘line break’ එකක් html පිටුවට ඇතුලත් කිරීමේ හැකියාව ඇත. මෙය සිදු කරන්නේ මේ ආකාරයෙන්ය.

<html>
<head> <title>my web page</title>
</head>
<body>
Hello world!<br> Welcome to HTML World
</body>	
</html>

ඉහත කේතයේ ප්‍රතිදානය පහත රූපයෙන් දැක්වේ.

ඉතින් මෙහිදී ඔබට හොඳින්ම පෙනෙනවා ඇති ඔබ එක පෙලට වැකිය ඇතුල් කළත් <br> ටැග් එක නිසා එය ඊළඟ පේලියට ප්‍රතිදානයේදී ගොස් ඇති බව.<br> ටැග් එකෙන් සිදුවන්නෙ මෙයයි.

Paragraph element <p>:

මෙම ටැග් එක භාවිතයෙන් අපට ඉතා පහසුවෙන් වෙබ් පිටුවකට ඡේදයක් වැනි විශාල text එකක්(කුඩා text ඇතුල් කිරිමටද භාවිතා කෙරේ ) ඇතුල් කිරීමේ හැකියාව ඉතා පහසුවෙන් ලබාදී ඇත. තවද මෙම ටැග් එක භාවිතයෙන් අපට ඉතා පහසුවෙන් <br> ටැග් එකෙන් සිදුවන ක්‍රියාවද(line break එකක්) සිදු කර ගත හැක.මෙය ඉතා පහසුවෙන් වෙබ් පිටුවට ඇතුලත් කරගන්න අකාරය පෙර ලිපියේදී ඔබ දකින්න ඇති, එය ඉතා පහසුවෙන් <p> ලෙස text එකට ඉදිරියෙන් ඇතුල් කිරීමෙන් සිදු කළ හැක.

ඉතින් දැන් ඔබ බලනවා ඇති <p> ටැග් එකෙන් line break එකක් සිදු කළ හැකිනම් <br> ටැග් එකයි <p> ටැග් එකයි අතර ඇති වෙනස කුමක්ද කියා. පහත උදාහරණයෙන් ඒ ගැන ඔබට අදහසක් ගැනීමට පුළුවන් වේවී.  

හරි දැන් ඔබට එම වෙනස හොදින් පැහැදිලිවනවා ඇති.

Image element:

වෙබ් පිටුවකට ගියාම සිත් ඇදගන්නා දෙයක් තමයි එහි ඇති රූප(images) ඉතින් දැන් ඇපි බලමු මේ images වෙබ් පිටුවකට ඇතුලත් කරගන්නා ආකාරය ගැන. ඇත්තටම මෙයත් opening tag එකක් පමණක් ඇති භාවිතයට ඉතා පහසු ටැග් එකක්. දැන් අපි එය කරන්නේ කෙසේ දැයි බලමු: 

image එකක් ඇතුලත් කිරීමට ඇති ටැග් එක <img src=”image location”> (img=image src=source) වේ. ඉතින් මෙහිදී පහසුම ක්‍රමය html file එක සහ image file එක එකම folder එකක තබා ගැනීමයි. නමුත් එසේ කිරීමට නොහැකි වන අවස්ථා වලදී  අපට image file එකේ properties වල තිබෙන location එක භාවිතා කර මෙම image එක අපගේ වෙබ් පිටුවට ඇතුල් කර ගත හැක. එහිදී location name එක copy කර ටැග් එකෙ image location කියන තැන paste කරන්න ඉන් පසු backward slashes(\), forward slashes(/) වලට මරු කරන්න.

එකම folder එකෙ ඇති image එකක් ඇතුලත් කිරීමට කේතය පහත දැක්වේ.

<html>
<head> <title>my web page</title>
</head>
<body>
<p>Look at the image below
	<p>
		<img src= 'image.jpg'>
        <img src='C:/Users/Desktop/New folder (3)/image.jpg>
</body>	
</html>

වෙනත් folder එකක ඇති image එකක් ඇතුලත් කිරීමට නම් උදාහරණයේ ‘image.jpg’ කියන තැනට image එකේ properties වල තියෙන location එක ලබාදෙන්න.ඉතින් ඉහත කේතයේ output එක පහත දැක්වේ.

නමුත් ඔබ location එක දීමේදී යම් කිසි වැරැද්දක් සිදු කළ හොත් output එක පහත ආකරයට දිස්වේවී. මෙහිදී කියවෙන්නේ ඔබ ඇතුලත් කළ location එකේ image එක නැති බව හෝ ඔබ වැරදි location එකක් ඇතුලත් කර ඇති බව. ඔබ ඇතුලත් කළ අනෙක් ටැග් වල කිසිදු වරදක් නොමැත.

Description: wrong image

හරි අද අපි html වල ඇති ටැග් වර්ග කිහිපයක් ගැනම කතා කලා. දැන් ඔබට html පිලිබදව යම් කිසි අදහසක් ලබා ගැනීමට හැකි වෙන්න ඇති. ඉතින් ඔබට දැනෙනවා ඇති මෙය ඉතා පහසු කාර්යක් බව. මීළඟ ලිපියෙන් තවත් මෙවැනිම ටැග් වර්ග කිහිපයක් ගැන අපි කතා කරමු.