දන්න කියන දෙයක් හැමෝටම දැනගන්න කියලා ලියන මේ බ්ලොග් පිටුවට ඔයාලව ආදරයෙන් පිළි ගන්නවා. ඉගෙන ගන්න පුළුවන් දේවල් කියලා දෙන්න බලාපොරොත්තු වෙනවා. ආපු වෙලාවක කොමෙන්ට් එකක් දාන්නත්, පාඨකයෙක් විදියට ෆොලෝ කරන්නත් පුළුවන් නම් වටිනවා.

Sunday, May 30, 2010

PHP කරා යමු - 19 (HTML)

අපි වගුවක් නම් ඇන්දා ඒත් කෝ ඒකෙ වටේ ඉරි? අපි ලියපු වචන ඛණ්ඩ තුන එක දිගට පේළියට තියෙනවා විතරයි නේද පේන්නේ? හරි ඒකට කරන්න දෙයක් තියෙනවා. ඒ වගුවක් අඳිද්දී අපි පාවිච්චි කරන ඇට්‍රිබියුට් කීපයක්ම තියෙනවා ඒ වගුව හැඩ වැඩ කරන්න. ඒ කියන්නේ "table" ටැග් එකට වගේම අනික් ටැග් වලටත් හැඩ වැඩ වෙන්න උදව් වෙන ඇට්‍රිබියුට් කීපයක්ම තියෙනවා. අපි දැන් ඒවා ගැන දැන ගනිමු.

මුලින්ම "table" ටැග් එකට විතරක් අදාල ඇට්‍රිබියුට් ගැන හොයල බලමුකෝ.

border - අපි අඳින වගුවේ නැත්නම් "table" එකේ දාරයේ ඝනකම කොච්චරද, සීමාවේ මහත කොච්චරද කියන එක තමා මේ ඇට්‍රිබියුට් එකට දෙන 0 (zero) ත් ඊට ඉහල පූර්ණ සංඛ්‍යා වලිනුත් අපිට බලා ගන්න පුළුවන් වෙන්නේ.

cellspacing - අපි වගුවේ කොටු අඳින කොට, එහෙමත් නැත්නම් පේළි තීරු වලට වෙන් කරද්දි, ඒ එක එකක් කොටු (cells) අතරේ ඉඩ කොච්චර තියෙන්න ඕනෙද කියලයි මේකෙන් කියැවෙන්නේ. දෙන අගයන් 0 (zero) සිට ඉහලට පූර්ණ සංඛ්‍යා. වගුවේ දාරයේ ඉඳන් කොටු වලට තියෙන දුරත් මේකම වෙන්න පුළුවන්.

cellpadding - වගුවේ ඇඳපු කොටු වල තියෙන අන්තර්ගතයට, එහෙමත් නැත්නම් කොටු ඇතුලේ ලියන දේවල් වලට කොටුවේ මායිමේ හෙවත් දාරයේ (border) ඉඳන් තියෙන දුරට තමා මෙහෙම කියන්නේ. ඒකටත් දෙන්නේ 0 ඉඳන් ඉහලට පූර්ණ සංඛ්‍යා.

"tr" ටැග් එකට විතරක් විශේෂ වුණු ඇට්‍රිබියුට් නම් නැහැ. තියෙන්නේ අනිත් ටැග් දෙකේම තියෙන ඒවායෙනුත් කීපයක්. ඒ ගැන පොදු ටැග් වල ඇට්‍රිබියුට් ගැන හොයලම දැන ගමු.

අනිත් ටැග් ජාති දෙකටත් තියෙන පොදු ටැග් තමයි මේ තියෙන්නේ.

align - තිරස් අතට සමබර වෙන්න ඕනෙ කොයි පැත්තටද කියලා මේකට දෙන අගයන් තමා left (වමට), right (දකුණු අතට), center (මැදට). "td" ටැග් එකට විතරක් justify කියන එකත් තියෙනවා.

height - කොච්චර උස වෙන්න ඕනිද කියන එකයි. අගයන් විදියට දෙන්න ඕනි 0 ඉඳන් ඉහලට පූර්ණ සංඛ්‍යාවල්.

width - කොච්චර පළල වෙන්න ඕනිද කියන එකයි. අගයන් විදියට දෙන්න ඕනි 0 ඉඳන් ඉහලට පූර්ණ සංඛ්‍යාවල්. මේක අදාළ "table" සහ "td" ටැග් වලට විතරයි.

bgcolor - පසුබිමේ පාට, වර්ණය මොකක් විය යුතුද කියලා මේකට දෙන අගයන් ගැන අපි කලින් වතාවකදි ඉගෙන ගත්තා. ඒ ඕනෙ විදියකින් මේකට අගයක් දෙන්න ඔයාලට පුළුවන්.

background - පසුබිමට අපි පිංතූරයක් දානවා නම් මේ ඇට්‍රිබියුට් එකට අගයක් විදියට පිංතූරයක පාත් (path) එක එහෙමත් නැත්නම් පිංතූරයක් තියෙන තැනට ලිපිනය දෙන්න පුළුවන්.

bordercolor - දාරයේ නැත්නම් මායිමේ පාට, වර්ණය මොකක් විය යුතුද කියලා මේකට දෙන අගයන් ගැන අපි කලින් වතාවකදි ඉගෙන ගත්තා. ඒ ඕනෙ විදියකින් මේකට අගයක් දෙන්න ඔයාලට පුළුවන්.

"tr" ටැග් එකේ තියෙන ඇට්‍රිබියුට් වර්ග ටිකත් බලා ගන්නකෝ එහෙනම්.
align, height, bgcolor, bordercolor

මීලඟට "td" ටැග් එකට විතරක් අදාල ඇට්‍රිබියුට් ගැන හොයල බලමු.

valign - කොටුවක (cell) ලියන දේවල් කොටුව ඇතුලේ සිරස් අතට සමබර කිරීම තමා මේකෙන් වෙන්නේ. දෙන අගයන් වෙන්නේ, top (ඉහලට), middle (මැද්දට), bottom (පහලට) කියන ඉංග්‍රීසි වචන.

nowrap - කොටුවක් (cell) ඇතුලේ අපි දාන අන්තර්ගතය කොටුවේ පළලක් තියෙන නිසා ඉබේම පේළි කැඩෙමින් පහලට පහලට ලියැවෙනවා. මේක නැති කරන්න තමා මේ ඇට්‍රිබියුට් එක තියෙන්නේ. දෙන එකම අගය "nowrap" විතරයි. මේක දුන්නාම අපි කොටුව ඇතුලේ මොනා කොච්චර දිගට කීවත්, වාක්‍ය පේළි වලට ඉබේ නොකැඩී කොටුවේ පළල වෙනස් වෙනවා.

colspan - අපි ඇඳපු වගුවක තියෙන තීරු ප්‍රමාණයෙන් කීපයක් එක කොටුවක් බවට පත් කරන්න ඕනෙ නම් පාවිච්චි කර ගන්න වෙන්නෙ මේ ඇට්‍රිබියුට් එකයි. අපිට උවමනා කරන තීරු ටික සිහි බුද්ධියෙන් තෝරා ගෙන තමා මේක යොදන්න ඕනෙ. හැබැයි මේකෙන් අනිත් තීරු වලට බලපෑමක් නොවෙන්නේ, අපි තෝරා ගත්තු කීපයකට විතරක් මේක දා ගන්න පුළුවන් නිසා. හරියට සිහියෙන් නොකලොත්, වගුව විකාරයක් වෙන්නත් පුළුවන්. මේක තමා වගු වල තියෙන එපාම කරපු ඇට්‍රිබියුට් එක හරියට දැනන් නොකලොත්. තමන් තීරු කීයක් එකතු කරලා තනි කොටුවක් හදන්න යනවද කියන අගය තමා මේ ඇට්‍රිබියුට් එකේ අගයට දෙන්නේ. තීරු 5ක් නම් 5 කියලා දෙනවා.

rowspan - කලින් කියපු "colspan" ඇට්‍රිබියුට් එක වගේම තමා මේකත්. අපි ඇඳපු වගුවක තියෙන පේළි ප්‍රමාණයෙන් කීපයක් එක කොටුවක් බවට පත් කරන්න ඕනෙ නම් පාවිච්චි කර ගන්න වෙන්නෙ මේ ඇට්‍රිබියුට් එකයි. මේකත් හරියට සිහියෙන් නොකලොත්, වගුව විකාරයක් වෙන්නත් පුළුවන්. මේකත් වගු වල තියෙන එපාම කරපු ඇට්‍රිබියුට් එකක් හරියට දැනන් නොකලොත්. තමන් පේළි කීයක් එකතු කරලා තනි කොටුවක් හදන්න යනවද කියන අගය තමා මේ ඇට්‍රිබියුට් එකේ අගයට දෙන්නේ. පේළි 3 ක් නම් 3 කියලා දෙනවා.

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

<table border="1" cellpadding="2" cellspacing="2" align="center" height="100" width="400" bgcolor="yellow" bordercolor="red">
<tr>
<td align="left" bgcolor="#00CCCC" height="20" width="100">Hello</td>
<td align="right" background="C:\toolkit.jpg" width="200">Sri Lanka</td>
</tr>
<tr>
<td colspan="2" align="center" valign="bottom">How Are You?</td>
</tr>
</table>









HelloSri Lanka
How Are You?


ඔයාලා කරලාම බලන්න. සමහර විට මේකෙදි පෙන්නන විදිය වෙනස් වෙන්න පුළුවන්.

මීලඟට අපි styles (css) මෝස්තර කාරයා ගැන ඉගෙන ගනිමු.

Saturday, May 29, 2010

PHP කරා යමු - 18 (HTML)

කලින් පාඩමත් ටිකක් දිග වුණා වගේ. ඒත් මොනා කරන්නද. සම්පූර්ණ පාඩමක් නෙ ඒක. හැබැයි ඉතින් ඒ සම්බන්ධ ඔක්කොම දේවල් වගේ මම කියලා දුන්නා කියලයි හිතන්නේ. ඔයාල හිතනවා නම් මොනා හරි කොටසක් මග හැරුනාය කියලා අහන්න අමතක කරන්න එප. ඒ පාඩමින් පස්සේ මම රෑට කාලා තමයි ආවෙ මේ පාර ඇඳට, පස්සෙ නිදා ගන්නත් එක්කම, ලැප්ටොප් එකත් අතට අරන්. දැන් අපි පටන් ගන්න යන්නෙත් ටිකක් දරුණු පාඩමක් කියන්න පුළුවන්. කලින් පාඩමෙන් ඉගෙන ගත්තු දේවලුත් මෙකට අදාල කර ගන්න පුළුවන්. හැබැයි ලියන විදිය විතරයි, කේත නෙවෙයි. ඒ වගු (tables) අඳින හැටි HTML පාවිච්චි කර ගෙන. ටිකක් පැටලෙන සුළු, පැහැදිලි කරන්න අමාරු පාඩමක් මේ විදියට. උත්සාහයක් දරල බලමුකෝ.

වගු සම්බන්ධ හැම ටැග් ජාතියක්ම යුගල ඒවා. මම මුලින්ම කියලා දුන්න විදියේ, ඒ කියන්නේ අපේ රීති ටික හොඳින්ම භාවිතා වෙන්න ඕනි තැනක් තමා මේක. පලමු රීතිය නම් කොහොමත් රැකෙනවා නෙ. ඒත් දෙවෙනි රීතිය රකින්න ගියාම පැටලෙනවා. ඒ නිසා සිහියෙන් ඒක කරන්න ඕනෙ. ටැග් යුගලක් ඇතුලේ තවත් ටැග් යුගලක් යොදන එක තමා ඒ. වගු අඳිද්දී අපිට මොනා හරි වගුවේ කොටුවක ලියා ගන්න ඕනෙ නම්, ඒ තැනට වෙනකම්ම අපිට වගු සම්බන්ධ ටැග් යුගල අතරේ වගු සම්බන්ධ ටැග් යුගල්ම පාවිච්චි කරන්න සිද්ධ වෙනවා ඒ කොටුව ඇඳ ගන්නකම්ම. ඉතින් මේ ටැග් යුගල් මොනාද කියල අපි බලමු දැන්.

පළමු වන ටැග් යුගලේ, ඒ කියන්නේ ප්‍රධානම සහ පාදම වෙන ටැග් යුගල තමා "<table></table>" කියන ටැග් යුගල. මේ තමා පලමු තට්ටුව වගුවක (table එකක). පලමු තට්ටුව කීවේ, ඔයාලට මතකයි නේද සත් මහල් ප්‍රාසාදය ගැන මම කීවා. අන්න ඒ වගේ ඇඳෙන පලවෙනි තට්ටුව. සාමාන්‍යයෙන්, අපි වගුවක් කොළේක අඳිද්දී, ඒකේ පේළි වගේම තීරුත් තියෙනවනේ. එතකොට නම් අපි අඳින්නේ අපිට කැමති විදියට මුලින්ම පේළි හරි තීරු හරි ඇඳලා සිරස්ව හරි හරහට හරි ඉරි ගහලා කොටු තියෙන වගුවක් ඇඳ ගන්න එක නේ. ඒ අපේ කැමැත්ත. හැබැයි HTML වලදී, අපිට ඕනෙ ඕනෙ විදියට එහෙට මෙහෙට ඉරි ගහන්න බෑ. ඒක අඳින විදියක් තියෙනවා. ඒ විදියෙන් ඇන්ඳේ නැත්තම් අපිට හරි හමන් දෙයක් බ්‍රවුසරයෙන් බලා ගන්න බැරි වේවි. ඒ නිසා මෙන්න මේ පිළිවෙල තමා අපි අනුගමනය කරන්න ඕනෙ.

"<table></table>" ටැග් යුගලෙන් කියන්නේ අපි ඔන්න වගුවක් ඇන්දා කියලා. ඒ තමා වගුවේ වටේ මායිම. මීලඟට අපි අඳින්න ඕනේ පේළි නැත්තම් "rows". මේ පේළියක් හඳුන්වන්නේ table row එකක් හැටියට. ඒ තේරුමෙන්ම තමා මීට අදාළ ටැග් යුගලෙත් තියෙන්නේ. ඒ "<tr></tr>". මේක ලියැවෙන්නේ, "table" ටැග් යුගල ඇතුලේ. ඔන්න අපි දැන් පේළිත් ඇඳ ගත්තා. තවමත් අපිට වචන පෙලක්වත් ලියා ගන්න පුළුවන් කොටුවක් ඇඳුනේ නෑ. ඒකට අපි කරන්නේ මේ ඇඳපු පේළි වල කොටු අඳින එක; එහෙමත් නැත්නම් ඇඳපු පේළිය කොටු වලට වෙන් කරන එක. මීලඟට එන ටැග් යුගලේ ඒ නිසා ඇඳෙන්නේ මේ පේළියක් ඇතුලේ. ඒ කීවේ "<tr></tr>" ටැග් යුගල අතරේ. ඒ, "<td></td>" කියන ටැග් යුගල. ඔන්න ඔය ටැග් යුගල අතරේ විතරමයි වගුවක් ඇතුලේදී අපිට වචන, වාක්‍ය, පිංතූර, ඡේද එහෙම ලියන්න, අඳින්න පුළුවන් වෙන්නේ. මේ කොටුවකට කියන්නේ cell එකක් කියලා. ටැග් එකේ තේරුම ගත්තොත් ඒ "table data". ඒ කියන්නේ වගුවක දත්ත තියන්න පුළුවන් තැන කියන එකයි. හැබැයි, එක පේළියකට (row එකකට) කොටු (cells) ගොඩක් නැත්නම් "<td></td>" ටැග් යුගල ගොඩාක් එන්න පුළුවන් වගේම ලියන්න පුළුවන් බව මතක තියා ගන්න. ඒ වගේම, එක වගුවකට පේළි නැත්නම් "<tr></tr>" ටැග් යුගලත් ගොඩාක් එන්න පුළුවන්. ඔය විදියට අපිට පුළුවන් වගුවක් ගොඩ නගා ගන්න අපිට කැමති විදියට. අපි පේළියකදී අඳින කොටු වලින් කියැවෙන්නේ ඒ වගුවේ තීරු (columns) කියලා. අපිට පේළියෙන් පේළි‍ය තීරු ප්‍රමාණය වෙනස් ප්‍රමාණ වලින් ඇඳ ගන්නත් පුළුවන්. දැන් අපි බලමුකෝ මේ කියපු ටික ලීවම පෙනෙන්නේ කොහොමද කියලා.

