Community project by students of the Faculty of Information Technology, University of Moratuwa, Sri Lanka.

10.4.වෙබ් පිටුවක් වැඩිදියුණු කිරීම සඳහා HTML භාෂාවේ ඇති දියුණු ලක්‍ෂණ භාවිතා කිරීම (Uses advanced features in HTML to enhance web pages)

 HTML

 

10.3 පාඩම් මාලාවෙහි වෙබ් පිටු නිර්මාණය සඳහා වන මූලික කරුණු, හෙවත් මාතෘකා ඇමුණුම් (Header Tags) සහ බහුමාධ්‍ය (Multimedia) අංග ඇතුලත් කිරීම සඳහා වන ආකෘති ඇමුණුම් (Formatting Tags) භාවිතය පිළිබඳ අපි සාකච්ඡා කළෙමු.

මෙම පාඩම් මාලාවේදී ඉන් ඔබ්බට පිවිස වෙබ් පිටු නිර්මාණය සඳහා වන සුවිශේෂී HTML ක්‍රම භාවිතය පිළිබඳව අවධානය යොමුකරන්නටයි මේ සුදානම….

පෙර පාඩම් මාලවෙහි සාකච්ඡා කළ පරිදි වෙබ් පිටු නිර්මාණය සඳහා සාමාන්‍යයෙන් භාවිතා කරන පාඨ (Texts), චිත්‍රක (Graphics), දෘෂ්‍ය  (Videos) සහ ශ්‍රව්‍ය (Audios) වල සම්මිශ්‍රණයක් ලෙස වෙබ් පිටුවක් ගෙන හැර දැක්විය හැකිය. නමුත් එහි නිර්මාණාත්මක භාවය රඳා පවතින්නේ භාවිත කරන්නාට කෙතරම් පහසුවෙන් එහි පෙළගැස්ම සහ සම්බන්ධතාවය අවබෝධ කරගත හැකිද යන්නත් සමඟයි. එමනිසා, මෙම පාඩම් මාලාවෙහි බහුලව භාවිතා වන ලැයිස්තු  (Lists), වගු (Tables), රාමු (Frames), අධි සම්බන්ධයන් සහ ඇන්කර (Hyperlinks and Anchors) යන ක්‍රම පිළිබඳව අපි සාකච්ඡා කරමු.

ලැයිස්තු (Lists)

ලැයිස්තු භාවිතා කරන්නේ තොරතුරු සමූහනය කර දැක්වීම සඳහායි. HTML ප්‍රධාන වශයෙන් ලැයිස්තු වර්ග 3 කින් සමන්විත වේ.

  1. Unordered Lists
  2. Ordered Lists
  3. Definition Lists

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

Unordered Lists සාමාන්‍යයෙන් භාවිතා කරන්නේ තොරතුරු ලැයිස්තු ගත කර ඇති නමුත් එහි අනුපිලිවෙලක් අවශ්‍ය නොවූ විටයි. Unordered List එකක කේතනය ආරම්භ වන්නේ <ul> ඇමුණුමෙන් වන අතර අවසන් වන්නේ </ul> ඇමුණුමෙනි. ‘ul’ යන්නෙන් ‘Unordered List’ යන්න පවසයි. <ul> ඇමුණුමේ ‘type’ යන ලක්ෂණහි (Attribute) අගයන් (Values) වෙනස් කිරීමෙන් ලයිස්තුව දිස්වන අයුරු වෙනස් කරගත හැකිය. එමගින් ලයිස්තුවේ එක් එක් අංගය ඉදිරියෙන් දිස්වන සළකුණ (Symbol) වෙනස් වේ. ‘type’ යන ලක්ෂණයෙහි අගයන්, ‘disc’, ‘square’ හෝ ‘circle’ ලෙස අවශ්‍ය පරිදි වෙනස් කරගත හැකිය.

ලැයිස්තුවේ අංග කේතනය කල යුත්තේ <li> සහ </li> ඇමුණුම් තුළය. ‘li’ යන්නෙන් ‘list item’ යන්න පවසයි. පහත උදාහරණ වලින් පෙන්වන්නේ මෙහි කේතනය සහ දිස්වන අයුරුයි.

 

 

 one

                

 

two

 

 

 

 

 Ordered Lists භාවිතා කරන්නේ ලයිස්තුවේ අනුපිළිවෙල අත්‍යවශ්‍ය වූ අවස්ථා වලදීය. උදාහරණයක් ලෙස, වට්ටෝරුවක අනුපිළිවෙල සටහන් කිරීම දැක්විය හැකිය. පහත රූප සටහන බලන්න.           

 

                                                             

