Saturday, June 23, 2012

HTML සිංහලෙන් පාඩම 3 - Code කරන හැටි


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 කරන්නේ.

Figure 4
  •  මේ <p> tag යුගලයෙන් කියන්නේ එතන තියෙන්නේ paragraph එකක් කියලයි.
  • දැන් අපි මේ 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 කරන්න. ආයෙත් පාඩමකින් මුණගැසෙමු. එතකම් ගිහින් එන්නම්.

27 comments:

  1. පාඩම තේරුනා.... Thank you sir...

    ReplyDelete
    Replies
    1. නියමයි, test කරලත් බලන්න එතකොට අමතක වෙන එකක් නෑ!

      Delete
  2. Harima saralawa karana nisa hodatama therenawa..obata jayasri,,digatama karagena yanna,,,math asai web design egena ganna,,

    ReplyDelete
    Replies
    1. ස්තූතියි ඔබට. අපේ CSS හා PHP පාඩම් මාලා අධ්‍යයනයෙන් ඔබට තවත් දේ වෙබ් ඩිසයින් ගැන ඉගෙන ගන්න ලැබේවි.

      Delete
  3. උඹේ site එකට අදමයි ආවේ සුපිරියි මචං දිගටම කරපං. අද මේ ඔක්කොම බලල තමයි නිදාගන්නේ! thank you very much for sharing your knowledge with us.. keep it up bro..

    ReplyDelete
    Replies
    1. ස්තූතියි, මේ බ්ලොග් එක කරගෙන යන්නේ අපි පස් හය දෙනෙකුගේ උත්සාහයෙන් තමයි. ඔයාලගේ කොමෙන්ට්ස් අපිට ගොඩක් වටිනව!

      Delete
  4. නියමයි..!! මේවා සිංහලෙන් කරන එක ගොඩක් වටිනව bro!! දිගටම කරගෙන යන්න...

    ReplyDelete
    Replies
    1. ස්තූතියි ඔබේ දිරිමත් කිරීමට

      Delete
  5. නියමයි යන් දිගටම එල

    ReplyDelete
    Replies
    1. ස්තූතියි ඔබේ දිරිමත් කිරීමට

      Delete
  6. සුපිරි අයියේ දිගටම කරන්න
    මමඅද මේක දැක්කේ
    දිගටම එයා එක්ක ඉන්නවා
    කරගෙන යමු

    ReplyDelete
    Replies
    1. ස්තූතියි ලගදීම තව පාඩමක් දාන්නම්.

      Delete
  7. සර්.phone එකෙන් හදන්න බැරිද web page

    ReplyDelete