චමියගෙ I.T සටහන්: January 2016

Sunday, January 31, 2016

web ඉගෙන ගනිමු - 5 පාඩම

අපි කිව්වා වගේ මේ පාර අපි කථා කරන්නේ table හැ‍ද‍ෙන හැටි

table හදන්න ගන්නෙ <table> </table> tag ඒක.
මේ කොටස අැතුලෙ තමයි table ඒක පවතින්නේ...

table ඒකක් වුනාම table raws තියෙන්න ඔින. table columns තියෙන්න ඔින, ඒ වගේම table data තියෙන්න ඔිනේ.
table raw වලට <tr></tr> කියන tag ඒක පාවිච්චි වෙන්නෙ. columns නම් html වලදි auto recognize කරගන්නවා. table headers වලට පාවිච්චි වෙන්නෙ <th></th> කියන tag ඒක. table data වලට ගන්නෙ <td></td>. අපි බැලුවොත් මේ table වල codings තියෙන්නෙ කොහොමද කියලා...

<table border="1">
<tr>
<th> Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>Aruna</td>
<td>40</td>
<td>Ampara</td>
</tr>
</table>

මේ code ඒක browser ඒකේ වැඩ කරන්නෙ පහත දක්වලා තියෙන විදියට...

The Table

මේකෙ table tag ඒකේ පාවිච්චි වෙන මූලික attributes තමයි width, border, id වගේ දේවල්.

තවත් වැදගත් කාරනාවක් තමයි colspan සහ rawspan ...

colspan වලින් කෙරෙන්නෙ ඒකම row ඒකේ තියෙන columns දෙකක් ඒකතු කරන ඒක.
code ඒක type වෙන්නෙ මෙහෙම...

<table border="1">
<tr>
<th> Name</th>
<th colspan="2">Address</th>

</tr>
<tr>
<td>Aruna</td>
<td>Anuradhapura</td>
<td>Ampara</td>
</tr>
</table>

Colspan Mode

rowspan වලින් කෙරෙන්නෙ ඒකම column ඒකේ තියෙන raws දෙකක් ඒකතු කරන ඒක.
code ඒක type වෙන්නෙ මෙහෙම...

<table border="1">
<tr>
<th> Name</th>
<td>Aruna</td>
</tr>
<tr>
<th rowspan="2">Address</th>
<td>Anuradhapura</td>
</tr>
<tr>
<td>Ampara</td>
</tr>
</table>

Rowspan mode

අපි ඊලග පාර ඉදන් CSS කථා කරමු...

Friday, January 22, 2016

Web ඉගෙන ගනිමු - 4 පාඩම

කෝමද යාලුවනේ අදත් කථා කරන්න හිතුවෙ HTML වල ඉදිරි කොටසක්...

මුලින්ම කියන්නම් මේ html වල Comment ඒකක් ගහගන්නේ කොහොමද කියලා.

මෙහෙම type කරන්න හේතු වෙන්නෙ අපි tag ඒකක් නැතුව type කරන හැමදේම web page ඒකේ display වෙන ඒක.

ඒ වගේම කථා කරන්න අාපු ප්‍රධාන කාරනාව HTML වලට CSS කියන භාෂාව පාවිච්චි කරන්නෙ කොහොමද කියලා...

මේකට පාවිච්චි වෙන්නෙ <style > tag ඒක

CSS පාවිච්චි වෙන්නෙ Cascadin Style Sheet විදියට...

Web page ඒකකට css දාන්න ප්‍රධාන ක්‍රම 3යි.
1. Inline ක්‍රමය
2.Internal ක්‍රමය
3.External ක්‍රමය

1.Inline ක්‍රමය

මේ ක්‍රමේදී tag ඒක අැතුලෙම අපිට ඔින tag ඒක type කරනවා.style කියන attribute ඒක තමයි පාවිච්චි කරන්නෙ.

<h1 style="color:blue">This is a heading</h1>

2.Internal ක්‍රමය

