SinhalaPress: සිංහලෙන් HTML ගැන කෙරෙන පාඩම් මාලාවේ කොටස් අංක 07 - HTML වල Comments යොදන ආකාරය සහ hr ටැගය(tag) සම්බන්දව කෙරෙන පැහැදිලි කිරීම.

[ සිංහලෙන් HTML ] Part : 07

සිං‍හලෙන්  HTML සම්බන්දව කෙරෙන පාඩම් මාලාවේ 7 වන අදියරෙන් මම බලා පොරොත්තු වෙන්නෙ HTML Comments  ගැන හා HTML වල <hr> හෙවත් <hr/> ටැගය(tag) සම්බන්දව කතා කරන්න.මෙහිදී ඔයාලට යම් ගැටලුවක් ඇතිවන්ට පුලුවන් මම මේ පාඩම් මාලාව ඉදිරිපත් කරන්නෙ අපිළිවෙලටද කියල. පිළිතුර නම් කිසිසේත්ම නැහැ යන්නයි. මෙම පාඩම් මාලාවේ මුල සිට අග දක්වා ඔබ රැඳී සිටියොත් 100% පරිපූරණත්වයකින් ඔබට HTML ගැන උගත හැකියි.හොඳයි එම පැහැදිලි කිරීමත් සමග අපි යමු පාඩමට.

අද මම කතාකරන්න යන්නෙ HTML වල තිබෙන තවත් එක් ටැගයක් සම්බන්දව හා HTML වලදි comment(අර්ථ නිරූපනය,පරිකථනය,නිදර්ශනය) යොදන ආකාරය ගැන කතා කරන්න.ඇත්තටම මෙම පාඩම ඉතාම සරල එකක් වෙයි.

මුලින්ම බලමු අද කතාකරන්න බලාපොරොත්තුවන HTML ටැගය(tag) සම්බන්දව. අද කතා කරන්නෙ ‍HTML වල තියෙන <hr /> ටැගය සම්බන්දව. ඔයාලට මතක ඇති පසුගිය මාගේ HTML සම්බන්දව ලියවුනු post වල මෙම ටැගය ගැන කිහිප සැරයක්ම සඳහන් කරා.ඒ නිසා මෙම ටැගය හොඳට ඇහැට හුරුපුරුදු ඇති කියල සිතනව. hr යන කෙටි පදයෙන් කියවෙන්නෙ  Horizontal Rule කියන එකයි.

මෙම ටැගයෙන් බාවිතා කරන්නේ හරස් අතට/තිරස් අතට(horizontal) HTML තුල ඉරි අඳින්න. මේ මගින් HTML තුල තිබෙන අන්තර්ගතයන්(Content) පහසුවෙන් එකිනෙකක් තවකෙකින් වෙන්කරගත හැකි වෙනව.මෙම ටැගය HTML වලිදි coding කරගන්නා ආකරය මම පහතින් යතුරුලියනය(Type) කර ඇත.

<p> Nalaka Prasad Wijesiri Samarasinghe</p><hr />


<p> Nalaka Prasad Wijesiri Samarasinghe</p><hr /> 


<p> Nalaka Prasad Wijesiri Samarasinghe</p><hr />

පහත ආකාරයටත් යොදන්න පුලුවන්. ආදුනිකයන්ට ගැටලුක් ඇතිවෙන්න පුලුවන් නිසා පැහැදිලි කරනවා මිස මෙය නම් සඳහන් නොකලත් කමක් නැතැයි සිතේ.එසේ වෙතත් සැමගේ හිත සුව පිනිස එයත් මෙහි සඳහන් කරන්නම්.

<p> Nalaka Prasad Wijesiri Samarasinghe</p>
<hr />
<p> Nalaka Prasad Wijesiri Samarasinghe</p> 
<hr /> 

ඔබලාට අවශ්‍ය නම් <hr /> යන ටැගය <hr> ලෙසද යොදන්න පුලුවන් මොකද මෙය යුගල ටැගයන් ගනයට අයත් නොවෙන නිසා තිබෙන ටැගය ආරම්බක ටැගය(Starting tag/Opening tag) ලෙස සලකන්න පුලුවන්.මේ සම්බන්දව දීර්ඝ විස්තරයක් ඔබලාට මාගේ පසුගිය HTML සම්බන්දව කෙ‍රුනු ලිපි වලින් ලබාගන්න පුලුවන්.<hr /> ටැගය HTML Editor එකක coding(කේතනය) කර ආකාරය හා එහි ප්‍රතිඵලය/පූර්ව දර්ශනය(Preview), මම විසින් පහත යොදා ඇති රූප සටහන මගින් හොදින් නිරීක්ෂණය කරන්න.

රූපය පැහැදිලි නොමාතිනම් එය මත Click කරන්න

හොදයි මම හිතනව HTML වල <hr/> නොහොත් <hr> ටැගය(tag) සම්බන්දව හොද වැටහීමක් ලැබෙන්න ඇතැයි කියල. මේ සම්බන්දව එක් වරක් උවද ප්‍රයොගිකව අත්හදාබැලීම් කරොත් තත්පරයක් වැනි කෙටි කාලයකදි මෙම ටැගයෙහි හැසිරීම ‍වටහා ගන්න පුලුවන්.හොදයි එහෙනම් අද post එකෙන් කතා කරන්න බලාපොරොත්තුවුනු දෙවන මාතෘකාවට එමු.මෙයත් ඉතාම සරල දෙයක් කියල මුලින්ම කියන්නම්කො! මම මෙහිදී කතා කරන්නෙ HTML Comments සම්බන්දව. මුලිනම බලමු කුමකටද මෙම HTML Comments බාවිතා කරන්නෙ කියල. ඔව් ‍HTML comments බාවිතා කරන්නෙ HTML code(කේතය) එකේ යම් යම් දෙවල් අපගේ පහසුවට සඳහන් කොට තබන්න.

උදාරණලෙස ටැගයන්හි ආරම්බක සහ අවසාන ටැගයන් පහසුවෙන් හඳුනාගන්න, පසු බාවිතය උදෙසා තාවකාලිකව යම් කේත කොටසක් අකර්මන්‍ය(deactivate) කොට තැබීමට, කුමක් හෝ විස්තරයක් code එකේ සඳහන් කරන්න.වගේ දේවල් වලට මෙසේ comments යෙදුවත් වෙබ් බ්‍රවුසරය(Web browser) එම comments කොටස නොසකා හරිනවා මෙන්ම ඒවා වෙබ් පිටුවල සාමාන්‍ය දර්ශනයේදී දර්ශනය වන්නේ නැහැ.

සැ.යු:- Microsoft Internet Explorer යන වෙබ් බ්‍රව්සරය සඳහාම පමණක් ලියවුනු css(මේ සම්බන්දව සම්පූර්ණ පාඨමාලාවක් HTML සම්බන්ද පාඨමාලාවෙන් පසුව SinhalaPress මගින් බලාපොරොත්තු වන්න) IE(Internet Explorer) වෙබ් බ්‍රව්සරයට සම්බන්ද(link) කිරීමේදී විශේෂිත comment ආකාරයක් බාවිතා කරන අතර ඒ සම්බන්දව සවිස්තර විස්තරයක් ඉදිරි post මගින් බලා පොරොත්තු වන්න.

