හරි , අපි ගිය සතියේ ඉදන් වෙබ් අඩවි නිර්මාණය කිරිම පිළිබදව පාඩම් මාලවක් පටන් ගත්තා. අද එකේ 02 පාඩම තමයි කියල දෙන්නේ. මුලින්ම තාමත් වෙබ් අඩවි නිර්මාණයේ 01 පාඩම බැලුවේ නැත්නම් , මෙතනින් ගිහින් ඒක බලල එන.

අපි පලවෙනි පාඩමේදි කිව්ව , අපි භාවිතා කරන්නේ Notepad++ හා Wamp Server කියන මෘදුකාංග 2ක කියල. එහනම් අපි 02 පාඩම මෙතැන් සිට පටන් ගමු.

* වෙබ් අඩවි නිර්මාණය කරද්දි අපට වචන 2ක් අහන්න ලැබෙනව. එකක් තමයි Web Designing හා අනිත් එක තමයි Web Developing. Web Designing කියන්නේ වෙබ් අඩවියක Design එක , ඉදිරිපස ( Front End එක ) , එහමත් නැත්නම් වෙබ් අඩවිය භාවිතා කරන කෙනාට ( Admin හෝ User ) පෙන ටික. මේ Web Designing එක හදන්න HTML , CSS , Bootstrap වගේ Languages භාවිතා කරනවා. 
ඊලගට Web Developing කියන්නේ අදාල වෙබ් අඩවියේ පසුපස ( Back End එක ). අපි හිතමු , වෙබ් සයිට් එකක Contact එකක් තියේනව. ඒකට නම , ලිපිනය වගේ විස්තර ලබා දිල , ෆෝම් එකේ තියේන Submit එක ක්ලික් කරාම , වෙන්න ඕන දේවල් Code කරන එකට තමයි , Web Developing කියල කියන්නේ. Web Developing වලට PHP , ASP.Net වගේ Languages භාවිතා කරනව. 

ඒ නිසා , මේ වචන 2ක පටලව ගන්න එපා. සමහර වෙලාවට Web Designing කරන කෙනෙක් , Web Developing කරන්නේ නැ. Web Developing කරන කෙනෙක් , Web Designing කරන්නේ නැ. නමුත් , මේ හැමෝටම Web Designing හා Web Developing කියන 2මත් පුලුවන්. නමුත් , වැඩ කරද්දි , ඒ දෙක වෙන වෙනම තමයි කරන්නේ.

* වෙබ් අඩවි වර්ග 2ක් තියෙනව. ඒනම් Static හා Dynamic . Static කියන්නේ , යම්කිසි වෙබ් සයිට් එකක තියේන තොරතුරු වෙනස් නොවන ඒවා. මෙවැනි වෙබ් සයිට් එකක් HTML වගේ Language එකක් භාවිත කරල හදන්න පුලුවන්.
Dynamic කියන්නේ යම්කිසි වෙබ් සයිට් එකක තියේන තොරතුරු වෙනස් වන ඒවායි.  මෙවැනි වෙබ් සයිට් එකක් PHP , ASP.Net වගේ Languages භාවිතා කරල හදන්න පුලුවන්. නමුත් , දැන් වන විට Static වෙබ් සයිට්ස් අඩුයි. මොකද කවදාවත් වෙනස් නොවන තොරතුරු දාල වෙබ් සයිට් හදන්නේ නැ. ඒ නිසා දැන් තියේන බෝහෝමයක් වෙබ් සයිට්ස් Dynamic ඒවායි. අපි මේ සම්පුර්ණ පාඩම් මාලාවෙදිම ඉගෙන ගන්නේ Dynamic වෙබ් සයිට්ස් හදන්න තමයි.

ලෝකේ ඕනැම වෙබ් සයිට් එකකට , පොදු ආකෘතියයක් තියේන්ව. ඒ තමයි Header , Navigation , Body හා Footer කියන කොටස්.

* මේ ඉහල ජායාරුපයේන් පෙන්වා ඇති සියලුම කොටස් වල තේරුම , මේ පහලින් පැහැදිලි කර ඇත.

01 - Header.

Header කියන්නේ ඕනැම වෙබ් සයිට් එකක ඉහල කොටස , එහමත් නැත්නම් මුල් කොටස. වෙබ් සයිට් එකේ නම එහම දාන්නේ , Header එකේ. සමහර වෙලාවාට Header එකේම Navigation එක දාන අවස්ථාත් තියේන්ව. නමුත් Header හා Navigation කියන්නේ එක කොටසක් විධියට ගනත් පුලුවන් , කොටස් 2ක් විධියට ගන්නත් පුලුවන්.  

02 - Navigation. 

Navigation කියන්නේ , අපේ වෙබ් සයිට් එකේ තියේන වෙබ් පිටු අතරේ යන්න පුලුවන්කම ලබා දිල තියේන කෙටි මාර්ග. මේ පහල ජායාරුපයේන් පෙන්නල තියේන්නේ , අපේ සෙවන් නෙට් එකේ Navigation එක.

03 - Body. 

මේ Body කියන කොටසේ තමයි , වෙබ් සයිට් එකේ සියලුම පොස්ට් , තොරතුරු , ලිපි පළකරන්නේ. ඒ වගේම සාමාන්යේන් සම්මත ක්‍රමේට Slide Show එකක් එහම වෙබ් සයිට් එකට දානව නම් , ඒක දාන්නේත් , මේ Body කියන එකේ උඩුන්ම තමයි. 

04 - Footer.

මේ වෙබ් සයිට් එක හැදුවේ කවුද , කොයි අවුරුද්දේද හැදුවේ , Copyright Credits තියේනව නම් ඒව ගැන කියන්නේ , තව Contact Details එහම පොඩියට දාන්නේත් , මේ Footer එකේ තමයි. 

