HTML සිංහලෙන් පාඩම - 3
අද පාඩමෙන් මම බලාපොරොත්තු වෙන්නේ පොඩි පොඩි ප්රායෝගික ක්රියාකාරකම් සමග න්යායාත්මක කරුණුත් ඉදිරිපත් කරන්නයි. මීට පෙර පාඩම අධ්යනය කරල නැත්තම් ඒකට මෙතනින් පිවිසෙන්න. අද පාඩමට අපිට ඕන වෙනව notepad එක සහ web browser එකක්. (නැත්තම් අපි හඳන web pages බලන්නේ මොකෙන්ද?). ඒ වගේම පසුගිය පාඩම් වලින් මම ඉදිරිපත් කළ කරුණු මතක ඇතියි සිතමි. නැත්තම් ආයෙත් ඒ පාඩම් කියවල ඉන්න අද පාඩම පටන් ගන්න කලින්.
HTML වලින් code කරන්න දැන ගත යුතු මූලික කරුණූ.
- අපි මුලින්ම කරන්න ඕන මේ code එක ලියල තියෙන්නෙ HTML වලින් කියල browser එක දැනුවත් කිරීම එක කරන්නේ <html> කියන Tag එකෙන්. Tag එකක් open කලාම ඒක close කරන්නත් ඕන නේ ඒකට භාවිතා කරන්නේ </html> tag එක.
Figure 1 |
- අපි සාමාන්යෙයන් Tags ලියන්නේ simple letters වලින්. ඒක සම්මත ක්රමයක්. ඔබ capital letters භාවිතා කලා කියල වැරදි නැහැ.
- HTML වලින් අපි code කරන හැම දේම ලියන්න ඕන මම කලින් කියපු <html> සහ </html> tag දෙක අතරෙයි.
- අපි ප්රධාන වශයෙන් HTML වෙබ් පිටුවක් කොටස් දෙකකට බෙදා ගන්නව ඒ,
- Head කොටස සහ
- Body කොටස ලෙසයි
- Head එකට බොහෝ වෙලාවට අන්තර් ගත වෙන කොටස් වලින් අපිට පේන දෙයකට තියෙන්නේ title එක විතරයි. (පහත රූපයේ web page එකක Title එක කුමක් දැයි පෙන්වා තියෙනව) ඒකට භාවිතා කරන්නේ <title> හා </title> tag යුගලය. head කොටසේ භාවිතා වන අනෙකුත් tags ගැන අපි පසුවට දැන ගනිමු. (මම tabs තියල type කරල තියෙන්නේ code එක පැහැදිලි හා ලස්සන වෙන්න ඕන නිසයි මේ විදිහටම type කරන්න ඕන කියල නීතියක් නෑ)
Figure 2 |
Figure 3 |
- Body කොටසේ තමයි අපි වෙබ් පිටුවේ අන්තර්ගත වෙන්න අවශ්ය දේවල් code කරන්නේ.
- දැන් අපි මේ code කර ගත්ත file එක save කරගන්න විදිහ බලමු. notepad එකේ file ----> Save ක්ලික් කරන්න එතකොට එන dialog box එක මෙන්න මේ වගෙයි.
Figure 5 |
- ඒකේ save as type කියන property එක All files කියල වෙනස් කරන්න. දැන් file name කියන තැනට ඔයාල කැමති නමක් එකක් .html කියන extention එක දෙන්න හරියට මෙන්න මේ වගේ.
Figure 6 |
- දැන් ඔයාල save button එක click කරල file එක save කරගන්න.
- ඒ save කල file එක මෙන්න මේ වගේ දිස් වේවි ඔයාලට. (මම දුන්න නම My First Web Page)
Figure 7 |
- දැන් ඒ file එක double click කරල open කරන්න කෝ. ඒතකොට මෙන්න මේ වගේ ඔයාලගේ web browser එකෙන් ඒක Open වේවි.
Figure 8 |
දැන් ඔයාල සාර්ථකව පළමු උත්සාහය දරල ඉවරයි. හරිම ලේසියි නේද?. ගැටළු comment කරන්න. ආයෙත් පාඩමකින් මුණගැසෙමු. එතකම් ගිහින් එන්නම්.
පාඩම තේරුනා.... Thank you sir...
ReplyDeleteනියමයි, test කරලත් බලන්න එතකොට අමතක වෙන එකක් නෑ!
Deletesimple..like it :)
ReplyDeleteHarima saralawa karana nisa hodatama therenawa..obata jayasri,,digatama karagena yanna,,,math asai web design egena ganna,,
ReplyDeleteස්තූතියි ඔබට. අපේ CSS හා PHP පාඩම් මාලා අධ්යයනයෙන් ඔබට තවත් දේ වෙබ් ඩිසයින් ගැන ඉගෙන ගන්න ලැබේවි.
Deletesuperiii sirr
Deleteඋඹේ site එකට අදමයි ආවේ සුපිරියි මචං දිගටම කරපං. අද මේ ඔක්කොම බලල තමයි නිදාගන්නේ! thank you very much for sharing your knowledge with us.. keep it up bro..
ReplyDeleteස්තූතියි, මේ බ්ලොග් එක කරගෙන යන්නේ අපි පස් හය දෙනෙකුගේ උත්සාහයෙන් තමයි. ඔයාලගේ කොමෙන්ට්ස් අපිට ගොඩක් වටිනව!
Deleteniyamai..digatama karagena yanna..
ReplyDeleteස්තූතියි ඔබට.
Deleteනියමයි..!! මේවා සිංහලෙන් කරන එක ගොඩක් වටිනව bro!! දිගටම කරගෙන යන්න...
ReplyDeleteස්තූතියි ඔබේ දිරිමත් කිරීමට
Deleteනියමයි යන් දිගටම එල
ReplyDeleteස්තූතියි ඔබේ දිරිමත් කිරීමට
Deleteසුපිරි අයියේ දිගටම කරන්න
ReplyDeleteමමඅද මේක දැක්කේ
දිගටම එයා එක්ක ඉන්නවා
කරගෙන යමු
ස්තූතියි ලගදීම තව පාඩමක් දාන්නම්.
DeletePatta
ReplyDeleteස්තූතියි
Deletetnx
ReplyDeletePatta meka nm.thnks. ....
ReplyDeleteThanks
ReplyDeleteGood work bro❤❤❤❤❤
ReplyDeleteNiyami
ReplyDeleteNiyami
ReplyDeleteTnx mchn
ReplyDeleteසර්.phone එකෙන් හදන්න බැරිද web page
ReplyDeletesuper
ReplyDelete