මේ ක්‍රමේදී type වෙන්නෙ <head></head> ඒක අැතුලේ. style කියන tag ඒක පාවිච්චි වෙන්නෙ...

<html>
<head>
<title>
CSS හැදෙන හැටි
</title>

<style>
body{background-color:yellow;
}
h1{ color:red;
}
</style>

</head>
<body>

<h1>CSS creating</h1>

</body>
<html>

3.External ක්‍රමය

මේ ක්‍රමේදී පිටින් හදපු css file ඒකක් අපේ html file ඒකට set කරගන්නවා.
මම හදාගන්නවා style.css කියලා css file ඒකක්.

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

style.css හැදෙන්නෙ මෙහෙම..

body{background-color:yellow;
}
h1{ color:red;
}
ඊලග ලිපියෙන් කථා කරන්නෙ table හදන හැටි.
පොඩි කාරනා කිහිපයක් විතරයි මේ පාර css ගැන කථා කලේ...
ඉස්සරහට html ඉවර කරලා css ගැන කථා කරමු අපි...

ලගදිම අායෙත් හමුවෙමු...

Sunday, January 17, 2016

WEB ඉගෙන ගනිමු - 3 පාඩම

අපි ලිපි 2කින් HTML කථා කලත් තාම HTML ඉවර නෑ. අද කථා කරන්නෙ html styling ගැන. ඒ කියන්නෙ පාට යොදවන හැටි ගැන. මේකට හුගක්ම පාවිච්චි වෙන්නෙ style කියන tag ඒක.

අපිට ඔිනනම් background ඒකට පාටක් දා ගන්න, අපි පාවිච්චි කරන්නෙ මේ tag ඒක.
<body style="background-color:yellow">
මේ tag ඒක පාවිච්චි කලාට පස්සෙ අපේ background ඒක කහ පාටට බලාගන්න පුලුවන්.
මේ style කියන attribute ඒක CSS language ඒකේ පාවිච්චි වුනත් HTML coding වලටත් ගන්න පුලුවන්.

<h1 style="color: red">HTML</h1>

HTML

style attribute ඒකේ තවත් ප්‍රධාන property 1ක් තමයි font-family property ඒක.

<h3 style="font-family:verdana">This use the verdana font</h3>

This use the verdana font

font-size property ඒක font ඒකේ size ඒකට බලපානවා.

<h3 style="font-size:20px">Font size is 20 px</h3>

Font size is 20 px

text-align property ඒක පාවිච්චි වෙනවා අපි දාන text ඒක මොන පැත්තටද අැල වෙන්න ඔින කියන ඒක මත.
<h3 style="text align:center">Center is here</h3>

Center is here

මීලගට අපි කථා කරන්නෙ text formatting ක්‍රම ගැන.

1. Bold text <b> </b>

This is bold one

2.Strong text <strong></strong>

<strong>This is strong one</strong>

This is strong one

3.Italic text <i></i>

<i>This is Italic one</i>

This is Italic one

4.Emphasized text <em></em>

<em>This is emphasized text</em>

This is emphasized text

5.Marked text <mark></mark>

<mark>This is marked text</mark></br>This is normal text

This is marked text

This is normal text

6.Small text <small></small>

<small>This is small text</small>This is normal text

This is small text
This is normal text

7.Deleted text <del></del>

<del>This is deleted text</del>

~~This is deleted text~~
8.Insered text <ins></ins>

<ins>This is inserted text</ins>

This is inserted text
9.Subscript text <sub></sub>

<sub>This is Subscript text </sub> This is normal text

_{This is Subscript text} This is normal text

10. Superscript text <sup></sup>

<sup>This is superscript text</sup> This is normal text

^{This superscript text} This is normal text

තවත් ඉස්සරහට HTML පාඩම් යනවා. අලුත් කොටසක් කතා කරමු ඊලග පාර...

චමියගෙ I.T සටහන්

දැනට තිබෙන පාඩම්...