Sunday, June 24, 2012

HTML සිංහලෙන් පාඩම 4 - Headings


         අපි පසු ගිය පාඩමෙන් ප්‍රායෝගිකව අපි ඉගෙන ගත්ත දේවල් කරල බැලුවනේ, ඉතින් අද පාඩමෙන් අපි තව දුරටත් HTML වලය අදාල න්‍යායාත්මක කරුණු ඉගෙන ගමු. ඊට පස්සේ ඒවා ප්‍රායෝගිකව අත්හදා බලමු.

HTML මාතෘකා එහෙමත් නැත්තම් HTML Headings

              අපි ලිපියක් සම්පාඳනය කිරීමේදී මෙන්ම වෙබ් පිටු වලදීද මාතෘකා ඉතා වැදගත් කාර්යයක් ඉටු කරනව. HTML වලදී වෙබ් පිටුවට මාතෘකා එක් කිරීමට භාවිතා කරන්නේ <h1> වල සිට <h6> දක්වා වූ tags මගින්. මේවාට closing tag එකක්ද ඇත. <h1> tag එක මගින් විශාලම (කැපීපෙනම) මාතෘකාවද <h6> මගින් කුඩාම මාතෘකාවද නිරූපණය වේ.


උ.දා:-
                  <h1> coding සිංහලෙන් </h1>


 එක් tag එකට අදාල පෙනෙන ආකාරය පහතින් දැක් වේ,


                  <h1> ---------->

                  coding සිංහලෙන්


                            <h2> ---------->

                                         coding සිංහලෙන් 

                   <h3> ---------->

                                 coding සිංහලෙන්

                    <h4> ---------->

                                         coding සිංහලෙන්

                    <h5> ---------->
                                           coding සිංහලෙන්
                    <h6> ---------->
                                                          coding සිංහලෙන්
         දැන් ඔයාලත් පසු ගිය පාඩම් වල දැනුමත් භාවිතා කරල මම පහතින් දෙන HTML code එක web browser එකක් භාවිතා කරල open කරල බලන්නකෝ.....

 <html>

           <head><title>My Headings</title></head>

           <body>


                      <h1>My Headings</h1> <br/>
                      <h2>My Headings</h2> <br/>
                      <h3>My Headings</h3> <br/>
                      <h4>My Headings</h4> <br/>
                      <h5>My Headings</h5> <br/>
                      <h6>My Headings</h6> <br/>   

           </body>
 
</html> 



වැඩේ හරියට කලා නම් මෙන්න මේ වගේ තමයි පෙන්නේ......





    තව දෙයක් ඔයාල දැක්කද දන්නේ නෑ අද මම තව අළුත් tag එකක් භාවිතා කරා code එක ලියන්න. ඒ තමයි <br/> tag එක අපි මේ tag එක භාවිතා කරන්නේ line එකක් break කර ගන්න වුවමනා උනාමයි. උදාහරණයක් වශයෙන් අපිට අවශ්‍ය වුනොත් අළුත් paragraph එකකට යන්න නැතුව අළුත් පේලියකින් නැවත ලිවීම ආරම්භ කරන්න ඕන කියල අන්න ඒ වෙලාවට තමයි මේ tag එක භාවිතා වෙන්නේ. පහත උදාහරණය බලන්නකෝ...


මේ තමයි code එක

 

 <html>

           <head><title>Breaking Tag</title></head>

           <body>


                  <p>coding sinhalen <br/> coding sinhalen coding sinhalen </p> 

           </body>
 
</html>


ඒක පෙන්නේ මෙන්න මේ වගේ




මම හිතනව ඔයාලට ඒ tag එක තේරුනා කියල. ආයෙත් පාඩමකින් හමු වෙනකම් ගිහින් එන්නම්.


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

11 comments:

  1. ස්තූතියි පාඩමට ඇඳුරානනි...

    ReplyDelete
    Replies
    1. ස්තුතියි ඔබේ COMMENT එකටත්.

      Delete
  2. මචන්..this is just an idea. මේක note pad එකෙන් කරන්න කියනවට වඩා notepad++ වගෙ එකක් මුල ඉඳන්ම පවිච්චි කරන්න කියල ප්අටන් ගත්තොත් නරකද? nice work :)

    ReplyDelete
    Replies
    1. ඇත්තටම මචන් notepad++ එක පහසුයි. නමුත් windows එක්ක තියෙන එක නිසයි මම Notepad එක පාවිච්චි කලේ. හොඳයි මම ඊළග පාඩමේ ඉදන් Notepad++ හඳුන්වාදෙන්නම් කෝ. ස්තූතියි ඔබේ කොමෙන්ටුවට.

      Delete
  3. ස්තුතියි කියල දෙනවට අදමයි ආවෙ මේ පැත්තෙ මට ගොඩක් වැදගත් වෙනව

    ReplyDelete
    Replies
    1. අපි ගැන නොදන්න අයටත් කියන්න....ස්තූතියි ඔබට.

      Delete
  4. මචං අපිට ඕන තරම් (post එකකදී) h1 tags use කරන්න පුලුවන්ද? මේවගේ tags එකින් එක ක්‍රියාකාරීත්වයෙන් වෙනස් වෙන්නේ වෙන්නේ කොහොමද ?? ( මන් අහන්නේ බාහිර පෙනුම ගැන නෙමෙයි SEO වලදී වගේ)
    ප්‍රශ්නේනම් මෙතනට අදාල නැද්ද මන්ද! :D

    ReplyDelete
    Replies
    1. පළමු ප්‍රශ්ණයට උත්තර දෙනවානම් අපි එක වෙබ් පේජ් එකකට ඕන තරම් heading tags පාවිච්චි කරන්න පළුවන්. දෙවැන්නට සමහර search engines headings ගැනත් බලන ඒවා තියෙනව නමුත් වර්ථමාන SEO වලට නම් මේවා වලින් ලොකු බලපෑමක් නෑ! එත් මේ මගින් අදහස් වෙන්නේ h1 යනු ප්‍රධානම මාතෘකාව බවයි, එතැන් සිට ප්‍රධානත්වය අඩු වන ලෙසටයි. ස්තූතියි.

      Delete
  5. ගොඩක් වටිනවා අයියා.කෝස් එක කරද්දි මේව කියලා දෙද්දි එපා උනා ඔය මේ විදියට පැහැදිලිව කියලා දෙනකොට ආයෙ ඉගන ගන්න ආස හිතුනා.ගොඩක් වටිනවා මේ ලිපි.කමෙන්ට් දැම්මෙ නැති උනාට අපි කියනවන හොදේ👌👌👌👌🤝

    ReplyDelete
  6. mata mulu tags tikama thiyana oyalage pdf ekak nadda

    ReplyDelete