Command Prompt පාඩම 01

ඔන්න යාලුවනේ.. ඔයාලට මම මේ පාඩමෙන් කියලා දෙන්න යන්නේ... Command prompt එක සහ ඒකෙ commands ගැනයි.

හොදයි. ඔන්න ඉතින් අපි කෙලින්ම පාඩමට බහිමුකෝ.. මේ Command prompt එක අපිට ආකාර දෙකකට ලබා ගන්න පුලුවන් යාළුවනේ..

01. සාමාන්‍ය මාදිලියෙන් user account එකෙන් ලබා ගැනීම..
මෙහෙම ලබා ගන්නකොට command prompt එකේ පෙන්නන file directory  එක තමයි මේ...

C:\user\

02. අපිට C partition එකට අදාල වෙනස්කම් කරන්න හෝ system එක සම්බන්ධ බලයෙන් වැඩි code පාවිච්චි කරන්න පුළුවන් වෙන්නෙ Administrator  යටතේ run කලොත් පමණයි.
*hacking වල දි අපිට ඕන වෙන්නෙ මෙන්න මේ Administrator යටතේ ලබා ගන්නා prompt එක. ඒකෙදි පෙන්වන file directory එක මේකයි..

C:\windows\system32\

අපි දැනට ඉගෙන ගන්න නිසා පාවිච්චි කරන්නේ සාමාන්‍ය command prompt එක හොදේ..

Command prompt එක ලබා ගන්නා අයුරු..

* key board එකේ windows key එක සහ R අකුර එකවර press කිරීම.
Run box එක මත cmd විදිහට type කරලා ok කරන්න..

*start වලින් ගිහිල්ලත් ගන්න පුළුවන්.

*windows x menu භාවිතයෙන්.. (මේ ක්‍රමය භාවිත කරන්න පුළුවන් windows 8 වලට ඉහල os භාවිතා කරන අයට විතරයි.)
Desktop එකට ගිහිල්ලා windows key එකයි x key එකයි press කරන්න.. ඒ ලැබෙන list එකෙන් command prompt , select කලාම සාමාන්‍ය විදිහට command prompt , open වෙනවා..
command prompt (Admin) select කල විට Administrator යටතේ open වේ.

හරි. ඔයාට යම් අවබෝධයක් ලැබෙන්න ඇති මේ ගැන.. දැන් අපි commands ගැන ඉගෙන ගන්න පටන් ගමු එහෙනම්..

Help Command

අපි දැන් ඉන්නේ user profile directory එකෙයි.
Help ලෙස type කරලා Enter කරන්න.
දැන් basic  command වල list එකක් සහ ඒවයෙ කාර්යන් පේන මේ වගේ list එකක්  ලැබේවි ඔයාට.

මේ code වලින් වෙන දේවල් ගැන කියවලා දැනුමක් ගන්න ඔයා.. ඔන්න අපි ඊලග command එකට යනවා.

Cls Command
ඔහ්. Command prompt එක help command එකෙන් ආපු list එකෙන් පිරිලා නේද.. ඔයා Cls කියලා type කරලා Enter කරන්නකො බලන්න...
ම්ම්.. තේරුනාද.. Cls Command එක use කරන්නෙ screen එක clear කර ගන්න.

file browse
මේ සඳහා CD Command එක use කරනවා.
CD Command

*මේ command එක කියලා දෙන්න කලින් මේකෙ ඔයාට ඉස්සරහදි හම්බවෙන දෙයක් ගැන කියලා දෙන්න ඕනෙ. ඒ තමයි partition [පා(ර්)ටිෂන්] අපේ hard disk එක කොටස් වලට බෙදලා තියෙනවා ඔයා දැකලා තියෙනවා නේද C D E වගේ. ඔයාට My computer වලදි බලා ගන්න පුලුවන් ඒක. මම pic (3) වලදි පෙන්නලා තියෙනවා.

අපි ඉස්සරහදි D partition , E partition කියන්නෙ මේවට තමයි හොදේ..
හරි. අපි කිය කිය හිටියෙ CD ගැන.. මේ තමයි change directory එක. මේ directory එකේ root එක වන C: ට එන්න ඕන නම් ඔයාට..

CD\ Enter කරන්න.
දැන් මම ඉන්නෙ C: එකේ. මට ඉතුරු code  C එකේ ඉදන් කරන්න බැරි නිසා මම D: partition එකට මාරු වෙනවා. මෙහෙම..
D: (enter)
දැන් මම ඉන්නෙ D එකේ..

Dir Command
මට D: partition එක ඇතුළෙ තියෙන folder වල ලිස්ට් එකක බලන්න ඕනෙ කියලා හිතන්න..
Dir (enter)

ඔන්න ලිස්ට් එකේ විස්තර පෙන්නනවා..
මේ folder එක ඇතුළට යන්නෙ CD command එකෙන්.

CD (press tab key.)
අපි ඉන්න directory එකේ filder වල නම් පේනවා.. Recycle.Bin කියලා පෙන්නන්නෙ අපිට D එකෙන් දෙයක් Delete කලාම වැටෙන folder එක.
මෙහෙම tab key එක press කර කර එතැන තියෙන ඔයා කැමති folder එකක නම පෙන්නුවම enter  කරලා ඒ ඕනම folder එකක් ඇතුලට යන්න.
(ඔයා මේ command කරන්න කලින් D එකේ ඔයාගෙම folder එකක් හදාගෙන මේකට ඒක use කරනවා නම් හොදයි.) අපි ඒ විදිහට New කියලා folder එකක් හදලා තිබුනා කියලා හිතන්න.. මේ New කියන folder එක ඇතුලේ තවත් folder එකක් හදන්නයි යන්නෙ අපි.

MD Command.
මේකෙ තේරුම තමයි Make Directory.

MD Mudi
දැන් මම ඉන්න directory එක වන D:/New/ වල Mudi කියලා folder එකක හැදෙනවා.
ඒ හදපු folder එකට යන්න Use කරන්නෙ CD Command එකයි.
මේකට ක්‍රම 02ක් තියෙනවා.. බලන්න..

(i) CD Mudi (enter.)
(ii) CD (press tab key.) - මේකෙදි Mudi කියන එක පෙන්නුවම enter කරලා අපිට ඒ folder එකට යන්න පුළුවන්.

හොදයි ඔන්න එහෙනම් අපි මේ කොටස මෙතනින් නවත්වමු.. ඔයාලා මේ කියලා දීපු කොටස් command prompt එකේ කරලා බලන්න. ගැටලු තැනක් comment එකකින් අහලා විසදගන්න. අපි ඊලග කොටසින් ඉදිරියට යමු..

වැදගත්:-

*අපි මේ type කරන Command ආයෙ ආයෙ type කරන්න ඕනෙ නැහැ..  key board එකේ Up Down arrow key වලින් පරණ code ආපහු ගන්න පුළුවන්..
*folder කිහිපයක් එකවර හදන්න ඕනෙ නම්.. E partition එකේ movie , song , pic , files කියලා folder හතරක් හදන්න ඕනෙ කියලා හිතන්න..
E:\ MD movie song pic files
මේ folder names අතරෙ තියෙන space එකෙන් තමයි වෙන වෙනම folder එකක් බවට අදුන ගන්නෙ.

Command Prompt පාඩම 02

ඔයා උත්සහ කරලා බැලුවද කොටස් දෙකක් විදිහට තියෙන name එකක් folder name එක විදිහට දෙන්න.
මෙන්න මෙහෙමයි. හිතන්න folder  එකේ නම Graphic Design කියලා..

MD "Graphic Design"
උධෘත ඇතුලෙ තමයි ඒ සම්පූර්න නම දෙන්න ඕනෙ.
තවත් එකක්.. අපිට පුළුවන් මේ Command, script විදිහට bat format එකෙන් save කරලා පාවිච්චි කරන්න..
Notepad එකේ මේක type කරගන්නකො ඔයා. (Folder එකට කැමති නමක් දෙන්න.)

Pause
MD Mudi

මෙහෙම type කරලා file වල save as ගිහින් desktop එකේ file name එක m.bat කියලා type කරලා All files දීලා save කරන්න.
ඒක desktop එකේ මෙහෙම තියේවි..

හරි අපි බලමු මේ ලියපු commands වලින් වෙන දේවල්.. Pause command එකෙන් වෙන්නෙ අපි keyboard එකේ key එකක් press කරලා අවසර දෙන තුරු ඊලගට තියෙන විධානය වන MD Mudi ක්‍රියාත්මක නොකර තිබීමයි. මේකෙදි වෙන්නෙ Mudi නමින් folder එකක් හැදීමනෙ.
මේ script එක open කලාම command prompt එකක් ලැබේවි. Pause Command එක නැතුව MD Mudi විතරක් ලිව්වා නම් script එක open කරපු ගමන්ම close වෙලා යනවා.
pause command එක මගින් නවත්තන් ඉන්න ඊලග command එක වන MD Mudi ක්‍රියාත්මක වෙන්න keyboard එකේ key එකක් press කරන්න ඕනෙ. MD Mudi Run වෙලා Mudi කියලා folder එකක් open කරපු තැන හැදෙයි.

බලන්න මේ code එකත් මම කලින් කියපු විදිහට notepad එකේ type කරලා save කරලා බලන්න..
Pause
CD\
pause
D:
Pause
MD new
මේකෙදි හැම පියවරක්ම run වෙන්න keyboard එකේ key එකක් press කරලා අවසර දෙන්න ඕනෙ.

Help Command එක use කර Dir Command එකේ සියලු විස්තර ලබා ගැනීම
Help Dir (enter)
අපිට තියෙන්නෙ help කියලා type කරලා අපිට විස්තර අවශ්‍ය command එක type කරන එක.
අපිට අවශ්‍ය directory එකේ folder list එක ගන්නෙ මෙහෙම..

Dir E: (enter)
අපි ඉන්න directory එකේම hidden folder වල list එකක් විතරක් ඕනෙ නම් මෙහෙම..

Dir /A :H (enter)
E partition එකේ hide වෙලා තියෙන folder වල list එකක් ගන්න ඕනෙ නම්..
Dir E:/A :H
*මේ විදිහට විස්තර ලැබෙන command අපිට txt file එකකට ඒ විස්‍තර save වෙන විදිහට command දෙන්න පුළුවන්. එතකොට command එකේ output එක කෙලින්ම txt file එකකට save වෙනවා..

Dir > a.txt (enter)
අදාල directory එකේ list එක m.txt විදිහට ඒ directory එකේම හැදෙනවා.

Tree Command
Tree (enter) කලොත් ඒ partition එක තුල තියෙන සියලු folder එකිනෙකට සම්බන්ධ වෙලා තියෙන හැටි පෙන්නනවා. ගහක අතු බෙදිලා තියෙනවා වගේ..

Tree > xa.txt (enter)
Output එකක් නොපෙන්වා ඒ output එක xa.txt කියන txt file එකට යවලා අපි ඉදපු directory එක වන D වල save කරලා තියෙනවා..
මේ වගේ..

ඒත් ඉරි කෑලි වෙනුවට ඔයාට පේන්නෙ අකුරු වගයක් නේද..
ඉරි දා ගන්න වැඩක් තියෙනවා.. අපි ඒකට tree එකේ help අරන් බලමු..
Help tree (enter)

මට මතක විදිහට මම ඔයාට තාම පැරාමීටර්ස් ගැන පැහැදිලි කලේ නැහැ. හරි මේ බලන්න..
මේ තමයි attrib යටතෙ තියෙන පැරා මීටර්ස්. help වලින් තමයි ගන්නෙ.

ඔන්න අපි ආයෙත් පාඩමට යමු.එහෙම enter කලාට පස්සෙ ඔයාට පේනවා parameters 02 ක් ලැබිලා තියෙනවා. අපි යොදා ගන්නෙ /A කියන එක.
Tree /A > c.txt
මේ වගේ ඉරි සහිතව ලැබේවි එතකොට.