ඒ වගේම , වෙබ් සයිට් එකක් නිර්මාණය කරද්දි , ඒක Responsive එකක් වෙන ඕන. Responsive කියන්නේ , අපි ඒ අදාල වෙබ් සයිට් එකට එන උපාංගයේ Screen එකේ Size එකට , වෙබ් සයිට් එකේ මුකුත් අඩු නැතිව පෙන්විමයි. මේකට හොදම උදාහරණය තමයි Facebook එක. අපි පරිගණකයකින් Facebook එද්දි පෙන්වන්නේ ලොකුවට , නමුත් ජංගම දුරකතනයකින් Facebook එද්දි පෙන්වන්නේ වෙනස් විධියකට පොඩියට. ඒ වගේම මුකුත් අඩු වෙලත් නැ. 
දැන් වෙද්දි , වෙබ් සයිට් එකක් Responsive නැත්නම් ඒකට මිනිස්සු එනව අඩුයි. මොකද පරිගණකයේන් පෙන්වන ලොකු වෙබ් සයිට් එකම , ජංගම දුරකතනයේනුත් පෙන්නුවොත් ඒක අපට කරදරයි. ඒ නිසා , Responsive වෙබ් සයිට් එකක් අනිවාරේන්ම නිර්මාණය කල යුතුයි. අපි , මේ පාඩම් මාලාවේදි කියල දෙන්නේ Responsive වෙබ් සයිට් එකක් නිර්මාණය කරන ආකාරය ගැනයි.  

හරි , මුලිකව දැන ගන්න ඕන දේවල් ටිකක් අපි කතා කරා. දැන් , වෙබ් සයිට් එකක් නිර්මාණය කිරිමේ පළමු පියවර තියමු. 

* සැලකිය යුතුයි - මේ පහල තියේන දේවල් , ඔබ විසින් වෙබ් සයිට් එක නිර්මාණය කරන්න කලින් අනිවාරේන්ම කියවන්න.

1. අපි නිර්මාණය කරන වෙබ් සයිට් එකට අදාලව ලියන සියලුම වෙබ් පිටු අනිවාරේන්ම PHP ටයිප් එකේන්ක Save රගන්න. මොකද ඒක අපට ඉදිරියට ඕන වෙනව. 

2. PHP ඒවා නිකන්ම Open වෙන්නේ නැ. ඒ සදහා Server එකක් ඕන වෙනව. ඒකට තමයි අපි Wamp Server එක ඉන්ස්ටෝල් කරගත්තේ. අපි වෙබ් සයිට් එකේ Codes ලියන්න කලින් , හැම තිස්සේම Wamp Server එක Open කරගන්න ඕන. 
ඒ වගේම , Wamp Server එක C Drive එකටම ඉන්ස්ටෝල් කරගන්න. ඒක අපට ලේසියි. ඉන්ස්ටෝල් කරගත්තට පස්සේ , මේ " C:\wamp\www " කියන Path එකට යන්න. 
මේ www කියන Folder එක ඇතුලේ තමයි , අපේ වෙබ් සයිට් එක හදන්න ඕන. ඒ සදහා මුලින්ම ඔබ හදන්න වෙබ් සයිට් එකට ගැලපෙන නමක් දිල , අලුත් Folder එකක් , www Folder එක ඇතුලේම හදා ගන්න. 
දැන් , Notepad++ එක Open කරන්න. ඊට පස්සේ අලුත් පිටුවක් අරන් , ඒක අර www Folder එක ඇතුලේ , ඔබ හදපු අලුත් Folder එක ඇතුලේ Save කරගන්න. මෙතනින් එහාට , මේ වෙබ් සයිට් එකට අදාලව හදන සියලුම වෙබ් පිටු , මේ අලුත් Folder එක ඇතුලේම Save කරන්න. 

අපි වෙනත් , අලුත්ම වෙබ් සයිට් එකක් හදනව නම් , www Folder එක ඇතුලේ නැවතත් අලුත් Folder එකක් ඔබ කැමති නමක් දිල හදල , ඒක ඇතුලේ ඉදන් වැඩ පටන් ගන්න.


3. Wamp Server එක හරියටම වැඩ කරනව නම් , Task Bar එකේ තියේන Wamp Server Icon එක කොළ පාට වෙල තියේන්න ඕන.
කොළ පාටට නැතුව , Wamp Server Icon එක රතු පාට වෙල තියේනව නම් Wamp Server එක හරියට වැඩ කරන්නේ නැ. එහනම් , මේ පහලින් කියල තියේන දේ කරන්න.

*  Task Bar එකේ තියේන Wamp Server Icon එක රතු පාට නම් හෝ Wamp Server එක Open කරල තියේද්දි , වෙබ් සයිට් එකට අදාල PHP ෆයිල්ස් වැඩ කරන්නේ නැත්නම් , Task Bar එකේ තියේන , පොඩි ඊතලය ක්ලික් කරන්න. එවිට , W අකුරත් එක්ක තියේන Wamp Server Icon එක උඩට ගිහින් , Right ක්ලික් කරන්න. එවිට එන Menu එකේ අවසානයට තියේන Put Online කියන එක ක්ලික් කරන්න.


4. ඒ වගේම HTML වලදි , Open කරන ඕනැම ටැග් එකක් , ඒම Open කරපු වෙබ් පිටුව තුලදිම අනිවාරේන්ම Close කරන්නත් ඕන. 
හිතන්න <head> ටැග් එක Open කරා කියල , අනිවාරේන්ම ඒක </head> කියල , ඒම වෙබ් පිටුව තුලදිම Close කරනව. 