හොදයි දැන් අපි බලමු HTML comment එකක් ලියන ආකාරය. එම ආකාරය පහතින් යතුරුලියනට කර ඇත.

<!--hello Nalaka kohomada--> 
Single Line Comment(තනි පේලි ‍කමෙන්ටුවක්) සඳහා උදාහරණයකි.


<!--hello Nalaka Prasad 
    Wijesiri Samarasinghe-->
Multiline Comment(බහු තීරු ‍කමෙන්ටුවක්) සඳහා උදාහරණයකි.

බලන්න කොතරම් පහසුද කියල. ඔයාලට කරන්න තියෙන්නෙ <!--  හා --> යන කොටස් දෙක තුල ඔයාලගේ comment එක ලිවීමයි. HTML Editor එකක් මත් ලියන ලද HTML Comment එකක් සඳහා උදාහරණයක් පහත රූපය මගින් බලාගත හැකිය.

රූපය පැහැදිලි නොමාතිනම් එය මත Click කරන්න

ඔබට බොහෝ වෙබ් අඩවි මතදි මූසිකයේ(Computer mouse) දකුණුපස බොත්තම(Button) මත Click(ඔබා) මතුවෙන Pop Up List එකේ View Page Source යන තේ‍රීම ලබාදුන්විට එම වෙබ් අඩවියේ Source code(කේත සටහන)බලා ගත හැකිය. එහිදී ඉහත පරිදි commets යොදා ඇති අයුරු බලාගත හැකිය.

සැ.යු:- විවිද වර්ගයේ වෙබ් බ්‍රව්සරයන් සඳහා මෙම ක්‍රමය විවිද ආකාරයෙන් තිබිය හැකිය.නමුත් වර්තමානයේ ඇති ප්‍රධාන වෙබ් බ්‍රව්සරයන් සියල්ලගේම මෙම පහසුකම බොහෝසෙයින් සමානය.


සැ.යු:- වර්තමානයේ ඇති නවීන HTML Editors(සංස්කාරක) වල ඇති පහසුකම් නිසා ටැගයන්ගේ පිහිටීම් නිර්ණයට comments යෙදීම අනවශ්‍ය කරුනක් වී ඇත. එමෙන්ම මෙම comments සඳහා සැලකිය යුතු bits ප්‍රමාණයක් වැය වන නිසා අනවශ්‍ය comments දැමීමෙන් HTML file(ගොණුව) එකෙහි විශාලත්වය වැඩිවිය හැකිය. එය හොඳ තාක්ෂණික බාවිතාවක් ලෙස නොගැනෙයි.

හොඳයි මම හිතනව මෙම post එකෙන් ඔයාලට HTML වල <hr/> ටැගය සම්බන්දව හා HTML Comments සම්බන්දව ඉතා හොද පැහැදිලි වීමක් ලැබෙන්න ඇති කියල.මෙතරම් සරලව සහ උදාහරණ සහිතව පැහැදිලි කරත් තවමත් ගැටලු පවතින කෙනෙක් වෙතොත් මාගෙන් එය විමසන්න.එහෙනම් මීලඟ post එකෙන් හමු වෙමු දිගටම SinhalaPress සමග රැඳී ඉන්න.මම නාලක ප්‍රසාද්.

SinhalaPress: සිංහලෙන් HTML ගැන කෙරෙන පාඩම් මාලාවේ කොටස් අංක 06 - HTML Headings(මාතෘකාව,හෙඩිම,ශීර්ෂනාමය) ගැන කෙරෙන පැහැදිලි කිරීම.

[ සිංහලෙන් HTML ] Part : 06

සිංහලෙන් ‍HTML සම්බන්දව කෙරෙන පාඨමාලාවේ 6වන අදියරෙන් මම ඔබව හමුවන්න බලාපොරොත්තු වන්නේ HTML Headings(මාතෘකාව,හෙඩිම,ශීර්ෂනාමය) ගැන කතා කරන්න. අපි දන්නව ලේඛනයේදී අතිශය වැදගත්කමක් ඇති ‍දෙයක් තමයි හෙඩිම කියන්නෙ. පුවත් පතක වුනත්. සඟරාවක වුනත් යම් ලිපියක් කියවීමට ඉහල පෙළබවීමක් කරන්නෙ මෙන්න මේ කියන හෙඩිම කියන දෙය. වෙබ් අඩවියකට කියා මෙහි වෙනසක් නැත නමුත් පත්තර,සඟරා වලදි හෙඩිම වැදගත් වන කාරනාවලට වඩා වෙබ් අඩවි‍යකදි මෙය වැදගත් වෙනව. නමුත් එම සියලු ප්‍රතිලාභ ලබන්න හැකි වන්නෙ සම්මත ආකාරයට එම හෙඩිම යෙදු‍වොත් පමණයි.

හොදයි දැන් අපි බලමු මෙම සියලු කරුණු සවිස්තරව.

HTML වලදි හෙඩිමවල් යොදන්න සම්මත ආකාර 6ක් ලබාදීල තියෙනව. මේ සඳහා එකිනෙකට වෙනස් HTML tags(ටැගයන්) 6ක් ලබාදීල තියෙනව. මෙම සියලුම ටැගයන් යුගල ටැගයන් ගණයට තමයි අයත් වෙන්නෙ. ඒකියන්නෙ මේ ටැගයන් සඳහා ආරම්බක ටැගය(Starting tag/Opening tag) හා අවසාන ටැගය(Closing tag/End tag) යනුවෙන් කොටස් දෙකක් තියෙනව. මේ සම්බන්දව සවිස්තර විස්තරයක් ‍මාගේ පසුගිය post වලින් ඔබලාට ලබාගන්න පුලුවන්.

හොදයි දැන් අපි බලමු HTML වල මෙම හෙඩිම් ආකාර 6 යොදන ආකාරය

<h1>Hello Nalaka Prasad</h1>


<h2>Hello Nalaka Prasad</h2>


<h3>Hello Nalaka Prasad</h3>


<h4>Hello Nalaka Prasad</h4>


<h5>Hello Nalaka Prasad</h5>


<h6>Hello Nalaka Prasad</h6>

ඉහතින් දක්වල ‍තියෙන්නෙ මම යතුරුලියනය කරන ලද ආකාරය. පහතින් මම දක්වල තියෙනව HTML editor එකක මෙම කේත ලියා ඇති අයුරු සහ එම කේත වල ප්‍රතිඵලය. පහත රූපය හොඳින් නිරීක්ෂණය කරන්න.

රූපය පැහැදිලි නොමාතිනම් එය මත Click කරන්න

ඔබලාට පේනව ඇති <h1> සිට <h6> දක්වා එනකොට ක්‍රමිකව හෙඩිමේ විශාලත්වය අඩුවෙනව. ඒ කියන්නේ ප්‍රධානත්වය ක්‍රමිකව අවරෝහණය වන‍ව. අපි <h1> යොදන්නෙ ප්‍රධාන මාතෘකාව සඳහාය. ඉන්පසු ක්‍රමිකව අපගේ ලිපිවල වියුහය(Structure) අනුව අපට <h2> සිට <h6> දක්වා වන HTML Headings tags යොදාගත හැකියි. මෙමගින් පාඨකයින්ට ලිපි කියවීමේ පහසුවක් මෙන්ම වටහා ගැනීමේ පහසුවක් සැලසේ.

