PHP කරා යමු - 23 (CSS)

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

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

හරි. අපි ඉගෙන ගත්තා තනි පේළියකින් style දාන්නේ කොහොමද කියලා ටැග් එකක. මගේ කලින් පාඩමෙන් මම කීවේ හැඩ වැඩ කර ගන්න පුළුවන් වැදගත්ම උප ඇට්‍රිබියුට් කීපයකුයි ඒවායෙ යොදන්න පුළුවන් අගයනුයි තමා. ඒත් අපි උදාහරණයක් කරේ නෑ. මේක ඉතින් ඕනෙම ටැග් එකකට පොදුයි කීව නේ. ඒ නිසා බය නැතිව body ටැග් ඇතුලෙ ලියන්න පුළුවන් ටැගයක් තොර ගන්න style පාවිච්චි කරන්න. මෙන්න මේ පහල තියෙන විදියටයි අපේ උදාහරණෙ මම කියල දෙන්නේ.
<font style="background-color:yellow; color:#0000ff; font-size: 20px; font-weight: bold; border: 2px red dashed; ">I love my country, Sri Lanka.</font>

ඕක පෙන්නන්නේ මෙන්න මේ පහල තියෙන විදියට. බලන්න. font ටැග් එකේ එක ඇට්‍රිබියුට් එකක්වත් පාවිච්චි නොකර style ටැග් එකෙන් විතරක් හැම වැඩේමත්, ඊට වඩා යමකුත් කර ගත්තු හැටි.

I love my country, Sri Lanka.

වල බලපුළුවන්කාර කම මෙතනින් නැවතෙන් නෑ. මේ තමයි ප්‍රබලත්වය වැඩිම ක්‍රමය style යෙදීමේ. ඒ කීවේ ටැග් එකක් ඇතුලේ style ඇට්‍රිබියුට් එකක styles ලබා දීම තමයි වෙන කොහේ style අපි දුන්නත් අවසාන වශයෙන් වැඩ කරන බලවත්ම ආකාරයේ styles යෙදීම. හැබැයි මේ ක්‍රමේ හරිම කරදරයි. මොකද අපිට එක වගේ තැන් කීපයක් තිබුණොත්, ඒ හැම තැනටම ගිහින් අතින්ම වෙනස් කර ගන්න වෙනවා ඒ හැම තැනක්ම.style වලින් ආවේ. ඒ ක්‍රමේ තමයි වඩාත්ම පාවිච්චි වෙන්නෙත්. ඒ වගේම ඊට සමාන මීළඟ ක්‍රමේ.

ඒ ක්‍රමේ තමයි, html ටැග් යුගලක් අතරේ වෙනමම අපේ වෙබ් පිටුවේ තැනක, කලින්ම අපිට තැන් තැන් වලට යොදා ගන්න පුළුවන් style ටික හදා ගෙන තියා ගන්න විදිය. මේකෙන් ලැබෙන ප්‍රයෝජනේ තමයි අපිට එක style එකක්, අපේ වෙබ් පිටුවේ ඕනෙම තැනක නැවත නැවත ලිවීමකින් තොරව පාවිච්චි කර ගන්න පුළුවන් වීම හරිම ලේසියෙන්ම. ඔන්න ඔය අපහසුව නැති කර ගන්න තමයි මීලඟට ඉගෙන ගන්න ක්‍රමේ.

ඒ ටැග සාමාන්‍යයෙන් ලියන්න ඕනේ head ටැග් යුගල අතරේ. නීතියක් නෙවෙයි. ඒ සාමාන්‍ය ක්‍රමේ. body ටැග් යුගල ඇතුලෙත් ලියන්න පුළුවන් ඕනෙ නම්. ඒ ටැග් එකේ නමත් style ම තමයි. යුගල ටැග් එකක්. <style></style>. මේ ටැග් යුගලට ඇට්‍රිබියුට් එකක් තියෙනවා විශේෂ. ඒ type කියන එක. ඒකේ අගය විදියට දෙන්න ඕනෙ, "text/css" කියන එක. ලියන්නේ
<style type="text/css" ></style> වගේ.

