Rahul Samaranayake is a Maths teacher at Lyceum International School. He obtained his B.Sc (Physical Science) from the University of Colombo. He plays the guitar in his free time.
 

වෙබ් අඩවි නිර්මාණය (Web Site Development)

10/30/2009 1:16 am By Rahula Samaranayake | Articles: 11

වෙබ් බ‍්‍රව්සරයක් (web browser) මගින් දර්ශනය වන ලේඛයක් (document) වෙබ් පිටුවක් ලෙස හැඳින්වේ. බොහෝ වෙබ් පිටුවල වගන්ති (text) පින්තූර (images) මෙන්ම අනෙක් වෙබ් පිටු සඳහා සබැඳි links ද අන්තර්ගත වේ. ඇතැම් විට ශ‍්‍රව්‍ය හා දෘෂ්‍ය (audio and video) ගොනු (files)වෙබ් පිටුවක ඇතුළත් විය හැක. එමගින් වෙබ් අඩවිය ආකර්ෂණීය කරගත හැක. වෙනස් ආකාරයකින් ඉදිරිපත් කිරීමට රාමු (frames)වගු (tables) සහ ලැයිස්තු (list) වෙබ් පිටුවක යොදාගත හැකි අතර, බැනර (banners) මගින් වැඩි අවධානයක් ද ලබාගත හැක. යම් වෙබ් අඩවියක් සඳහා ඉක්මණින් ප‍්‍රවේශය (access) වීම සඳහා පිටුසන් (bookmarks) යොදාගත හැක.

නිශ්චිත මාතාකාවක් පිළිබඳව ඇති වෙබ් පිටු සමූහයක් වෙබ් අඩවියක් (website) ලෙස හැඳින්වේ.

 වෙබ් පිටුවක ඇති වැදගත් තොරතුරු උද්දීපනය (highlight) කර පාඨකයාගේ (reader) අවධානය ලබාගැනීමටත්, එකම වෙබ් අඩවියේ විවිධ වෙබ් පිටු හා ප‍්‍රදේශ වලට යොමු වීමටත් හැකිවන පරිදි වෙබ් අඩවිය නිර්මාණය කිරීමටත් එය මනාව සැළසුම් කළ යුතුය.

 වෙබ් අඩවියක පළමු පිටුව මුල් පිටුව (home page) ලෙස හැඳින්වේ. වෙබ් අඩවියේ සම්පූර්ණ අන්තර්ගතය මුල් පිටුවෙහි ඇතුළත්ව ඇත. වෙබ් අඩවියක හෝ වෙබ් පිටුවක ඇති අධි සබැඳි (hyperlink) මගින් විස්තරාත්මක අන්තර්ගත (detailed content) ලබාගත හැක.
 

වෙබ් පිටු නිර්මාණය සඳහා යොදාගත හැකි මෙවලම් / මෘදුකාංග
(Web Authoring Tools)

 

  • HTML
  • Microsoft Frontpage
  • acromedia Dreamweaver

 

වෙබ් පිටු නිර්මාණය සඳහා (  HTML)මූලික වෙබ් සැලසුම් භාෂාවක් (web design language) ලෙස යොදා ගනී. මෙම පරිච්ෙඡ්දයේ දී සරල වෙබ් පිටුවක් නිර්මාණය කරගන්නා ආකාරය, ඒ සඳහා යොදාගත හැකි පැකේජ සහ වෙබ් පිටුව ප‍්‍රකාශනය (publish) කරගන්නා ආකාරය පිළිබඳව අධ්‍යයනය කෙරේ.

 

(HTML) - (Hyper Text Markup Language)
වෙබ් පිටු නිර්මාණය කරගැනීම සඳහා යොදා ගන්නා ප‍්‍රාථමික වෙබ් සැලසුම් භාෂාව (HTML) ය. (HTML) ගොනුවක් යනු කුඩා සළකුණු ටැග (Markup tags) ඇතුලත් පෙළ ගොනුවකි. (text file)වෙබ් පිටුවක වෙබ් බ‍්‍රව්සරයේ (web browser) කවර ආකාරයකින් දර්ශනය විය යුතු ද යන්න සලකුණු ටැග මගින් විස්තර වේ. වෙනත් මෘදුකාංක වලට වඩා (HTML) සරළ වේ. සරල පෙළ සංස්කරණයක(simple text editor) යොදාගනිමින් (උදා :- Note pad, word pad) HTMLගොනුවක් නිර්මාණය කරගත හැකිය.

