•Frames
වෙබ් පිටුවක් රාමු වලට බෙදුවට පස්සෙ ඒ එක එක රාමුවට වෙන වෙබ් පිටු ආදේශ කරන්න පුලුවන්.
උස අතට වගේම හරස් අතටත් හදන්න පුලුවන්..
ඔයා හිතන්න මේ මගේ වෙබ් පිටු තියෙන folder එක කියලා.. ඒකේ මේ වෙබ්පිටු තියෙනවා..
°School.html
°Sun.html
°Mudi.html
°Myhome.html
දැන් අපි මේ වෙබ් පිටු frame විදිහට පාවිච්චි කරලා අලුත් වෙබ් පිටුවක් හදන්නයි යන්නෙ.. මේ කෝඩින් බලන්නකො ඔයා.. ඊට පස්සෙ මම විස්තර කරන්නම්..
<html>
<frameset rows = 25%, 50%, 25%>
<frame src = "School.html">
<frame src = "Sun.html">
<frame src = "Mudi.html"
</frameset >
</html>
බලන්න.. දැන් ඔයා අලුතින් හදන වෙබ් පේජ් එක තිරස් අතට කොටස් තුනකට බෙදිලා.. මුල්ම එකටයි අන්තිම එකටයි ඉඩ 25% ගානෙ. මැද එකට 50%.
මම දීලා තියෙන පේජ් frame විදිහට ඒ පිලිවෙලට ඒවා ආදේශ වෙලා.. හරි නේද..
ඔයත් කරලා බලන්න.. ඒත් ඔයා ආදේශ කරන්න ඕනේ ඔයා හදපු ඔයාගෙ වෙබ් පේජ් හොදේ..
ප්‍රතිශතයක් විදිහට වගේම සංඛයා විදිහටත් ඉඩ වෙන් කරන්න පුලුවන්. මේ බලන්න..
<frameset rows = "100, 200, 250" >
ඒ වගේම ප්‍රතිශතයක් විදිහට ඉඩ දෙකක් වෙන් කරලා අනිත් ඉඩ ඉබේ හැදෙන්න දෙන්නත් පුලුවන්... මේ බලන්න..
<frameset rows = 40%, 40%, * ">
Frame තුනක් නෙමේ කැමති ගානක් ඔයාට හදා ගන්න පුලුවන්..
ඔයා මේ විදිහට ප්‍රතිශත හරි සංඛයා විදිහට හරි ඉඩ වෙන් කලා වුනත් ඔයා බ්‍රවුසර් එකෙන් ඕපන් කලාම ඔයාට පුලුවන් එහෙට මෙහෙට ඇදලා ඒවයෙ ඉඩ වෙනස් කරන්න.. එහෙම කරන්න බැරි වෙන්න frame එකක් නිශ්චල වෙන්න කෝඩින් කරන්නෙ මෙහෙමයි..
<frame noresize = "noresize" src = "Mudi.html" >
තිරස් වගේම සිරස්වත් ෆ්‍රේරේම් ආදේශ කරන්න පුලුවන් කියලා මම කිව්වනෙ.. බලන්න මේ කෝඩින් එක තේරුම් අරන් කරන්න..
<html>
<frameset rows = "50%, 50% >
<frame src = "School.html">
<frameset cols = "25%, 75%" >
<frame src = "Sun.html">
<frame src = "Mudi.html">
</frameset >
</frameset >
</html>
මම මේ html frame ඉගෙන ගන්න කාලෙ ප්‍රැක්ටිස් කරන්න මෙහෙම දෙයක් මම හිතල කලා.. පේජ් පහක් හැදුවා බොඩි කලර් එක නිල්, කහ, රතු, සුදු, තැඹිලි දාලා. ඊට පස්සෙ සිරස් තීරු හයක් බෙදෙන්න අලුත් පේජ් එකක ෆ්‍රේම් කෝඩ් ලිව්වා.. ආදේශ කලා අර පේජ් පහ. අන්තිම සිරස් තීරුව හරස් අතට පහකට බෙදලත් කෝඩ් ලියලා ෆ්‍රේම් ආදේශ කලා..
මොකද්ද කියලා ඔයාට තේරුම් ගන්න පුළුවන්ද.. ඔව්. ඒ බෞද්ධ කොඩිය. හොද අවබෝධයක් ආවා ෆ්‍රේම් හසුරවන විදිහ ගැන.
•Forms
Database එකකට data ඇතුල් කරන්නත්, දත්ත පිටතට ලබා ගන්නත් තමයි මේ form නිර්මාණය කරන්නෙ..
අපි හදමු form එකක්, name එකයි address එක ගන්නයි..
බලන්නකො මේ කෝඩ්ස්.. මම පැහැදිලි කරන්නම් ඊට පස්සෙ..
<html> <body>
<form>
Your Name :
<Input type = "text" name = YN> <br>
Address :
<Input type = "text" name = AD>
</form>
</body> </html>
Form එකක් හදන්න යොදන්නෙ form ටැග් එක.. input කරන type එක text . මේ වගේ ටයිප්ස් තව තියෙනවා.. මම ඔයාට තව ඉස්සරහදි කියලා දෙනවා.. name YN . ඒ කියන්නෙ මේකට එන්ටර් වෙන දේ ඩේටාබේස් එකේ ගිහිල්ලා වැටෙන්නෙ YN කියන එක යටතෙ. ඔයාට yn නෙමෙයි කැමති විදිහකට දෙන්න පුලුවන් ඒක..
*Radio buttons දාන්නෙ මෙහෙමයි.
<input type = "radio" name "sex" >
Output එක එන්නෙ මෙන්න මෙහෙම..
° Male
°Female
මේ radio buttons වලින් එකක් විතරක් තොරන්න පුළුවන්..
*ඔයා දැකලා තියෙනවා නේද check box. කෝඩින් මෙහෙමයි..
<form>
Novels.
<input type = "checkbox" name = "Books" value = "Novels" >
</form>
*Submit button
ඊලගට ඔයාට කියලා දෙන්නම් submit button එකක් හදන්න කෝඩ් ලියන්නෙ කොහොමද කියලා.. ඉස්සෙල්ලම බලලා ඉන්න මේ කෝඩ් එක...
<html> <body>
<form name = "input" action = "info.html" method = "get">
User Name :
<Input type = "text" name = "user">
<Input type = "submit" value = "submit">
</form>
</body> </html>
ඔයා මේ කෝඩින් එක කරලා බලන්න.. ටෙක්ස්ට් කරන්න පුලුවන් කොටුවක් එක්ක submit button එකක් ඇවිත් ඇති.. ඔයාට ප්‍රශ්න දෙකක් එන්න ඇති..
එකක් action කියලා attribute එකක පේජ් එකක් දීලා තියෙන්නෙ ඇයි කියලා.. මේ User Name කියන බොක්ස් එකට input කරන information යන්නෙ ඒ මම සදහන් කරපු පේජ් එකට.. ඒකත් අපි හදන එකක් හොදේ..
හරි. ඊලග ප්‍රශ්නය තමයි method කියන attribute එක. මේ method කියන එකට get භාවිතා කරනකොට text box එකට ඇතුල් කරන දේ address bar එකේ පෙන්නනවා.. ඒත් method එකට get කියලා දැම්මොත් එහෙම පෙන්නන්නෙ නැහැ.. ඔයා කරලම බලන්නකො.. තේරේවි..
ඊලගට මම කියලා දෙන්නම් text area එකක් හදන විදිහ.. කෝඩ් එක බලන්න....
ඔන්න මම සිංහලෙන්ම ටෙක්ස්ට් ඒරියා එක දානවා..
<html> <body>
<p> HTML යනු.. </p>
<textarea rows = "10" cols = "30">
Markup Language එකකි.
</textarea>
</html> </body>
ඒකත් කරලා බලනකෝ.. text area එකේ ප්‍රමාණය ඔයාට වෙනස් කර ගන්න පුළුවන් හොදේ..
•Meta tag
ඔයා ගූගල් සර්ච් කරනකොට ඔයා ඔයාට හොයන්න ඕන දේ නම ටයිප් කරනවා නේද.. ඊට පස්සෙ ඒකට සම්බන්ධ වෙබ් පේජ් ටික එනවා.. දැන් මේ ඔයා හදන පේජ් එකත් අනිත් අය මේ මේ වචන වලින් හොයනකොට එන්න ඕනෙ කියලා ඔයා තීරණය කරන්න ඕනෙ මේකෙදි.. ඒ වචන ටික.. ඒවා තමයි දැන් අපි මේ මෙටා ටැග් එකෙන් දෙන්නෙ..
බලන්න මේ කෝඩ්..
<meta name = "Keywords" content = "html", "ict", "cording" >
මේ විදිහට key words ගොඩක් දෙන්න පුළුවන්..
ම්ම්... අවසානයට ආවා අපි. ඔයා මුල ඉදලා අවධානයෙන් ඉගෙන ගත්තා නම් දැන් ඔයාට තනියම වෙබ් පේජ් එකක් හදන්න පුලුවන්..
ඔයාට ගැටලු තියෙනවා නම් කමෙන්ට් එකකින් අහන්න..
***********************************
ICT දැනුම blog එකේ ආරම්භය මම HTML වලින් ගත්තා.. තව ඉදිරියට ඔයාට මම තව දේවල් කියලා දෙන්න බලාපොරොත්තු වෙනවා.. ICT වල වෙනත් කොටස් ගැන...
මේ IT දැනුමෙන් මාව පෝෂණය කලාට ගොඩාක් ස්තූතිවන්තව මතක් කරනවා මගේ IT ගුරුපියාණන්, අනුර බණ්ඩාර සර්. සික්සා - අනුරාධපුර.
No comments:
Post a Comment