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 කරන්න. ආයෙත් පාඩමකින් මුණගැසෙමු. එතකම් ගිහින් එන්නම්.
බැලුවද?
Comment එකකුත් දාගෙනම යමු නේ.....
ConversionConversion EmoticonEmoticon