                අද මේ පලමු ලිපියේ පටන් මම බලාපොරොත්තු වෙන්නේ HTML
ඉගෙන ගන්න ආසාවෙන් ඉන්න ඔබ සැම දෙනාටම මුල සිට සරලව (ඕක ඉතින් හැම හංදියක්
හංදියක් ගානේ තියෙන poster වලත් ගහල තියෙන්නේ ඒ වුනාට මෙලෝ දෙයක් තේරෙන්නෙ
නෑ....! ) කියල දෙන්නයි. ඔයාලගෙ ඔනෑම ප්‍රශ්ණයක් comment වලින් මට කියන්න.
දැන් අපි පාඩමට යොමු වෙමු.....

මොකක්ද මේ HTML කියන්නේ?

                  අපි අන්තර්ජාලයේ සැරි සරද්දි අපි පිවිසෙන බොහො වෙබ්
අඩවි, ඔබට සරලව Word Processing මෘදුකාංගක් භාවිතා කොට තැනිය හැකි යයි
සිතුනාද? මේ පහල උදාහරණය ගැන පොඩ්ඩක් විමසිලිමත් වෙන්නකෝ.

Figure 1

හරිම පහසුවෙන් කරන්න පුළුවන් දෙයක් නේද? ඒත් එසේ සාදාගත් ලිපි
අන්තර්ජාලයට එක් කිරීමේදී ගැටලු පැන නැගෙනව. හරියට ඔබ MS Word වලින් සදාගත්
ලිපියක් Notepad එකෙන් විවෘත්ත කරන්න ගියොත් වෙන දේ වගේ.

              මේ වගේ තවත් ගැටළු කිහිපයක්ම නිසා අන්තර්ජාලයට සම්බන්ද කරනු
ලබන ලිපි සදහා විශේෂ වූ පොදු සම්මත ක්‍රමයක් අවශ්‍ය වුනා, එවිට ඒවා web
browsers මගින් ඉක්මනින්ම කියවාගත හැකි වෙනවා. (පොදු ක්‍රමයක් භාවිතා වන
නිසා). W3C නැමැති සංවිධානය මේ සදහා මුල් වී ක්‍රියා කරනු ලබයි. මේ
අවශ්‍යතා සදහා ඇති වුන පොදු සම්මත ලේඛණ භාෂාව තමයි HTML (Hyper Text Markup
Language) ලෙස හඳුන් වන්නේ. තවත් වැදගත් දෙයක් තමයි මේ භාෂාව programming
language එකක් නොව Markup language එකක් වීමය. මේ නිසා markup tags භාවිතා
කොට මේ වෙබ් පිටු සකස් කරනු ලබයි. (Tags ගැන බය වෙන්න එපා ඊලග පාඩමෙන් අපි
මේ Tags ගැන වැඩි දුරටත් ඉගෙන ගමු). සරලව කියනවා නම් මේ tags වලින් කරන්නේ
වෙබ් පිටුවේ අන්තර්ගතය දිස් වෙන්න ඕන ආකාරය web browser එකට විස්තර කිරීමයි

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

පසුගිය පාඩමෙන් අප යම් තරමක හෝ අවබෝධයක් HTML පිළිබඳව ලබා
ගත්තා මතක ඇතැයි සිතමි. ඒ ටික මතක නැත්තම් හරි බලන්න බැරි උනා නම් හරි මෙතනින් ඒ ලිපිය කියවලම අද වැඩ පටන් ගමු. අද මම කරන්නේ ඒ ලිපිය නවත්තපු තැන සිට ඉදිරියටයි.

මම
අන්තිමටම කලේ tag ගැන පොඩ්ඩක් කියපු එකනේ, අද අපි තව දුරටත් ඒ ගැන කතා
කරමු. HTML වලින් document එකක් නිර්මාණය කර ගැනීමේදී අපිට ප්‍රයෝජනයට ගන්න
පුළුවන් මෘදුකාංග තිබුනත් මම මෙහිදී භාවිතා කරන්න හිතාගෙන ඉන්නේ Notepad
එක පාවිච්චි කරල කරන ක්‍රමය. මොකද notepad එකේ code කිරීමේදී අතින් සෑම
code එකක්ම ලියන්න සිදුවෙන නිසා tags පිළිබඳ ඔබේ දැනුම තවත් දියුනුවේවි එය
කිසිදා Micromedia Dreamviewer වැනි මෘදුකාංග භාවිතයෙන් ලබා ගත හැකි නොවේ.

අපි පහතින් Tags වල විශේෂතා කිහියක් ගැන දැන ගනිමු.

HTML tag එකක් හැදෙන්නේ Keyword එකක් <.....> මෙන්න මේ angle brackets වලින් වට උනාමයි. උ.දා - <html>

ඒ වගේම සාමාන්‍යෙයන් HTML tags තයෙන්නේ යුගල වශයෙන්. උ.දා - <html> සහ </html>

<.......> මේ විදිහට තියෙන tag එකට අපි කියනව ආරම්භක tag එක (opening tag) කියල.