මේ ටැග් යුගල අතරේ styles ලියන එක තමා මීලඟ කාරණේ නැත්නම් පාඩම වෙන්නේ. ඒකත් ලොකු කතාවක් නෙවෙයි. නීති රීති ටිකක් තියෙනවා ඉගෙන ගන්න. ඒවා ඉගෙන ගත්තමයි, style එකක් අපේ දෙයකට යොදා ගන්නෙ කොහොමද කියල දැන ගත්තම css පාඩමත් ඉවරයි. ලියන උප ඇට්‍රිබියුට් එහෙම්ම ම තමයි ලියන්නෙත්. ඒව කලින් පාඩමේදි කියල දුන්න නේ.

PHP කරා යමු - 22 (CSS)

අපි දැන් ටක් ගාලා style ඇට්‍රිබියුට් එකේ එන, නිතර පාවිච්චි වෙන විදියේ උප ඇට්‍රිබියුට් කීපයක් එක දිගට අත් හදා බලමු. පහල තියෙන්නේ ඒවා මොනාද කියලාත්, ඒවට යොදන්න පුළුවන් අගයන් මොනාද කියලාත් තමයි. අහ්! ඒවා ලියන හැටිත් මම කියල තියෙනවා.


background-color
පසුබිමේ වර්ණය / පාට.
දෙන අගයන් තමයි කලින් පාඩ්මකදී අපි ඉගෙන ගත්තු වර්ණ අගයන් දෙන ආකරයෙන් දෙන අගයන්.
උදා: background-color: yellow

background-image
පසුබිමට යොදන පිංතූරය.
පිංතූරයක් තියෙන තැනට ලිපිනය. දෙන්න ඕනෙ මෙන්න මේ විදියට.
උදා: background-image: url(image.jpg);

background-position
පසුබිම් පිංතූරයේ පිහිටුම.
දෙන අගයන් තමයි bottom, center, left, right හෝ top කියන අගයන්.
උදා: background-position: top;

background-repeat
පසුබිම් පිංතූරය කොයි අතටද එක දිගට යා යුත්තේ කියන එක.
repeat-x (x අක්ශය දිගේ හරස් අතට), repeat-y (y අක්ශය දිගේ සිරස් අතට
), no-repeat (විහිදුමක් නැති අවස්තාව) .
උදා: background-repeat: repeat-x;

background
ඔය පසුබිම සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් එක දිගට දෙන්න පුළුවන් තනි උප ඇට්‍රිබියුට් එක.
කලින් කියපු අගයන් දෙන්න පුළුවන් වෙන්නේ හිස් තැනකින් වෙන් කරලා එක දිගට ලියමින්.
උදා: background:#FF0000 url(image2.jpg) left repeat-x;

color
අකුරු වල පාට.
දෙන අගයන් තමයි කලින් පාඩ්මකදී අපි ඉගෙන ගත්තු වර්ණ අගයන් දෙන ආකරයෙන් දෙන අගයන්.
උදා: color: #FF0000;

height
උස.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: height: 100px;

width
පළල / දිග.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: width: 550px;

top
ඉහල මායිමේ ඉඳන් කොච්චර දුරකින් පහලට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: top: 200px;

left
වම් මායිමේ ඉඳන් කොච්චර දුරකින් දකුණු අතට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: left: 200px;

right
දකුණු මායිමේ ඉඳන් කොච්චර දුරකින් වම් අතට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: right: 200px;

bottom
පහළම මායිමේ ඉඳන් කොච්චර දුරකින් ඉහලට වෙන්නද කියලා.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: bottom: 200px;

font-size
අකුරු වල ප්‍රමාණය ලොකුද පොඩිද කියන එක අගයක් විදියට දීම.
අගයන් දෙන්නේ කලින් ඉගෙන ගත්තු දිග සම්බන්ධ අගයන් දෙන විදියට.
උදා: font-size:12px;

