Website တစ္ခုဆြဲဖို႕အတြက္ HTML ~ နည္းပညာ(suran)

HTML

PHP ေရးၿပီးေနာက္ပိုင္း အခန္းဆက္စာမေရးၿဖစ္တာ ၁ ႏွစ္ေက်ာ္သြားပါၿပီ။အခု HTML အေၾကာင္းၿပန္ေရးၿဖစ္ရင္းနဲ႕ တစ္ဖန္အခန္းဆက္ၿပန္ေရးၿဖစ္ပါၿပီ။ HTML ကိုဖုိရမ္စတင္တုန္းက အနည္းငယ္ေရးခဲ့ဖူးၾကပါတယ္ ၿပီးတဲ့အထိေတာ့ မေရးၿဖစ္ခဲ့ၾကပါဘူး။အခုအစဆံုးေရးသြားပါမယ္။တစ္ခုေတာ့ရွိတယ္ဗ်..နည္းနည္းစိတ္ရွည္ၿပီးသည္းခံဖတ္ေပးၾကပါ။ ေရးသာေရးရတာ အခုေတာ္ေတာ္မ်ားမ်ားက HTML ဆိုတာကိုသိၿပီး တတ္ၿပီးၿဇစ္ေနၾကတယ္။ကဲ စကားမရွည္ေတာ့ပါဘူး။

Website တစ္ခုဆြဲဖို႕အတြက္ အေၿခခံအက်ဆံုးၿဖစ္တဲ့ HTML အေၾကာင္းေလးေၿပာၿပပါမယ္ Website တစ္ခုဖန္တီးတတ္ဖို႕အတြက္ဆို HTML ကိုမသိမၿဇစ္ သိရပါမယ္။အခုေၿပာမွာက Website(Static) ဖန္တီးဖို႕အတြက္ေၿပာမွာပါ စာသင္ၾကားၿခင္းသလိုမ်ိဳးမဟုတ္ဘဲ နားလည္လြယ္ေအာင္
တဆင့္ၿပန္လည္ေၿပာၾကားၿခင္းသေဘာၿဇင့္ေရးသားသြားမွာပါ သင္ခန္းစာေတြ စာအုပ္ေတြထဲကလို ဤ သည္ မလြဲၿဖစ္မွာမဟုတ္ပါ တခ်ိဳ႕ တခ်ိဳ႕ႈေသာအေၾကာင္းအရာမ်ားကို ကၽြန္ေတာ္နားလည္သလို ဖတ္သူလည္းနားလည္လြယ္ေအာင္ ေရးသြားပါမယ္ လိုအပ္ခ်က္ေတြရွိပါက နားလည္ေပးၾကကုန္…
HTML သင္ခန္းစာဆိုရင္လည္း ဆိုလို႕ရပါတယ္..ကဲ ကၽြန္ေတာ္တို႕အေၿခခံက စလိုက္ရေအာင္။

HTML ဆိုတာစေလ့လာမွာေတာ့ HTML ရဲ႕ အဓိပၸါယ္ေတာ့သိထားသင့္ပါတယ္ HTML ဆိုတာကေတာ့ Hyper Text Mark-up Language ပါ။
HTML ကိုေရးဖို႕အတြက္ ဘာေတြလိုအပ္သလဲဆိုရင္ေတာ့ HTML အတြက္ notepad ရွိရံုနဲ႕ေရးႏိုင္ပါတယ္။အၿခား HTML Editor ေတြ IDE ေတြအမ်ားၾကီးပါ။ဒါေပမယ့္ လက္ရွိဒီမွာအသံုးမ်ားေနတာေတာ့ Dreamweaver , FrontPage တို႕ပါ..Dreamweaver ကိုပိုၿပီးအသံုးမ်ားပါတယ္ ဒီေနရာမွာၾကားၿဖတ္ Dreamweaver နဲ႕ Frontpage တို႕ကြာၿခားတာကိုနည္းနည္းေၿပာၿပပါမယ္။

Dreamweaver ကေတာ့ ၿမန္မာမွာလက္ရွိ Website Developer ေရာ Website Designer ေရာအသံုးမ်ားတဲ့ Software တစ္ခုပါပဲ။HTML အတြက္ဆိုရင္ ဆိုပါစို႕ Table တစ္ခုဖန္တီးဖို႕အတြက္ဆို ၄ ၅ ေၾကာင္းေလာက္ေရးရမွာကို Dreamweaver နဲ႕ဆို ဒီဇိုင္း ဗ်ဳးဘက္ကေနၿပီး
Microsoft Word လို Insert Table ဆိုၿပီးထည့္လုိက္ရင္ ခဏေလးနဲ႕ၿပီးသြားပါတယ္။ေနာက္တစ္ခုက Language ေတာ္ေတာ္မ်ားမ်ားေရးသားႏိုင္ပါတယ္။(PHP,Javascript,CSS,HTML,etc..)

Frontpage ဆိုတာကေတာ့ Microsoft ကထုတ္တာပါ..သူ႕ကိုအရင္ကသံုးခဲ့ၾကပါတယ္။အခုေနာက္ပိုင္းေတာ့ ဒီမွာလူသိနည္းလာပါတယ္။ကၽြန္ေတာ္ေတာ့ အလုပ္တစ္ခု၀င္တုန္းက သံုးဖူးလိုက္တာပါ..သူက တကယ့္ကို Static ပါပဲ။ HTML , CSS ,etc..စတာေတြသာေရးလို႕ရၿပီး Server-side Languageေတြေရးသားလို႕မရပါ။သူ႕ကိုသံုးတတ္ဖို႕အတြက္ဆိုရင္ေတာ့ Microsoft ထုတ္ကုန္ၿဖစ္တဲ့အတြက္ Word ကိုသံုးတတ္ရင္အသံုးၿပဳလို႕ရပါတယ္။

အခု HTML ေလ့က်င့္ခန္းေလးစလိုက္ရေအာင္ HTML အတြက္ဘာ IDE သံုးမလဲဆိုရင္ေတာ့ မူလတန္းအရြယ္က စာလံုးေတြမွတ္မိေအာင္ အၾကိမ္ၾကိမ္ ခ်ၿပီးေရးခဲ့ရသလိုပါပဲ အလြယ္သံုးလို႕ရတဲ့ ဘာ IDE မွမသံုးဘဲ notepad နဲ႕ပဲစလိုက္ရေအာင္။HTML မွာ Tags ေတြနဲ႕ဖြဲ႕စည္းထားပါတယ္။ Tags ဆိုတာ
ဘာလဲဆိုရင္ေတာ့ ရိုးရိုးစာသားေတြနဲ႕ HTML code ေတြကိုခြဲၿခားလို႕ရေအာင္လုပ္ထားတာပါ ဥပမာဆိုရရင္ <b> This is bold </b> အဲ့လိုမွာ This is bold သည္ စာသားၿဖစ္ၿပီး <b> </b> က tags ေတြပါ..မ်ားေသာအားၿဇင့္Tag ေတြမွာအဖြင့္နဲ႕အပိတ္ရွိပါတယ္ အပိတ္မွာ / ေလးပါပါတယ္။