</......> මේ විදිහට තියෙන tag එකට අපි කියනව අවසාන කිරීමේ tag එක (closing tag) කියල.

දැන්
ඔයාලට හිතෙනව ඇති අපිට මොකටද මේ tags කියල?, අපි HTML වලින් යම් නිර්මාණයක්
කිරීමේදී අපේ සෑම කොටසක්ම නිවැරදිව කියවන්නාගේ web browser එකට විස්තර කර
දිය යුතුවේ. මෙන්න මේ භාරදූර කාර්යය තමයි tags වලින් අපි ඉෂ්ඨ කර ගන්නේ.
(හැබැයි ඉතින් සෑම web browser එකක්ම බහුතරයක් tags එකම ආකාරයකට කියෙව්වත්
සමහර tags එසේ නොවෙන්න පුළුවන්) මම හිතනව දැන් ඔයාලට tags ගැන පොඩි හෝ
අවබෝධයක් ලැබුනා කියල.

HTML coding කරනකොට සාමාන්‍ය පිළිවෙල තමයි <opening tag> අන්තර්ගතය <closing tag> යන
ආකාරයට ලිවීම. මේක වෙනස් වෙන අවස්තාත් නැතුවම නොවෙයි. අපි ඒවා ගැන අදාල
තැන් වලදිම කතා කරමු, දැනට මේ විඳිහ මතක තියාගන්කෝ. විශෙෂ අවස්ථා පස්සේ මතක
තියා ගමු

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

දැන් ඔයාල සාර්ථකව පළමු උත්සාහය දරල ඉවරයි. හරිම ලේසියි නේද?.

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

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

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

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

උ.දා:-

<h1> coding සිංහලෙන් </h1>

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

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

coding සිංහලෙන්

coding සිංහලෙන්

coding සිංහලෙන්

coding සිංහලෙන්

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 එක තේරුනා කියල

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 පාඩම 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 කරල බලන්නකෝ අද අපි කතා කරපු දේවල් ගැන ප්‍රශ්ණ තියෙනවද කියල.

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 කරන්නේ...

මෙන්න මෙතනින් ඔයාලයට attributes ගැන වැඩි දුරටත් දැනගන්න පුළුවන්.

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 එක දාගන්න පුළුවන්.මෙන්න මේ වගේ.

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

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

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 එකක්. ආයෙත් පාඩමකින් හමුවෙමු.

HTML පාඩම 2

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

හරි..එහෙනම් අපි අද පාඩම පටන් ගමු...මම අද කියලා දෙන්නේ HTML වලින් වගුවක්
නැත්නම් table එකක් හදා ගන්න විදිය..මටත් ඉස්සෙල්ල තේරුනේ නෑ මොන
කෙහෙල්මලටද වගු ගහන්නේ කියලා..පස්සේ තමා වැඩේ කිල්ක් උනේ.අපිට ඕන් සයිට්
එකේ බේසික් ශේප් එක ගන්න පුලුවන් මේකෙන්..ඒ කියන්නේ අපි හදන්න යන සයිට් එක
කොටස් වලට බෙදාගන්න පුලුවන්..පින්තූර එන්නේ කොතන්ටද...මාතෘකාව
කොතනඩ...විස්තර කොහෙද..අදී විදියට ඒ ඒ ඒවා සැලසුම් කරගන්න පුලුවන්..ඔතකොට
ලේසියි..

හිතන්න ඔයාලට හිස් කඩදාසියක් දුන්න කියලා..එකේ ඔයගොල්ලෝ බෙදා ගන්නවා කෑලි
4කට.නැමුවා කියලා හිතමුකෝ..නමලා දිග ඇරියම ඒ දාර පෙනවනේ...ඔතකොට කොටස් 4ක්
පේනවා අපිට...ඒ ඒ කොටසේ අපිට ඕන විජ්ජුම්බරයක් කරන්න පුලුවන්..ඒ වගේ තමා
මේකත්.ඒ ඒ කොටස තුල අපිට කැමති වැඩ කෑලි දාන්න පුලුවන්...

ඒ හැදින්වීම ඇතිවෙයි කියලා හිතනවා..දැන් බලමු කොහොමද table එකක් ඇද ගන්නේ
කියලා..මතක ඇතිනේ HTML ෆයිල් සේව් කරන විදිය.ඉස්සෙල්ලම ඒ විදියට ෆයිල් එකක්
හදාගෙන ඉන්න..නෝට් පෑඩ් එකයි බ්‍රව්සර් එකයි දෙකම open කරලා තියාගත්තොත්
වැඩේ ලේසියි..පටන් ගන්න කලින් මම ටැග් ටික කියලා ඉන්නම්කෝ..තවත් ලේසි
වෙයි..

වගුවක් ගත්තම ඕකේ තීරු පේලි අරවා මෙව්වා තියනවනේ..මේකත් ඒ වගේ තමා..අපි හැම
තිස්සෙම පටන් ගන්න ඕනේ row එකකින්..ඒකට අදාල ටැග් එක තමයි <tr>