font-style
අකුරු වල හැඩය ඇද වෙලාද නැද්ද කියලා.
දෙන අගයන් තමයි italic, normal හෝ oblique කියන අගයන්.
උදා: font-style:italic;

font-weight
අකුරු වල මහත ප්‍රමාණය, අකුර කොච්චර තද වෙලා, තද අකුරින් පෙන්විය යුතුද වග.
උදා: font-weight:bold;

font-family
අකුරු වර්ගය / වර්ග මොකද්ද කියන එක.
එක අකුරු ජාතියක් දෙන්නත් පුළුවන්. නැති නම්, අකුරු ජාති කීපයක්ම කොමාවකින් වෙන් කර කර දෙන්න පුළුවන්. කීපයක් දෙන එකේ අදහස තමයි, එක අකුරු ජාතියක් නැති වුනොත් අපේ කොම්පියුටරයේ අනික හරි පාවිච්චි කරන්න කියන එක.
උදා: font-family:Verdana, Geneva, sans-serif;

font
කලින් වගේම අකුරු සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් එකට දෙන්න පුළුවන් උප ඇට්‍රිබියුට් එක
උදා: font: 12px bold italic Verdana;

border
යම කිසි දෙයක වටේ දාරය හැඩ කර ගන්න යොදා ගන්න උප ඇට්‍රිබියුට් එක. මේකත් දාරයක් සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් එක දිගට දෙන්න පුළුවන් උප ඇට්‍රිබියුට් එකක්. හිස් තැනකින් වෙන් කර කර දෙන අගයන් වෙන්නේ, දාරයේ පාට, දාරයේ මහත, දාරයේ විදිය වගේ දේවලුයි.
උදා: border: #000000 1px solid;

දාරයේ විදිය, නැත්නම් හැඩයට දෙන්න පුළුවන් විවිධ ආකාර තමයි මේ.
solid - සාමාන්‍ය ඉරක්
dashed - කඩ ඉරක්
dotted- තිත් ඉරක්
double - ද්විත්ව ඉරක්
thick - මහත ඉරක්
thin - සිහින් ඉරක්

මේ වගේ දාර වර්ග හතරක් තියෙනවා. ඒ උඩ, යට, වම් පස හා දකුනු පස දාර විදියට. පහලින් තියෙන ඒවාත් පොදු උප ඇට්‍රිබියුට් ගනයට වැටෙන උප ඇට්‍රිබියුට් හතරක්, ඒ දිසා හතරේ දාර හැඩ කර ගන්න තියෙන.
border-left, border-right, border-top, border-bottom

ඒ එක් එක් දිසාවේ දාර වලට පාටක් දෙන්න තියෙන උප ඇට්‍රිබියුට් හතර තමයි මේ තියෙන්නේ.
border-left-color, border-right-color, border-top-color, border-bottom-color

ඒ එක් එක් දිසාවේ දාර වලට මහතක් දෙන්න තියෙන උප ඇට්‍රිබියුට් හතර තමයි මේ තියෙන්නේ.
border-left-width, border-right-width, border-top-width, border-bottom-width

ඒ එක් එක් දිසාවේ දාර වලට විදියක් දෙන්න තියෙන උප ඇට්‍රිබියුට් හතර තමයි මේ තියෙන්නේ.
border-left-style, border-right-style, border-top-style, border-bottom-style

ඉහල තියෙන දාර සම්බන්ධ හැම උප ඇට්‍රිබියුට් එකකම අගයන් දෙන්නේ border ඇට්‍රිබියුට් එකට අගයන් දෙන විදියේ උදාහරණයේ විදියටයි.

PHP කරා යමු - 21 (CSS)

