NgaBwa NgaAngel (IT STORE): HTMLသင္ခန္းစာ

Showing posts with label HTMLသင္ခန္းစာ. Show all posts

Saturday, July 4, 2015

သင္ခန္းစာ(၁၉)

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ကိုတိုက္ျကည့္ေနာ္ ဒါမွဘာ
ေတထူးျခားလည္းသိမွာ ေနာက္သင္ခန္းစာမွာ
အကုန္ေပါင္းေရးမွာ အာ့ေျကာင့္အေပၚကဟာကို
ေသေသခ်ာခ်ာနားလည္ေအာင္ေလ့လာပါ

Friday, July 3, 2015

သင္ ခန္းစာ(၁၀)


ကဲဗ်ာ က်ေနာ္တို႔အေရွ႕မွာပံုထည့္တာရယ္
လင့္ခ်ိတ္တာရယ္ဇယားဆြဲတာရယ္ကိုအ
ေျခခံလုပ္ခဲ့ျပီးျပီေနာ္ ကဲဒီတစ္ခါအဲ့သင္
ခန္းစာအားလံုးကိုေပါင္းျပီးလူဦးေရဇယား
ဆြဲၾကရေအာင္ :-)
ျဖည့္စြက္ရမည့္အပိုင္းေတြပထမဆံုးရွင္း
ျပမယ္ဗ်ာ
၁။ ။<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ထဲ
ထည့္ဆြဲရေအာင္



<!--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>



အေပၚကcodeကိုrunၾကည့္ပါ

သင္ ခန္းစာ(၇)

ကဲဗ်ာ ဒီတစ္ခါေျပာျပသြားမွာကေတာ့ html documentထဲကိုပံုထည့္နည္းပဲျဖစ္ ပါတယ္သူ႔ရဲ႕tagကေတာ့ <img/>ပါခမ်ာ သူ႔ရဲ႕altributeကေတာ့ srcပါ sourceရဲ႕ အရွည္ေကာက္ပါ ကဲစလိုက္ရေအာင္ဗ်ာ ပံုတစ္ပံုကိုsiteတစ္ခုခုမွာuploadတင္ တယ္ဆိုပါစို႔အဲ႔ဒီပံုရဲ႕လင့္ကို http://www.image/picture1.png လို႔ထားလိုက္ အဲ့ဒီပံုကို html doc မွာေပၚခ်င္ရင္ေရးရမယ့္ပံုစံက <img src=" http://www.image/picture1.png"/> အဲ့ဒီလိုေရးပါတယ္ ကဲအဲ႔ဒီပံုကိုအလ်ား အနံသတ္မွတ္ရေအာင္ border=ပံုရဲ႕အနားေဘာင္အထူအပါး ပါ width=ပံုရဲ႕အလ်ားပါ height=ပံုရဲ႕အနံပါ ေရးနည္းကေတာ့ <img border="2" height="400px" src=" http://www.image/picture1.png" width="400px"/> အဲ႔လိုေရးပါတယ္ကိန္းဂဏန္းေတြကို ေျပာင္းျခင္းျဖင့္ကိုယ္လိုခ်င္တဲ႔ပံုစံလုပ္ ယူလို႔ရပါတယ္ ကဲcodeတစ္ခုrunၾကည့္ရေအာင္ <html> <head> <title>image></title> </head> <body> <img border="2" height="400px" src=" http://www.myworld20166.000free.us/IMG_20150415_101414.jpg" width="400px"/> </body> </html> အေပၚကcodeကိုcopyကူးျပီးေအာက္မွာ runၾကည့္ပါခမ်ာ

သင္ခန္းစာ(၈)

ကဲဒီတစ္ခါေျပာျပသြားမွာကေတာ့ေနာက္
ခံပံုထည့္နည္းပါ လြယ္ပါတယ္ဗ်ာ
ေနာက္ခံပံုကို<body>ထဲထည့္ပါတယ္
စလိုက္ရေအာင္
<body style="background-image:url("picturename.png");">
ဒီလိုထည့္ပါတယ္ခမ်ာ
မွတ္သားစရာေလးေတေျပာမယ္ဗ်ာ
ေနာက္ခံပံုကိုဒီအတိုင္းထည့္လိုက္ရင္
ပံုေတအမ်ားျကီးျဖစ္သြားပါလိမ့္မယ္
ဥပမာဗ်ာ bodyကအလ်ား1000အနံ1000pixelsရွိ
တယ္လို႔ထားလိုက္ ေနာက္ပီးပံုကအလ်ား
100အနံ100pxရွိတယ္ထားလိုက္
ခုက်ေနာ္တို႔ထည့္မွာကေနာက္ခံပံုျဖစ္တဲ႔
အတြက္bodyရဲ႕အက်ယ္ျပည့္ေအာင္
ျဖည့္သြားမွာျဖစ္တဲ႔အတြက္ပံုက၁၀ပံုျဖစ္
သြားမွာပါ ဒီျပသနာကိုေျဖရွင္းဖို႔

