HTML For Beginners - Part 3

HTML වල Paragraphs සහ Text Formatting හඳුනාගනිමු

              HTML පාඩම් මාලාවේ අපි දැනට කතා කලේ ප්‍රධාන Tags වර්ග තුනක් ගැන සහ ඒවා යොදාගෙන සරළ HTML File එකක් හදාගන්න විදියයි. අද අපි කතා කරන්න හදන්නේ පරිච්ඡේද (Paragraphs) සහ පාඨ (Texts) නිර්මාණය කරගන්න විදිය ගැනයි.  

            පරිච්ඡේදයක් නිර්මාණය කරගන්න එක හරිම ලේසියි. ඒකට කරන්න තියෙන්නේ ආරම්භක සහ අවසාන <p> Tags දෙකක් ඇතුලත් කරන එක විතරයි. මේ <p> Tags දෙක ඇතුලේ අපිට ඕන කරන පරිච්ඡේදය Type කරගන්න පුළුවන්.

අපි උදාහරණයක් බලමු. මම අපි කලින් හදාගත්ත first.html file එකම Edit කරන්නයි හදන්නේ.

 දැන් අපි මේක කලින් කරපු විදියටම Save කරලා Open කරගෙන බලමු Output එක කොහොමද පේන්නේ කියල.

            මේ විදියට තමයි අපිට Output එක පේන්නේ. Browser එක විසින් ඉබේම (Automatically) පරිච්ඡේදයකට කලින් සහ පසුව හිස් රේඛාවක් (Line) එකතු කරනු ලබන  බවත් අපිට මේකෙදි දැකගන්න පුළුවන්.

ඊළඟට අපි බලමු මේ පරිච්ඡේදයක් ඇතුලේ රේඛා කැඩීමක් (Line Break) හදාගන්නේ කොහොමද කියල අලුත් පරිච්ඡේදයක් ආරම්භ නොකර. මේ සඳහා අපි භාවිතා කරන්නේ <br /> Tag එක. <br /> element එක Empty HTML element විදියටයි සැලකෙන්නේ. ඒකට End tag එකක් ඇත්තේ නැහැ.

අපි දැන් බලමු Line Break එකක් එකතු කලාම අපිට මොන වගේ Output එකක්ද ලැබෙන්නේ කියල. මම පහසුව සලකලා අපි හදාගෙන ආව HTML file එකම Edit කරගෙන යන්නම්. ඕන නම් වෙන වෙනම HTML files හදලත් අපිට run කරලා බලන්න පුළුවන්.

Web browser එක Open කරලා බැලුවම තනි Line break එකක් අපේ පරිච්ඡේදයට එකතු වෙලා තියෙන විදිය අපිට බලාගන්න පුළුවන්.

 දැන් Line break එකෙන් වෙන දේ පැහැදිලියි නේද?

Text formatting කියන්නේ HTML වල තවත් කුඩා කරුණු කීපයක් නිසා ඒ ගැනත් මේ පාඩමේදීම කතා කරමු. HTML වල Text styles වලට අනන්‍ය වුනු Elements ලැයිස්තුවක් තියෙනවා.

මේ Formatting elements නිර්මාණය වෙලා තියෙන්නේ විශේෂිත Text types කිහිපයක් වෙනුවෙනුයි. අපි ඒ මොනවද කියල බලමු. ඒ ගැන නිකම්ම කියවගෙන යනවට වඩා, කලින් වගේ HTML file එකක් හදල, run කරලා එන Output ටික බලල මේක තේරුම් ගන්න ලේසි වෙයි කියල හිතුනා.

එහෙනම් අපි බලමු ඒ ගැන.

 මේකේ Output ටිකත් බලලම අපි වැඩි විස්තර කතා කරමු.

  මේ තමයි අපිට ලැබෙන Output ටික. පරිච්ඡේද වෙන් කරලා තියෙන්නේ Output ටික පැහැදිලිව අඳුනගන්න පුළුවන් වෙන්නයි.

මේ Output වලට අනුව අපිට පෙනෙන දෙයක් තමයි Browser එක  <b> සහ <strong> Tags දෙකත්, <i> සහ <em> Tags දෙකත් පෙන්නන්නේ එකම විදියට බව. කොහොම උනත් මේ Tags වල තේරුම් එකිනෙකට වෙනස්. <b> සහ <i> වලින් කියන්නේ Texts ටික Bold සහ Italic බවයි. ඒ වගේම <strong> සහ <em> Tags වලින් කියන්නේ අදාල Texts “වැදගත්” බවයි.

අද පාඩමෙන් අපි ගොඩක් දේවල් කතා කළා. ඒ හැම දෙයක්ම අයෙමත් කරලා බලන්න මතකයෙන්. එතකොට ඒවා අමතක වෙන්න තියෙන ඉඩකඩ අඩුයි. තවත් අලුත් පාඩමකින් අපි ආයෙමත් හමුවෙමු..

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