Useful HTML Codes အသံုး၀င္းေသာ HTML Code မ်ား

သင္ေရးထားေသာကုတ္မ်ားကို webs စာမ်က္ႏွာေပၚသို႔မတင္ခင္ Test The HTML Code ကိုႏွိပ္လိုက္ ျပီး ကုတ္ကို အဲဒီေနရာက Box ထဲကိုကူးထည့္ျပီး စမ္းၾကည့္လို႔ရပါတယ္
သင့္ websites အတြက္ ေကာင္းနိုးရာရာ ကုတ္ေလးမ်ား.......

ဒါကေတာ့ ေနာက္ခံဘက္ဂေရာင္း အတြက္ ကုတ္ေလးပါ..။


<style type="text/css">
body {
background-image: url(ဒီေနရာမွာ ဘက္ဂေရာင္းလင့္ေလးထည့္ပါ) ;
background-attachment:fixed;
background-repeat: no-repeat;
background-position:Bottom; }</style>



အနီေရာင္ေလးေတြေနရာမွာ စိတ္ၾကိဳက္ေျပာင္းလို႔ရပါတယ္...။
................................................................

ဒါေလးကေတာ့ Text Box အတြက္ကုတ္ေလးပါ

<form method="post" action="">
<textarea name="comments" cols="60" rows="5">
စာေတြဒီေနရာမွာရိုက္ထည့္ပါ.....
</textarea><br>
</form>

.................................................................

ဒါေလးကေတာ့ box အတြက္ျဖစ္ပါတယ္

<table width=50% style="border:2px dotted hotpink;" cellpadding="4" cellspacing="4"><tr><td style="border:2px dotted lightpink;"><font size="1">ဒီေနရာမွာအေၾကာင္းအရာေရးပါ</td></tr></table>

<table width=50% cellpadding="6" cellspacing="2" style="border:double 5px #9900FF,"><tr><td style="border:double 5px #9900FF;">ဒီေနရာမွာအေၾကာင္းအရာေရးပါ</td></tr></table>

...............................................

ဒါေလးကေတာ့ သူ႔ကိုႏွိပ္လိုက္ရင္ စာမ်က္ႏွာအေပၚဆံုးကိုေရာက္သြားမယ့္ ကုတ္ေလးပါ

<div align="center">
<p id="top"><a href="#" temp_href="#"><img src="http://img140.imageshack.us/img140/5843/top1.png" width="70" height="45" border="0" alt="Back to the Top" title="အေပၚသို႔"></a></p>

စိမ္းေရာင္ေလးနဲ႔ လင့္ေနရာမွာေတာ့ မိမိၾကိဳက္တဲ့ ပံုစံေျပာင္းထည့္လို႔ရပါတယ္...။

..................................................................

ဒါကေတာ့ Flash ဖိုင္ေတြကိုစာမ်က္ႏွာမွာတင္မယ့္ ကုတ္ေလးပါ

<embed
src=" ဒီေနရာမွာ *.swf ဖိုင္ရွိတဲ့လင့္ေလးထည့္ေပါ့ " ="" wmode="transparent"
allowfullscreen="true" allowscriptaccess="always"
height="300" width="460">

*.swf ဖိုင္ကိုအရင္ upload တင္ရပါမယ္ ျပီးေတာ့မွ ဖိုင္ရွိတဲ့လင့္ကိုထည့္ရမွာျဖစ္ပါတယ္။
အနီေရာင္ ေတြေနရာမွာေတာ့လိုတဲ့ အရြယ္အစားကို အစားထိုးေျပာင္းလို႔ရပါတယ္။
.............................................

ဒါကေတာ့ စာလံုးအရြယ္အစားနဲ႔ အေရာင္ေတြအတြက္ပါ

<Font size ="2" color ="green">ဒီလိုေလးျဖစ္သြားပါမယ္</font>
<Font size ="3" color ="blue">ဒီလိုေလးျဖစ္သြားပါမယ္</font>
<Font size ="4" color ="yellow">ဒီလိုေလးျဖစ္သြားပါမယ္</font>

လိုအပ္တဲ့အရြယ္နဲ႔ အေရာင္ကို ၾကိဳက္သလိုျပန္ျပင္လို႔ရပါတယ္။

ဒီလိုေလးျဖစ္သြားပါမယ္ ဒီလိုေလးျဖစ္သြားပါမယ္ ဒီလိုေလးျဖစ္သြားပါမယ္
..............................

...............

ဒါကေတာ့ လင့္ခ်ိတ္တဲ့ ကုတ္ေလးပဲျဖစ္ပါတယ္

<a href=" ဒီေနရာမွာ ေပးသြားေစခ်င္တဲ့ လင့္ကိုထည့္ပါ "
target="_blank"> ဒီေနရာမွာက မိမိေဖၚျပခ်င္တဲ့အေၾကာင္းအရာေပါ့ </a>