<table>
<tr>
<td>Hello Sri Lanka</td>
</tr>
</table>

තීරු ගාන වැඩි කරලත් බලමු.
<table> <- table margin
<tr> <- row margin
<td>Hello Sri Lanka</td> <- table cell with some data in it
<td>Welcome My Friend</td> <- table cell with some data in it
<td>How are you?</td> <- table cell with some data in it
</tr> <- row margin
</table> <- table margin

ලියපු ටික පේන විදියත් බලන්න එපැයි. ඒ ටික බ්‍රවුසරයෙන් පේන්න ඕනේ මේ වගේ.







Hello Sri LankaWelcome My FriendHow are you?

Thursday, May 27, 2010

PHP කරා යමු - 17 (HTML)

දවල්ට කාලා පොඩි නින්දකුත් දාලා ඔන්න මම ආවා. කාලා ඉවර වෙලා පොඩි චිත්‍රපටියකුත් බලලා එහෙමයි නිදා ගත්තේ. වැහි කාලෙ නෙ. ඉතින් දන්නෙම නැතුව සැපටම නින්ද ගියා. දැන් නම් හොඳටම හවසුත් වෙලා. මගෙ හිතේ හවස හතට විතර ඇති. අපි ඔන්න ඉතින් ලින්ක් ගැනත් ඉගෙන ගත්තා එහෙනම්. එහෙනම් අපි මීලඟ පියවරට යමු. ඒ අපි Microsoft Word වල එහෙම දැකල තියෙන Bullets and Numbering කරන හැටි. ඒ කීවේ අංක හරි වෙනත් පුංචි සලකුණක් හරි දාලා ලයිස්තුවක් (list) හදන හැටි ඉගෙන ගන්න.

මේ සම්බන්ධව අපිට ඉගෙන ගන්න තියෙනවා ටැග් යුගල ජාති තුනක්. ඒ "<ol></ol>", "<ul></ul>" සහ "<li></li>" කියන යුගල ටැග් තුන් ජාතිය. අපි ඉලක්කම් දාලා ලයිස්තුවක් හදනවා නම් පාවිච්චි කරන්නේ ol (ordered list) කියන එක. ඒකේ තේරුම අපි පිළිවෙලකට ලියන ලයිස්තුවක් කියලා. නැත්නම් වෙනත් සලකුණක් දාලා ලයිස්තුවක් හදනවා නම් ගන්නේ ul (unordered list) කියන එක. ඒකේ තේරුම අපි පිළිවෙලකට නොලියන ලයිස්තුවක් කියලා. ලයිස්තුවක තියෙන අංග ලියන්න අපි පාවිච්චි කරන්නේ li (list item) කියන ටැග. අවසාන වශයෙන් අපි හදන ලයිස්තුවේ ලයිස්තු අයිතම ලියැවෙන්නේ මේ ටැග් යුගල අතරේයි. එහෙනම් මොකටද අර අනික් ටැග් ජාති දෙක? කෙලින්ම li පාවිච්චි කරන්න පුළුවන් නේ. එහෙම හිතන්න පුළුවන්. ඒත් අපි පාවිච්චි කරන්නේ ඉලක්කම් හෝ සලකුණක්ද කියන එක යොදා ගන්නයි ඒ ටැග් ජාති අපි යොදා ගන්නේ. අපි ලියන්නේ ඒ ටැග සුපුරුදු රීති ටික උපයෝගී කර ගෙන. ඒ එක ටැග් යුගලක් අතරේ අනික් ටැග් යුගලය ලියන ආකාරයට. ඒ මෙන්න මෙහෙම. මුලින්ම ඉලක්කම් දාපු ලයිස්තුවක් බලමු.
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
පෙනෙන්නේ පහල තියෙන විදියට.
  1. item 1
  2. item 2
  3. item 3
මීලඟට සලකුණු තියෙන ලයිස්තුවක් බලමු. ඒ,
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
පෙනෙන්නේ පහල තියෙන විදියට.
  • item 1
  • item 2
  • item 3

ol, ul වගේම li කියන ටැග් වලත් ඇට්‍රිබියුට් තියෙනවා. ඒව මෙන්න මෙහෙම පහලින් කියන්නම්.

ol වල start ඇට්‍රිබියුට් එක - අපේ ඉලක්කම් තියෙන ලයිස්තුවේ ඉලක්කම් පටන් ගන්නේ කොයි ඉලක්කමේ ඉඳලද කියලා පූර්ණ සංඛ්‍යාවක් අගය හැටියට දෙන එකයි මේකෙන් කරන්නේ.
<ol start="5" >
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
  1. item 1
  2. item 2
  3. item 3

ol ටැග ඇතුලේදී li වල value ඇට්‍රිබියුට් එක - අපිට ඕනෙ නම් පුළුවන් ලයිස්තුවේ ඕනෙම අංගයකට අපි දෙන ඉලක්කමක් මේකට දෙන අගයකින් පාලනය කරන්න, ol ටැගෙන් මොක දුන්නත්.
<ol start="10" >
<li value="20" >item 1</li>
<li>item 2</li>
<li value="40">item 3</li>
</ol>
  1. item 1
  2. item 2
  3. item 3

ul වල type ඇට්‍රිබියුට් එක - අපි පාවිච්චි කරන්නේ කොයි විදියේ සලකුණක්ද කියලයි මේකෙන් කියවෙන්නේ. එක්කො කළු කරපු කොටුවක්ද (square) කළු කරපු රවුමක්ද(disc) නැත්තම් නිකන්ම රවුමක්ද (circle) කියලා.
<ul type="square">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
  • item 1
  • item 2
  • item 3

li වල type ඇට්‍රිබියුට් එක - අපි පාවිච්චි කරන්නේ ඉලක්කම්ද, සලකුණු ලයිස්තුවක්ද කියන එකේ සැලකීමක් නැතුව අංග වලට වෙනත් ඉලක්කම් වර්ග හරි සලකුණු වර්ග පාවිච්චි කරන්න පුළුවන් මේකට අගයක් දැම්මාම. ඒ අගයන් තමා "1, a, i, circle, square, disc"
<ol>
<li type="a">item 1</li>
<li>item 2</li>
<li type="i" >item 3</li>
<li>item 4</li>
<li type="circle" >item 5</li>
</ol>

  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

අපිට අයිතමයක් නැත්තම් අංගයක් යටතේ තවත් ලයිස්තුවක් ලියන්න ඕනෙ නම් මෙන්න මේ විදියටයි ලියා ගන්නේ.


<ol>
<li>item1</li>
<ol>
<li>sub item1</li>
<li>sub item2</li>
</ol>

<li>item2</li>

<li>item3</li>
<ul>
<li>sub item1</li>
<li>sub item2</li>
</ul>

</ol>

ඒ කියන්නේ li ටැග් යුගලක් ලීවට පස්සේ, මීලඟ li ටැග් යුගලෙ ලියන්න කලින් හරි, ප්‍රධාන ටැගය (ol හරි ul හරි) වහන්න කලින් හරි ආයෙත් ප්‍රධාන ටැග් වර්ගෙන් එකක් ආරම්භ කරලා සුපුරුදු විදියට ලයිස්තුවක් ලියා ගන්නවා. ඒ ලයිස්තුව අවසන් කරලා, වහලා තමා ආයෙත් මුල් ලයිස්තුව ඉදිරියට ලියන්නේ හෝ අවසන් කරන්නේ. ලීවම පේන්නේ පහල තියෙනවා වගේ.

  1. item1
    1. sub item1
    2. sub item2
  2. item2
  3. item3
    • sub item1
    • sub item2

Wednesday, May 26, 2010

PHP කරා යමු - 16 (HTML)

පහු ගිය පාඩමෙන් අපි කොටස් දෙකකට අදාල ටැග් ජාති ඉගෙන ගත්තනේ ළමයිනේ. ඒ කීවෙ head ටැග් එකේ එන title ටැග් එක ගැනයි, body ටැග් අතුලෙ එන තනි ටැග් වර්ගයේ ටැග් ජාති තුනක්ම. මීලඟට අපි බලන්න යන්නේ අපි හදන වෙබ් පිටුවේ ඉඳන් තවත් වෙබ් පිටුවකට සම්බන්ධිතයක් හදන හැටි. ඒ කීවේ, අපි අපේ වෙබ් පිටුවේ කොහේ හරි තැනක click කරාම වෙන පිටුවකට යන්න හදන්නේ කොහොමද කියලා. මේ දේට සිංහලෙන් කියන්නේ "linking" කියලා. එක තැනක ඉඳලා තවත් තැනකට hyperlink එකක් හදන එක තමා මේ පාඩමෙන් කියලා දෙන්න යන්නේ.

මේ වැඩේ කොර ගන්න අපිට ඉන්න සහායකයා තමා "a" නොහොත් "anchor" ටැග් එක. මේක නම් ද්විත්ව ටැග් එකක්. ඒ කීවේ සුපුරුදු යුගල ටැග් ජාතියෙ. ලියන හැටි දන්නවා නෙව. මෙයාගෙත් විශේෂ ඇට්‍රිබියුට් කීපයක්ම තියෙනවා. ඒ ඇට්‍රිබියුට් උදව්වෙන් අපිට පුළුවනි වෙන පිටුවකට වගේම දැන් ඉන්න පිටුවේම තැනකට යොමු කරන්න, නැත්තම් බ්‍රවුසරය ඇතුලේදි ඒ තැනට ඉබේම ගෙනියවන්න. අර ඇට්‍රිබියුට් තමා "href","name" සහ "target" කියන ඒවා. href කියන ඇට්‍රිබියුට් එකේ අගයක් විදියට දෙන්න ඕනෙ අපි යා යුතු වෙබ් පිටුවේ වෙබ් ලිපිනයයි. ඒ කීවේ කොහේ හරි click කරොත් යන්න ඕනෙ වෙබ් පිටුවට තියෙන පාත් (path) එකයි. href="www.google.com" වගේ. href ඇට්‍රිබියුට් එක නැතුව නම් "a" ටැගෙන් කිසි වැඩක් නෑ.

ඕකෙන් විතරක් ගන්න පුළුවන් වැඩේ ඔච්චරයි. ඒත් name කියන ඇට්‍රිබියුට් එකත් පාවිච්චි කරාම තව වැඩක් කර ගන්න පුළුවන්. ඒ එකම වෙබ් පිටුවේ තැනකට යොමු කරවන එක. ඒක කරන්නේ මෙන්න මෙහෙම. අපේ වෙබ් පිටුවේ තියෙන කරුණු ප්‍රමාණය ගොඩක්ය කියලා හිතන්න. අපිට උඩ තැනක (පටුනක ) ඉඳන් පහල තැනක මාතෘකාවකට යන්න ඕනෙ. ඒ වෙලාවෙදි කරන්නේ පහල මාතෘකාවට අපි සලකුණක් දා ගන්නවා නමකුත් එක්ක. හරියට පොතක් කියවද්දි දාන පොත් සලකුණක් වගේ. ඔව්. මේ දේට HTML වලින් කියන්නේ "bookmark" යෙදීම කියලා. bookmark එකක් දා ගන්නේත් a ටැග් එකෙන්මයි. ඒ, <a name="mybookmark1">Harry Potter</a> විදියට. ඔය තමා අපි bookmark එක දාපු තැන. දැන් අපි පටුනේ ඉඳලා ඔතෙන්ට කෙලින්ම එනවා නම් පටුනේ අදාල link එක උද click කරාම ඔතෙන්ට එන්න ඕනෙ. ඒකට අපි ඒ පටුනේ තියෙන වචනයට link එකක් දෙනවා. ඒ, href වල අගයට අර bookmark එකේ නම දීලා. නිකන්ම දීලා බෑ. මුලින්ම "#" (hash) ලකුණක් දාල ඊට පස්සෙයි නම දාන්නේ. මෙන්න මේ විදියට, <a href="#mybookmark1">Go to Harry Potter</a>. ඔය link එක උඩ click කරාම අපි bookmark එක දාපු තැනට යොමු වේවි. කරලාම බලන්නකෝ. මෙන්න අපි ලීව එකේ උදාහරණය...

Go to Harry Potter
-----------------------
-----------------------
-----------------------
-----------------------
-----------------------
Harry Potter

මේ වගේ වෙනත් පිටුවක තියෙන bookmark එකකට වුණත් ඒ පිටුව බ්‍රවුසරයට ගන්න ගමන්ම ඒ පිටුවේ අදාල තැනට යොමු කරන්නත් පුළුවන්. ඒ මෙන්න මෙහෙම. සුපුරුදු විදියට අපි වෙන පිටුවක bookmark එක හදනවා. අපි දැන් ඉන්න පිටුවේ වෙබ් link එකේ href එකට අගය දිය යුතු වෙන්නේ මෙන්න මේ වගේ විදියකට. ඒ, href="mypage2.html#mybookmark2"


මීලඟට අපි target කියන ඇට්‍රිබියුට් එක ගැන බලමු. මේකෙන් කියන්නේ අපි කොහේටද අපේ පිටුව පෙන්නන්න ගන්න ඕනේ කියලා. අපිට පුළුවන් තව අළුත් ටැග් යුගලක් මෙතෙන්දි ඉගෙන ගන්න මේක අත් හදා බලන්න.

ඒ "<iframe></iframe>" කියන යුගලෙ. මේකේ අපිට මෙතෙන්දි පාවිච්චි කරන්න පුළුවන් වැදගත් ඇට්‍රිබියුට් නම්, "name, height, width" තමා. ඔයාලා දැනටමත් height, width ගැනත් ඒවාට අගය දෙන හැටිත් දන්නවා. name එකක් දෙන්නත් දන්නවා නෙ. මෙන්න මේ වගේ "iframe" එකක අපිට පුළුවන් තමන් ඉන්න පිටුවේ ඉඳන්ම කොහොමත් පිටින් වෙබ් පිටුවක් දිග ඇරලා පෙන්නන්න. ඔන්න ඔය හේතුව නිසා අපිට පුළුවන් a ටැග් එකෙන් දිග ඇරෙන පිටුවේ target හෙවත් ඉලක්කෙ කියන්න. ඉලක්කේ හෙවත් target එකට දිය යුත්තේ අපේ iframe එකේ අපි දාන නමයි. (name attribute). iframe එකක් හදන්නේ මෙන්න මෙහෙම.
<iframe width="400" height="150" name="myiframe" ></iframe>

මේ තියෙන්නේ ඒ iframe එක.


දැන් මේ link එක හදලා ඒක උඩ click කරාම link කරන පිටුව දිග ඇරෙන්නේ අපේ iframe එක ඇතුලේ නේද? කරලා බලන්නකෝ.

<a href="http://www.google.com" target="myiframe" >Load Google Search Engine </a>

Load Google Search Engine

PHP කරා යමු - 15 (HTML)

