ICT දැනුම

Monday, October 3, 2016

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 , align කියන්නෙ attributes . ඒ අදින ඉර ගැන විස්තර කරනවා.. ඒකෙ සයිස් එක. ඒක වමෙන් පෙන්නන්න ඕනෙ කියන එක. දැන් ඒ ගැන පොඩි අදහසක් ඔයාලට එන්න ඇති.

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

1. <html>

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

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

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

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

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

•HTML Heading

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

<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 කමෙන්ට්ස් ( විවරණ) කියන්නෙ මොනවද කියලා අපි බලමු.

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

බලන්න.. 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

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

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

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

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

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

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

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 ) දාලා ඔයාට කැමති විදිහට වර්ණ හදා ගන්න පුලුවන්නෙ දැන්.
ඒ වගේම තව දෙයක්. ඔයාට මේකෙදි ඕන නම් වර්ණයේ නමත් පාවිච්චි කරන්න පුලුවන්..

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

ඔයා මේ දේවල් වලට අලුත් ම කෙනෙක් නම් පුරුදු වෙන්නත් එක්ක 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

*superscript

• font size

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

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

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

• 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 කියන එකෙන් තමයි අපිට ඕනෙ කීයෙ ඉදලද කියලා සටහන් කරන්න ඕනෙ..

මේ බලන්න...

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

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

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

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

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

<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 හයක් තියන්න ඕනෙ කියලා.. මෙන්න මෙහෙමයි කෝඩින් එන්නෙ..

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

• 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 එක වෙබ් පේජ් එකට දාන්න ඕනේ.. මේ බලන්න කෝඩින්..

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

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

හරි අපි එකින් එක බලමු. 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 දාන්න ඕනෙ නම් මේ විදිහයි...

අපි ඊලග පාඩමේදි බලමු 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 ටැග් එකට යොදන උපලක්ශන තමයි දැන් මම කියලා දෙන්නෙ.. බලන්නකො මේක...

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

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

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

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

* Cell padding

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

*Cell spacing

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

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

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

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

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

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

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

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

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

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

• HTML Multimedia.

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

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

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

</audio>

</body> </html>

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

• Link colour

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

බලන්න මේක..

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>

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

</frameset >

</html>

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

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

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

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

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

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

•Forms

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

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

<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 දාන්නෙ මෙහෙමයි.

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

° Male
°Female

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

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

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

*Submit button

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

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 එකක් හදන විදිහ.. කෝඩ් එක බලන්න....
ඔන්න මම සිංහලෙන්ම ටෙක්ස්ට් ඒරියා එක දානවා..

Markup Language එකකි.

</textarea>

</html> </body>

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

•Meta tag

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

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

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

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

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

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

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