Tuesday, August 22, 2017

HTML සරලව ඉගෙන ගනිමු - 3 කොටස


ආයුබෝවන්..! කලින් post එක කියෙව්වා නම් දැන් ඔයාලා දන්නවා කොහොමද සරල වෙබ් පිටුවක් notepad මගින් හදා ගන්නේ කියලා. සමහරු කියනවා තේරුනේ නෑ කියලා. මං ඇහුවා පළමු post එක කියෙව්වාද කියලා, මෙන්න බොලේ කියාපිය නෑ දෙවැනි එකයි බැලුවේ කියලා. ඉතින් මට තව කියන්න දෙයක් නෑනේ. බ්ලොග් එකට අළුතෙන් එන අය post කියවනවානම් මුල ඉඳන් කියවන්න ඕන. නැතිනම් පාඩම් තේරෙන්නේ නෑ. 

හොඳයි අද මං ඔයාලට කියල දෙන්න හදන්නේ Html tags ගැන.(මේ tag වලට 11 වසරේ සිංහල ICT අච්චු පොතේ කියන්නෙ උසුලනය කියලා) අනේ මන්දා මේකට ටෑග් කිව්වානම් මොකද, ඔය වගේ මෝල් වචන සෙට් එකක්ම තියෙනවා. සිංහලෙන්ම ICT වචන දෙන නිසා තමයි සමහර ළමයි ICT නාන්නෙ. 

1.  <html> </html> - මෙම ටැග් යුගලය තමයි වෙබ් පිටුවක අාරම්භක හා අවසාන ටැග් යුගලය.

2.  <head></head> - වෙබ් පිටුවක නොපෙන්වන, එනම් බ්‍රව්සර් එකට අවශ්‍ය තොරතුරු ඇතුලත් කිරීමට යොදා ගනී.

3.  <title> </title> - head ටැග් යුගලය අතර සකස් වේ. මෙමගින් වෙබ් පිටුවට අදාලව බ්‍රව්සර් ටැබ් එකට මාතෘකාවක් යෙදිය හැක.

4.  <body> </body> - වෙබ් පිටුවේ අන්තර්ගත තොරතුරු වලට අදාල සියලු ටැග් ඇතුලත් වන්නේ මෙම ටැග් යුගලය අතර වේ. ඊට අමතරව වෙබ් පිටුවේ පසුබිම අලංකරණය සඳහා body tag එක යටතේ attributes කිහිපයක් භාවිතා වේ.
  • bgcolor="blue" - පසුබිමට වර්ණයක් ලබාදීම
  • background="xxx image path with extension" - පසුබිමට රූපයක් ඇතුලත් කිරීම
  • text="yellow" - සියලු පාඨ කොටස් සඳහා පොදු වර්ණයක් සකස් කිරීම
  • bgproperties="fixed" - පසුබ්ම් ඡායාරූපය scroll වීම වලක්වයි. content එක පමණක් scroll (ඉහල පහල යෑම) වේ.
දැන් අපි ඉහත ටෑග් භාවිතා කර වෙබ් පිටුවක් ලියල බලමු නේද? හරි එහෙනම් notepad open කරගෙන පහළ තියෙන විදියට ටයිප් කරල ඔයා කැමැති නමකින් save කරගන්න. මතකනෙ save කරන විදිය. මතක නැතිනම් දෙවැනි පාඩමේ තියෙනවා save කරන විදිය.

<html>
<head>
<title> First Web Site </title>
</head>
<body bgcolor="blue" text="yellow">
     This is paragraph colored with yellow
</body>
</html>

මේක save කරලා html file එක open කරාම පහල පේන විදියට තියෙන්න ඕන.


හරි දැන් අපි පොඩි වෙනසක් කරලා බලමු. 

<html>
<head>
<title> First Web Site </title>
</head>
<body background="img0.jpg" text="yellow">
This is paragraph colored with yellow
</body>
</html>

මම bgcolor අයින් කරලා background attribute එක දැම්මා. ඔයාලා පින්තූරයක් දානවානම් මුලින්ම ඒ පින්තූරය html file එක save කරන තැනට copy එකක් දා ගන්න. නැත්නම් පින්තූරය පෙන්නන එකක් නෑ. අපි බලමු මම දාපු image එකත් එක්ක පෙන්නන විදිය. 


තව දෙයක් color වල නම් වලින් දෙන එක මම අනුමත කරන්නෙ නෑ. ඔයාලට තේරුම් ගන්න පහසු වෙන්න තමයි මම ඒවට නම් පාවිච්චි කලේ. හොඳම දේ තමයි hex color code පාවිච්චි කරන එක. පහල තියෙන්නේ ප්‍රධාන වර්ණ සඳහා hex values ටික.

ඔයාට කරන්න තියෙන්නෙ වර්ණයේ නම දෙනවා වෙනුවට hex value එක දෙන එකයි. පහත උදාහරණය බලන්නකො.

<html>
<head>
<title> First Web Site </title>
</head>
<body bgcolor="0000FF" text="FFFF00">
     This is paragraph colored with yellow
</body>
</html>

වෙනස් කරලා save කරලා open කරලා බලන්නකෝ. දැනටමත් browser එක open වෙලා නම් තියෙන්නෙ F5 ඔබලා refresh කරන්න. එතකොට අලුතෙන් save කරපු කොටස වැඩ කරනවා. 

ඔය ටික කරලා හොඳට පුරුදු වෙන්න. තව දවසක අලුත් post එකකින් හම්බවෙමු. ඔයාලගෙ අදහස් comment කරන්න. ඔයාලගේ comment වලින් තමයි මම තවත් පන්නරය ලබන්නේ. ඔයාලට පුළුවන් Facebook Fanpage එ‍කටත් එන්න. ඒ වගේම දන්න හැමෝටම Share කරලා මටත් සහයක් දෙන්න. හැමෝටම ජයවේවා !