හැම ටැග් එකේම තියෙන style ඇට්‍රිබියුට් එක ගැන අපි මුලින්ම දැන ගමු. මේ විදියෙන් style එකක් ටැග් එකකට දෙනවට අපි කියන්නේ "inline styles" කියලා. ඒ කියන්නේ තනි පේලියකින් style දෙන විදිය. මේ ක්‍රමෙත් හරි ප්‍රසිද්ධයි. ඒත් පාවිච්චි කරන්නෙ ගොඩක් කලාතුරකින්. නැතුවමත් නෙවෙයි. මොකද මේ ක්‍රමේ පාවිච්චි කරාය කියලා අපි බලාපොරොත්තු වෙන පහසුව අපිට ලබා ගන්න එක ගැන ගැටළුවක් මතු වෙනවා.

සුපුරුදු විදියටම ඇට්‍රිබියුට් එක ලියන්නේ අනික් ඇට්‍රිබියුට් වලින් වෙන් වෙන්න හිස් තැනක් තියලා style කියලා ටයිප් කරලා සමාන ලකුණකින් එහා පැත්තේ උදෘත පාඨ ඇතුලේ අගයන් දෙන විදියට පහල ලියල තියෙනවා වගේ.
style=""

මේකට අගයන් දෙන විදිය ටිකක් අමතුයි. මොකද මේකෙදි අපිට අගයන් දෙන්න සිද්ධ වෙන්නේ උප ඇට්‍රිබියුට් හැටියටයි. ඒ කීවේ sub attributes විදියටයි. මොකද මේ style කියන ඇට්‍රිබියුට් එක තවත් ඇට්‍රිබියුට් ගණනාවක් පාවිච්චි කර ගන්න පුළුවන් ඉහල මට්ටමක ඉන්න ඇට්‍රිබියුට් එකක්.

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

style ඇට්‍රිබියුට් එක ඇතුලේ, ඒ කියන්නේ ඒකේ අගයන් ව්දියට උප ඇට්‍රිබියුට් දෙන්න ඕනෙ ඉංග්‍රීසි කුඩා අකුරින්. සිංහලෙන් කීවොත් simple letters වලින්. ඒ කියන්නේ styles අගයන් හැම තිස්සෙම case sensitive කියලා. උප ඇට්‍රිබියුට් එකකින් තවත් උප ඇට්‍රිබියුට් එකක් වෙන් කරන්නේ සාමාන්‍ය ඇට්‍රිබියුට් දෙකක් වෙන් වෙන්ව ලියන්න හිස් තැනක් තියලා නෙවෙයි. උප ඇට්‍රිබියුට් දෙකක් වෙන් කරන්නේ ";" තිත් කොමාවකින් නැත්නම් semi-colon එකකින්. උප ඇට්‍රිබියුට් වලට අගයන් දෙන්නේ සමාන ලකුණකින් නෙවෙයි, තිත් දෙකකින් ":" නැත්නම් colon එකකින් එහා පැත්තේ. එකම style ඇට්‍රිබියුට් එක ඇතුලේ එකම උප ඇට්‍රිබියුට් එක දෙවරක් පාවිච්චි කරන්න බෑ. ඔන්න ඕවා තමයි style ලියද්දි පාවිච්චි කරන්න ඕනි නීති. මේවා රීති නෙවෙයි. මොකද කැඩුවොත් වැඩ නොකරන නිසා.

ඔය කීව ටික උදාහරණයකින් ලියලාම දැන ගමු කොහොමද ලියන්නේ කියලා හරියටම.
style="subattribute1 : value; subattribute2 : value; "

ඔන්න එහෙනම් අපි style ලියන හැටිත්, ඒව ඇතුලේ උප ඇට්‍රිබියුට් ලියන විදියයි, ඒවට අගයන් දෙන හැටිත් ඉගෙන ගත්තා. මීලඟ පාඩමෙන් බලමු ඒ උප ඇට්‍රිබියුට් වර්ග මොනාද කියලත්, ඒවාට දෙන අගයන් මොනාද කියලත්. නොතේරෙන දෙයක් තියෙනවා නම් ඔයාලට කොමෙන්ට් එකකින් දැන අහ ගන්න පුළුවන්.

PHP කරා යමු - 20 (CSS)

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