5. අපි නිර්මාණය කරන වෙබ් සයිට් එකට අනිවාරේන්ම Bootstrap දාන්න ඕන. මොකද Bootstrap භාවිත කරල තමයි අපට Responsive වෙබ් සයිට් එකක් නිර්මාණය කරගන පුලුවන් වෙන්නේ. ඒ වගේම ලස්සන වෙබ් සයිට් එකක් නිර්මාණය කරගන්නත් පුලුවන් වෙන්නේ. 

ඔබ නිර්මාණය කරන වෙබ් සයිට් එකට Bootstrap දාන්න , මේ පහල කියල තියේන විධියට කරන්න. 

* <head> ටැග් එකට පස්සේ හා <title> ටැග් එකට කලින් , මේ " <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> " ටැග් එක දාන්න. 

* ඉන් පසුව , Footer ටැග් එකට පසුව හා </body> එකට කලින් , මේ " <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> " හා " <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script> " ටැග්ස් 2ම දාන්න.

Bootstrap ගැන දැන ගන්න ඕන නම් මෙතනින් යන්න. 

6. ඒ වගේම , අපි ඉදිරියේදි Div Classes භාවිතා කරනව. මේවත් අනිවාරේන්ම , ඒ අදාල Div Class එක Open කරපු වෙබ් පිටුවේදිම , Close කරන්නත් ඕන. මේ පහල පින්තුරයේ පෙන්වා තියේන්නේ , එක උදාහරනයක්.

* මේ ඉහල පින්තුරයේ නිල් පාට ඊතලයේන් පෙන්නල තියේන්නේ Div Container Class එකේ ආරම්භය වේ. ඒ වගේම , නැවතත් පහලින් නිල් පාට ඊතලයේන්ම පෙන්නල තියේන්නේ Div Container Class එක එතනින් අවසන් කියලයි. 
කොළ හා රෝස පාට ඊතල වලිනුත් පෙන්නල තියේන්නේ ආරම්භයන් හා අවසානයන් වේ.

7. ඒ වගේම , ඔබේ වෙබ් සයිට් එකට දාන්න ඕන පින්තුර , අර අපි කලින් , www Folder එක ඇතුලේ හදා ගනිපු අලුත් Folder එක ඇතුලේ , Images කියල Folder එකක් අලුතින් හදල , ඒකට දාන්න. ඊට පස්සේ වෙබ් සයිට් එකේ අදාල වෙබ් පිටුවේ ජායාරුපය පෙන්විය යුතු තැන ජායාරුපයේ Location එක ලබා දෙන්න. 
මෙන්න , මේ විධියට - href="img/SLSOC.jpg" - තමයි Location එක ලබා දෙන්නේ. 


* මේ පහල ජායාරුපයේන් පෙන්වා ඇති සියලුම කොටස් වල තේරුම , මෙම ජායාරුපයට පසුව පැහැදිලි කර ඇත. 

01 - <!doctype html>

<!doctype html> කියන්නේ Document Type Declaration එකක්. ඒ කියන්නේ අපි නිර්මාණය කරන වෙබ් සයිට් එක ලියල තියේන භාෂාවේ , Version එක ගැන , Web Browser එකට උපදෙස් දිමක් තමයි මේකේන් වෙන්නේ. මේක HTML Tag එකක් නෙමේ. නමුත් , <html> එකට කලින් , මේක අනිවාරේන්ම උඩින්ම ලියන්න ඕන. 

02 - <html>

මේක නැතුව මුකුත් කරන්න බැ. ඕනැම වෙබ් සයිට් එකක් පදනම ( Base එක ) වෙන්නේ මේක තමයි. 

03 - <head>

මෙහි තමයි , ගොඩක් වෙබ් සයිට් එකට අදල උපදෙස් එහම ගබඩා කරල තියේන්නේ. <head> එකට පහලින් හා <title> එකට කලින් , අපි සාමාන්යේන් තව Tags කිපයක් ලියනව. ඒ Tags ටික තමයි , මේ පහලින් පෙන්නල තියේන්නේ. 

* <meta charset="utf-8"> - මෙයින් , වෙබ් පිටුවේ තියේන අක්ෂර ගැන පැහැදිලි කරන්න භාවිතා කරනව. 

* <meta name="viewport" content="width=device-width, initial-scale=1"> - මෙයින් , වෙබ් සයිට් එකක් ජංගම දුරකතනයක් පෙන්විය යුතු ප්‍රමාණය තිරණය කරනව. මේක නැති වුනෝතින් , පරිගණකයේ පෙන්වන වෙබ් සයිට් එකම , ජංගම දුරකතනයේත් පෙන්වනවා. ඒ නිසා , මේ Tag එක අනිවාරේන් භාවිතා කල යුතුයි.

* <link rel="icon" href="img/SLSOC.jpg"> - ඔබේ සයිට් එකට Favicon එකක් දාන්න , මේ Tag එක භාවිතා කරන පුලුවන්. Web Browser එකේන් Facebook , Open කරල තියේන ටැබ් එකේ වම් පැත්තේන් F අකුර තියේන නිල් පාට පොඩි පින්තුරයක් දැකල තියේනව නේද , අන්න ඒකට තමයි Favicon එක කියන්නේ. 
මෙහි , href කියන තැනට , ඔබට Favicon එක විධියට දාන්න ඕන පින්තුරය තියේන තැන Location එක දෙන්න. 

* <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> - අපිට Responsive වෙබ් සයිට් එකක් නිර්මාණය කරන්න උදව් ලබා දෙන හොදම කෙනා තමයි Bootstrap කියන්නේ. ඒ සදහා අපි <head> එක යටතේ , මේ " <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> " කියන ටැග් එක දාන්න ඕන. 

04 - <title>
       </title>