repeat:no-repeat;
ဆိုတဲ႔altributeကိုသံုးရပါတယ္
<body style="background-image:url("picturename.png");repeat:no-repeat;">
ဆိုပီးျပင္ေရးရမွာပါ
ဒီေလာက္ဆိုသေဘာေပါက္ျပီထင္ပါတယ္

သင္ ခန္းစာ(၉)


ဒီတစ္ခါတင္ျပသြားမွာကေတာ့<table>
အေၾကာင္းပါ tableဆိုတာကဇယားကြက္
ၾကီးေပါ့ဗ်ာ <table>မွာပါတဲ႔အျခားtag
ေတြကေတာ့
<tr>အလားလိုက္အကြက္ပါ
<td>ေဒါင္လိုက္အကြက္ပါ
ေဒါင္လိုက္အကြက္ကိုအလ်ားလိုက္အ
ကြက္ထဲထည့္ေရးရမွာပါဒါမွဇယားကြက္
ေလးျဖစ္သြားမွာေပါ့ မ်က္လံုးထဲျမင္ေအာင္
လက္ေတြ႕လုပ္ၾကရေအာင္


<html>
<head>
<title>table</title>
<table border="1"cell-padding="1">
<tr border="1"cell-padding="1">
<td>
ၾကက္သား
</td>
<td>
က်ပ္
/td>
<td>
Dollor
/td>
</tr>
<tr border="1"cell-padding="1">
<td>
-
</td>
<td>
700ks
</td>
<td>
$1000
</td>
</tr>
</table>
</body>
</html>


အေပၚကcodeကိုrunၾကည့္ပါ

lession2.html

lession1.html

ကဲဒီတစ္ခါhtml linkေတ အ ေၾကာင္းရွင္း
ျပမွာျဖစ္ပါတယ္ hyper linkလုပ္တဲ႔tag
နွစ္ခုရွိပါတယ္ ပထမတစ္ခုက<a>ျဖစ္ျပီး
ဒုတိယကေတာ့<link>ပါခမ်ာ

၁.<a>

<a>tagမွာကိုယ္ပိုင္altributeရွိပါတယ္ hrefပါ
ဥပမာhttp://m.facebook.comဆိုတဲ႔link
ကို htmlထဲထည့္ခ်င္ရင္ေရးရမယ့္ပံုစံက

<a href="https://m.facebook.com/">
ဒီမွာေရးခ်င္ရာေရး
</a>

  လြယ္ပါတယ္ဗ်ာ
ကဲhtml codeေတြနဲ႔ေရးၾကည့္ရေအာင္

<html>
<head>
<title>
WELCOME FROM FACEBOOK
</title>
</head>
<body style="background-color:violet;">
<p style="font-size:20px;font-color:green;">
Facebookဆိုတာလူ႔စရိုက္မ်ိဳးစံုကိုေတြ႕
ျမင္နိုင္တဲ႔<br>Social pageတစ္ခုပါ 
facebookကိုသြားခ်င္ရင္ေတာ့
<a href="https://m.facebook.com/">
ဒီမွာ</a>နိွပ္ျပီးသြားပါခမ်ာ
</p>
</body>
</html>

ကဲ အေပၚကcodeကိုcopyကူးျပီးေအာက္
မွာစမ္းၾကည့္ပါဦး

သင္ခန္းစာ(၅)