ေဖၚျပခ်င္တဲ့ေနရာမွာ စာသားသက္သက္ေရးလဲရတယ္ ဒါမွမဟုတ္
ဓာတ္ပံုေလးနဲ႔ လုပ္လဲရပါတယ္ ဓာတ္ပံုေလးနဲ႔ ေဖၚျပမယ္ဆိုရင္ေတာ့ ဒီလိုေလးပါ

<a href=" ဒီေနရာမွာ ေပးသြားေစခ်င္တဲ့ လင့္ကိုထည့္ပါ "
target="_blank"> <img style="width: 280px; height:50px;"
src=" ဒီေနရာမွာ ဓာတ္ပံု လင့္ေလးထည့္ပါ "
alt=""/> </a>

ဒီလိုေလးပါ ကုတ္မ်ားအေၾကာင္း
.............................................

ဒါေလးကေတာ့ လင့္ ကို ေထာက္လိုက္ရင္ အေရာင္ေျပာင္းေအာင္လုပ္တာပါ

<style
type="text/css"> <!-- A:link { text-decoration: none; color:yellow
} A:visited { text-decoration: none; color:red} A:hover { text-decoration:
none; color:green } --> </style>

ပံုမွန္ လင့္အေရာင္ ။ ေမာက္စ္ျဖင့္ေထာက္လိုက္ေသာအေရာင္ ။ ၾကည့္ျပီးသြားေသာအေရာင္
.......................................................

ဒါေလးကေတာ့ စာလံုးေပၚကို ေထာက္လိုက္ရင္ အေရာင္ေျပာင္းေအာင္လုပ္တာပါ

<b onmouseout="this.style.color = 'black';" onmouseover="this.style.color
= 'red';" align="justify">ဒီေနရာမွာအေၾကာင္းအရာထည့္ပါ </b>

.................................................

ဒါကေတာ့ မိမိစာမ်က္ႏွာကိုဖြင့္လိုက္တာနဲ႔ သတိေပးတဲ့စာေလးေပၚလာေအာင္လုပ္တာပါ

<SCRIPT language="JavaScript">
<!-- hide from old browsers

alert("ဒီေနရာမွာမိမိေပၚေစခ်င္တဲ့စာသားေတြေရးပါ");

//-->
</SCRIPT>

.............................................

ဒါေလးကေတာ့ Tab bar မွာစာသားေလးေတြေျပးေနေအာင္လုပ္တာပါ

<script language="javascript" type="text/javascript">
msg = " ဒီေနရာမွာ စာသားထည့္ပါ ";
msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",150);
}
scrollMSG();
</script>

.............................................

ဒါေလးကေတာ့ သင့္စာမ်က္ႏွာကို Print လုပ္မဲ့ ကုတ္ေလးပါ

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (window.print) {
document.write('<form>'
+ '<input type=button name=print value="Print" '
+ 'onClick="javascript:window.print()"></form>');
}
// End -->
</script>

.............................................

ဒါေလးကေတာ့ Drop Down List အတြက္ျဖစ္ပါတယ္

<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>ဒီေနရာမွာ ေခါင္းစဥ္ထည့္ပါ<!-- change the links with your own --></option>
<option value="ဒီေနရာမွာ လင့္ ထည့္ပါ"> ဒီေနရာမွာ နာမည္ထည့္ </option>
<option value="ဒီေနရာမွာ လင့္ ထည့္ပါ"> ဒီေနရာမွာ နာမည္ထည့္ </option>
<option value="ဒီေနရာမွာ လင့္ ထည့္ပါ"> ဒီေနရာမွာ နာမည္ထည့္ </option>
</select></form>

.............................................

ဒါေလးကေတာ့ ဇယားအတြက္ ကုတ္ေလးပါ

<table border = "1">
<caption> ဒီေနရာမွာ ေဖၚျပခ်က္</caption>
<tr><th>ေခါင္းစဥ္ ၁</th><th> ေခါင္းစဥ္ ၂ </th></tr>
<tr><td> အမွတ္စဥ္ ၁/၁ </td><td> အမွတ္စဥ္ ၁/၂ </td></tr>
<tr><td> အမွတ္စဥ္ ၂/၁</td><td> အမွတ္စဥ္ ၂/၂</td></tr>
</table>

.............................................

ဒါေလးကေတာ့ ဇယားကြက္ထဲမွာ Drop down List ထည့္တဲ့ကုတ္ေလးပါ

<table border="0" cellspacing="0" align="center">
<tr>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<tr><td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td></tr>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
<td>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 140px;">
<option>----Title-----<!-- change the links with your own --></option>
<option value="--ဒီေနရာမွာ URL ထည့္ပါ--">--ဒီေနရာကေတာ့နာမည္ေပါ့--</option>
</select></form>
</td>
</tr>
</table>

........................................................

ဒါေလးကေတာ့ ြGoogle Search အတြက္ကုတ္ေလးပါ