අකුරු හැඩ වැඩ කර මදැයි නේද. දැන් අපිට ටිකකට මග හැරුනු දෙයක් ගැන මතක් කර ගමු. ඒ <head> ටැග් යුගලෙ. අපි මේ ටැග් යුගල <body> ටැගය පටන් ගන්න කලින් නිකන් ලීව විතරනේ. ඒත් පාවිච්චි කරේ නෑ නෙ. ඔයාලගේ වෙබ් පිටුව බ්‍රවුසරයෙන් දකිද්දි ඔයාල දැක්කද බ්‍රවුසරයේ title bar එකෙ තියෙන නම? ඒකෙ හරිම කැත විදියට ඔයාලගේ වෙබ් පිටුව තියෙන තැනට පාත් path එක පෙන්නනවා නේද? අන්න ඒ දේවල් වෙනස් කර ගන්න විතරක් නෙවෙයි, තව තව දේවල් වෙනස් කර ගන්න උදව් වෙන්නෙ මේ ටැඝ් යුගල අතරේ ලියන තවත් ටැග් කීපයකින්. වෙබ් පිටුවක් ගැන ප්‍රධාන විස්තර ටික සඳහන් වෙන්නේ මෙන්න මේ ටැග් දෙක අතරේ. ඒවා වෙබ් පිටුව ගැන හොඳ විස්තරයක් සපයනවා. විශේෂයෙන් වෙබ් පිටුවක් අපිට ඕනෙ නම් Google වලින් search කරාම පෙන්නවන්න, මෙන්න මේ ටැග් යුගල අතරේ දාන දේවල් තමා ප්‍රයෝජනවත් වෙන්නේ. මූලික වශයෙන්ම අර title bar එකේ පෙන්නන කැත නම වෙනස් කර ගනිමු. ඒ අපේ වෙබ් පිටුවට අපි දෙන නමයි. ඒ කියන්නේ title එකයි. ඒක දෙන ටැග් යුගලෙ නමත් "title". ලියන්නේ "<title> ඔබේ වෙබ් පිටුවේ නම </title>" කියලායි. අපි පසුවට කතා කරන්න ඉන්න css, styles, javascript එහෙම ලියන්නේ head ටැග් යුගල අතරේයි. මොකද ඒවා වෙබ් පිටුවක් අපේ බ්‍රවුසරය මතට එද්දි මුලින්ම පැමිණිය (load විය) යුතු නිසා. <title> ටැග් එක ලියන්නේ මෙන්න මෙහෙමයි <head> ටැග් අතරේ.
<html>
<head>
<title>This is my Web Page</title>
</head>
<body>
</body>
</html>

මෙහෙම දාලා save කරල බැලුවම එප්නෙයි දැන් අර මුලින් තිබුණු කැත නම නැතිව අපි දාපු වචන තියෙන බව. තව මෙටා "meta" කියලා ටැග් විශේෂයක් තියෙනවා. මෙන්න මේ ටැග් තමා අපිට සෙවුම් යන්ත්‍රයකට (search engine) අපේ වෙබ් පිටුව සෙවුම් ප්‍රතිඵල (search results) වලට යොදා ගන්න උපකාරී වෙන්නේ. ඒ ගැන අපි පස්සට කතා කරමු. සමහර විට මේ පාඩම ඉවර වෙලා වගේ. නැත්තම් අපි යන ගමනට ගොඩාක් පරක්කු වෙනවා නේ. ඒ ටැග් ලියන්නෙත් මේ <head> ටැග් දෙක අතරෙමයි. හැබැයි ඒවා නම් තනි ටැග්. යුගල ටැග් නෙවෙයි.

යුගල ටැග් තියෙනවා නම් තනි ටැගුත් තියෙන්න එපැයි. ඒත් වැඩියෙන්ම තියෙන්නේ යුගල ඒවා නිසායි මුලින්ම ඒ ගැන කියලා දුන්නේ. මේ තනි ටැග් අවසන් කරන්නේ අනික්වායේ වගේම "/" ලකුණක් යොදලා. හැබැයි නොදැම්මාය කියලා වරදක් වෙන්නේ නෑ. මොකද ඒවා තනි ටැග් නිසා. ඒත් වඩා හොඳ "/" යොදා ගෙන අවසන් කරන එකයි. මේවායෙන් සමහරක් ටැග් වලට ඇට්‍රිබියුට් තියෙනවා, සමහරෙක්ට නෑ. ලියන්න පටන් ගන්නේ කලින් වගේමයි, "<" වලින් පටන් ගෙන ටැගයේ නම ලියලා "/>" කියලායි අවසන් කරන්නේ. "< tagname />" කියලායි ඔය කීව එක ලියන්නේ. අපේ වෙබ් පිටුවේ කොහේ හරි තැනක රූලක් යටට පනින්න ඕනෙ වුනොත් පාවිච්චි කරන "br" (page break) ටැග් එක මේ ගණයේ. ඒ වගේම පිංතූරයක් එකතු කර ගන්න ඕනේ නම් පාවිච්චි කරන්න තියෙන්නේ "img" (image) කියන මේ විදියේ ටැග් එකක්. එතකොට ඉන්න තැන හරස් අතට ඉරක් ඇඳ ගන්න ඕනෙ නම් පාවිච්චි කරන "hr" (horizontal rule) ටැගයත් මේ ජාතියේමයි.

ඉන්න තැන ඉඳන් රූලක් පහලට ගිහින් ලියාගෙන යන්න ඕනෙ නම් අපි පාවිච්චි කරන "br" ටැගය ලියන්නේ "<br />" කියලායි. ඇට්‍රිබියුට් අවශ්‍ය නෑ.

ඉන්න තැනට පහලින් රූලක් ඇඳ ගන්න, නැත්නම් හරස් අතට ඉරක් ඇඳ ගන්න නම් "hr" ටැගය පාවිච්චි කරන්නේ "< hr />" කියලා. පාවිච්චි කරන්න පුළුවන් ඇට්‍රිබියුට් තුනක් තියෙනවා. ඒ "color", "noshade" සහ "width" කියන ඒවායි. color එක ගැන නම් ඔයාල දැන් දන්නවා අගයන් දෙන හැටි. ඉරේ පාට තමයි මේකට දෙන අගයෙන් තීරනය වෙන්නේ. width එක වෙනුවට කැමති අගයක් දෙන්න පුළුවන්. ඒකෙන් තීරණය වෙන්නේ ඇඳෙන ඉරේ දිග කොච්චරද කියලා. අගයක් නුදුන්නොත් ගන්න පුළුවන් සම්පූර්ණ දිග ගන්නවා. අනික තමයි noshade ඇට්‍රිබියුට් එක. මේකෙන් කියන්නේ ඇඳෙන ඉර ත්‍රිමාන පෙනුක් තියෙන එකක්ද නැත්තම් ද්වීමාන පෙනුමක් තියෙන එකක්ද කියලා. එන අගය "noshade" විතරයි. මේ ඔක්කොම ලියන්නේ මෙන්න මෙහෙමයි.
<hr color="#003333" noshade="noshade" width="500" />

මීලඟ තනි ටැගය "img". අපේ වෙබ් පිටුවට පිංතූරයක් දා ගන්න ඕනෙ නම් මේ ටැගයයි පාවිච්චි කරන්නේ. ලියන්නේ <img /> කියල. මේකෙ නම් ඇට්‍රිබියුට් කීපයක්ම තියෙනවා පාවිච්චි කර ගන්න පුළුවන්. ඒ "src", "width", "height", "border" සහ "align" කියන ඒවා. මේ හැම ඇට්‍රිබියුට් එකම අවශ්‍ය නෑ "src" කියන එක හැර. ඒකෙන් තමා පෙන්විය යුතු පිංතූරය තෝරලා දෙන්නේ. මේවායේ තේරුම් පහල තියෙනවා.
src (source) - පිංතූරය තියෙන තැන සහ ඒ පිංතූර ෆයිල් එකට පාත් (path) එක.
width - පිංතූරයේ දිග.
height - පිංතූරයේ උස.
border - පිංතූරය වටේට බෝඩරයක් තියනවා නම් ඒ බෝඩරයේ මහත (0 සිට ඉහලට).
align - පිංතූරයත් එක්ක ඒ වටේ තියෙන වචන, ඡේද පිංතූරයට සමගාමිව්ව මොන අතටද වෙන්න ඕනෙ කියලා.

පිංතූරයේ දිග (width) විතරක් දීලා උස (height) අත හැරියොත්, දිගට (width) සාපේක්ශව ඇත්ත පිංතූරයේ උස (height) ඉබේම හැදෙනවා සමානුපාතිකව. ඒ වගේම, පිංතූරයේ උස (height) විතරක් දීලා දිග (width) අත හැරියොත්, උසට (height) සාපේක්ශව ඇත්ත පිංතූරයේ දිග (width) ඉබේම හැදෙනවා සමානුපාතිකව.

සම්පූර්ණ ටැගය ඔක්කොම ඇට්‍රිබියුට් එක්ක ලියවෙන්නේ මෙහෙම.
<img src="C:\ABC\mypic.jpg" align="left" border="2" height="200" width="200" />

This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image.

Saturday, May 22, 2010

PHP කරා යමු - 14 (HTML)

<big> නැත්තම් ලොකු කියන ටැග් යුගල යොදන්නේ වචනයක් තියෙන ගාණට වඩා යම් ප්‍රමාණයකින් ලොකු කරන්න.
<big> Hello Sri Lanka. </big>
පෙන්වන්නේ Hello Sri Lanka. විදියට.

<small> නැත්තම් පොඩි කියන ටැග් යුගල යොදන්නේ වචනයක් තියෙන ගාණට වඩා යම් ප්‍රමාණයකින් කුඩා කරන්න.
<small> Hello Sri Lanka. </small>
පෙන්වන්නේ Hello Sri Lanka. විදියට.

<u> නැත්තම් underline කියන ටැග් යුගල යොදන්නේ වචනයක් යටින් ඉරක් ඇඳ ගන්න. හරියට අපි ඉස්කෝලෙ යද්දි මාතෘකාව ලියල යටින් ඉරක් ගහනවා වගේ දෙයක් මේකෙන් වෙන්නේ. මේකත් යල් පැනපු (deprecated) ටැග් යුගලයක්. ඒ වෙනුවට අද කාලෙ පාවිච්චි වෙන්නේ අර කලින් වතාවක කියපු style කියන දේ.
<u> Hello Sri Lanka. </u>
පෙන්වන්නේ Hello Sri Lanka. විදියට.

<sub> නැත්තම් subscript කියන ටැග් යුගල යොදන්නේ වචනයක් තියෙන ගාණට වඩා කුඩා කරලා යම් ප්‍රමාණයකින් අනික් අකුරු වලට වඩා යටට කරලා, නැත්තම් පහලට කරලා පෙන්නන්න. අපි වතුරට විද්‍යාත්මක සංකේතනයෙන් ලියන්නේ H2O කියල නේ. අන්න ඒකේ දෙක කියන ඉලක්කම ලියන්නේ ඔය විදියට.
H<sub>2</sub>O
පෙන්වන්නේ H2O විදියට.

<sup> නැත්තම් superscript කියන ටැග් යුගල යොදන්නේ වචනයක් තියෙන ගාණට වඩා කුඩා කරලා යම් ප්‍රමාණයකින් අනික් අකුරු වලට වඩා උඩට කරලා, නැත්තම් ඉහලට කරලා පෙන්නන්න. අපි x වල වර්ගය ලියන්නේ අන්න ඒ විදිය පාවිච්චි කරලා. ඒ කියන්නේ ඒකේ වර්ගේ කියන්නෙ දෙක නේ. ඒ දෙකේ ඉලක්කම ලියන්නේ මේ ටැග් යුගල අතරේ දාලා.
x<sup>2</sup>
පෙන්වන්නේ x2 විදියට.

<strike> කියන ටැග් යුගල යොදන්නේ වචනයක් හරහා ඒ වචනේ කැපිලා යන්න ඉරක් ඇඳ ගන්නයි. මේකත් යල් පැනපු (deprecated) ටැග් යුගලයක්.
<strike> Hello Sri Lanka. </strike>
පෙන්වන්නේ Hello Sri Lanka. විදියට.

<center> කියන ටැග් යුගල යොදන්නේ අපි ලියන යමක් මැද්දට කරලා පෙන්නන්න. ඒ කීවේ center align කරන්න. මෙයත් යල් පැනපු කෙනෙක්.
<center> Hello Sri Lanka. </center>
පෙන්වන්නේ
Hello Sri Lanka.
විදියට.

ඔන්න එක දිගට අපි ටැග් ගොඩක් ඉගෙන ගත්තා. අකුරු හැඩ වැඩ කරන්න මේ වගේ ටැග්ස් පාවිච්චි කර ගන්න පුළුවන්. මම කියලා දීපු විදියට මේ හැම ටැග් එකක්ම හඳුන්වන්නේ HTML Elements විදියටයි. තමන් කැමති විදියට මේ ටැග්ස් body ටැග් දෙක ඇතුලේ ඔයාලට අත් හදා බලන්න පුළුවනි. body ටැග් යුගලෙන් වට වෙන ප්‍රදේශය හරියට half sheet එකක් කියලා හිතන්න. ඒකේ ඔයාලට කැමති දෙයක් අඳින්න, ලියන්න පුළුවන් වගේ කියල හිතන් මේ ටැග්ස් හිතේ හැටියට පාවිච්චි කර ගන්නකෝ.

PHP කරා යමු - 13 (HTML)

පාට එක්ක සෙල්ලම් එහෙම දාල ඉවර වෙනකොට ඔන්න මගේ යාලුවත් ගෙදරට ආව. මිනිහත් ඔය ඉන්නෙ දැන් පැත්තකට වෙලා වට පිට උඩ යට බල බල මම මීලඟට කරන්නෙ මොන පාඩමද කියල දැන ගන්න. අදත් තාම කරුවලයි මේ වැස්ස නිසා. කුණාටුවක්ද මන්ද මේ ලංකාවට ඇවිත් තියෙන්නේ. ප්‍රවෘත්ති බලන්නෙත් නැහැනෙ ඉතින්. කොම්පියුටරේ එල්ලිලාම ඉන්න නිසා ඒ ගැන කොහෙන් දැන ගන්නද. හැබැයි ඉතින් අන්තර්ජාලෙ දේවල් ගැන නම් දන්නවා. අපි කර ගෙන යන මේ HTML, PHP ගැන නම් ඉතින් දන්නවා.

අපි දැන් දන්නවා නෙ ටැග් එහෙම ලියන හැටි. ටැග් වල ඇට්‍රිබියුට් Attribute ලියන්නෙ කොහොමද කියලාත් දන්නවා. අහ! යාළුවන්ට කියන්න දෙයක් අමතක වුණා. ඒ HTML සම්බන්ධ දෙයක්. අපි මෙච්චර වෙලා ඉගෙන ගත්තු HTML කේත, ටැග් එහෙම ලියද්දි ලියන්නේ ඉංග්‍රීසියෙන් නේ. ඒත් අපි ලියන්න ඕනි ලොකු අකුරින්ද එහෙමත් නැත්තම් CAPITAL අකුරින්ද, පොඩි අකුරින්ද ඒ කියන්නේ SIMPLE අකුරින්ද කියලා විශේෂයක් නෑ. ඕන විදියකට simple හෝ capital යොදලා ලියන්න පුළුවන්. මේ දෙයට සින්හලෙන් කියන්නේ, case-insensitive කියලා. හැබැයි ඒ HTML විතරයි. අපි යන්නේ PHP ගාවට නේ. අන්න PHP නම් ලියන්නේ simple අකුරු වලින් විතරමයි. ඒ එයාගේ නීතියක්. රීතියක් හෙම නෙවෙයි. ඒ කියන්නේ එයා case-sensitive විදියට ලියැවෙන ක්‍රමලේඛ බාසාවක්.

අපි දැන් HTML වල තවත් අකුරු, වචන සම්බන්ධ ටැග් ටිකක් ඉගෙන ගමු. හැබැයි සාරාංශයක් විදියටයි කියලා දෙන්න හදන්නේ. මොකද අපි දැන් ඒවා ලියන හැටි දන්න නිසා. ඔයාලට කරලා බලන්න තමයි තියෙන්නේ. කිසිම අපහසුවක් නෑ. මොකද මේක building blocks වගේ ගොඩ නගමින් තමන් අතින් නිර්මාණය වෙන ව්‍යූහයක් නිසා. මේ වැහි දවසේ දැන් වේලාව උදේ 10ට විතර ඇති. මුලින් පාඩම් දෙක තුනම මම ලීවෙ සැරින් සැරේ කාලා බීලා එහෙම ආවට පස්සේ. හරි ඒවායෙන් වැඩක් නෑ. දැන් ආපහු ඉගෙන ගනිමුකෝ.

