HTML සිංහලෙන් පාඩම 14 - HTML Images

       

                       ගොඩක් කාලෙකින් තමයි අපි අද HTML පාඩමකින් හමුවෙන්නේ,  අද පාඩමෙන් අපි  HTML වලදී පින්තූර භාවිතා කරන්නේ කොහොමද කියල බලමු. මේ සඳහා අපිට උදව් වෙන්නේ <img> කියන HTML tag  එක තමයි. මේ tag එකේ අපිට ඉතාමත්ම වැදගත් වෙන attributes දෙකක් තියෙනව. ඒ "src" හා "alt" attributes දෙකයි. මෙයින් "src" attribute එක අපි භාවිතා කරන්නේ ආපේ  image file එකේ path එක ලබා දෙන්නයි. අපි භාවිතා කරන image එක තියෙන්නේ HTML file එක තිබෙන folder එක තුලමනම්, image file එකේ නම extension එක සමගින් ලබා දීම ප්‍රමාණත්.  එතකොට "alt" attribute එක ඕන වෙන්නේ alternate text එකක් ලබා දෙන්නයි. යම් කිසි හේතුවක් නිසා සමහර විට image එක load නොවෙන්න පුළුවන් අන්න ඒ වගේ වෙලාවකදී මේ alternate text එකට  user පෙන්න පටන් ගන්නව. 

<img src="path to image.jpg" alt="some text">

තව අපිට image එකේ දිග, පළල සඳහා අගයන් දෙන්න පුළුවන්,

<img src="path to image.jpg" alt="some text" height="480" width = "640">

අපි වෙබ් පිටුවකට Image එකක් එකතු කරනවා නම් එහි දිග, පළල සඳහන් කිරීම ඉතා වැදගත් එසේ කිරීමෙන් අපිට වෙබ් පිටුව සෑම විටකදී වගේම සෑම web broඅser එකකදීද නිසි ආකාරව දර්ශනය වීමට හැකියාව ලබා දෙනවා....

අපි තවත් පාඩමකින් හමු මෙමු............

Read More

HTML සිංහලෙන් පාඩම 13 - HTML CSS

                              අපේ Blog එකේ වෙනම CSS පාඩමක් යනව වුනත් මම අද හිතුවා පොඩ්ඩක් CSS ගැන කියන්න ඕන කියල. පොඩි හැඳින් වීමක් වගේ, නැත්තම් මේ පාඩම් ටික සම්පූර්ණ නැති වෙනව. අපි හැමොම දන්නවනේ CSS කියල අපි කෙටියෙන් අඳුන් වන්නේ Cascading Style Sheets කියල. ඉතින් මේ CSS වලින් අපිට කරන්න පුළුවන් දේවල් ඉතාමත් පුදුමාකාරයි. හිතාගන්නවත් බැරි වැඩ CSS වලින් web sites වල කරල තියෙනව. මේ වැඩ තවත් පහසු කරගන්න ලගදී CSS 3 කියන සංස්කරණය නිකුත් වුනා. මේ දේවල් ගැන වැඩි විස්තර ඔයාලට අපේ CSS පාඩම් මාලාව අධ්‍යයනයෙන් දැන ගන්න පුළුවන්.

              ඔයාල දන්නවනේ CSS හඳුන්වල දුන්නේ HTML elements වලට වඩාත් හොඳ විදිහකට styles දාන්න පුළුවන් වෙන්නනේ. අපිට මේ වැඩේ කරන්න පුළුවන් ආකාර තුනක් තියෙනව.

1. Inline
2. Internal
3. External

අපි දැන් මේ එකින් එක විස්තර කරමු.

Inline 

අපි මේ විදිහට styles යොදන්න එක් HTML element එකකට විතරක් යම් කිසි style එකක් යොදන වෙලාවකදි තමයි. මේ සඳහා අපි ඒ element එකේ style කියන attribute එක යොදා ගන්නව. මෙහි ඕනෑම CSS property එකක් සඳහන් කළ හැකියි.

<p style="color:red;margin-left:45px;">This is my first paragraph</p>

Internal

