HTML For Beginners - Part 4

HTML Headings, Lines, Comments සහ Elements

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

•          HTML Headings

අපි මුලින්ම කතා කරමු HTML Headings ගැන. Headings කියන්නේ මාතෘකා කියල කවුරුත් දන්නවනේ. HTML files වලදී Headings පෙළගස්සන්න පුළුවන් ඒවායේ තියෙන වැදගත්කම අනුව. ඒ අනුව HTML Headings වර්ග හයක් තියෙනවා. ඒවත් Tags වලින්ම තමයි පෙන්වන්නේ. <h1>, <h2>, <h3>, <h4>, <h5> සහ <h6> කියන Tags ගැන තමයි අපි මේ යටතේ කතා කරන්නේ.  

පුරුදු විදියටම අපි HTML document එකක් හදාගෙන මේ Headings ගැන දැනගනිමු. දැන් HTML document එකක් තනියම හදාගෙන run කරලා බලන්න හැමෝටම පුළුවන් නේද? බලමු අපි කොහොමද Headings ටික Type කරගන්නේ සහ ලැබෙන Outputs ටික මොන වගේද කියල.

මේ වගේ Outputs ටිකක් තමයි අපිට ලැබෙන්නේ. Heading 1 වල ඉඳලා Heading 6 වෙනකල් යද්දී Text එකේ ප්‍රමාණය ක්‍රමයෙන් අඩු වෙමින් යනවා අපිට දකින්න පුළුවන්. ඒ වගේම Heading 6 එකේ ප්‍රමාණය Paragraph එකටත් වඩා කුඩා බව පෙනේවි. ඒක පැහැදිලිව අඳුනගන්න තමයි පහළින්ම Paragraph එකකුත් මම එකතු කලේ. හැබැයි Headings හැමතිස්සෙම Bold වෙලයි තියෙන්නේ.

            නමුත් Text එකක් Bold කරගන්න සහ ටිකක් ලොකු කරගන්න විතරක් Headings යොදාගන්න එක නම් අනුමත කරන්න බැහැ. ඒකට හේතුව තමයි වෙබ් පිටුවක ආකෘතිය (structure) සහ අන්තර්ගතය (content) ලැයිස්තුගත කරගන්න Search engines විසින් Headings යොදා ගනු ලැබීම.

    

•       Horizontal lines

ඊළගට අපි කතා කරන්න යන්නේ HTML document එකකට තිරස් රේඛා (Horizontal lines) එකතු කරගන්නේ කොහොමද කියන එක ගැනයි. තිරස් රේඛාවක් නිර්මාණය කරගන්න හරිම පහසුයි. <hr /> Tag එක යොදන්න විතරයි තියෙන්නේ අපිට. HTML5 වලදී <hr />, තේමාත්මක කැඩීමක් (Thematic break) විදියටයි සලකන්නේ.

            Headings ගැන පැහැදිලි කරන්න අපි හදාගත්ත Notepad එක Edit කරලා, Paragraph එක Headings වලින් වෙන් කරගන්න Horizontal line එකක් එකතු කරගන්න විදිය අපි බලමු.

            Paragraph එක Horizontal line එකකින් වෙන් වෙලා තියෙන විදිය මෙහිදී පැහැදිලිව දකින්න පුළුවන්.

• Comments

HTML documents run කරද්දී Browser එක Comments display කරන්නේ නැහැ. නමුත් Document එකට විවිධ විස්තර (Descriptions), මතක් කිරීම් (Reminders) සහ වෙනත් සටහන් එකතු කරන්න මේ Comments අපිට උදව් වෙනවා.

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

           අපි එකතු කරපු Comment එක display වෙලා නැහැ කියල දැන් පේනවා නේද? Comments එකතු කරද්දී මතක තියාගන්න ඕන දෙයක් තමයි Opening tag එකේ Exclamation point (!) එකක් තිබුනට closing tag එකේ ඒක යෙදෙන්නේ නැහැ කියන එක.

• HTML Elements

අපි දැනටමත් දන්නා විදියට HTML documents හැදිලා තියෙන්නේ HTML elements වලිනුයි. ආරම්භක (start) tag එකක් සහ අවසාන (end) tag එකකුත්, ඒ අතර තියෙන අන්තර්ගතයකුත් (content) මගිනුයි HTML elements ලියනු ලබන්නේ. ගොනු කරන ලද HTML elements (nested HTML elements) වලින් HTML documents සමන්විත වෙනවා.

පහත උදාහරණයේදී අපිට දැකගන්න පුළුවන් body element එක ඇතුලේ <p> tags, <br /> tag එක හා “This is a paragraph” කියන content එක අන්තර්ගත වෙලා තියෙන බව.

මෙහිදී අපි මතක තබාගතයුතු දෙයක් තමයි HTML වල තියෙන සමහර elements ගොඩක් පොඩියි, හරියට <br /> tag එක වගේ. අපි මේ ගැන අපේ තුන්වෙනි පාඩමේදීත් කතා කලා. <br /> tag එකට අපිට content එකක් ඇතුලත් කරන්න බැහැ. ඒ වගේම opening සහ closing tags ඇත්තෙත් නැහැ. ඒක වෙනමම තනි element එකක්.

අද පාඩමේදී අපි HTML headings, horizontal lines, comments සහ HTML elements ගැන තමයි කතා කලේ. මාතෘකා හතරක් උනාට පොඩි දේවල් වගයක්නේ තිබුනේ. ඒ නිසා මතක තියාගන්න අමාරුවක් වෙන්නේ නැහැ. හැමදාම වගේ කියන්න තියෙන්නේ නැවත නැවත කරලා මේ පාඩමත් තහවුරු කරගන්න කියලයි. එහෙනම්, තවත් මේ වගේ පාඩමකින් අපි හමුවෙමු...

-- ලක්ෂිකා ස්වර්ණමාලි --