කිසි විටක වෙබ්අඩවියක ‍විශාල අකුරු හා තද(bold) අකුරු යොදන්න වෙන අවස්තා වලදි HTML Headings tags කිසි විටෙක යොදා ගන්න එපා. ඒ සඳහා ඔබට css(මේ පිළිබඳ පරිපූර්ණ පාඨමාලාවක් HTML සම්බන්දව කෙරෙන පාඨමාලාවට පසුව බලාපොරොත්තු වන්න) බාවිතා කරන්න පුලුවන්.

මේ සම්බන්දව ඔයාල ප්‍රායෝගිකව අත්හදා බැලීම් කරද්දි දකින්න ලැබෙයි  HTML Headings tags වලට ස්වයංක්‍රීයව(auto) ඉහලින් සහ පහලින් යම් මායිමක්(Margin) එක්ව ඇති ආකාරය. එම මායිමේ ප්‍රමාණය සියලුම Headings tags සඳහා සමාන වේ. මෙම මායිමේ ප්‍රමාණය ඔබට css බාවිතා කර ඉතා පහසුවෙන් තමන්ට අවශ්‍ය ආකාරයට සකස්කර ගත හැකිය. මෙම post එක පටන්ගන්න කොටම මම කිව්ව පුවත්පත්, සඟරා වැනි දෙවල්වලට හෙඩිමවල් යොදාගන්නා දේවල් වලට වඩා වෙනස් දේවල් වලට වෙබ් අඩවි වලදී හෙඩිමවල් වැදගත් වෙනවයි කියල.එසේ වැදගත් වන්නේ වෙබ් අඩවියේ SEO(Search engine optimization) වලට. මේ සම්බන්දව සම්පූරණ පාඨමාලාවක් SinhalaPress ඔස්සේ අනාගතයේදී බලාපොරොත්තු වන්න. දැනට සරළ පැහැදිලි කිරීමක් කරනවානම් Google ඇතුලු අනෙක් Search Engines(සෙවුම් යන්ත්‍ර) වලට පහසුවෙන් අපගේ Web අන්තර්ගතයන්(Content) හසුවෙන ආකාරයට වෙබ් අඩවි සකස් කිරීම ලෙස හඳුන්වන්න පුලුවන්.

අපිට වෙබ් අඩවියකට තමන් කැමති ආකාරයකට හෙඩිමවල් යොදන්න පුලුවන් ඒ අතරට සම්මත HTML Headings tags යොදා ගෙන ‍මෙන්ම සාමාන්‍ය text එකක් කුමන හෝ ටැගයක් තුලට දමා ඒ සඳහා css බාවිතා කරළ හැඩගැන්වීමෙනුත් එය කරන්න පුලුවන්. නමුත් මෙහිදී SEO සඳහා වන වාසිය අඩු වී යයි.මම මෙහිදී අඩු වී යයි යන වචනය බාවිතා කරේ SEO සඳහා තවත් බොහෝ දේ බලපාන නිසාවෙනි. නමුත් මෙම දෙවැනි ආකාරය මම නම් කිසි විටෙක අනුමත කරන්නෙ නැහැ.ඇත්තටම මෙය ආදුනික ක්‍රමාණුකූල දැනුමක් ‍නොමැති අය කරන ලොකු වැරැද්දක්. ඔබ හොදින් මතක තියා ගන්න ඕන දේ තමයි HTML වල ඒ ඒ කාර්යය උදෙසා ඇති ටැගයන් ඒ ඒ කාර්යය සඳහා පමණක්ම යොදා ගැනීම.

හොඳයි මම  හිතනව මෙම post එක මගින් HTML Headings (මාතෘකාව,හෙඩිම,ශීර්ෂනාමය) ගැන මෙන්ම ඒ ආශ්‍රිත අනෙකුත් දේ සම්බන්දව ඔයාලට හොද පැහැදිලි වීමක් සිදු වුනා කියල.කෙසේ වෙතත් මේ සම්බන්ධව කොතනදී හෝ ගැටලුවක් මතු වුනොත් මා හට එය දන්වන මෙන් මම කාරුණිකව ඉල්ලා සිටිමි. සියලු දෙනාටම සුබ දවසක්! නැවතත් මීලග post එක මගින් හමු වෙමු. දිගටම SinhalaPress හා රැඳී ඉන්න. මම නාලක ප්‍රසාද්.

SinhalaPress: සිංහලෙන් HTML ගැන කෙරෙන පාඩම් මාලාවේ කොටස් අංක 05 - HTML tags/HTML Elements වල Attributes(උප ලක්ෂණ) ගැන හැඳින්වීම.

[ සිංහලෙන් HTML ] Part : 05

පසුගිය ‍post එකෙන් ඔයාලට මතක ඇති මම HTML tags/HTML Elements ගැන පැහැදිලි කිරීමක් කරා. එහිදී මම HTML tags/HTML Elements ගැන මෙන්ම එම HTML tags/HTML Elements වල උපලක්ෂණ ගැනත් සරලව කතාකරා. නමුත් එහිදී මම කරේ HTML tags/HTML Elements වල Attributes(ටැගන්හි උපලක්ෂණ) ගැන මූලික හඳුන්වාදීමක් කිරීමක් විතරයි. අද මම බලා පොරොත්තු වෙනව HTML tags/HTML Elements වල Attributes(ටැගන්හි උපලක්ෂණ) ගැන සවිස්තරව කතා කරන්න.

මෙම උපලක්ෂණ වලින් කෙරෙන්නෙ basic HTML elements වලට වැඩිපුර ගුණාන්ග එකතු කිරීමයි. තවදුරටත් කියනවානම් කිසියම් HTML element එකක් තවදුරටත් විස්තරකිරීමක්. හොඳයි මේ වෙනකොට ඔයාලට පැහැදිලියි HTML Attributes වලින් සිදුකරනු ලබන දේ. දැන් මම ඔයාලට කියල දෙන්න හදන්නෙ කොහොමද මෙම උපලක්ෂණ HTML Element වලට ඇතුලත් කරගන්නෙ කියල සහ එහිදී පිළිපැදිය යුතු නීති රීති කිහිපයක් ගැන. එකින් එක එම කරුණු පැහැදිලි කරනවානම්

01: අනිවාර්යෙන්ම සියලුම උප ලක්ෂණ(Attributes) ඇතුලත් කරයුතු වන්නේ HTML Element වල ආරම්භක ටැගයටයි(Opening tag/Starting tag).

02: සැම විටම HTML Attributes(උප ලක්ෂණ) ඇත්තේ කොටස් දෙකක් ලෙසටය එනම් යුගල වශයෙන්. එම යුගල වන්නේ උප ලක්ෂණයේ නම Name of Attribute සහ උප ලක්ෂණයේ අගය Value of Attribute ලෙසටය. දැන් ඔයාල දන්නවා අනිවාර්යෙන්ම උපලක්ෂණ සඳහා උප ලක්ෂණ නාමය හා උප ලක්ෂණ අගය ලෙසට කොටස් දෙකක් පවතිණ බව. හැබැයි උපලක්ෂණ අගය සඳහා අනිවාර්යෙන්ම අගයක් තිබිය යුතුමය කියල නීතියක් නැහැ.