අපි මේ විදිහට styles යොදන්නේ එක් වෙබ් පිටුවකට විතරක් අදාල වන පරිදි යම් කිසි elements කිහිපයකටම එකම style එක යොඳන විටදියි. මම පෙර පාඩමේදී සඳහන් කල පරිදිම මේ styles අපි ලියන්නේ HEAD එක තුලයි.  මේ සඳහා අපි <style> කියන tag එක පාවිච්චි කරනව.

<head>
     <style type="text/css">
         body {background-color:blue;}
         p {color:red;}
     </style>
</head>

External

අපිට එකම style එක විවිධ web pages සඳහා යොදා ගැනීමට අවශ්‍ය වෙන වෙලාවට අපිට external style sheet එකක් භාවිතා කිරීමට සිදුවෙනව. ඒ external style sheets අපේ වෙබ් පිටුවට link කරන්න අවශ්‍යයි. මේ code එකත් අපි ලියන්නේ HEAT එක තුලමයි, ඒ සඳහා අපි <link> කියන tag එකයි.

<head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

අපි අයෙත් තවත් පාඩමකින් හමුවෙමු. ඊලග පාඩමේදී අපි HTML වලදී Images හසුරවන ආකාරය ගැන කතා කරමු.

Read More

HTML සිංහලෙන් පාඩම 12 - Head Tag එක

                   මම අද පාඩමෙන් කතා කරන්න බලාපොරොත්තු වෙන්නේ, අපි හැම වෙලාවෙම භාවිතා කරන tag එකක් ගැන‍යි. ඒ තමයි <head> Tag එක. මේ tag එක ඉතාමත් විශේෂ tag එකක් මොකද මේ Tag එක නැති වෙබ් පිටුවක් හොයා ගන්නවත් නැති තරම් නිසා. ඒ තරමටම මේ tag එක භාවිතා වෙනව. 

                      මේ tag එක ඇත්තටම තනිව කාර්යයක් නොකලාට, මෙය තුල අඩංගු කල හැකි head elements භාවිතා කරල අපි කරගන්න දේවල් නම් ඉතා විශාලයි. දැන් මොනවද මේ head elements කියන්නේ? අපි දැනටමත් දන්නවනේ වෙබ් පිටු නිර්මාණය කිරීමේදී JavaScript, CSS වගේ තාක්ෂණ භාවිතා කරනව කියල, ඉතින් ඒ වගේ අපේ වෙබ් පිටුවට අවශ්‍ය වෙන වෙනත් files හොයාගන්න browser එකට ඒවා ගැන කියන්න මේවා භාවිතා වෙනව තව scripts ආදිය වගේ අපේ වෙබ් පිටුවට අදාල meta dataද ඇතුලත් කල හැකියි. ඒ වගේ තව බොහෝ දේවල් තියෙනව. දැන් අපි වැදගත් වෙන head elements කිහිපයක් ගැන කතා කරමු.

<title> head element

මේ head element එක අපි භාවිතා කරන්නේ  අපේ වෙබ් පිටුවට title එකක් ලබා දෙන්නයි. ඒක කරන්නේ මෙන්න මේ විදිහටයි.

<html>
      <head>
      <title>THIS IS MY FIRST WEB PAGE</title>
      </head>
<html/>

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

ඔයාල කැමති විදිහකට ඔයාලගේ වෙබ් පිටු වලට titles එකතු කර ගන්න පුළුවන්. ඒ වගේම කව්රුහරි අපේ වෙබ් පිටුව bookmark කරන කොට එතන නම විදිහට එන්නෙත්, search engine වලදි පෙන්වන්නෙත් මේ Title එකම තමයි

<base> head element

මේ tag එකෙන් අපි කරන්නේ අපේ වෙබ් පිටුව තුලදී මින් ඉදිරියට භාවිතා කරන URL සඳහා අවශ්‍ය වන මූලික ටික ලබා දෙන එකයි. ඒ කියන්නේ URL එකේ පොදු කොටස ලබා දෙන එක, එතකොට හැම තිස්සෙම ඒ ටික ලියන්න ඕන නෑනේ. මේක ඉතා වැදගත් images වලට වගේ URL දෙන කොට. syntax එක පහතින්,

<html>
      <head>
           <base href="http://codingsihalen.blogspot.com/2013/01/" target="_blank"/>
      </head>
