NgaBwa NgaAngel (IT STORE): Website-template-1

Website ေရးနည္းသင္ခန္းစာ-၁

မဂၤလာပါ ခုသင္ခန္းစာကစၿပီး 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တစ္ခုထပ္ေရးပါမယ္ တစ္ဖန္စာတစ္ခုစီကို
 &nbsp; &#8203;လို႔ေခၚတဲ့non-brake spacစာလံုျခားရာမွာအသံုးျပဳတဲ႔codeေလးကိုထည့္ပါမယ္ htmlမွာစာလံုးျခားခ်င္ရင္keyboardနဲ႔ျခားလို႔မရပါဘူး &nbsp; ဆိုတဲ႔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
		&nbsp;&nbsp;&nbsp;
		Books
		&nbsp;&nbsp;&nbsp;
		Application
		&nbsp;&nbsp;&nbsp;
		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
		&nbsp;&nbsp;&nbsp;
		Books
		&nbsp;&nbsp;&nbsp;
		Application
		&nbsp;&nbsp;&nbsp;
		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ျကည့္ပါဦး
NgaBwa NgaAngel (IT STORE)

Friday, July 24, 2015

Website-template-1

Website ေရးနည္းသင္ခန္းစာ-၁

No comments:

Google Translate