ကဲဒီတစ္ခါ<a>ကိုပဲထပ္ရွင္းပါဦးမယ္
သူ႔ကိုေနာက္ထပ္တစ္ေနရာမွာသံုးပါေသး
တယ္ ဘယ္မွာသံုးလဲဆိုေတာ့
ဥပမာစာတစ္မ်က္နွာမွာစာပိုဒ္ေတအရမ္း
မ်ားတယ္ဆိုပါစို႔ အဲ႔လိုဆိုလက္နဲ႔ဆြဲျပီး
ဖတ္ ရတာလက္ေညာင္းတာေပါ့ ကိုယ္
ဖတ္ခ်င္တဲ႔စာပိုဒ္ကိုခ်က္ခ်င္းဖတ္နိုင္
ေအာင္<a>tagကိုသံုးပါတယ္ ဘယ္လို
သံုးလဲဆိုေတာ့စာပိုဒ္ကို <a></a>ဒီၾကား
ထဲထဲ႔လိုက္မယ္ ေအာက္မွာဥပမာၾကည့္ပါ
<a name="paragraph1">
<p>ဒီမွာစာေတေပါ့
</p>
</a>
အဲ႔လိုေရးပါတယ္ < p>ဆိုတဲ႔စာပိုဒ္တစ္ခု
လံုးကို<a>ထဲထည့္ျပီးparagraph1လို႔အ
မည္ေပးလိုက္တာပါ အမည္ျကိုက္တာေပး
လို႔ရပါတယ္ အဲ့နာမည္ကို<a>နဲ႔တစ္ခါျပန္>
ေခၚျပီးသြားလို႔ရပါတယ္ ဥပမာ
ဒီစာမ်က္နွာတစ္ခုလံုးကို index.html
လို႔အမည္ေပးထားတယ္ဆိုပါစို႔အဲ႔ထဲက
စာပိုဒ္တစ္ခုကို<a>ကိုသံုးျပီး
paragraph1လို႔အမည္ေပးထားတယ္
ဆိုပါဆိုး ဒါဆိုဘယ္လိုျပန္ေခၚမလဲဆိုေတာ့
အမည္ေရွ႕မွာ#ခံျပီး
<a href="index.html#paragraph1">
စာသား
</a>
လို႔ျပန္ျပီးေခၚလို႔ရပါတယ္
က်ေနာ့္ရဲ႕ဒီpageရဲ႕သင္ခန္းစာတစ္ခုကေန
တစ္ခုကိုသြားရာမွာအဲ႔နည္းကိုသံုးထားတာပါ
တစ္ကယ္ေတာ့သင္ခန္းစာအားလံုးစာ
တစ္မ်က္နွာထဲမွာရွိတာပါ ဆြဲျပီးဖတ္စရာ
မလိုေအာင့္အဲ့နည္းကိုသံုးထားပါတယ္
ဒီေလာက္ဆိုသေဘာေပါက္ျပီထင္ပါတယ္

သင္ ခန္းစာ(၆)

ဒီတစ္ခါမရွင္းရေသးတဲ႔<link>အေၾကာင္း
ကိုရွင္းသြားမွာျဖစ္ပါတယ္
<link>tagကိုက် မိမိရဲ႕html pageထဲကို
အျပင္ကအရာေတြေခၚထည့္တဲ့ေနရာမွာ
သံုးပါတယ္ ဥပမာ cssေပါ့ cssဆိုတာက
pageကိုပိုမိုလွပေအာင္ျပဳေပးတဲ႔ဘာသာ
ရပ္တစ္ခုပါ
ေနာက္သင္ခန္းစာေတြမွာcssကိုရွင္းပါမယ္
ခုေတာ့ ဥပမာအေနနဲ႔ cssဖိုင္တစ္ခုကို
style.css    လို႔နာမည္ေပးထားတယ္
ဆိုပါစုိ႔ အဲ့ဒါကိုမိမိရဲ႕pageထဲေခၚသံုး
ခ်င္ရင္
<head> </head>ၾကားထဲမွာ
<head>
<link href="style.css"type="text/css"rel="stylesheet"/>
</head>လို႔ေခၚသံုးပါ
တယ္ခမ်ာ
သတိထားရမွာကhtml tagေတေတြမွာ
အစံုလိုက္ဆို ဥပမာ
<link></link>လို႔ေရးျပီး
တစ္ခုတည္းဆို
<link/>
လို႔ေရးပါတယ္
ျမင္လား မ်ဥ္းေစာင္းေရွ႕နဲ႔ေနာက္ကြဲသြား
တာ အေပၚက<head>ၾကားက တစ္ခုတည္း
မို႔<link />
ဆိုျပီးမ်ဥ္းေစာင္းေနာက္ကိုပို႔ထားတာပါ
 ကဲေနာက္သင္ခန္းစာကိုေစာင့္ေမွ်ာ္ၾကဦး
စို႔ bye bye

Thursday, July 2, 2015

lession1.html