මුලින්ම ආයෙත් කියල දෙන්නේ යුගල ටැග් කීපයක්. මම කෙටියෙන් ඒ ගැන පිළිවෙලින් පහලට කියල දෙන්නම්, ටැග් එකේ නමයි, ඒකෙන් සිද්ධ වෙන වැඩේ, කොහොමද ලියන්නේ කියලයි, ඒකේ තියෙන පාවිච්චියට ගන්න පුළුවන් ඇට්‍රිබියුට් ගැනයි, පස්සේ ඕවයේ උදාහරනයකුයි, පේන විදියයි. එහෙම හොඳයි නේද? මොකද HTML කියන්නේ වෙබ් පිටු, අඩවි (web sites) වල පාදම නිසා ගොඩක් දේවල් ඉගෙන ගන්නත් තියෙන නිසාත්, යන්න දුර ගොඩක් තියෙන නිසාත් තමා. හැබැයි ගුරු මුශ්ටි තියෙන එකක් නෑ. දැන ගන්න දෙයක් තියෙනවා නම් කොමෙන්ට් එකක් දාලා දැන ගන්න. මම කියලා දෙන්නම් වැඩි විස්තරත් එක්ක.

දැන් ඉගෙන ගන්න හදන්නේ "p => <p> </p>" හෙවත් paragraph ටැග් එක ගැනයි. අදහස නම්, ඡේදය කියන එකයි. වෙබ් පිටු වල ඡේදයක් යොදා ගන්න ඕනෙ නම් අපි පාවිච්චි කරන්නේ මෙන්න මේ ටැග් යුගලයි. ආරම්භ කරා, ඇට්‍රිබියුට් තියේ නම් ඒවත් යොදලා, ආරම්භක ටැගය වහලා, අපේ වචන-වාක්‍ය ලියලා, වහන ටැග් එකෙන් අවසන් කරලයි ලියන්නේ. විශේෂ ලක්ශණයක් වෙන්නේ හෙඩිම (<h1> - heading) ටැග් වල වගේ පාවිච්චි කරද්දි උඩිනුයි යටිනු‍යි හිස් රූලකින් අනිත් දේවල් වලින් වෙන් වෙනවා. ඒ පැහැදිලිව පේන්න ඕනි නිසා අපේ ඡේදය අනික්වායෙන් වෙන් වෙලා. මේකේ තියෙන ප්‍රධාන ඇට්‍රිබියුට් එක "align". ඒ කියන්නේ ඡේදය කොයි අතටද පෙළ ගස්සන්න ඕනෙ කියලා. වමටද (left), දකුණටද (right) මැදැටද (center) නැත්තම් දෙපැත්තම එක ගානටද (justify) කියන ඒව තමා align එකට ලැබෙන අගයන්.

මේක කේතනය කරන්නේ පහල විදියට.
<p align="center">This is a sample paragraph.</p>

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

This is a sample paragraph. This is a sample paragraph. This is a sample paragraph. This is a sample paragraph.


Friday, May 21, 2010

PHP කරා යමු - 12 (HTML)

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

ඊට කලින් තව ඇට්‍රිබියුට් එකක් අමතක වුනා නෙ කියන්න. ඒ size ඇට්‍රිබියුට් එක. මේක
එන්න පුළුවන් අගයන් පරාසයක්ම තියෙනවා. හැම ඉලක්කමක්ම (හැම පූර්ණ සංඛ්‍යාක්ම) හරි යන්නෙත් නෑ. හැබැයි ලියන්නේ නම් පූර්ණ සංඛ්‍යාම තමා. +1, +2, +3, +4, +5, +6, -1, -2, -3, -4, -5, -6, 1, 2, 3, 4, 5, 6, 7 කියන අගයන් ටික තමා යොදා ගන්න පුළුවන් වෙන්නේ. ඔයින් එපිට අගයක් දැම්මට නම් ප්‍රතිපලයක් බලා ගන්න බැරි වෙයි. ඒක ලියන්නේ size="5" විදියටයි.

එක දිගට ටැග් ගොඩකුයි, ඇට්‍රිබියුට් ගැනයි, පාට සංයෝජනයයි ගැන කියල දීපු නිසා ඔයාලට පොඩි විවේකයක් දෙන්න හිතුවා ඔන්න. මහ ලොකු විවේකයක් නෙවෙයි. ඉගෙන ගත්තුවා ටික දැන් කරලා බලන්න යන්නේ. මුලින්ම අපි බලමු අන්තිමටම ඉවර කරපු font ටැග් එකේ ඇට්‍රිබියුට් වලට අගයන් දාලා සම්පූර්ණ කරන්නේ කොහොමද කියලා. සම්පූර්ණ කරපු font ටැග් යුගලේ පෙන්නන්නේ මෙන්න මෙහෙම. මම ඇතුලේ පොඩි වචන කීපයකුත් ලීවා.

<font face="Arial" color="red" size="5">Hello Sri Lanka</font>
බ්‍රවුසරයෙන් මේ ටික පෙනෙන්නේ මෙන්න මේ පහල තියෙන විදියට.
Hello Sri Lanka

<font face="Verdana" color="rgb(0,100,0)" size="-2" > Hello Sri Lanka </font>
බ්‍රවුසරයෙන් මේ ටික පෙනෙන්නේ මෙන්න මේ පහල තියෙන විදියට.

Hello Sri Lanka

දැන් අපි පිළිවෙලින් "b, strong, i, em" ටැග් වල හැසිරීමත් බලා ගනිමු.

"b" ටැග් එකේ පාවිච්චිය මෙහෙමයි...

<b>Hello Sri Lanka</b>

පෙනෙන්නේ, Hello Sri Lanka

"strong" ටැග් එකේ පාවිච්චිය මෙහෙමයි...
<strong>Hello Sri Lanka</strong>
පෙනෙන්නේ, Hello Sri Lanka

"i" ටැග් එකේ පාවිච්චිය මෙහෙමයි...
<i>Hello Sri Lanka</i>
පෙනෙන්නේ, Hello Sri Lanka

"em" ටැග් එකේ පාවිච්චිය මෙහෙමයි...
<em>Hello Sri Lanka</em>
පෙනෙන්නේ,
Hello Sri Lanka

විදියටයි...

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

                        
#000000
rgb(0,0,0)

                        
#FF0000
rgb(255,0,0)

                        
#00FF00
rgb(0,255,0)

                        
#0000FF
rgb(0,0,255)

                        
#FFFF00
rgb(255,255,0)

                        
#00FFFF
rgb(0,255,255)

                        
#FF00FF
rgb(255,0,255)

                        
#C0C0C0
rgb(192,192,192)

                        
#FFFFFF
rgb(255,255,255)

PHP කරා යමු - 11 (HTML)

රතු, කොළ, නිල් පාට තුන එකතු කරලායි සාමාන්‍යයෙන් ඕනෙම වර්ණයක් හැදෙන්නේ. වර්ණ සම්මිශ්‍රණයේදී පාවිච්චි වෙන ප්‍රධාන වර්ණ තුන තමයි මේ වර්ණ තුන. කොම්පියුටරේ මේ පාට තුනෙන් හැදෙන්න පුළුවන් එකිනෙකට වෙනස් පාට ප්‍රමාණය මිලියන ගණනක් විතර වෙනවා. ඒ, ප්‍රධාන පාටකින් සිද්ධ වෙන වර්ණ විපර්යාසය කොටස් 256 දෙසිය පනස් හයකටකට බෙදලා. පාට තුනක්ම තියෙනවා නේ. එක පාටක් විතරක් ගත්තොත් ඒ පාට, අඳුරුම අවස්ථාවේ ඉඳලා එළිය වැඩිම අවස්ථාව වෙනකන් කොටස් වලට බෙදල නිසා තමයි වර්ණ 256ක් ලබා ගන්න පුළුවන් වෙන්නේ. රතු පාටින් 256 ක් ගත්තොත් අනික් පාට දෙකෙනුත් 256 ගානෙ ගන්න පුළුවන් අඳුරු අවස්ථාවේ ඉඳන් එළියම අවස්ථාව වෙනකම්. මේ 256 යේ හැම අවස්ථාවක් එක්කම වර්ණ තුනම එකතු වෙද්දී, ඒ කියන්නේ රතු, කොළ, නිල් පාට තුනෙන් හදන්න පුළුවන් වර්ණ ප්‍රමාණය 256 x 256 x 256 විදියට 16,777,216 ප්‍රමාණයක් වෙනවා. ඒ කියන්නේ මිලියන දහසයකටත් වැඩියි. පුදුමයි නේද එච්චර වර්ණ ප්‍රමාණයක් අපිටත් දෙන්න පුළුවන් කීවම. හැබැයි අර මම කලින් කීව වර්ණ දහසයත් මේ පාට මිලියන දහසයෙන් හොයා ගන්න පුළුවන්. වෙනස තියෙන්නේ ඒවට HTML අඳුරන නම් දහසයක් තිබීම. අර මිලියන 16 ට නම් දෙන්න පුළුවන් කාටද නේද?

256 කියන්නේ දහසයෙන් බෙදෙන සංඛ්‍යාවක් නේ. අන්න ඒ නිසා මේ වර්ණ තුනේම එන 256 කොටස් 16 පාදයෙන් ලියන්න පුළුවන්. මොකද 256 කියන්නේ 16 x 16 නිසා. මේ වර්ණ 256 හැදෙන්නේ 1 ඉඳන් 256 වෙනකම් නම් නෙවෙයි. ඒ, 0 ඉඳන් 255 වෙනකම්. 255 කියන්නේ උපරිම වර්ණ අවස්ථාවයි. 0 කියන්නේ අඩුම අවස්ථාවයි. රතු ගත්තොත් 255 වන අවස්ථාව කියන්නේ තද රතු. 0 කියන්නේ කළු. අනික් පාට දෙකටත් එහෙමයි. නිල් වල 255 කියන්නේ තද නිල් වගේම, කොළ වල 255 කියන්නේ තද කොළ. හරියටම කීවොත් 255 අවස්ථාවෙන් පැහැදිලි වෙන්නේ ඇස් කඩා ගෙන යන නියම වර්ණය කියලයි.


මේ වගේ අපිට font ටැග් එකේ color කියන ඇට්‍රිබියුට් එකට දාන්න පුළුවන් පාට ගණන මිලියන දහසයක් වෙනවා. ඒත් ලියන්නේ කොහොමද ඒ පාට? ඒ මෙන්න මෙහෙමයි. ක්‍රම දෙකක් තියෙනවා. දහයේ පාදයෙන් ලියන ක්‍රමේ වගේම දහසයේ පාදයෙන් ලියන ක්‍රමේ. හැමෝම ගණන් විශයයක් විදියට කරලා තියෙන නිසා මේ ගැන දැන ගන්න ඕනෙ. දහසයේ පාදයෙන් ලියන සංඛ්‍යා හඳුන්වන්නේ hexadecimal (හෙක්සා ඩෙසිමල්) කියලා.

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

දහයේ පාදයෙන් නම්, rgb(රතු පරාසය, කොළ පරාසය, නිල් පරාසය ) විදියටයි.
rgb(0-255,0-255,0-255)
විදියට.

උදාහරණයක් කීවොත්, රතු පාට ලියන්නේ මෙහෙම rgb(255,0,0).
ඒ වෙලාවෙදී රතු වල වර්ණ පරාසයේ උපරිම අවස්ථාවේ තියෙද්දි අනික් පාට දෙකම අවම අවස්ථාවේ තියෙන්නේ. හරියට රතු බල්බය දැල්වී තියෙද්දී නිල් හා කොළ පාට බල්බ නිවිල තියෙන අවස්ථාව කීවොත් නිවැරදියි.

rgb කියන අකුරු තුන ලියලා තියෙන පිළිවෙළටම වරහන් ඇතුලේ කොමා වලින් වෙන් කරල තියෙන්නේ ඒ පාට තුනේ වර්ණ ප්‍රභලතා ව
අගයන් ඒ පිළිවෙලටම. rgb කියන්නේ HTML වල එන වචනයක්. ඒක තමන්ට කැමති කැමති විදියට අකුරු තුන මාරු කරල bgr, gbr, rbg කියල එහෙම ලීවොත් වැඩේ දෙල් වෙනව. ඒ කීවෙ කිසි වැඩක් වෙන්නේ නෑ.
ඒ නිසා rgb(red range,green range,blue range) කියලම තියෙන්න ඕනි.

අනික් විදිය දහසයේ පාදයෙන් ලිවීම. දහසයේ පාදයෙන් ලියන හැටි ඉගෙන ගන්න. එතකොට 0 ඉඳන් 255 වෙනකම් ලියන්නේ 00 සිට FF දක්වා. ඒ ලියන්නේ rgb පිළිවෙලටම තමා. ඒත් rgb නොලියා, වරහන් පාවිච්චි නොකර. ඒ ලියන්නේ මෙන්න මෙහෙම. අපි කලින් ගත්තු රතු පාටම ලියමු. #FF0000 විදියට. # ලකුණෙන් පටන් අරන් රතු පාටේ උපරිම අගය 255, FF කියලාත්, අනික් පාට දෙකේ වර්ණ අවම තත්වයේ තියෙන නිසා 00 විදියට පාට දෙක වෙනුවෙන් දෙපාරක් ලියනවා. ඔය ඔක්කොම එකට ගත්ත
ලියවෙන්නේ රතු, කොළ, නිල් අනුපිළිවෙලට #FF0000 කියලා. ඔය දෙවිදියෙන්මත්, නම් වශයෙන් පාට වල නම් යොදලාත් font ටැග් එකේ color ඇට්‍රිබියුට් එකට අගයන් දෙන්න පුළුවන් උදෘත පාඨ අතරේ.

ඔන්න අපි වර්ණ සංයෝජන පාඩමකුත් කරා ඒ අස්සේ.

PHP කරා යමු - 10 (HTML)

font ටැග් එක ගත්තම ඒකේ අපි කියපු ඇට්‍රිබියුට් ප්‍රධාන ඒවා තුනක් තියෙනවා. ඒ තමයි "color, face, size" කියන තුන. ගුණාංගයේ නමින්ම තේරුම් ගන්න පුලුවන් නේ ඒකේ හැසිරීම. color කියන්නේ අකුරේ පාට නැත්තම් වර්ණය. face කියන්නේ ලියන්න පාවිච්චි කරන්නේ මොන අකුරු ජාතියද, ජාතිද කියලයි. size කියන්නේ අකුරේ ප්‍රමාණය ලොකුද පොඩිද කියලා දෙන ගානට. උප ගුණාංග තුනේ තේරුම් නම් දැන ගත්තා. ඒත් තාම දන්නේ නැහැ නේ පාවිච්චි කරන්නේ කොහොමද කියලා. මෙන්න මෙහෙමයි පාවිච්චි කරන්නේ.

සාමාන්‍යයෙන් ඇට්‍රිබියුට් එකක් හඳුන්වලා දෙන්නේ ආරම්භක ටැග් එක ඇතුලේ. ඇත්තෙන්ම ඒකෙ ඇතුලෙදිම විතරයි හඳුන්වලා දෙන්න පුළුවන්. අනික් දේ තමයි, එක ටැග් එකකදි එකම ඇට්‍රිබියුට් එක දෙවතාවක් හෝ ඊට වැඩි වාර ගණනක් පාවිච්චි කරන්න බෑ. එහෙම කරොත් ඒක වැරදියි. ඒකෙන් කියවෙන්නේ එකම ටැග් ජාතිය දෙපාරක් අපේ වෙබ් පිටුවේ යෙදුනොත් ඒ දෙකේම එකම ඇට්‍රිබියුට් එක එකම වතාවයි තියෙන්න උළුවන් කියන එක නෙවෙයි. වරදවා තේරුම් ගන්න එපා. මම කීවේ එක වතාවකදි පටන් අරන් ඉවර කරන ටැග් යුගලයකදි එකම ඇට්‍රිබියුට් එක එක වතාවයි පාවිච්චි කරන්න පුළුවන් කියලා. පහල උදහරණේ බලන්නකෝ. එතකොට තේරෙයි.