ပထမဆံုး HTML file

HTML ေရးဖို႕အတြက္ Windows Key + R ကိုတြဲႏွိပ္ပါ ၿပိးရင္ Run box ေပၚလာပါလိမ့္မယ္ အဲ့မွာ notepad ဆိုၿပီးရိုက္လိုက္ပါ notepad က်လာပါမယ္။
ဟုတ္ၿပီ စေရးၾကရေအာင္။

<HTML>
<HEAD>

</HEAD>
<BODY>

</BODY>
</HTML>

HTML ကိုစေရးေတာ့မယ္ဆုိရင္ ဒီလိုေရးပါတယ္။

<html> </html> အဲ့လို အဖြင့္ tag နဲ႕အပိတ္ tag ထဲမွာေရးရပါတယ္။အဲ့ tag ထဲမွာမွ ႏွစ္မ်ိဳးခြဲထားပါတယ္
Head and Body.

<html>
<head>
This is head part.
</head>
<body>
This is body part.
</body>
</html>

Head နဲ႕ Body ဘာကြာၿခားလဲဆိုတာေၿပာၿပပါမယ္။ Browser မွာ ေပၚေစခ်င္တာမွန္သမွ် Body tag ထဲမွာထည့္ၿပီးေရးရပါတယ္။Head Tag မွာေတာ့ Browser Title မွာေပၚေစခ်င္တာေတြ ေရးပါတယ္။အခုေနေၿပာၿပရင္ သိပ္နားလည္ခ်င္မွ နားလည္မွာပါ။ကၽြန္ေတာ္ ဥပမာေလးနဲ႕ရွင္းၿပပါမယ္။HTML တစ္ခုေရးၾကပါစို႕…

<html>
<head>
</head>
<body>
Hello! This is first example.
</body>
</html>

ပံုစံတက်ေရးေစခ်င္ပါတယ္။ဒီလိုေရးပါ Tag တစ္ခုအဖြင့္ကိုေရးၿပီးတာနဲ႕တစ္ခါတည္း အပိတ္အတြက္ပါေရးလိုက္ပါ။ဒါမွ အဖြင့္ အပိတ္က်န္ခဲ့တဲ့ Error ကင္းေစႏိုင္မွာပါ။ေရးၿပီးရင္ေတာ့ first.html (or) first.htm ဆိုၿပီးသိမ္းလိုက္ပါ။HTML ရဲ႕ File extension ကေတာ့ .html ဒါမွမဟုတ္ .htm ၿဖစ္ပါတယ္။ၿပီးရင္ေတာ့ အဲ့ေကာင္ကို Run ပါမယ္။သူ႕ ပံုေလးကေတာ့ IE ပံု ဒါမွမဟုတ္ FireFox ပံုေလးနဲ႕ၿဇစ္မွာပါ။ကိုယ္သြင္းထားတဲ့ Browser ေပၚမူတည္ပါတယ္။သူ႕ကိုဖြင့္လိုက္ပါ။

http://img132.imageshack.us/img132/8859/img00q.jpg

အခုလိုေပၚပါလိမ့္မယ္။အခု ခုနေရးထားတဲ့ example မွာလည္းထပ္ၿပင္ပါမယ္။ဒီတစ္ခါ Title ထည့္ပါမယ္။ခုနက head tag ထဲမွာဘာမွထည့္မေရးထားဘူးေနာ္.အခု head မွာထည့္ေရးပါမယ္။

<html>
<head>
<title> MYiD Group </title>
</head>
<body>
Hello! This is first example.
</body>
</html>

http://img577.imageshack.us/img577/2334/img01m.jpg

ပံုႏွစ္ခုကိုယွဥ္ၾကည့္ပါ အခုပံုမွာ ကၽြန္ေတာ္ၿမွားၿပထားတဲ့ေနရာမွာ ခုန Head tag ထဲမွာ title ဆိုတဲ့ tag နဲ႕ေရးထားတာေပၚေနပါလိမ့္မယ္။
<title> ဆိုတဲ့ Tag တစ္ခုသိသြားပါၿပီ။မွတ္စရာတစ္ခုပိုလာတာေပါ့ :P

မွတ္ဖို႔ေနာက္တစ္ခုထပ္တိုးရေအာင္ အခု Heading Tag ဆိုတာေၿပာပါမယ္။notepad အသစ္ဖြင့္လိုက္ပါ။
ၿပီးရင္ေတာ့ဒီကုတ္ေလးကိုရိုက္ထည့္လိုက္ပါ။

<HTML>
<HEAD>
<TITLE> MYiD Group </TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>
</BODY>
</HTML>

ကိုယ့္စိတ္ၾကိဳက္နာမည္ေပးၿပီးသိမ္းလိုက္ပါ။ၿပီးရင္ သိမ္းလိုက္တဲ့ေကာင္ကို Run လိုက္ပါ။ Heading Style မ်ိဳးကြာၿခားတာကိုေတြ႕ရပါမယ္။
အလြယ္လမ္းလိုက္ၿပီး ကၽြန္ေတာ္ေရးထားတဲ့ ကုတ္ကို Copy/Paste မလုပ္ေစခ်င္။မွတ္မိေအာင္ ကိုယ္တိုင္ရိုက္ေစခ်င္ပါတယ္။ပထမဆံုးလုပ္ထားတဲ့ Example ကိုၿပန္ဖြင့္လိုက္ပါ။Right Click လုပ္ၿပီးOpen With>Notepad ကိုေရြးလိုက္ပါ။ၿပီးရင္ ခုနရိုက္ထားတဲ့ Hello!ဆိုတဲ့ေနာက္မွာဆက္ရိုက္ပါမယ္။
ဒီဟာေလးကိုဆက္ရိုက္ပါ။

<html>
<head>
</head>
<body>
Hello! This is first example. This is 2nd Example.
</body>
</html>