03: උප ලක්ෂණ නාමය ඔබට කැමති ආකාරයට යොදන්න බැහැ. ඒවා යම් අන්තර්ජාතික සම්මුතියකට යටත්ව සැකසුනු නාම. ගෝලීය වශයෙන් සියල්ලෝම එම සම්මුති වලට අනුව ක්‍රියාකල යුතු වනව. එනම් එම නාම non pre-defined ගණයට වැ‍ටෙනව. යම් කෙනෙකුට ඕනෙනම් තමන් කැමති නම්ක් ඒසඳහා යොදන්න පුලුවන් හැබැයි ඉතින් ‍එහෙම කන්නෙ පිස්සො:P. මොකද එහෙම කරාම වැඩකරන්නෙ නැහැනෙ!

මෙතරම් වෙලා පැහැදිලි කරා විතරයිනෙ! දැන් අපි බලමු උප ලක්ෂණ ලියන ආකාරය සඳහා උදාහරණයක්

<div id="nalaka"></div>

ඉහත උදාහරණයේ <div></div> කියන්නෙ HTML වල එන බහුලව බාවිතාවන(මේ ගැන පසුවට සවිස්තරව කතාකරනව) HTML MARKUP tag එකක්. හොඳින් බලන්න එහි මුල්ටැගයේ හෙවත් ආරම්බක ටැගයේ(Starting tag/Opening tag) ඇතුලත් කර තිබෙන id="nalaka" කොටස. මෙම කොටසේ ඔයාලට දකින්න පුලුවන් ප්‍රධාණ ‍කොටස් කිහිපයක්

01 id
02 =
03 ""
04 nalaka

මෙහි id කියන කොටසට තමයි මම කලින් පැහැදි කල උප ලක්ෂණ නාමය කියන්නේ.  = ලකුණ සෑම විටම උප ලක්ෂණ නාමයට පසුව බාවිතා වෙනව. ඉන්පසු ඔබ අනිවාර්යෙන්ම ""(ද්වි උද්ධෘත පාඨ ලක්ෂණ) ලකුණු තුල තමයි nalaka යනුවෙන් තිබෙන උප ලක්ෂණ අගය(value) එක සටහන් කල යුතු වන්නෙ.මෙහිදි ""(ද්වි උද්ධෘත පාඨ ලක්ෂණ) ලකුණුම යෙදීම අනිවාර්ය නැහැ. නමුත් වඩාත් බාවිතාවන ක්‍රමය(Common method) මේක තමයි. මේ සඳහා උබට අවශ්‍යනම් ''(තනි උද්ධෘත පාඨ ලක්ෂණ) ලකුණු වුවද ‍යොදා ගත හැකියි.මෙහිදී ''(තනි උද්ධෘත පාඨ ලක්ෂණ) යෙදීම අනිවාර්යය වන අවස්තාද ඇත ඒ සඳහා උදාහරණ මෙම post එක කියවගෙන යනකොට හම්බ වෙයි.

අනිත් විශේෂ දේ තමයි HTML Attribute(උප ලක්ෂණ) ලියන අකුරු ඉංග්‍රීසි කැපිටල් අකුරුද සිම්පල් අකුරුද කියන එක මත වෙනස් වෙනව.සරලව කිව්වොත් ඔය කියන්නේ HTML Attribute(උප ලක්ෂණ) case-insensitive කිලනේ.මේ සඳහා උදාහරණයක් බලමු

01 id="Nalaka"
02 id="nalaka"

ඉහත උදාහරණ අංක 01 උප ලක්ෂණ අගයවන Nalaka යන්නෙහි මුල් අකුර ඉංග්‍රීසි කැපිටල් අකුරක් බව ද 02 උදාහරණයෙහි මුල් අකුර ඉංග්‍රීසි සිම්පල් අකුරක්(බලන්නකො ඉංග්‍රීසිත් සිංහලෙන් ලියන්න උන හැටි, LOL) බවද ඔබලාට පේනව. එම නිසා මෙහිදී උප ලක්ෂණ අගයන් දෙක අගයන් එකක් ලෙසට නොව අගයන් දෙකක් ලෙසටයි ගනු ලබන්නෙ. ලෝකයේ Web standards(සම්මතයන්) හඳුන්වා දෙන w3c(World Wide Web Consortium) ආයතනය HTML4 සංස්කරණය සඳහා HTML Attribute(උප ලක්ෂණ) ලියන කොට හැකි සෑම අවස්තාවකදීම ‍English Simple Letters බාවිතා කරන්න කියල නිර්දේශ(Recomend) කරල තියෙනව.හැබැයි ඕනෙම නම් English Capital Letters වලිනුත් HTML4 සඳහා HTML Attribute(උප ලක්ෂණ) ලියන්න පුලුවන්. නමුත් HTML4 සංස්කරණයට පසුව ආ HTML වල නවතම සංස්කරණය වන XHTML සඳහානම් HTML Attribute(උප ලක්ෂණ) ලියන කොට අනිවාර්යෙන්ම English Simple Letters බාවිතා කරන්නම වෙන‍ව.

මම ඔයාලට පොරොන්දුවුනා ''(තනි උද්ධෘත පාඨ ලක්ෂණ) යෙදීම අනිවාර්ය වන අවස්තාක් සඳහා උදාහරණයක් දෙනවයි කියල.මෙසේ ''(තනි උද්ධෘත පාඨ ලක්ෂණ) යෙදීම අනිවාර්යවෙන්නෙ අපි බාවිතා කරණ උප ලක්ෂණයේ අගය සඳහා ""(ද්වි උද්ධෘත පාඨ ලක්ෂණ) ලකුණු යොදන්න වන තැන්වලදි. මේ ස‍ඳහා මම බාවිතා කරන්න යන්නෙ HTML වල Hyperlinks යොදන්න බාවිතා කරන HTML වල තියෙන <a></a> නම් tag එක. එම ටැගයට Hello "Nalaka" kohomada කියන වාක්‍යය සඳහා title නම් HTML Attribute එක දෙන්න තමයි මම හදන‍්නෙ. ඇත්තටම මොකක්ද Hello "Nalaka" kohomada කියන වාක්‍යයේ තියෙන විශේෂත්වය? ඔයාල හොඳින් බැලුවොත් දකින්න ලැ‍බෙයි Nalaka කියන වචනය ""(ද්වි උද්ධෘත පාඨ ලක්ෂණ) ලකුණුතුලු පවතින බව. හොදයි අපි බලමු මෙය coding කරන ආකාරය.

<a title='Hello "Nalaka" kohomada'>click here</a>

මීට අදාල මවිසින් සකසන ලද පහත රූප සටහන හොඳින් නිරීක්ෂණය කරන්න.

රූපය පැහැදිලි නොමාතිනම් එය මත Click කරන්න

Hello "Nalaka" kohomada කියන වාක්‍යය ""(ද්වි උද්ධෘත පාඨ ලක්ෂණ) ලකුණු තුලට දමා බලමු කුමක්ද ලැබෙන ප්‍රතිපලය කුමක්ද කියා මී‍ට අදාල පහත රූප සටහන හොඳින් නිරීක්ෂණය කරන්න. එවිට දක්නට ලැබෙයි හාත්පසින්ම වෙනස් ප්‍රතිපලයක් එන ආකාරය

රූපය පැහැදිලි නොමාතිනම් එය මත Click කරන්න

මේ සඳහා HTML කේතය(code) ලිවිය යුතුවන්නේ මේ ආකාරයටයි.