දැන් හිතන්න මට D partition එකේ තියෙන image folder එක ඇතුලෙ තියෙන my pic එක ඇතුලෙ තියෙන animals folder එකට යන්න ඕනේ කියලා..
CD/D D:\  type කරලා keyboard එකේ tab key එක press කර D එක ඇතුලෙ තියෙන folder එක ගන්න පුළුවන්.
CD/D D:\image
ඕනෙ my pic  folder එකට යන්නනෙ. ඒ නිසා image වල අගට \ එකක් type කරලා ආයෙ tab key එක  press කරන්න.
Copy සහ XCopy Command
File copy කිරීමට use කරනවා. මේ දෙකම ක්‍රියාකාරිත්වය අතින් සමාන වුනත් xcopy command එක සතුව copy command එකට වඩා වැඩි parameters ගණනාවක් තියෙනවා.
xcopy command එකේ parameters  වලින් වෙන දේවල් check කරලා බලන්නකෝ...
*administrator command prompt එකේ  use කරන්න එපා. හේතුව මේ xcopy command  එක සතුව තියෙන file, access permission එකට අදාල parameters  එක නිසි දැනීමකින් තොරව use කරන්න ගියොත් අපි අතින් hard partition  access block වෙන්න පුළුවන්.
හරි ඔන්න අපි දෙවනි පාඩමටත් සමු දෙනවා. අපහසු තැනක් කමෙන්ට් එකකින් අහන්න.

Command Prompt පාඩම 03

Copy Command

Help copy (enter)
*මෙතනින් වැදගත් parameter එකක් තමයි /v මේකෙන් file copy වීම සම්පූර්ණයෙන් සිදුවුනාද කියලා vertify කර ගන්න පුළුවන්.
file directory එක type නොකර, key board එකේ tab key එක press කරලා directory එක ගන්නත් පුළුවන්නෙ.
එහෙම මගේ folder එක දෙනවා. දීලා space එකක් තියලා, මට මේ  folder එකේ තියෙන දේවල් copy කරන්න ඕනෙ තැන directory එක දෙනවා. දීලා enter කලාම, මුලින් දුන්න directory එකේ ඇතුලෙ තියෙන සියලු file දෙවනියට දුන්න directory එකට copy වෙනවා..
parameter එකක් යොදා ගන්නවා නම් ඒක යොදන්න ඕනෙ.
copy copy විය යුතු directory එක type කරන්න. file copy විය යුතු  place එක දාලා (enter) කරන්න.
Copy command එකේ file, copy කිරීම.
Copy (space) copy කරන්න ඕනෙ  file directory එක type කරන්න.
file directory එක type නොකර, key board එකේ tab key එක press කරලා directory එක ගන්නත් පුළුවන්නෙ.
එහෙම මගේ folder එක දෙනවා. දීලා space එකක් තියලා, මට මේ  folder එකේ තියෙන දේවල් copy කරන්න ඕනෙ තැන directory එක දෙනවා. දීලා enter කලාම, මුලින් දුන්න directory එකේ ඇතුලෙ තියෙන සියලු file දෙවනියට දුන්න directory එකට copy වෙනවා..

Title Command

command prompt එකට title එකක් දාන්න මේ command එක භාවිතා කරනවා.
Title එක mudi gunarathne කියලා title bar එකේ පෙන්වනවා. මේ බලන්න.

Color Command
Help color
බලන්න මේ වගේ කලර්ස් වල ලිස්ට් එකක් ඒවි.. ඒකේන් කලර්ස් වලට අදාල අංක, අකුරු බලා ගන්න පුලුවන්..

ඉස්සෙල්ලම color කියලා type කරලා background එකට දෙන්න ඕනෙ color එකට අදාල අංකය හෝ අකුර ඉස්සෙල්ලම type කරලා ස්පේස් එකක් නොතියා command prompt එකේ අකුරු වලට දෙන්න ඕනෙ colour එකට අදාල අකුර හෝ අංකය  type කරලා enter කරන්න..

Del සහ Erase Command

මෙම commands භාවිතා කරන්නනේ  file delete කිරීම සඳහාය. (මෙම command ප්‍රවේශමෙන් භාවිතා කල යුතුය. මක් නිසාද යත් අත්‍යාවශ්‍ය file delete වී යාහැක. )pen එකක් වැනි දෙයක් භාවිතා කරන්න..
Help Del
Del එකේ තියෙන parameters ටිකක් බලමු අපි..
/p - දෙයක් delete කරද්දි කරන්නද එපාද කියලා confirmation එකක් ලබා දීම.
/F - read only file delete වීමට බල කරයි.
/A - hidden file, system file delete කල හැක.

hidden file delete වීම සදහා
/A:H

D: partition එකට ගිහින් ඒකෙ තියෙන new කියන folder එක ඇතුළට ගිහින් ඒකේ තියෙන 1.ipg image file එක ඩිලීට් කරන්න අපිට ඕනෙ කියලා හිතමු..
Del 1.jpg (enter)
එතකොට ඒ file එක delete වෙනවා.. මේ වැඩේම D:\new directory එකට command prompt එකෙන් නොයා  Del D:\new\1.jpg (enter) කරන්නත් පුලුවන්.
මේ code එකම  /p එක්ක ගැහුවොත් delete confirmation කරන්න Y එකක් type කරලා enter කරන්න ඕනෙ. (වටින file delete වීම වළක්වන්න  use කරන්න පුළුවන්)
විශේශ  file format එක්ක  file විතරක්  delete  වෙන්න නම්..
Del D:\new\*.jpg (enter)
New කියන folder එක ඇතුලෙ තියෙන ඔක්කොම jpg format එකේ file , delete වෙනවා.

folder එකේ තියෙන සියලු file delete කිරීම.

D:\new\*.*
මේකෙදි delete confirm කරන්න  Y enter කරන්න වෙනවා.
*මේ del command එක මගින් folder delete කරන්න හැකියාවක් නෑ..  file විතරයි පුළුවන්.

RMDIR Command 

folder delete  කිරීම සදහා තමයි භාවිතා කරන්නෙ..
Help RMDIR (enter)
/s - D partition එකේ new කියලා empty folder එකක් තියෙනවා කියලා හිතමු. ඒක delete කරන්න ඕනෙ නම්...
RMDIR D:\new (enter)
ඒත් folder එක empty නෑ. ඒක ඇතුලෙ files හෝ folder තියෙනවා කියලා හිතන්න.. එතකොට අපි කලින් command එක දුන්නොත්  error එකක් එනවා folder එක empty නෑ කියලා.
මේ වගේ empty නැති folder එකක්  delete කරද්දි තමයි අපි delete කරන්න දෙන directory එකේ තියෙන සියලු file folder delete වෙන්න මේ  /s parameter එක use කරන්න..
අපිට empty නැති folder එකක් delete කරන්න අවශ්‍ය නම්..

RMDIR /s D:\new
එවිට delete එක confirm කරන්න Y (enter) කරන්න වෙනවා..
Y type කරලා enter කරන්න වෙන එක වලක්වන්න තමයි /Q තියෙන්නෙ..
RMDIR /S /Q/D new (enter)
මේකෙන් කිසිම delete confirm කිරීමකින් තොරව ෆොල්ඩර් එක ඩිලීට් කර ගන්න පුළුවන්..

Ren Command

file සහ folder rename කිරීම මෙමගින් සිදු කරන්න පුළුවන්.
Help Ren (enter)
(ren වගේම rename කියලා type කලත් එකම දේ වෙන්නෙ.)
Ren Rename කල යුතු file එකට අදාල directory එක අදාල file එකේ නම සහ  file format එක සහිතව ඒ file එකේ වෙනස් වෙන්න ඕන අලුත් නම file format එක සහිතව type කරලා (enter)

Help move
මේක මගින් file හා folder move කරනවට අමතරව move කරන file rename කරන්නත් පුළුවන්. (මේ හැකියාව command prompt එක සතු ගොඩක් කොටස් සතුව තියෙනවා. Ex:  copy වලිනුත් rename කරන්න පුළුවන්.)
Move move කරන්න අවශ්‍ය file එකේ directory එක type කරන්න. file එක   move වෙන්න ඕනෙ directory එකේ පාත් එක (enter)

Move කරන අතරතුර Rename

කලින් වගේ directory type  කලත් move වෙන්න ඕන තැනට දෙන පාත් එකේ නම වෙනස් කලොත් move වෙන ගමන් rename වීමත් වෙනවා.  /Y මගින් වෙන්නෙ අපි move කරන දේ  දැනටමත් move වෙන්න දෙන  folder එකේ තියෙනවා නම් ඒක replace කිරීමට  permission ඉල්ලීමයි.

Attrib Command