တစ္ဆက္တည္းေပၚေနပါမယ္။ဟုတ္ၿပီ ကၽြန္ေတာ္တို႕က အဲ့လိုတဆက္တည္းမေပၚေစခ်င္ဘူး 2nd example ဆိုတာကို ေအာက္တစ္ေၾကာင္းမွာ
ေပၚေစခ်င္တယ္။ေအာက္တစ္ေၾကာင္းဆင္းေစခ်င္တာပဲ လြယ္ပါတယ္ Enter ေခါက္ ၿပီးေအာက္တစ္ေၾကာင္းမွာေရးမွာေပါ့လို႕ထင္ေနလိမ့္မယ္။
HTML Enter ေခါက္ေရးလည္း တစ္ဆက္တည္းေပၚေနမွာပဲ။သူ႕ကို ေအာက္တစ္ေၾကာင္းဆင္းေရးခ်င္တယ္ဆို Tag တစ္ခုလိုလာၿပီ။ဟဲဟဲ Tag ေတြမွတ္ရမ်ားေနၿပီလား။စိတ္မပ်က္ပါနဲ႕ေရွ႕ဆက္ ဒီထက္မ်ားလာဦးမွာပါ(ၿဖဲေၿခာက္ထားတာ :P )ဟုတ္ၿပီ HTML မွာေအာက္တစ္လုိင္းဆင္းခ်င္တယ္ဆို
<br> ဆိုတဲ့ Tag ကိုသံုးပါတယ္။သူ႕ကို <br> </br> ဆိုၿပိးရိုက္စရာမလုိပါဘူး <br/> ဒါမွမဟုတ္ <br> ဆိုတာတစ္ခုတည္းနဲ႕ၿပီးပါတယ္။
အခု first example နဲ႕ This is 2nd Example. ဆိုတဲ့စာႏွစ္ခုၾကားထဲမွာ <br> ထည့္လိုက္ပါ။ဒီလိုေလးေပါ့။
Hello! This is first example.<br> This is 2nd Example

ၿပီးရင္ save လုပ္ၿပန္ Run ၾကည့္ပါ။အခုဆို ေအာက္တစ္ေၾကာင္းဆင္းသြားတာေတြ႕ရမွာၿဖစ္ပါတယ္။ကဲဒီေန႕ေတာ့ ဒီေလာက္ပါပဲ…မွတ္ရတာေလးေတြလည္းမ်ားသြားေလာက္ၿပီ။

Italic နဲ႕ bold Underline အေၾကာင္းဆက္ေၿပာပါမယ္။ဒီအေခၚေ၀ၚေတြကေတာ့လူေတာ္ေတာ္မ်ားမ်ားနဲ႕ရင္းႏွီးေနၿပီးသားပါ။
<b>This is bold.</b>
<i>This is Italic </i>
<u>This is Underline</u>

စာေတြကိုတစ္လိုင္းၿပီးတိုင္း line break နဲ႕မဆင္းခ်င္ဘူး Enter ႏွိပ္လိုက္ရံုနဲ႕ ေအာက္တစ္လိုင္းဆင္းခ်င္တယ္ဆိုရင္လည္း ရပါတယ္ အဲ့အတြက္ဆို
<pre> ဆိုတဲ့ tag ကိုသံုးပါတယ္ သူ႕က Space ၿခားတာေတြေရာ Enter ႏွိပ္တာေတြေရာ ေနာက္ Tabs ခုန္ထားတာေတြေရာသိပါတယ္ ဒါေပမယ့္
သူ႕ကို သံုးလိုက္ရင္ေတာ့ Font ပံုစံေၿပာင္းသြားပါတယ္။စမ္းၾကည့္လုိက္ရေအာင္

<HTML>
<HEAD>
<title>MYiD Group</title>
</HEAD>
<BODY>
<pre>Hello
Welcome to MYiD Group
Thanks </pre>
</BODY>
</HTML>

စာေတြကို စာပိုဒ္ပံုစံုေရးခ်င္တယ္ဆိုရင္ေတာ့ paragraph tag ကိုအသံုးၿပဳပါတယ္ <p> </p> ပါ။စမ္းေရးရေအာင္။

<HTML>
<HEAD>
<title>MYiD Group</title>
</HEAD>
<BODY>

<h2>MYiD Group</h2>
<p>Welcome to our donation group. www.myidgroup.org MYiD means Myanmar Youth IT Donation Group!</p>
<b>MYiD</b><br>
<i>Myanmar Youth IT Donation</i><br>
<u>We are donater!!</u>
</BODY>
</HTML>

ထပ္ကိန္းတင္တဲ့စာေရးရာမွာသံုးတဲ့ tag ကိုေၿပာၿပပါမယ္။ထပ္ကိန္းဆိုရာမွာ ဥပမာ 2nd Street ဆိုပါစို႕ nd ေလးက 2 ရဲ႕အေပၚမွာတင္ခ်င္တယ္ အဲ့လိုဆိုရင္ေတာ့ ဒီ Tag ကိုသံုးပါတယ္ <sup></sup> ေနာက္တစ္ခု base အေနနဲ႕သံုးတာပါ 10x ဆိုရင္ x ေလးက 10 ရဲ႕ေအာက္မွာရွိေနခ်င္
တယ္ဆိုရင္ေတာ့ <sub></sub> ဆိုတဲ့ tag သံုးပါတယ္။ကဲ ဥပမာေလးေရးလိုက္ရေအာင္။

<HTML>
<HEAD><TITLE>HTML Basic</TITLE></HEAD>
<BODY>

No ( ) 2<sup>nd</sup> Fl , blank Street.<br/>
10 <sub>x</sub>
</BODY>
</HTML>

tag ေတြမွာလည္း attribute ေတြထည့္ျပီး သံုးႏိုင္ပါတယ္။ attribute ဆိုတာကေတာ့ အဲဒီtag ပိုင္ဆိုင္တ့ဲ properties ပါ။tag တိုင္းမွာေတာ့ attribute မရိွပါဘူး။ဒါ့အၿပင္ tag တစ္ခုရဲ႕ေနာက္မွာ attribute တစ္ခုထက္မက လိုက္လို႕ရပါတယ္။အဲ့ဒါေတြကို ေနာက္ပိုင္းမွာေတြ႕ရပါမယ္ attribute ရွိတဲ့ tagတစ္ခုကိုဥပမာအေနနဲ႕စမ္းၾကည့္ရေအာင္
body tag ကိုစမ္းပါမယ္။

<HTML>
<HEAD><TITLE>HTML Basic</TITLE></HEAD>
<BODY bgcolor="pink">

HTML Basic HTML Basic HTML Basic

</BODY>
</HTML>

Body tag ရဲ႕ attribute တစ္ခုၿဖစ္တဲ့ bgcolor ကိုသံုးနည္းေလးပါ color ေတြကို စာသားအၿပင္ Hex code number နဲ႕လည္းသံုးလို႕ရပါတယ္။
ကာလာကုတ္ေတြကိုမသိဘူးဆိုရင္ေတာ့ အလြယ္ဆံုးနည္းကေတာ့ photoshop ဖြင့္ၿပီး color ကုတ္ေတြကိုကူးယူႏိုင္ပါတယ္။ကူးဖို႕အတြက္ကေတာ့ ဒီိလိုပါ။

