Tuesday, September 22, 2015

HTML පළමු කොටස- html හැඳින්වීම

යාලුවනේ මම අද ඔයාලට ඔයාලගේ පලවෙනි වෙබ් පිටුව හදන්න කියල දෙන්න යන්නේ.ඊට කලින් අපි ටිකක් බලමු html වල මූලික සිද්ධාන්ත ටිකක්.මේ html කියන පරිගණක භාෂාව අපි ලියන්නේ text editor එහෙක.වින්ඩොව්ස් වල නම් අපිට Notepad බාවිතා කරන්න පුළුවන්.අනිත් කාරනාව තමා html වැඩකරන්නේ වෙබ් browser එහෙක විතරයි.ඉතින් ඔයාලා මුලින්ම html යොදාගෙන වෙබ් page එකක් හදන්න යනවනම් ඔයාගාව වෙබ් browser එකකුයි, text editor එකකයි තියෙන්න ඕනේ.මම යෝජනා කරන්නේ google chrome කියන වෙබ් browser එක මේසඳහා වඩාත් සුදුසුයි කියල.එත් ඔයාට ඕනෑම වෙබ් browser එකක් use කරන්න පුළුවන්. :D

මම මේ පාඩම් මාලාව ගෙන එන්න යොදාගන්නේ notepad++ කියන text editor එක.ඒක ඔයාලට මේ ලින්ක් එකෙන් ලබාගන්නා පුළුවන් .https://notepad-plus-plus.org/download/v6.8.3.html .මේ ලින්ක් එකට ගිහින් notepad++ ලබගෙන් ඔයාගේ පරිගණකයට දදාගත්තට පස්සේ ඔයාට පුළුවන් වෙබ් page එකක් හදන්න පටන් ගන්න.එහෙනම් අපි බලමු වෙබ් page එකක් හදන්නේ කොහොමද කියල.

පියවර 1.

මුලින්ම ඔයාලා notepad++ open කර ගන්න.(ඔයාට notepad++  විතරක් නෙමේ වෙනත් text editor එකක් උනත් බාවිතා කරන්න පුළුවන් )

දැන් ඔයාලට මේ රුපයේ වගේ වින්ඩොව් එකක් open වෙලා පෙන්වි.

පියවර 2.


දැන් මේ වින්ඩොව් එකේ තියෙන file කියන ටැබ් එකට ගිහින් එකේ තියෙන new කියන ටැබ් එක click කරාම ඔයාලට අලුත් වැඩ පිටුවක් open වෙයි.මේ වැඩ පිටුව ctrl + n මගිනුත් ඔයාලට ලබාගන්නා පුළුවන්.


පියවර 3.


දැන් යාලුවනේ ඔයාලා මම කියන විදිහට කරලා බලන්න.දැන් මේ අලුත් වැඩ පිටුවේ මම ඔය පහල රූපේ දාල තියෙන ටික ඒ විදිහටම type කරන්න.


පියවර 4.


දැන් ඔයාලගේ desktop එකේ අලුතෙන් folder එකක් හදාගන්න.ඊට පස්සේ අයෙත් වැඩ පිටුවට ඇවිත් එකේ file කියන ටැබ් එකට ගිහින් save as කියන ටැබ් එක click කරන්න.ඊට පස්සේ ඔයාලට පහල තියෙන වින්ඩොව් එක open වෙයි.එකේ file name කියන තැනට pro1.html කියල දීලා ඔයා කලින් desktop එකේ හදාගත්ත folder එකේ මේ file එක save කරන්න.

පියවර 5. 


ඔන්න දැන් අපි අපේ html file එක save කර ගත්තා.දැන් තියෙන්නේ අපිට ඒක වෙබ් browser එකෙන් open කරලා බලන්න.දැන් අපේ මේ pro1.html කියන file එක save කරපු folder එකට ගිහින් එක උඩ right click කරලා open with ගිහින් ඔයාගේ browser එකෙන් open කර ගන්න.





දැන් open කර ගත්තට පස්සේ ඔයාලට පහලින් පේනවා වගේ output එකක් ලැබෙයි.මේ තමා ඔයාගේ පලවෙනි වෙබ් page එක.මොකද හිතෙන්නේ .


මම කියල දෙන්නම් මේකෙදි මොකද උනේ කියල.අපි වෙබ් page එකක් ලියද්දි වෙබ් browser එක එයාව හඳුනා ගන්නේ <html> කියන කොටසින්.අපි මේ විදිහට < > මෙන්න මේ සලකුණ ඇතුලේ ලියන දේවල් html ටැග්ස් කියල හදුන්වනවා.බොහොමයක් ටැග්ස් වල open සහ close ටැග්ස් කියල ජාති දෙකක් තියෙනවා.අපි open ටැග එක්ක විදිහට <html> කියන එක ගන්න පුළුවන්.එකේම closing ටැග් එක තමා </html> කියන්නේ.අපි කලින් කරපු එකේ ඔයාලට මේක හම්බුනා.එතකොට යාලුවනේ අපි වෙබ් page එකක් ලිනවානම් අනිවාර්යෙන්ම <html> </html> කියන ටග් එක ඇතුලේ තමා ලියන්න ඕනේ.එක් තමා අපේ මූලික පාඩම.