වෙබ් සයිට් එකේ නම දාන්න ඕන මෙතනට. Web Browser එකේ , වෙබ් සයිට් එක Open වෙල තියේන ටැබ් එකේ Favicon එකත් එක්ක පෙන්වන්නේ , මෙතනට ලබා දෙන නම තමයි. 
<title> කියන්නේ ටැග් එකේ ආරම්භය. </title> කියන්නේ , ඒ Tag එක එතනින් අවසන් කියලයි. 

මෙහිදි , නම ලබා දෙන්න පුලුවන් ක්‍රම 2ක් තියේනව. 

i - <title>
    Seven Net
     </title>

මෙහිදි , <title> හා </title> ටැග් 2ක අතරට , ඔබේ වෙබ් සයිට් එකට අදාල නම දෙන්න පුලුවන්. නමුත් හිතන්න , ඔබේ වෙබ් සයිට් එකට වෙබ් පිටු 100ක් තියේනව කියල , කවද හරි දවසක අපිට වෙබ් සයිට් එකේ නම වෙනස් කරන්න ඕන වෙනව. එතකොට , අපි මේ 1 ක්‍රමේ විධියට නම් නම ලබා දුන්නේ , අපට වෙබ් පිටු 100ම , <title> එකට ගිහින් , 100 වතාවක්ම නම වෙනස් කරන්න වෙනව. ඒක ලේසි වැඩක් නෙමේ. ඒ නිසා තමයි 2 වෙනි ක්‍රමය තියේන්නේ. 

ii - <title>
     <?php
     include("title.php")
     ?>
     </title>

මෙහිදි අපි , අපේ වෙබ් සයිට් එකේ නම වෙනම ලියල , ඒක අපට ඕන නමක් දිල , PHP ෆයිල් එකක් විධියට Save කරගන්න. අපි නම් Save කරගත්තේ title කියලයි. මේ පහල පින්තුරයේ විධියට නිකන්ම වෙබ් සයිට් එකට දාන්න ඕන නම විතරක් ලිව්වාම ඇති. 

ඊට පස්සේ , වෙබ් සයිට් එකේ නම පෙන්වන්න ඕන , වෙබ් පිටු වලට , මේ 
" <title>
<?php
include("title.php")
?>
</title> " ටැග් එක දැම්මාම ඇති. 

දැන් හිතන්න , අපි මේ ටැග් එක වෙබ් පිටු 100කට දැම්ම කියල. ඊට පස්සේ , අපට නම වෙනස් කරන්න ඕන වෙනව , දැන් කරන්න තියේන්නේ අර title.php කියන ෆයිල් එකේ තියේන නම විතරක් වෙනස් කරන එක විතරයි. එතන වෙනස් කරපු ගමන් , අර වෙබ් පිටු 100ම නමුත් වෙනස් වෙනව. කොච්චර ලේසිද කියල තේරේනව නේද. කාලය , ශ්‍රමය සියල්ලම ඉතුරුයි. 

අපි ඔයාලට කලින් කිව්ව , වෙබ් නිර්මාණය කරන සයිට් එකට අදාලව හදන සියලුම වෙබ් පිටු PHP වලින් Save කරගන්න කියල. ඒ මෙන්න මේ වගේ අවස්ථා වලදි ඕන වෙන නිසයි. මොකද මේ වගේ ලින්ක් එකක් හදන්න පුලුවන් PHP වලටයි. 

05 - <style>
       </style>

මෙතන ලියන්නේ , නිර්මාණය කරන වෙබ් සයිට් එකට අදාල සියලුම CSS ( Cascading Style Sheets ) ටැග්ස් ටික. CSS වලින් තමයි වෙබ් සයිට් එකක් ලස්සන කරන්නේ. ඒ කියන්නේ ඉතාමත්ම ලේසියේන්ම වෙබ් සයිට් එකේ Background Colors , Font Size , Font Colors , Web Page Sizes ඇතුලු තව ගොඩක් දේවල් හදන්න පුලුවන්. 
සියලුම CSS ටැග්ස් , Java Script එකතු කරල තමයි , Bootstrap හදල තියේන්නේ. අපි කොහමත් වෙබ් සයිට් එකට Bootstrap දානව. ඊට අමතර ඔබට වෙන ඕන විධියකට වෙබ් සයිට් එක වෙනස් කරගන්න ඕන නම් , CSS භාවිතා කරන්න පුලුවන්. 

CSS , මේ විධියට <head> එක ඇතුලේ දාන්නත් පුලුවන්. එහම නැත්නම් , අපි ලියන HTML ටැග් එකත් එක්කම දාන්නත් පුලුවන්. එහමත් නැතිනම් , වෙනම CSS ෆයිල් එකකින් ලියල , ඒවා අදාල වෙබ් පිටුවට ගන්නත් පුලුවන්. CSS කියන්නේ , වෙනම භාෂාවක්. අපි ඒක ගැන වෙනම පොස්ට් එකකින් කතා කරමු. දැනට මතක තියා ගන්න , CSS , වෙබ් පිටුවකට දාන්න පුලුවන් ආකාර 3ක් තියේනව කියල , මේ කිව්ව විධියට.

06 - </head>

</head> එක මෙතනින් අවසන් කියල තමයි කියන්නේ. 

07 - Navigation.

මෙතනදිත් , Navigation එක දාන්න පුලුවන් ක්‍රම 2ක් තියේනව. 

i - මෙහිදි <body> ටැග් එකට ඉහලින් , නිකන්ම Navigation එකට අදාල Codes ටික දාන්න පුලුවන්. නමුත් හිතන්න , ඔබේ වෙබ් සයිට් එකට වෙබ් පිටු 100ක් තියේනව කියල , කවද හරි දවසක අපිට වෙබ් සයිට් එකේ Navigation එක වෙනස් කරන්න ඕන වෙනව. එතකොට , අපි මේ 1 ක්‍රමේ විධියට නම් Navigation එක ලබා දුන්නේ , අපට වෙබ් පිටු 100ම , Navigation එකට ගිහින් , 100 වතාවක්ම Navigation එක වෙනස් කරන්න වෙනව. ඒක ලේසි වැඩක් නෙමේ. ඒ නිසා තමයි 2 වෙනි ක්‍රමය තියේන්නේ. 