BASIC HTML

 htmlကိုအေျခခံစေရးမယ္ဆိုရင္ေတာ့ပထမဆံုး

  
    <html>
   <head> </head>
   <body> </body>
    </html>
  

 
    htmlနဲ႔ေရးတာျဖစ္တဲ့အတြက္<html>နဲ႕စပါတယ္
    htmlမွာ အဖြင့္tagကို<html>နဲ႕ေရးျပီးအပိတ္ကို
    </html>မ်ဥ္းေစာင္းခံျပီးေရးပါတယ္။ကိုယ္ေရးလို
    တဲ့အေၾကာင္းအရာကို အဖြင့္tagနဲ႔အပိတ္tag
    ၾကားမွာေရးရပါတယ္။ html tagေတကေတာ့
    ၁.<html> </html>
    ၂.<head> </head>
    ၃.<title> <title>
     ၄.<body> </body>
     ၅.<h1>to ...<h6>
      ၆.<p>
      ၇.<pre>
     ၈.<div>
       ၉.<img>
       ၁၀.<a>
      အစရွိတာေတြပဲျဖစ္ပါတယ္ ေနာက္ထပ္မ်ားစြာ
      က်န္ပါေသးတယ္ က်န္တဲ့ဟာကိုေတာ့ေနာက္
      သင္ခန္းစာမွာဆက္ၾကည့္ရေအာင္ OK?

သင္ခန္းစာ(၂)

  ပထမဆံုးcodeတစ္ခုစေရးၾကည့္ရေအာင္

  

    <html>
   <head>
     <title>ဒါကေခါင္းစဥ္ပါ browserရဲ႕address bar
    မွာေပၚမယ့္ေခါင္းစဥ္ပါ
     </title>
   </head>
   <body>
     <h1 align="center">ငေၾကာင္စာမ်က္ႏွာ</h1>
     <p>က်မႏွင္းဆီပါေမာင္:-P ေသခ်ာမကိုင္ရင္ဆူး
    တတ္ပါတယ္ေမာင္ ခိခိ
     </p>
   </body>
    </html>

  

  အေပၚကကုဒ္ကိုcopyကူးျပီး
  

  
  အဲ့ဒီcodeကိုရွင္းပါမယ္ 
  <head>ဆိုတာကဒီစာမ်က္နွာရဲ႕ေခါင္းပိုင္းပါ
  <title>ကbrowserရဲ႕search barမွာေပၚလာ
    မယ့္နာမည္ပါ <body>ကဒီစာမ်က္နွာရဲ႕ကိုယ္
    ပိုင္းပါ <h1>ကေတာ့ ေခါင္းစဥ္တပ္ရာမွာသံုးတာ
   ပါ h1ကေနh6ထိရွိပါတယ္ h1ကေခါင္းစဥ္အရြယ္
   အစားအၾကီးဆံုးျဖစ္ျပီး h6ကေတာ့အငယ္ဆံုးျဖစ္
   ပါတယ္ <p>ကေတာ့စာပိုဒ္ခြဲေတြေပါ့ဗ်ာ
   paragraphရဲ႕အတိုေကာက္ အဲ့ဒီထဲကalignဆို
   တာက altributeလို႔ေခၚပါတယ္ သတ္မွတ္ခ်က္
   ေပါ့ေနာ္ သူ႔ေနာက္ကcenterဆိုတာကvalueပါ
   alignဆိုတာေနရာသတ္မွတ္ခ်က္ျဖစ္ျပီး သူ႔ရဲ႕
   တန္ဖိုူးကိုcenterထားလိုက္ေတာ့ စာေတက
   စာမ်က္နွာရဲ႕အလည္တည့္တည့္မွာေပၚတာေပါ့
   leftဆိုဘယ္ rightဆိုညာေပါ့
   ကဲအေပၚကcodeကိုစမ္းၾကည့္ပါ h1ကေနh6ထိ
   ေျပာင္းၾကည့္ left, right, centerေျပာင္းၾကည့္ပါ

   ေနာက္သင္ခန္းစာေတြကိုေနာက္စာမ်က္နွာမွာဆက္ဖတ္ျကရေအာင္ bye bye...:-)