ඊට පස්සේ මම <html> ටැග් එක ඇතුලේ <body> </body> කියල ටැග් එකක් දාලා තියනවා.මේකෙන් තමා වෙබ් browser එක දැනගන්නේ වෙබ් page එක body එකට අදාලව අපි ලියන කොටස් ටික තියෙන විදිහ.ඒ කියන්නේ අපිට වෙබ් page එකේ අන්තර්ගතය නිර්මාණය කරන්න වෙන්නේ මේ <body></body> කියන ටග් එක ඇතුලේ කියන එක.

අපි  <body> ටැග් එක ඇතුලේ තවත් ටැග් එකක් දැම්මා.ඒ තමා <h1> </h1> කියන ටැග් එක.එකෙන් වෙන්නේ heading එකක් දාන එක.අපි මේ <h1> </h1> ටැග එක ඇතුලේ ලියන ඕනෑම දෙයක් heading එකක් විදිහට අපිට browser එකෙන් පෙන්නනවා.එක තමා ඉස්සෙල්ල අපි ලියපු Hello sl Programmers කියන එක අපිට browser එකේ පෙන්නුවේ.

දැන් යාළුවන්ට මේ ලියපු code එකේ වෙන දේ ගැන පුංචි අදහසක් ඇති.ටැග්ස් කියන්නේ මොනවද කියලත් තේරෙනවා ඇති.අහ්හ් තව දෙයක්.ඔයාලට මතක ඇති අපි මේක save කරද්දී file name එක දුන්නේ pro1.html කියලා,ඔයාලට ප්‍රශ්නයක් උනේ නැද්ද ඇයි .html කියල දුන්නේ කියල.අපි html file save කරද්දී extension එක විදිහට use කරන්නේ මේ .html කියන එක.එකෙන් තමා මේ file type එක හඳුනාගන්නේ.ඉතින් ඔය මේක filename.html කියල save නොකර වෙබ් browser එකෙන් open කලොත් ඔයාට output එකක්නම් ලබාගන්නා වෙන්නේ නැ.එක නිසා මතක තියාගන්න අනිවාර්යෙන්ම .html කියල save කරන්න.

එහෙනම් යාලුවෝ ඔය මම දීපු code එක වෙනස් කර කර type කරලා එක එක ඒවා කරලා බලන්න output එක කොහොමද එන්නේ කියල..මම ඊළඟ පාඩමෙන් ඔයාලට මේ html ටැග්ස් තවත් විස්තර එක්ක කියල දෙන්නම්.එහෙනම් මම යනවා.ඔයාලට මේ පාඩම් මාලාව හොඳින් තේරුණානම් පොඩි comment එකක් දාල යන්න අමතක කරන්න එපා..එහෙනම් තව හොඳ හොඳ html වැඩකෑලි එක්ක අපි අයෙත් හම්බුවෙමු.





















Monday, September 21, 2015

සිංහලෙන් HTML ඉගෙනගමු

යාලුවනේ අපි අද ඉඳන් ඔයාලට වෙබ් site එකක් හදන හැටි සරලව කියල දෙන්නයි යන්නේ .ඔයාලා දන්නවා ඇති වෙබ් site හදන්නේ programming language භාවිතා කරලා කියලා.මේ සඳහා භාවිතා කරන මූලික භාෂාව තමා HTML කියන්නේ.මේක බොහොම පහසුවෙන් ඉගෙන ගන්න පුළුවන් පරිගණක භාෂාවක්.ඉතින් ඔයාලට පුළුවන් ඉදිරියට මේ ගැන බොහොම සරලව සිංහලෙන්ම ඉගෙන ගන්න.ඊට කලින් ඔයාලා මේ පහල තියෙන ටික කියෝලා පොඩි අවබෝදයක් ලබාගන්නා.එක අපිට ඉස්සරහ වැඩ කටයුතු  පහසුකරයි.

එහෙනම් අපි අලුත්ම HTML පාඩම් මාලාවත් එක්ක ඉදිරියේදී හමුවෙමු යාලුවනේ.


What is HTML?

HTML is a markup language for describing web documents (web pages).
  • HTML stands for Hyper Text Markup Language
  • A markup language is a set of markup tags
  • HTML documents are described by HTML tags
  • Each HTML tag describes different document content