<font attribute1 attribute1 attribute2>hello</font>
මේක නම් වැරදියි. පාවිච්චි කරාට වරදක් වෙන්නේ නෑ. ඒත් රීති කැඩිමක් වෙනවා. නීති රීති නොකඩාම ඉස්සරහට ගියොත් නේද හොඳ? වැරදියට ඉගෙන ගන්නාවාට වඩා ඒක හොඳයි නේද
?

<font attribute1>hello</font>
<font attribute1>world</font>
මේ විදියකට දෙපාරකට යෙදෙන font ටැග් යුගල දෙකේ එකම ඇට්‍රිබියුට් එක පාවිච්චි කරන්න පුළුවන්. මොකද දෙන්න පෙන්නන්නේ දෙවිදියක වචන සමූහයක් නේ.

මම කිව්ව නේ font ටැග් එකට ඇට්‍රිබියුට් තුනක් තියෙන බව. ඒ තුන පාවිච්චි කරන්නෙ කොහොමද? ඇත්තෙන්ම ඕනෙම ටැග් එකකදි ඇට්‍රිබියුට් එකකට වඩා තියෙනවා නම් ඒවා පාවිච්චි කරන්නේ හිස් තැනක් (1 or more spaces) ඇට්‍රිබියුට් අතරේ තියලා. attribute1 attribute2 විදියට.
font ටැග් එකෙදි නම් වෙන්නේ color face size කියලා ලියන එක. මෙන්න මේ විදියටයි සම්පූර්ණ කරාම වෙන්නේ "<font color face size >hello</font>"

ඒත් නිකන්ම ඇට්‍රිබියුට් ටික පේලියට ලියලා විතරයි කියලා ඔයාලට තේරුණේ නැත්ද? ඔව්. මේ ලියලා තියෙන්නේ එහෙමයි. දැන් අපි ඇට්‍රිබියුට් ටික ලීව. දැන් ඒවට අගයන් දෙන්න ඕනෙ. ඒවා දෙන්නෙ ඒ එක එකක් ඇට්‍රිබියුට් අගට සමාන කිරීමේ "=" ලකුණක් දාල. අපි අදාල අගය දෙන්න ඕනි උදෘත පාඨ අතරේ. ඒ කිව්වේ double quotations අතරේ. face
ඇට්‍රිබියුට් එක දෙන අගයන් නම් අපි ලියන්නේ දැනට අපේ කොම්පියුටරේ තියෙන fonts වල නම් දීලා. ඒ නම් බලා ගන්න පුළුවන් අපිට Microsoft Word වගේ සොෆ්ට්වෙයා එකක් දිග ඇරියම පෙනෙන font ලයිස්තුවෙන්. ඉන් ඕනෙ නමක් තෝරලා face ඇට්‍රිබියුට් එකේ අගයට දෙන්න පුළුවන්. "Arial, Impact, Times New Roman, Courier, Verdana, Tahoma" වගේ ඒවා දෙන්න පුළුවන්.

color එකට සම්මත වර්ණ
දහසයක් තියෙනවා නම් වලින්ම. ඒ නමක් දෙන්න පුළුවන්. "red, yellow, cyan, black, white, green, blue, purple, pink,..." වගේ හරියටම ඔක්කොම ටික මතක නෑ යාළුවනේ. මෙතනින් අපිට දෙන්න පුළුවන් වර්ණ ජාති දහසයක් විතරයි නේ. ඒත් වර්ණ මිලියන ගණනක් වුණත් දෙන්න පුළුවන් විදියක් තියෙනවා. ඒ දහසයේ පාදයෙන් රතු, කොළ, නිල් කියන වර්ණ වල සම්මිශ්‍රණයෙන්. ටිකක් බරපතලයි වගේ නෙ? ගණන් කාරයින්ට නම් ඕක තේරුම් ගන්න පුළුවන් වෙයි. ඒ ගැනත් අපි හොයලා බලමුකෝ එහෙනම්...

Thursday, May 20, 2010

PHP කරා යමු - 9 (HTML)

වතුර උගුරක් එහෙම බීලා පොඩිත්තක් වටේ පිටේ රවුමක් දාල එහෙම ඔන්න අනික් ටැග් මහත්තුරු ගැන විස්තරේ කියන්න මම ආව මේ පැත්තේ ආයෙමත්. කට්ටිය නිදි නෑ නේ?

ඊට පස්සේ බලන්න ඕනි "i" ටැග් එක. මේකෙන් කරන්නේ අකුරු ඇද කරන එක. "i" නොහොත් ඉටැලික් (italic) කිරීම ඔයාලට Microsoft Word වල හමු වෙලා ඇති. ලියන්නේ "<i>...</i>" විදියට. මේ ටැග් එකත් අකුරු හැඩකාරක ටැග් එකක්. ඇද වීමෙන් සිද්ධ වෙන්නේ අකුරු වල වෙනස් පෙනුමක් ගෙන දෙන එක නේ. අන්න ඒ නිසා මේ ටැග් යුගලෙ අතරේ දමන වචන දකුණු අත පැත්තට ඇල වෙලායි පෙනෙන්නේ.

මට ඔයාලට කියන්න තව දෙයක් අමතක වුණා. ඒක හරිම විශේෂ දෙයක්. අපි මේ කතා කර ගෙන යන HTML ටැග් වලට
HTML වලින් හඳුන්වන්නේ "එලිමන්ට්ස්" කියලා. සිංහලෙන් කීවොත් "HTML elements" කියලා. HTML පිටුවක් හැදිල තියෙන්නේ මේ elements වලින්. හරියට ගඩොල් (building blocks) වලින් ගෙයක් හැදිලා තියෙනවා වගේ.

"i" ටැග් එකට සමාන හැසිරීමක් තියෙන තවත් ටැග් එකක් තියෙනවා. ඒ "em" කියන ටැග් එකයි. මෙයත් අකුරු ඇල කරලා පෙන්නන්නේ. "em" කියන්නේ "emphasize" එහෙමත් නැත්තම් කැපිල පෙන්නන එක කියන්නත් පුළුවන්.
"<em>...</em>" විදියට ලියන මේක, වැඩ කරන්නෙත් කලින් එක වගේමයි. ඔයාලා ලියලා බලන්නකෝ බොරුද කියලා. මං පස්සේ මේ ටැග් ඔක්කොම ටික එකට සාරාංශයක් විදියට පෙන්නන්නම්කෝ ලියලා. එතකං තනියම කරලා උත්සාහවත් අරන් තියන්නකෝ. මතකයි නෙ? මේ ඔක්කොම සෙල්ලම් "body" ටැග් යුගල අතරේ...

ඊට පස්සේ ඔන්න වේදිකාවට එනවා ටිකක් රජ වැඩ කාරයෙක්. එයා තමයි ෆොන්ට් "font" ටැග් යුගලෙ. මෙයා නම් නිකන්ම නිකන් ටැග් එකක් විතරයි ඔය විදියට වචනෙ විතරක් පාවිච්චි කරොත් නම්. කිසිම වැඩැක් ගන්න ලැබෙන්නේ නම් නෑ. එයාගෙන් හැබැයි ඔය සෙල්ලම් ඔක්කොම වගේ දා ගන්න පුළුවන් අකුරු හැඩ වැඩ කරද්දී. ඒ කොහොමද ඒ? තනි ටැග් එකෙන් කලින් කරපු ඔක්කොම ජාති කර ගන්න පුළුවන්? හරිම පුදුමයි. ඔයාලට මෙහෙම හිතුනේ නැද්ද? අපි කලින් නම් එක එක පෙනුම අකුරු වලට දී ගන්න වෙන වෙනම ඒ ඒ වැඩේට විවිධ ටැග් පාවිච්චි කරා නෙ. ඒත් මේ ටැග් එක එහෙම නෑ. වෙනස්. මෙයාගෙන් ඒ වැඩ ටික ගන්නේ අපි HTML elements වල තියෙන ඇට්‍රිබියුට් (Attribute) කියන ගුණාංගයෙන්. ඇට්‍රිබියුට් එකක් කියන්නේ උප ගුණාංගයක් කීවත් නිවැරදියි. අපේ ටැග් එකෙන් ගන්න පුළුවන් අමතර වැඩ මේ උප ගුණාංගයකින් ගන්න පුළුවන්. ඕනෙම HTML ටැග් එකක මේ වගේ උප ගුණාංග තියෙනවා, අපි මේ වෙනකම් කතා නොකරාට. ඒ මෙන්න මේ තැන එනකම්. මෙතනින් එහාට අපි ඇට්‍රිබියුට් (Attributes) නැත්තම් උප ගුණාංග ගැන කතා කරයි ගොඩක් වෙලා වලට.

ඒ ඒ ටැග් වල ක්‍රියාකාරීත්වය අනුව ටැග් එකෙන් ටැග් එකට තියෙන ඇට්‍රිබියුට්ස් වෙනස් වෙනවා. body ටැග් එකේ තියෙන දේවල් නෙවෙයි වෙන්න පුළුවන් font ටැග් එකේ තියෙන්නේ. අන්න ඒ වගේ. බල්ලෙක්ට තියෙන ලක්ෂණ නෙවෙයි මිනිහෙක්ට තියෙන්නේ. ඇහැ, කන, මූන, නාහෙ, දෑත්, දෙපා මේ දෙගොල්ලන්ටම තිබුණත් නැට්ටක් මිනිසුන්ට නෑ බල්ලන්ට වගේ. ඒ වගේම බලු මවිල් නෑ මිනිසුන්ට. ඒ ඒ අංගෝපාංග වල හැඩය වෙනස්, දෙගොල්ලො අතරෙම. ඔන්න ඔය වෙනස් කම එලියට ගන්න එක තමයි ඇට්‍රිබියුට් එකකින් කරන කාර්ය භාරය. එකම ටැග් එකක උප ගුණාංග කීපයක් තියෙන එකින් අපිට පුළුවන් වෙනවා එක ටැග් එකෙන් වැඩ ගොඩක් කර ගන්න. හැබැයි දැන් කාලෙ තියෙන හොඳම නිරූපණ ශිල්පියා ඔය අනම් මනම් ටැග් නෙවෙයි, "style" ටැග් එක. නමින්ම තේරෙනවනෙ මිනිහගේ වැඩ. අපි එයා ගැන පස්සේ කතා කරමු; දැන ගමු. එයාව අපිට ඕනෙ වෙන්නෙ තව සැලකිය යුතු දුරක් ගියාමයි.

PHP කරා යමු - 8 (HTML)

හෙඩිං පාවිච්චි කරන හැටිත් ඔන්න දැන් දැන ගත්තා ඔයාල. තමන්ට කැමති විදියකින් මොනවා හරි ලියලා බලලා මේ ටැග් කීපය එහෙට මෙහෙට කොරලා හදා ගන්න එක ඔයාලගේ අතෙයි තියෙන්නෙ. හ්ම්ම්...

හරි මම කිවුවා නේද හෙඩිං (heading) ටැග් වල ස්වරූපය වෙනත් ටැග් කීපයක් උපයෝගී කර ගෙන කර ගන්න පුළුවන් කියලා. අපි දැන් බලන්න යන්නේ ඒ මොන ටැග්ද කියලා. පිළිවෙළට කියාගෙන ගියොත්, "b, i, strong, font" කියන ටැග් තමයි ඔය වැඩේ කරන්න විවිධ අවස්ථා වලදී උපකාර වෙන්නේ. සුපුරුදු විදියටම මේ ටැගුත් ද්විත්ව ටැග්. ඒ කීවෙ යුගල ටැග්. පටන් අරගෙන ඊට පස්සේ මොනා හරි ලියලා වහල දාන්න ඕනෙ. සමහර වෙලාවට නෝට්පෑඩ් වගේ පහසුකම් අඩු සොෆ්ට්වෙයා එකකදි නම් ආරම්භ කරන ටැග් වහන්න ගොඩක් දෙනාට අමතක වෙනවා. ඒකට කරන්න තියෙන හොඳම වැඩේ තමයි, ආරම්භ කල සැනින්ම ටැග් එක වහලා දාන එක. ඉන් පස්සේ ඒ ටැග් යුගල අතරේ තමන් කැමති දේ ලියන එක. මෙහෙම කරද්දී කිසිම ටැග් එකක් අතර මැද්දෙන් නොවැහී ගිහින් අමතක වෙලා යන්නේ නෑ. අත්දැකීමෙන්මයි කියන්නේ. Adobe Dreamweaver වගේ මෘදුකාංගයකදී නම් මේ වැඩේ ලේසියෙන්ම කර ගන්න පුළුවන් යතුරු පුවරුවේ එක යතුරක් එබීමෙන්ම. අනික, නෝට්පෑඩ් වලදි අපි ලියන කේත කාට හරි කියවන්න, බලන්න පුළුවන්, ලේසි විදියකට, පිළිවෙලට හැඩ ගස්සවා ගන්නත් අමාරුයි නේ. ඔය දේවල් Adobe Dreamweaver වලින් ලස්සනට කර ගන්න පුළුවන්. ඒකෙන් වෙබ් පිටුවට නම් බලපෑමක් වෙන්නෙ නෑ. හැබැයි කියවද්දි වගේම වැරදි හොයද්දී, HTML ටැග් අඩුපාඩු හොයද්දී ලේසි වෙනවා අපිට.

හරි. කලින් කීව ටැග් ලැයිස්තුව ගැන අපි දැන් හොයලා බලමු කොහොමද වැඩ කරන්නේ කියලා. මුලින්ම "b" ටැග් එක. "b" කියන්නේ බෝල්ඩ් (bold). නැත්තම් තද අකුරු කියන එකයි. අකුරක් බෝල්ඩ් කරනවා කියන්නේ තද කරලා, මහත වැඩි කරලා ලියන එකට කියලා Microsoft Word වගේ මෘදුකාංග පාවිච්චි කරන හැමෝම දන්නවා නේ? ඔය දේම කර ගන්න පුළුවන් තවත් ටැග් එකක් තමා "strong" කියන්නේ. මේකෙ අදහස ශක්තිමත් කියන එකම නෙවෙයි. හොඳට ඇහැට කනට පේන විදියට තිබීම වගේ අදහසක්, නැත්තම් බැලූ බැල්මට ඇහැට ලොකුවට තදට පේන වගේ අදහසකුයි මේ ටැග් එකෙන් දෙන්නේ. "b" හා "strong" ටැග් දෙකෙන්ම සිද්ධ වෙන්නේ එකම දේ. ඒ මොකටද දෙකක්? එකක් තිබුණ නම් හොඳයි නෙ?

ඒකට හේතුව මේකයි. "b" කියන ටැග් එක දැන් ගොඩාක් වයසයි. ඒ මොකද වෙබ් පිටු ආරම්භ වුණු කාලෙ ඉඳලම බෝල්ඩ් කරන්න තියෙන්නේ ඒ ටැග් එක. ඉතින් ඔය වගේ නාකි ටැග් පාවිච්චිය අඩු කරන්නේ අපේ වෙබ් බ්‍රවුසර හදන ආයතනමයි. එයාල තීරණය කරනවා දැන් ඔය පරණ තාලෙ ටැග් ඕනෙ නෑ අපි අලුත් ටැග් එකක් ඕකට හඳුන්වලා දෙමුය කියලා. ඔන්න ඔය නිසා මුළු ලෝකෙම පිළිගත් සම්මුතියකට එළඹිලා ඔහොම HTML ටැග් එකක් එලියට දානවා. ඒකට කියන්නේ "W3C" කියලා. එහෙමත් නැත්තම් World Wide Web Consortium නොහොත් "ලෝක ව්‍යාප්ත වෙබ් සම්මුතිය" විදියට දිග හැරලා කියන්නත් පුළුවන්. "b" වගේ ටැග් හඳුන්වන්නේ "deprecated" නොහොත් යල් පැනපු ටැග් හැටියටයි. ඒවා සමහරක් බ්‍රවුසර වල නිවැරදි ආකාරයෙන් වැඩ නොකලොත්, ඒකට හේතුව ඒ බ්‍රවුසරය අර ටැග් එක යල් පැන්න එකක් කියලා හිතලා දත්ත නොකවා තිබීමයි. නමුත් අදටත් ගොඩාක් ප්‍රසිද්ධ බ්‍රවුසර වල නවමු සංස්කරණයන් වල පවා මේ ටැග් පිළිබඳ විස්තර කවලා තියෙනවා ඒ ඒ බ්‍රවුසර අභ්‍යන්තරයේ.