http://img249.imageshack.us/img249/525/img02ig.jpg

Step 1 ၿမွားၿပထားတာကိုအရင္ႏွိပ္လိုက္ပါ။ choice color မွာကိုယ္ၾကိဳက္တဲ့ကာလာကိုေရြးပါ ၿပီးမွ Step 2 ၿမွားၿပထားရာမွာ ကာလာကုတ္ကိုကူးပါ ၿပီးမွ Body ရဲ႕ bgcolor မွာလာထည့္ပါမယ္။ # ေလးပါ ပါရပါမယ္။

<HTML>
<HEAD><TITLE>HTML Basic</TITLE></HEAD>
<BODY bgcolor="#cd1616">

HTML Basic HTML Basic HTML Basic

</BODY>
</HTML>

Pink ဆိုတဲ့ေနရာမွာ ကာလာကုတ္ေလးနဲ႕ထည့္လို္က္ပါတယ္..ေနာက္ေန႕မွဆက္ပါဦးမယ္။

အားလံုးပဲမဂၤလာပါ..ကဲမေန႕ကေၿပာခဲ့တဲ့ HTML ၿပန္စလိုက္ရေအာင္။အခု ပံုေတြနဲ႕လင့္ေတြအေၾကာင္းဆက္ေၿပာၿပပါမယ္။ကိုယ့္ရဲ႕ Webpage ေတြမွာပံုေလးေတြထည့္ခ်င္လာပါတယ္ဆိုပါစို႕ ဒီလိုဆိုရင္ ဘယ္ tag ကိုသံုးမလဲသိခ်င္လာလိမ့္မယ္ အဲ့လိုေတြအတြက္ဆိုရင္ေတာ့ <img> ဆိုတဲ့ tag ကိုသံုးပါတယ္။

<html>
<head>
<title> Insert Images & Links </title>
</head>
<body>

<img src="MYiD.jpg">

</body>
</html>

Src ဆိုတာကေတာ့ Browse သေဘာေပါ့ တစ္နည္းအားၿဖင့္ဆိုရရင္ လမ္းေၾကာင္းေရြးေပးတာပါ အဲ့ src ေနာက္မွာ မိမိထည့္လိုတဲ့ ပံုရွိတဲ့လမ္းေၾကာင္းကိုေရးေပးရပါတယ္ ပံုမွာလည္း jpg.png,gif စတဲ့မိမိပံုရဲ႕ extension ကိုမွန္ေအာင္ေရးေပးရပါတယ္။အဲ့လိုမွမဟုတ္ရင္ ပံုေပၚမွာမဟုတ္ပါဘူး။

http://img508.imageshack.us/img508/6903/img03b.jpg

ပံုထည့္ၿပီးၿပီဆိုေတာ့ ဆက္ၿပီး Links ေတြအေၾကာင္းေၿပာပါမယ္ Webpage တစ္ခုရဲ႕အဓိကက်တဲ့အခ်က္လက္ေတြမွာ Links ေတြလည္းပါပါတယ္။Links ဆိုတဲ့သေဘာကေတာ့ ဆိုပါစို႕ မိမိရဲ႕ဆိုက္မွာ Home About စသၿဖင့္ေပါ့ အဲ့လိုေလးေတြထားမယ္ Home မွာအေၾကာင္းရာတစ္ခု About ဆိုအေၾကာင္းရာတစ္ခုေရးမယ္ Home ကေန About ကိုၾကည့္ခ်င္တယ္ဆိုရင္ ဒီအတိုင္းဆိုၾကည့္လို႕မရပါဘူး ဒီေတာ့ၾကည့္လို႕ရေအာင္ links ခ်ိတ္ေပးရေတာ့မယ္။အဲ့လိုေနရာေတြအတြက္ဆိုရင္သံုးတာပါ။links ေတြသံုးပံုသံုးနည္းေရးၿပပါမယ္။

<html>
<head>
<title> Insert Images & Links </title>
</head>
<body>

<img src="MYiD.jpg">
<a href="imgaes.html">Home </a>
|
<a href="about.html">About</a>
</body>
</html>

<a> ဆိုတာေတာ့ လင့္အတြက္ tag ပါ. href ဆိုတာကေတာ့အခု src လိုပါပဲ။လမ္းေၾကာင္းေရြးတာပါ ဒီမွာေတာ့ကိုယ္ခ်ိတ္လိုတဲ့ links ကိုေရးေပးရပါတယ္။သူ႕မွာလည္း လမ္းေၾကာင္းမွန္ေအာင္ extension မွန္ေအာင္ေရးေပးရပါတယ္။ images.html ဆိုတာကေတာ့ခုနကၽြန္ေတာ္တုိ႕ပံုထည့္တဲ့ html page ပါ။အခု About အတြက္ page တစ္ခုၿပဳလုပ္ပါမယ္။

<html>
<head><title>About</title></head>
<body>

<h2>About Me!!!!</h2>

<b> This <i>is</i> About <u>page</u></b>
<br>
<p>Everybody thanks you</p>

<h4>Have a nice day!!!!!!!</h4>
<a href="images.html">Home</a>
|
<a href="about.html">About</a>
</body>
</html>

ဒီ page မွာေတာ့အရင္ေန႕ကေၿပာခဲ့တဲ့ tags ေတြၿပန္ထည့္ေပးထားပါတယ္။အခုဆိုဒီလိုေလးၿဖစ္သြားပါၿပီ။

http://img141.imageshack.us/img141/8850/img04r.jpg

http://img407.imageshack.us/img407/228/img05b.jpg

အခုဆို images နဲ႕ links ထည့္တာေတြသိသြားပါၿပီ။ဒီေလာက္ဆိုရင္ေတာ့ ပံုေတြနဲ႕စာေတြပါတဲ့ Webpage ေလးေတြၿပဳလုပ္ႏို္င္ပါၿပီ။

ေနာက္ထပ္တစ္ခုဆက္လိုက္ၾကရေအာင္။ဒီတစ္ခါ List tag ေတြအေၾကာင္းေၿပာပါမယ္။List ပိုင္းမွာ order list နဲ႕ unorder list ဆိုၿပီးရွိပါတယ္။နံပါစဥ္ေတြနဲ႕စီတာနဲ႕ နံပါတ္စဥ္မဟုတ္ဘဲစီတာပါ။Microsoft Word မွာဆိုရင္ေတာ့ Bullet ထည့္တဲ့သေဘာမ်ိဳးပါ List ရဲ႕ tag ကေတာ့ <li></li> ပါ။

Order List

