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

කොහොමද යාලුවන්ට, අද අපි කථා කරන්නෙ CSS වල තවත් ප්‍රධාන කොටසක්.
අපි type කරන code ඒක page ඒක scroll කලා කියලා නැති වෙන්නෙ නැතුව ඒ position ඒක නොවෙනස්ව තියෙනවනම් අපට ඒක සෑහෙන්න වැදගත් වේවි.
ඒක කරන්න අපි පාවිච්චි කරන්නෙ position කියන property ඒක.
position ඒකෙ ප්‍රධාන අනු කොටස් කිහිපයක් තියෙනවා.

1. Position:fixed
මේකේදි position ඒක fix වෙනවා. තවත් පැහැදිලි කරනවනම් page ඒක scroll කලා කියලා  මේ දේවල් චලනය වෙන්නෙ නෑ. ඒක ඒතනට fix වෙලයි තියෙන්නනෙ....

ex:

p.fixed_posion
{
     position: fixed;
     top:20px;
     left:20px;
}

2.Position:relative
මේකෙදි position ඒක අදාල property ඒකේ original position ඒකත් ඒක්ක වෙනස් වෙනවා. ඒකයි මේකෙ position ඒක relative කියන්නෙ.

ex:

p.relative_position
{
      position:relative;
      left:20px;
}

3.Position:absolute
මේකෙදි පාවිච්චි වෙන absolute position ඒකේදි position ඒක ගැන හිතන්නෙ නැතුව properties පාවිච්චි කරන්න පුලුවන්.මේක හුගක් වෙලාවට පාවිච්චි කරනවා headers දාන කොට.

ex:

h1{
       position:absolute;
       left:100px;
}

අපි type කරන code ඒකකට shadow ඒකක් වුනත් දාන්න පුලුවන් CSS පාවිච්චි කරලා....

ex:

h1{
        color: white;
        text-shadow: 2px 2px 2px #000000;
}

ඒ වගේම div tag ඒක පාවිච්චි කරලා වෙන් කරන කොටසකට වුනත් shadow ඒකක් දාන්න පුලුවන්.

ex:

div{
          background-color: yellow;
          box-shadow: 10px 10px;
}

මේ කොටසින් CSS ඉවර වෙනවා. අපි ඊලග පාර ඉදන් Software engineering basic theories කථා කරමු.

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

අද අපි කථා කරන්නෙ CSS දෙවන කොටස...

මුලින්ම කථා කලොත් padding ගැන,
padding property ඒක පාවිච්චි වෙන්නෙ අපි හදාගන්න ඉඩේ size ඒක තීරණය කරන්න...

ex:

p{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

මේකෙ top කියන්නෙ උඩින් ඉඩ තියෙන ගාන. right left කියන්නෙ දකුණින් වගේම වමින්  ඉඩ තියෙන ගාන. bottom පහලින් තියෙන ඉඩ තීරණය කරනවා.

මේ ලොකු code ඒකම short කරලා පහල විදියට type කරන්න පුලුවන්.

ex:

p{
padding: 50px 60px 70px 80px;
}

මේකෙ පිිලිවෙල ඒන්නෙ top right bottom left පිලිවෙලට...

p{
padding: 50px 60px 70px;
}


මේ විදියට අාවොත් නම් top right bottom.

p{
padding: 50px 60px;
}

values 2යි නම් තියෙන්නෙ top right

p{
padding: 50px;
}

මේකෙන් කියවෙන්නෙ values 4ම 50px වෙනවා කියලා...

ඊලගට කථා කරමු div tag ඒක ගැන
div පාවිච්චි වෙන්නෙ කොටස් වලට කඩා ගන්න.

div කියන tag ඒක html කොටසේ යෙදුවට පස්සෙ

div{
width: 50px;
height: 50px;
}

div කොටසක width height කොටස්2 අනිවාර්යයි.
ඒ වගේම max-width, max-height , min-width, min-height tags වුනත් div කොටසට භාවිතා කරන්න පුලුවන්.

හුග දෙනෙක්ට තිබ්බ ගැටලුවක් තමයි font ඒක bold italic කරන හැටි.
ඒකට ගන්නෙ

p{
font-weight: bold;
}

ඊලගට කථා කරන්නෙ <a> tag ඒකට CSS දාන හැටි.

a.link{
               color:red;
}

a.visited{
              color:yellow;
}

a.hover{
              color:blue;
}

a.active{
              color:green;
}

මේකෙ a.link කියන්නෙ පවතින විදිහ අපි මුලින්ම දකින තැනදි පවතින විදිහ.
a.visited කියන්නෙ අපි කලින් බලලා තියෙන link ඒකක් අායෙත් පාරක් බලද්දි පෙන්වන විදිහ.
මේකට හොදම උදාහරනෙ තමයි google ඒකේ අපි කලින් බලපු link වෙනස් වෙලා පෙන්වන ඒක.
a.hover කියන්නෙ mouse ඒක ඒ link ඒක උඩින් අරන් යද්දි වන වෙනස්කම්.
a.active කියන්නෙ අපි click කරන link ඒක තවදුරටත් open වෙලානම් තියෙන්නෙ ඒක active link ඒකක් කියලා සලකනවා.

ඊලග පාඩමෙන් තවත් කොටසක්....

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

අැත්තටම web පාඩම් මාලාව පාඩම් 6කටත් අැවිත්...

අද පොරොන්දු වුනා වගේම CSS පටන් ගන්නවා. මට යාලුවෙක් කිවුවා software engineering theories ඉදිරි පාඩමකින් කථා කරන්න පුලුවන්නම් හොදයි කියලා...
ඒ ගැන ඔයාලගෙ suggestionuත් අපිට  කියන්න.

අැත්තටම අපි html කථා කරද්දිත් css පොඩ්ඩක් කථා කලා.

අැත්තටම css කරන්නෙ ලොකු උදව්වක්. පිට ඉදන්  set වෙන css external file ඒකකින් පොඩි html code ඒකක් වුනත් ලස්සන කරන්න පුලුවන්!

css code ඒකක් මූලිකව කොටස් වලට කඩන්න පුලුවන්.
selector සහ deceleration විදියට...

selector ඒකේ දී අපි සදහන් කරන්නෙ මේක paragraph ද?, header ද?, footer ද? කියන මූලික කාරනාව.

deceleration ඒකෙන් කියවෙන්නෙ අපි දෙන selector ඒකේ properties වෙනස්  වෙන්නෙ කොහොමද කියන ඒක.

p{
  color: red;
}

උඩින් තියෙන code ඒකේ p කියන්නෙ  selector ඒක. curly bracket අැතුලෙ වැටෙන්නෙ deceleration ඒක.

ඊලගට අපි කථා කලොත් CSS වල selectors ගැන.

1.Element Selector
                  මෙතන දී මූලික වෙන්නෙ element ඒක. paragraph, header, element ඒකේ name ඒකෙන් තමයි මෙතනදි mention වෙන්නෙ.

h1{
        text-align: center;
        color:red;
}

2.ID Selector
                  මෙතනදි පාවිච්චි වෙන්නෙ element ඒකක අපි id කියලා ඒතනට භාවිතා වන නම.ඒ වගේම තමයි id ඒක පාවිච්චි වෙද්දි CSS කොටසෙදි id name ඒකට ඉදිරියෙන් "# " ලකුණ යෙදෙනවා.ඣක්

<p id="first"></p>  වුනොත් CSS කොටසට පාවිච්චි වෙන්නෙ first කියන කොටස.

#first{
             color:yellow;
             font-size: 20px;
}

3. CLASS Selector
                class selector ඒකේදි අපි භාවිතා කරන element ඒකේ class කියන attribute ඒක. මේකෙ css file ඒක වෙනම අදුරගන්න ". " ලකුණ පාවිච්චි වෙනවා.

<p class="center"></p> වුනොත් CSS කොටසට පාවිච්චි වෙන්නෙ center කියන කොටස.

.center{
              color:red;
              align-text:center;
}

මේකෙ විශේෂත්වය තමයි තවත් attribute ඒකක් තිබුනොත් class ඒක center වෙන ඒයාටත් මේ properties බලපානවා.

ex:

<h1 class="center"></h1> මේ header ඒකටත් උඩින් තිබ්බ CSS code ඒක බලපානවා.