මේ ටැග් වර්ග දෙකම පාවිච්චි කරන්නේ කලින් වගේමයි. බෝල්ඩ් ටැග් එක "<b>..</b>" වගේම අනික "<strong>..</strong>" කියලා. ඔයාලාත් අලුතින් නෝට්පෑඩ් පිටුවක් අරන් මුල ඉඳන් HTML ටැග් ටික ලියන් ඇවිත් "body" ටැග් යුගලෙ ඇතුලේ මේවා ලියලා බලන්නකෝ මොනාද වෙන්නේ කියලා. හැබැයි මේවා නම් ලිව්වාට පස්සේ අලුත් රූලක් පහලට යන්නේ නෑ. එක දිගට ලියාගෙන යන පරිච්ඡේදයක පවා අතර මැද වචන, අකුරු, පේලි වලට රූල් පැනීමකින් තොරව මේ අකුරු තද කරලා පෙන්නන මෝස්තරය යොදා ගන්න පුළුවන්.

Wednesday, May 19, 2010

PHP කරා යමු - 7 (HTML)

මූණ හෝදන් කාලා බීලා තමයි මම මේ වතාවෙදි ඔයාලව ම්බ වෙන්න ආවේ. තව ටිකකින් අර මනුස්සයත් ඒවි මේ පැත්තේ. අපි කතා කර කර හිටියේ හෙඩිම ටැග් ගැන නේද? හරි ඔන්න ඉතුරු ටිකත් අහ ගන්නකෝ.

හෙඩිම ටැග් වර්ග හයක් තියෙනවා. ඒ ප්‍රමාණය අනුව එකේ ඉඳන් හය වෙනකම්. 'එක' කියන්නේ ලොකුම ප්‍රමාණය වෙද්දී 'හය'ට ලැබෙන්නේ පොඩිම ප්‍රමාණය. මේ ටැග් එක නම් හරිම ලේසියි ලියන්න. "h1, h2, h3, h4, h5, h6" කියලායි ලියන්නේ ඒ ඒ ප්‍රමාණයේ ටැග. සුපුරුදු විදියටම ලියන්නේ <h1> හා </h1> කියලා <h6> හා </h6> දක්වාම. දැන් ඉතින් දන්නවානේ ලියන හැටි? මම නම් ඔන්න උදව් කරන්නේ නෑ ලියන හැටි කියලා දෙන්න. උත්සාහයක් ගන්නකෝ... හා හා දැන් ඉතින් මූනවල් ඇඹුල් කර ගන්න එපා. මෙන්න මෙහෙමයි ලියන්නේ. අපි ඔක්කොම ටැග් ටික ලියමු. එතකොට ඉක්මණින් ඉගෙන ගන්න පුළුවන් නේ. ඔන්න එහෙනම් ලියනවා. මම body ටැග් එකත් එක්කම ලියන්නම්. අනික් ඉතුරු ටැග් නොලියා ඉන්නම්. ඒවා කොහොමත් තියෙනවා නෙ.

<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>

දැන් මේක පෙන්නන්නේ මෙන්න මේ විදියටයි බ්‍රවුසරයෙන් බැලුවාම. හෝව්... හෝව්... පොඩ්ඩක් ඉන්ටෝ... කලින් එකේම සේව් කරන්න එපා. මේක "lesson2.html" කියලා save කරන්න මතක තියා ගන්න. මොකද මේක තමයි දෙවෙනි පාඩම. පහලින් තියෙන්නේ මේක ඇත්තට බ්‍රවුසරයෙන් පෙන්නන්න විදිය. Save කරලා බ්‍රවුසරයෙන් විවෘත කරලා බලන්නකෝ.

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6

මේ ටැග් වල අන්තර්ගතය එක එක බ්‍රවුසරයේ වෙනස් ප්‍රමාණ වලින් පෙන්නන්න පුළුවන්. ඒ එම බ්‍රවුසර හදපු සමාගම් වල කැමැත්ත අනුවයි. ඒකට නම් අපිට කරන්න දෙයක් ඇත්තෙම නෑ. හැබැයි, එකේ ඉඳන් හ දක්වා එද්දී ප්‍රමාණය වැඩි එකේ ඉඳන් අඩු එක දක්වා එනවා මොන බ්‍රවුසරේ වුනත්. මේ ටැග් වලින් සිද්ධ වෙන විශේෂ කාරණා කීපයක්ම තියෙනවා. එකක් තමයි අකුරු ලොකු වෙන එක. තව ඒක් තමයි අකුරු තද පාටක් වෙන එක. අනික තමයි, පාවිච්චි කරාම අනිවායෙන් තව රූලක් යටට පනින එක. ඒ කිව්වේ මේ ටැග් එක කොහේ හරි පාවිච්චි කරොත් ඒත් එක්කම වෙන ටැග් එකකින් මොනා හරි ලියුවොත්, ඒකේ අන්තර්ගතය අපිට පෙන්නන්නේ අපේ හෙඩිම වලට යටින් අනිවාර්යෙන්ම. ඔන්න ඕවා තමයි විශේෂ ලක්ෂණ මේ හෙඩිම ටැග් වල.

හරි අපි දැන් කිසිම ටැග් එකක් ඇතුලේ නොදා body ටැග් එක ඇතුලේම මොනා හරි යිප් (type) කරලා බලමු. එතකොටත් බ්‍රවුසරයේ අපිට අපි ලියපු දේ දකින්න පුළුවන්. හැබැයි පොඩියට. අපි විශේෂයෙන් කීවේ නෑ මේ ප්‍රමාණයෙන් පෙන්නන්නය කියලා. හැබැයි ඒ අකුරු වල ප්‍රමාණය අපිට පෙන්නන්නේ, ඒ බ්‍රවුසරයේ settings වල දාල තියෙන සාමාන්‍ය අකුරු ප්‍රමාණයට (default font size) අනුවයි. මේ ඔක්කොම ලක්ෂණ ටික අපිට වෙන වෙනම තියෙන ටැග් කීපයකින් මේ හෙඩිම ටැග පාවිච්චි නොකර හදා ගන්න පුළුවන්. මේ බ්ලොග් එකේදී හෙඩිම ටැග් පෙන්නද්දී පොඩි පොඩි අවුල් යන්න පුළුවන්. ඒ නිසා ඔයාලා ලියපු කේත ටික බ්‍රවුසරයේ පෙන්නන විදිය ගැන සැලකිලිමත් වෙන්න මේ තියෙන හෙඩිම ටැග් පෙන්නන විදිය ගැන නොතකා.

PHP කරා යමු - 6 (HTML)

ශෝක් නින්දකට පස්සේ ඔන්න අදත් ඇහැරුණා. දැන් නම් අටට විතර ඇති. මේ දවස් වල සීතලයි වැස්සයි නිසා හරිම කම්මලියි. ඒකයි මෙච්චර වෙලා නින්ද ගියේ. එහෙම වුණාය කියලා පාඩම නතර කරන්න පුළුවන් යැ නේද? ලැප්ටොප් එකත් ඕන් කරලා තිබුණ නිසා බැටරිය බැහැලා එයත් දොයි. ඔන්න මගේ මිත්‍රයාත් මට රිංග් කරනවා ඇහැරෙන්නය කියලා. තව ටිකකින් මිනිහත් මෙහෙට ගොඩ වෙයි. එයා එනකන් ඉන්න බෑ. එතකන් අපි පාඩම කරමුකෝ.

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

අපි ඊයේ අපේ පිටුව සේව් කර ගත්ත ගත්තමයි එතනින් එහාට මුකුත් කියන්න බැරි වුණා නෙ මට නිදිමත හැදිලා. දැන් ඔයාල ඒ වෙබ් පිටුව සේව්කර ගත්තු තැනට ආයෙත් යන්න. ඔයාලට පෙනෙයි ඒ පිටුවේ අයිකොන් එක ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් (internet explorer) වල හරි ෆයර්ෆොක්ස් (firefox) වල හරි අයිකොනයක් අරන් තියෙනවා. ඒ කියන්නේ අපි සේව් කරලා තියෙන්නේ වෙබ් පිටුවක් විදියට කියලායි. දැන් ඒ පිටුව උඩ ඩබල් ක්ලික් කරලා දැනට ඔයාලගේ කොම්පියුටරේ තියෙන වෙබ් බ්‍රවුසරයකින් විවෘත කර ගන්න. හ්ම්ම්... වුණු මහන්සියේ කිසිම ප්‍රතිපලයක් නම් දකින්න නෑ වගේ කියලා ඔයාලට හිතෙයි. ඔයාලට සුදු පාට හිස් පසුබිමක් විතරක් පෙනෙන්න ඇති. අනිවාර්යෙන්ම එහෙම තමයි වෙන්න ඕනෙ. මොකද අපි වෙබ් පිටුවේ මුකුත්ම ලියුවේ නැහැනේ. හෝව්... හෝව්... පොඩ්ඩක් කල්පනා කරන්න මුකුත්ම ලියුවේ නැද්ද කියලා. ඔව්... අපි ලියුවා. ඒ HTML කේත විතරයි. ඒත් අපි පෙන්වන්න ඕනෙ කිසි දෙයක් ලියුවේ නැහැ නේ. අපි තාම හැදුවේ පිටුවේ ව්‍යූහය විතරයි. මතකයි නේද මම කියුවා මොන ටැග් අතරේ මොනා ලියුවත් වැඩක් නෑ "body" ටැග් එක ඇතුලේ ලියවෙන දෙයක් ලියුවොත් විතරයි පෙන්නන්නේ බ්‍රවුසරයෙන්.

Internet Explorer වල නම් මෙනූ බාර් එකේ "View" ක්ලික් කරලා "Source" ක්ලික් කරල හරි, නැත්තම් Firefox වල නම් මෙනූ බාර් එකේ "View" ක්ලික් කරාම "Page Source" ක්ලික් කරන්න. ඔන්න එතකොට ඒවි වින්ඩෝ එකක්. ඒකේ මොනාද තියෙන්නේ? අපි Notepad එකේ ලියපු කේත ටික නේද? හ්ම්ම්... ඔය ව්දියට හැම බ්‍රවුසරයේම තමන්ගේ වෙබ් පිටුවේ කෙත ටික බලා ගන්න පුළුවන්. වැරදි තියෙනවා නම් කියවලා බලලා හදා ගන්නත් පුළුවන්. ඒත් දැන් නම් ඔය දේවල් පාවිච්චි වෙනවටත් වඩා ඇඩෝබේ ඩ්‍රීම්වීවර් (Adobe Dreamweaver) වගේ සොෆ්ට්වෙයා එකකින් ලේසියෙන්ම HTML කේතනය කර ගන්න පුළුවන්. තාක්ෂණයේ දියුණුව හොඳින්ම පාවිච්චි කර ගෙන වෙබ් නිර්මාණය කරන්න පුළුවන් මේ වගේ සොෆ්ට්වෙයා තවත් ඇති. හැබැයි මට මිතුරු නම් ඕක තමයි. මාත් මුලදී නම් නෝට්පෑඩ් එකෙනුයි කරේ ඉගෙන ගනිද්දී. කටු කන තරමට ඉගෙන ගන්නවාත් වැඩියි නෙව. ඒ නිසා ඔයාලටත් මම මුලින්ම හොඳ කටු ටිකක් කවන්නම්කෝ. හික් හික්... කැමති කෙනෙක් කැමති එඩිටරයක් (code editor) පාවිච්චි කරනවා හොඳා. ඒත් මම ආධුනිකයන්ට යෝජනා කරන්නේ නෝට්පෑඩ්ම තමා.

අපි දැන් කතා කරා ඇති. ආයෙත් වැඩට බහිමු. දැන් අපි ඇහැට දකින්න පුළුවන් දෙයක් කරමු. ඉස්සෙල්ලාම අපි HTML වල 'හෙඩිම' වර්ග ඉගෙන ගමු. ඒ කියන්නේ වචන දාල මොනා හරි ලියලා ඒවා වල ප්‍රමාණය වෙනස් කරන්නයි අපි හදන්නේ හෙඩිම ටැග් වලින්. මේවාත් යුගල ටැග්. එකම විදියට පාවිච්චි වෙන මේ හෙඩිමවල් තියෙන්නේ වචන එක්ක සෙල්ලම් කරන්නයි.
හෙඩිමක් කියන්නේ සිංහලෙන් කියනවා නම් "Headline" නැත්තම් "Heading" කියන එකටනේ. හරියටම කියනවා නම් විවිධ ප්‍රමාණ හයකින් යුත් මේ හෙඩිම නැත්තම් ශීර්ෂපාඨ HTML වල හඳුන්වලා දීලා තියෙනවා. මේ ටැග් වල ආරම්භක හා වැසෙන ටැග් අතරේ ලියන ඕනෙම වචනයක් අපිට බ්‍රවුසරයෙන් ඒ ඒ හෙඩිමේ ප්‍රමාණය අනුව බලා ගන්න පුළුවන්.

මේවා ලියන්නේ body ටැග් යුගල අතරේ බව හොඳින් මතක තියා ගන්න. අපිට යමක් පෙන්වන්න ඕනේ නම් body ටැග් අතරේ ලිවිය යුතුයි. අපි මින් එහාට ලියන බොහෝමයක් දේවල් ඒ යුගලය අතරෙයි ලියන්න හදන්නේ. ඉන් වෙනස් වෙන අවස්ථා වලදී මන් පැහැදිලිව ඔයාලට දැනුම් දෙන්නම්කෝ.

Sunday, May 16, 2010

PHP කරා යමු - 5 (HTML)

ඔෆිස් එකේ වැඩ වගයක් කරලා දැනුයි ඉවර වුනේ. ටිකක් විතර මහන්සියි. හරි කමක් නෑ. නිදා ගන්න කලින් මේ ටිකත් කියලාම යන්නම්කෝ. ඔයාල කලින් වතාවෙදි දැන ගත්ත නේ ටැග් එකක් ලියන්නේ කොහොමද ඒ වගේම HTML ලියද්දී පිළිපදින්න ඕනෙ රීති ටිකක්. අන්න ඒ ටික හොඳට මතක තියා ගන්න ඕනෙ. ඔය රීති ටික HTML වලට විතරක් අදාල දේවල් නෙවෙයි. අපේ ඉලක්කේ PHP ඉගෙන ගන්න එක නේ. අන්න ඒකෙදිත් මේ රීති ටික එහෙම්ම ම ඕනෙ වෙනවා. මේවා බොහෝ වෙලාවට ඕනෙම ක්‍රමලේඛ බාසාවකට පොදුයි. ඒත් HTML කියන්නේ එහෙව් එකක් නොවන බව ආයෙත් මතක් කරල දෙන්න ඕනෙ. හරි අපි ඔන්න දැන් මුල්ම වෙබ් පිටුව හදන්නයි යන්නේ. කට්ටිය හොඳ හුස්මක් එහෙම අර ගන්නකෝ.