</html>

<link> head element

මේ tag එක නම් ගොඩක් අය භාවිතා කරල ඇති. අපි මේක භාවිතා කරන්නේ අපේ වෙබ් පිටුව හා වෙනත් බාහිර document එකක් අතර සම්බන්ධයක් ඇති කරන්නයි. සරලම උදාහරණය තමයි අපේ වෙබ් පිටු වලට භාහිර stylesheet සම්බන්ද කර ගැනීම. ඒ ගැන වැඩි විස්තර අපේ CSS පාඩම් මාලාවෙන් ඔයාලට ඉගෙන ගන්න පුළුවන්.

<html>
      <head>
           <link rel="stylesheet" type="text/css" href="style.css"/>
      </head>
</html>

<style> head element

මේ Tag එක අපි යොදා ගන්නවා අපේ HTML elements වලට head එක තුලදී CSS styles ලියන්න. මේ tag එකත් හරිම ජනප්‍රිය එකක්.

<html>
     <head>
          <style type="text/css">
              body 
              {
                background-color:yellow
              }
              p 
              {
                color:blue
              }
          </style>
     </head>
</html>

<meta> head element

මේ tag එකෙන් අපි කරන්නේ අපේ වෙබ් පිටුවට අදාල දත්ත සඳහන් කරන එකයි. Search engine වලට මේ දත්ත වැදගත්. මේවා වෙබ් පිටුව බලන අයට පේන්නේ නෑ. අපිට පුළුවන් පේ වෙබ් පිටුවට අදාල keywords, description, author වගේ දේවල් සඳහන් කරන්න. අපි පොඩි උදාහරණයක් බලමු.

<html>
<head>

KEYWORDS සඳහන් කරන හැටි
    <meta name="keywords" content="HTML, CSS, XML, XHTML,  JavaScript">

වෙබ් පිටුවේ description එක සඳහන් කරන හැටි

    <meta name="description" content="Free Web tutorials on HTML and CSS">

වෙබ් පිටුවේ කතෘ සඳහන් කරන හැටි

    <meta name="author" content="Hege Refsnes">

වෙබි පිටුව ඉබේම refresh කරන හැටි.

    <meta http-equiv="refresh" content="30">

</head>
</html>

<script> head element

මේක ඉතින් අපි භාවිතා කරන්නේ client side scripts ලියන්න තමයි, JavaScripts වගේ. අපි මේ tag එක ගැන වැඩි විස්තර පසු පාඩමකින් කතා කරමු. අයෙත් අපි තවත් පාඩමකින් හමුවෙන තුරු ගිහින් එන්නම්.......

Read More

HTML සිංහලෙන් පාඩම 11 - HTML Links

        ටික කාලෙකින් තමයි අපි අද HTML පාඩමකින් ඔයාලව හමු වෙන්නේ මීට කලින් පාඩමෙන් අපි HTML වලදී Text කොහොමද format කරගන්නේ කියන කාරණය ගැන කතා කලා මතක ඇති නේද? අද අපි HTML document එකකට කොහොමඳ links දාගන්නේ කියල බලමු.

                අද සෑම වෙබ් පිටුවකම පාහේ links දකින්න ලැබෙනව අපි links අවස්ථා දෙකකදි භාවිතා කරනව, පළමුවෙන්ම අපිට වෙනත් වෙබ් පිටුවකට හො වෙනත් වෙබ් අඩවියකට සබැඳියක් ලබා දීමට අවශ්‍ය වුනු විටකදී හා දෙවනුව එකම පිටුවේ වෙනත් තැනකට සබැඳියක් ලබා දීම සඳහායි. ඔබ දැකල ඇති මේ hyperlink  එක සමහර විට වචන කිහිපයක් නැතිනම් පින්තූරයක්.

                මේ සඳහා අපි භාවිතා කරන්නේ <a> tag එකයි. මේ tag එකේ අපිට ඉතාමත් ප්‍රයෝජනවත් වන attribute එකක් තියෙනව ඒක තමයි "href" කියන attribute එක මේක භාවිතා කරල අපිට සබැඳයේ ගමනාන්තය ලබා දිය හැකියි. 

