May 7, 2021

TechXlk

All About Technology

HTML Comments සහ Hyperlinks|TechXlk HTML Tutorial 05

Comments and Hyperlinks in HTML __TechXlk__

තවත් අලුත්ම ලිපියකට ඔබව සාධරයෙන් පිලිගන්නවා. මෙ ලිපියේදී අපි බලමු HTML වල comments සහ Hyperlinks භාවිතා කරන්නේ කෙසේද කියා.

HTML Comments.

මුලින්ම අපි බලමු HTML වල comments කියන්නෙ කුමක්ද කියා.

පරිගණකය ආශ්‍රිත භාෂාවන් සැළකීමේදී COMMENTS යනු ඒ සියළුම භාෂාවන් වල ඇති පොදු දෙයකි. ඉතින් අපි HTML, python ,php වැනි ඕනෑම භාෂාවක් සැළකූවිට COMMENTS ඒ ඕනෑම භාෂාවකදී අපට දැක ගැනීමට හැක.

ඉතින් ඔබට වැටහෙනවා ඇති comments කෙතරම් වැදගත්ද කියා.

ඇත්තටම මේ comments භාවිතා කරන්නේ ඇයි?

මේ පිළිබඳව කතා කිරීමට අපි web developer කෙනෙක් උදාහරනයට ගනිමු. හරි දැන් අපි හිතමු මෙම පුද්ගලයා එක් සමාගමක වෙබ් අඩවි නිර්මාණකරණයේ යෙදෙනවා කියා. එහිදී එක් එක් වෙබ් අඩවියේ code එක පිලිබඳව ඔහුට හොඳ දැනීමක් තිබෙනවා, ඉතින් එලෙස වෙබ් අඩවියක වෙනසක් කිරීමට සිදුවුවහොත් ඔහුට එය පහසුවෙන් කිරීමට හැකිවෙනවා. නමුත් අපි හිතමු මෙම පුද්ගලයා එම සමාගමෙන් ඉවත්වී ගොස් වෙනත් පුද්ගලයෙකු එම ස්ථනයේ රැකියාවට පැමිණියහොත් එම පුද්ගලයා පෙර සිටි වෙබ් අඩවි නිර්මාණය කරන්නා විසින් නැවැත්වූ තැන සිට වැඩ ඇරබිය යුතුය. ඉතින් මෙම comments නැති වුවහොත් මෙම නව නිර්මාණකරුවා එම code හදුනාගැනීමට බැරිවීම නිසා ඉතා අපහසුතාවයට පත්වනවා. ඒ කියන්නේ එම code කොටස වෙබ් පිටුවේ කුමන කොටසට අයත්ද යන්න පැහැදිලි නැති වීම සිදු විය හැකි නිස මෙලෙස comment එකක් යොද එය පැහැදිලි කර තිබුනහොත් ඉතා පහසුවෙන් එම වැඩ කටයුතු කිරීමට හැකි වෙනවා. ඉතින් මෙය වලක්වා ගැනීම සඳහා මෙම comments භාවිතා කෙරෙනවා.

හරි දැන් ඔබට තේරෙනවා ඇති මෙම comments භාවිතා කිරීමේ ඇති වැදගත්කම. එලෙසම මෙම comments වැදගත් වන්නේ userට නොව web developerට බවද ඔබට වැටහෙනවා ඇති.

ඇත්තෙන්ම මෙම comments අපට වෙබ් පිටුවක දැකගැනීමට හැකියාවක් නැහැ.ඉතින් මෙම comments පෙනෙන්නේ code කරන පුද්ගලයාට පමණයි. ඒ කියන්නේ මෙම comments code එකක යෙදූවිට එය server එක විසින් නොසලකාහරිනු ලබනවා.

හරි දැන් අපි බලමු මෙම comments code එකකදී භාවිතා කරන්නේ කෙසේද කියා.

<hTML>
<head>
	<title>My first web </title>
</head>
<body>
	<!-- This is a comment -->

    <p>This is not a comment</p>
		</body>
</html>

ඔබට පෙනෙනවා ඇති මෙම code එකේදී අපි ‘ <!–……..–>’ යන වරහ ඇතුලත යම් වාක්‍යක් යොදා තිබෙනවා. නමුත් මෙය අප පෙර සිදුකළ code කිරීම් වලට වඩා වෙනස්. මෙහි ඇති මෙම විශේෂවූ වරහන් භාවිතය නිසා මෙය comment එකක් ලෙස සැළකෙනවා තවද මෙය වෙබ් පිටුවේ පෙන්වීමේදී server එක මගින් නොසළකාහරිනු ලබනවා එම නිසා මෙය වෙබ් පිටුවේ පෙන්වන්නේ නැත.

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

මෙහිදී ‘This is a comment’ කියන කොටස අපට වෙබ් පිටුවෙ පෙනෙන්නේ නැහැ.

හරි දැන් අපි HTMLවල comment එකක් දාගන්න විදිහ දන්නවා ඒ වගේම comments පාවිච්චි කරන්නේ මොකටද කියන එකත් දන්නවා.දැන් අපි ඊළඟ Tag එක ගැන බලමු.

HTML HYPERLINKS (Anchor tag)

ඔබ අනිවාරයෙන්ම වෙබ් පිටුවක් භාවිතා කිරීමේ දී ඒ තුල ඇති LINKS භාවිතයෙන් වෙනත් වෙබ් පිටුවලට ගොස් ඇති. ඉතින් දැන් අපි බලන්න යන්නේ මේ LINKS වෙබ් පිටුවකට add කරගන්න විදිහ ගැන.