list

 

 

 

Definition Lists <dl> ඇමුණුමෙන් කේතනය කරන අතර එහි අන්තර්ගතය පද/විස්තර යුගල (Term/Description) මාලාවකි. ‘definition term’ යන්න <dt> ඇමුණුමෙන්ද ‘definition description’ යන්න <dd> ඇමුණුමෙන්ද නිරූපණය කරයි. Definition List එකක සාමාන්‍ය ආකෘතිය වන්නේ පළමුව වම් පසින් පදයද (Term), එහි විස්තරය (Definition) ඊට පහළ පේළියෙහිද සඳහන් කිරීමයි. Definition Lists වැදගත් වන්නේ එය කිසියම් පදයක විස්තරයක්, වඩා අරුත්බරව ඉදිරිපත් කිරීමට යොදා ගත හැකි නිසාය.

 

වගු (Tables)

වගු භාවිතා කරන්නේ තොරතුරු සමූහනය කර දැක්වීමට අමතරව අහි සම්බන්ධතාවය ගෙනහැර දැක්වීමටය. එමනිසා වගු භාවිතය වඩා ඵලදායී හා සාධනීය ක්‍රමයක් ලෙස හැඳින්විය හැකිය.

HTML වගුවක කේතනය, <table> සහ </table> ඇමුණුම් අතර සිදුකරයි. වගුවක එක් එක් පේළියෙහි (Row) අන්තර්ගතය <tr> හා </tr> යන ඇමුණුම් තුළ කේතනය කළ යුතු අතර ‘tr’ යන්නෙන් ‘table row’ යන්න පවසයි. එක් එක් පේළිය වගු මාතෘකාවකින් (Table Header) හෝ වගු දත්තයකින් (Table Data) සමන්විත විය හැකිය. වගු මාතෘකාවක් නම් <th> ඇමුණුමෙන්ද, වගු දත්තයක් නම් <td> ඇමුණුමෙන්ද කේතනය කළ යුතුය. <caption> ඇමුණුමෙන් වගුවෙහි ඇතුලත් තොරතුරු වලට හැඳින්වීමක් දිය හැකි අතර <table> ඇමුණුමෙහි ‘border’ යන ලක්ෂණයට අගයක් ලබා දීමෙන් වගුවට බෝඩරයක් (Border) එක් කළ හැකිය. පහත දැක්වෙන්නේ වගුවකට උදාහරණයකි.

 

 

 table

 

 

 

 රාමු (Frames)

රාමු යනු HTML හි තවත් සුවිශේෂී ක්‍රමයකි. මෙමගින් බ්‍රවුසර කවුළුව (Browser Window) කාණ්ඩ කළ හැකිය. එක් එක් කාණ්ඩය තුළ වෙන් වෙන්ව HTML අංග ඇතුලත් කළ හැකිය. රාමු කිහිපයක් ‘frameset’ එකක් ලෙස හඳුන්වන අතර එය <frameset> ඇමුණුමෙන් කේතනය කරයි. මෙම ඇමුණුම භාවිතයෙන් බ්‍රවුසර කවුළුව කාණ්ඩ කිරීම ආරම්භ වන අතර එය වගුවක පේළි හා තීරු (Rows and Columns) මගින් තොරතුරු දැක්වීමට සමාන වේ.

 

 

6 

 

 

 

 

 

 ඉහත උදාහරණයෙහි ‘rows’ යන ලක්ෂණයෙන් බ්‍රවුසර කවුළුව රාමු 3කට තිරස්ව කාණ්ඩ කර ඇති අතර පළමූ රාමුව බ්‍රවුසර කවුළුවහි පළලින් 20%ක් වන පරිදිද, දෙවැන්න 60%ක් හා තෙවැන්න 20%ක් ලෙස වෙන් කර ඇත. මීළඟට එක් එක් <frame> ඇමුණුමේ එකිනෙකට වෙනස් HTML පිටු ඇතුලත් කර ඇත.

මෙම ආකාරයෙන්ම බ්‍රවුසර කවුළුව සිරස්ව කාණ්ඩ කළ හැකි අතර ඒ සඳහා <frameset> ඇමුණුමෙහි ‘cols’ යන ලක්ෂණය භාවිතා කළ යුතුය. එමගින් එක් එක් රාමුවට අදාළ දිගක් ලබාදිය හැකිය. තවද, රාමුවක ප්‍රමාණය ප්‍රතිශතයක් ලෙස පමණක් නොව pixel අගයක් ලෙසද ලබාදිය හැකිය.