<a title="Hello "Nalaka" kohomada">click here</a>


සැ. යු:- ඉහත උදාහරණ දෙක සඳහාම බාවිතා කරණලද <a></a> ටැගයන් සඳහා <a></a> ටැග්වලටම සුවිශේෂී වූ href නැමති උප ලක්ෂණය(Attribute) බාවිතා කර නොමැත.


සැ. යු:- HTML වල විවිද ටැගයන් සඳහාම ආවේණික වූ උප ලක්ෂණ ඇතුවා මෙන්ම බොහෝ ටැගයන් සඳහා පොදු වන්නාවූ උප ලක්ෂණයන්ද ඇත.


සැ. යු:- HTML තුල විශාල උපලක්ෂණ ප්‍රමාණයක් ඇති අතර ඒවා සියල්ල සහ ඒවායින් ඉටුවන කාර්යයන් සම්බන්දව අංගසම්පූර්ණ පාඨමාලක් බලාපොරොත්තු වන්න.

මම හිතනව ඉහත විස්තර කිරීම් වලින් HTML Attributes(උප ලක්ෂණ) ගැන හොඳ වැටහීමක් ලබාගන්න ඇතැයි කියල මම හිතනව. මෙතරම් දීර්ගලෙස ඉතාමත් සරල සහ පුංචි කොටස් පැහැදිලි කරන්නහේතුව සියලු දෙනාටම මම කියනදේ 100% ‍වැටහෙන්න අවශ්‍ය නිසා. නැත්නම් මෙම post එකේ ඇත්තේ ඉතාම සරළ සංකල්ප කිහිපයක් පමණි. මෙහි යම් යම් අඩුපාඩු ඇත්නම් මා හට දන්වන මෙන් මම කාරුණිකව ඉල්ලාසිටිනව. එහෙනම් මීලග post එකෙන් හමුවෙමු. මම නාලක ප්‍රසාද්.

SinhalaPress: සිංහලෙන් HTML ගැන කෙරෙන පාඩම් මාලාවේ කොටස් අංක 04 - HTML file එකක මූලික වියුහය(Structure) ගැන හැඳින්වීම.

[ සිංහලෙන් HTML ] Part : 04

මෙම post එකෙන් මම බලාපොරොත්තු වෙන්නෙ HTML file එකක මූලික වියුහය(Structure) එක ගැන පැහැදිලි කිරීමක් කරන්න. ඇත්තටම බොහෝ අයට මේ පිළිබඳව මූලික හෝ දැනුමක් තිබෙනව. නමුත් වඩාත් ක්‍රමාණුකූල ලෙස හා පරිපූර්ණ ලෙස මෙම පාඩම් මාලාව කරගෙන යාමට අවශ්‍ය නිසා එම කොටස්ද ඇතුලත් කරන්න සිතුව. දැන් අපි බලමු වෙබ් බ්‍රවුසරයක් කොහොමද HTML file එකක් හඳුනාගන්නෙ කියල. මේ සඳහා ඔබ notepad එක හෝ වෙනයම් මෘදුකාංගයක් බාවිතයෙන් ලියනු ලබන code(කේතය) ය .html හෝ .htm ආකාරය save කරගත යුතුයි. මීට අදාලව මම විසින් යොදා ඇති පහත රූප සටහණ හොදින් නිරීක්ෂණය කරන්න.

රූපය පැහැදිලි නැත්නම් එය මත click කරන්න

තවත් ඔයගොල්ලන්ට ප්‍රශ්නයක් ඇතිවෙන්න පුලුවන් තැනක් තමයි ඇයි මේ Extension ආකාර දෙකක් පවතින්නෙ කියල.ඇත්තටම මෙසේ .html ලෙස හා .htm ආදී වශයෙන් Extension දෙකක් HTML ‍file සඳහා තිබුනත් Extension එකේ වෙනස හැරෙන්ට වෙන කිසිඳු‍ වෙසක් මෙම Extension වර්ග දෙක අතර නැහැ.වඩාත් පැහැදිලිව සහ සරලව කිව්වොත් ඔයාල කැමති Extension එකක් බාවිතා කරන්න පුලුවන්. ඒ කියන්නෙ .html බාවිතා කරත් .htm බාවිතා කරත් මේ දෙක අතර කිසිඳු කිරියාකාරීත්වයේ වෙනසක් නැහැ.

තවදුරටත් පැහැදිලිකරගන්න පහත සඳහන් කොටසත් කියවන්න.
html සහ htm යන Extension අතර වෙනස ඇත්තේ ඉංග්‍රීසි වචනයක බෙදා වෙන්කර ලිවීම මත හෝ එක්කර ලිවීම මතය. ඒ අනුව එම Extension දෙකෙ සෑදෙන ආකාරය පහතින් දක්වා ඇත.

HTML කියන කෙටිවචනයෙන්/සංකේතනාමයෙන්(Acronym) එකෙහි දීර්ග නාමය වන්නේ Hyper Text Markup Language කියන එකයි.

HTM කියන කෙටිවචනයෙන්/සංකේතනාමයෙන්(Acronym) එකෙහි දීර්ග නාමය වන්නේ Hypertext Markup Language කියන එකයි.

බලන්න වචනයක් කර හදියක්:D

ඉහත කරුනු සියල්ල සලකා බැලුවොත් දැන් අපි දන්නව කොහොමද වෙබ් බ්‍රව්සරයක් HTML file හඳුනාගන්නෙ කියල සහ එම files කොහොමද HTML ‍file ලෙස පරිගණකයේ save කරගන්නෙ කියල.ඇත්තටම ඔයාලට කම්මැලිත් ඇති නේද මෙතරම් සරල දෙයක් මෙච්චර පැහැදි කරනකොට. ඒත් ඉතින් මම බ්ලොග් කරුවෙක් විදියට සෑම සුලු දෙයක්ම ගොඩක් පැහැදිලි වෙන ආකාරයෙන් හැමෝටම ගැලපෙන විදියට ලියන එක මගේ යුතුකමක් විදියට මම සලකනව.අනික පුංචි දේ වුනත් දැනගන්න එකේ වරදකුත් නැහැනෙ.කෙසේ වෙතත් දැනටමත් යම් දැනුමක් ඇති මාගේ පාඨකයින්ට මේ නිසා වන අපහසුතාවය ගැන මම කණගාටුවනව.

දැන් අපි බලමු HTML file එකක මූලික වියුහය(Structure) එක මොන වගේද කියල

<html>

          <head>
          </head>


          <body>
          </body>

</html>

රූපයක් ආශ්‍රයෙන්

ඔය ඉහතින් දක්වා ඇත්තේ ‍HTML file එකක මූලික වියුහයයි.එහි ඔයාලට දකින්න පුලුවන් <html></html> ටැගයන් යුගල තුල <head></head> හා <body></body> ටැගයන්(tags) ඇතුලත්වන ආකාරය. ඇත්තටම ඔය ටැගස් තමයි HTML file එකක මූලික tags වන්නෙ. සියලුම HTML file වල මෙම ටැගස් මෙම වියුහයට අනුව සකස් වී ඇති අන්දම දකින්න පුලුවන්. හැබැයි මේදේත් කියන්නම ඔනෙ මොකද වෙබ් බ්‍රවුසරයන්ට HTML files හඳුනා ගන්න මෙම කිසිඳු ටැගයක් අවශ්‍ය වන්නේ නැහැ. එකම දේ HTML code (කේතය) එක ඇතුලත් file එක .html ලෙස හෝ .htm යන Extension වලින් save කරගැනීම පමණයි.

