HTML සිංහලෙන් පාඩම 8 - More Tags

            කොහොමද කට්ටියට ගොඩක් කාලෙකට පස්සේ තමයි අද මම HTML පාඩමක් අරගෙන ආවේ. ගොඩක් වැඩ තිබුන නිසයි එහෙම වුනේ මීට පස්සෙ ගොඩක් දුරට එමෙහ වෙන එකක් නෑ. හොඳයි අද පාඩමට කලින් මෙතනින් ගිහින් මීට කලින් පාඩමත් බලල ඉමුකෝ!

                අද පාඩමෙන් අපි තව දුරටත් අපිට ඉතා වැදගත් වෙන tags කිහිපයක් ගැන කතා කරන්නම්. මේ Tags වෙබ් පිටු නිර්මාණයේදී නිතර නිතර අවශ්‍ය වන ඒවා වේ.

<h...> Tag එක HTML Headings සඳහා

             මම මේ Tag එක ගැන මීට කලිනුත් කතා කරල තියෙනවා ඒත් මේ වෙලාවෙත් ඒ ගැන කතා කරන්න හිතුනා මොකද මේ Tag එක ඒ තරම්ම භාවිතා වෙන නිසා. මම උඩ මාතෘකාව ලියන කොට h අකුර ගාව තිත් 3ක් තියල තියෙනවවේ අන්න එතනට 1 සිට 6 දක්වා ඉලක්කම් යොදල ඔබට විවිද ප්‍රමාණයේ headings 6ක් සාදාගත හැකියි. තවද <h1> මගින් ඉතාමත් වැදගත්ම මාතෘකාව නිරූපණය කරන අතර <h6> මගින් වැදගත් බවින් අඩුම මාතෘකාව නිරූපණය වේ. අනෙක් මාතෘකා ඒ අතර වෙනස් වේ. code එකට heading එකක් ඇතුලත් කරන්නේ මෙන්න මෙහෙමයි.

<h...>mention your title here </h...>

අපි දැන් මේ headings වෙනස් වෙන ආකාරය පුංචි උදාහරණයකින් බලමු, මම මේක code කරල තියෙන්නේ Notepad++ භාවිතා කරල ඔබත් ඒකට හුරුවන්න.

මේ code එක HTML file එකක් විදිහට save කරල open කරාම පේන හැටි තමයි මේ,

                 ඒ වගේම ඉහත උදාහරණය බලන ඔයාලට පේනවා ඇති මම code එකේ සඳහන් කරල නැතත් browser එක විසින් automatically මේ headings අතර ඉඩ තබා තියෙනවා කියල. සාමාන්‍යෙයන් browser එක විසින් heading එකට පෙර සහ පසු හිස් ඉඩක්  (margin) එකතු කරනු ලබනවා. අනිත් වැදගත් කාරනය තමයි ඔයාල කිසිම වෙලාවක මේ headings තමන්ගේ text bold කරන්න හෝ විශාලව පෙන්නන්න භාවිතා කරන්න එපා. මොකද බොහො search engines මේ headings කියවනවා, එසේම වෙබ් පිටුව නියමාකාර ගලා යාමකට නතු කරන්න මේ headings ඉතා වැදගත්.

<hr/> Tag එක HTML Line සඳහා

                මේ tag එක මගින් සිඳු කරනුයේ අපේ html වෙබ් පිටුවට තිරස් Line එකක් එකතු කිරීමයි. අපිට මේ tag එක අපේ වෙබ් පිටුවේ contents වෙන් කිරීමට යොදා ගන්න පුළුවන්. මේ tag පවන්නේ තනි tag එකක් ලෙසටයි. අපි සරළ උදාහරණයක් බලමු,

මේ code එක HTML file එකක් විදිහට save කරල open කරාම පේන හැටි තමයි මේ,

තව දෙයක් මෙතනදිත් ඔයාලට පේනවා කලින් Headings වලදී වගේම browser එක විසින් paragraph එකට පෙර සහ පසු හිස් ඉඩක්  (margin) එකතු කර තිබෙනවා වගේම මේ තිරස් Line එකටත් පෙර සහ පසු ඒ ආකාරයටම හිස් ඉඩක්  (margin) එකතු කර තිබෙන බව.

<!--...--> Tag එක HTML Comment සඳහා

               අපි ගොඩක් වෙලාවට නොකරන දෙයක් වුනත් කල යුතුම දෙයක් තමයි අපේ code එකෙන් අපි කරන දේ ගැන තව කෙනෙකුට වුනත් කියවල තේරුම් ගන්න පුළුවන් ආකාරයට comment කිරීම. සමහර විට අපිටම වුනත් පසු කාලයකදී code එක කියවන විට අපි කරපු දේවල් තේරුම් ගන්නත් ඒක පහසුවක් වේවි. මේ comments වෙබ් පිටුවේ පෙන්නන්නේ නෑ ඒත් අපි code එකට බැලුවොත් අපිට ඒවා දැක ගන්න පුළුවන්. ඒක ඇත්තටම හොඳ coding පුරුද්දක්. මම හෙඩින් එකේ පෙන්වල තියෙන tag එකෙ තිත් 3 වෙනුවට ඔයාලට අවශ්‍ය comment එක දාගන්න පුළුවන්.මෙන්න මේ වගේ.

<!--This is an HTML comment-->

අපි තව උදාහරණයක් බලමු,

මේ code එක HTML file එකක් විදිහට save කරල open කරාම පේන හැටි තමයි මේ,

comments පේන්නේ නෑ නේද? අද පාඩම නිමයි. ආයේත් අළුත් පාඩමකින් හමු වෙමු.

මේ ලිපියෙහි හෝ මෙය සිදු කිරීමේදී යම් ගැටලුවක් ඇත්නම් Comments වල දමන්න.
මා අතින් යම් වරදක් වී ඇත්නම් හෝ යමක් මග හැරී ඇත්නම් ඒවාත් නිවැරදි කිරීම පිනිස Comments වල දමන්න.