html အေၾကာင္းသိခ်င္ရင္ေအာက္က url link ေလးကိုႏွိပ္ပါ။
http://sanpwintthu9.blogspot.com/2012/09/website.html
css(Cascading Style Sheets) အေၾကာင္း
css ကေတာ့ မိမိ web page ေလးလွပေအာင္ အေသးစိတ္လွပေအာင္ၿပဳၿပင္တာပါ။
css မွာ အပ္ိုင္းေလးေတြခြဲထားပါတယ္။
(1) Inline Style Sheet
(2) Internal Style Sheet
(3) External Style Sheet ဆိုၿပီးသံုးမ်ိဳးခြဲထားပါတယ္
css Syntax မွာ selector,property,value
ဒီလိုပံုစံနဲ.cssသြားတာပါ selector{property:value}
ဥပမာအေနနဲ.
body color ေၿပာင္းခ်င္ရင္ body{color:blue}
paragraph ရဲ.စာေတြအေရာင္ထည့္တာၿပင္တာတို. ကိုယ္လုပ္ခ်င္တာႏွစ္မ်ိဳးဆိုရင္ အလယ္မွာ ; ေလးခံရပါတယ္။
ဥပမာ - p{text-align:center;color:red}
Inline Style Sheet ကေတာ့
html tag ေတြထဲရဲ. body tag ထဲမွာေရးသြားတာပါ။ေအာက္မွာၿပထားပါတယ္။
<body style="background-color:#00FF00"> body ရဲ.ေနာက္ကအေနာက္ခံအေရာင္သံုးထားတာပါ။
<p style="color:magenta;margin-left:20px"> စာရဲ.အေရာင္နဲ. စာကိုဘယ္ဘက္ၿခမ္းနဲ."20"px အကြာထားထားတာကိုေၿပာတာပါ။
Hello World!
</p>
</body>
Internal Style Sheet ကေတာ့
html tag ထဲရဲ. head tag ထဲမွာေရးရပါတယ္။
့head tag မွာ css syntax ကိုေရးၿပီး body tag မွာၿပန္ေခၚသံုးရပါတယ္။
CSS selector မ်ား
(1) "#" (id)
(2) "." (class)
့html tag ကိုအရင္ေရးၿပီး notepad ထဲမွာေအာက္ပါ code ေတြေရးၿပီး ေလ့က်င့္လုိ.ရပါတယ္။
html ရဲ. head tag ထဲမွာ
<head>
<title>css
</title>
<style type="text/css">
h1{color:red;} h1.a{color:green;} "h1.a" လို.ထားၿပီးbody မွာၿပန္သံုးေတာ့ <h1 class="a"> လို.ၿပန္သံုးထားပါတယ္
h2{color:pink;} h2#b{color:gray;} "h2#b" လို.ထားၿပီးbody မွာၿပန္သံုးေတာ့ <h2 id="b">လို.ၿပန္သံုးထားပါတယ္
p{color:magenta;margin-left:20px} paragraph ရဲ.အေရာင္နဲ.အကြာအေ၀းေတြပါ။
</style>
</head>
<body>
<h1>Internal CSS</h1>
<h1 class="a">Header1</h1> class နဲ.သံုးထားတာပါ။
<h2>Hello!</h2>
<h2 id="b">Header2</h2> id နဲ.သံုးထားတာပါ။
<p>This is a paragraph</p>
</body>
</html>
list ထည့္ရင္
ul.a{list-style-type:circle;}
ul.b{list-style-type:square;}
ol.c{list-style-type:upper-roman;}
ol.d{list-style-type:lower-alpha;}
table border ၿပဳလုပ္ပါမယ္
<head>
<title>Table Border</title>
<style type="text/css">
table,th,td{border:10px solid red;} table ရဲ.ေဘာင္ကိုအေရာင္ထည့္တယ္အထူးအပါးလုပ္တာပါ။
</style>
</head>
<body>
<table>
<tr>
<th>first name</th>
<th>last name</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
Link လုပ္ၾကမယ္
Link ထည့္ရာတြင္
(i) a:link
(ii) a:visited
(iii) a:hover
(iv) a:active
တို.ကိုစိတ္ၾကိဳက္ယူသံုးလုိ.ရပါတယ္
ဥပမာ-
<head>
<title>link
</title>
<style type="text/css">
a:link,a:visited link ကိုမထိမႏွိပ္ေသးဘဲထြက္တဲ့အေရာင္ပါ။
{color:#ffffff;
background-color:#ff0080;
text-decoration:none; link စာသားကိုဘာမွမၿပဳၿပင္ဘူးလို.ေၿပာတာပါ။
padding-top:3px; ဒါကေတာ့အကြာအေ၀းေတြပါ။
padding-right:15px;
padding-bottom:3px;
padding-left:15px;}
a:hover hover က အဲဒီ Link ေလးေပၚမွာ mouse တင္လိုက္ရင္ထြက္တဲ့အေရာင္ပါ။
{color:#000000;
background-color:#ff8080;}
a:active active က အဲဒီ Link ေလးကို ႏိွပ္လိုက္တဲ့အခါမွာထြက္တဲ့အေရာင္ပါ။
{background-color:blue;}
</head>
<body>
<a href=".... .html">Home</a> "......" ဒီေနရာမွာကိုယ္ save မွတ္ထားတဲ့ file nameကိုေရးပါ။
<a href="..... .html">Use</a>
<a href="....... .html">Page</a>
<a href="........ .html">Link</a>
</body>
</style>
ကိုယ္ဘာသာကိုယ္လုပ္ၾကည့္ၾကပါေနာ္
External Style Sheet ကေတာ့
အေပၚေၿပာသြားတဲ့ Inline,Internal တို.နဲ.အတူတူပါဘဲ
သူကေတာ့ file ႏွစ္ခုခြဲၿပီး ၿပန္ေခၚသံုးတာပါ။
css file ကို .css နဲ. save ၿပီး .html မွာၿပန္ေခၚသံုးတာပါ။
css မွာ css syntax ေတြရုိက္ထည့္ၿပီး .css နဲ. save ပါ
html မွာ ၿပန္ေခၚသံုးမွာက head tag ထဲမွာ
<link rel="stylesheet" type="text/css" href="..... .css"> "......" ဒီေနရာမွာကိုယ္ save မွတ္ထားတဲ့ file nameကိုေရးပါ။
ဥပမာ တစ္ခုေလာက္လုပ္ၾကမယ္။ေအာက္က code ကို notepad မွာေရးပါ။
body{
background-color:#BA55D3;
color:#FFFF00;
}
p{
margin-left:20px;
text-align:center;
color:#7CFC00;
font-size:60px;
}
ul{
list-style-type:circle;
}
a:link,a:visited
{
color:#Bc8f8f;
background-color:#AFEEEE;
text-decoration:none;
padding-top:22px;
padding-right:50px;
padding-bottom:22px;
padding-left:50px;
margin-left:15px;
}
a:hover
{
color:#000000;
background-color:#FFD700;
}
a:active
{
background-color:#F08080;
}
အဲဒါကို .css နဲ. save ပါ။
ဒါကို .html နဲ. save ပါ။
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<p>Warmly Welcome</p>
<ul>
<li>InlineStyle Sheet</li>
<li>Internal Style Sheet</li>
<li>External Style Sheet</li>
</ul>
<br><br>
<a href="...... .html">Home</a>
<a href="...... .html">Page</a>
<a href="...... .html">Design</a>
<a href="...... .html">HTML</a>
<a href="...... .html">CSS</a>
<a href="...... .html">Javascript</a>
<a href="...... .html">Photoshop</a>
<a href="...... .html">Flash</a>
<br><br>
</body>
</html>
file ႏွစ္ခုကိုတေနရာတည္းမွာ save မွတ္ၿပီး html file ကိုဖြင့္ၾကည့္လိုက္ပါ။
ဒါကေတာ့ External Style Sheet လို.ေခၚပါတယ္။
ေက်းဇူးတင္ပါတယ္
Tuesday, October 2, 2012
Monday, October 1, 2012
Avast Serial key
Sunday, September 30, 2012
Saturday, September 29, 2012
website တည္ေဆာက္ခ်င္ၾကတဲ့လူေတြအတြက္ (အေၿခခံေလးပါ)
website ပိုင္းနားမလည္ေသးတဲ့သူေတြအတြက္ဒါဟာအေၿခခံေလးပါေသေသခ်ာခ်ာလုပ္ၾကည့္ၾကပါ။
website တည္ေဆာက္မယ္ဆိုရင္ပထမဆံုးအေနနဲ.ေလ့လာရမွာ ေတြရွိပါတယ္
1.html
2.css
3.javascript
4.photoshop
5.flash
ပထမဆံုး html (hypertext mark-up language) ေလ့လာမယ္ဆိုရင္သိထားသင့္တာကေတာ့code ေတြစေရးမယ္ဆိုရင္ notepad ထဲမွာ စေရးပါမယ္။
notepad ထဲမွာ html tag ကိုရုိက္ထည့္ရပါမယ္။ဒီလိုေပါ့
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
ကိုယ္ရဲ.စိတ္ၾကိဳက္ထည့္မယ္ဆိုရင္ ေခါင္းစဥ္ေနရာမွာ စာေပၚခ်င္ရင္ title tag အဖြင့္ အပိတ္ၾကားထဲမွာ ထည့္ၿပီးေရးလို.ရပါတယ္website တည္ေဆာက္မယ္ဆိုရင္ပထမဆံုးအေနနဲ.ေလ့လာရမွာ ေတြရွိပါတယ္
1.html
2.css
3.javascript
4.photoshop
5.flash
ပထမဆံုး html (hypertext mark-up language) ေလ့လာမယ္ဆိုရင္သိထားသင့္တာကေတာ့code ေတြစေရးမယ္ဆိုရင္ notepad ထဲမွာ စေရးပါမယ္။
notepad ထဲမွာ html tag ကိုရုိက္ထည့္ရပါမယ္။ဒီလိုေပါ့
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
ဥပမာ - <title>html</title>
စာကိုယ္ေနရာမွာထည့္ခ်င္ရင္လဲ body tag အဖြင့္အပိတ္ၾကားထဲမွာ ထည့့္္ၿပီးေရးလို.ရပါတယ္။စာသားကို bold ၿဖစ္ခ်င္ရင္ <b></b> tag ထဲမွာေရးပါ။ေအာက္မွာေဖာ္ၿပထားပါတယ္
ဥပမာ - <body><b>This is my first homepage.</b></body>
<br>ကေတာ့စာတေၾကာင္းေက်ာ္တာပါဘဲ။<hr>စာကေၾကာင္းရဲ.ေအာက္မွာမ်ဥ္းေၾကာင္းေလးေပၚလာမွာပါ။
html tag ထဲက body tag ထဲမွာ ပံုထည့္ခ်င္ရင္ <img src="...........jpg"> ကိုယ္ထည့္ခ်င္တဲ့ပံုရင္ name ကို "........." ထဲမွာထည့္ပါ ကိုယ္ယူတဲ့ပံုနဲ.html သိမ္းမယ့္ file နဲ.folder တူမွပံုေပၚပါမယ္
save မယ္ဆိုရင္ Ctrl+S နဲ. file ကို html နဲ. save ပါမယ္။
body ကိုအမ်ိဳးေၿပာင္းခ်င္ရင္ <body></body> attributes လို.ေခၚရပါတယ္ အဲဒါကေတာ့ body ရဲ. background စသည့္တို.ကိုေၿပာင္းလဲပစ္တာပါ။ေအာက္မွာေဖာ္ၿပထားပါတယ္
ဥပမာ - <body background="url"></body> background ေနရာမွာ bgcolor="color" color ေနရာမွာ ၾကိဳက္တာထည့္ပါ "blue" "#000000" စသည့္ၿဖင့္ေၿပာင္းလို.ရပါတယ္
စာလံုးေတြအၾကီးအေသးေၿပာင္းခ်င္ရင္
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
စသည့္ၿဖင့္တၿဖည္းၿဖည္းေသးလာပါမယ္။စာလံုးအၾကီးဆုံးကေတာ့အေပၚဆံုးက <h1>Heading 1</h1> ဘဲၿဖစ္ပါတယ္။ကိုယ္ဘာသာစိတ္ၾကိဳက္သံုးၾကည့္ၾကပါ။
creating paragraph စာပိုဒ္တစ္ခုၿပဳလုပ္မယ္ဆိုရင္ body tag ထဲမွာဘဲ
<p></p> attributes: Align="left|center|right|justify"
<div></div> attributes: Align="left|center|right"
<font></font> attributes: Face="Time|Verdana|Arial" Size="number" Color="color"
<marquee></marquee> attributes: behavior="slide|alternate|scroll" စာသားေတြကိုေရြ.သြားေစပါတယ္။
direction="left|down|top|right"
bgcolor="color"
height="number" numberေနရာမွာ 1,2,3,................စသည့္တို.ေပါ့
width="number"
list ပံုစံၿဖစ္ခ်င္ရင္ <ul><li>Monday
<li>Tuesday
<li>Wednesday
</ul> list attributes: type="disc|square|circle"
<ol><li>Monday
<li>Tuesday
<li>Wednesday
</ol>
<ol> list attributes: type="1|A|a|i|I" start="number"
<li> list attributes: type="1|A|a|i|I" value="number"
html link
link ေလးဖန္တီးမယ္ဆိုရင္ <a href="...........html">Go to Home</a> လုပ္ၾကည့္ၾကပါ။
table ခြဲမယ္ဆိုရင္
<table border=0 width=150>
<tr><td width=150 bgcolor="#b7b7b7"></td></tr>
</table>
notepad ကို save မယ္ .html နဲ. save ၾကတာေပါ့။
html အေၾကာင္းအမ်ားၾကီးရွိပါတယ္။အေၿခခံေလာက္ဘဲေရးထားတာပါ။
ကဲ example ေလးတခုေလာက္လုပ္ၾကည့္ရေအာင္ေအာက္ပါ code ကို notepad မွာေရးလိုက္ပါ။
<html>
<head>
<title>Website Page
</title>
</head>
<body bgcolor="#000000">
<font color="pink">
<marquee behavior="alternate">IT Speakers</marquee><br>
<h1>Making a Website</h1>
<i>include</i>
<ul>
<li>html
<li>css
<li>javascript
<li>photoshop
<li>flash
</ul>
<hr>
</font>
<table boder=1 width=1300 height=80 bgcolor="skyblue" align="center">
<tr>
<td width="300" height="30" ><a href=".html">Home</a></td>
<td width="300" height="30" ><a href=".html">Page</a></td>
<td width="300" height="30" ><a href=".html">Style</a></td>
<td width="300" height="30" ><a href=".html">News</a></td>
<td width="300" height="30" ><a href=".html">IT</a></td>
<td width="300" height="30" ><a href=".html">Link</a> </td>
</tr></table>
</body>
</html>
.html နဲ. save ၿပီးစမ္းၾကည့္ၾကပါ။
က်န္ေသာအပိုင္းမ်ားကို ေနာက္တေခါက္က်ရင္ post တင္ပါမယ္။
ေက်းဇူးတင္ပါတယ္။
ေက်းဇူးတင္ပါတယ္။
Monday, September 24, 2012
အေရာင္စံု ၾကယ္ကေလး photoshop animation
ၾကယ္ကေလးမ်ားကို အေရာင္စံုၿဖစ္ေအာင္လုပ္မွာပါ။အခ်ိန္သိပ္မရလို.တုိတုိတုပ္တုပ္
ဘဲေၿပာေတာ့မယ္ေနာ္ photoshop cs3 ကုိဖြင့္ၿပီး Ctrl+N ကိုႏွိပ္လိုက္ပါ။စာရြက္ေလးက်လာပါမယ္။ brush
tool ထဲက
menu bar မွ window ထဲက animation ကိုသြားႏွိပ္ပါ။ layer ေနာက္တခုကိုယူၿပီး ၾကယ္ကိုအရာင္ေၿပာင္းပါမယ္။
ၾကယ္ကေလးမ်ားကိုအၿမန္ႏႈန္းနဲ.ထြန္းေတာက္ခ်င္ရင္ေအာက္ကdown arrowႏွိပ္ၿပီးsecond ေၿပာင္းလို.ရပါတယ္။ကိုယ္စိတ္ၾကိဳက္ေပါ့။
animation (frames) မွာလဲ layer ထပ္ယူပါ။ ၾကယ္ေလးအေရာင္ထြက္ရန္layer တခု ကို မ်က္စိပိတ္ၿပီး ေနာက္ layer တခုကို မ်က္စိဖြင့္ၿပီးလုပ္ၾကည့္ပါ။
ၾကယ္ကေလးမ်ားအလင္းေရာင္မ်ိဳးစံုၿဖင့္လွပေနပါမယ္။
ကိုယ္စိတ္ၾကိဳက္ေၿပာင္းၿပီး design ေဖာ္ၾကည့္ၾကပါ။
ေက်းဇူးတင္ပါတယ္။
Saturday, September 22, 2012
Myanmar Management Group @ Facebook
Management ပညာဆိုတာလဲ မရွိမျဖစ္တတ္ေျမာက္ထားတဲ့ပညာရပ္တစ္ခုပါ။
ကြ်န္ေတာ္ေထာင္ထားတဲ့ Group ေတာ့မပာုတ္ပါ။
ကြ်န္ေတာ္ရဲ့အက်င့္အတုိင္း ရွယ္ေပးလုိက္ပါတယ္။
Bright Your Corner
http://www.facebook.com/groups/409552489105158/
Thursday, September 20, 2012
How to connect Internet Access by using android ph on ubunu
ubuntu နဲ႔ အင္တာနက္ခ်ိတ္မယ္ဆုိလွ်င္ အရင္ဆုံး android ph ရဲ့ plug ၾကဳိးကုိ ကြန္ပ်ဴတာတြင္ထုိးပါ။
android ဖုန္းတြင္ အင္တာနက္ခ်ိတ္တဲ့ settingမ်ား ခိ်န္ထားပါ။ ၾကဳိးနဲ႔ထုိးလွ်င္ ကြန္ပ်ဴတာနဲ႔ connect ျဖစ္သြားပါျပီ ဒါဆုိလွ်င္ configure လုပ္လုိ႔ရသြားပါျပီ။ edit connections ကုိသြားပါ။
ျပီးလွ်င္ ပုံတြင္ျပထားသည့္အတုိင္း အဆင့္ဆင့္လုပ္ေဆာင္ပါ။ window မွာလုိပဲ မခက္ပါဘူး။
ပုံမျမင္ရသူမ်ား double click ႏွိပ္ျပီး အၾကီးခ်ဲ႕ႏုိင္ပါတယ္။
Subscribe to:
Posts (Atom)