1. HTML ගොනුවක් සුරැුකීමේ දී යෙදිය යුතු දිගු (Extensions)
 1. . htm
  2. . html

HTML ටැගයක් (tag)සඳහා ' < ' සහ ' > ' සංකේත යොදා ගනී. මේවා අනු වරහන් (angle brackets) ලෙස හැඳින්වේ. විවෘත කරන ලද සෑම ටැගයක්ම වසා දැමීම සිදු කළ යුතුය. එබැවින් යම්කිසි කාර්යයක් සඳහා යොදා ගන්නා ටැගයක් ටැග යුගලක් (pair of tags)  ලෙස පවතී. එයින් ප‍්‍රථම ටැගය (start tag) ලෙස ද පසු ටැගය (end tag)   ලෙස ද හැඳින්වේ.

2. නමුත් HTMLහි ටැග කිහිපයක් වසා දැමීම අවශ්‍ය නොවේ. මේවා හිස් ටැග (emty tag) ලෙස හැඳින්වේ.

   උදා :

< br >
 < marquee >

3.   HTML ටැග සඳහා යොදාගන්නා අක්ෂර කුඩා අකුරු (simple) හෝ මහකුරු (capital) වීමෙන් බලපෑමක් නොමැත.
   උදාහරණයක් ලෙස < p > සහ 'P' සර්ව සම වේ.

 HTML ලේඛයක් යනු HTML අංග (elements) වලින් සෑදී ඇති පෙළ ගොනුය (text files). HTML  අර්ථ දැක්වීම සඳහා HTML ටැග යොදා ගනී. තවද, ආරම්භක හා අවසාන ටැග(start tag and end tag) අතර ඇති පෙළ (text) අන්තර්ගතය (element content) ලෙස හැඳින්වේ. ඔබ භාවිතා කරන අන්තර්ජාල බ‍්‍රව්සරයට (browser) වෙබ් පිටුවේ ඇති යම් ටැගයක් අවබෝධ කරගත නොහැකි වූ විට බ‍්‍රව්සරය එම ටැගය නොසලකා හරී. (ignore)

   
සෑම HTML ලේඛයක් තුළම අනිවාර්යයෙන් අඩංගු විය යුතු ටැගය  වන්නේ < HTML > , </ HTML >ය.
 
 වෙබ් පිටු නිර්මාණය සඳහා යොදා ගන්නා මූලික ටැග පිළිබඳ විස්තරයක් පහත දැක්වේ.
 ටැගය    අරමුණ

  1. < HTML >     HTML ලේඛයක් අර්ථ දැක්වීම 
  2. < HEAD >   ශිර්ෂය (head) අර්ථ දැක්වීම 
  3. < TITLE > මාතෘකා තීරුවේ (Title) මාතෘකාව අර්ථ දැක්වීම 
  4. < BODY >  ලේඛයේ කඳ (body) කොටස අර්ථ දැක්වීම ශීර්ෂකය :යැ්ාැර* 1 සිට 6 දක්වා ප‍්‍රමාණ වලින් අර්ථ දැක්වීම
  5. < P > ෙඡ්දයක් අර්ථ දැක්වීම 
  6. <br>  තනිපෙළ විරාමයක් (single link bar) ඇතුළු කිරීම 
  7. <li>   ලැයිස්තුවක් (list) අර්ථ දැක්වීම 
  8. < ol >  අංකමය පටිපාටිගත ලැයිස්තුවක් නිර්මාණය කිරීම
  9. < ul >   බුලට (bullet) ඇතුලත් ලැයිස්තුවක් නිර්මාණය කිරීම
  10. <a>ඇකරයක් (anchor) අර්ථ දැක්වීම 
  11. <IMG SRC>  පින්තූර ඇතුළු කිරීම

To be continued next month…

 

Previous Article

Share/Save
Your rating: None Average: 3 (2 votes)

Post new comment