බොහෝ වෙබ් browsers වල links පෙන්වන ආකාරය සමානයි ඒ මෙන්න මේ විදිහටයි,

• ඔබ visit කර නැති links, underline ව නිල් පැහැයෙන් ද,
• ඔබ visit කර ඇති links, underline ව දම් පැහැයෙන් ද,
• Active තත්වයේ පවතින links, underline ව රතු පැහැයෙන් ද,

පෙන්නුම් කරයි.

Syntax

        <a href="url">Link text</a>

ඔය code එක browser එකේ පේන්නේ මෙන්න මේ වගේ,

තව වැදගත් attribute එකක් තියෙනව ඒක තමයි "target" attribute එක, මේකෙන් අපිට පුළුවන් අපේ සබැඳිය විවෘත්ත වෙන්න ඕන ආකාරය තීරනය කරන්න. හරිය වෙන tab එකක වගේ, පහත ආකාරවලින් ඕනෑම එකක් එහි අගය විය හැකියි.

• _blank
• _parent
• _self
• _top

ඔබට පේනව ඇති පෙනුමේ කිසිම වෙනසක් වුනේ නැති උනත් ක්‍රියාකාරීත්වය ඉතා වෙනස් වී ඇති බව.දැන් අපි බලමු එකම වෙබ් පිටුවක වෙන තැනකට සබැඳියක් ලබා දෙන්නේ කියල,

ඒ සඳහා අපිට "id" attribute එක භාවිතා කරන්න වෙනව, අපිට වෙබ් පිටුවේ bookmark සාදාගන්න මම පහතින් පෙන්වන ආකාරයේ code එකක් අපි යොදා ගන්නව,

ඔයාලට පෙනේවී Link එක click කරාම අපිව වෙබ් පිටුවෙ අදාල තැනට ඉබේම යැවෙන බව. අපිට අවශ්‍ය නම් වෙනත් වෙබ් අඩවයක bookmark එකකට සබැඳියක් ලබා දීමට ඒ සඳහා අපිට පහත ආකාරයේ code එකක් යොදාගන්න වෙනව,

<a href = "url of the pag#id">@@@@@</a>

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

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

Read More

HTML සිංහලෙන් පාඩම 10 - Text Formatting

                         අපි මීට ගොඩක් කාලෙකට කලින් කරපු පසු ගිය පාඩමේදී HTML document එකකට Paragraphs එකතු කරගන්නේ කියන දේ කතා කලා. මතකද දන්නේ නෑ. එක එක වැඩ නිසා ලිපි ටික වෙලාවට කරගන්න බැරි වුනත් අද ඉදල වත් හරියට කරන්න ඕන කියල හිතා ගත්ත. අද අපි කතා කරමු HTML document එකක තියෙන text කොහොමද format කරගන්නේ කියල. 

                                                                          අපි කවුරුත් වගේ Word document හඳල තියෙනවනේ ඉතින් අපි එතකොට නිතරම වගේ මේ text formatting පාවිච්චි කරනවා නේද? ඒ විදිහටම අපිට HTML document එකත් text bold කරන්න italic කරන්න underline කරන්න සහ තවත් දේ කරන්න පුළුවන්. 

Bold

        HTML document එකක text bold කරන්න අපි භාවිතා කරන tag එක <b> කියන tag එක. පහත උදාහරනය බලන්නකෝ.

ඒක පෙන්නේ මෙන්න මේ විදිහට,

Italic ​සහ Underline

මේ දේ කරන්න අපි භාවිතා කරන්නනේ පිළිවෙලින් <i> සහ <u> කියන tags, ඒකත් අපි උදාහරනයකින්ම පැහැදිලි කර ගනිමුකෝ.

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

               ඔයාලට පේනවා ඇති දෙවැන line එකේදී මම අපි කතා කරපු tags 3නම එකම text කොටසක් සඳහා යොදාගෙන තියෙන බව ඒ වගේ වෙලාවකදී අපි පිළිවෙලින් tags open කරගෙන යනවා වගේම ඒ tags අන්තිමටම open කල tag එක මුළින්ම close වෙන ආකාරයට පිළිවෙලට close කල යුතුයි. එහෙම නැති වුනත් ඒක පේන එක වෙනස් නොවෙන්න පුළුවන් ඒ විදිහට කරන එක හොද පුරුද්දක්. එවගේම මෙය tags ඇතුලේ tags ලියන ඕනෑම අවස්ථාවකට පොදුයි.