သင္ ခန္းစာ(၃)

  ကဲဒီတစ္ခါေျပာျပမွာကေတာ့ Altribute
  ေတြအေၾကာင္းပါခမ်ာ Altributeဆိုတာ
  ကေတာ့က်ေနာ္တို႔ေရးလိုက္တဲ႔စာသား
  ေတြကိုပိုမိုျပီးလွပေအာင္ဖန္းတီးေပးတဲ႔
  အမိန္႔ေတြပဲျဖစ္ပါတယ္ ကဲ စလိုက္ရေအာင္

  ၁.align

  alignဆိုတာကေတာ့စာသားကိုဘယ္ညာ
  အလယ္မွာေနရာခ်ေပးတဲ႔အရာပါ

  ၂.style

  styleဆိုတာကေတာ့စာသားဒီဇိုင္းေတြ
  လုပ္တာပါcssလိုပါပဲ

  ၃.font-size

  စာသားအရြယ္အစားပါ သူ႕valueကို
  pixels(px)နဲ႔တြက္ခ်က္ပါတယ္

  ၄.font-color

  စာသားအေရာင္ပါ သူ႔valueကေတာ့နွစ္
  မ်ိဳးသတ္မွတ္ပါတယ္ greenဆိုျပီး
  colorအေရာင္နာမည္ကိုတိုက္ရိုက္ေခၚသံုးနိုင္သလို codeနဲ႔လည္းေခၚလို႔ရပါ
  တယ္ codeနဲ႔ေခၚမယ္ဆိုရင္ေတာ့ အေရွ႕မွာ#ခံရပါမယ္ ဥပမာ
  font-color="#129921"ေပါ့
  အဲ႔ဒါနည္းနည္းရွင္းမယ္ ေရွ႕ႏွစ္လံုးက
  အနီေရာင္ပါ အလယ္ကအစိမ္းပါ ေနာက္
  နွစ္လံုးကအျပာပါ အေပၚကcodeဆို
  အစိမ္းေရာင္ပိုသန္းပါလိမ့္မယ္ အဲ့နည္း
  နဲ႔ၾကိဳက္တဲ႔အေရာင္ကိုစပ္လို႔ရပါတယ္

  ၅.background-color

  ေနာက္ခံအေရာင္ပါ

  ကဲလက္ေတြ႕လုပ္လိုက္ၾကရေအာင္

    <html>
   <head>
     <title>google</title>
   </head>
   <body style="background-color:violet;">
     <h1 align="left">
    ငိုးမတား
     </h1>
     <h2 align="center">
    မတာမ
     </h2>
     <h3 align="right">
    ခ်ဥ္ေပါင္ရိုးမ
     </h3>
     <p style="font-color:yellow;font-size:20px;">
    အဲ့ဒီေတာ့သူကဘာျပန္ေျပာလဲ သြား
    ေမးၾကည့္ေလ
     </p>
     <p style="font-color:#129901;font-size:10px;">
    အဲ့ဒီေတာ့ငါကကျပရမွာလား
     </p>
   </body>
    </html>
  
  ကဲအေပၚကcodeကိုcopyကူးျပီးေအာက္
  မွာစမ္းၾကည့္ပါဦးဗ်ာ

NgaBwa NgaAngel (IT STORE)

Saturday, July 4, 2015

lession-7.html

သင္ခန္းစာ(၁၉)

lession6.html

သင္ ခန္းစာ(၁၆)

သင္ခန္းစာ(၁၇)

သင္ ခန္းစာ(၁၈)

lession5.html

သင္ ခန္းစာ(၁၃)

သင္ခန္းစာ(၁၄)

သင္ ခန္းစာ(၁၅)

Friday, July 3, 2015

lession4.html

သင္ ခန္းစာ(၁၀)

သင္ခန္းစာ(၁၁)

သင္ ခန္းစာ(၁၂)

lession3.html

သင္ ခန္းစာ(၇)

သင္ခန္းစာ(၈)

သင္ ခန္းစာ(၉)

lession2.html

သင္ခန္းစာ(၅)

သင္ ခန္းစာ(၆)

Thursday, July 2, 2015

lession1.html

BASIC HTML

သင္ခန္းစာ(၂)

သင္ ခန္းစာ(၃)

Google Translate

Saturday, July 4, 2015

သင္​ခန္​းစာ(၁၉)

သင္ ခန္းစာ(၁၆)

သင္ခန္းစာ(၁၇)

သင္ ခန္းစာ(၁၈)

သင္ ခန္းစာ(၁၃)

သင္ခန္းစာ(၁၄)

သင္ ခန္းစာ(၁၅)

Friday, July 3, 2015

သင္ ခန္းစာ(၁၀)

သင္ခန္းစာ(၁၁)

သင္ ခန္းစာ(၁၂)

သင္ ခန္းစာ(၇)

သင္ခန္းစာ(၈)

သင္ ခန္းစာ(၉)

သင္​ခန္​းစာ(၅)

သင္ ခန္းစာ(၆)

Thursday, July 2, 2015

BASIC HTML

သင္ခန္းစာ(၂)

သင္ ခန္းစာ(၃)

သင္ခန္းစာ(၁၉)

သင္ခန္းစာ(၅)