"CSS" නැත්නම් "styles" වලින් අපේ වැඩ බොහෝමයක් ලේසි කරනවා කියලා ඔයාලට කීවොත් ඒක නිවැරදියි. අපිට මොනා හරි දෙයක්, ඒ කීවේ වගුවක් හරි, වචන ටිකක් හරි, ඡේදයක් හරි, ඔය මම කියලා දීපු හැම ටැග් එකකින්ම පෙන්වන්න පුළුවන් දේවල් CSS වලින් හරි ලේසියෙන්ම හැඩ වැඩ කර ගන්න පුළුවන් වෙනවා. මොකද එයා අපිට කරල දෙන්නේ තැන් කීපයක අපි නිතර නිතර යොදන දේවල් එක තැනක එක පාරක් හඳුන්වලා දුන්නට පස්සේ ඇති තරම් වෙන වෙන තැන් වලදී පාවිච්චි කර ගන්න පුළුවන් වගේ දෙයක්. ඒක CSS වලින් අපිට ලැබෙන ලොකු වාසියක් වගේම කාලය ඉතුරු කිරීමකුත් වෙනවා. අද කාලෙ හැම දෙයක්ම කාලෙන් මනිද්දි සල්ලි වලිනුත් ඉබේම මිනුමක් ලැබෙනව නෙ. ඒ නිසා කාලෙ නාස්ති නොකර ගෙන ටක් ගාල වෙබ් පිටුවක් හෝ අඩවියක් ලස්සනට හදා ගන්න ලැබුනොත් ඒක වටිනවා ගොඩක්.

හරි, පම්පෝරි ගැහුවා මදැයි. අපි දැන් පාඩමට බහිමු. ඇත්තම කියනවා නම් මම ඔයාලට දෙයක් හැංගුවා. ඒක ගුරු මුශ්ටියක් නෙවෙයි. ඒක නොකියාම හිටියේ මේ වෙලාව එනකම් ම තමා. ඒ තමා අපි ඉගෙන ගත්තු ටැග් වල තියෙන ඇට්‍රිබියුට් එකක් ගැන. ම්ම්.. හරියටම කීවොත් හැම ටැග් එකකම අනිවාර්යෙන්ම තියෙන පොදු ඇට්‍රිබියුට් එකක්. ඒක අපි අනිවාර්යෙන්ම ඉගෙන ගන්න ඕන වෙන්නේ අපේ මේ CSS හෙවත් styles වලට මූලික අඩිතාලම ඒකෙන් වැටෙන නිසා වගේම, මුල්ම පියවර ඒ පොදු ඇට්‍රිබියුට් එකෙන් තැබෙන නිසා. ඒ ඇට්‍රිබියුට් එක වෙන මොකක්වත් නෙවෙයි, "style" කියන ඇට්‍රිබියුට් එකයි. ඒ නමින් තියෙන ඇට්‍රිබියුට් එක අපිට ඕනෙම ටැග් එකක සාමාන්‍ය විදියටම පාවිච්චි කර ගන්න පුළුවන්. හැබැයි, හැම ටැග් එකක්ම කීවට හැම එකේම නෙවෙයි. HTML ටැග් වලින් ටැග් ජාති 98% කම වගේ මේ ඇට්‍රිබියුට් එක අන්තර්ගතයි. අර 2% ට අයත් වෙන ටැග් කීපයක් තමා, "html, head, title, meta, style, script" කියන්නේ. මේවායෙන් සමහරක් අපි පසුවට ඉගෙන ගන්න නිසා අළුත්ය, කියා නොදුන්නාය කියලා පසුතැවිලි වෙන්න එපා. යථා කාලයේදී තථා අයුරින් ඒව දැන ගන්න ලැබෙයි.

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