<FORM method=GET action=http://www.google.com/custom>
<INPUT TYPE=text name=q size=14 maxlength=255 value="">
<INPUT type=submit name=sa VALUE="ရွာမယ္"><br>
<input type=hidden name=domains value="ning.com">
<input type=radio name=sitesearch value="" checked>Google <br>
<input type=radio name=sitesearch value="ning.com"> ning.com
</FORM>

.............................................

ဒါေလးကေတာ့ လင့္ဘက္ဂေရာင္းအတြက္ကုတ္ေလးပါ

a:hover {
color:#FF0000;
text-decoration:none;
background:transparent url(ဒီေနရာမွာ *.gif လင့္ေလးထည့္ပါ);
}

ဒီေနရာကို ေမာက္စ္နဲ႔ ေထာက္ၾကည့္လိုက္ပါ

............................................

ဒါကေတာ့ comment wall ေနာက္ခံဘက္ဂေရာင္းအတြက္ပါ

/*---pic in comment wall---*/
#xg_profiles_chatterwall_post_comment{
color: #ff6000;
background-color:transparent!important;
background-image:url(ဒီေနရာမွာ ဓာတ္ပံု လင့္ေလးထည့္ပါ);
background-repeat: no-repeat;
background-position:bottom;
background-attachment:relative;}

ဒါေလးကေတာ့ comment wall toolbar မွာပံုေလးေတြထည့္ခ်င္ရင္ေပါ့

/*---pic in comment wall toolbar---*/
.texteditor_toolbar {
background-image:url( ဒီေနရာမွာ URL ထည့္ပါ )!important;
border:2px ridge black;
width:500px;
height:50px;
}

.............................................

ဒါေလးကေတာ့ network Icon အတြက္ျဖစ္ပါတယ္

<link rel="icon" type="image/gif" href=" ဒီေနရာမွာ Icon လင့္ေလးထည့္ေပးပါ ">

.............................................

ဒါကေတာ့ website Header မွာ Flash ထည့္ဖို႔ပါ

<script language="JavaScript">
//insert under the NingBar only if the NingBar exists
var ningBar = document.getElementById('xn_bar');
if(ningBar) { var headlinerAd = document.createElement('div');
headlinerAd.id='headliner_ad'; headlinerAd.innerHTML = '<div style="font-size: 20pt; float: center; color: #FF0000; border: 1px; background-color: transparent; text-align: center;"><embed src=" ဒီေနရာမွာ *.swf ဖိုင္ရွိတဲ့လင့္ေလးကိုထည့္ပါ " ="" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" height="120" width="960"></embed></div>'; ningBar.parentNode.insertBefore(headlinerAd,ningBar.nextSibling);}</script>

အနီေရာင္စာလံုးေတြေနရာမွာေတာ့ၾကိဳက္သလိုျပန္ေျပာင္းလို႔ရပါတယ္...။

.............................................

ဒါေလးကေတာ့ စာမ်က္ႏွာေပၚမွာ
Floating အေနနဲ႔ေပၚေအာင္လုပ္တာပါ

<div style="position:fixed;top:20px;right:0px;">
ဒီေနရာမွာ အေၾကာင္းအရာေရးပါ</div>

ဒီေနရာမွာ စာသားတင္မကပဲ ဓာတ္ပံုေတြ Flash ေတြကိုပါေပၚေအာင္လုပ္လို္႔ရပါတယ္
Position ကိုေတာ့ မိမိ လိုသလိုျပင္ဆင္ယူလို႔ရပါတယ္ (စာလံုး အျပာ၊ အနီ)

.............................................

ဒါကေတာ့ အေပၚဆံုးက navigation bar အတြက္ ပါ

#xg_navigation { margin-top:1em; background: url(
ဒီေနရာမွာ ဓာတ္ပံု လင့္ ထည့္ပါ ) top repeat-x; height: 60px; border-top:2px ridge (transparent); border-right:2px ridge (transparent); border-center:2px ridge (transparent); border-bottom:2px ridge (transparent); }

...........................................

ဒါကေတာ့ Title Bar အတြက္ကုတ္ေလးပါ

.xg_module_head {
background-color:transparent;
background-image:url( ဒီေနရာမွာ ဓာတ္ပံု လင့္ေလးထည့္ေပးပါ );
background-repeat:repeat;
margin-bottom:0em;
}

...............................................

ဒါေလးကေတာ့ စာမ်က္ႏွာ ေအာက္ေျခမွာ ထည့္ခ်င္ရာထည့္ဖို႔အတြက္

#xg_foot {
background-image:url(ဒီေနရာမွာ jpeg, gif, png ဖိုင္ လင့္ေလးထည့္ပါ );
}

.............................................

ဒါေလးကေတာ့ စာသားေတြေရြ႕ေနေအာင္လုပ္တဲ့ေကာင္ေလးပါ

<marquee>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee direction=right>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee behavior=alternate>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<center><marquee behavior=alternate width=50%> ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee></center>

<marquee direction=up height=50>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee direction=down height=50>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>

<marquee direction=down height=50 behavior=alternate>ဒီေနရာမွာစာရိုက္ထည့္ပါ</marquee>