ii - <?php
     include("nav.php")
     ?>

මෙහිදි අපි , වෙබ් සයිට් එකේ Navigation එක වෙනම ලියල , ඒක අපට ඕන නමක් දිල , PHP ෆයිල් එකක් විධියට Save කරගන්න. අපි නම් Save කරගත්තේ nav කියලයි. මේ පහල පින්තුරයේ විධියට නිකන්ම වෙබ් සයිට් එකට දාන්න ඕන Navigation එක විතරක් ලිව්වාම ඇති. 
ඊට පස්සේ , වෙබ් සයිට් එකේ Navigation එක පෙන්වන්න ඕන , වෙබ් පිටු වලට , 
මේ " <?php
        include("nav.php")
        ?> " ටැග් එක දැම්මාම ඇති. 
දැන් හිතන්න , අපි මේ ටැග් එක වෙබ් පිටු 100කට දැම්ම කියල. ඊට පස්සේ , අපට Navigation එක වෙනස් කරන්න ඕන වෙනව , දැන් කරන්න තියේන්නේ අර nav.php කියන ෆයිල් එකේ තියේන Navigation එක විතරක් වෙනස් කරන එක විතරයි. එතන වෙනස් කරපු ගමන් , අර වෙබ් පිටු 100ම Navigation එකත් වෙනස් වෙනව.  
සරල Navigation එකක Code එකක් , මෙතනින් ගිහින් ගන්න. ඒ කිව්වේ , අපි nav.php කියල Save කරන ෆයිල් එක තමයි , මේ විධියට දෙන්නේ.

08 - <body>

වෙබ් සයිට් එකේ ලිපි , පින්තුර දාන්නේ මේ කොටසේ. 

<body> එකේ නිකන්ම අපිට ඕන ලිපිය ලියන්නේ නැ. මොකද එහම ලිව්වාම Responsive වෙබ් සයිට් එකක් හදා ගන්න ආමාරුයි. අපි , මෙහිදි එක්තර ක්‍රමයකට තමයි , ලිපිය ලියන්න පටන් ගන්නේ. එහම නැත්නම් තොරතුරු දාන්න පටන් ගන්නේ. 

අපිට ඕන ලිපිය ලියන්න කලින් , අපි container කියල Class එකක් හදුනවා දෙනව. මේ container Class එක කොයි වගේ Class එකක්ද කියල දැනටමත් , Bootstrap වලින් පැහැදිලි කරල තියේනව. 
මෙහමයි , container Class එක කියන්නේ CSS Class එකක්. වෙබ් සයිට් එකේ පළල , දිග , Background Color එක මොන වගේ වෙන්න ඕනද කියල වගේ ඇතුලුව තව ගොඩක් දේවල් හදන්න පුලුවන්. නමුත් , අපි Bootstrap වෙබ් සයිට් එකට දැම්මට පස්සේ , container Class එක ලියන්නේ නැ , මොකද ඒක දැනටමත් Bootstrap වල ලියල තියේන නිසා. 

අපට කරන්න තියේන්නේ Bootstrap වල දැනටමත් ලියල තියේන container Class එක , වෙබ් සයිට් එකට දාන එක විතරයි. ඒ සදහා , මේ " <div class="container"> " ටැග් එක , <body> ටැග් එකට පහලින් දාන්න. 

ඒ වගේම , මේ ඉහලින් කිව්ව ටැග් එකට පස්සේ , මේ " <div class="row text-center"> " හා " <div class="col-md-12 col-sm-6 hero-feature"> " කියන ටැග් 2ම දාන්න. 
මොකද , මේ ටැග් 2න් තමයි වෙබ් සයිට් එකේ තියේන ලිපි එහම Responsive කරල තියා ගන්නේ. ඒ කියන්නේ , වෙබ් සයිට් එකට එන උපාංගයට අදාල ප්‍රමාණයට වෙබ් සයිට් එක හදල පෙන්වන්නේ. 

* සැ.යු. - මේ පොස්ට් එකේම මැද හරියේ , සැලකිය යුතුයි කියන එක යටතේ 5 වෙනියට තියේන එක නැවතත් කියවන්න.

මෙහම හිතන්න , වෙබ් සයිට් එකේ පළල අතට එක ලිපියක්ම දානව නම් , 3 වෙනියට තියේන " <div class="col-md-12 col-sm-6 hero-feature"> " Tag එකේ , col-md- කියන තැනට 12 කියල දෙනව. col-sm- කියන තැනට , අර කලින් දුන්න ඉලක්කමේන් භාගයක් දෙනව. ඒනම් කලින් දුන්නේ 12 නිසා , මෙහිදි col-sm- එකට දෙන්නේ 6 කියල.
මේ Col-md එකට , අපි සමහර වෙලාවට Grid View එක කියලත් කියනව.

හිතන්නකෝ , වෙබ් සයිට් එකේ පළල අතට ලිපි 2ක් දානව කියල. එතකොට <div class="col-md-12 col-sm-6 hero-feature"> එකේ , col-md- එකට 6 කියල හා col-sm- එකට 3 කියල දෙන්න. 