Order List ရဲ႕ tag ကေတာ့ <ol> </ol> ၿဖစ္ပါတယ္။သူ႕ကလည္း attribute ရွိတဲ့ tagပါ။ဥပမာတစ္ခုစေရးလိုက္ရေအာင္။

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

<ol>
<li>This is list 1</li>
<li>This is list 2</li>
<li>This is list 3</li>
</ol>

</body>
</html>

http://img94.imageshack.us/img94/863/list1k.jpg

1 2 3 အစဥ္လုိက္စီထားတာေတြ႕ရပါလိမ့္မယ္။အခုတစ္ခု ၁ ၂ ၃ လိုအစဥ္လိုက္မစီဘဲ A B C နဲ႕စီတာေရးပါမယ္ အဲ့အတြက္ သူ႕ရဲ႕ type ဆိုတဲ့ attribute ကိုသံုးပါမယ္။
<ol type="A"> ဆိုရင္ A B C နဲ႕စီပါမယ္ ေနာက္ <ol type="a"> ဆိုရင္ေတာ့ abc အေသးနဲ႕စီပါမယ္ ေနာက္ <ol type="i"> ဆိုရင္ေတာ့ ေရာမဂဏန္း i ii iii နဲ႕စီပါမယ္ အဲ့ i ကို အၾကီး I နဲ႕ေရးလိုက္မယ္ဆိုရင္ေတာ့ I II III အဲ့လိုစီပါလိမ့္မယ္။ မိမိၾကိဳက္တ့ ဲနံပါတ္ကေန စၿပိးလည္း စီႏိုင္တယ္။ မိမိၾကိဳက္တ့ ဲ နံပါတ္ကစႏိုင္ဖို႕ start ဆိုတ့ ဲ attribute ကိုသံုးႏိုင္ပါတယ္။

http://img18.imageshack.us/img18/1135/list2c.jpg

Unorder List

နံပါတ္စဥ္လိုက္မစီေစခ်င္တဲ့အခါမ်ိဳးမွာ အသံုးၿပဳပါတယ္ သူ႕ရဲ႕ tag ကေတာ့ <ul></ul> ၿဖစ္ပါတယ္။

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

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>

http://img194.imageshack.us/img194/5313/list3o.jpg

သူ႕မွာလည္း attribute ရွိပါတယ္။ အခုလက္ရွိက list အားလံုး အလံုးေလးေတြနဲ႕ၿပေနပါတယ္ အဲ့ဒါကိုေၿပာင္းပါမယ္ သူ႕ကိုလည္း type ဆိုတဲ့ attribute သံုးရပါတယ္။
<ul type="square"> ေနာက္ <ul type="circle"> <ul type="disc"> type= Disc ဆိုရင္ေတာ့ နဂိုၿပတဲ့အလံုးေလးေတြအတိုင္းၿဇစ္သြားပါမယ္။
ေနာက္ listing တစ္ခုကေတာ့ definition list လို႕ေခၚပါတယ္ သူ႕ကိုအသံုးၿပဳမယ္ဆိုရင္ေတာ့ <dl></dl> tag နဲ႕သံုးပါတယ္ ဒါေပမယ့္သူ႕ကိုအသံုးၿပဳနည္းပါတယ္ မေၿပာတာ့ပါဘူး။

ဆက္ၿပီး text algin အေၾကာင္းေတြဆက္ရေအာင္ အခုဆိုရိုက္သမွ်စာအားလံုးက ဘယ္ဘက္ကိုကပ္ေနတာကိုေတြ႕ပါမယ္အခုအဲ့လိုဘက္ဘက္မွာပဲကပ္ေနတာမ်ိဳးမလိုခ်င္ဘူးစာသားေတြကိုေရႊ႕ေၿပာင္းမႈေတြၿပဳလုပ္ခ်င္တယ္ အဲ့အတြက္ေၿပာပါမယ္။ပထမဆံုးစာသားေတြကိုအလယ္ကိုေရႊ႕ပါမယ္ အဲ့အတြက္ <center> ဆုိတဲ့ tag ကိုသံုးပါတယ္။

<html>
<head><title>Text Align</title></head>
<body>

<center>
<h1>Basic HTML</h1>
</center>

</body>
</html>

Basic HTML ဆိုတာေလးက Browserရဲ႕အလယ္ကိုေရာက္ေနတာေတြ႕ရပါမယ္။ကဲစာသားေတြကိုေရႊ႕ၾကည့္လိုက္ၾကရေအာင္။

<html>
<head><title>Text Align</title></head>
<body>

<h1 align="center">Basic HTML</h1>

</body>
</html>

<html>
<head><title>Text Align</title></head>
<body>

<h1 align="right">Basic HTML</h1>

</body>
</html>

left ဆိုရင္ေတာ့ဘယ္ဘက္နားကိုေရႊ႕သြားပါလိမ့္မယ္။

ေနာက္ tag တစ္ခုကေတာ့ အားလံုးၾကိဳက္ၾကမယ္ထင္တယ္။ကၽြန္ေတာ္ HTML စသင္တုန္းကလည္း ဒီ tag ေလးသင္တဲ့အခါအရမ္းသေဘာက်ခဲ့ပါတယ္။အဲ့ဒါဘာလဲဆိုေတာ့ ေရွ႕ကေၿပာခဲ့သမွ်မွာ စာေတြကအကုန္လႈပ္ရွားမႈမဲ့
ေတြပါပဲ အခုကေတာ့ စာသားေတြေရႊ႕လ်ားမႈၿပဳလုပ္လို႕ရတဲ့ marquee ဆိုတဲ့ tag ပါ။

<html>
<head><title>Marquee</title></head>
<body>

<h1>Marquee Tags</h1>

<marquee>
This text is sample marquee text!
</marquee>

</body>
</html>

စာသားေလးေရႊ႕ေနတာေတြ႕ရပါမယ္။ Marquee မွာရိွတ့ဲ attribute ေတြကေတာ့

Behavior alternate ဘယ္ကေနညာ ၊ ညာကေန ဘယ္ျပန္သြား ပါတယ္။<marquee behavior="alternate">Alternate Moving</marquee>

Scroll သူက default value ပါ။ ဘယ္ကေန ညာ ၊ ညာဘက္ေရာက္သြားရင္ ဝင္သြားျပီး ဘယ္ဘက္ေန ျပန္စတာပါ။
<marquee behavior="scroll">Scroll Moving</marquee>

Slide သူကေတာ့ ဘယ္ကေနညာ ျပီးရင္ ရပ္သြားပါတယ္။ <marquee behavior="slide">slide Moving</marquee>

အဲ့ဒါေတြကေတာ့ behavior ဆိုတဲ့ attribute မွာရွိတဲ့ properties ေတြပါ။

Kyi Shaung