File එකක හෝ folder එකක right click කරලා එන contex menu එකේ  properties click කලාම එන properties window  එකේ attribute තියෙනවා.
Attribute කියන්නෙ file එකක් හෝ folder එකක් hide වීම, show වීම read only වීම වගේ දේවල්. (graphical interface එකට වඩා වැඩි බලයක් සහිත attribute command , command line interface එක සතුව තියෙනවා.

Help Attrib (enter)

R,A,S,H,I,X,V මේ අකුරු වලින් විෂේශ Attribute එකක් සංකේතවත් වෙනවා.
R - file එකක් read only කරවීම පාලනය කරනවා.. file එකක් read only කලොත් ඒ file එක අයිතිකරු හැර වෙනත් කෙනෙකුට වෙනස් කිරීමට හැකියාවක් නැහැ.                             ***

C++ පාඩම

ඔන්න ගොඩක් අයගෙ ඉල්ලීම පිට මම C++ ත් ගෙනාවා.. ඒත් මේක නම් මම නෙමෙයි උගන්නන්නෙ හොදේ.. මමත් තාම C++ ඉගෙන ගන්නවනෙ.. මම ඉගෙනගෙන ඔයාට උගන්නන්න හිටියොත් තව කල් යනවනෙ..
ඉතින් මම මේ දෙන ලින්ක් එකෙන් ගිහින් මේ pdf එක ඩව්න්ලෝඩ් කරගන්නකො. සිංහල pdf එකක්. සරලව තේරුම් ගන්න පුලුවන විදිහට කියලා දීලා තියෙනවා.. ඔන්න එහෙනම් අපි ඉගෙන ගනිමූ. C++ ත්..
මෙන්න ලින්ක් එක..

C++ PDF

SQL පාඩම - 01

ඔන්න අද මම ඔයාට කියලා දෙන්න යන්නෙ sql language එක ගැනයි..

SQL කියන්නෙ...,

Stuctured Query Language - ව්‍යුහගත විමසුම් භාෂාව.

කිසියම් පද්ධතියක් සදහා database එකක් සකස් කරනවා.. ඒ database එකට දත්ත ඇතුල් කරන්නත්, එකෙ තියෙන දත්ත සකස් කිරීම තුලින් නැවත ලබ ගන්නත් මේ SQL විධානයන් ඇතුලත් කරනවා..

අපි බලමු මේ SQL විධානයන් ක්‍රියාත්මක කරන්නෙ මොන දත්ත සමුදාය කලමණාකාරණ පද්ධතීන් (DBMS) එක්කද කියලා..

• My SQL
• Ms Access
• Oracle
• SQL Server

My SQL database එකක් සකස් කරන්න නම් අපි Wampserver අපේ කම්පියුටර් එකට install කරගන්න ඕනෙ.. ඔයා වැඩ කරන මැෂින් එකේ wampserver install කරගෙන නැත්නම් මෙතැනින් download කර ගන්න..

Wampserver

මේ වැම්ප්සර්වර් ඕපන් කරලා බලන්න.. එකේ My SQL Consoul වලදි තමයි මේ SQL Commands ලබා දෙන්න පුලුවන්..
දැන් අපි බලමූ SQL භාවිතා කරලා කරන්න පුලුවන් මොනවද කියලා..

Database භාවිත කරලා විමසුම් (query) සකස් කරන්න..
Database එකකින් දත්ත ලබා ගන්න..
Database එකකට දත්ත ඇතුල් කරන්න..
Database එකක තියෙන දත්ත වෙනස් කරන්න..
Database එකක දත්ත ඉවත් කරන්න...
අලුතින් Database එකක් හදන්න..
අලුතින් වගු සකස් කරන්න..
Database එකේ ව්‍යුහය වෙනස් කරන්න..

*මේ SQL විධානයන් ANSI සම්මතයන්ට අනුව වෙනස් වෙනවා.. ANSI කියන්නෙ American National Standard Institute.

ඔන්න දැන් අපි SQL Commands ඉගෙන ගන්නයි යන්නෙ.. ඔයා වැම්ප්සර්වර් එකේ My SQL Consoul වල මේ commands type කරලා බලන්න මම කියලා දෙන ගමන්ම..

හොදයි මුලින්ම අපි බලමු database එකක් හදන්නෙ කොහොමද කියලා.. ම්ම්.. මුලින්ම කියන්න ඕනෙ අපි Commands වෙනම අදුන ගන්න කැපිටල් වලින් තමයි. ලියන්නෙ.. සිම්පල් වලින් ලිව්වත් අවුලක් නැහැ.. ඒත් මෙහෙම ලියමු හදුනා ගැනීමේ පහසුවට..

1. Database සැකසීම.

අපි දැන් නිකන් හිතමූ getway lanka කියලා ආයතනයක් තියෙනව කියලා.. මේකෙ වැඩ කරන සේවකයන්ගෙ තොරතුරු , ආයතනයේ තොරතුරු ඒ හැමදේම එකතු කරලා අපි database එකක් හදන්නයි යන්නෙ.. database එකේ නම Gateway info කියලා ගමුකො..

මේ බලන්න ඒක හදන්න Command එක දෙන විදිහ..

CREATE DATABASE Gateway_info

*create database කියන්නෙ විධානය. දැක්කද අපේ database එකේ නම දීලා තියෙන විදිහ.. මැදින් ස්පේස් තියන්නෙ නැහැ.. "_" දීලා තමයි වචන දෙක වෙන් කරලා තියෙන්නෙ..

2. Database භාවිතා කිරීම.

USE Gateway_info

* අපි දැන් මේ භාවිතා කරන්න යන්නෙ මොන database එකද කියලා තමයි මේකෙ විධාන දෙන්නෙ.. අපි database එක හදලා නැත්නම් හදන එක ඇරුනම අනිත් වැඩ ඔක්කොම පටන් ගන්න ඕනේ මේ command එකෙන්.. මොකද අපි දැන් use කරන්න යන්නෙ මොන db එකද කියලා කියන්නෙ නැතුව පටන් ගන්න බැහැ.

3. Table සකස් කිරීම.

ඔන්න දැන් අපි වගුව හදන්නයි යන්නෙ.. මේ command එක බලන්නකො.. ඊට පස්සෙ මම පැහැදිලි කරන්නම්..

CREATE TABLE employee
(Emp.ID int,
LastName varchar (20),
FirstName varchar (20) ,
Address varchar (50) ,
salary int)

මම මෙහෙම පේලියෙන් පේලියට ලිව්වෙ ඔයාට අවබෝධ කරලා දෙන්න ලේසි නිසා.. command එක එකටම ලිව්වට අවුලක් නැහැ..

හරි ඔන්න අපි දැන් බලමු.. මේ ටේබල් එකේ නම මම ගත්තෙ employee කියලා. මොකද සේවකයින්ගෙ විස්තර මේකට එකතු කරන්න බලාපොරොත්තු වෙන නිසා..

ඔන්න මම විධානය දීලා තියෙනවා employee කියන ටේබල් එක හදන්න කියලා..

ඊට පස්සෙ ඒකෙ Field තියෙන්න ඕනෙ ආකාරය ගැනයි මම කියලා තියෙන්නෙ. emp id, first name.. ඒවා තමයි field. Varchar , int කියන ඒවා ගැන ඔයාට ගැටලුවක් එන්න ඇති මේක දැක්කම.. Emp_ID බලන්න.. employee ගෙ ID එක තමයි මේ field එකේ අපි දාන්නෙ. මේ field එකේ දාන්නෙ සංඛ්‍යා. ඒ නිසයි int කියලා දාලා තියෙන්නෙ. (Integer) බලන්න.. salary එකටත් int දීලා තියෙන්නෙ සංඛයාවක් නිසා..
හරි. ඊලගට varchar. ඒකත් ඒ වගේ . ඒ field එකට දාන characters ගාන තමයි වරහන් ඇතුලෙ දාලා තියෙන්නෙ.. first name එකකට අකුරු 20 කට වැඩි වෙන්න බැහැනෙ නේද.. ඒ නිසා 20 ඇති. ඔයාට කැමති ගානක් දෙන්න පුලුවන් හොදේ.. ඒත් ගොඩක් වැඩි අකුරු ගානක් දෙන්න යන්න එපා මොකද memory එක waste වෙනවනෙ නිකන්.

***********************************

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

INSERT INTO

වගුවක් සදහා දත්ත ඇතුල් කිරීමට භාවිතා කරනවා.

අපි බලමු අපේ Employee වගුවට දත්ත එකතු කරන්න. බලන්නකො මේ Command.

INSERT INTO Employee (Emp.ID, LastName, FirstName , Address , salary) values (4 , 'perera', 'Nilu' , 'No.45, George Street ,Badulla.', 28000)

හොදට බලන්න.. int වලින් දෙන ඒවට අපි උධෘත දීලා නැහැ. සංඛයා නිකන්ම දීලා තියෙන්නෙ..

ටේබල් එකේ සියලුම field වලට අගයන් ඇතුල් කරනවා නම් මේ විදිහට field name ලියන්න ඕනෙ නැහැ හොදේ.. Values දෙන්න.

************************************

4. Table හි සැලැස්ම ලබා ගැනීම..

DESCRIBE Employee

ඔන්න මේ විදානය දුන්නට පස්සෙ ඔයා හදපු මේ employee table එක ඔයාට මේ විදිහට බලා ගන්න පුලුවන්. (Table එක කඩ ඉරි වලින් පෙන්නන්නෙ හොදේ..)

Field	Type	Not Null
Emp.ID	int (11)	yes
LastName	varchar (20)	yes
FirstName	varchar (20)	yes
Address	varchar (50)	yes
Salary	int (11)	yes

ඔයා බලන්න ඇති මේ Not null කියන්නෙ මොකද්ද කියලා.. යම් field එකක් not null ලෙස අර්ථ දැක්වුවොත් ඒ field එක හිස්ව තියන්න බැහැ.

5. වගුවක් ඉවත් කිරීම.

DROP TABLE employee

Employee කියන table එක ඉවත් වෙනවා..

6. Database එක ඉවත් කිරීම.

DROP DATABASE Gateway_info

7. Table එකේ ඇති දත්ත ලබා ගැනීම.

SELECT * FROM Employee

මේකෙදි * ලකුණ පාවිච්චි කරන නිසා table එකේ හැම field එකකටම අදාල දත්ත පෙන්නනවා.. මම ඉස්සරහට ඔයාට මේ ගැන ආයෙත් මතක් කරනවා අපේ table එකට data enter කරන්න මම කියලා දුන්නට පස්සෙ..

මේ SQL විධාන ප්‍රධාන කාණ්ඩ දෙකකට වෙන් කරන්න පුළුවන්..

1. DML - Data Manipulation Language.
2. DDL - Data Definition Language.

DML

Table එකේ දත්ත සමග කටයුතු කිරීම තමයි මේ විධානයන්ගෙන් සිදු කරන්නෙ..

SELECT - දත්ත ලබා ගැනීම.
UPDATE - වගුවේ ඇති දත්ත වෙනස් කිරීම.
DELETE - දත්ත ඉවත් කිරීම.
INSERT INFO - දත්ත ඇතුල් කිරීම.

DDL

Database හි ව්‍යුහය වෙනස් කිරීම, database එක සැකසීම වගේ දේවල් මේ command මගින් සිද්ධ කරනවා..

CREATE DATABASE - database සැකසීම.
ALTER DATABASE - database සැකසීම.
CREATE TABLE - වගු සැකසීම.
ALTER TABLE - වගු වෙනස් කිරීම.
DROP TABLE - වගු ඉවත් කිරීම.
CREATE INDEX - දත්තය පහසුවෙන් සෙවීම සදහා නම් කිරීම.
DROP INDEX - index ඉවත් කිරීම.

SELECT

අපි දැන් හිතමු අපිට ඕනෙ Employee කියන table එකෙන් LastName සහ FirstName ට අදාල තොරතුරු විතරක් ඕනෙ කියලා.
මෙහෙමයි command එක..

SELECT LastName, FirstName FROM Employee.

මෙහෙම out put එක ඔයාලා දකියි..

LastName	FirstName
perera	renu
Wikramasinghe	Arjuna
Herath	Wishaka

හොදයි..ඊලග කොටසින් අපි SQL වල ඉතිරි ටික ඉගෙන ගනිමු. ඔයා හොද අවබෝධයක් ගන්න අද උගන්වපු කොටස් ගැන. ගැටලුවක් තියෙනවා නම් කමෙන්ට් එකකින් අහන්න..

SQL පාඩම - 02

හරි. දැන් අපි වෙන table එකක් ගැනයි කතා කරන්නයි යන්නෙ. නම wether කියලා. අපි හිතමු ඒකෙ city කියලා field එකක් තිබුනා කියලා.. දැන් එකිනෙකට වෙනස් නගර සියල්ල ලබා ගන්න ඕනෙ අපිට.. බලන්න command එක ලියන හැටි..

SELECT DISTINCT City FROM Wether.

Wether ටේබල් එකෙන් city එක gall වෙන ඒවට අදාල සියලු තොරතුරු අපිට ඕනෙ කියලා හිතන්න.. මෙන්න command එක.

SELECT * FROM Whether WHERE City = 'Galle'

තේරුනාද.. * ලකුණ දැම්මෙ සියලුම තොරතුරු ගන්න ඕන නිසා..

හරි. මම දැන් ඔයාට විස්තරයක් දෙනවා. ඒකට command එක දෙන්න බලන්න..

Employee වගුවෙ salary එක 25000 වන අයගෙ අවසන් නමයි ලිපිනයයි ඕනෙ.

ඔයා ලිව්වද.. බලන්න හරිද කියලා..

SELECT LastName ,Address FROM Employee where Salary = '25000'

ඒ වගේම අපිට පුළුවන් යම් ගානක් දීලා ඒකට අඩු , වැඩි , වැඩි හෝ සමාන මේ වගේ විධානත් මේ Where එක්ක පාවිච්චි කරන්න..
මේ බලන්න..

= Equal
<> Not Equal
> Greater than
< Less than
>= Greater than or equal
<= Less than or Equal
BETWEEN
LIKE
IN තුල

හිතමු අපි persons කියලා වගුවක age කියලා field එකක් තියෙනවා කියලා. මම දැන් ඔයාට විස්තරයක් දෙනවා. ඒකෙ command එක ලියන්න..

persons වගුවෙන් වයස අවුරුදු 30 ට වඩා වැඩි හෝ සමාන වන අයට අදාලව LastName සහ FirstName ලබා ගන්න.

AND සහ OR Operators

Where යටතේ කොන්දේසි කිහිපයක් යොදා ගත යුතුයි නම් මේ ඔපරේටර්ස් දෙක යොදා ගන්න පුලුවන් අපිට..
බලන්න මේ command එක.

SELECT * FROM Persons WHERE FirstName = 'Wishaka' AND LastName = 'Siriwardhana.'

අපිට field දෙකක තොරතුරු දෙකක් ඕන වුනා. ඒ දෙක සත්‍ය කෙනාගෙ තමයි සියලු තොරතුරු ඕනෙ වෙන්නෙ..

ඊලගට or ගැන බලමු. හිතන්න මට ඕනෙ කියලා City කියන එක Anuradapura හෝ Plonnaruwa හරි කියන එකේ සම්පූර්ණ තොරතුරු ඕනේ කියලා.. බලන්න ඒකට අදාල මේ Command එක.

SElECT * FROM Persons WHERE City = 'Anuradhapura' OR City = 'Polonnaruwa'

දැන් අපි බලමු අලුත් field එකක් එකතු කරන්න ඕන වුනොත් ඒක කරන්න කොහොමද කියලා..
Employee field එකට Age කියලා field එකක් ඇඩ් කරන්න ඕනෙ කියලා හිතන්නකො.. මෙහෙමයි Command එක.

ALTER Table Employee ADD Address varchar (10)

Employee table එකේ තියෙන data LastName එකේ අවරෝහණ පිළිවෙලට හදන්න ඕනෙ නම් මෙහෙමයි..

SELECT * FROM Employee ORDERED BY LastName .

ඒකම අවරෝහණ පිළිවෙලට ඕන නම් මෙහෙම..

SELECT * FROM Employee ORDERED BY DESC.

UPDATE

Table එකේ විශේෂිත රෙකෝඩ් එකක තියෙන දත්ත වෙනස් කිරීම තමයි මේ UPDATE වලින් සිද්ද වෙන්නෙ..

හරි අපි මෙහෙම හිතමු. LastName Gunarathne සහ FirstName Muditha කියන කෙනාගෙ ලිපිනය Katubedda, Moratuwa කියලයි සැලරි එක 30000 කියලයි වෙනස් කරන්න ඕනෙ කියලා. බලන්නකො මේ Commands.

SET Address = 'Katubedda, Moratuwa' , salary = 30000 WHERE LastName = 'Gunarathne.' AND FirstName = 'Muditha'

DELETE

Table එකෙන් රෙකෝඩ් එකක් හරි කීපයක් හරි ඉවත් කරන්න DELETE භාවිතා කරනවා අපි.
මේක බලන්න.. galle, Mathara ජීවත් වෙන අයගෙ සියලුම තොරතුරු ඉවත් කරන්න තමයි මේ Command එක.

DELETE FROM Employee WHERE City = 'Galle' OR City = 'Mathara'

LIKE Operator

Examples ටිකකින්ම මම කියලා දෙන්නම්..

SELECT * FROM Employee WHERE City LIKE "ka%"

ඒ කියන්නෙ සිටි එක ka වලින් පටන් ගන්න නගර වල සියලුම තොරතුරු. Kadawatha , Kathaeagama... ඒ වගේ නගර.
බලන්න මේක..

SELECT * FROM Persons WHERE City LIKE "%la"

මේකෙන් කියන්නෙ සිටි වල අවසන් අකුරු දෙක la වෙන ඒවායෙ සියලුම තොරතුරු ලබා ගැනීම.

IN Operator

SELECT * From Employee WHERE LastName IN ('Senawirathne', 'Kumarasinghe' )

Last Name එක Senawirathne හා Kumarasinghe වන අයගෙ සියලුම තොරතුරු එනවා..

ඔන්න අපි අන්තිම වගේම වැදගත්ම කොටසටත් ආවා. දැන් ඔයාට table ගොඩ නගන්න පුලුවන්නෙ නේද.. අපේ database එකේ මේ වගේ Tables ගොඩක් තියෙන්න පුලුවන්. ඒ Tables අතර සම්බන්ධය ගොඩ නගන්න අපිට key ඕන වෙනවා..
මෙහෙම හිතන්න. පාසල database එකක් ගැන. ටීචර්ස් සහ ස්ටුඩන්ට් කියලා ටේබල් දෙකක් තියෙනවා.. එක් සිසුවකුගෙ පන්තිය භාර ගුරුතුමාව අපට හොයා ගන්න ඕන වෙනවා.. ඉතින් ඒ සිසුවට අදාල තොරතුරක් ඔස්සේ අපිට ටීචර්ස්ලගෙ ටේබල් එකටත් යන්න වෙනවා.. ඒකෙදි ටීචර්ස් සහ ස්ටුඩන්ට් කියන ටේබල් දෙක අතරෙ සම්බන්ධයක් තියෙන්න ඕනෙ කියන එක ඔයාට වැටහෙනවා නේද..
හරි අපි බලමු ඒ keys.

Candidate Key

සම්බන්ධයක රෙකෝඩයක් අනන්‍යව හදුන ගන්න පුලුවන් උපලක්ෂණය තමයි මේක.
බලන්න මේ ටේබල් එකේ Candidate Key එක.

Student (R_No, ID_No, Name, Add)

බලන්න R_No ඒ කියන්නෙ Registor Numbe. එක ලමයෙකුට තියෙන්නෙ එක R No එකක්. ඒ නිසා එක රෙකෝඩ් එකක් වෙන්ව හදුන ගන්න මේක පහසුයි. ID_No ත් එහෙමයි. ඒත් Name , Address මේවා නම් ලමයින් දෙන්නෙකුට, කිහිප දෙනෙකුට සමාන වෙන්න පුලුවන්.

Primary Key

Candidate Key අතරින් වගු අතර සම්බන්ධතාවය ගොඩ නැගීම සදහා යොදා ගන්න candidate key එක තමයි ප්‍රාථමික යතුර වෙන්නෙ.

Alternate Key

Candidate Key අතරින් primary key ඇරෙන්න ඉතිරි keys තමයි Alternate Key වෙන්නෙ. කියන්න බලන්න මම දීපු example එකේ Alternate Key එක.. ඔව්. ID No.

Foreign Key.

Table දෙකක් අතර සම්බන්ධතාවය ගොඩ නැගීම සදහා කිසියම් වගුවක ප්‍රාථමික යතුර ඊට සම්බන්ධ වන වගුවේ ආගන්තුක යතුර (Foreign Key) වෙනවා.
ප්‍රාථමික යතුරේ සහ ආගන්තුක යතුරේ Field Name සමාන වෙන්න ඕන නැහැ.. ඒත් දත්ත වර්ගය සමාන වෙන්න ඕනෙ..
දැන් අපි බලමු මේ key SQL Command වලදි යොදන්නෙ කොහොමද කියලා..

Unique

කිසියම් Field එකක් table එකේ අනන්‍ය යතුර විදිහට හැදින්වීම සදහා භාවිතා කරනවා.. අපි හිතමු අනන්‍ය යතුර Emp.ID කියලා. මේ බලන්න..

CREATE TABLE employee
(Emp.ID int,
LastName varchar (20),
FirstName varchar (20) ,
Address varchar (50) ,
salaty int,
UNIQUE (Emp.ID))

Primary Key

CREATE TABLE employee (Emp.ID int,
LastName varchar (20),
FirstName varchar (20) ,
Address varchar (50) ,
salaty int,
PRIMARY KEY (Emp.ID))

පාඩමේ ගැටලුවක් ඔයාට ආවොත් කමෙන්ට් එකකින් අහන්න..

HTML - 01 පාඩම.

ඔන්න මම පටන් ගන්නෙ HTML වලින්. ඔයා මේ language එක ගැන හොදටම දන්න කෙනෙක් ( පොඩි පොඩි තැන් අපහසු.) ,ටිකක් දන්න කෙනෙක්,  මුකුත්ම නොදන්න කෙනෙක් වෙන්න පුළුවන්. ඒත් මම දැන් කියලා දෙන්න යන්නෙ මේ හැමෝම 'නොදන්න අය' කියන තැන ඉදලා.. ඉතින් ඔන්න එහෙනම් අපි පටන් ගමු  HTML ඉගෙන ගන්න..

ආ.. තවත් එකක්. ඔයා දැන් නවල් එකක් කියවනවා වගේ මේක කියවන්න නම් ලෑස්ති වෙන්න එපා.. ඒක සාර්ථක නැහැ.  ඔයා මම කියලා දෙන ඒවා කම්පියුටර් එකේ නොට් පෑඩ් එකේ ටයිප් කරලා ඒක ( නමක්).html කියලා හරි (නමක්).htm කියලා හරි save කර ගෙන browser  එකෙන් ඕපන් කරලා බලන්න හොදේ..

හරි අපි පටන් ගමු. 
HTML කියන එකේ තේරුම දන්නවද ඔයා..?

HTML - Hyper Text Markup Language.

මේ HTML භාෂාව HTML Tag වල එකතුවකින් හැදිලා තියෙන නිසා මේක පරිඝනක භාෂාවක් කියලම නෙමෙයි 'Markup Language' එකක් විදිහට  හදුන්වනවා.. මේ ටැග් කියන ඒවා වෙබ් පිටුව පවතින ආකාරය විස්තර කරනවා..

•HTML Tag

HTML Tag කියලා කියන්නෙ ඈන්ගල් බ්‍රැකට්ස් වලින් ආවරණය වුන විශේෂ වචන.. මේ බලන්න.. <html> ,<body>

ඒත් එක්කම කියන්න ඕනෙ මේ html tag වල case sensitive නැහැ.. ඒ කියන්නේ... කැපිටල් සිම්පල් භේදයක් නැහැ.. ඔයා ට මෙහෙම ඕන විදිහකට කෝඩින් කරන්න පුළුවන්.. <Body> <body> <BODY> .

මේ html ටැග් බොහෝමයක් ආරම්භ සහ අවසන් කියලා යුගල විදිහට තියෙනවා.. මේ බලන්නකො...
<html> </html>
<body> </body>

ඒ ඇයි කියලා මම කියන්නම්.

<body> - පිටුවේ body කොටසේ ආරම්භය.
</body> - පිටුවේ body කොටසෙහි අවසානය.

ඒ කියන්නෙ වෙබ් පිටුවෙ බොඩි කොටස තියෙන්නෙ මේ දෙක අතර මැද. තවත් ඉස්සරහට යනකොට ඔයා දකීවි.

තවත් ටැග් ජාතියක් තියෙනවා එහෙම ආරම්භ අවසාන කියලා දෙකක් නැහැ. තියෙන්නෙ එකම ටැග් එකයි. 
මෙන්න උදාහරණ : <br> <hr>

මම පටන් ගන්නකොටම ඔයාලට කිව්වනෙ මම කියලා දෙන ඒවා note pad එකේ type කරලා browser එකෙන් බලන්න කියලා.. දන්නවද තවත් ඒ වගේ ක්‍රම දෙකක් තියෙනවා වෙබ් පේජ් එකක් හදන්න. මම ක්‍රම තුනම පැහැදිලි කරන්නම්කො..

i. Note pad භාවිතයෙන් සැකසීම.

                    මේකෙදි html tag පිළිබද පුලුල් දැනුමක් ඕනේ. ඒක ක්‍රියාත්මක කරන විදිහ මම පැහැදිලි කරානෙ මුලින්.

ii. Dream weaver , Frount page වගේ මෘදුකාංග භාවිතයෙන් සැකසීම.

                 මේවයෙදි නම් ටැග් ලියන්න ඕනෙ නැහැ.. අපිට තියෙන්නෙ අකුරු, පිංතූර, වගු ඇතුල් කරලා වෙබ්  පේජ් එක හදන්නයි.

iii. විවෘත මූලාශ්‍ර මෘදුකාංග භාවිතයෙන් සැකසීම.

                Joomla,Drupal, Wordpress කියන විවෘත මූලාශ්‍ර මෘදුකාංග භාවිතා කරලා පුලුවන්.

• html වල මූලික ටැග්

1. <html> </html>
2. <head> </head>
3. <title> </title>
4. <body> </body >

වෙබ් පිටුවෙ අන්තර්ගතය ටැග් වලින් විස්තර කරනවා.. එම ටැග් එක ක්‍රියාත්මක වන ආකාරය උප ලක්ෂණ (attribute ) වලින් විස්තර කරනවා. උප ලක්ෂනයකින් විස්තර කරන දේ  උධෘත ඇතුලෙ තමයි දාන්නෙ.. අහ් තේරුනේ නැද්ද.. හි හී. ඒ කිව්වේ.... double quotation ඇතුලෙ..

මං කියලා දෙන්නම්. බලන්නකො මේ උදාහරණය..

<hr size = "15 " align = "left" >

hr කියන්නෙ ටැග් එක.  (ඉරක් අදින්න භාවිත කරන ටැග් එක. මම ඉස්සරහට වෙනම ඔයාලට කියලා දෙනවා ඒ ගැන.)
size , align කියන්නෙ attributes . ඒ අදින ඉර ගැන විස්තර කරනවා.. ඒකෙ සයිස් එක. ඒක වමෙන් පෙන්නන්න ඕනෙ කියන එක. දැන් ඒ ගැන පොඩි අදහසක් ඔයාලට එන්න ඇති.

හරි අපි දැන් බලමු මේ ටැග් වලින් කරන්න පුලුවන් දේවල්.

1.  <html>

  අපි කෝඩින් කරන්න පටන් ගන්නෙ මේකෙන්. අපේ මුලු කෝඩින් එකම තියෙන්නෙ <html> </html > මේ ටැග් දෙක අතරයි.

මේක චුට්ටක් බලන්නකො.

<html >
  <head>
    <Title> This is my blog 
     </title>
  </head>
</html>

පේනවද.. මම මේ කරලා තියෙන්නෙ අපි හදන වෙබ් පේජ් එකේ title එක විදිහට This is my blog කියන එක දීලා තියෙනවා.. ඔයා බැලුවද මේක බ්‍රවුස එකෙන් ඕපන් කරලා.. Title bar එකේ පෙන්වනවා ඇති This is my blog කියලා. හරි නේද.. මේ title එක අනිවාර්‍යෙන් තියෙන්න ඕනෙ head ටැග් තුල තමයි හොදේ..

හරි බලන්නකො මේකත්..

<html >
  <head>
    <Title> This is my blog 
     </title>
  </head>
<body bgcolor = "#ff0000" >
<body>
</html>

අලුතෙන් එකතු වුන දේ දැක්කද. බොඩි ටැග් එක. උපලක්ෂනයක් දීලා තියෙනවා bgcolor කියලා.. මම කලිනුත් කිව්වා ටැග් එක විස්තර කිරීමක් මේ උපලක්ෂනයෙන් දෙන්නෙ කියලා. මේකෙන් කියවුනේ බොඩි වර්ණය රතු කියන එක. ඔයා කරලා බැලුවද.. මුලු පේජ් එකම රතු පාට වෙලා ඇති. වර්ණය දාපු විදිහ ගැන කලබල වෙන්න එපා.. මම ඉදිරියෙදි කියන්නම්. ඔයා මේ ටැග් සහ උපලක්ෂන ගැන විතරක් තේරුම් ගන්නකො දැනට.

•HTML Heading

බලන්නකො මේක හොදට.. ඊට පස්සෙ මම කියලා දෙන්නම්..

<html>
<body>

<h1 align = "left" > Heading 1 </h1>
<h2 align = "center" > Heading 2 </h2>
<h3 align = "right" > Heading 3 </h3>
<h4> Heading 4</h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

</body>
</html>

බ්‍රව්සර් එකෙන් ඔපන් කරලා බැලුවම ඔයාට පැහැදිලි වෙයි.. 
මේ h1, h2.. කියලා ටැග් හයක් තියෙනවා.. ඒවා තමයි මේ හෙඩින් වල සයිසස්. ලොකුම සයිස් එක h1 ත් අනිත් ඒවා ටික ටික පොඩි වෙන සයිස් කියලත් ඔයාට පෙනෙයි. බලන්න align කියන උපලක්ෂනයෙන් ඒවා තියෙන්න ඔනේ තැන කියලා තියෙනවා.. වම, දකුණ, මැද..

•Html comments

Html කමෙන්ට්ස් ( විවරණ) කියන්නෙ මොනවද කියලා අපි බලමු.

මේවා වෙබ් පේජ් එකේ පෙන්නන්නෙ නැහැ.. කෝඩින් කරන කෙනාට විතරයි පේන්නෙ.. මේ කෝඩින් ගැන මොකක් හරි විශේෂිත හැදින්වීමක්, මැසේජ් එකක්... මේකෙ කෝඩින් බලන වෙන කෙනෙකුට දෙන්න ඕනෙ උනා ම හරි නැත්නම් තමන්ටම තවත් ගොඩක් කාලෙකට පස්සෙ අයෙත් කෝඩින් බලදිදි තේරුම් ගන්න බැරි වෙයි කියලා හිතෙන දෙයක්  කියන්න අපට පාවිච්චි කරන්න පුලුවන මේ කමෙන්ට්ස්.. මේක දාන්නෙ කොහොමද කියලා මම පෙන්වන්නම්. ඔයා කරලා බලන්න. එතකොට තේරෙවි..

<html>
<body>
<!__ ICT දැනුම __>
<p> what is my blog's name ? </p>
</body> 
<html>

බලන්න.. ICT දැනුම කියන එක කෝඩින් වල විතරමයි පෙන්නන්නෙ.. පේජ් එකේ පෙන්නන්නෙ What is my blog's name? කියන එක විතරයි. කමෙන්ට් එක දාන්න භාවිත කරපු symbols ඈත් කරලා පෙන්නන්නම්.  < ! _ _ උදාහරණය _ _ > 
මේ කමෙන්ට්ස් කොල පාටින් පෙනේවි ඔයාට.

• HTML Paragraph

Html ඡේද ගැන බලමු අපි.. මම කමෙන්ට්ස් ගැන දීපු කෝඩින් උදාහරනයේ  ඔයා දැක්කද <p> කියලා ටැග් එකක්. අන්න ඒක තමයි ඡේද සදහා භාවිතා කරන්නෙ අපි.
දැන් ඔයාගෙ පොඩි අවබෝධයක් හැදිලා  තියෙනවා කෝඩින් ගැන. මම මේ උදාහරනයෙන් පස්සෙ ඊළග එකට යන්නම්. ඔයා මේකත් තේරුම් අරන් කරලා බලන්න..

<html> <body>
<P> mmmmmmmmmmmmmmmmmmmmmmmmmmm</P>

<P> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</P> 

<P> nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn </P> 

<P>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </P>

</body> </html>

*මෙන්න පේජ් එකේදි ඔයාට පේන විදිහ..

mmmmmmmmmmmmmmmmmmmmmmmm
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ඡේද හතරක්. 
ඇරපු ටැග් එක වහන්න මතක තියා ගන්න.. මුලින්ම ඇරියෙ html. ඊලගට body. ඊලගට p. 
වහනකොටත් p වැහුවා.  ඊලගට body. අන්තිමට html.

•HTML Break

ඔයා නෝට් පෑඩ් එකේ ටයිප් කරනකොට enter බට්න් එකෙන් මොකද්ද කරන්නෙ??  ඊලග පේලියට යන එක නේද.. 
ඒත් මේ html කෝඩින් කරනකොටත් ඔයා එහෙම එන්ටර් කරලා ඊලග පේලියට ගියා කියලා පේජ් එකේ එහෙම වැටෙන්නෙ නැහැ.. ඒකටත් ටැග් එකක් තියෙනවා.. ඒ තමයි <br> ටැග් එක.. මතකද මම මුල්ම පාඩමේදි උදාහරණයකට ඔයාට දුන්නා මේක තනි ටැග් එකක් කියලා.. 
මම පෙන්නන්නම් මේක යෙදෙන හැටි

<html> <body>
<p> My name is <br> Muditha <br> Prabhani. </p>
</body> </html>

දැන් බලන්න පේජ් එකේදි මේක පෙන්වන විදිහ..

My name is
Muditha
Prabhani.

බලන්න.. br ටැග් එක දාපු තැනින්  break වෙලා ඊලග පේලියට ඇවිත්.

•Horizontal line

තිරස් රේඛා ඇදීම.. ඒකට භාවිතා වෙන්නෙ <hr> ටැග් එක.. ඒකත් තනි ටැග් එකක් කියලා මම කිව්වා ඔයාට මතක ඇති.  
බලන්න මේ උදාහරණය...

<html> <body> 
<p> I'll explain you about horizontal rule </p> <hr> 
</body> </html>

පැරග්‍රාෆ් ටැග් ඇතුලෙ මම දීපු සෙන්ටෙන්ස් එක් යටින් තිරස් ඉරක් ඔයාට පේජ් එකේ පෙනේවි..

උපලක්ෂන තේරුම් කරන්න මම උදාහරණ වලට ගත්තෙත් hr ටැග් එක බව මතකද ඔයාට... මේ hr ටැග් එකට තියෙන උපලක්ශන පහක් මම කියලා දෙන්නම් ඔයාට..

i. Size

තිරස් රේඛාවෙ ඝනකම තීරණය කරන එක..

<hr size = "15">

ii. Width

තිරස් රේඛාවෙ දිග තීරණය..  මේක pixel අගයකින් කියන්නත් පුලුවන්.. ප්‍රතිශතයක් විදිහට කියන්නත් පුලුවන්..

*pixel අගයකින්
<hr width =  "550" >

*ප්‍රතිශතයක් ලෙස
<hr width = "60%" >

iii. Alignment

රේඛාව පිහිටන ස්ථානය තිරණය කිරීම..
<hr align = "left">
<hr align = "center">
<hr align = "right">

iv. Noshade

ඒ රේඛාව ඇතුලට සෙවනැල්ලක් (අළු පැහැ වර්ණයක්) එක් කිරීම
<hr size = 50 noshade>

v. Color

රේඛාවේ වර්ණය සකස් කිරීම

<hr color = "#00ff00">

*උදාහරණ නිසා මම වෙන වෙනම දැම්මට මේ ඔක්කොම එකම ටැග් එකේ උපලක්ශන විදිහට එකට දාන්න පුළුවන් හොදේ..

<hr size = "30" color = "0000ff" align = "left" >

හරි.. ඔන්න මම වර්ණ ගැන කියන්නම් ඊලඟ පාඩමේදි.. මේ කියලා දීපු ටික හොදට ප්‍රැක්ටිස් කරලා එන්නකො..

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

HTML - 02 පාඩම.

ඔන්න අද පාඩමේ මුලින්ම මම වර්ණ ගැන කියලා දෙන්නම් ඔයාට..

• Html color attribute

වර්ණයක් යෙදීමේ උපලක්ශනය තමයි මේ color කියන්නේ..

RGB වර්ණ සංකලනය තමයි අපි යොදා ගන්නෙ... ඔයා දකින්න ඇති වර්ණ වලට ඉස්සෙල්ලා පාඩම් වලදි මම ලියපු කෝඩ්..

# ff0000
characters හයක් තියෙනවා.. RGB වර්ණ  සංකලනය කියලා මම කිව්වනෙ.. Red Green Blue. පිලිවෙලින් මේ එක වර්ණයකට characters දෙකක් වෙන් වෙනවා..
O----> No color
F----> Full color

දැන් ඔයාට කියන්න පුලුවන්ද මම ඉහතින් දීලා තියෙන වර්ණය මොකද්ද කියලා.. රතු වලට අයත් characters දෙක ff . ඒ කියන්නෙ full color. අනිත් හතරම 0.  no color. ඒ කියන්නෙ මිශ්‍ර නොවුන පිරිසිදු රතු වර්ණය.. දැන් ඔයාට පුලුවන්ද කොල සහ නිල් වර්ණ ලියන්න.. ඒ characters හයට ඉස්සරහින් # දාන්නත් ඕනෙ.

කොල --> 00ff00
නිල් --> 0000ff

ඔයා o/l IT කරපු කෙනෙක් නම් මතක ඇති text book එකේ තිබුනා පිටු දෙකක්ම මේ වර්ණ කෝඩ් දීලා.. හෙක්සාඩෙසිමල් අගයන් (0-9 and A-F ) දාලා ඔයාට කැමති විදිහට වර්ණ හදා ගන්න පුලුවන්නෙ දැන්.
ඒ වගේම තව දෙයක්. ඔයාට මේකෙදි ඕන නම් වර්ණයේ නමත් පාවිච්චි කරන්න පුලුවන්..

<font color = "red">

පිටුවෙ සියලුම අකුරු වලට වර්ණයක් යොදන්නෙ මෙහෙමයි..

<html>
<body text = "#00ff00">
</body>
</hlml>

ඔයා මේ දේවල් වලට අලුත් ම කෙනෙක් නම් පුරුදු වෙන්නත් එක්ක colours කරලා බලන්න.. බොඩි ටැග් එකට colours දානවා නම් bgcolor කියලා තමයි දාන්නෙ හොදේ.. එතකොට ඔයා දීපු ඒ colour එක background colour එක විදිහට පෙනේවි..

ඒත් එක්කම තව දෙයක්.. වෙබ් පේජ් එකක් අපි පරිහරණය කරද්දි ඒකෙ background colour එක තද වර්ණයක් වුනොත් අපේ ඇස් වලට ගොඩක් අමාරුයි නේද.. ඒ නිසා background colour තෝර ගනිද්දි ලා වර්ණයන් තෝර ගන්න..

• fonts

ඔන්න තවත් වැදගත් කොටසකට අපි ආවා.. ඔයාට මතකද ඔයා microsoft word එකේ වැඩ කරද්දි bold , underline , Italic පාවිච්චි කලා.. අපි දැන් බලමු ඒ අකුරු හැඩ කිරීම් කෝඩ් වලින් කොහොමද කරන්නෙ කියලා..

මම කෙටියෙන් ඒ ටැග් ටික දෙන්නම්.. ඔයා කරලා බලන්න..

*bold - <b> </b>
*big - <big> </big>
*small - <small> </small>
*underline - <u> </u>
*code - <code> </code> ( මේකෙදි හැම අකුරකටම එකම ඉඩක් වෙන් කරනවා. )

ඊලගට අපි බලමු subscript, superscript. ඒකත් word එකෙදි කලා මතකයි නේද..

*subscript

<p> H ₂ O </p>

*superscript

<p> 1 ^st </p>

• font size

අකුරු වල ප්‍රමාණය ලබා ගන්නා ආකාරය බලමු අපි ඊලගට.. font කියන ටැග් එකේ size කියන attribute එකේ අපිට අවශ්‍ය සයිස් එක සටහන් කරන්න පුලුවන්..

Small size - 1, 2
Normal size - 3
Large size - 4, 5, 6, 7

බලන්න උදාහරණයකුත්...

<P>
<font size = "4" > My blog </font>
</p>

• List in HTML

ඊලගට අපි යන්නෙ ඡේද වලට විශේෂ සලකුණු යොදන හැටි සහ ලැයිස්තුගත කරලා ලියන්න කෝඩින් කරන හැටි දැන ගන්න..

ලිස්ට් වර්ග දෙකක් තියෙනවා.. ordered list සහ unordered list . ඔයාට මතක තියා ගන්න ලේසි වෙන්න මම මෙහෙම කියන්නම්කො.. Ordered කියන එකේ පිලිවෙලක් තියෙනවා ලැයිස්තුගත කරන්න..

මේ බලන්න..
1, 2, 3......
i, ii, iii.....
A, B, C.....
a, b, c.....

unordered list වලදි තියෙන්නෙ

Disk •
Circle °
Square

ඒ දෙකට උදාහරණ කියලා දෙන්න කලින් මට ඔයාට වාක්‍ය ඛණ්ඩයක් අර්ථ දක්වන හැටි කියලා දෙන්න ඕනේ.. ඒ කියන්නෙ definition lists.

බලන්න මේ දිහා....

My tom
       A fun game

My tom කියන එක අර්ථ දක්වලා තියෙනවා fun game එකක් කියලා..

බලමු දැන් ඒක කෝඩින් කරන්න..

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

Definition lists කියන එකට <dl> ටැග් එක භාවිතා කරනවා.. <dl> </dl>

My tom  කිව්ව එකනෙ topic එක.. ඒකනෙ අපි විස්තර කලේ.. ඒ නිසා ඒක definition topic එක.. ඒකෙ ටැග්ස් තමයි <dt> </dt>

ඊලගට a fun game කිව්වෙ අර topic එක  විස්තර කිරීම. දත්තය. ඒක තමයි definition data. ඒකෙ ටැග්ස් තමයි <dd> </dd>

හරි. තේරුම් යන්නත් එක්ක මේක බලන්නකො...

Sigiriya
       Ancient city.
Srilanka
        small country.

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

අපි මේ ලියන්න යන්නෙ definition list එකක්. ඒ නිසා මොන ටැග් දෙක ඇතුලෙද මේවා ලියවෙන්න ඕනේ?? ම්ම්... ඔව් <dl> </dl> අතරෙ.

<dl>

<dt> Sigiriya </dt>
<dd> Ancient city. </dd>

<dt> Srilanka </dt>
<dd> small country. </dd>

</dl>

හරි නේද.. කරලා බලන්නකො... තේරුම් යාවි.

දැන් අපි ordered list පැත්තට හැරෙමු. Ordered list වල ටැග්ස් තමයි <ol> </ol>

අපි බලමු කෝඩ් එකක්.

<ol>

<li> srilanka </li>
<li> india </li>

</ol>

<li> </li> මේ ටැග් දෙක අතරෙ තමයි ලිස්ට් එකේ දේවල් ලියන්න.. පිලිවෙලක් ඇතුව ලියවෙන ඒවා කියලා මම කිව්වා නේද.. සදහනක් කලත් නොකලත් එකේ ඉදලා තමයි ලිස්ට් එක වැටෙන්නෙ.. බලන්නකො..

1. srilanka
2. india

ඒත් ඔයාට ලිස්ට් එක දාන්න ඕනෙ හයේ ඉදලා කියලා හිතන්න.  අන්න එතකොට නම් ඇට්‍රිබියුට් එකක සහය පතන්න වෙනවා.. srart කියන එකෙන් තමයි අපිට ඕනෙ කීයෙ ඉදලද කියලා සටහන් කරන්න ඕනෙ..

මේ බලන්න...

<ol type = 1 start = 6 >

<li> srilanka </li>
<li> india </li>

</ol>

එතකොට මෙන්න මේ විදිහයි..

6. srilanka
7. india

ඔයාට ප්‍රශ්නයක් ආව නේද ඇයි මම type කියලා ත් එකක් දාලා තියෙන්නෙ කියලා.. ඒ තමයි ලිස්ට් එක යන්නෙ මොන වර්ගෙන්ද කියලා.. 1,2,3.. ඒ විදිහට යන්න ඕන නම් 1 දාන්න.. a,b,c.. විදිහට නම් a.  A,B,C... ඕනෙ නම් A දැම්මම හරි. පටන් ගන්න ඕනෙ තැන කොතන  ඉදලද.. කීයේ ඉදලද කියලා start එකෙන් දෙන්න..

හරි එහෙනම් අපි බලමු unordered list.
ටැග්ස් තමයි <ul> </ul>

මේ ලිස්ට් එක දිහා බලන්න.. සිංහලෙන්ම ලිස්ට් එකක් ගමු අපි බලන්න..

මගේ විෂයන් වන්නේ..
• තොරතුරු තාක්ෂණය.
• ජීව විද්‍යාව.
• භෞතික විද්‍යාව.

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

බලන්න කෝඩින එක.

<html> <body>

<h3> මගේ විෂයන් වන්නේ.. </h3>
<ul type =disk >
<li> තොරතුරු තාක්ෂණය. </li>
<li> ජීව විද්‍යාව. </li>
<li>භෞතික විද්‍යාව. </li>
</ul>

</body> </html>

හරි නේද.. කරලා බලන්නකො..
ඔයා මේ ලිස්ට් වලට අලුත් නම් ටිකක් ප්‍රැක්ටිස් කරන්න එක එක ලිස්ට් අරන්. මම දෙන්නද ලිස්ට් ටිකක්. කෝඩින් කරලා බලන්න හරිද කියලා...

fruits are,
       •Mango.
       •Banana.
       •Apple.

Other Teledramas
   iv. T20.
    v. Neranjana.

1. Institue
           ° Education.
           °Commercial.
                           b. Foreign.
                           c. Local.

(අන්තිම එකට බය වෙන්න එපා. ලිස්ට් එකක් ඇතුලෙ ලිස්ට් එකක්. කරන්න. ඔයාට පුලුවන් ඒක.)

•Pre formatted text.

මේකෙදි කරන්නෙ ඡේදයක්, ඒ සකස් කරන විදිහටම වෙබ් පිටුව තුල පෙන්නනවා.. ඔයාට මතක ඇති මම කිව්වා නෝට් පෑඩ් එකේ අපි enter කලත් space 10 ක් තියලා ටයිප් කලත් පේජ් එකේ එහෙම පෙන්නනෙ නෑ කෝඩින් කරන්න ඕනෙ කියලා.. පෑඩ් එකේ අපි කරන විදිහටම වෙන්න එහෙම යොදා ගන්න පුලුවන් ටැග් එකක් අදුන්වලා දෙන්නයි යන්නෙ..
මේ  <pre> ටැග් එක.

පොඩි උදාහරණයකට යමු. හිතන්න ඔයාට ඕනෙ කියලා my name කියන වචන දෙක අතර space හයක් තියන්න ඕනෙ කියලා.. මෙන්න මෙහෙමයි කෝඩින්   එන්නෙ..

<p>
<pre> my      name </pre>
</p>

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

• Address Tag

Address ලියන්නත් ටැග් එකක් තියෙනවා.. උදාහරණයකින්ම පෙන්නන්නම්කො...

<Address>
A.B.C. Wirarathne. <br>
No. 34 <br>
George street <br>
Badulla.
</Address>

• HTML  Image

වෙබ් පේජ් සදහා images එකතු කිරීමයි මේ කියලා දෙන්න යන්නෙ..

ඉස්සෙල්ලම කියන්න දෙයක් තියෙනවා.. ඔයාගෙ වෙබ් පේජ් එකේ නම  max.html කියලා හිතමු. ඔයා ඒ වෙබ් පේජ් එකට එකතු කරන්න ඉන්න image එකත් තියෙන්න ඕනෙ ඒ පේජ් එක save කරලා තියෙන folder එකේමයි. ඒ folder එක ඇතුලෙම image කියලා තව folder එකක් හදලා ඒකේ තියෙන්නත් පුලුවන්. එතන ඉදලා හරියට පාත් එක ලියන එක තමයි වැදගත්ම..

අපි හිතමු max.html කියන පේජ් එක සේව් කරලා තියෙන ෆෝල්ඩර් එකේම image කියලා folder එකක flower1.jpg  කියලා image එකක් තියෙනවා කියලා. අපිට දැන් ඒ image එක වෙබ් පේජ් එකට දාන්න ඕනේ.. මේ බලන්න කෝඩින්..

<html > <body>
<img src = "image/flower1.jpg">
</body> </html>

ටැග් එක img . attribute එක src . හොදට බලන්න close ටැග් එකක් නැහැ හොදේ.. පාත් එක දීලා තියෙන විදිහ බලන්න.. image folder එක ඇතුලෙ තියෙන flower1.jpg .

flower1.jpg කියලා විතරක් දෙන්න නම් max.html කියන වෙබ් පේජ් එක අපි save කරලා තියෙන තැනට සමාන්තරවම  flower1.jpg කියම image එක save වෙලා තියෙන්න ඕනෙ.
img ටැග් එකට යෙදෙන attributes ගැන මම කියලා දෙන්නම් ඊලගට...

<img src = "image/flower1.jpg" alt = "rose flower" align = "top" width = 200  border = 2 hspace = 30 vspace= 10 >

හරි අපි එකින් එක බලමු. src කියලා දුන්නනෙ.

ඊලගට alt. ඔයා දැකලා තියෙනවද වෙබ් පේජ් එකක image එකක් උඩට cursor එක ගෙනියනකොට ඒ image එකේ නමක් පෙන්නනවා.. අන්න ඒ විදිහට නමක් දෙන්න අපිට alt එකෙන් පුලුවන්.

ඊලගට align. ඒක නම් කලින් පාඩමකදි මම කියලා දුන්නා.. image එක පිහිටන්න ඕනෙ කොතනින්ද කියලයි කියවෙන්නෙ.. මේකෙ මම දුන්නෙ. top එකෙන්.

width & hight කියලා දෙකක් තියෙනවා.. image එකේ උසයි පළලයි. ඔයා හොදට මතක තියා ගන්න උසයි පලලයි දෙකම දෙන්න යන්න එපා. එකක් දෙන්න. ඒ ඇයි දන්නවද.. අපි උස දුන්නොත් ඒ උසට හරි යන්න image එකේ පලල හැදෙනව.. පලල දුන්නොතුත් එහෙමයි. ඒත් දෙකම දුන්නොත් අපි කියම විදිහට උස පලල හැදිලා image එක විකෘති වෙනවා..

ඊලගට border එක. Image එකට මම 2 ක border එකක් දීලා තියෙනව.

hspace. ඒ කියන්නෙ horizontal space. තිරස් දුර. අපේ image එකේ ඉදලා පේජ් එකේ කෙලවරට තියෙන්න ඕනෙ තිරස් දුර.

Vertical space. සිරස් උස.

හොදයි ඔයා images ඔයාගෙ වෙබ් පේජ් එකට දාලා බලන්නකො මේ වගේ..

වෙබ් පේජ් එකේ පසුබිමට image දාන්න ඕනෙ නම් මේ විදිහයි...

<html>
<body background = image/sea.jpg>
</body>
</html>

අපි ඊලග පාඩමේදි බලමු link ගැන...

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

HTML - 03 පාඩම.

• HTML Link

Internet එකේ සැරිසරන ඔයාට ලින්ක් ගැන නම් අමුතුවෙන් විස්තරයක් ඕන නැහැනෙ නේද..
හරි. එක් වෙබ් පිටුවක තියෙන වාක්‍ය ඛණ්ඩයක් හෝ පිංතූරයක් වෙනත් වෙබ් පිටුවකට සම්බන්ධ කරන්න අපි යොදා ගන්නවා මේ ලින්ක්..

ටැග් තමයි.... <a> </a>
ඇට්‍රිබියුට් තමයි... href

(එච් රෙෆ්. ඒ කියන්නෙ Hypertext reference. )

•Hyper Link - අධිසම්බන්ධය

කිසියම් වාක්‍ය ඛණ්ඩයක් හෝ පින්තූරයක් මත click කිරීමෙන් වෙනත් ස්ථානයක් හා සම්බන්ධ වේ නම් එම සම්බන්ධය අධි සම්බන්ධයක් ලෙස හදුන්වනවා..

මේ සම්බන්ධතාවය ගොඩ නැගීමට  ක්‍රම තියෙනවා..
දෙකක් මම කියන්නම්...

i. URL link.
ii. Web page link.

හරි අපි එකින් එක තේරුම් ගමු..

i. URL link

මේකෙදි වෙනත් වෙබ් අඩවියකටයි සම්බන්ධ වෙන්නෙ.. අපි හිතමු අපිට ඕනෙ ගූගල් වෙබ් සයිට් එකේ ලින්ක් එක අපේ පේජ් එකේ දාන්න කියලා.. ඉස්සෙල්ලම ඔයා මේ කෝඩින් බලන්න..

<html>
<body>
    <p>
<a href  = "http://www.google.lk"            target = "blank"> Google Website </a>
    <p>
</body>
</html>

ඔයා සමහර තැන් වලදි දැකලා ඇති "මෙතැනින් යන්න" කියලා දීපු ලින්ක්. ඒ වචනෙ උඩ ක්ලික් කරපු ගමන් ඒ යන්න ඕන තැනට යැවෙනවා.. ඒ වගේ තමයි මේක. මේකෙදි පේනවා නේද Google Website කියලා.. අන්න ඒක තමයි වෙබ් පේජ් එකේ දි අපිට පෙන්නන්නෙ.. ඒක උඩ click කලාම http://www.google.lk කියන සයිට් එකට යැවෙනවා.. තේරුනා නේද..

ඊලඟට ඔයා දකින්න ඇති මේ කෝඩින් වල අලුත් ඇට්‍රිබියුට් එකක්. target කියලා.

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

* වෙනම ටැබ් එකක ඕපන් වෙන්න ඕනෙ නම් "_blank" කියලා දාන්න target කියන එකට..

* ඒ ටැබ් එකේම ඕපන් වෙන්න නම් "_self" කියලා දෙන්න target කියන එකට..

ii. Web page link

ඒ වෙබ් සයිට් එකේම වෙනත් වෙබ් පේජ් එකකට සම්බන්ධ කිරීමක් තමයි මේකෙදි  කරන්නෙ..
අපි හිතමු අපිට තව වෙබ් පේජ් එකක් තියෙනවා butterfly.html කියලා..
අපිට දැන් ඒකෙ ලින්ක් එක අපේ මේ පේජ් එකට දෙන්න ඕනෙ කියලා හිතන්න..
බලන්න කෝඩින්.

<html>
<body>
<p>
<a href = "butterfly.html" target = "_self">
Click here.
</a>
</p>
</body>
</html>

Click here කියන තැන click කලාම butterfly.html කියන පේජ් එක ඕපන් වෙන්නයි දීලා තියෙන්නෙ ලින්ක් එක.

•HTML Table

වෙබ් පේජ් එකක් ඇතුලෙ වගු ගොඩනගන හැටියි මේ කියලා දෙන්න යන්නෙ.. ටේබල් එක ඇදෙන්න කෝඩින් කරන්නෙ <Table> </Table> මේ ටැග් දෙක අතරෙයි.
ඒ ටැග් දෙක ඇතුලෙ භාවිතා කරන ටැග් මම පහලින් පෙන්නන්නම්.. ලිස්ට් හැදුවා වගේ තමයි මේකත්..

<tr> </tr> - Table row.
<th> </th> - Table header data.
<td> </td> - Table data.

ඔයා හොදට තේරුම් ගන්න උත්සහ කරන්න. මේක out put එන විදිහ දැකලා තේරුම් ගන්න ලේසි එකක්. ඒත් මට මෙතන ඔයාට ඒක පෙන්නන්න විදිහක් නැහැ මම මේ බ්ලොග් ලිපි ලියන්නෙ html පාවිච්චි නොකර නිසා..
ඒ නිසා ඔයා මේවා කරලා බලන ගමන් තේරුම් ගන්න උත්සහ කරන්න හොදේ..
බලන්නකො මේ කෝඩින් එක කරලා..

<html>
<body>
<table>
       <tr>
              <th> Name </th>
              <th> Age </th>
        </tr>
         <tr>
                 <td> Supun </td>
                  <td> 55 </td>
         </tr>
</body>
</html>

ඔන්න මම පිලිවෙලට කියන්නම්.. ඔයා තේරුම් ගන්න..
table ටැග් එක open කලා.. ඒක ඇතුලෙ tr. table row එකක් open කලා.. ඒක ඇතුලෙ table header data එක විදිහට name දැම්මා.
table header ටැග් එක වැහුව නිසා ඊලග කොටුවට ඉබේම යැවෙනවා. ඒ යැවෙන කොටුවෙත් header එකක් ලියන්න ඕනෙ අපිට Age කියලා. ඒ නිසා table header data ටැග් එකක් open කලා.. ඒකෙ දැම්මා Age කියලා.. ඒ row එක ඉවරයි. (ඔයාට තව ඕනෙ නම් තවත් header දාන්න..)
ඒ row එක close කලා.. තවත් row එකක් open කලා.. මේ දැන් ලියන්න යන්නෙ අලුත් row එකක් table එජේ කලින් එකට පහලින්. Table data එකක් ලියන්නයි යන්නෙ.  (මේක ලියවෙන්නෙ name කොටුවට පහල කොටුවෙ කියලා තේරෙනවා නේද..)
table data එකක් open කලා.. ඒකෙ supun කියලා දැම්මා.. ඒක close කලා.. ඊලග කොටුවට යැවෙනවා.. ඒකෙ 55 දැම්මා.. row එක වැහුවා.. table එක close කලා.. හරි නේද..

Table ටැග් එකට යොදන උපලක්ශන තමයි දැන් මම කියලා දෙන්නෙ..  බලන්නකො මේක...

<table border = 2 align = "center">

border සහ align දැන් ඔයාලට පුරුදු ඇට්‍රිබියුට්ස් නිසා හදුන්වාදෙන්න ඕන නැහැනෙ නේද..

අපේ ටේබල් එකට topic එකක් දෙන්න ඕන නම් ඒකට ටැග් එකක් තියෙනවා caption කියලා.. අපි හිතමු topic එක Srilanka කියලා.. කෝඩින් මෙහෙමයි...

<caption align =" top" > Srilanka </caption>

ඔයාට මතකයි නේද අපි හෙඩින් ලියපු ටැග්ස්. ඒවා use කරන්නත් පුලුවන් ඕන නම් topic එක ලියන්න..

* Cell padding

ටේබල් එකේ දාරයයි අකුරුයි අතර පරතරය තියන්න අපි මේ ඇට්‍රිබියුට් එක පාවිච්චි කරනවා.. මෙහෙම..

<table border ="1" cellpadding = "10">

*Cell spacing

මේක පාවිච්චි කරන්නෙ ටේබල් එකේ කොටු අතර පරතරයක් තියන්න.. මෙහෙම..

<table border ="1" cellspacing = "10">

ටේබල් එක කොයි තරම් පලල වෙන්න ඕනෙද කියලා අපිට width විදිහට දෙන්න පුලුවන්.. ඒක pixel වලින් දුන්නොත් නියත අගයක්. ප්‍රතිශතයක් විදිහට දුන්නොත් ඔයාගෙ browser එක අනුව වෙනස් වෙනවා.. මේ ක්‍රම දෙකටම පුලුවන්..

<table width = 800 >
<table width = 60% >

*ටේබල් එකක කෝශ කීපයක් එකතු කරලා තනි කෝශයක් තියන්න ඕන වෙන අවස්තාවන් තියෙනවා නේද..
ඒකට rowspan සහ colspan පාවිච්චි කරන්න පුළුවන්..

තිරස් අතට කොටු දෙකක් එකතු කරලා ඒකෙ Country  කියලා table header එකක ලියන්න ඕනේ කියමු.
මෙහෙමයි.

<th colspan = "2"> Country </th>

සිරස් අතට කොටු දෙකක් අල්ලලා 456 කියන එක table data එකක් විදිහට ලියන්න ඕනෙ කියමු.

<td rowspan = "2"> 456 </td>

•Table සදහා background colours සහ images ඇතුල් කිරීම..

මෙවා ඇතුල් කරන්නේ table ටැග් එකටමයි.. බලන්න..

<table border = "1" bgcolor = "red">

Background සදහා අපි යොදා ගන්න ඉන්න image එකේ නම rose.jpg කියලා හිතන්න..

<table border = "1" background ="rose.jpg" >

ඔයා කරලා බලන්න එහෙනම්...

• HTML Multimedia.

Multimedia යටතේ පහතින් මම දාලා තියෙන extension සහිත file ඇතුල් කරන්න පුළුවන්..

.swf
.wav
.mp3
.mp4
.mpg
.wmv
.avi

°Audeo ඇතුල් කරන්නෙ මෙහෙමයි..

<html> <body>

<audio controls>

<sourse src = "hithumanaapen.mp3" type = "audio/mpeg" >

</audio>

</body> </html>

°Video ඇතුල් කරන්නෙ මෙහෙමයි..

<html> <body>
<video width = "400" controls >
<sourse src = "littlestar.mp4" type = "video/mp4" >
</video>
</body> </html>

• Link colour

ඔයා ගූගල් සර්ච් කරනකොට දැකල තියෙනවද ඔයා visit කරපු link වෙන පාටකින් පෙන්නනවා.. ඔයා නොබලපුවා නිල් පාටින්.. දැනට click කරපු එක තවත් පාටකින්..
මෙන්න මේක කොහොමද කෝඩින් කරන්නෙ කියලයි මම කියලා දෙන්නම්..

බලන්න මේක..

<body Link = "#33CC00" Vlink = "#CC0099" Alink = "#ffff00">

Link, Vlink, Alink කියවෙන්නේ...

Link - Un visited link.
Vlink - Visited link.
Alink - Activated link.

HTML ඊලඟ  පාඩමෙන් ඉවර වෙනවා .

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

HTML - 04 පාඩම.

•Frames

වෙබ් පිටුවක් රාමු වලට බෙදුවට පස්සෙ ඒ එක එක රාමුවට වෙන වෙබ් පිටු ආදේශ කරන්න පුලුවන්.
උස අතට වගේම හරස් අතටත් හදන්න පුලුවන්..

ඔයා හිතන්න මේ මගේ වෙබ් පිටු තියෙන folder එක කියලා.. ඒකේ මේ වෙබ්පිටු තියෙනවා..

°School.html
°Sun.html
°Mudi.html
°Myhome.html

දැන් අපි මේ වෙබ් පිටු frame විදිහට පාවිච්චි කරලා අලුත් වෙබ් පිටුවක් හදන්නයි යන්නෙ.. මේ කෝඩින් බලන්නකො ඔයා.. ඊට පස්සෙ මම විස්තර කරන්නම්..

<html>

<frameset rows = 25%, 50%, 25%>

<frame src = "School.html">
<frame src = "Sun.html">
<frame src = "Mudi.html"

</frameset >

</html>

බලන්න.. දැන් ඔයා අලුතින් හදන වෙබ් පේජ් එක තිරස් අතට කොටස් තුනකට බෙදිලා.. මුල්ම එකටයි අන්තිම එකටයි ඉඩ 25% ගානෙ. මැද එකට 50%. 
මම දීලා තියෙන පේජ් frame විදිහට ඒ පිලිවෙලට ඒවා ආදේශ වෙලා.. හරි නේද..
ඔයත් කරලා බලන්න.. ඒත් ඔයා ආදේශ කරන්න ඕනේ ඔයා හදපු ඔයාගෙ වෙබ් පේජ් හොදේ..
ප්‍රතිශතයක් විදිහට වගේම සංඛයා  විදිහටත් ඉඩ වෙන් කරන්න පුලුවන්.  මේ බලන්න..

<frameset rows = "100, 200, 250" >

ඒ වගේම ප්‍රතිශතයක් විදිහට ඉඩ දෙකක් වෙන් කරලා අනිත් ඉඩ ඉබේ හැදෙන්න දෙන්නත් පුලුවන්... මේ බලන්න..

<frameset rows = 40%, 40%, * ">

Frame තුනක් නෙමේ කැමති ගානක් ඔයාට හදා ගන්න පුලුවන්..

ඔයා මේ විදිහට ප්‍රතිශත හරි සංඛයා විදිහට හරි ඉඩ වෙන් කලා වුනත් ඔයා බ්‍රවුසර් එකෙන් ඕපන් කලාම ඔයාට පුලුවන් එහෙට මෙහෙට ඇදලා ඒවයෙ ඉඩ වෙනස් කරන්න.. එහෙම කරන්න බැරි වෙන්න frame එකක් නිශ්චල වෙන්න කෝඩින් කරන්නෙ මෙහෙමයි..

<frame noresize  = "noresize" src = "Mudi.html" >

තිරස් වගේම සිරස්වත් ෆ්‍රේරේම් ආදේශ කරන්න පුලුවන් කියලා මම කිව්වනෙ.. බලන්න මේ කෝඩින් එක තේරුම් අරන් කරන්න..

<html>
<frameset rows = "50%, 50% >
      <frame src = "School.html">
       <frameset cols = "25%, 75%" >
              <frame src = "Sun.html">
              <frame src = "Mudi.html">
        </frameset >
</frameset >
</html>

මම මේ html frame ඉගෙන ගන්න කාලෙ ප්‍රැක්ටිස් කරන්න මෙහෙම දෙයක් මම හිතල කලා.. පේජ් පහක් හැදුවා බොඩි කලර් එක නිල්, කහ, රතු, සුදු, තැඹිලි දාලා. ඊට පස්සෙ සිරස් තීරු හයක් බෙදෙන්න අලුත් පේජ් එකක ෆ්‍රේම් කෝඩ් ලිව්වා.. ආදේශ කලා අර පේජ් පහ. අන්තිම සිරස් තීරුව හරස් අතට පහකට බෙදලත් කෝඩ් ලියලා ෆ්‍රේම් ආදේශ කලා..
මොකද්ද කියලා ඔයාට තේරුම් ගන්න පුළුවන්ද.. ඔව්. ඒ බෞද්ධ කොඩිය. හොද අවබෝධයක් ආවා ෆ්‍රේම් හසුරවන විදිහ ගැන.

•Forms

Database එකකට data ඇතුල් කරන්නත්, දත්ත පිටතට ලබා ගන්නත් තමයි මේ form නිර්මාණය කරන්නෙ..

අපි හදමු form එකක්, name එකයි address එක ගන්නයි..
බලන්නකො මේ කෝඩ්ස්.. මම පැහැදිලි කරන්නම් ඊට පස්සෙ..

<html> <body>

<form>
Your Name :
<Input type = "text" name = YN> <br>
Address :
<Input type = "text" name = AD>
</form>

</body> </html>

Form එකක් හදන්න යොදන්නෙ form ටැග් එක.. input කරන type එක text . මේ වගේ ටයිප්ස් තව තියෙනවා.. මම ඔයාට තව ඉස්සරහදි කියලා දෙනවා.. name YN . ඒ කියන්නෙ මේකට එන්ටර් වෙන දේ ඩේටාබේස් එකේ ගිහිල්ලා වැටෙන්නෙ YN කියන එක යටතෙ. ඔයාට yn නෙමෙයි කැමති විදිහකට දෙන්න පුලුවන් ඒක..

*Radio buttons දාන්නෙ මෙහෙමයි.

<input type = "radio" name "sex" >

Output එක එන්නෙ මෙන්න මෙහෙම..

° Male
°Female

මේ radio buttons වලින් එකක් විතරක් තොරන්න පුළුවන්..

*ඔයා දැකලා තියෙනවා නේද check box. කෝඩින් මෙහෙමයි..

<form>
Novels.
<input type = "checkbox" name = "Books" value = "Novels" >
</form>

*Submit button

ඊලගට ඔයාට කියලා දෙන්නම් submit button එකක් හදන්න කෝඩ් ලියන්නෙ කොහොමද කියලා.. ඉස්සෙල්ලම බලලා ඉන්න මේ කෝඩ් එක...

<html> <body>

<form name = "input" action = "info.html" method = "get">

User Name :
<Input type = "text" name = "user">
<Input type = "submit" value = "submit">

</form>
</body> </html>

ඔයා මේ කෝඩින් එක කරලා බලන්න.. ටෙක්ස්ට් කරන්න පුලුවන් කොටුවක් එක්ක submit button එකක් ඇවිත් ඇති.. ඔයාට ප්‍රශ්න දෙකක් එන්න ඇති..

එකක් action කියලා attribute  එකක පේජ් එකක් දීලා තියෙන්නෙ ඇයි කියලා.. මේ User Name කියන බොක්ස් එකට input කරන information යන්නෙ ඒ මම සදහන් කරපු පේජ් එකට.. ඒකත් අපි හදන එකක් හොදේ..

හරි. ඊලග ප්‍රශ්නය තමයි method කියන attribute එක. මේ method කියන එකට get භාවිතා කරනකොට text box එකට ඇතුල් කරන දේ address bar එකේ පෙන්නනවා.. ඒත් method එකට get කියලා දැම්මොත් එහෙම පෙන්නන්නෙ නැහැ.. ඔයා කරලම බලන්නකො.. තේරේවි..

ඊලගට මම කියලා දෙන්නම් text area එකක් හදන විදිහ.. කෝඩ් එක බලන්න....
ඔන්න මම සිංහලෙන්ම ටෙක්ස්ට් ඒරියා එක දානවා..

<html> <body>

<p> HTML යනු.. </p>
<textarea rows = "10" cols = "30">

Markup Language එකකි.

</textarea>

</html> </body>

ඒකත් කරලා බලනකෝ.. text area එකේ ප්‍රමාණය ඔයාට වෙනස් කර ගන්න පුළුවන් හොදේ..

•Meta tag

ඔයා ගූගල් සර්ච් කරනකොට ඔයා ඔයාට හොයන්න ඕන දේ නම ටයිප් කරනවා නේද.. ඊට පස්සෙ ඒකට සම්බන්ධ වෙබ් පේජ් ටික එනවා.. දැන් මේ ඔයා හදන පේජ් එකත් අනිත් අය මේ මේ වචන වලින් හොයනකොට එන්න ඕනෙ කියලා ඔයා තීරණය කරන්න ඕනෙ මේකෙදි.. ඒ වචන ටික.. ඒවා තමයි දැන් අපි මේ මෙටා ටැග් එකෙන් දෙන්නෙ..
බලන්න මේ කෝඩ්..

<meta name = "Keywords" content = "html", "ict", "cording" >

මේ විදිහට key words ගොඩක් දෙන්න පුළුවන්..

ම්ම්... අවසානයට ආවා අපි. ඔයා මුල ඉදලා අවධානයෙන් ඉගෙන ගත්තා නම් දැන් ඔයාට තනියම වෙබ් පේජ් එකක් හදන්න පුලුවන්..

ඔයාට ගැටලු තියෙනවා නම් කමෙන්ට් එකකින් අහන්න..

***********************************

ICT දැනුම blog එකේ ආරම්භය මම HTML වලින් ගත්තා.. තව ඉදිරියට ඔයාට මම තව දේවල් කියලා දෙන්න බලාපොරොත්තු වෙනවා.. ICT වල වෙනත් කොටස් ගැන...

මේ IT දැනුමෙන් මාව පෝෂණය කලාට ගොඩාක් ස්තූතිවන්තව මතක් කරනවා මගේ IT ගුරුපියාණන්, අනුර බණ්ඩාර සර්.  සික්සා - අනුරාධපුර.