မဂၤလာပါ ခင္ဗ်ာ ဒီတစ္ခါေတာ့ကြၽန္ေတာ့နဲ႔ညီကိုသူငယ္ခ်င္းတစ္ေယာက္ရဲ႕
ေ႐ွ႕မွာေတာ့အေျခခံေလးေတြတင္ေပးၿပီးၿပီျဖစ္တဲ့အတြက္ၾကည့္ၿပီးေလာက္ၿပီလို႔ထင္ပါတယ္ မၾကည့္ရေသးပဲဒီသင္ခန္းစာကိုမၾကည့္ပါနဲ႔႐ႈပ္သြားပါလိမ့္မယ္ ေ႐ွ႕သင္ခန္းစာကိုအရင္နားလည္ေအာင္ျပန္ၾကည့္ပါ ပထမဆံုးမေန႔က Websiteေရးနည္းသင္ခန္းစာကိုျပန္ၾကည့္လိုက္ပါဒါကိုလင့္ေတြခ်ိတ္ၿပီးhostingေပၚတင္မွာျဖစ္ပါတယ္<!--DOCTYPE html--> <html> <body style="background-color:black;"> <table style=" background-color:black; mergin-left:0px; mergin-right:0px; width:1600px; height:auto; color:white;"> <!--This is page title----> <caption style=" background-color:blue; text-align:center; color:green; font-size:90px; width:auto; height:150px"> NgaBwa NgaAngel(IT STORE) <!--This is page menu bar----> <div style=" width:1600px; height:auto; color:orange; font-size:40px; background-color:green; text-align:left;"> Home Books Application News </div> </caption> <!--This is content----> <tr style=" background-color:black; color:white; font-size:30px; cell-padding:2px; cell-spacing:4px; width:1600px; height:auto; text-align:left;"> <!--This is left content side----> <td style=" width:600px; height:auto;"> 1.Lession1<br> 2.Lession2<br> 3.Lession3<br> 4.Lession4<br> 5.Lession5<br> 6.Lession6<br> 7.Lession7<br> 8.Lession8<br> 9.Lession9<br> 10.Lession10 </td> <!--This is right content----> <td style=" width:1000px; height:auto;"> My name is Naing Linn.I'm Navy Soldier.<br> I'm from Central Naval Armment Depot,<br> Thanlyin,Yangon.My age is 21yr.I'm crazy <br> in Scientic Technology.So when I'm not<br> busy,I learn all Technology that is HTML,<br> CSS,Js and etc...I learn it on facebook<br> by NgaBwa NgaAngel,username without PC.<br> I haven't PC.I have learned by phone.There,<br> all facebook's friend are my teacher.<br> In addition,I'm searched books on google.<br> I thick that if we are crazy in any teachnology<br> ,we will be perfect by trying.Thank for<br> your read. </td> </tr> </table> </body> </html> Okမွတ္မိလားေတာ့မသိဘူး ကဲhostingေပၚတင္ဖို႔ပထမဆံုးလင့္ေတြစခိ်တ္ပါမယ္ ပထမဆံုးcodeကိုcopyကူးယူလိုက္ပါပီးရင္hostingအေကာင့္႐ွိတဲ့သူကcpanal>>filemananger>>public-htmlထဲဝင္ၿပီးmywebpageဆိုတဲ့folderတစ္ခုေဆာက္လိုက္ပါ အေကာင့္မ႐ွိတဲ့သူကေတာ့filemananger>>sdcardထဲဝင္ၿပီးfolderေဆာက္ေပါ့ အေပၚကcodeေတြကိုျပန္ၾကည့္ပါ Menu barမွာHome,Books,Application,Newsဆိုၿပီးေတြ႔ပါတယ္ေနာ္ ဒါကကိုတင္မယ့္ပို႔ေတြကိုအမ်ိဳးအစားခြဲထားတာသေဘာေပါက္မွာပါ အဲ့အမ်ိဳးအစားအလိုက္folderထပ္ေဆာက္ပါမယ္ mywebpageထဲဝင္ၿပီးhome,book,application,newဆိုတဲ့folderေလးခုေဆာက္ပါ ပီးရင္ေတာ့အေကာင့္သမားကေတာ့new fileကိုႏိွပ္ၿပီးအေပၚကcodeကိုထည့္ၿပီးsaveလိုက္ပါhome folderေအာက္မွာhome.htmlပါbook folderရဲ႕ေအာက္မွာbook.htmlပါapplication folderရဲ႕ေအာက္မွာapk.htmlပါnew folderရဲ႕ေအာက္မွာnew.htmlဆိုၿပီးcodeေတြထည့္ၿပီးsaveလိုက္ပါ ok ဒါကဖိုင္ေတြfolderေတြထည့္ၿပီးသြာၿပီေပါ့ေနာ္ Okလင့္ေခၚနည္းစပါမယ္ ခုက်ေနာ္တို႔ရဲ႕home.htmlဆိုတဲ့ဖိုင္ေလးကhomeဆိုတဲ့folderထဲမွာေနာ္ က်န္တဲ့ဖိုင္ေတြလည္းသူတို႔သက္ဆိုင္ရာfolderထဲမွာအသီးသီး႐ွိေနၾကတယ္ ပထမဆံုးအေကာင့္႐ွိသူအေနနဲ႔မိမိရဲ႕domainကို http://www.yoursitename.comလို႔သေဘာထားလိုက္ပါ ဒါဆိုလင့္ေခၚရမယ့္ပံုစံက home.htmlအတြက္<a href="http://www.yoursitename.com/mywebpage/home/home.html">Home</a> book.htmlအတြက္<a href="http://www.yoursitename.com/mywebpage/book/book.html">Book</a> apk.htmlအတြက္<a href="http://www.yoursitename.com/mywebpage/application/apk.html">Application</a> new.htmlအတြက္<a href="http://www.yoursitename.com/mywebpage/new/new.html"> New</a> ဆိုၿပီးေခၚရပါတယ္ အေကာင့္မ႐ွိတဲ့သူေတြကေတာ့domain nameေနရာမွာ ../ ဆိုတဲ့သင္ေကတထည့္ၿပီးmywebpageပါဖ်က္လိုက္ပါ ../ ဆိုတဲ့သင္ေကတကfolderမတူၾကဘူးလို႔အဓိပၸါယ္ရရပါတယ္<a href="../home/home.html">Home</a> အဲ့လိုေျပာင္းေခၚရမွာျဖစ္ပါတယ္ ဒီေလာက္ဆိုလင့္ေခၚတတ္ၿပီထင္ပါတယ္ ကဲအဲ့ဒီcodeေလးခုကိုcopyကူးၿပီး Fileတစ္ခုခ်င္းစီကိုျပန္ဖြင့္ၿပီး<!--This is menu bar----> ေအာက္က<div></div> ျကားကစာေတြအားလံုးကိုဖ်က္ပီးဒီcodeေလးခုကိုထည့္ပီးျပန္saveလိုက္ပါ ကဲခုဆိုmenu barအတြက္လင့္ေခၚၿပီးပါၿပီ ခုဆိုwebsiteစာမ်က္ႏွာတစ္ခုဖန္တီီိးပီးပါၿပီ postတင္မယ္ဆို home folderကလြဲၿပီးက်န္တဲ့folderမွာfileထပ္ေဆာက္codeထည့္ ဒါေပမယ့္ဒီတစ္ခါလင့္ေခၚရမွာကပို႔ေနာ္ menu barအတြက္မဟုတ္တဲ့အတြက္ link codeေတြကို<!--This is left content side----> ေအာက္tdေအာက္ကေနလင့္ကုဒ္တစ္ခုၿပီးတို္င္းbrေလးေတခံၿပီးထည့္ရမွာပါ ပို႔ကိုေတာ့right content sideအျခမ္းမွာေရးရမွာျဖစ္ပါတယ္ ကဲ႐ႈပ္သြားၿပီလားမသိဘူးဗ် တကယ္ေတာ့လြယ္ပါတယ္ဗ် ပါးစပ္ကေျပာေနလို႔ခက္တယ္ထင္ရတာ ပို႐ွင္းသြားေအာင္ေအာက္မွာfolderေဆာက္ၿပီးသား fileေတြထည့္ၿပီးသား zipဖိုင္ေလးေဒါင္းသြားပါခမ်ာ ပီးzipျဖည္ၿပီးဖိုင္ေတြrunၾကည့္လင့္ေတြႏိွပ္ၾကည့္ေပါ့ ဘာcodeေတနဲ႔ေရးလည္းသိခ်င္ရင္ေတာ့ ဥပမာ home.htmlကိုhome.txtလို႔renameျပန္ေပးၿပီးၾကည့္ပါခမ်ာ အ႐ွင္းဆံုးျဖစ္ေအာင္ေရးထားပါတယ္ခမ်ာ ေအာက္မွာေဒါင္းပါ ကဲcokကိုေျပးလိုက္ဦးမယ္ဗ်ိဳ႕ ငိငိ
>>>Download Here<<<
ဒီေန႔တင္ျပသြားမွာကေတာ့ cssနဲ႔ေနာက္ခံပံုထည့္နည္းနဲ႔linkေတြေအာက္ကမ်ဥ္းေၾကာင္းေဖ်ာက္နည္းရယ္linkကိုအေရာင္အမ်ိဳးမ်ိဳးသတ္မွတ္တာရယ္ကိုတင္ျပသြားမွာျဖစ္ပါတယ္ ေနာက္ခံပုံထည့္နည္းကလြယ္ပါတယ္
background-image:url("image link"); ဒီလိုေရးပါတယ္ ကြင္းစကြင္းပိတ္ထဲမွာပံုနာမည္သို႔မဟုတ္လင့္ကိုထည့္ရံုပါပဲ ေနာက္ပီးကိုယ္ထည့္လိုက္တဲ့ပံုနဲ႔ပါတ္သက္ပီးျပင္ဆင္မႈေလးေတလုပ္ပါမယ္ သူ႔ရဲ႕ျပင္ဆင္ခ်က္ေတြကေတာ့ ၁.background-repeat:norepeat; သူကေတာ့ ဥပမာအလ်ား၁၀၀အနံ၁၀၀႐ွိတဲ့tableတစ္ခုတည္းကိုအလ်ား၁၀အနံ၁၀႐ွိတဲ့ပံုတစ္ပံုထည့္မယ္ဆို backgroundထည့္မွာျဖစ္တဲ့အတြက္tableရဲ႕၁၀၀မျပည့္မခ်င္းျဖည့္သြားမွာျဖစ္တဲ့အတြက္ပံုက၁၀ပံုျဖစ္သြားမွာပါ norepeatကိုသံုးျခင္းျဖင့္ပံုကိုတစ္ပံုပဲေပၚေစမွာပါ repeatထားမယ္ဆိုရင္ေတာ့ပံုအမ်ားႀကီးျဖစ္ေနမွာပါ ၂.background-attachment:fixed; သူကေတာ့ဥပမာ tableထဲေနာက္ခံပံုထည့္လိုက္မယ္ပီးရင္စာေရးမယ္ အဲ့မွာuserကစာကိုဆြဲဖတ္တဲ့အခါမွာပံုကလည္းစာနဲ႔အတူလိုက္ပါသြားမွာပါ အဲ့လိုပါမသြားခ်င္ပဲပံုကရပ္ေနၿပီးစာပဲသြားေစခ်င္ရင္ေတာ့fixedကိုသံုးပါတယ္စာနဲ႔အတူပံုပါပါသြားေစခ်င္ရင္ေတာ့scrollကိုသံုးပါတယ္ ၃.background-position:left top; သူကေတာ့ပံုကိုဘယ္နားမွာေပၚေစခ်င္လိုတဲ့အခါမွာသံုးပါတယ္left topဆိုပံုကဘယ္နဲ႔အေပၚေဒါင့္နားေလးမွာေပၚမွာပါ သတိျပဳရမွာကleftနဲ႔topၾကားမွာspaceတစ္ခ်က္ျခားရပါမယ္ pxနဲ႔လည္းေဖာ္ျပလို႔ရပါတယ္ background-position:15px 25px 50px 80px; အဲ့လိုေရးလို႔ရပါတယ္ left top right bottomပါ ၄.background-color:blue; သူကေနာက္ခံအေရာင္ထည့္တာပါ ၅.background-size:100 150px; သူကပံုအရြယ္အစားသတ္မွတ္တာပါ tableတစ္ခုမွာထည့္ျပပါမယ္<html> <head> <style type="text/css"rel="stylesheet"> body{ background-color:violet; } table{ background-image:url("http://ngabwangaangel.site88.net/image/template1.jpg"); background-repeat:norepeat; width:150px; height:150px; background-size:150 150px; cellpadding:2px; cellspacing:5px; color:green; font-size:20px; } </style> </head> <body> <table> <tr> <td>ကကကကကကက</td> <td>ခခခခခခခခခခခခ</td> </tr> <tr> <td>aaaaaaaaaaaaaa</td> <td>bbbbbbbbbbbbbb</td> </tr> </table> </body> </html> ဒီတစ္ခါလင့္ေတြအေရာင္သတ္မွတ္တာကိုေျပာျပပါမယ္ ၁.text-decoration:none; သူကလင့္ေတြမွာေအာက္မွာမ်ဥ္းပါတာကိုသတိျပဳမိၾကမွာပါအဲ့မ်ဥ္းေလးကိုေဖ်ာက္ခ်င္တဲ့အခါသံုးပါတယ္ ၂.a:link သူကuserကclickမလုပ္ရေသးတဲ့လင့္ေတရဲ႕အေရာင္ကိုသတ္မွတ္တာပါ ၃.a:hover သူကuser clickလိုက္တဲ့အခ်ိန္မွာျပမယ့္အေရာင္ပါ ၄.a:focus သူကလင့္ေပၚကိုuserရဲ႕လက္သို႔မဟုတ္mouse pointerေရာက္ေနတဲ့အခ်ိန္မွာျပတဲ့အေရာင္ပါ ၅.a:visited သူကuserကclickၿပီးသားလင့္ေတရဲ႕အေရာင္ကိုသတ္မွတ္တာပါ ေအာက္မွာေရးနည္းၾကည့္ပါ<html> <head> <style type="text/css"rel="stylesheet"> a{ text-decoration:none } a:link{ color:green; } a:focus{ color:orange; } a:hover{ color:blue; } a:visited{ color:red; } </style> </head> <body> <a href="link1">link1</a><br> <a href="link2">link2</a> </body> </html> ကဲcodeေတြကိုrunၾကည့္ပါခမ်ာ
မဂၤလာပါ ခုသင္ခန္းစာကစၿပီး websiteေရးနည္းကိုစတင္မွာျဖစ္ပါတယ္ ေ႐ွ႕မွာသင္ၿပီးသားသင္ခန္းစာေတြနဲ႔ပဲေရးသြားမွာျဖစ္ပါတယ္ ခုသင္ခန္းစာမွာေတာ့<table> tagကိုအသံုးျပဳၿပီးေရးသြားမွာျဖစ္ပါတယ္ pageေရးဆြဲရာမွာလည္း ျပန္လည္ျပင္ဆင္တဲ႔အခါမွာရွာရလြယ္ကူေအာင္ html commentကိုထည့္ေရးသင့္ပါတယ္ ပထမဆံုးသင္ခန္းစာျဖစ္တဲ့အတြက္codeဖတ္ရာမွာ႐ွင္းေအာင္လင့္ခ်ိတ္တာေတြလံုးဝမထည့္ေသးပါဘူးစာသီးသန္႔ပဲေရးမွာပါ ပထမဆံုးေ႐ွ႕သင္ခန္းစာေတြမွာမသင္ၾကားရေသးတဲ့tagတစ္ခုကိုေျပာျပပါမယ္ သူကေတာ့ divပါ divဆိုတာ(divider=ခြဲျခားျခင္း)လို႔အဓိပၸါယ္ရပါတယ္ စာပိုဒ္ေတြခြဲတဲ့ေနရာေတြ အကန္႔အပိုင္းလိုက္ခြဲတဲ့ေနရာေတြမွာသံုးပါတယ္<p> နဲ႔ဆင္တူပါတယ္ သူ႔ရဲ႕ထူးျခားခ်က္ကေတာ့ မည္သည့္ေနရာတြင္မဆိုထည့္ေရးႏိုင္တာေၾကာင့္divကိုေတာ္ေတာ္မ်ားမ်ားအသံုးျပဳၾကပါတယ္ ကဲစရေအာင္ဗ်ာ ပထမဆံုစာမ်က္ႏွာတစ္ခုကိုျမင္ေယါင္လိုက္ပါ အဲ့စာမ်က္ႏွာမွာေခါင္းစဥ္ပါမယ္ userကclickလုပ္လို႔ရမယ့္menuဘားပါမယ္ ပီးရင္ေတာ့ေအာက္မွာ ကိုယ္ကuserကိုျပလိုတဲ့အခ်က္အလက္contactပါပါမယ္ ေနာက္ျပီးကိုယ့္စာမ်က္နွာကိုbrowserတိုင္းနဲ႔အဆင္ေျပေအာင္အလ်ား1600pxထားပါမယ္ အေရးျကီးပါတယ္ဒီအလ်ားကိုသူ႔ေနရာနဲ႔သူခြဲသံုးရမွာမို႔သတိထားပါ အနံကိုေတာ့အကန္႔အသတ္မရွိautoထားပါမယ္ မဆြဲခင္ပံုစံေလးျကည့္သြားပါ
ပထမဆံုးေခါင္းစဥ္အပိုင္းကိုစဆြဲပါမယ္ ေနာက္ခံအေရာင္ကိုအျပာေရာင္ထားမယ္ စာအေရာင္အစိမ္း စာကိုအလယ္မွာတပ္မယ္ အဲ့ပံုစံေခါင္းစဥ္ကို<caption style=" background-color:blue; text-align:center; color:green; font-size:90px;"> NgaBwa NgaAngel(IT STORE) <caption>
ခုလိုမ်ိဳးေလးေရးလိုက္ပါမယ္ tableသင္ခန္းစာထဲကcaption tagကိုအသံုးျပဳသြားတာပါ ေနာက္တစ္ခါေနာက္ခံအေရာင္အစိမ္းစာအေရာင္လိေမၼာ္ေရာင္ရွိတဲ႔menu barတစ္ခုထပ္ေရးပါမယ္ တစ္ဖန္စာတစ္ခုစီကို ​ လို႔ေခၚတဲ့non-brake spacစာလံုျခားရာမွာအသံုးျပဳတဲ႔codeေလးကိုထည့္ပါမယ္ htmlမွာစာလံုးျခားခ်င္ရင္keyboardနဲ႔ျခားလို႔မရပါဘူး ဆိုတဲ႔codeေလးကိုသံုးေပးရပါတယ္ အဲ့ဘားကိုdivကိုအသံုးျပဳၿပီးေခါင္းစဥ္captionၾကားထဲထည့္လုိက္ပါမယ္<caption style=" background-color:blue; text-align:center; color:green; font-size:90px;"> NgaBwa NgaAngel(IT STORE) <!--This is menu----> <div style="width:1600px; height:auto; color:orange; font-size:40px; background-color:green; text-align:left;"> Home Books Application News </div> <caption>
ဒီတစ္ခါ ေပ့ရဲ႕အၾကီးဆံုးအစိပ္အပိုင္းျဖစ္တဲ႔contactအပိုင္းကိုဆြဲပါမယ္ အဲ့ဒီအပိုင္းကိုအလယ္ကေနထက္ေအာက္နွစ္ျခမ္းျခမ္းလိုက္မယ္ ဘယ္ကိုအလ်ား500pxညာကိုအလ်ား1100pxထားမယ္ ဘယ္တစ္ျခမ္းမွာအလ်ား500pxထားမယ္ကိုေဖာ္ျပခ်င္တဲ့ေခါင္းစဥ္linkေတြစုထားမယ္ ညာဘက္အျခမ္းမွာအလ်ား1100pxထားမယ္ကိုယ္ျပခ်င္တဲ့စာေတြထားမယ္ေပါ့ ေနာက္ခံအေရာင္အနက္ေရာင္ထားမယ္ စာအေရာင္အျဖဴေရာင္ထားမယ္ ကဲဒီလိုနွစ္ျခမ္းပါတဲ႔contactကိုဘာနဲ႔ဆြဲရင္ေကာင္းမလဲစဥ္းစားျကည့္ရေအာင္ လြယ္ပါတယ္ tableထဲက trနဲ႔tdကိုအသံုူးျပဳလိုက္ရံုပါပဲ ခုလိုမ်ိဳးေလးေရးလိုက္မယ္<tr style=" background-color:black; color:white; font-size:30px; cell-padding:2px; cell-spacing:2px; width:1600px; height:auto; text-align:left;"> <!--This is page's left side----> <td style=" width:500px; height:auto; float:top left;"> This is title </td> <!--This is page's right side----> <td style=" width:1100px; height:auto;"> This is blog post </td> </tr> အဲ့လိုမ်ိဳးေလးေရးလိုက္ပါမယ္ ok ဒါဆို codeေတအားလံုးေပါင္းျပီးအေျဖျကည့္လိုက္ျကရေအာင္<!--DOCTYPE html--> <html> <body style="background-color:black;"> <table style=" background-color:black; mergin-left:0px; mergin-right:0px; width:1600px; height:auto; color:white;"> <!--This is page title----> <caption style=" background-color:blue; text-align:center; color:green; font-size:90px; width:auto; height:150px"> NgaBwa NgaAngel(IT STORE) <!--This is page menu bar----> <div style=" width:1600px; height:auto; color:orange; font-size:40px; background-color:green; text-align:left;"> Home Books Application News </div> </caption> <!--This is content----> <tr style=" background-color:black; color:white; font-size:30px; cell-padding:2px; cell-spacing:4px; width:1600px; height:auto; text-align:left;"> <!--This is left content side----> <td style=" width:600px; height:auto;"> 1.Lession1<br> 2.Lession2<br> 3.Lession3<br> 4.Lession4<br> 5.Lession5<br> 6.Lession6<br> 7.Lession7<br> 8.Lession8<br> 9.Lession9<br> 10.Lession10 </td> <!--This is right content----> <td style=" width:1000px; height:auto;"> My name is Naing Linn.I'm Navy Soldier.<br> I'm from Central Naval Armment Depot,<br> Thanlyin,Yangon.My age is 21yr.I'm crazy <br> in Scientic Technology.So when I'm not<br> busy,I learn all Technology that is HTML,<br> CSS,Js and etc...I learn it on facebook<br> by NgaBwa NgaAngel,username without PC.<br> I haven't PC.I have learned by phone.There,<br> all facebook's friend are my teacher.<br> In addition,I'm searched books on google.<br> I thick that if we are crazy in any teachnology<br> ,we will be perfect by trying.Thank for<br> your read. </td> </tr> </table> </body> </html>
ကဲအေပၚကcodeကိုrunျကည့္ပါဦး
သင္ခန္းစာ(၃)ရဲ႕အဆက္ပါ စာလံုးေတအတြက္ပဲအဓိကထားေျပာသြားမွာပါ ေရွ႕အခန္းမွာေတာ့ fontနဲ႔ရွင္းသြားတယ္ ဒီတစ္ခါtextနဲ႔ရွင္းပါမယ္ (၁)text-indent သူကေတာ့စာတန္းကိုဘယ္ဘက္မ်ဥ္းစကေနညာဘက္ကိုခြာေစလိုတဲ႔အခါသံုးပါတယ္ သူ႔ရဲ႕valueကေတာ့ pxပါp{ text-indent:100px; } (၂)text-align သူကေတာ့စာတန္းကိုဘယ္ဘက္ကေနကပ္ေရးမွာလားညာဘက္ကေနကပ္ေရးမွာလားအလယ္မွာေရးမွာလား အဲ့ဒီအခါမွာသံုးပါတယ္ သူ႔valueေတြကေတာ့ left,right,centerp{ text-align:center; } (၃)text-decoration သူကေတာ့စာလးံုေအာက္မွာမ်ဥ္းတားတာ စာလံုးအေပၚမွာမ်ဥး္ဆြဲတာ စာလံုးကိုျဖတ္မ်ဥ္းဆြဲတာ linkေတလိုမ်ဥ္းပါရင္မ်ဥ္းေဖ်ာက္တဲ႔ေနရာမွာသံုးပါတယ္ သူ႔ရဲ႕valueေတြကေတာ့ underline,overline,line-through,noneတို႔ပဲျဖစ္ပါတယ္p{ text-decoration:underline; } (၄)letter-spacing သူကေတာ့စာလံုးအစိပ္အက်ဲအတြက္သံုးပါတယ္ valueကpxပါp{ letter-spacing:5px; } (၅)text-transform သူကေတာ့ စာလံုးေတကိုအျကီးနဲ႔ေရးတာ အေသးနဲ႔ေရးတာ ေရွ႕စာလံုးကအျကီးေနာက္စာလံုးကအေသးနဲ႔ေရးလိုတဲ့အခါမွာသံုးပါတယ္ သူ႔ရဲ႕valueေတကေတာ့ uppercase(စာလံုးအျကီး) lowercase(စာလံုးအေသး) capitalize(ေရွ႕စာလံုးအၾကီးေနာက္စာလံုးအေသး)ေတြပဲျဖစ္ပါတယ္p{ text-transform:capitalize; } ကဲcodeေလးေတြရဲ႕အလုပ္လုပ္ပံုကိုျကည့္ျကရေအာင္<html> <head> <style type="text/css"> #idt{ text-indent:100px; } #alnl{ text-aling:left; } #alnc{ text-align:center; } #alnr{ text-align:right; } #dcru{ text-decoration:underline; } #dcro{ text-decoration:overline; } #dcrt{ text-decoration:line-through; } a{ text-decoration:none; } #spac{ letter-spacing:8px; } #trfu{ text-transform:uppercase; } #trfl{ text-transform:lowercase; } #trfc{ text-transform:capitalize; } </style> </head> <body> <h2>1-text-indent</h2> <p id="idt">This is text-indent effect</p> <h2>2-text-align</h2> <p id="alnl">This is text-align:left effect</p> <p id="alnc">This is text-align:center effect </p> <p id="alnr">This is text-align:right effecf</p> <h2>3-text-decoration</h2> <p id="dcru">This is text-decoration:underline effect</p> <p id="dcro">This is text-decoration:overline effect</p> <p id="dcrt">This is text-decoration:line-through effect</p> <a href="link">This is text-decoration:none effect.It is hide the underline from link.</a> <h2>text-spacing</h2> <p id="spac">This is letter-spacing effect</p> <h2>text-transform</h2> <p id="trfu">this is text:transform:uppercase effect</p> <p id="trfl">This is text-transform:lowercase effect</p> <p id="trfc">This is text-transform:capitalize effect</p> </body> </html> ကဲအေပၚကcodeကိုcopyကူးrunပီးဘာေတထူးျခားလာလဲၾကည့္လိုက္ဦးေနာ္
အရင္ေန႔ေတြကselectorေတြအေၾကာင္းသင္ခဲ့ပီးၿပီဆိုေတာ့ဒီေန႔ေတာ့ဒီေန႔ေတာ့cssရဲ႕propertiesနဲ႔valueေတြအေၾကာင္းတင္မယ္ဗ်ာ ဒီပထမပိုင္းမွာေတာ့ စာလံုးေတြအတြက္သီးသန္႔တင္ေပးမွာပါ ေနာက္အခန္းေတြက်မွပံုေတြလင့္ေတြေပါ့ဗ်ာselector{ properties:value; } ဒီလိုေရးရတယ္လို႔ေျပာခဲ့တယ္ေနာ္ခုpropertiesနဲ႔valueေတြအေၾကာင္းတြဲၿပီး႐ွင္းသြားမယ္ဗ်ာ ၁။ ။ font fontမွာသူနဲ႔တြဲတဲ့ဟာေတြကိုတင္ျပသြားပါမယ္ (က)font-family သူကေတာ့စာလံုပံုစံေတြပါ စာလံုးလိမ္လိမ္ေကာက္ေကာက္ေတြလိုမ်ိဳးေပါ့ ေရးနည္းကေတာ့p{ font-family:impact; } အဲ့လိုေရးပါတယ္ သူ႕ရဲ့valueေတြကေတာ့impact,time new roman,serial,အစ႐ွိသျဖင့္႐ွိပါတယ္ ေအာက္မွာစာလံုးပံုစံနဲ႔နာမည္ေတြကိုၾကည့္လိုက္ပါဦး
(ခ)font-style
သူကေတာ့စာလံုးအေစာင္းေတြစာလံုးထူထူေတေရးရာမွာသံုးပါတယ္ သူ႔ရဲ႕valueေတြကေတာ့
bold (စာလံုထူထူပါ)
italic(စာလံုးေစာင္းေစာင္းပါ)p{font-style:bold;}
(ဂ)font-weight
သူကေတာ့စာလံုးကိုboldတင္တာပါစာလံုးထူထူေပါ့ ေရးနည္းကp{font-weight:bold;}
(ဃ)font-variant
သူကစာလံုးပံုမွန္အရြယ္အစားလားနည္းနည္းႀကီးႀကီးလားေရးခ်င္ရင္သံုးပါတယ္ သူ႔ရဲ႕valueေတြကေတာ့ small,normal,စတာေတြပဲျဖစ္ပါတယ္p{font-variant:normal;}
(င)text-indent
သူကေတာ့စာကိုဘယ္ဘက္ေဘးမ်ဥ္းကေနညာဘက္ကိုတြန္းထုတ္ခ်င္ရင္သံုးပါတယ္သူ႔valueကိုpixels(px)နဲ႔တြက္ပါတယ္
p{font-indent:40px;}
(စ)font-size
သူကစာလံုးအရြယ္အစားကိုသတ္မွတ္တာပါသူ႔ကိုလည္းpxနဲ႔ရာခိုင္းႏႈန္းနဲ႔တြက္ခ်က္ပါတယ္p{font-size:30px;}
ေအာက္မွာpxတြက္ခ်က္ပံုေတြကိုပံုနဲ႔တကြျပထားပါတယ္ခမ်ာ
၂။ ။color
သူက႐ွင္းပါတယ္စာလံုးအေရာင္သတ္မွတ္တာပါp{color:green;}
ကဲအေပၚကcodeေတြအလုပ္လုပ္ပံုကိုid selectorသံုးၿပီးစမ္းၾကည့္ၾကရေအာင္
<html> <head> <style type="text/css"> #one{ font-family:impact; } #two{ font-style:italic; } #three{ font-weight:bold; } #four{ font-variant:small; } #five{ text-indent:100px; } #six{ font-size:100px; } #seven{ color:green; } </style> </head> <body> <p id="one">This is a font-family effect</p> <p id="two">This is a font-style effect</p> <p id="three">This is a font-weight effect</p> <p id="four">This is a font-variant effect</p> <p id="five">This is a font-indent effect</p> <p id="six">This is a font-size effect</p> <p id="seven">This is a color effect</p> </body> </html>
ကဲအေပၚကcodeကိုrunၾကည့္လိုက္ပါဦး
ဒီေန႕class selectorနဲ႔id selectorကို႐ွင္းျပပါမယ္ႏွစ္ခုလံုးကေတာ့ ကိုstyleထည့္ခ်င္တဲ့စာပိုဒ္သို႔မဟုတ္အေၾကာင္းအရာကိုနာမည္ေပးၿပီးအဲ့ဒီနာမည္ ကိုselectorကိုအသံုးျပဳကာအေရာင္ေတြstyleေတြထည့္တာပါပဲ ၁။ ။class selector ပထမဆံုးclass selectorကိုစ႐ွင္းပါမယ္ ဥပမာမိမိရဲ႕html documentထဲမွာ<p> ဆိုတဲ့စာပိုဒ္တစ္ခု႐ွိတယ္ဆိုပါဆို႔ အဲ့ဒီစာပိုဒ္ကိုclassဆိုတဲ့html altributeကိုသံုးၿပီးနာမည္တစ္ခုသတ္မွတ္ပါမယ္<p class="name"> text</p> ဒီလိုေရးပါတယ္ classကိုသံုးၿပီး nameလို႔အမည္ေပးလိုက္တယ္ အဲ့ဒီနာမည္ ကိုcssမွာselectorအျဖစ္အသံုးျပဳမယ္ဆိုရင္ ပထမဆံုး<p> tagကေန pဆိုတဲ့စာလံုးကိုယူမယ္ ပီးသူ႔ေနာက္က(.)dotဆိုတဲ့အစက္ခ်မယ္ ပီးရင္နာမည္ေရးရံုပါပဲ p.name{ font-size:10px; } ဒီလိုပါ ကဲhtmlအျပည့္အစံုနဲ႔ေရးျပမယ္ေနာ္<html> <head> <style type="text/css"> p.naing{ font-size:20px; color:green; }</style> </head> <body> <p class="naing"> မဂၤလာပါ</p> </body> </html> Code ကိုrunၾကည့္ပါခမ်ာ မွတ္ထားရမွာတစ္ခုက classကိုအမည္ေပးရမွာ နံပါဂဏန္းေတြမေပးပါနဲ႔ htmlရဲ႕altributeနာမည္ေတြမေပးပါနဲ႔ ဥပမာ class="12345"(အမွား) class="body"(အမွား) class="hacker"(အမွန္) ၂။ ။id selector သူလည္းclass selectorလိုပါပဲ<p id="name"> text</p> ဒါေပမယ့္သူ႔မွာကြဲျပားတာက class selectorလို(.)dotကိုမသံုး ပဲ (#)ကိုသံုးပါတယ္ #name{ font-size:20px; color:green; }ဒီလိုေရးပါတယ္ ေအာက္မွာဥပမာၾကည့္ပါခမ်ာ<html> <head> <style type="text/css"> #hacker{ font-size:20px; color:green; }</style> </head> <body> <p id="hacker"> မဂၤလာပါ</p> </body> </html> Runၾကည့္ပါဦး
က်ေနာ္လည္းေဘမ႐ွိတာနဲ႔ မတင္ျဖစ္တာၾကာၿပီဗ်ာ
လာမယ့္၄ရက္ေန႔ကစၿပီးေတာ့ skillက်လာဖို႔ templateေတြစဆြဲၾကမယ္ဗ်ာ မ်ားမ်ားလုပ္မွမ်ားမ်ားကြၽမ္းက်င္လာမွာေလ
အဲ့ဒီေနက် က်ေနာ္တင္ေပးတာေတြစဆြဲႏိုင္ဖို႔ ခုcssသင္ခန္းစာေလးတင္မယ္ဗ်ာ ေသခ်ာေလးလိုက္လုပ္ပါခမွ် ဒါမွ ၄ရက္ေန႔မွာတင္မယ့္သင္ခန္းစာကိုလိုက္လုပ္ႏိုင္မွာျဖစ္ပါတယ္
CSSမွာselectorဆိုၿပီး႐ွိပါတယ္ဗ်
Selector{
Properties:value;
}
ဒီလိုေရးပါတယ္ selectorဆိုတာကေတာ့ေရြးခ်ယ္တာေပါ့
ကို styleထည့္ခ်င္တဲ့ေနရာကိုေရြးခ်ယ္လိုက္တာေပါ့
Properties ကေတာ့သတ္မွတ္ခ်က္ ေပါ့ ဥပမာစာအေရာင္သတ္မွတ္မယ္ဆိုcolor ေပါ့ ဒါကpropertiesပါ
valueကတန္ဖိုးပါ စာကိုgreenဆိုတဲ့အစိမ္းေရာင္သတ္မွတ္တယ္ဆိူgreenကvalueပါ
၁။ ။html tag selector
ပထမတစ္ခုအေနနဲ႔html tagကိုselectorအျဖစ္အသံုးျပဳႏိုင္ပါတယ္ခမွ်
body{
background-color:blue;
}
အဲ့မွာဆိုbodyကselectorေပါ့ html tagကိုselectorအျဖစ္အသံုးျပဳလိုက္တာပါ html tag selectorမွာtagေတြအားလံုးကိုတန္းစီေရးလို႔ရပါတယ္ အဲ့လိုတန္းစီေရးဖို႔ၾကားမွာေကာ္မာခံေပးရပါတယ္
body,h1,p,div{
font-size:20px;
color:green;
}
ဒီလိုေရးပါတယ္ ဒါကhtml tag selectorပါ
Css ႏွစ္မ်ိဳး႐ွိပါတယ္ internal cssနဲ႔ external cssဆိုၿပီး႐ွိပါတယ္ internal cssက html document ရဲ႕<head> </head> ၾကားမွာေရးရၿပီး externalကေတာ့ သီးသန္႔ဖိုင္အျဖစ္ေရးၿပီးလင့္နဲ႔ေခၚယူသံူးစြဲတာမ်ိဳးပါ
Css codeေတြကို<style> </style> ဆိုတဲ့tag ၾကားမွာေရးပါတယ္
<html>
<head>
<style type="text/css"rel="stylesheet">
body,p{
background-color:violet;
font-size:20px;
color:green;
}
</style>
</head>
<body>
<p>
type="text/css"ဆိုတာကဒီ
ဒီဖိုင္ေလးကို name.cssလို႔နာမည္ေပးၿပီးဖိုင္တစ္ခုအျဖစ္ save
လိုက္ပါ ပီးရင္ ကိုယ့္ရဲ႕htmlဖိုင္ထဲကိုေခၚယူရမယ့္ပံုစံက
<html>
<head>
<link rel="stylesheet"type="text/css"href="name.css"/>
</head>
<body>
<p>
လြယ္ပါတယ္ <link> ဆိုတဲ့tagကိုအသံုးျပဳၿပီး href=ရဲ႕ေနာက္မွာ css fileရဲ႕နာမည္ကိုထည့္လို္က္တာပါပဲ
hostingမွာဆိုရင္ေတာ့ linkအျပည့္အစံုထည့္ရမွာေပါ့ေနာ္
ဒါကေရးနည္းပါ ေနာက္ထပ္selectorႏွစ္ခုက်န္ပါေသးတယ္
Id selectorနဲ႔ class selectorပါ အဲ့ႏွစ္ခုကိုေနာက္ေန႔တင္ေပးပါမယ္ ပီးရင္ propertiesေတ လာပါမယ္ ပီးရင္ valueေတလာပါမယ္ ေက်းဇူးတင္ပါတယ္
</p>
</body>
</html>
အေပၚကcodeကိုrunၾကည့္လိုက္ပါဦး
htmlမွာtable link formနဲ႔ imgေတသိတယ္ဆိုရင္ပဲ Templaeစဆြဲလို႔ရေနပါၿပီ Templateလွလွဆြဲႏိုင္ဖို႔ကskillက်ဖို႔လိုပါတယ္ Skillက်ဖို႔ဆိုတာကမ်ားမ်ားေလ့က်င့္ဖို႔လိုပါတယ္ ခုက်ေနာ္တင္ေပးတဲ့အထဲမွာlistသင္ခန္းစာက်န္ပါေသးတယ္ နည္းပါတယ္လိုအပ္မွထပ္တင္ေပးပါ့မယ္ ခုစာကိုတစ္မ်ိဳးတစ္ဖံု ေျပာင္းသြားေစမယ့္tagေတနဲ႔မိတ္ဆက္ေပးပါ့မယ္<b> သူကစာကိုboldတင္ဖို႔ပါ စာလံုထူထူႀကီးေတေပါ့ ေရးနည္းက<b> text</b> <i> သူကစာလံုးကိုေစာင္းေစဖို႔ပါစာလံုးေစာင္းေစာင္းေလေတေပါ့<i> text</i> <s> စာလံုးကိုမ်ဥ္းျဖတ္ဖို႔ပါ စာမွားလို႔မ်ဥ္းျဖတ္ဆြဲသလိုမ်ိဳးေပါ့<s> text</s> <sup> ထပ္ကိန္းေတေရးဖို႔ပါ x power tow လိုမ်ိဳးေပါ့ x<sup> 2</sup> =4 အဲ့လိုပါ<sub> သူကစာကိုေအာက္ခ်ဖို႔ပါ H2O is waterကို H<sub> 2</sub> O is waterအဲ့လိုေရးပါတယ္<hr> အလ်ားလိုက္မ်ဥ္းဆြဲခ်င္ရင္သံုးပါတယ္<u> စာရဲ႕ေအာက္မွာမ်ဥ္းဆြဲခ်င္ရင္သံုးပါတယ္ ကဲဒီေန႔ေတာ့ဒီေလာက္ပဲဗ်ာ ေနာက္ေန႔cssတင္ေပးပါ့မယ္ Cssတင္ပီးတာနဲ႔ designမ်ားမ်ားဆြဲၾကရေအာင္ ဒါမွskillက်လာမွာေလ good nightဗ်ာ
အေပၚမွာေတာ့form> အေၾကာင္းရွင္းျပခဲ႔ျပီးျပီ အဲ့ထဲကက်န္ေသးတဲ႔ဟာကိုထည့္ရွင္းမယ္အဲ႔ဒါက blogေတမွာcommentေရးဖို႔boxေလးေတြ႔ဖူးျက မွာပါ အာ့ဘာနဲ႔ေရးလဲဆိုရင္<textarea> ဒီtagနဲ႔ ဖန္တီးထားတာပါ သူ႔မွာaltributeနွစ္ခုရွိတယ္ boxရဲ႕အလ်ားကို(rows)ကိုေဖၚျပဖို႔rowsကိုသံုး ျပီးအနံ(colnum)ကိုေဖၚျပဖိဳ႕colsကိုသံုးပါတယ္ ေအာက္မွာျကည့္ပါ<html> <head> </head> <body> <form> <label> enter your comment</label> <textarea rows="5"cols="60"> </textarea> </form> </body> </html> အာ့ေလးrunျကည့္ပါ ရွင္းသြားပါလိမ့္မယ္ rowsနဲ႔colsကိုေျပာင္းျကညိ့္ပါ ေနာက္တစ္ခုကေတာ့type="button"ပါ သူလဲ loginခလုပ္လိုပါပဲ ဒါေပမယ့္သူjava scriptနဲ႔တြဲ သံုးေလ့ရွိတယ္<input type="button"value="clickme" onclick="function();"/> အဲ႔လိုjavascriptနဲ႔onclickကိူသံုးျပီးတြဲေလ့ရွိတယ္သင္ခန္းစာ(၁၇)
ကဲ အေပၚကဟာေတကိုေသခ်ာျကည့္ခဲ့မယ္ဆိုရင္ နားလည္ျကမွာပါ နားမလည္ေသးရင္ျပန္ျကည့္ ပါ ခုေတာ့ ရိုးရိုးsignup pageတစ္ခုဖန္တီးျကရ ေအာင္ အဲ႔မွာပါမယ့္ဟာေတကေမြးသကၠရာဇ္ေရြး မယ္ က်ားမေရြးမယ္ ဝါသနာေရြးမယ္ mailထည့္မည့္ passထည့္မယ္ signup button ထည့္မယ္ မွားရင္ျပန္ဖ်က္ဖို႔reset buttonထည့္ မယ္ အကူအညီေတာင္းဖို႔help buttonထည့္မယ္ ကဲစရေအာင္<html> <head> </head> <body bgcolor="#221299"> <h3 align="center"> FACEBOOK SIGNUP</h3> <form style="color:#ffffff;font-size:20px;"> First name<input type="text"/> Last name<input type="text"/><br> <label> Select your birthday date</label> <select> <option value="1995"> 1995</option> <option value="1996"> 1996</option> <option value="1997"> 1997</option> </select> <br> Select your Gender<br> <label> male</label> <input type="radio"value="male"/> <label> female</label> <input type="radio"value="female"/><br> Select your lifestyle<br> <label> reading</label> <input type="checkbox"value="reading"/> <label> football</label> <input type="checkbox"value="football"/> <label> singing</label> <input type="checkbox"value="singing"/> <br> Your email<input type="text"/><br> New password<input type="password"/> <br> Confirm your password<input type="password"/><br> Enter your comment<textarea rows="6"cols="60"> </textarea> <br> <input type="submit"value="signup"/> <input type="reset"value="reset"/> <input type="button"value="help?"/> </form> </body> </html> အေပၚကcodeကိုrunျကည့္ေနာ္ ျပီးresultနဲ႔ျပန္ တိုက္ နည္းနည္းပါးပါးျပင္ေရးသင္ ခန္းစာ(၁၈)
ဒီတစ္ခါက် facebook login pageအတုလုပ္ရ ေအာင္ တကယ့္ဟာလိုေတာ့မဆြဲေသးဘူး ပံုစံတူ ေပါ့ ကဲစေရးျကမယ္<html> <head> <title> Welcome From Facebook</title> </head> <body bgcolor="#4b0082"color="#ffffff"> <br><br> <h1 align="center"> <font color="#ffffff"size="50px"align="center"> FACEBOOK</font> </h1> <br> <form align="center"> <font color="#ffffff"size="3"> Email</font><br> <input type="text"width="200%"height="30%"/><br> <font color="#ffffff"size="3"> Password</font><br> <input type="password"width="200%"height="30%"/> <br><br> <button width="10"height="4"> <font color="#4b0082"> Login</font> </button><br> <button width="12"height="4"> <font color="orange"> Signup</font> </button><br><br> <a href="link"> forget password?</a> <a href="link"> ..help center</a><br> English (UK) ·<a href="link"> ภาษาไทย · 中文(简体) · More…</a><br> Facebook ©2015</form> </body> </html> အေပၚကcodeကိုrunၾကည့္ပါ resultနဲ႔codeကိုတိုက္ျကည့္ေနာ္ ဒါမွဘာ ေတထူးျခားလည္းသိမွာ
ဒီတစ္ခါတင္ျပသြားမွာကစိတ္ဝင္စားဖို႔ေကာင္း တယ္ဗ် facebookကိူlogin ဝင္ဖူးျကမွာပါ အဲ႔ လိုlogin pageဖန္တီးရာမွာသံုးတဲ႔tagပါ သူက ေတာ့<form> tagပါခမ်ာ သူမွာပါတဲ႔element ေတြကိုရွင္းမယ္ဗ်ာ<form> သူကေတာ့<body> လိုပဲပင္မtagတစ္ခုပါ သူ႔မွာ ပါဝင္တဲ႔elementေတက<label> သူကအညြန္းစာသားေရးရာမွာသံုးပါတယ္<select> သူက အေကာင့္ေရွာက္ရာမွာေမြးေန႔ေရြးသလိုမ်ိဳး ေရြးခ်ယ္မႈလုပ္ရာမွာသံူးပါတယ္သူ႔မွာပါဝင္တာ ကေတာ့<option> သူက<select> ထဲမွာထည့္မယ္အခ်က္အလက္ေတ ကိုထည့္ရာမွာသံုးပါတယ္ ေနာက္ထပ္သီးသန္႔ခြဲေနတာကေတာ့<input/> သူ႔မွာကိုပိုင္altributeနဲ႔valueေတရွိပါတယ္ altributeကေတာ့type=ျဖစ္ျပီးvalueကေတာ့ text စာရိုက္ရာမွာသံုးပါတယ္emailရိုက္ထည့္သလို ေပါ့ password passwordရိုက္ရာမွာသံုးပါတယ္ရိုက္လိုက္တဲ႔ စာကအစက္ကေလးေတေျပာင္းသြားမွာပါ radio သူကေရြးတာပါ အစက္ေလးနဲ႔ေရြးတဲ႔ဟာမ်ိဳး checkbox သူကအမွန္ျခစ္ေလးနဲ႔ေရြးတဲ႔ဟာမ်ိဳး submit သူကsigup buttomလိုမ်ိဳးပါ reset သူကရိုက္လိုက္တဲ႔စာေတကိုျပန္ဖ်က္တဲ႔ေနရာမွာ သံုးတာ ဥပမာနည္းနည္းျပမယ္ေနာ္<input type="password"name="pwd"/> အဲ႔လိုေရးတာပါ အဲ႔ထဲကတုိးလာတဲ႔nameက phpလိုprogramm runတဲ႔အခါလွမ္းေခၚလို႔ရ ေအာင္ေပးတာပါ အဲ႔ဒါကေနာက္ပိုင္းမွရွင္းမယ္ ဗ်ာ ခုေတာ့ရိုးရိုးlogin pageပဲဆြဲရေအာင္ ေနာက္သင္ခန္းစာကိုသြားမယ္ဗ်ာသင္ခန္းစာ(၁၄)
အေပၚမွာေတာ့ေျပာခဲ့တယ္ဗ် ဒါေပမယ့္ နား လည္မွာမဟုတ္ဖူးဆိုတာက်ေနာ္သိပါတယ္ အာ့ေျကာင့္လက္ေတြ႕လုပ္ျပီးရွင္းမယ္ဗ်ာ ပထမဆံုး<label><select> နဲ႔<option> ကိုရွင္း မယ္ ကဲcodeစေရးမယ္ေနာ္<html> <head> <title></title> </head> <body> <form> <label> ေမြးေန႔ေရြးပါ<select> <option value="1995"> 1995</option> <option value="1996"> 1996</option> <option value="1997"> 1997</option> </select> </label> </form> </body> </html> ကဲအေပၚကcodeကိုcopyကူးျပီးrun လိုက္ပါဦး အဲ႔ထဲကvalue=ကတန္ဖိုးသတ္မွတ္ေပးတာေနာ္ ခုနဟာကိုrunျကည့္ပါresultနဲ႔codeကိုတိုက္ ျကည့္ပါ နားလည္သြားပါလိမ့္မယ္ ကဲေနာက္တစ္ခုဆက္ရေအာင္ ဒီတစ္ခါ<input> type=passwordနဲ႔textရယ္ submitရယ္ကိုရွင္းပါ့မယ္ ကဲစေရးမယ္<html> <head> <title></title> </head> <body> <form align="center"> <label> Email</label> <br> <input type="text"/> <br> <label> Password</label><br> <input type="password"/> <br> <input type="submit"value="login"/> <input type="reset"value="reset"/> </form> </body> </html> အေပၚကcodeကိုrunျကည့္ပါ အဲ႔ထဲက<br> က htmlမွာစာကိုဒီတိုင္းေရးရင္အတန္းလိုက္ျဖစ္သြာ ပါတယ္ စာကိုေနာက္တစ္ေျကာင္းေရးခ်င္ရင္သံုးပါတယ္သင္ ခန္းစာ(၁၅)
ဒီတစ္ခါ<input type="radio"> ရယ္ checkboxရယ္ကိုျပမွာပါ စမယ္ေနာ္<html> <head> </head> <body> <form> <label> က်ား/မေရြးပါ</label><br> <input type="'radio"value="male"/> <label> male</label> <input type="radio"value="male"/> <label> female</label><br> <label> ျကိုက္နွစ္သက္ရာေရြးပါ</label><br> <label> ေဘာ္လီေဘာ</label><br> <input type="checkbox"value="ball"/><br> <label> စာေပ</label><br> <input type="checkbox"value="read"/> </form> </body> </html> အေပၚကcodeကိုrunၾကည့္ပါ resultနဲ႔codeကိုတိုက္ျကည့္ေနာ္ ဒါမွဘာ ေတထူးျခားလည္းသိမွာ ေနာက္သင္ခန္းစာမွာ အကုန္ေပါင္းေရးမွာ အာ့ေျကာင့္အေပၚကဟာကို ေသေသခ်ာခ်ာနားလည္ေအာင္ေလ့လာပါ
ကဲဗ်ာ က်ေနာ္တို႔အေရွ႕မွာပံုထည့္တာရယ္ လင့္ခ်ိတ္တာရယ္ဇယားဆြဲတာရယ္ကိုအ ေျခခံလုပ္ခဲ့ျပီးျပီေနာ္ ကဲဒီတစ္ခါအဲ့သင္ ခန္းစာအားလံုးကိုေပါင္းျပီးလူဦးေရဇယား ဆြဲၾကရေအာင္ :-) ျဖည့္စြက္ရမည့္အပိုင္းေတြပထမဆံုးရွင္း ျပမယ္ဗ်ာ ၁။ ။<caption> ဒီtagကေတာ့ tableရဲ႕ေခါင္းစဥ္ၾကီးကို တပ္တဲ႔အခါမွာသံုးတာပါ ဥပမာ<caption> လူဦးေရဇယား</caption> ၂။ ။cellpadding ဒီaltributeကေတာ့tableအထဲကအကြက္ ေလးေတနဲ႔tableေဘာင္နဲ႔အကြာအေဝး ကိုသတ္မွတ္တာပါ ၃။ ။cellspacing ဒီaltributeကေတာ့tableထဲကအကြက္ တစ္ခုနဲ႔တစ္ခုအကြာအေဝးကိုေျပာတာပါ ၄။ ။bordercolor ဒီaltributeကေတာ့tableေဘာင္ရဲ႕အ ေရာင္ကိုသတ္မွတ္တာပါ ၆။ ။bordercolorlight ဒါကtableေဘာင္ကို3Dလိုမ်ိဳးအေရာင္ ထည့္တာပါ အေပၚေရာင္ေပါ့ ၇။ ။bordercolordark ဒါကေအာက္အေရာင္ပါ ၈။ ။bgcolor ဒါကေနာက္ခံအေရာင္ထည့္တာပါ ၉။ ။color ဒါကစာအေရာင္ထည့္တာပါ ၁၀။ ။<th> ဒါကအလ်ားလိုက္အကြက္ပါ ၁၁။ ။<td> ဒါကေဒါင္လိုက္အကြက္ပါ အလ်ားလိုက္ အကြက္ထဲကိုေဒါင္လိုက္အကြက္ထည့္ ဆြဲရမွပါ ဥပမာ<tr><td> text</td></tr> ၁၂။ ။<thead> ဒါကေခါင္းစဥ္ခြဲေလးေတေပးတာပါ ၁၃ ။။<tfoot> ဒါကtableေအာက္နားမွာ noteေရးတာပါ ၁၄။ ။<!--DOCTYPE html--> ဒါကေတာ့ ဒီဟာက htmlလားcssလား java-scriptလား phpလားဆိုးျပီး browserကသိေအာင္ေၾကျငာေပးတာပါ တခ်ိဳ႕browserက ဘာcodeမွန္းနားမ လည္တာရွိပါတဲ႔ အာ့ေၾကာင့္ ဘာေရးေရးဒါေလးေတာ့ထည့္သင့္ပါတယ္ ကဲဒါေတကိုမွတ္ထားပါ လက္ေတြ႔ေရး ဆြဲဖို႔ေနာက္သင္ခန္းစာကိုသြားရေအာင္
ကဲအေပၚမွာ အညြန္းေလးေတြရွင္းျပျပီးျပီေနာ္ ပထမဆံုရိုးရိုးtableဆြဲၾကရေအာင္ tableမွာပါရမွာေလးေတနည္းနည္းေျပာ မယ္ ၁။ ။ေခါင္းစဥ္ကို "ေက်ာင္းသားစာရင္းလို႔အ မည္ေပးမယ္ ၂။ ။ေခါင္းစဥ္ခြဲကို "အမည္" "ဇာတိ" "အသက္"ဆိုျပီးေပးမယ္ ၃။ ။ပါရမည့္အမည္ေတက"mg mg" "hla hla" zaw zaw" ၄။ ။က်န္တာက ဇာတိနဲ႔အသက္ေပါ့ဗ်ာ ကဲဆြဲျပီေနာ္<!--DOCTYPE html--> <html> <head> <title> Table Lession</title> </head> <body style="background-color:violet"> <table bgcolor="green"border="2" cellpadding="5"cellspacing="5" align="center"> <caption align="top"color="blue"> ေက်ာင္းသူ/သားအမည္စာရင္း</caption> <thead color="blue"> <th> အမည္</th> <th> ဇာတိ</th> <th> အသက္Hla Hla </td> <td> မႏၲေလး</td> <td> 18ႏွစ္</td> </tr> <tr color="blue"> <td> Zaw Zaw</td> <td> ပဲခူး</td> <td> 20ႏွစ္</td> </tr> </table> </body> </html> ကဲအေပၚကcodeကိုcopyကူးျပီးrun လိုက္ပါဦးသင္ ခန္းစာ(၁၂)
ကဲဗ်ာ အေပၚမွာ ပံုထည့္တာကိုသင္ခဲ႔ တယ္ေနာ္ ေရးနည္းက<img src="picture name.jpg"/> ဒါနဲ႔<img src="image link"/> ဆိုျပီးသင္ခဲ့ ေနာက္ျပီး ေနာက္ျပီးလင့္ခ်ိတ္နည္းကို<a href="file name"> text</a> နဲ႔<a href="link"> text</a> ဆိုျပီးသင္ေပး ခဲ့တယ္ ဒါေတကိုအေပၚကtableထဲ ထည့္ဆြဲရေအာင္အေပၚကcodeကိုrunၾကည့္ပါ<!--DOCTYPE html--> <html> <head> <title> Table Lession</title> </head> <body style="background-color:violet"> <table bgcolor="green"border="5" cellpadding="5"cellspacing="5" align="center"> <caption align="top"color="blue"> ေက်ာင္းသူ/သားအမည္စာရင္း</caption> <thead color="blue"> <th> ဓာတ္ပံု</th> <th> အမည္</th> <th> ဇာတိ</th> <th> အသက္</th> <th> ဆက္သြယ္ရန္</th> </thead> <tr color="blue"border="2"> <td> <img align="center" height="15px" src="https://c129.pcloud.com/dHZw3qkZaA5AHZZZ7IcCl7Z2ZZ4pJZkZ7XpVZxDUHNL94r28XqeFRmA1yUkbIRAP7/in-the-sky.jpg" width="15px"/> </td> <td> Mg Mg</td> <td> ရန္ကုန္</td> <td> 19နွစ္</td> <td> <a href="http://www.nbnaitstore.000free.us/nbnaitstore/lession/html4.html#lession12">Call </a> </td> </tr> <tr color="blue"border="2"> <td> <img align="center" height="15px" src="https://c59.pcloud.com/dHZoHAkZGA5AHZZZYUcCl7Z2ZZ4pJZkZkXpVZQPpci1QdKxFOchoDdNfAAhrInbTX/romance.jpg" width="15px"/> </td> <td> Hla Hla</td> <td> မႏၲေလး</td> <td> 18ႏွစ္</td> <td> <a href="http://www.nbnaitstore.000free.us/nbnaitstore/lession/html4.html#lession12"> Call</a> </td> </tr> <tr color="blue"border="2"> <td> <img align="center" height="15px" src="https://c176.pcloud.com/dHZiHAkZ3A5AHZZZNdcCl7Z2ZZ4pJZkZyXpVZEYcSMppfdXJKo5FyIYrQW8P5a6Kk/lovers.jpg" width="15px"/> </td> <td> Zaw Zaw</td> <td> ပဲခူး</td> <td> 20ႏွစ္</td> <td> <a href="http://www.nbnaitstore.000free.us/nbnaitstore/lession/html4.html#lession12"> Call</a> </td> </tr> </table> </body> </html> Subscribe to: Posts (Atom)