හොඳයි මම හිතනව ඔයාලට HTML files වල මූලික වයුහය ගැන සහ ‍ඒ ආශ්‍රිත අනෙකුත් දේවල් සම්බන්දව හොඳ දැනුමක් ලැබෙන්න ඇති කියල. යම් යම් අඩුපාඩු ඇත්නම් ඒගැන මට දන්වන්න.ගැටලුකාරීතැන් ඇත්නම් ඒවාද ‍මාවෙත ඉදිරිපත් කරන්න මම කැමතියි මම දන්න ඕනෑම දෙයක් ඕනම කෙනකුට කියල දෙන්න. මම ඒ කිසිම දෙයක් කරදර කාරීදේවල් විදියට සලකන්නේ නැහැ.හැකි ඉක්මනින් ඒවාට පිලිතුරුදීමට මම බලාපොරොත්තු වෙනව.ඉහත සියලුම කරුනු සපයා ඇති රූප සටහන් සමග හොදින් පරිශීලනය කරන්න.මීලඟ post එකෙන් මම බලාපොරොත්තු වෙන්නෙ මෙතෙක් උගත් දේ සියල්ල ප්‍රයොගිකව අත්හදාබලන්න මග පෙන්වන post එකක් දාන්න. දිගටම SinhalaPress සමග රැඳී ඉන්න.මම නාලක ප්‍රසාද්.

SinhalaPress: සිංහලෙන් HTML ගැන කෙරෙන පාඩම් මාලාවේ HTML tags/HTML Elements ගැන කෙරෙන පැහැදිලි කිරීම

[ සිංහලෙන් HTML ] Part : 03

පසුගිය post එකෙන් අපි කතාකරා කොහොමද HTML වලට මුලින්ම එන්නෙ සහ HTML coding වලට මොනවගේ දේවල්ද මූලික වශයෙන් අවශ්‍ය වන්නෙ කියල. හොදයි අපි මේ post එකත් සමග පටන්ගමු HTML coding කරන්න. සමහරුනම් මේ coding කියන වචනය HTML සඳහා යොදනවාට එතරම් කැමැත්තක්නම් නැහැ. කවුරුන් ලඟ හෝ මේ සඳහා ගැලපෙනවායි සිතෙන වචනයක් වෙතොත් මට නිසැකවම කියන්න ඕනෙ හරිද! ඕන් එහෙනම් හාහා පුරා කියල බහිමු වැ‍ඩේට.

අපි මේ සඳහා මුලින්ම ගනිමු HTML tags ගැන හෙවත් HTML Elements ගැන කතා කරන්න. ඔයාල මගේ පරණ post කියෙව්ව නම් මතක ඇති මම HTML tags ගැන යම් තාක් දුරකට පැහැදිලි කිරීමක් කරා. අපි පසුගිය මතකය නැවතත් අවදිකරගෙනම අනෙකුත් දේවල් සමගද මෙය සම්බන්ද කරගනිමු.ඔන්න එහෙනම් ඔයාලට මතක ඇතිනෙ HTML සම්බන්දව මම කලින් කරපු හැදින්වීම. නැවතත් එය සාරාංශකොට දක්වනවානම්,

01: HTML කියන්නෙ Markup Language එකක්

02: මෙය පරිගණක ක්‍රමලේඛනය උදෙසා බාවිතා කරන්නක් නෙමෙයි.

03: HTML සමන්විත වෙලා තියෙන්නෙ HTML tags/HTML Elements වලින්.

04: විවිද වර්ගයේ HTML tags විශාල ප්‍රමාණයක් HTML සතු වෙනව.

05: බොහෝ HTML tags පවතින්නෙ යුගල ටැගයන්(tag pairs) ආකාරයට.

උදා:- <div></div>, <span></span>, <p></p> ආදී වශයෙන් ඉදිරිපත් කර හැකිය.

06: සුලු HTML tags ප්‍රමාණයකට ඇත්තේ අවසාන ටැගය(Closing tag)පමණි.

උදා:- <br />, <hr /> ආදී වශයෙන් ඉදිරිපත් කර හැකිය.
07: අනිවා‍ර්යෙන්ම යුගල ටැගයන් බාවිතා කරන අවස්තාවන්හීදී අවසන් ටැගය(Closing tag/End tag) අමතක නොකල යුතුයි. මෙය බොහෝවිට IDE බාවිතයෙන් තොරව coding කරනකොට ඇතිවෙන සාමාන්‍ය තත්වයක්.
උදා:-

1. <div>hello Nalaka Prasad!</div> නිවැරිදි අකාරයයි
2. <div>hello Nalaka Prasad!<div> වැරදි අකාරයකි, මෙහි මෙහිදී අවසන් ටැගය(Closing tag/End tag) නිවැරිදි ආකාරයෙන් යොදා නොමැත. එය </div> ලෙස නිවැරිදි විය යුතුය.
3. <div>hello Nalaka Prasad! වැරදි අකාරයකි,මෙහිදී අවසන් ටැගය(Closing tag/End tag) යොදා නොමැත
   

08: කලින් මම සඳහන් කල <br /> , <hr /> වැනි ටැගයන් HTML වල විවිද සංස්කරණ(versions) වන HTML1, HTML2, HTML3, HTML4, HTML5 වලදී <br>, <hr> ලෙසද ලියන්න පුලුවන් ඔයාලට පැහැදිලි ඇතිනේ වෙනස්කම මොකක්ද කියල. වෙනස්කම තමයි / නොයෙදීම. නමුත් XHTML වලදී නම් මෙය යෙදිය යුතුවන්නෙ / සමගමයි.තවද වඩාත් සම්මත ආකාරයද වන්නේද / යොදන අකාරයයි. අප ඉදිරියේදි ඉගන ගන්න බලාපොරොත්තුවන XML වලද මේ ආකාරයට අවසාන ටැගය සඳහා / යෙදීම අනිවාර්යවේ.HTML වලදි නම් සියලුම නූතන වෙබු බ්රව්සරයන්ම වාගේ යම් තාක් දුරකට Closing tag/End tag auto add කර ගැනීම සිදු කරත් යම්යම් දෝශ මතුවෙන්න පුලුවන්.

අනිත්දේ තමයි කලින් අපි <br /> , <hr /> වාගේ ටැගයන් හිස් ටැගයන්හි අවසාන ටැගය(Closing tag/End tag) ලෙස ඉදිරිපත් කරත් මෙම ටැගන් එම ටැගයන්හි ආරම්බක ටැගයන්(Opening tag/Starting tag) ලෙසද හඳුන්වා දෙන්න පුලුවන්.

09: මම දැන් කියන්න යන දේ තරමක් විශේෂ දෙයක් එනම් ඔයාලට මතක ඇති මම පසුගිය post වලිදි කිව්ව විවිද HTML tags වලට ඒවාටම ආවේණික වූ ලක්ෂණ තියෙනවා කියල.
උදා:-