Superscript සහ Supscript

මේ සඳහා අපි යොදා ගන්නේ පිළිවෙලින් <sup> සහ <sub> කියන tags දෙක. ඒක වෙන්නේ මෙන්න මෙහෙමයි,

ඒක පේන්නේ,

Other tags 

HTML formatting tags ගොඩක් තියෙනවා ඒ ඔක්කොම උදාහරණ මගින් පෙන්වන්න අමාරුනිසා මම ඒවා ගැන පහත සඳහන් කරනව.

Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines a part of text in an alternate voice or mood
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text

HTML "Computer Output" Tags

Tag	Description
<code>	Defines computer code text
<kbd>	Defines keyboard text
<samp>	Defines sample computer code
<var>	Defines a variable
<pre>	Defines preformatted text

HTML Citations, Quotations, and Definition Tags

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<q>	Defines an inline (short) quotation
<cite>	Defines the title of a work
<dfn>	Defines a definition term

                                                                                                            උපුටා ගැනීම W3schools වෙබ් අඩවියෙන්

                        තවත් වැදගත් දෙයක් තමයි අද බොහොමයක් web browsers <strong> tag එක <b> tag එක ලෙසටත් <em> tag එක <i> tag එක ලෙසටත් තමයි render කරන්නේ. තවත් පාඩමකින් හමු වෙනකම් ගිහින් එන්නම්.

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

Read More

HTML සිංහලෙන් පාඩම 9 - Paragraphs

                        අපි පසුගිය පාඩමේදී HTML වල tags කිහිපයක් ගැන ඉගෙන ගත්ත මතකයි කියල මම හිතනව. අද මම කතා කරන්න බලාපොරොත්තු වෙන්නේ paragraph tag එක හා ඒ ආශ්‍රිත තවත් tags කිහිපයක් ගැනයි. අපි මුලින්ම බලමු මොකක්ද මේ tag එකෙන් වෙන්නේ කියල. අපි ඕනෑම document එකක් සාදන විට බොහෝ වෙලාවට අපිට ජේද යොදා ගන්න වෙනවා. ඉතින් මෙන්න මේ කාර්යය HTML වලදි අපි කරගන්න paragraph tag ( <p>....</p>) එක බාවිතා කරලයි. web page වලට text එකතු කරන්නේ මේ tag එකෙනුයි. අපි පුංචි උදාහරණයකින්ම මේ tag එක තේරුම් ගනිමු.

ඒක Browser එකේ පේන්නේ මෙන්න මේ වගෙයි.

කැමති නම් ඒකම මෙන්න මෙහෙම ලියන්නත් පුළුවන්,

                        මම හිතන්නේ ඔයාලට පැහැදිලි ඇති දැන් මේ tag එක, විශේෂ කාරණය තමයි මේ tag එකකට ඉහළින් සහ පහළින් blank line එකක් browser එක විසින් ඉබේම තබා ගන්නවා. අනිත් එක මේ tag එක close නොකරත් සමහර browsers නිවැරදිව පෙන්න්වි. නමුත් සෑම විටම එසේ වන්නේ නෑ. ඒක නිසා අනිවාර්යයෙන්ම tags යුගලයම භාවිතා කරන්න.

Link Break Tag (<br/>)

                              මේ tag එකත් paragraph tag එක සමග බහුලව යෙදෙන tag එකක්. මේ tag එක මගින් අපිට දැනට ඉන්න  line එක brake කර ගැනීමේ හැකියාව තිබෙනව. මෙය තනි tag එකක් වශයයෙනුයි පවතින්නේ. (ඒක නිසයි අගට forward slash එක යොදල තියෙන්නේ) මේකත් අපි උදාහරණයකින්ම තේරුම් ගනිමු.