මෙහිදි , අපි දැන ගන්න ඕන දේවල් තමයි , <div class="col-md-12 col-sm-6 hero-feature"> එකේ , col-md- එකට දෙන්න පුලුවන් උපරිම ගණන 12 හා col-sm- එකට දෙන්න පුලුවන් උපරිම ගණන 6 කියල. ඒ වගේම වෙබ් සයිට් එකේ පළල අතට ලිපි දාන ගණන අනුව , col-md- එක බෙදෙනව. col-md- එකට අනුව , col-sm- එකට දාන්න ඕන. 
ලිපි 1යි නම් , col-md-12 හා col-sm-6
ලිපි 2යි නම් , col-md-6 හා col-sm-3
ලිපි 3යි නම් , col-md-4 හා col-sm-2

මේ Col-md එක ගැන , එහමත් නැත්නම් Grid View එක ගැන තව හොදට තේරුම් ගන්න ඕන නම් , මෙතනින් ගිහින් , මේ විඩියෝ එක බලන්න. මේකේ හොදට පැහැදිලි කරල තියේනව.

09 - Footer.

මෙතනදිත් , Footer එක දාන්න පුලුවන් ක්‍රම 2ක් තියේනව. 

i - මෙහිදි </body> ටැග් එකට ඉහලින් , නිකන්ම Footer එකට අදාල Codes ටික දාන්න පුලුවන්. නමුත් හිතන්න , ඔබේ වෙබ් සයිට් එකට වෙබ් පිටු 100ක් තියේනව කියල , කවද හරි දවසක අපිට වෙබ් සයිට් එකේ Footer එක වෙනස් කරන්න ඕන වෙනව. එතකොට , අපි මේ 1 ක්‍රමේ විධියට නම් Footer එක ලබා දුන්නේ , අපට වෙබ් පිටු 100ම , Footer එකට ගිහින් , 100 වතාවක්ම Footer එක වෙනස් කරන්න වෙනව. ඒක ලේසි වැඩක් නෙමේ. ඒ නිසා තමයි 2 වෙනි ක්‍රමය තියේන්නේ. 

ii - <?php
     include("footer.php")
     ?>

මෙහිදි අපි , අපේ වෙබ් සයිට් එකේ Footer එක වෙනම ලියල , ඒක අපට ඕන නමක් දිල , PHP ෆයිල් එකක් විධියට Save කරගන්න. අපි නම් Save කරගත්තේ footer කියලයි. මේ පහල පින්තුරයේ විධියට නිකන්ම වෙබ් සයිට් එකට දාන්න ඕන Footer එක විතරක් ලිව්වාම ඇති. 
ඊට පස්සේ , වෙබ් සයිට් එකේ Footer එක පෙන්වන්න ඕන , වෙබ් පිටු වලට , 
මේ " <?php
        include("footer.php")
        ?>"  ටැග් එක දැම්මාම ඇති. 
දැන් හිතන්න , අපි මේ ටැග් එක වෙබ් පිටු 100කට දැම්ම කියල. ඊට පස්සේ , අපට Footer එක වෙනස් කරන්න ඕන වෙනව , දැන් කරන්න තියේන්නේ අර footer.php කියන ෆයිල් එකේ තියේන Footer එක විතරක් වෙනස් කරන එක විතරයි. එතන වෙනස් කරපු ගමන් , අර වෙබ් පිටු 100ම Footer එකත් වෙනස් වෙනව.  

සරල Footer එකක Code එකක් , මෙතනින් ගිහින් ගන්න. ඒ කිව්වේ , අපි footer.php කියල Save කරන ෆයිල් එක තමයි , මේ විධියට දෙන්නේ.

10 - </body>

</body> එක මෙතනින් අවසන් කියල තමයි කියන්නේ. 

11 - </html>

</html> එක මෙතනින් අවසන් කියල තමයි කියන්නේ. ඒ කියන්නේ , අපි නිර්මාණය කරමින් ආපු වෙබ් සයිට් එකේ සියලුම කටයුතු මෙතනින් නවත්තන්න ඕන. 

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

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

* මේ පොස්ට් එකට අදාලව , මේ දේවල් තමයි කියන්න තියේන්නේ. ඊලග පොස්ට් එකේන් PHP හා MySQL එක්ක Contacts Forms , Event Forms වගේ ඒවා නිර්මාණය කරන්නේ කොහමද , Forms වලින් ගන්න දත්ත PhpMyAdmin වගේ ඒවායේ ගබඩා කරල තියන්නේ කොහමද , ගබඩා කරල තියේන දත්ත ඕන වෙලාවට නැවත ගන්නේ කොහමද කියල බලමු. 

* මේ පොස්ට් එකේන් ඔබට මොනවම හරි දේයක් ඉගෙන ගන්න පුලුවන් වුනා නම් , Comment එකකුත් දාන්න.

-------------------------------------------------------------------------------------------------------------------

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

#. වෙබ් අඩවි නිර්මාණය පාඩම් - 01

#. වෙබ් අඩවි නිර්මාණය පාඩම් - 02

#. වෙබ් අඩවි නිර්මාණය පාඩම් - 03

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

මුලින්ම කියන්න ඕන , මේ පොස්ට් එකට අදාල සියල්ලම අපට කියල දුන්නේ Kuppiya.lk එකේ kuppiya transporter අයියයි. ඒ නිසා , kuppiya transporter අයියට ගොඩක් ස්තුතියි කියන ගමන්ම , මේ පොස්ට් එක කියවන්න පටන් ගමු.

ඊයේ දිනයේදි Maleesha Weerasekara කියන සහෝ , Seven Net එකේ කතෘ කෙනෙක් විධියට එකතු වුනා. Maleeshaටත් සුභ පතන ගමන් , අපි පොස්ට් එක ගැන බලමු.