ඊට පස්සේ ඒකේ ඇතුලත් වෙන තීරු..නැත්නම් කොලම්ස්..ඔතකොට අපිට අවශ්‍ය
එක කොලම් ඇතුලේ ලියන්න අපි මෙන්න මේ ටැග් එක පාවිච්චි කරන්න ඕනේ.. <td>

මතක තියාගන්න කොලම් එකක් ඉවර කරන්නේ ඒක ඇතුලේ තියෙන්න ඕනේ සේරම දේවල් ඇතුලත් කරාට පස්සේ..

table head නැත්නම් වගුව උඩම පේලියේ මාතෘකා දාගන්නේ මෙහෙමයි..වැඩි දෙයක් නෑ..ටිකක් bold වෙලා එනවා විතරයි.. <th>

මේ උඩ පින්තූරේ තියන table එකක් වගේ හදා ගන්න අමාරුම නම් පල්ලෙහා තියන code ටික copy කරගෙන බලන්න..

<html>

<head>

</head>

<body>

<tr>

<th>NAME</th>

<th>marks</th>

</tr>

<tr>

<td>ravindu</td>

<td>00</td>

</tr>

<tr>

<td>ranga</td>

<td>01</td>

</tr>

<tr>

<td>kamal</td>

<td>02</td>

</tr>

</table>

</body>

</html>

දැන් පොඩි table එකක් කරගන්න පුලුවන්නේ..හැබැයි එකේ උස මදි වගේ නේද??ඒකට මෙන්න මේ විදියේ ටැග් එකක් කරන්න..

<table height="100%">

ඒ වගේම එකේ දාර පෙන්නන්න ඕනේනම් මේ ටැග් එක

<table width="100%">

මේකේ ප්‍රතිශත වලින් කියන්නේ මුලු සයිට් එක පෙන්නන වින්ඩෝ එකෙන් කොච්චර
ප්‍රමානයක්ද කියන එක..ප්‍රතිශත නැතුව නිකන් දැම්මොත් එක පික්සල් වලින් තමයි
ගනන් ගන්නේ..

තව දෙයක් තියනවා..අපි හිතමුකෝ අපිට එක රෝ එකක තියන කොලම් දෙකක් එක් කරන්න ඕනේ කියලා..එහෙනම් මෙන්න මේ ටැග් එක use කරන්න වෙනවා..

<tr colspan="2">

එකතු කරගන්න ඕනේ කොලම් ගාන තමා වරහන් ඇතුලේ දාන්නේ..

හරි..අපිට දැන් පුලුවන් අපි කැමති විඩියට මේ වගුව ඇතුලට කැමති ඉමේජස්
ටෙක්ස්ට් දාලා හදා ගන්න..මතක ඇතිනේ මම ගිය සතියේ එවා ඉගැන්නුවා..

මේ පල්ලෙහා තියෙන්නේ කරපු table එකක්..

මේ තියෙන්නේ උඩ එකට අදාල code ටික

<html>

<head>

<h1>How to draw a HTML table</h1>

</head>

<body>

<table width="100%" height="100%" border="2">

<tr>

<td colspan="2">

<img src="C:\Users\Ravindu\Desktop\images\a.jpg" width="100%" height=40%>

</td>

</tr>

<tr>

<td><h3><a href="">home</a></h3></td>

<td>About us</td>

</tr>

<tr>

<td height="500" width="50%">learn something and join us </td>

<td><img src="C:\Users\Ravindu\Desktop\web\email\day3\b.jpg" width="100%"></td>

</tr>

</table>

</body>

</html>

තව ඉතින් ඔයගොල්ලෝ කැමති විදියට නිර්මාණශීලී ආකාරයකට හදා ගන්න
පුලුවන්..තමන් ඉස්සෙල්ලා කොලයක් අරන් ඇඳලා බලන්න..ඊට පස්සේ ටික ලියන්න පටන්
ගන්න..එහෙම කරාම ලස්සන එකක් ගන්න පුලුවන්..

හරි අදට ක්ලාස් එක ඉවරයි..ගුරුතුමාට දොයි මතයි අද..යන්න කලින් තව පොඩි ටැග් ටිකකුත් කියලම යන්නම්කෝ ඉතින්..

අපිට text එකක් හරි image එකක් හරි page එකේ මැද්දට,වමට,දකුනට ගන්න ඕනේ නම් මේ ටැග් එක use කරන්න..

<td align="center">

Search This Blog

NEWS

මොකක්ද මේ HTML කියන්නේ?

මොකක්ද මේ HTML කියන්නේ?

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

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

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

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

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

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

coding සිංහලෙන්

coding සිංහලෙන්

coding සිංහලෙන්

coding සිංහලෙන්

coding සිංහලෙන්

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

HTML පාඩම 6 - HTML Elements

<p> element

<body> element

<html> element

<br/> element

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

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

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

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

Tag එක HTML Comment සඳහා

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

Link Break Tag (<br/>)

HTML පාඩම 2

Comments

Post a Comment

Popular posts from this blog

Network Commands

මෙන්න එහෙනම් Proxy list එක ...

ඉලෙක්ට්‍රොණික පන්තිය..