මේකෙ තව විශේෂ දෙයක් තමයි අපිට attribute ඒකේ නමින්ම code ඒක හදාගන්න පුලුවන්.
කලින් උදාහරණයක්ම අපි ගත්තොත්...

<p class="center"></p> 

p.center{
                 color:red;
                 align-text:center;

}

මේක අපේ ඊට පස්සෙ උදාහරණය වුන <h1 class="center"></h1> ට බලපෑමක් කරන්නෙ නෑ. ඊට හේතුව අපේ CSS code ඒකේ "p.center" විදියට <p> tag ඒක define කරලා තියෙනවනෙ. ඒතකොට බලපාන්නෙ pට විතරයි.

CSS ගැන තවත් අලුත් දෙයක් ඊලග පාඩමෙන් කථා කරමු...

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 කථා කරමු...

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

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

මුලින්ම කියන්නම් මේ html වල Comment ඒකක් ගහගන්නේ  කොහොමද කියලා.
<!--ඔයාට type කරන්න ඔින 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 ගැන කථා කරමු අපි...

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

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>

<b>This is bold one</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 

_{This is Subscript text} This is normal text

_{This is Subscript text}  This is normal text

10. Superscript text 

^{This is superscript text} This is normal text

^{This superscript text} This is normal text

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

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

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

 ගියපාර නැවැත්තුවා <h1> - <h6> වලින්. මේ පාර පටන් ගන්නෙ පොඩි විශේෂ කාරනාවකින්
ඒ තමයි !DOCTYPE HTML විදියට සදහන් කරන දේ

මේ විදියට type කරපුවම browser ඒකට ලේසියි web page ඒක නිවැරදිව display කරන්න. ඒ විදියට කියන්න හේතුව web වල ඒක ඒක විදිහෙ document types තියෙනවානෙ.නිවැරදිව display කරන්න browser ඒක නිවැරදි document type ඒක වගේම version ඒකත් දැනගෙන ඉන්න ඔින.

HTML version 5 වලදි <!DOCTYPE HTML> විදියටත් version 4.1 වලදි <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML version 1.0 වලදි <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

මේක type වෙන්නෙ page ඒකේ උඩින්මයි.

ඊලග tag ඒක තමයි anchor tag ඒක. මේක code වෙන්නෙ <a></a> විදියට
ඒ කියන්නෙ <a href="http://www.google.com">GOOGLE</a> යන කොටස code කලාට පස්සෙ web page ඒක load වුනාට පස්සෙ පේන්නෙ GOOGLE විදියට. මේ වචනෙ උඩ click කරාට පස්සෙ ඔයාට ඒ ලින්කුවට අදාල පිටුවට යන්න පුලුවන්. මේකෙ href කියලා තියෙන්නෙ attribute ඒකක් tag ඒකේ. attribute පාවිච්චි වෙන්නෙ tag වැඩියෙන් විස්තර කරන්න ඔින වුනාම.

මීලගට අපි කියන්නෙ අලුත් tag ඒකක් ගැන. ඒ තමයි img tag ඒක.<img> tag ඒකේ විශේෂත්වෙ තමයි මේකට tag ඒක යුගල් විදියට නෙමෙයි තියෙන්නෙ. තනි tag ඒකක්.
<img src="image.jpg" alt= "google.com" width="104" length = "120"/>
මේකෙ attribute ගැන කථා කථා කලොත් src කියන්නෙ image ඒකට අදාල වෙන නම. alt කියන්නෙ alternative text කියන දේමයි. width කියන ඒකින් රූපයේ පළලත් length කියන ඒකින් රූපයේ දිගත් අදහස් වෙනවා...

br කියන tag ඒකත් තනි tag ඒකක්. <br/> වලින් තමයි ඒක පෙන්වන්නෙ. මේකට empty HTML element ඒකක් විදියටත් හදුන්වනවා.ඒ මේ tag ඒකට attribute මුකුත්ම නැති නිසා.
 My name is Chamiya.<br/>I live in Sri lanka  විදියට code කලොත්.web page ඒකේ

My name is Chamiya.
I live in Sri lanka.

විදියට තමයි ලැබෙන්නේ.

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