උදා: <frameset cols = “200”, “500”>
         මෙමගින් බ්‍රවුසර කවුළුව පිළිවෙලින් pixel 200ක හා 500ක ප්‍රමාණයන්ගෙන් සිරස්ව කොටස් 2කට  කාණ්ඩ කරයි.

එකම බ්‍රවුසර කවුළුව තුළ HTML පිටු කිහිපයක් ඇතුලත් කිරීමට මෙම <frames> ඇමුණුම භාවිතා කළද, හේතු කිහිපයක් නිසාවෙන් එය එතරම් සුදුසු ක්‍රමයක් ලෙස පිළි නොගැනේ. සමහර වෙබ් බ්‍රවුසර මෙම ක්‍රමය සඳහා නිර්මාණය කර නොමැති අතර රාමුවල ප්‍රමාණය විවිධ පරිගණකවල විවිධ ප්‍රමාණවලින් පෙන්නුම් කෙරේ. ඒ සඳහා තිර විභේදන අගය (Screen Resolution) හේතු වන අතර සෙවුම් පද්ධති (Web Browsers) <frame> ඇමුණුම සඳහා නිර්මාණය කර නොමැති අවස්ථා වලදී <noframes> ඇමුණුමේ අන්තර්ගතය තිරයේ දිස්වනු ඇත.

 

අධි සම්බන්ධයන් සහ ඇන්කර (Hyperlinks and Anchors)

එකම වෙබ් පිටුවක සහ වෙබ් පිටු කිහිපයක් අතර තොරතුරු සම්බන්ධ කිරීමට මෙම ඇන්කර ඇමුණුම භාවිත කරයි. මෙහි වඩාත් වැදගත් වන්නේ ‘href’ ලක්ෂණයි. ‘href’ හි අගය ලෙස අදාල වෙබ් පිටුවේ ලිපිනය ලබා දෙයි.

උදා: <a href =” http://www.google.com”  target=”_blank”> Google! </a>
         මෙය ‘Google!’ ලෙස දිස්වන අතර click කිරීමෙන් වෙනත් බ්‍රවුසර කවුළුවක Google ආරම්භක පිටුව වෙත යොමු කරයි.

‘target’ ලක්ෂණය සඳහන් නොමැති අවස්ථා වලදී එම පිටුව තුලදීම Google ආරම්භක පිටුව වෙත යොමු කරයි. එකම වෙබ් පිටුව තුල HTML ඇමුණුම් සම්බන්ධ කිරීමට <a> ඇමුණුම සහ ‘name’ ලක්ෂණය භාවිතා කල හැකිය. මෙහිදී, HTML ඇමුණුමේ ‘name’ ලක්ෂණය සඳහා ලබාදෙන අගය, <a> ඇමුණුමේ ‘href’ ලක්ෂණය තුල ‘#’ ලකුණ සමඟ යෙදීමෙන්, එම වෙබ් පිටුව තුල ඇති, දෙන ලද ‘name’ අගය සහිත HTML ඇමුණුම හඳුනාගනියි.

උදා: <a href=”#tagname”></a>
පහත රූප සටහනේ මෙහි කේතනය සහ එය දිස්වන ආකාරය දක්වා ඇත. 

 

 

 

                                    8                                 9              7                                                                                                                                                              

                                                                                

 

 

 

 

 

 

මෙම පාඩම් මාලාවේදී අප සාකච්ඡා කළේ වෙබ් පිටු නිර්මාණය සඳහා වන සුවිශේෂී HTML ක්‍රම අතුරින් කිහිපයක් පමණි. මේවායින් සුදුසු ක්‍රම යොදා ගැනීම මගින් භාවිත කරන්නාට තොරතුරු ග්‍රහණය කිරීම පහසුවන අතර ඒවායේ සමානතා හා අසමානතා වෙන්කර හඳුනාගැනීමටද හැකිවනු ඇත.

 

රචනය: සෙනුරි විජේනායක

සිංහල පරිවර්තනය: යශෝධා ලියනගේ

විමර්ශනය: නමිල පෙරේරා, ලිහිණි සේනානායක

 

Comments
  1. Madhuranga

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.