browser එකේ පේන්නේ මෙන්න මේ වගේ,

                           මේ tag එකේදී අපිට එකම Paragraph tag එක ඇතුලේ ඉදගෙන අළුත් line එකකින් ඊලග වාක්‍ය අරබන්න පුළුවන්ග මේකෙදි කලින් වගේ blank line එකක් browser එක විසින් add කරගන්නේ නෑ. මේ tag එක ඉතාමත් ප්‍රයෝජනවත් tag එකක්. ආයෙත් පාඩමකින් හමුවෙමු.

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

Read More

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 වල දමන්න.

Read More

HTML සිංහලෙන් පාඩම 7 - Attributes

                   අපි පසුගිය පාඩමෙන් HTML Elements ගැන දුනුවත් උනානේ අද අපි මේ elements වල ගුණ එහෙමත් නැත්තම් ඒවායේ ගත් ලක්ෂණ, බාහිර පෙනුම එක්ක බැදී ඇති Attributes ගැන කතා කරමු. 

                          මම කලිනුත් කිව්වා වගේ මේ HTML elements වලට තමයි attributes තියෙන්නේ. මේවා මගින් අපේ HTML element එක තව දුරටත් විස්තර කරනු ලබනවා.

           තව දෙයක් තමයි අපි මේ attributes සඳහන් කරන්නේ starting tag එක තුලයි, ඒ වගේම අපි attributes සඳහන් කරන්නේ තුල name/value ජෝඩුවක් ලෙසින්ය. හරියට මෙන්න මේ වගේ name = "value". වැදගත්ම දේ තමයි attribute එකකට ලබා දිය යුතු value එක සෑම විටම පෙරලි කොමා තුල ලබා දිය යුතු වීමයි. තවද එක element එකකට attributes කිහිපයක් වුවුද තිබිය හැකියි. මෙන්න මේ විදහට තමයි attributes code කරන්නේ...

<starting tag name = "value" name = "value" name = "value">

මෙන්න මෙතනින් ඔයාලයට attributes ගැන වැඩි දුරටත් දැනගන්න පුළුවන්. ඒ වගේම පාඩම කරගෙන යද්දී මම ඒ ඒ අදාල තැන් වලදී ඊට අදාල වෙන attributes ගැන කතා කරන්නම්. පොඩි පාඩමක් තමයි අද කලේ. අපි ඊළග පාඩමෙන් HTML formatting Tags ගැන කතා කරමු.

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

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

Read More

HTML පාඩම 6 - HTML Elements

         

         අපි පසුගිය පාඩමේදී HTML වලදී paragraph එකතු කර ගන්නා ආකාරය සහ ඒ හා බැඳි කරුණු කිහිපයක් ඉගෙන ගත්තනේ.  අද පාඩමෙන් අපි HTML Elements ගැන කතා කරමු. මේ විදිහට හදුන්වන්නේ අපි දන්න කියන HTML Tagsම තමයි. ඒක නිසා ඔයාල දැනටමත් දන්නව මම අද කතා කරන්න බලාපොරොත්තු වෙන දේ ගැන. මේවා ගැන වැදගත් කරුණු කිහිපයක් මම මෙහි සදහන් කරන්නම්.

• HTML element එකක් ආරම්භ වන්නේ starting tag (opening tag) එකකින්ය.
• එසේම HTML element එකක් අවසන් වන්නේ closing tag (end tag) එකකින්ය.
• HTML element  එකට අදාල අන්තර්ගතය එම tag දෙක අතර ලියවෙයි.

                උදා:-         <p> this is a paragraph </p>

• එහෙත් සමහර HTML elements වලට මෙසේ අන්තර්ගතයක් යොදන්නේ නැත (උදා :- <br/> tag එක ) 
• එවැනි tags starting tag එක තුලදීම close කරනු ලබයි.
• බොහෝ HTML elements වලට attributes පවතී. (attributes ගැන තව ඉදිරියේදී කියන්නම්)
• එසේම බොහෝ HTML elements nested කරන්න පුළුවන්. ඒ කියන්නේ එක HTML element එකක අන්තර්ගතයට තවත් HTML elements ඇතුලත් වෙන්න පුළුවන් කියන එක‍.", HTML පිටු නිරමානය කරන්න මෙය ඉතා වැදගත් වෙනව.

                උදා:-         <head> <title> My First Web Page </title> </head>