හරි ඔබ දන්නවා ඇති LINKකරනවා කියන්නේ සම්බන්ධ කරනවා කියන එකට බව ඉතින් ඒ කියන්නේ අපිව එක් වෙබ් පිටුවකින් තවත් වෙබ් පිටුවකට සම්බන්ද කිරීමට අපට මෙම LINKS භාවිතා කරන්න පුළුවන්.

හරි දැන් අපි බලමු වෙබ් පිටුවකට LINK එකක් add කර ගන්න විදිහ පිලිබඳව.

ඒ සඳහා අපි <a href=’ ‘ >…..</a> කියන Tag එක භාවිතා කරනවා මෙහිදී <a>(Anchor tag) ටැග් එක ලෙසද ‘href’ attribute එකක් ලෙසද සලකනවා ‘href’ නොමැතිව <a> ටැග් එක Hyperlink එකක් වන්නේ නැත. ඉතින් ‘href’ attribute එක Hyperlink එකකට ඉතා වැදගත් attribute එකක් වනවා.

හරි දැන් අපි බලමු මෙම Tag එක වෙබ් පිටුවකට යොදන්නේ කෙසේද කියා.

<!DOCTYPE html>
<html>
<head>
	<title>Hyperlink</title>
</head>
<body>
	 Adding a Text hyperlink<p>
	<a href='class.html' target='_top'>My first web page</a><p>
	

</body>
</html>

ඉහත කේතයේ <a href=’…’>  කිය අප ඇතුලත් කර ඇත්තේ අපට සම්බන්ද විය යුතු වෙබ් පිටුවේ URL එකයි ඒ වගේම එම ටැග් එකට පසුව තිබෙන ‘My first web page ‘ කොටස වෙබ් පිටුව තුලදී නිල් පාටින් පෙන්වා තිබේ. එම කොටස මත click කිරීමෙන් අප පෙර ලබාදුන් URL එකට පිවිසීමට අපට හැකියාව තිබෙනවා.

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

එක් වරක් මෙම Link එක මත click කල පසු එය දම් පාටින් දිස් වනවා එය අප visited link එකක් ලෙස සලකනවා.

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

මෙහිදි ඇති එකම වෙනසනම් ඉහත කේතයේ අප යෙදූ පේලිය වෙනුවට <a href =’…..’> ටැග් එකෙන් පසුව image ටැග් එක භාවිතා කිරීම පමණයි.

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

<!DOCTYPE html>
<html>
<head>
	<title>Hyperlink</title>
</head>
<body>
Adding a image hyperlink<p>
	<a href='class.html' target="_self"><img src="1.jpg"></a>
</body>
</HTML>

ඉතින් මෙහිදී පෙර කේතයේ ලෙසම href attribute එකට අපට සම්බන්දවීමට අවශ්‍ය URL එක ලබාදී තිබෙනවා. වෙනසකට ඇත්තේ image ටැග් එක භාවිතා කිරීම පමණයි. එහිදීද වෙබ් පිටුවේදී image එකමත click කිරීමෙන් අපට සම්බන්දවීමට අවශ්‍ය URL එකට පිවිසීමට හැක.

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

හරි දැන් අපි බලමු මෙම Hyperlink ටැග් එක සමඟ අපට භාවිතා කිරීමට හැකි Target attribute එක ගැන.

Description: C:\Users\M.P.WIJESEKARA\Desktop\class\HTML target.JPG

මෙම attribute එක මගින් අපට සම්බන්ධ වීමට අවශ්‍ය වෙබ් පිටුව විවෘත කිරීම පාලනය කිරීමේ හැකියාව අපට ලැබෙනවා. ඒ කියන්නේ අපට නව වෙබ් පිටුව මෙම Tab එකෙම විවෘත කිරීමේ හැකියාව තිබෙනවා තවද නව Tab එකක විවෘත කිරීමේ හැකියාවද තිබෙනවා එය ඇතුලත් කිරීමට මෙම attribute එක භාවිතා කෙරෙනවා.

මෙහිදී  පළමු සහ දෙවන කොටස් දෙක බහුලව භාවිතාවේ. මෙහිදී ‘_blank’ එක මගින් නව tab එකක වෙබ් පිටුව විවෘතවේ ඉන්පසු ‘_self’ එක මගින් වෙබ් පිටුව එම tab එක තුලම විවෘතවේ. මෙහිදී Default ලෙස ‘_self’ භාවිතා කර ඇත.

දැන් අපි බලමු මෙය වෙබ් පිටුවකට භාවිතා කරන්නේ කෙසේද කියා

‘_blank’ භාවිතා කිරීම

<!DOCTYPE html>
<html>
<head>
	<title>Hyperlink</title>
</head>
<body>
	 Adding a Text hyperlink<p>
	<a href='class.html' target='_blank'>My first web page</a><p>
	Adding a image hyperlink<p>
	<a href='class.html' target="_blank"><img src="1.jpg"></a>
	

</body>
</html>

ලින්ක් එක මත click කිරීමෙන් මෙය නව Tab එකක් තුල වෙබ් පිටුව විවෘත කරයි

_blank: 

‘_self’ භාවිතා කිරීම

<!DOCTYPE html>
<html>
<head>
	<title>Hyperlink</title>
</head>
<body>
	 Adding a Text hyperlink<p>
	<a href='class.html' target='_self'>My first web page</a><p>
	Adding a image hyperlink<p>
	<a href='class.html' target="_self"><img src="1.jpg"></a>
	

</body>
</html>

ලින්ක් එක මත click කිරීමෙන් මෙය එම Tab එක තුලම වෙබ් පිටුව විවෘත කරයි

_self:

තවත් මෙවැනිම ලිපියකින් ඉක්මනින් ඔබව හමු වන්නම් එතෙක් උගත්දේ හොඳින් පුහුණු වන්න.