කෙටි පාඩමක් විදියට කියනවා නම්, අපිට style වලදී යොදා ගන්න පුළුවන් දිග, පළල වගේ මිනුම් ගන්න ඒකක කීපයක් ඉගෙන ගන්න පුළුවන්. මේවා styles පාවිච්චි කරද්දි නම් හරිම ප්‍රයෝජනවත්, අපිට ඕනෙ කරන ඒකකයකින් (දිග මැනීම සම්බන්ධයෙන්) මිනුමක් දී ගන්න. කිලෝමීටර විසි පහ අපි සංකේතයෙන් දෙන්නේ "25km" කියලා වගේ, ඒකක භාවිතයක් ගැනයි මේ කියන්නේ. හැබැයි කිලෝමීටර (km) කියලා ඒකකයක් නම් CSS වලදි ඇත්තේ නෑ. අපි එක දිගට ඒ ටික කියාගෙන යමු. අපි යම් දිගක්, පළලක් දෙනවා නම් දිය යුත්තේ පහළ තියෙන ඒකක, යම් කිසි ඉලක්කමක් එක්ක, ඒ ඉලක්කම පිටි පස්සෙන් ලියලායි. ඒවා කීපයකුත්, ඒවායේ තේරුණුත් දැන ගමු දැන්.

% - ප්‍රතිශතයක් විදියට අගයක් දෙනවා නම්. (උදා: 25%).
mm - මිලි මීටර (millimeter) විදියට අගයක් දෙනවා නම්. (උදා: 25mm).
cm - සෙන්ටි මීටර (centimeter) විදියට අගයක් දෙනවා නම්. (උදා: 25cm).
in - අඟල් (inch) විදියට අගයක් දෙනවා නම්. (උදා: 25in).
em - දැනට තියෙන අකුරු වල ප්‍රමාණය. (උදා: 2em - දැන් අකුරු ප්‍රමාණය වගේ දෙගුණයක් විශාල.).
ex - දැනට තියෙන අකුරු වල උස ප්‍රමාණයට වඩා අඩක / භාගයක ප්‍රමාණය. (උදා: 1ex).
pt - point (උදා: 10pt).
px - කොම්පියුටර තිරයේ, මොනිටරයේ තිතක ප්‍රමාණය. pixel (උදා: 100px).

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>

Hello	Sri Lanka
How Are You?

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

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

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 Lanka

Welcome My Friend

How are you?

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>

5. item 1
6. item 2
7. 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>

20. item 1
21. item 2
40. 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

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.

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₂O
පෙන්වන්නේ H₂O විදියට.

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

<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.

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,..." වගේ හරියටම ඔක්කොම ටික මතක නෑ යාළුවනේ. මෙතනින් අපිට දෙන්න පුළුවන් වර්ණ ජාති දහසයක් විතරයි නේ. ඒත් වර්ණ මිලියන ගණනක් වුණත් දෙන්න පුළුවන් විදියක් තියෙනවා. ඒ දහසයේ පාදයෙන් රතු, කොළ, නිල් කියන වර්ණ වල සම්මිශ්‍රණයෙන්. ටිකක් බරපතලයි වගේ නෙ? ගණන් කාරයින්ට නම් ඕක තේරුම් ගන්න පුළුවන් වෙයි. ඒ ගැනත් අපි හොයලා බලමුකෝ එහෙනම්...

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" ටැග් යුගලෙ ඇතුලේ මේවා ලියලා බලන්නකෝ මොනාද වෙන්නේ කියලා. හැබැයි මේවා නම් ලිව්වාට පස්සේ අලුත් රූලක් පහලට යන්නේ නෑ. එක දිගට ලියාගෙන යන පරිච්ඡේදයක පවා අතර මැද වචන, අකුරු, පේලි වලට රූල් පැනීමකින් තොරව මේ අකුරු තද කරලා පෙන්නන මෝස්තරය යොදා ගන්න පුළුවන්.

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 ටැග් අතරේ ලිවිය යුතුයි. අපි මින් එහාට ලියන බොහෝමයක් දේවල් ඒ යුගලය අතරෙයි ලියන්න හදන්නේ. ඉන් වෙනස් වෙන අවස්ථා වලදී මන් පැහැදිලිව ඔයාලට දැනුම් දෙන්නම්කෝ.

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 වෙයි.

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

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

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

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

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

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

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