හොඳයි දැන් අපි බලමු අපි දැනටමත් භාවිතා කරල තියෙන elements කිහිපයක් ගැන,

<p> element

        මෙය මගින් HTML පිටු තුල paragraphs නිර්මාණය කරනු ලබයි. මෙය <p> හා </p> යනුවෙන් ආරම්භක හා අවසානක tags යුගලයකින් සමන්විත වේ. 

                උදා:-         <p> this is a paragraph </p>

<body> element

              මම element එකෙන් සිදු කරනුයේ HTML පිටුවක body කොටස අර්ථදැක්වීමයි. අපි මේ ගැන මීට කලින් පාඩමකදීද කතා කලා. මෙයද <body> හා </body> යනුවෙන් ආරම්භක හා අවසානක tags යුගලයකින් සමන්විත වේ. 

                උදා:-         

                             

       මෙහිදී මම ඉහතින් සඳහන් කළ <p> element එක <body> element එකේ අන්තර්ගතයට ඇතුලත් වී ඇත.

<html> element

            HTML වලින් වෙබ් පිටු නිර්මාණයේදී අපිට  අවශ්‍ය ප්‍රධානම element එකක්, මෙයින් සිදු වනුයේ අප ලියන්නා වු document එක HTML document එකක් බව හැගවීමයි.  මෙයද <html> හා </html> යනුවෙන් ආරම්භක හා අවසානක tags යුගලයකින් සමන්විත වේ. 

                 උදා:-         

                             

<br/> element

            මෙය අපි මීට කලින් කතා කරපු HTML elements වලට වෙනස් වූ එකක්. ඒ මෙයට අන්තර්ගතයක් නැති වීම නිසා closing tag එකක් නොමැති වීමයි. මෙයින් line break එකක් අරුත් ගන්වයි. 

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

තවත් පාඩමකින් හමු වෙනකම් ගිහින් එන්නම්.

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

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

Read More

HTML සිංහලෙන් පාඩම 5 - Paragraph

           මම පසුගිය පාඩමෙන් headings ගැනයි <./br> tag එක ගැනයි කියල දුන්න ඒව මතක ඇතියි කියල හිතනව මම. අද පාඩම මම එතන ඉදලයි ඉදිරියට කරගෙන යන්නේ. අද අපි බලමු HTML වලදී ජේදයක් (paragraph) එකක් කොහොද එකතු කර ගන්නේ කියල. මේ වැඩේට අපි භාවිතා කරන්නේ <p> කියන tag එක මේ tag එකටත් opening හා closing tags තියෙනව. අපි උදාහරණයක් බලමු. තව දෙයක් අපේ මේ පාඩම් මාලාව කියවන Mahesh මිත්‍රයා ඉල්ලීමක් කරල තිබුනා Notepad++ ඔයාලට හඳුන්වාදෙන්න කියල. මේ මෘදුකාංගය භාවිතයෙන් කේතනය කිරීම පහසුයි ඔයාලත් භාවිතා කරලම බලන්නකෝ. 

Notepad++ භාගත කර ගැනීමට

<html>

           <head><title>My Paragraph</title></head>

           <body><p> This is a paragraph This is a paragraph This is a paragraph </p>

                      <p>This is another paragraph This is another paragraph This is another paragraph</p>

           </body>

</html>

ඉහතින් දැක් වූ code එක පේන්නේ මෙන්න මේ වගේ,

          මේ <p> tag එක මගින් එයට පළමුව හා එහි closing tag එක </p> ට පසුව හිස් පේලියක් එකතු කරනු ලබයි. එම නිසයි ඉහත උදාහරණය මේ ආකාරයට දිස් වන්නේ. අපි දැන් ටිකක් ප්‍රායෝගික දේවල් කරපු නිසා ලබන පාඩමෙන් තවත් න්‍යායාත්මක කරුණු කිහිපයක් ඉගෙන් ගනිමු HTML ගැන.

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

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

Read More

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 වල දමන්න.

Read More