නමුත් , අපේ වැදගත් සියලුම දේවල් තියේන ලැප්ටෝප් එකක් හදිස්සියේවත් කැඩුනෝත් , ඒක අපට ගොඩාක් ලොකු පාඩුවක්. නැවතත් ලැප්ටොප් එක හදා ගන්න පුලුවන් වෙවි. නමුත් එකටත් යම්කිසි කාලයක් යනව. ඉතින් යම්කිසි කාලයක් යනව කියන්නේත් , ඒකත් අපට වෙන පාඩුවක්. ඊලගට හදන්න මුදල් වැය වෙනව කියන්නේත් , අපට සිදුවෙන පාඩුවක්. 

* ඒ වගේම , ලැප්ටොප් වල එන ලෙඩ ගැන හිතල බලන්න. 

1. ලැප් එක සැහෙන්න රත් වෙන්න පුලුවන්.
2. ලැප් එකේ DVD එක වැඩ කරන්නේ නැති වෙන්න පුලුවන්.
3. ලැප් එකේ සමහර Keys වැඩ කරන්නේ නැති වෙන්න පුලුවන්.
4. ලැප් එකේ Sound එන්නේ නැ චර චර ගානවා. 
5. ඔන්න එකපාරටම නිල් පාට ස්ක්‍රින් එකක් ඇවිත් යනවා. 
6. දැන් ලැප් එක On වෙන්නෙම නැ. 
7. ඉස්සර නම් පොඩ්ඩක් වෙලා Power එකට ගහල තිබ්බම ON වුනා , පස්සේ පස්සේ එහම ON වෙන්නේත් නැති වුන.
8. USB එකට මොනවා සම්බන්ද කරත් " අපි සම්බන්ද කරල තියේන්නේ High Speed එකක් , අඩු Speed එකක් තියේන USB Port එකකට " කියන එක එනවා.
9. ලැප් එක Charge වෙන්නේ නැ. 

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

* හරි , අපි බලමු ඇයි ලෙඩ තියේන ලැප්ටොප් වෙළදපොලේ තියේන්නේ කියල.

* හොදයි මේක ගැන මෙහෙම බලන්න. අපි පිට රටකින් ලැප් එකක් ගත්තොත් එකට Warranty හම්බෙනවා වගේම , කිසිම ලෙඩක් නැතුව 5 Years විතර පාවිච්චි කරන්න පුළුවන්. එත් ඔයගොල්ලෝ දන්නවා ඇති අපි යුනිටි එකෙන් ගන්න ලැප් වලට වෙන දේ මොකක්ද කියල. ඔය ලැප් මොන වර්ගයේ වුනත් ඕව ඔක්කොම Assemble කරන්නේ චීනේ. එකේ තියන සමාගම් වලින් තම වැඩේ කරන්නේ. ඕනෙම Electronic භාන්ඩයක් හදනකොට QC – Quality Controlling කියල දෙයක් තියනවා. මේක පියවර 10 -100 අතර ගානක් යනවා. ඒ ගැන වැඩි විස්තර පස්සේ වෙනම එකකින් දෙන්නම්. ඔය පියවර ඔක්කොගෙන්ම සමත් වුන ලැප්ස් තමා වෙළද පොලට දාන්න අයිතිය තියෙන්නේ.

* දැන් වැඩේ වෙන්නේ මෙහෙමයි. 

අපේ යුනිටි එකේ අය අර සමාගම් එක්ක සම්බන්ද වෙලා අර QC පියවරවල් ඔක්කොගේන්ම් සමත් නොවිච්ච ලැප් අඩුගානට ගේනවා මෙහෙට. ඒ QC Fail වුන කියල නැනේ හදන්න ගියපු ගාන යනවම තමා. ඒ නිසා ඒ සමාගම් කැමති කුණු කොල්ලෙට හරි ඒ බඩුව විකුණලා දාන්න . ඕවට කියනවා “ Factory Fault ” එහම නැත්නම් “ Value goods ” කියල. ඒවා එහෙන් බිල් කරන්නේ ඉතාමත් අඩු ගානකට. ඒවගේම ඔරිජිනල් බොක්ස් එකත් එකෙන්ම දෙනවා. හැබැයි අර එල්ලගෙන යන බෑග් එක දෙන්නේ නැ. එකයි ඔයගොල්ලෝ Dell ලැප්ටොප් එකක් ගත්තාම , සමහර කඩවල් වලින් හයිය වැඩි කියල HP බෑග් එකක් දෙන්නේ. අහුවෙන්න එපා ඕවට.

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

* ලැප්ටොප් එකක් Original කියන්නේ කොහොමද ?? 

1. ) දැන් කොහොමද ඔරිජිනල් කියල අදුරගන්නේ ?? එකට තියනවා ඔය හැම ලැප්ටොප් එකකම Service Tag කියල එකක්. එක තියෙන්නේ ලැප්ටොප් එකේ යට පැත්තේ. මේකටම Serial Number එක කියලත් කියනවා. 
* Service Tag එක ( Serial Number එක ) අදාල ලැප්ටොප් Brand එකේ , වෙබ් සයිට් එකේ Register කරන්න පුලුවන් නම් , ඔබේ ලැප්ටොප් එක Value Good එකක් , Factory Fault එකක් නෙමේ , නියම ප්‍රමිතියේන් යුතු හරි ලැප්ටෝප් එකක්.

* මේ පහල තියේන ලින්ක් වලින් , ඔබ භාවිතා කරන ලැප්ටොප් Brand එකට අදාල වෙබ් සයිට් එකට ගිහින් , ඔබේ ලැප්ටොප් එක Register කරන්න.

#. HP Registration.

#. DEll Registration.

#. Asus Registration.

#. Toshiba Registration.

#. Acer Registration.

* මේ පහල ජායාරුප වල පෙන්වා තියේන්නේ , ලැප්ටොප් වල තියේන Serial Number එක හෙවත් Service Tag එක සහ තවත් විස්තර.