01-19-2011, 10:42 AM

မေရးၿဖစ္တာၾကာသြားၿပီ...ဆက္ေရးပါဦးမယ္ direction attribute အေၾကာင္းထပ္ေၿပာပါမယ္

left သူကေတာ့ default value ပါ။ ညာဘက္ကေန ဘယ္ဘက္ကိုသြားမယ္လို႕ ဆိုတာပါ။
<marquee direction="left" >Text Moving</marquee>

Right သူကေတာ့ ဘယ္ဘက္ကေန ညာဘက္ကိုသြားမယ္လို႕ဆိုတာပါ။ <marquee direction="right" > Text Moving </marquee>

up သူကေတာ့ ေအာက္ကေန အေပၚလာမယ္လို႕ဆိုတာပါ။ <marquee direction="up" > Text Moving </marquee>

Down သူကေတာ့ အေပၚကေန ေအာက္ဆင္းမယ္လို႕ဆိုတာပါ။ <marquee direction="down" > Text Moving </marquee>

Loop ဆိုတဲ့ attribute ကေတာ့ marqueeကိုကိုယ္ဘယ္ႏွစ္ၾကိမ္ေလာက္လုပ္မလဲဆိုတာ
သတ္မွတ္ေပးလုိ႕ရပါတယ္။

[number] သူကေတာ့ ကိုယ္ဘယ္ႏွစ္ၾကိမ္ marquee ကို လုပ္ခိုင္းမယ္ဆိုျပီး number တစ္လံုးထည့္ေပးရပါတယ္။ ၁ ဆို ၁ ၾကိမ္ပဲလုပ္မယ္ေပါ့။
<marquee loop="6" >Loop Moving</marquee>

Scrollamount attribute

[number] တစ္ခါေရြ႕ရင္ ဘယ္ေလာက္ pixel ေရႊ႕မလဲဆိုျပီး ထည့္ေပးရတာပါ။ ထည့္လိုက္တ့ဲ နံပါတ္မ်ားေလေလ ေဝးေဝးေရြ႕ ျမန္ျမန္သြားေလပဲ။
<marquee scrollamount="12">Text Moving</marquee>

Scrolldelay attribute

[number] သူကေတာ့ ဘယ္ေလာက္ၾကာရင္ ေရႊ႕မလဲဆိုတာပါ။ သူက millisecond နဲ႕ပါ။ 1000 လို႕ထည့္လိုက္ရင္ 1 second ၾကာမွ တစ္ခါေရြ႕မွာပါ။ သူကေတာ့ နံပါတ္မ်ားေလေလ ၾကာေလေလပါပဲ။
<marquee scrolldelay="1000">Text Moving</marquee>

Bgcolor attribute

[hex code] OR [Color Name] သူကေတာ့ marquee ရဲ႕ back color အေရာင္ေလးပါ။ #009933 ဆိုရင္ေတာ့ အစိမ္းေရာင္ေလးကို background ထားျပီး ေရႊ႕သြားမွာပါ။ <marquee bgcolor="#009933" >Text Moving</marquee>

အခုဆိုရင္ စာသားေလေတြေရြ႕ေနတာကိုၿပဳလုပ္ႏိုင္ၿပီၿဖစ္ပါတယ္။စာသားေရြ႕လ်ားမႈေတြၿပဳလုပ္ရတာေပ်ာ္ဖို႕ေကာင္းပါတယ္။
နက္ၿဖန္မွဆက္ပါဦးမယ္။

ကုိႀကည့္ေရွာင္ေရ.. Front Page က ကၽြန္ေတာ္သံုးခဲ့ဖူးသေလာက္ေတာ့ Only Static မဟုတ္ပါဘူး.. သူ႔မွာ Server side programming language တစ္ခုျဖစ္တဲ့ ASP ကိုထည့္ျပီး Run လုိ႔ရပါေသးတယ္.. ကၽြန္ေတာ္သိသေလာက္ေတာ့ အဲ့ေကာင္က Coding ပိုင္းကို ပိုအဆင္ေျပေစျပီး DreamWaver က ဒီဇုိင္းပိုင္းမွာ ပိုျပီးအားသာတယ္လို႔ သိရပါတယ္..။ ကၽြန္ေတာ္ပဲ အမွတ္မွားသလားေတာ့ မသိဘူး.. ေျပာျပပါဦး..

Kyi Shaung

01-27-2011, 02:13 AM

ASP နဲ႕ေတာ့စမ္းဖူးပါဘူး..... Front Page ေတာ့ သံုးရတာ အဆင္ေၿပဘူးဗ်ာ..Dreamweaver သံုးေနၾကမို႕နဲ႕တူတယ္...Frontpage သံုးရတုုန္းကဆို ေတာ္ေတာ္စိတ္ပ်က္ဖုိ႕ေကာင္းတယ္.....
I like DreamWeaver!!!!!!!! :)

Kyi Shaung

02-04-2011, 02:07 PM

ဒီေန႕ဆက္မယ့္အေၾကာင္းအရာကေတာ့ font အေၾကာင္းပါ။ပထမဆံုးေၿပာခ်င္တာကေတာ့ ၿမန္မာလိုရိုက္တဲ့အေၾကာင္းပါ။စလိုက္ရေအာင္။

<html>
<head><title>Font</title></head>
<body>
<font face="Zawgyi-One">
အားလံုးပဲမဂၤလာပါခင္ဗ်ာ။
</font>
</body>
</html>

Save လုပ္ရင္ေတာ့ notepad ရဲ႕ေအာက္နားမွာရွိတဲ့ Encoding ကို Unicodeလို႕ေရြးေပးပါ။အဲ့ဒါဆိုရင္ေတာ့ၿမန္မာလိုေပၚပါၿပီ။

Font ေတြကိုေၿပာင္းလဲခ်င္တယ္ဆိုရင္ေတာ့ face ဆိုတဲ့ attribute ကိုအသံုးၿပဳပါတယ္။အၿခားလွပေသာမိမိစိတ္ၾကိဳက္ေဖာင့္ေတြေၿပာင္းလဲေလ့က်င့္ပါ။
အခုေတာ့အဲ့font ကို အေရာင္ဆိုးၾကည့္ၾကရေအာင္။

<html>
<head><title>Font</title></head>
<body>
<font face="Zawgyi-One" color="green">
အားလံုးပဲမဂၤလာပါခင္ဗ်ာ။
</font>
</body>
</html>