1. <h1></h1> ටැගයන් බාවිතා කරල අපිට ශීර්ෂපාඨයක්(Heading) එකක් නිර්මාණය කරගන්න පුලුවන්.
2. <a></a> ටැගයන් බාවිතා කරල අපිට සම්බන්ධතාවයක්(Hyperlink) එකක් නිර්මාණය කරගන්න පුලුවන්

ඉතින් පේනව‍ නේද විවිද කාර්යයන් සඳහා HTML වලිදි විවිද ටැගයන් බාවිතා වෙන්නෙ ඒවාටම ආවේණික වූ මූල ලක්ෂණ නිසායි. මෙහිදී කියන්ට අවශ්‍ය විශේෂදේ තමයි. බොහෝ අවස්තා වලදි මෙම මූල ලක්ෂණ වලට අමතරව උප ලක්ෂණ මෙම ටැගයන් සඳහා යොදන්න වීම. මෙවැනි උප ලක්ෂණ(‍‍attributes) සමහරක් බොහෝ ටැගයන් සඳහා පොදු‍වෙනවා මෙන්ම,ඇතැම් උප ලක්ෂණ(‍‍attributes) එක් ටැගයක් උදෙසාම වෙයි. මේ සියල්ලක්ම සඳහ උදාහරණ එකින් එක අරගෙන කෙරෙන විස්තර කිරීම් ඉදිරි ‍මාගේ posts වලින් බලාපොරොත්තු වන්න.

හොඳයි මම හිතනව ඔයාලට මෙතෙක් මම කිව්ව දේවල් තේරෙන්න ඇති කියල.දැන් මම කතා කරන්න
හදන්නෙ HTML Elements සම්බන්දව විශේෂ දෙයක් එනම් මෙම මම ඉහත කතාකරන ලද HTML tags/HTML Elements තුල තවත් HTML tags/HTML Elements ඇතුලත් කල හැකි වීම.මෙවැනි HTML tags/HTML Elements Nested HTML Elements ගණයට අයත් වෙනව. හැබැයි මෙය ගොඩක් HTML tags/HTML Elements වලට අදාල වුවත් <br />, <hr /> වැනි ටැගයන් සඳහා අදාල නොවන බව කියන්න ඕන.

උදා:- <body><div><span><a></a></span></div></body>

බලන්න HTML කියනදේ කොතරම් පහසුද කියල!

මෙන්න මේ දේ ගැනත් ඔයාලට මට කියන්න ඕන. HTML tags අපිට කැමතිනම් capital letters වලින්හරි simple letters වලින්හරි ලියන්න පුලුවන් මෙයින් අදහස් වන්නේ HTML tags/HTML Elements non case sensitive කියන එකයි. නමුත් World Wide Web Consortium (W3C) යන ප්‍රමිති කරණ ආයතනය වඩාත් සහතික කරන්නෙ(Recommend) simple letters වලින් HTML tags/HTML Elements ලියන්න කියල, විශේෂයෙන් XHTML වලිදි. ඔයාල බලනව ඇති වෙලාවකට HTML කියනව වෙලාවකට XHTML කියනව කියල. ඇත්තටම HTML වල විවිද සංස්කරණ තියෙනව. මේ සියලු දෙයක් ගැනම ඉතා සවිස්තරව සහ පිළිවෙලින් ඉදිරියේදි කතාකරන්න මම බලා පොරොත්තු වෙනව. දිගටම SinhalaPress සමග රැඳී ඉන්න.මීලඟ post එකෙන් හමුවෙමු.හැමෝටම සුබ දවසක්. මම නාලක ප්‍රසාද්.

SinhalaPress: HTML coding වලට පය තැබීමේදී මුලින්ම සැලකිලිමත් විය යුතු සරළ තැන් කිහිපයක්

[ සිංහලෙන් HTML ] Part : 02

HTML සම්බන්දව මූලික සරල හඳුන්වාදීමකින් පසුව දැන් අපි බලම් කොහොමද HTML coding කරන්නෙ කියල. ඇත්තටම ඔබට මේ සඳහා අවශ්‍ය වන්නේ සරළ text editorක් පමණයි. මේ සඳහා Dreamweaver වගේ වානිජ මෘදුකාංග කිසි විටෙක අවශ්‍ය වන්නේ නම් නැහැ. බහොමයක් අය වඩාත් සහතික කරනු ලබන්නෙ මුලිනම coding පටන් ගන්නවනම් notepad වගේ සරල text editor එකක් බාවිතා කරන්න කියල.

මොකද එහිදී අප A-Z දක්වාම අපගේ code එක අපිම ලියන්න ඕනෙ. මේ නිසා එම පුද්ගලයාට කෙටි කාලයකින්ම coding සම්බන්ද දේවල් හොඳින් මතක හිටිනව. මෙහි තියෙන වාසිය තමයි ඔහුට කිසිම සහයක මෟදුකාංග වල සහය නොමැතිව notepad වගේ සරළ texteditor එකක් බාවිතා කරල ඔහුගෙ code එක ලියා ගන්න පුලුවන් කම ලැබීම. නමුත් සමහරෙක් IDE(Integrated development environment) වගේ  මෘදුකාංග බාවිතා කරල coding කරන්න පුරුදුවෙලා සිටියොත්, එවැනි මෘදුකාංග නොමැති
අවස්තාවන්හීදී සහ code එකක වැරුද්දක් පරීක්ෂා කිරීමේදී මෙන්ම ඉතා හදිසි කාර්යයක් කිරීමේදී බොහෝවිට අපහසුතාවලට ලක්වීමට පුලුවන්.

 මෙය HTML වලදි නම් එතරම් සැලකිය යුතු දෙයක් නොවුනත් තරමක් සංකීරණ Programming language වලිදිනම් සැලකිය යුත්තක්. ඉතින් මම ඔය දුන්නෙ පොඩ් අවවාදයක්.නමුත් IDEs බාවිතා කරන එකේ වාසිත් ගොඩක් තියෙනව ඒඅතරට ඉතා ඉක්මනින් සහ පිළිවෙලට coding එක ලියා ගත හැකි වීමල, දෝෂ ඉතා ඉක්මනින් නිරාකරණයට(Error debugging) ඇති පහසුකම්, coding කිරීමේදී එහි විවිද කොටස් වෙනස් වර්ණයන්ගෙන් ස්මතුකර(Highlight)කර දැක්වීම වගේ දේවල් දක්වන්න පුලුවන්

ඇත්තටම ඔබ coding සම්බන්දව ප්‍රවීණයෙක් නම් මේ කිසිම දෙයක් ඔබට ගැටලුවක් නෙවෙයි. ඒ කියන්නෙ ඔබ notepad එක බාවිතා කරත් Dreamweaver හෝ කිසියම් IDE එකක් බාවිතා කරත් ඉතා පහසුවෙන් coding කරන්න පුලුවන් කියන එක. මේහැමදේම රඳාපවතින‍්නෙ ඔහුගෙ ප්‍රවීණත්වය සහ දක්ෂතාවය උඩයි. මම ඔය කලින් දුන්න අවවාදය ‍වඩාත් වටින්නෙ coding වලට අලුතෙන් එන අයට. හොඳයි ඔය ඉහත සියලු අවවාද අනුසාශනාත් එක්කම පටන් ගනිමුකො HTML coding!

 හැබැයි ඒ මීලඟ post එකෙන්. එහෙනම් අදට මම සමුගන්නවා මීලඟ post එකෙන් නැවත හමු වෙමු SinhalaPress සමග දිගටම රුඳී ඉන්න. ඔයාලට සුබ දවසක්.