ඔයාල දැන් කොම්පියුටරේ නෝට්පෑඩ් එක දිග ඇර ගන්නකෝ. වෙබ් පිටුවක් ලියද්දි අපි මුලින්ම පාවිච්චි කරන ටැග් එක තමයි "html" කියන ටැග් එක. මේ ටැග් යුගලෙන් තමයි වෙබ් පිටුවක් අඳුන ගන්නේ කීවොත් හරි. කලින් වගේම මේක යුගල ටැග් එකක් නිසා ආරම්භක වගේම වැහෙන ටැග් එකකුත් තියෙනවා. අර වගේමයි. ලියන්නේ, "<html> ..... </html>" කියලා. මේ ටැග් 2 අතරෙ තමයි වෙබ් පිටුව හැදෙන්නේ. එක වෙබ් පිටුවකට තියෙන්න පුළුවන් මේ වගේ එකම එක ටැග් යුගලක් විතරයි. ඒ ටැග් 2 අතරේ ලියන දේවල් තමයි වෙබ් පිටුවේ අන්තර්ගතය. HTML වල දෙවන රීතිය පිළිපදිමින් අපි මීලඟ ටැග් එකත් ඉගෙන ගමු. ඒ "<head>" කියන ටැග් යුගලය. "<html>" ටැග් එක ආරම්භ කරලා මීලඟට පටන් ගන්නේ "<head>" ටැග් එක. ඉවර කරන්නේ "</head>" කියලායි. මේ ටැග් යුගලෙත් වෙබ් පිටුවේ යෙදෙන්නේ එකම එක වතාවයි. මේ ටැග් යුගලය අතරේ ලියවෙන කිසිම දෙයක් අපිට ඇහැට පෙනෙන්නේ නැහැ. ඒ ඇයිද කියලා පස්සේ කියන්නම්. මේ ටැග් එකේ තිබිය යුතු අන්තර්ගතය ඇතුලත් කරාට පස්සේ ඒ ටැග් එකත් සුපුරුදු විදියටම වහනවා. හැබැයි තවම "<html>" ටැග් එක වැහුවේ නෑ කියල මතක තියා ගන්න. ඒක දැන්ම වහන්නේ නෑ. ඉන්නකෝ ටිකක්.

මින් පස්සේ "head" ටැග් එක වහලා පටන් ගන්නේ "<body>" කියන ටැග් එකයි. මේක තමයි වැදගත්ම ටැග් එක. මොකද මේ ටැග් යුගල අතරේ ලියවෙන දේවල් තමයි අපිට බ්‍රවුසරයක් හරහා දකින්න පුළුවන්. මෙයිනුත් යෙදෙන්නේ එකම එක ටැග් යුගලයයි මුළු වෙබ් පිටුවටම. ටැග් එක ආරම්භ කරලා ඊට පස්සේ ඕනෙ කරන දේවල් ටික ලියලා ආපහු "</body>" කියලා ටැග් එක වහන්න ඕනෙ. එතකොට අපේ වැඩ ටික අපි කරලයි තියෙන්නේ. තව දෙයක් අමතක වුණා නේද ඕගොල්ලන්ට? අර අරඹපු "<html>" ටැග් එක වහන්නේ "body" ටැග් එක.., "</body>" කියලා වැහුවට පස්සේ. ඒ "</html>" කියලා. දැන් අපේ ප්‍රථම වෙබ් පිටුව නිමයි.

අපි දැන් මේ තාක් වෙලා ලියපු ටැග් ටික පිළිවෙලට ලියුව අනුපිළිවෙලටම ලියලා බලමු. ඒ තමයි, වෙබ් පිටුවක තිබිය යුතු ව්‍යූහය.ඔය ටැග් ටික දේව වාක්‍යයක් වගේ කට පාඩම් කරත් කමක් නෑ. මොකද ඔය ටික හැම වෙබ් පිටුවකම තියෙනවා.

<html>
<head>

</head>
<body>

</body>
</html>


ඔය ටැග් ටික ඔය පිළිවෙලින් තියෙද්දි තමයි වෙබ් පිටුවක් වෙබ් පිටුවක් විදියටම හරියට බ්‍රවුසරේ අඳුන ගන්නේ. හැබැයි නොතිබුනාය කියලා වරදක් නෙවෙයි. මොකද කඩ වෙන්නේ රීතියක් නිසා. අද කාලෙ වෙබ් බ්‍රවුසර බොහෝමයක්ම මොන ටැග් එකක් අපි ලියුවත් ඒක HTML ටැග් එකක් විදියට පිළි ගන්නවා. ඒත් වෙනස තියෙන්නේ ඒ හැම ටැග් එකක්ම බ්‍රවුසරේ
අඳුනන් නැති එක. මම කලින් වතාවෙදි කීවෙ "<teerox>" කියලා ටැග් එකක්? ඒක මම නිකමට ලියුව එකක්. ඒක ගැන, ඒකෙ හැසිරීම ගැන වෙබ් බ්‍රවුසර අඳුනන්නේ නෑ. හැබැයි එයා HTML ටැග් එකක්ය කියලා හිතනවා. පෙන්නන්නේ නෑ. ඔන්න ඕකයි වෙනස. හැබැයි අද ලෝකෙ හඳුන්වලා දීල තියෙන හැම සම්මත HTML ටැග් එකකම හැසිරීම් වලට හැම බ්‍රවුසරයෙන්ම වගේ ප්‍රතිචාර දක්වනවා.

අපි හැදුව වෙබ් පිටුව දැන් save කර ගන්න එපැයි බලන්න කලින්. නෝට්පෑඩ් (notepad) නම් පාවිච්චි කරන්නේ File->Save වෙත යන්න. ඊට පස්සේ File Name එකට "lesson1.html" කියලා සඟල වරහන් ඇතුලේ දෙන්න. එතකොට එයා අපේ වෙබ් පිටුව save කරන්නේ HTML file එකක් විදියටයි. ඒ files, open වෙන්නේ වෙබ් බ්‍රවුසර වලින් විතරයි. දැන් අපේ HTML file එක save කරපු තැනට ගිහින් file එක උඩ ඩබල් ක්ලික් (double click) කරලා දිග අරින්නකෝ. එතකොට ඔයාලගේ කොම්පියුටරේ තියෙන වෙබ් බ්‍රවුසරයකින් open වෙයි.

Saturday, May 15, 2010

PHP කරා යමු - 4 (HTML)

දැන් වෙලාව 6 ට විතර වගේ. මට මෙතෙන්ට හරියටම ඔරලෝසුවේ පේන්නේ 6 ට වගෙයි. වැස්ස නැවතිලා තිබුණට කම්මැලි කම යන්නත් එක්ක පොඩි නින්දක් දාල ආව. යාළුවා නම් දැන් ටිකකට කලින් ගෙදර ගියා ආපහු. හැබැයි ඉතින් මම අන්තර්ජාලෙට ආවම එයත් ඉන්නව ඕන් පාඩම දිහා බලාගෙන. HTML ඉගෙන ගන්න ඔයාලට ඕනෙ කරන කොම්පියුටරේ තිබිය යුතු අවම අවශ්‍යතාවන් තමයි නෝට්පෑඩ් වගේ සොෆ්ට්වෙයා එකකුයි වෙබ් බ්‍රවුසරයකුයි. අද කාලේ පාවිච්චි වෙන ටෙක්ස්ට් (text editing) සොෆ්ට්වෙයා එකක් ගන්නත් පුළුවන්. සාමාන්‍යයෙන් නම් වින්ඩෝස් එක්ක කොහොමටත් එන ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් (internet explorer) වල පහල සංස්කරණයක් (version) එකක් තිබුණත් හොඳටෝම ඇති. කොටින්ම කීවොත් ඔය දෙජාතියෙන් ඕනෙ වර්ගෙක යුගලක් හොයා ගන්නකෝ. හරි ඔන්න ඉතින් හොයා ගත්තයි කියමුකෝ... හ්ම්...

ඔයාලට මතකයි නේද මම කිව්වා HTML කේත වල ගොඩක් වෙලාවට යුගල විදියට tags (ටැග්ස්) පාවිච්චි වෙනවය කියලා. ඒක මට හරියට පැහැදිලි කරන්න බැරි වුණා කලින් වතාවෙදි. මගේ යාළුවා තමයි අඩුව පුරවන්න කීවෙ. මෙහෙමයි. යුගලයක් කියන්නේ ජෝඩුවක් නැත්තම් 2ක් විදියට ආරම්භක සහ අවසාන කිරීම විදියට HTML වල tag (ටැග්) තියෙන එක. ඒ කියන්නේ ටැග් එකක් පාවිච්චි කරද්දී පටන් ගන්න ටැග් එකකුයි ඒ ටැග් එක එතනින් එහාට පාවිච්චි කරලා ඉවරයි කියලා බ්‍රවුසරේට දැනුම් දෙන අවසන් කිරීමේ ටැග් එකකුයි තියෙනවා කීවොත් වඩා නිවැරදියි. HTML කියන්නේ ටැග් යුගල අතර කරන සටනක්. හරියට, කලවම් නොකර කරන්න ඕනෙ වැඩක්. ආරම්භක, අවසන් කරන ටැග් එකිනෙක මාරු කර නොගෙන කළ යුතු වැඩක්. මොකද අපි දකින දේ පෙන්වන්නේ මේ ටැග් හරහා නෙව.

HTML කේතනය කරද්දී ටැග් එකක් අපි ලියන්නේ "<" හා ">" ලකුණු දෙක මැද්දේ. මේ අර මම මුලින් කීව ආරම්භක අවසන් කරන ටැග් යුගලෙ කියල වරදවා ගන්න එපා. මේ ඒක නෙවෙයි. ඕනෙම තනි ටැග් එකකට නමක් තියෙනවා. ඒ කීවෙ මොකද්ද ඒ ටැග් එක කියලා. අන්න ඒ නම ලියන්නේ "<" වලින් පටන් අරන් සහ ">" වලින් අවසන් කරලා. උදාහරණයක් කියනවා නම් මගේ නම ටැග් එකක් කියලා හිතුවොත් "<teerox>" කියලායි ලියන්න වෙන්නේ. ඕක තමයි මුල්ම පාඩම. ඔය අපි ලීවෙ ආරම්භක ටැග් එකක්. ඕකෙම අවසන් කරන ටැග් එක ලියන්නේ "</teerox>
" කියලා, වැඩිපුර ටැග් නමට ඉස්සරහින් එකතු වෙන "/" කොටසකින් තමයි අවසන් කරන ටැග් එක කියලා අඳුන ගන්නේ. දැන් ඒ දෙකම එකට අරගත්තොත් පෙනෙන්නේ මෙන්න මෙහෙමයි. "<teerox> </teerox> ".

ටැග් එකක් ලියන හැටිත් දැන් ඔන්න අඳුර ගත්තනේ. හැබැයි මේ HTML ලියන්න රීති ටිකක් තියෙනවා. ඒවා අනිවාර්යෙන්ම සපුරන්න ඕනේ හරි හමන් වෙබ් නිර්මාපකයෙක් නම්. මෙන්න මේවා තමයි ඒ රීති ටික.

  • පටන් ගන්න හැම ටැග් එකක්ම අවසන් කළ යුතුමයි. ඒ ටැග් එක තනි ටැග් එකක්ද, යුගල වශයෙන් පාවිච්චි වෙන එකක්ද කියලා නෑ, අවසන් විය යුතුයි. එතකොට තමයි බ්‍රවුසරේ දැන ගන්නේ, "මේ ටැග් එකේ වැඩේ මෙතනින් පටන් අරන් මෙන්න මෙතනින් ඉවර වෙනවාය" කියලා.
  • එක ටැග් එකක් පටන් අරන් ඒ ටැග් එක වහන් නැතිව, ඒ කියන්නේ අවසන් නොකර තවත් ටැග් එකක් පටන් ගන්නේ නැහැ. ඒක වැරදියි. එහෙම කෙරුවොත් තමයි අපිට පෙන දේවල් අපි බලාපොරොත්තු නොවන විධි වලින් පෙන්නන්නේ. උදාහරණෙකට කීවොත්, හරියට පොළොන්නරුවේ සත් මහල් ප්‍රාසාධය උඩින් බලනවා වගෙයි මේවා පිහිටන්න ඕනි. එක ස්ථරයක් උඩින් ඊට වඩා පොඩියට අනික, හැබැයි හරි මැදින් එහෙ මෙහේ පනින් නැතුව. එතකොට උඩට උඩට එද්දි පොඩි වෙවී එකක් ඇතුලෙ තව එකක් වගෙයි පේන්නේ. මේ තට්ටු වල කෙළවර, නැත්තම් වාටිය තමයි ටැග් යුගලයක් කියන්නේ.

Friday, May 14, 2010

PHP කරා යමු - 3 (HTML)

ඔන්න වැස්ස ඩින්ගිත්තකට තුරල් කරා වගේ. කලින් ගිය පාර හෙන අකුණක් ගැහුවනේ. බය වුණ පාරට ලැප්ටොප් එක ඕෆ් කරා. දැන් ඉතින් ආයෙත් ආව ඔයාලව හොයන්. මම යාළුවාව කුස්සියට යැව්වා අම්මට උදව් වෙන්නය කියලා. මොකද හැමදාම වගේ මෙහේ රිංගන මනුස්සයා නෙව. අපි කොතනින්ද කලින් වතාවෙදි පාඩම කියාගෙන කියේ? ම්ම්... හරි මතක් වුණා. HTML ලෝඩ් වෙද්දි උඩ කැතට මුලින් ඇවිත් පස්සේ හරි යන්නේ කොහොමද කියලයි. ඔයාල හිතුවද ඒ ගැන? ඒක තේරුම් ගන්ට අමාරුවක් වෙන එකක් නෑ. අහ්!!! ඔයාල මතක තියා ගන්න ඕනෙ මේ උපදෙස. මම නම් නෙවෙයි දෙන්නේ. මේක මටත් ලැබුණු උපදෙසක්. ඕනෙම දෙයක් අමාරුයි කියලා හිතුවොත් අමාරුම තමයි. අපි මේ ඉගෙන ගන්න හැම දෙයක්ම එච්චර අමාරු නැහැ. අමාරුයි කියල හිතුවොත් කවදාවත් ආසාවෙන් ඉගෙන ගන්න තියා දකින්නවත් කවුරු කවුරුත් කැමති වෙන්නේ නැහැ. නිකමට අත් හදා බලන්නකෝ.

HTML වෙබ් පිටුවක තියෙන HTML කේත වෙබ් බ්‍රවුසරයෙන් කියවන්න පටන් ගන්නේ උඩ ඉඳන් පහලටයි, වමේ ඉඳන් දකුණු අත දිහාවටයි. මෙහෙම කියවද්දි HTML කේත බ්‍රවුසරය අඳුන ගන්නවා. HTML වලදි නම් මේ කේත ක්‍රමය යුගල වශයෙනුයි පාවිච්චි වෙන්නේ. එහෙම නොවෙන අවස්ථාවලුත් තියෙනවා. සාමාන්‍යයෙන් මේ HTML කේත වලට ව්‍යවහාරයේ කියන නමක් තියෙනවා. tags (ටැග්ස්) කියලයි කියන්නේ. මේ ටැග් එකතු වෙලයි වෙබ් පිටුවක සැකිල්ල හැදෙන්නේ. නිවැරදිවම කියනවා නම් HTML කියන්නේ වෙබ් පිටු සැකිලි නිර්මාණය කරන කේතන ක්‍රමයක්. ඒක හරිම පණ නැති දෙයක්. ඒ කිව්වේ ඉලක්කම් 2ක් දීල ඒක එකතු කරලා පෙන්නන්න කීවොත් ඒක කර ගන්න එයාට බැහැ. ඒකයි මම කීවෙ language එකක් වුණාට වැඩක් කරව ගන්න අපිට බැහැ කියලා. ඒ නිසා HTML කියන්නේ හුදෙක්ම ව්‍යූහය හදන කේතන ක්‍රමයක්. ඒ නිසාමයි HTML වලට අන්තර්ජාලයේදි ඉහළ තැනක් ලැබිලා තියෙන්නේ programming language එකකටත් වඩා.