အခုဆို font tag ရဲ႕ေနာက္ attributes တစ္ခုကိုသံုးလိုက္ပါတယ္။အဲ့ဒါကေတာ့ color ပါသူ႕ေနာက္မွာ ကာလာနာမည္ဒါမွမဟုတ္ ကာလာကုတ္နဲ႕ထည့္
ေပးရပါတယ္။ကာလာကုတ္အလြယ္ယူနည္းကိုအေရွ႕မွာေၿပာခဲ့ၿပီးပါၿပီ။မမွတ္မိေတာ့ရင္အေရွ႕ကိုၿပန္ၾကည့္ပါ။

<html>
<head><title>Font</title></head>
<body>
<font face="Zawgyi-One" color="green" size="+4">
အားလံုးပဲမဂၤလာပါခင္ဗ်ာ။
</font>
</body>
</html>

ေနာက္တစ္ခုကေတာ့ size ဆိုတဲ့ attributes ပါ.သူကေတာ့ ကုိယ္လိုအပ္သလို font ရဲ႕ size ကိုေၿပာင္းတာပါ။ပံုမွန္က size=3 ပါ။ စာလံုး size
ၾကီးလိုလွ်င္ size=4 ကေန 7 ထိထည့္လို႕ရပါတယ္။ 1 ကေန 7 အထိရိွပါတယ္။ 3ကေတာ့ ပံုမွန္စာလံုးပါ။ ေနာက္ျပီး +1 ကေန +6 ရိွပါတယ္။
ပံုမွန္ကိုဘယ္ေလာက္တိုးမယ္ဆိုပါ။ +2 ဆိုရင္ ပံုမွန္က 3 ဆိုေတာ့ 5 ျဖစ္သြားမွာပါ။ အဲလိုမ်ဳိးပဲ-1 ကေန -6 ထိရိွပါေသးတယ္။ -1 ဆိုရင္ ပံုမွန္က
3 ဆိုေတာ့ 2 ျဖစ္သြားမွာပါ။

<b> </b> စာလံုးေတြကို Bold လုပ္တာပါ

<blockquote> </blockquote> Tab ခုန္တဲ့ tag ပါ။ကိုယ့္စာပိုဒ္ေလးကိုတစ္သီးတစ္သန္႕လုပ္ခ်င္တဲ့အခါ မွာသံုးပါတယ္။

<i> </i> စာလံုးေတြကို italic လုပ္တာပါ

<small> </small> စာလံုးေတြကို ပံုမွန္ထက္ေသးေအာင္လုပ္တဲ့ေနရာမွာသံုးပါတယ္

<sup> </sup> စာလံုးေတြကို ထပ္ကိန္းသေဘာတင္တဲ့ေနရာမွာသံုးပါတယ္

<sub> </sub> စာလံုးေတြကို ေအာက္ခ်တဲ့ေနရာမွာသံုးပါတယ္။

<strike> </strike> သူကေတာ့ စာလံုးေတြကို အလယ္ကေနမ်ဥ္းသားတာပါ။

<pre> </pre> သူကေတာ့ Enter ေခါက္ရံုနဲ႕စာေၾကာင္းဆင္းတဲ့ပံုစံမ်ိဳးလိုခ်င္ရင္သံုးတာပါ သူ႕မွာ Space ေတြ Tab ခုန္တာေတြကအစသိပါတယ္။သူ႕ကိုသံုးရင္ေတာ့ font ပံုစံေၿပာင္းလဲသြားပါတယ္။

<tt> </tt> စာလံုးေတြကို Typing ရိုက္သလိုေပၚေအာင္လုပ္တာပါ။

<u> </u> သူကေတာ့စာလံုးေတြကို မ်ဥ္းသားတာပါ

<var> </var> Variable သတ္မွတ္တဲ့ Tag ပါ။

အေပၚမွာ link ခ်ိတ္တဲ့အေၾကာင္းေၿပာခဲ့ပါတယ္ အဲ့တုန္းက စာသားေတြကို link ခ်ိတ္တဲ့အေၾကာင္းပါ အခု ပံုေတြကို link ခ်ိတ္တဲ့အေၾကာင္းဆက္ေၿပာ
ပါမယ္။တကယ္ေတာ့ ပံုေတြကိုလင့္ခ်ိတ္တာလည္းလြယ္ပါတယ္။သူ႕မွာအသံုးၿပဳတာေတြက အေပၚမွာေၿပာခဲ့တဲ့ tag ေတြပဲအသံုးၿပဳတာပါ စလိုက္ၾကစို႕

<html>
<head>
<title>Image Link</title>
</head>
<body>

<a href="page2.html"><img src="img03.jpg"></a>

</body>
</html>

http://www.freeimagehosting.net/uploads/9e941068e1.jpg

လင့္ခ်ိတ္ထားတဲ့ပံုမွာ ေဘာင္ၿပာေလးနဲ႕ၿဖစ္ေနတာေတြ႕ရပါမယ္ စာေတြကိုလင့္ခ်ိတ္တုန္းကေတာ့ စာသားေအာက္မွာမ်ဥ္းသားထားတာေလးရွိတာမွတ္မိမွာပါ။အခုပံုကိုလင့္ခ်ိတ္ၿပီးပါၿပီ။

Kyi Shaung

02-06-2011, 03:57 PM

မခက္ခဲဘူးမဟုတ္လား Comment ေရးနည္းဆက္ေၿပာပါမယ္။

<html>
<head>
<title>Image Link</title>
</head>
<body>

<a href="page2.html"><img src="img03.jpg"></a>

This is show text!

</body>
</html>