2. ) ඔයාල මිළදි ගන්න යන්නේ Toshiba ලැප්ටොප් එකක් නම් , ලැප්ටොප් එකත් එක්ක ලැබෙන Manual එකේ හෝ ඔරිජිනල් වෙබ් සයිට් එකේ තියනවා ලැප්ටොප් එකත් එක්ක එන Packing ලිස්ට් එක. උදාහරණ ලෙස බෑග් එක , පවර් කේබල් එක , Driver DVD එක වගේ දේවල්. ඒ ඔක්කොම හම්බෙනවද බලන්න. නැත්නම් ඔබ මිළදි ගන්න යන්නේ ඔරිජිනල් ලැප්ටොප් එකක් නෙමේ. ඒ නිසා එපා කියල ආපහු එන්න.

3. ) ඔයා Toshiba ලැප්ටොප් එකක් නම් මිළදි ගන්නේ , නමුත් ලැබෙන්නේ HP ලැප්ටොප් Bag එකක් නම් , ගොඩාක් දුරට ලැප්ටොප් එක හොද එකක් නෙමේ.

4. ) ලැප්ටොප් එක එන Card Board බොක්ස් එකේ තියන Serial Number එකයි , ලැප්ටොප් එකේ Service Tag එකේ තියන Serial Number එකයි , Battery එකේ Serial Number එකයි ගැලපෙනවද කියල බලන්න. සියලුම දේවල් ගැලපෙනව නම් , ලැප්ටොප් එක නිඅයම ප්‍රමිතියේන් යුතු එකක්.

* මේ පහල ලින්ක් වලින් , විවිධ ලැප්ටොප් Brands වලට අදාල අන්තර්ජාතික වෙළදපොලේ සාමාන්‍ය මිළ බලා ගන්න පුලුවන්.

#. HP Laptop Prices.

#. Acer Laptop Prices. 

#. Lenovo Laptop Prices. 

#. Toshiba Laptop Prices. 

#. Asus Laptop Prices. 

* මේ පහලින් තියේන්නේ , ශ්‍රී ලංකාවේ ලැප්ටොප් ඔරිජිනල් ගෙන්නන අයගේ ලිස්ට් එක.

HP - DMS.

DELL - Softlogic.

Acer - Metropolitan.

ASUS - EPSI.

Apple - Future World.

TOSHIBA - John Keells Group.


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

කැමති නම් , අපේ මේ පොස්ට් එකට Comment එකක් දා ගෙනම යන්න. 

හරි , ඔන්න අපි 2017 අවුරුද්දේ පළවෙනි පොස්ට් එක තමයි , මේ විධියට ලබා දෙන්නේ. ඊයේ අපි පොස්ට් එකක් දැම්ම තමයි , නමුත් ඒක පාඨක ඔබලාගේ අදහස් දැන ගැනිමට දැම්ම පොස්ට් එකක්. ඒකට හිතපු තරම් නම් ප්‍රතිචාර ලැබුනේ නම් නැ ඉතින්.. 😕 ඊයේ දාපු පොස්ට් එක මෙතනින් බලන්න.

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

මම අද පළමු පාඩමේන් කියල දෙන්නේ වෙබ් අඩවි නිර්මාණය පිළිබදව හැදින්විමක්. මේක විඩියෝ එකකින් තමයි මම කියල දෙන්නේ , මොකද සම්පුර්ණ පොස්ට් එක ටයිප් කර කර ඉන්න වෙලාවක් නැති නිසා. විනාඩි 9ත් 10ත් අතර වගේ සුලු කාලයක් තමයි මේ විඩියෝ එක තියේන්නේ. ඒ නිසා , ඔබ සියලු දෙනාට මේක ඉක්මණට බලල , ලේසියේන්ම තේරුම් ගන්න පුලුවන්.
නමුත් , ඉදිරි පොස්ට් ටයිප් කරල , හොද උදාහරන එක්ක දෙන්න බලාපොරොත්තු වෙනව. 

එහනම් , මේ පහලින් තියේන වෙබ් අඩවි නිර්මාණය පිළිබදව හැදින්විම තියේන විඩියෝ එක බලන්න.

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

මේ විඩියෝ එකට කියල තියේන Wamp Server එක , මේ පහල ලින්ක් එකේන් නොමිලේ ඩවුන්ලෝඩ් කරගන්න පුලුවන්. 
ඔබේ පරිගණකයේ තියේන්නේ 32 Bit නම් , ඒයට අදාල Version එකද , ඔබේ පරිගණකයේ තියේන්නේ 64 Bit නම් , ඒයට අදාල Version එකද ඩවුන්ලෝඩ් කරගන්න.

#. Free Download Wamp Server.

ඒ වගේම , අපි මේ විඩියෝ එකේදි කිව්ව , ඔබට ඕනැම ආකාරයක Text Editor එකක් පාවිච්චි කරන්න පුලුවන් කියල. එක ඔබේ කැමත්තට අනුව සිදුවන දේයක්. ඒ වගේම , මම නම් භාවිතා කරන්නේ Notepad++ කියන Text Editor එක. Notepad++ එක , මේ පහල ලින්ක් එකේන් නොමිලේ ඩවුන්ලෝඩ් කරගන්න පුලුවන්. 

#. Free Download Notepad++ 31 Bit.

#. Free Download Notepad++ 64 Bit.

හරි , ඕවා තමයි කියන්න තියේන්නේ. ඔබට විඩියෝ එකේ මොනයම් හෝ විධියකින් නොතේරුන තැනක් හෝ තැන් කිපයක් හෝ තිබුන නම් , මේ පහලින් Comment එකක් විධිඅයට දාන්න. අපි පුලුවන් උපරිම විධියට උදව් කරනම්. ඒ වගේම ඔබට වෙනත් මොනයක් දේයක් හෝ දැන ගන්න ඕන නම් , මේ පහලින් Comment එකක් විධියට දාන්න. 😃