HTML ගැන කතා කරා විතරයි නේ? කෝ අපි තාම දැක්කේ නැහැ නේ ඒව මොන වගේද කියලා. ඉන්නකෝ මම පෙන්නන්නම් ඒක මොන වගේද කියලා. හැබැයි හදිසි වෙලා බැහැ. තව ටිකක් ඉවසන්න. වෙබ් බ්‍රවුසරයකට පුළුවන් මේ HTML කේත අඳුන ගන්න. ඒ කොහොමද, ඒ බ්‍රවුසර නිර්මාණය කරද්දීම HTML tag (ටැග්) සියල්ලමයි, ඒවා යොදනා ආකාරයයි, මේ මේ ටැග් වෙබ් පිටුවෙදි හම්බ වුණොත් මේ වගේ පෙන්නය කියලා දත්ත ටිකකුයි, නීති රීති ටිකකුයි කවලා තියෙනවා. හැබැයි මේ HTML tags (ටැග්ස් පාවිච්චි වෙන හැටිය අනුවයි, යොදා ගැනීමේ ප්‍රසිද්ධිය අනුවයි එක එක වෙබ් බ්‍රවුසර වලින් ඒවට දක්වන ප්‍රතිචාර වල වෙනස් කම් සිද්ධ වෙලා තියෙනවා. ඒක ඒ බ්‍රවුසර නිර්මාපකයන්ගේ අයිතියක් වගෙම උවමනාවල්. හැබැයි හැම ටැග් එකක්ම පාහේ බ්‍රවුසර වලට කවල තියෙනවා. මොකද මේ ටැග් ලෝකෙටම එක නිසා. කොහේ මොන රටේ මොන ආයතනේ හිටියත් HTML tag (ටැග්) එකකින් කියවෙන අදහස එකමයි; කෙරෙන වැඩෙත් එකමයි. කැලේ මාරු වුණාට කොටියගේ පුල්ලි මාරු වෙන්නේ නැතිලු නේ. අන්න ඒ වගේ තමා.

ඒ නිසා මේ හැම ටැග් එකකින්ම කෙරෙන වැඩේ ගැන අපි හොයල බලන්න ඕනෙ. ඒවා හොඳට ඇඟට කවා ගත්තාම පුළුවන් වෙනවා ඕනෙම පරිසරයකදි ඒවා දක්ශ විදියට පාවිච්චි කරන්න.
PHP වලදීත් මේ HTML පෙළක් වෙලාවට පාවිච්චි වෙනවා අවශ්‍යතාවෙ හැටියට. මතක තියා ගන්න ඕනි HTML සැකිල්ල හදන්න උදවු වුණාට PHP ඉගෙන ගනිද්දි HTML අමතක වෙලා නොතිබිය යුතු බව. මේ එකකින් එකක් එකිනෙක සම්බන්ධ වෙන යාන්ත්‍රණය ගැනයි මම මේ වැහි වෙලාවෙදි කියන්නේ. ඒ නිසා බොරු කියන්නත් බැහැ නෙ අකුණු ගැහුවොතින්?

ඉගෙන ගන්න කෙනෙක් වෙබ් පිටුවක් හදන්න ගන්න ඕනෙ නෝට්පෑඩ් කියන වින්ඩෝස් එක්ක එන ටයිප් කරන්න පුළුවන් සොෆ්ට්වෙයා එක උපයෝගී කරගෙන තමා. එතකොට තමයි පුළුවන්
HTML වල රහස් එළි කර ගන්න.

PHP කරා යමු - 2 (HTML)

අම්මා කතා කරා. ඒ නිසා පට ගාල ගොහින් බලලා ආවා මොකද කියල. හරි... අපි ආයෙත් නතර කරපු තැනින් මතක් කර ගමුකෝ වැඩේ ගැන. මෙහෙමයි. HTML කියන්නේ මහා ලොකු විජ්ජාවක්වත් අමාරු දෙයක්වත් නෙවෙයි. හරියටම කියනවා නම් building blocks (බිල්ඩින් බ්ලොක්) ටික තමයි මේ HTML වලත් ස්වරූපය. HTML නැත්තන් අන්තර්ජාලයේ ගන්න තියෙන කිසි වැඩක් අද කර ගන්න ලැබෙන්නේ නැහැ. ඒක අර නිකන් උණු නිසා බොන්නත් බැරි රස නිසා අහක දාන්නත් බැරි ගාණට තියෙයි. මගේ උපහැරණේ හරිද මන්දා. සිංහල වැරදි නම් ඔයාල හදන්න හොඳේ. නැත්තම් වස ලැජ්ජාව. මාත් එක්කම ඉගෙන ගත්තු නිසා මගේ යාළුවාටත් ඕව බෑ වැඩිය. මේ දේ නොතිබුණා නම්, ලස්සනට දකින වෙබ් පිටු නිකන්ම නිකන් පුස්සක් වගේ අකුරු ටිකකින් විතරක් සීමා වෙන්න තිබුණා. ඒත් අන්තර්ජාලයේ දියුණුවත් එක්කම වෙබ් පිටු නැතිවත් වැඩ කර ගන්න පුළුවන් බවත් මතක තියා ගන්න ඕනි. අපි ඒ ගැන මේ ගමන යන අතරතුරේදී කතා කරමුකෝ. HTML වලින් කරන්නේ ප්‍රධාන වශයෙන්ම වෙබ් පිටුවක හැඩේ හදන එක. ම්ම්... තේරුන් නෑ නේද...? මෙහෙම කීවොත් හරි. වෙබ් පිටුවක් මොන විදියෙන්ද ඔයාලගේ කොම්පියුටර් තිරයේ පෙන්නන්න ඕනෙ කියලා කියන්න තියෙන එකම විදිය තමයි HTML කියන්නේ...

අම්මෝ..! තව පොඩ්ඩෙන් අමතක වෙනවා වටිනම දේ. HTML කියල කියන්නේ නිකන්ම නිකන් අකුරු 4ක් කියල කීවට ඒකෙ තේරුම කියන්න අමතක වුනා නෙව. HTML කියන අකුරු හතරේ වචන 4 කුත් සැඟවිලා තියෙනවා "Hyper Text Markup Language" (හයිපර් ටෙක්ස්ට් මර්ක්-අප් ලැන්වේජ්) කියන එකයි මේකෙ ඉන්ග්‍රීසි තේරුම. මේ ඉංග්‍රීසි වචන හතරේ මුල් අකුරු 4 එකතු කරලා තමයි HTML කියන නම යොදලා තියෙන්නේ. සමහර විට ඔයාල මේ අකුරු 4 ඕනෙ තරම් අන්තර්ජාලෙදි දැකලා ඇති. ලොකු අකුරින් තියෙද්දි වගේම පොඩි අකුරෙනුත්. මින් 4 වෙනි අකුරින් කියවෙනවා language කියලා. ඒ කියන්නේ ක්‍රමලේඛ බාසාවක් වගේ හැඟීමක් එනවා නේද? ඔව්. මාත් මුලින්ම ඉගෙන ගනිද්දි තේරුම් ගියේ programming language එකක් කියලා තමයි. ඒකෙ වැරැද්දක් නෑ. ඒත් භාවිතා වෙන්නෙ ඒ තේරුමෙන් නෙවෙයි. ඇත්තෙන්ම මේක එහෙම විශේෂ අන්තර්ජාලෙටම අදාල programming language එකක් නෙවෙයි. නිකමට හිතන්න ඔයාල පාවිච්චි කරන බ්‍රවුසරයක් ගැන? ඔයාල මොකද්ද පාවිච්චි කරන්නේ? Internet Explorer ද? නැත්තම් Mozilla Firefox ද? මේ තමයි දැනට ලෝකේ තියෙන ප්‍රසිද්ධම වෙබ් බ්‍රවුසර වලින් කීපයක්. හිතන්න මේ බ්‍රවුසර නොතිබුණා නම් අන්තර්ජාලයේ අපි කොහොම සැරිසරයිද? දැන් හරි ප්‍රසිද්ධ Facebook (FB) මුහුණු පොතේ එහෙම යාළුවෝ එක්ක කොහොම සම්බන්ධවෙයිද? ඒ හැම දෙයකටම අන්තිමට සහභාගි වෙන හිතවතා තමයි HTML මිත්‍රයා.

මේ HTML කරන වැඩ ටික අඳුර ගන්න වෙබ් බ්‍රවුසරයට තේරුමක් තියෙන්න එපැයි... ඒ නිසා HTML වල තියෙනවා වෙනම ඒකටම අදාල කේත ක්‍රමයක්... ම්ම්... මං හිතුව හරි... ඔන්න අහ ගන්න සිංහලෙන් කීවොත් coding standard එකක්.හැබැයි හරිම අහින්සක විදියට වැඩ කරන්නෙ. ඒ වගේම සමහර ලොකූ වෙබ් පිටු වලදි නම් අත පසු වීමක් වුනොත් මුළු වෙබ් පිටුවම විකාරයක් වෙලා පෙන්නන්නත් තිබුණා. ඔයාල නිකමට අධ්‍යයනය කරල තියේද වෙබ් පිටුවක් වෙබ් බ්‍රවුසරේට එන හැටි ටිකෙන් ටික අන්තර්ජාලෙ ඉඳන්? මුලින්ම කැතට අවිල්ල ටිකෙන් ටික හරි ගැහි ගැහි "සතෙන් සතේ රුපියලෙන් රුපියලෙ එකතු කරල එකතු කරල..." ඇඩ් එකේ වගේ අන්තිමට ලස්සන වෙබ් පිටුවක් එනවා? අර මන් කලින් කීව කේත අත හැරීමෙන් හරි මග හැරී යාමෙන් හරි සිද්ධ වෙන විකාර රූපී වෙබ් පිටුවක් තමයි ඔයාල වෙබ් පිටුවක් තිරයට එද්දිත් මුලින්ම වෙනවා වගේ පෙනෙන්නේත්. පස්සේ ඔක්කොම ආවට පස්සේ තමයි හැඩට පෙනෙන්නේ. මෙහෙම කීවම යමක් තේරෙනවා නේද?

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

PHP කරා යමු - 1 (Intro)

මේ 2010 මැයි 14 වෙනිදා. හොඳටෝම වහිනවා. තොර තෝංචියක් නැතුව එළියේ වැටෙන වරුසාව නිසා අද නම් කිසිම රස්ණයක් නෑ. හැබැයි ඉතින් ගෙරවිල්ල තමා ඉවසන්නම බැරි. නිදා ගන්නත් බැහැ. පොඩි කාලෙ අම්මා කියලා තියෙනවා වැඩක් නැත්තන් පොතක් බලා ගන්න නැත්තන් නිදා ගන්න කියලා. ඉතින් ඔය විදියට නිදා ගන්න ගියොත් නම් ඔයාලටම තමයි පාඩුව වෙන්නෙ. මොකද එතකොට මට මේ විදියට අන්තර්ජාලයෙන් ඔයාලට මං දන්න කිසි දෙයක් කියල දෙන්න වෙන්නෙත් නැහැ නෙ...

ඔන්න ඉතින් ඔහොම කියලා මම මගේ තවත් යාලුවෙක්ව ගෙදෙට්ට දෙන්න ගත්ත මගේ උදව්වට. මොකද වහින නිසා මොළේ පෙඟිල තිබුණොත් හෙම මම කියන සමහර දේවල් හරියට තේරෙන් නැතිව ගියොත් එයා හරි ඉන්නවනේ පැහැදිලි කරල දෙන්න. ඇයි නින්ද ගියොත් එහෙම කූද්දන්නත් කවුරු හරි එපැයි නේ. මම නම් ඉතින් වැඩි යමක් දන්න කෙනෙක් නෙවෙයි. හරියටම කිව්වොත් සොක්කෙක් තමයි. ඒත් දන්න කියන දේ පළපුරුද්දෙන් කරලම ඉගෙන ගෙන තියෙන නිසා මේ පාඩම ගැන යම් දුරකට ඔයාලට කියලා දෙන්න මම උත්සාහ කරන්නම්. ගුරු මුෂ්ටි නම් නෙවෙයි, මේ ගැන දන්න හැමදේම. එහෙම හොඳයි නේද යාළුවනේ?

ඔන්න එහෙනම් අපි පටන් ගමු. ඇත්තෙන්ම යාළුවනේ අන්තර්ජාලෙ කියන්නෙ ලෝකෙ පුරාම පැතිරුණු දෙයක්. හරියට අහස පුරා පැතිරුණු වළාකුළු වගේ. දැන් නම් ලෝකයේ කිසිම දේකට අන්තර්ජාලෙ නැතුවම බැරි තරම්. මොකද දැන් අන්තර්ජාලෙන් කරන්න බැරි ඉතින් හරිම පොඩි පොඩි අවශ්‍යතාවන් ටිකක් වීම. මේ හැම දෙයක්ම කර ගන්න අද කාළෙ එකම තැනක ඉඳන් පුළුවන්. ඒ මේ තාක්ෂණයේ දියුණුව නිසාත් කොම්පියුටර තියෙන නිසාත් තමයි. මුළු අන්තර්ජාලෙම කොම්පියුටර් තිරයේ පෙන්නන්න මිනිස්සු කොච්චර උත්සාහයක් දරලා තියෙනවද කියනවා නම් අද ඒක ෆැශන් එකක් තරමටම පත්වෙලා. වෙබ් පිටුවක් පවත්වගෙන යන් නැති කිසිම කෙනෙක් නැති තරම්. ඒක තමයි මාත් මේ වගේ නොමිලේ ලබා දෙන සේවාවකින් ඔයාලට මොනා හරි කියලදෙන්න අන්තර්ජාලෙට බැස්සේ.

මම කීවා නේද කලින් වෙබ් පිටුවක් ගැන. ඇත්තෙන්ම ඔයාල මේ පාඩ්ම කියවන්නෙත් වෙබ් පිටුවක් දිග ඇරන් තමයි. මේ දිග ඇරන් ඉන්න වෙබ් පිටුව යටින් කොච්චර නම් මිනිස් ශ්‍රමයක් වැය වෙලා තියෙනව කියලද හිතන්නේ? සමහර විට ඒක මුදලින් මනින්න බෑ. ඒත් ස්වයංක්‍රීයකරණය වීම මත මේ වගේ වෙබ් පිටුවක් තප්පර කීපයකින් ගොඩ නගා ගන්න පුළුවන් වෙලා තියෙනවා. උදාහරනයක් විදියට මේ වගේ පිටුවක් නිර්මානය වෙන හැටි කොහේ හරි සටහන් කරලා තිබ්බොත් ඕනෙ ඕනෙ වෙලාවට අවශ්ය දත්ත එහෙන් මෙහෙන් එක් රැස් කර ගෙන ඒ ඒ තැන් වල ඉබේම ලස්සනට පෙන්නන යාන්ත්‍රිකයක් අද කාලේ හැම වෙබ් පිටුවකම පාහේ දැක ගන්න පුළුවන්. ඒ ඉතින් තාක්ෂණයේ දියුණුවේ පිහිට නිසා තමයි. මගේ කතාව ටිකක් බර වැඩි නම් කොමෙන්ට් එකක් දාන්නත් අමතක කරන්න එපා. මොකද උගන්නන දේ හරියට ඔයාලගේ මොළේට යන්නත් එපැයි.

PHP කියන්නෙ ඒ වගේ උදව් වෙන තාක්ෂණයක්. ඔයාල මේ පාඩමෙන් ඉගෙන ගන්න යන්නෙත් ඒ ගැන නේ. හැබැයි එක පාරම බැහැ. ටිකෙන් ටික යන්න වෙනවා. මොකද PHP කියන්නෙ මයික්‍රෝසොෆ්ට් වර්ඩ් වගේ සොෆ්ට්වෙයා එකක්වත්, අන්තර්ජාල ගේම් එකක්වත් නෙවෙයි. ඒක ක්‍රමලේඛන බාසාවක්. ඒ කිව්වෙ සිංහලෙන් කියනවා නම් PROGRAMMING LANGUAGE එකක්. ඒක ඉගෙන ගන්න කලින් ඉගෙන ගන්න දේවල් තියෙනවා කීපයක්ම. මුලින්ම අපි ඉගෙන ගන්න ඕනි HTML. මේක නම් නිකන්ම නිකන් අකුරු 4ක් විතරයි. ඒත් අන්තර්ගතය නම් විශාලයි, හැබැයි ලේසියි. ආ... මට කියන්න අමතක වුණා. PHP ඉගෙන ගන්න යන පාරේ අතර මැදදි තව ගොඩක් දේවල් හම්බ වෙයි අපිට. අපි ඒවටත් ඔළුව දාල එහෙම මේ ගමන යමු. මතකයි නේ ගුරු මුශ්ටි නෑ ඕන්. එතකොට තමා දැනුම වැඩි කර ගන්න පුළුවන් වෙන්නේ.