စာသားႏွစ္ေၾကာင္ေရးလိုက္ပါတယ္ တစ္ခုကို အဲ့လို ေလးထဲမွာထည့္ေရးတာရယ္ေနာက္တစ္ေၾကာင္းကဒီတိုင္းေရးတာရယ္ပါ ဟုတ္ၿပီ Run ၾကည့္လိုက္ပါ။ This is show text ဆိုတဲ့တစ္ေၾကာင္းပဲေပၚေနတာေတြ႕ရပါမယ္။ ဘာလို႕ဆို Block Text ဆိုတာကို Comment ပိတ္ထားလို႕ပါ မွတ္ဖို႕
ေနာက္တစ္ခုတိုးလာၿပန္ၿပီ Comment ကို  အဲ့လိုေရးပါတယ္ အခုဆက္ၿပီး လမ္းေၾကာင္း src ဆိုတာေလးရွင္းေအာင္ ထပ္ရွင္းၿပပါမယ္. Src ေနာက္မွာ ပံုထည့္ရာမွာကိုယ္ထည့္လိုတဲ့ပံုရွိတဲ့လမ္းေၾကာင္းကိုေရြးေပးရပါတယ္ အခု img src=img03.jpg လို႕ေရးထားရာမွာ
ကၽြန္ေတာ္ထည့္ခ်င္တဲ့ပံုရယ္ ေနာက္ HTML file ရယ္ကလမ္းေၾကာင္းတစ္ခုေအာက္(ဖိုဒါေပါ့)မွာရွိေနလို႕ၿဖစ္ပါတယ္။အဲ့လိုပံုနဲ႕ HTML file က ဖိုဒါတစ္ခု
ေအာက္တည္းမွာရွိမေနဘဲတစ္ေနရာဆီမွာရွိေနတယ္ဆိုရင္ေတာ့တစ္မ်ိဳးေၿပာင္းေရးရပါမယ္။အခု ဥပမာ ကၽြန္ေတာ္ကပံုကို images ဆိုတဲ့ဖိုဒါတစ္ခုဖြဲ႕
လိုက္မယ္။အဲ့ထဲထည့္လုိက္မယ္ဆိုပါစို႕ အခုအေၿခအေနႏွစ္မ်ိဳးၿဖစ္သြားၿပီ ကၽြန္ေတာ္ထည့္ခ်င္တဲ့ပံုက images Folder ထဲေရာက္ေနၿပီ ကၽြန္ေတာ့္ရဲ႕ HTML file ကအၿပင္မွာရွိေနတယ္ အဲ့လိုအေၿခအေနမွာေနာ္ ပံုထည့္ခ်င္တဲ့အတြက္ ခုနလိုေရးလို႕မရေတာ့ဘူး ဆိုလိုတာက
<img src="img03.jpg"> ဆိုၿပီးေရးလို႕မရေတာ့ဘူးေရးလိုက္ရင္ ပံုကလမ္းေၾကာင္းတစ္ခုတည္းေအာက္မွာရွိမေနတဲ့အတြက္ေပၚမွာမဟုတ္ေတာ့ဘူး
ဒီေတာ့ဒီလိုေရးပါမယ္။ <img src="images/img03.jpg"> images/ ဆိုတာ images Folder ကိုလမ္းေခၚတာပါ အဲ့ဖိုဒါထဲကမွ ခုနေရႊ႕လိုက္တဲ့ img03.jpg ပံုကိုလမ္းေခၚလိုက္တာပါ။ေနာက္အေၿခအေနတစ္မ်ိဳး ဒီတစ္ခါ ပံုကအၿပင္မွာပဲရွိေနမယ္ HTML file က images Folder ထဲမွာဒီလိုေရးမယ္။
<img src="../img03.jpg"> ../ ဆိုတာကဖိုဒါအၿပင္ထြက္မယ္လို႕ဆိုလိုတာပါ။နားရွဳပ္သြားလားမသိဘူး ၿဖည္းၿဖည္းၿခင္းတစ္ခုစီလုပ္ၾကည့္ စမ္းၾကည့္ပါ
နားလည္သြားမွာပါ။image Tag မွာလည္း attribute ေတြရွိပါတယ္အခုပံုရဲ႕ size ကိုကိုယ္လိုသလိုခ်ံဳ ခ်ဲ႕မယ္။

<html>
<head>
<title>Image Link</title>
</head>
<body>

<a href="page2.html"><img src="img03.jpg" width="100px" height="100px"></a>

This is show text!

</body>
</html>
ခုနကုတ္ကိုပဲၿပင္လိုက္ပါ ၿပီးရင္ Save/ Run ၾကည့္လိုက္ပါပံုေသးသြားတာေတြ႕ရပါမယ္။ Width and Height ကိုအေထြထူးရွင္းမၿပေတာ့ပါဘူး

ေနာက္ေန႕မွဆက္ေရးပါဦးမယ္...အခုေတာ့ အိပ္ေတာ့မယ္ဗ်...အခုလိုစိတ္ရွည္ရွည္ေစာင့္ေပးတဲ့ သူမ်ားအားလံုးကို ေက်းဇူးတင္ပါတယ္

Kyi Shaung

02-08-2011, 02:16 PM

Image Align ေတြပါ

top = စာတစ္ေၾကာင္းကို ပံုရဲ႕ ေဘးနားက align မွာ အေပၚဆံုးမွာ ေဖာ္ျပေပးတာပါ။

bottom = သူကေတာ့ default ပါ။ စာသားကို ပံုေအာက္ဘက္မွာ ေဖာ္ျပတာကိုေတြ႕ရပါမယ္။

Middle = စာသားကို ပံုအလယ္မွာ မွာေပးတာပါ။

left = သူကေတာ့ ပံုကို page ရဲ႕ ဘယ္ဘက္ကိုပို႕လိုက္ျပီး စာသားအကုန္လံုးကို ပံုေဘးမွာ ေဖာ္ျပေပးတာပါ။

Right = သူကလည္း Left နဲ႕ အတူတူပါပဲ။ ညာဘက္ကို ပံုေရြ႕သြားျပီ စာသားအားလံုးကို ပံုရဲ႕ ဘယ္ဘက္မွာေဖာ္ျပေပးပါမယ္။

သူ႕ကို <img src="img03.jpg" width="150px" height="150px" align="right"> အဲ့လို align ရဲ႕ေနာက္မွာတစ္ခုၿခင္းစီထည့္ေရးၿပီး စမ္းသပ္ၾကည့္ပါ။အခုဆက္ၿပီးပံုမွာေပၚေနတဲ့(လင့္ခ်ိတ္တုန္းက ပံုမွာအၿပာေရာင္ေဘာင္ေလးေပၚေနတာ)ေဘာင္ေလးကိုမေပၚေအာင္ေရးပါမယ္။

<html>
<head>
<title>Image Link</title>
</head>
<body>

<a href="page1.html"><img src="img03.jpg" border=0></a>
MYiD

</body>
</html

http://img535.imageshack.us/img535/5642/is01.jpg

border မေဖ်ာက္ခင္ကပံုပါ

http://img823.imageshack.us/img823/6849/is02.jpg

ဒါကေတာ့ ေဘာင္္ေဖ်ာက္ၿပီးပံုပါ

Border ဆိုတာကိုသံုးလိုက္ပါတယ္။ border=0 ဆိုရင္ပံုမွာဘာေဘာင္မွမထည့္ဘူးလို႕ဆိုလိုတာပါ 1ဆိုရင္ေတာ့ေဘာင္ေလးၿပန္ေပၚလာတာေတြ႕ရမွာပါ
ဒီေလာက္ဆို ပံုနဲ႕လင့္ခ်ိတ္တာနဲ႕ပတ္သတ္ၿပီးေတာ္ေတာ္ေလးသိသြားေလာက္ပါၿပီ...............

နည္းပညာ(suran)

Website language ဘာသာစကားေရြးရန္

Definition List

Recent Posts

Categories

ကလွစ္ခဲ့ပါ

Pages

နည္းပညာ

Click this photo..........................ဒီပံုကို ကလွစ္ေပးျခင္းျဖင့္ကူညီပါေနာ္