සැලකිය යුතුයි !! / Considerable !!


යම් කිසි ඩවුන්ලෝඩ් ලින්ක් එකක් ක්ලික් කල පසු , විවෘත වන පිටුවේ
දකුණු පස , උඩ තිබේන 'Skip Ad' ක්ලික් කල පසු , ඔබට අවශ්‍ය දේ ඩවුන්ලෝඩ් කර ගත හැක.

After You Click Download Button , Click 'Skip Ad' In Top Of Right Side.
Yup !! Now U Can Free Download It !!


වෙබ් අඩවියේ මුලික ආකෘතිය සාදමින් , Header , Navigation , Body , Footer හා PHP සමගින් වෙබ් අඩවි නිර්මාණයේ මුල්ම පියවර තබන ආකාරය. ( වෙබ් අඩවි නිර්මාණය පාඩම් - 02 ) [ How To Create a Web Site In Sinhala - With Header , Navigation , Body , Footer , CSS , Bootstrap And PHP. ]


හරි , අපි ගිය සතියේ ඉදන් වෙබ් අඩවි නිර්මාණය කිරිම පිළිබදව පාඩම් මාලවක් පටන් ගත්තා. අද එකේ 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 එකකුත් දාන්න.

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

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


10 comments:

  1. Thank you for very detail post about web design. Please continue writing.

    ReplyDelete
    Replies
    1. Thulshan - Great Bro !!

      Thank U Very Much For Your Comment Bro !! :D

      Delete
  2. Replies
    1. Vidura - Ela Ela !!

      Oyage Comment ekata , Bohomathma Sthuthi Saho !! :D

      Delete
  3. Such a nice blog and i appreciate your all efforts about Fake news. it's really good work. well done.

    ReplyDelete
    Replies
    1. Adrian - Thank U Very Much Bro !! :D

      And , Your Site Is Very Good Bro !! :D

      Delete
  4. Replies
    1. Hashan - Puluwan ikmanata dannam Bro.. Digatama Seven Net Site ekata enna.. :D

      Delete
  5. Replies
    1. Great Bro !! :D

      Thank U Very Much Bro !! :D

      Delete

Tweet Now !!