SinhalaPress: සිංහලෙන් වෙබ් අඩවි(Web sites) නිර්මාණකරනය ගැන කෙරෙන පාඨමාලාවේ,HTML ආරම්භක පාඩම

[ සිංහලෙන් HTML ] Part : 01

ඔන්න ඉතින් පොරොන්දු වුනු පරිදි HTML පාඨමාලාව පටන් ගන්නයි හදනේනෙ. එහි මුල් පියවර තමයි අද මම ඔයාලට දෙන්නෙ. හැබැයි ගොඩ දෙනෙක් කියයි අයියෝ ඕව මොනාද HTML නම් සිම්පල්නෙ කියල. ඔව් ඒක ඇත්ත! මාර වැ‍ඩේ කියන්නෙ මට නම් මේව එකක්වත් තාම නම් සිම්පල් වෙලා නැහැ. හර හරි අමතර කතා නැතුව පටන්ගනිමුකො අපේ පාඨමාලාවේ පළමුවන කොටස.

සරලවම කියනවනම් HTML කියන්නෙ අන්තර්ජාලයේ ලොක වියාප්ත ජාලයේ(WWW) තියෙන Web pages(වෙබ් පිටු) වල දත්ත යම් ක්‍රමාණුකූල විදියට පෙන්වන්න හේතුවෙන සරල භාශාවක්. මෙම HTML පරිගණක ක්‍රමලේක භාශාවක් ගනයට නම් වැටෙන්නෙ නැහැ. HTML කියන කෙටි වචනයෙන් හැඳින්වෙන්නෙ Hyper Text Markup Language කියන එක ඒ කියන්නෙ මේක Markup Language එකක්. මෙය සෑදී ඇත්තේ විවිද tags වලින් HTML වල විවිද tags වර්ග දකින්න පුලුවන්.

HTML මූලික සංස්කරණවල සිට නූතන සංස්කරණතෙක් පැමිනෙන විට මෙම HTML tags ප්‍රමාණය වැඩිවීමක් දකින්න පුලුවන් මෙන්ම සමහර tags ඉවත්වීමද දකින්න පුලුවන් සාමාන්යයෙන් HTML tags යුගල වශයෙන් තමයි පවතින්නෙ නමුත් මෙය සෑම HTML tags සදහාම අදාල වන්නේ නැහැ.
උදාහරණයක් විදියට <br /> වගේ ටැගයන් ගන්න පුලුවන් මේවගේ තව ටැගයන් තියෙනවා. ඒව සියල්ල ක්‍රමාණුකූලව ඉදිරි පාඩම් මාළාවලින් බලාපොරොත්තුවෙන්න.මම මෙම post එකෙන් බලාපොරොත්තු වෙන්නෙ HTML ගැන සරල හඳුන්වාදීමක් කරණ ගමන් මූලික ප්‍රවේශයක් HTML සඳහා ලාබාගන්නයි.

මම දැන් දෙන්නම්කො HTML tags යුගල කිහිපයක් සදහා උදාහරණ:

01: <h1></h1>

02: <h2></h2>

03: <li></li>

04: <div></div>

05: <span></span>

පේනව නේද මේව බොහොම සරලයි කියල! ඉහතින් සඳහන් කරල තියෙන්නෙ උදාහරණ කිහිපක් පමණයි. තව tags විශාල ප්‍රමාණයක් තියෙනව මෙම tags සමගම අනෙකුත් tags සියල්ලක්මද එකින් එක මම සාකච්ඡා කරන්න බලාපොරොත්තු වෙනව. තවත් HTML tags ගැන පැහැදිලි කරනවානම් මෙම tag වල ඔයාලට මුලින්ම කිව්ව වගේ

දකින්න පුලුවන් මේවගෙන් බොහෝමයක් යුගල වශයෙන් පවතින බව මෙම යුගලයන්හි පළමු ටැගය අපි සාමාන්යයෙන් හඳුන්වන්නෙ Opening tag/Starting tag ලෙස ඒවගේම අවසාන ටැගය හඳුන්වන්නෙ Closing tag/End tag ලෙස. අනිත් දේ තමයි මේ ටැගයන් ලියන සම්මත ආකාරයකුත් ඉහත උදාහරණවල දකින්න පුලුවන්.

එනම් සියලුම tags ලියන කොට ලියන්න අවශ්‍ය <>(angle brackets) තුලයි.තවත් දෙයක් තමයි විවිද ටැගයන් සඳහා ඒවාටම ආවේනික වුනු ගතිලක්ෂණ දකින්න පුලුවන් ඒක නම් කියන්නත් දෙයක්ද කියල ඕගොල්ලො අහයි! ඇත්ත නේන්නම් නැත්තම් මොකටද ‍විවිධ වර්ගයේ ටැගයන් කුලකයක්ම හඳුන්වල දීල තියෙන්නෙ. උදාහරණ කිහිපයකින් මෙය සරලව පැහැදිලි කරගන්නවානම්.

01: <head></head> මෙම ටැගයන් තුල ලියන දත්ත වෙබ් පිටු වල දිස්වෙන්නේ නැහැ.මෙම ටැග් තුල තිබෙන දත්ත ප්‍රයෝජනයට ගන්නෙ Web browser එක සඳහා වෙබ් පිටුවේ විස්තර ලබා දෙන්න. මේ ගැන අංගසම්පූර්ණ පැහැදිලි කිරීමක් මෙම ටැගයන් ගැන වෙනමම අරගෙන කරන ඉදිරි පාඩම් මාලාවන්වලදී බලාපොරොත්තු වන්න.

02: <body></body> මෙම ටැගන් තුල තමයි වෙබ් පිටුවේ දර්ශනය විය යුතු සියලුම දත්ත ඇතුලත් කරනු ලබන්නේ. ඉහත උදාහරණවල‍ මෙන්ම අනෙකුත් ටැගන් සඳහාද මේ ආකාරයෙන්ම ඒවාටම ආවේණික වුනු ගති ලක්ෂණ පවතිනව.

මේ සියලුම සරල පැහැදිලි කිරීම් එක්ක ඔය ගොල්ලන්ට(HTML ගැන නොදන්න අයට) HTML ගැන සරල වැටහීමක් සහ කුතුහලයක් ඇති වුනා කියල මම හිතනව. ඉදිරි දින කිහිපයේදි මෙම post එක තව දුරටත් සංස්කරණය කරල වඩාත් කුමාණුකූල ආකාරයෙන්‍ මෙන්ම වැඩිදියුනු කර ඉදිරිපත් කරන්න මම බලාපොරොත්තු වෙනව. හොඳයි මේ පළමු හෙවත් ආරම්භක post එක HTML සම්බන්දව. දිගටම රැඳීඉන්න SinhalaPress සමග.

ඔයාල මේ post එක කියෙව්වනම් මෙහි ඇති අඩුපාඩු,ඔයාලට නැගුනු ප්‍රශ්න වගේම ඔයාලට හිතෙන දේවල් පහත comment box එක හරහා මට ඉදිරිපත් කරන්න. එහෙනම් මම අදට සමුගන්නව ඉදිරි දින වලදි අනෙකුත් පාඩම්මාලා සමග සම්බන්ද වෙමු. හැමෝටම සුබ දවසක්.