HTML සිංහලෙන් පාඩම 3 - Code කරන හැටි

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

 

         අද පාඩමෙන් මම බලාපොරොත්තු වෙන්නේ පොඩි පොඩි ප්‍රායෝගික ක්‍රියාකාරකම් සමග න්‍යායාත්මක කරුණුත් ඉදිරිපත් කරන්නයි. මීට පෙර පාඩම අධ්‍යනය කරල නැත්තම් ඒකට මෙතනින් පිවිසෙන්න. අද පාඩමට අපිට ඕන වෙනව notepad එක සහ web browser එකක්. (නැත්තම් අපි හඳන web pages බලන්නේ මොකෙන්ද?). ඒ වගේම පසුගිය පාඩම් වලින් මම ඉදිරිපත් කළ කරුණු මතක ඇතියි සිතමි. නැත්තම් ආයෙත් ඒ පාඩම් කියවල ඉන්න අද පාඩම පටන් ගන්න කලින්.

                                                                              

HTML වලින් code කරන්න දැන ගත යුතු මූලික කරුණූ.

• අපි මුලින්ම කරන්න ඕන මේ code එක ලියල තියෙන්නෙ HTML වලින් කියල browser එක දැනුවත් කිරීම එක කරන්නේ <html> කියන Tag එකෙන්. Tag එකක් open කලාම ඒක close කරන්නත් ඕන නේ ඒකට භාවිතා කරන්නේ </html> tag එක.

Figure 1

•  අපි සාමාන්‍යෙයන් Tags ලියන්නේ simple letters වලින්. ඒක සම්මත ක්‍රමයක්. ඔබ capital letters භාවිතා කලා කියල වැරදි නැහැ.

• HTML වලින් අපි code කරන හැම දේම ලියන්න ඕන මම කලින් කියපු  <html> සහ </html> tag දෙක අතරෙයි.

• අපි ප්‍රධාන වශයෙන් HTML වෙබ් පිටුවක් කොටස් දෙකකට බෙදා ගන්නව ඒ,
• Head කොටස සහ
• Body කොටස ලෙසයි

• Head එකට බොහෝ වෙලාවට අන්තර් ගත වෙන කොටස් වලින් අපිට පේන දෙයකට තියෙන්නේ title එක විතරයි. (පහත රූපයේ web page එකක Title එක කුමක් දැයි පෙන්වා තියෙනව) ඒකට භාවිතා කරන්නේ <title> හා </title> tag යුගලය. head කොටසේ භාවිතා වන අනෙකුත් tags ගැන අපි පසුවට දැන ගනිමු. (මම tabs තියල type කරල තියෙන්නේ code එක පැහැදිලි හා ලස්සන වෙන්න ඕන නිසයි මේ විදිහටම type කරන්න ඕන කියල නීතියක් නෑ)

Figure 2

Figure 3

• Body කොටසේ තමයි අපි වෙබ් පිටුවේ අන්තර්ගත වෙන්න අවශ්‍ය දේවල් code කරන්නේ.

Figure 4

•  මේ <p> tag යුගලයෙන් කියන්නේ එතන තියෙන්නේ paragraph එකක් කියලයි.

• දැන් අපි මේ code කර ගත්ත file එක save කරගන්න විදිහ බලමු. notepad එකේ file ----> Save ක්ලික් කරන්න එතකොට එන dialog box එක මෙන්න මේ වගෙයි.

Figure 5

• ඒකේ save as type කියන property එක All files කියල වෙනස් කරන්න. දැන් file name කියන තැනට ඔයාල කැමති නමක් එකක් .html කියන extention එක දෙන්න හරියට මෙන්න මේ වගේ.

Figure 6

• දැන් ඔයාල save button එක click කරල file එක save කරගන්න.

• ඒ save කල file එක මෙන්න මේ වගේ දිස් වේවි ඔයාලට. (මම දුන්න නම My First Web Page)

Figure 7

• දැන් ඒ file එක double click කරල open කරන්න කෝ. ඒතකොට මෙන්න මේ වගේ ඔයාලගේ web browser එකෙන් ඒක Open වේවි.

Figure 8

        දැන් ඔයාල සාර්ථකව පළමු උත්සාහය දරල ඉවරයි. හරිම ලේසියි නේද?. ගැටළු comment කරන්න. ආයෙත් පාඩමකින් මුණගැසෙමු. එතකම් ගිහින් එන්නම්.

Read More