This is Header
This is normal text.
အထက္ပါအတုိင္း ျမင္ေတြ႕ႏုိင္ရန္ notepad ထဲမွာ ေအာက္ပါအတုိင္း႐ိုက္လိုက္ပါ။
<html>
<head>
<title> Example Of Header </title>
</head>
<body>
<h1> This is Header </h1>
This is normal text Page
HTML By Saturngod
</body>
</html>
အဲဒီ code ေလးကို notepad ထဲမွာ ထည့္ေရးပါ။ ျပီးေတာ့ run ၾကည့္လိုက္ပါ။ အခုလို ျမင္ရပါလိမ့္မယ္။ Head Tag က h1 ကေန h6 အထိ ရိွပါတယ္။ နံပါတ္ႀကီး ေလေလ ေသးသြားေလေလပဲ။ h6 ဆို အေသးဆံုးကို ေရာက္သြားျပီ။ ကဲ လက္ေတြ႕စမ္းၾကည့္ရေအာင္။ notepad ထဲမွာ ေအာက္မွာ ျပထားတဲ့အတုိင္း ရိုက္ျပီး save လုပ္လိုက္။ ျပီးရင္ ဖြင့္ၾကည့္လိုက္ရင္ ေတြ႕ရပါ လိမ့္မယ္။
<html>
<head>
<title> Example </title>
</head>
<body>
<h1> H1 </h1>
<h2>H2</h2>
<h3> H3 </h3>
<h4> H4 </h4>
<h5> H5 </h5>
<h6> H6 </h6>
</body>
</html>
အခုဆို html အေၾကာင္းနည္းနည္း နားလည္လာ ေလာက္ပါျပီ။ တကယ္ေတာ့ မခက္ပါဘူး။ ဒါကအစပဲ ရိွပါေသးတယ္။ ဒီေလာက္ေလးနဲ႔တင္ စာေတြပဲပါတဲ့ page တစ္ခု ေရးလို႔ ရေနပါျပီ။ ဒါေပမယ့္ လိုအပ္တာေတြ ရိွေသးတာေပါ့။ အခုဆက္ျပီး bold ၊ italic ၊ underline လုပ္ပံုေလးေတြ ဆက္ေျပာပါမယ္။ လြယ္ပါတယ္။
Line Break
HTML မွာ စာတစ္ေၾကာင္း ေအာက္ကုိ ဆင္းခ်င္ ရင္ေတာ့ <br/> ကို သံုးပါတယ္။ သူ႕မွာ close tag မပါ ဘူး။ <br/> ပဲေရးေရး <br> ပဲေရးေရးရပါတယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
First Line<br/>Second Line<br>Third Line
</body>
</html>
Bold, ,, , Italic , Underline Tag
bold မို႕လို႕ ကြၽန္ေတာ္တို႕ေတြ <b> ကို သံုးပါ မယ္။ ေနာက္ျပီး italic မို႕လို႕ <i> ေပါ့။ ဒါဆိုရင္ Underline က ဘာလဲဆိုရင္ သိၿပီးသားေလာက္ပါ။ ကြၽန္ေတာ္တို႔ေတြ <u> ကို သံုးပါမယ္။ အဲဒါကို notepad ထဲမွာ ဒီလိုေရးျပီး run လိုက္ရင္ ရပါတယ္။
<html>
<body>
<b>This is bold</b> <br/>
<i>This is italic</i> <br/>
<u>This is underline</u> <br/>
</body>
</html>
Bold လုပ္မယ္။ ေနာက္ျပီး အဲဒါကို underline သားမယ္။ ဒါမွမဟုတ္ italic လုပ္မယ္။ အဲလိုမ်ဳိး လုပ္ခ်င္ တယ္။ ရပါတယ္။ tag ေတြထဲမွာ tag ေတြ ထည့္လိုက္ ေပါ့။ ဒီလိုထည့္လို႔ ရပါတယ္။
<i><b>This is bold italic </b></i>
<u><i><b>This is bold italic </b></i></u>
အဲလိုမ်ဳိး ေရးလို႔ ရပါတယ္။ တခ်ဳိ႕လူေတြက ေမး တတ္တယ္။
<i> နဲ႕စမွ ရမွာလား။ ဒီလိုတိုင္း အစဥ္တိုင္းေရးမွ ရမွာလား။ ေနာက္ျပီး <b><i></b></i> အဲလိုမ်ဳိး ေတြေကာ ပိတ္လို႔ မရဘူးလား။
ဘာနဲ႔ စစရပါတယ္။ အစဥ္တိုင္းမဟုတ္ပဲ <b><i> This is bold italic </i></b> လို႕ေရးလည္းျဖစ္ပါတယ္။ ေနာက္ျပီး tag အဖြင့္ေတြ အပိတ္ေတြက ၾကိဳက္သလို ျဖစ္ေနလို႔ ရပါတယ္။ ဒါေပမယ့္ structure က်က်ေလး။ ပံုစံက်က်ေလး ျဖစ္ေနရင္ ေကာင္းတာေပါ့။ ေနာက္မို႕ဆို code ကို ျပန္ဖတ္ရခက္တာေပါ့။
Pre Tag
ကြၽန္ေတာ္တို႕ေတြ စာတစ္ေၾကာင္းဆင္းရမွာ မႀကိဳက္ဘူး။ Enter ေခါက္လိုက္ရံုနဲ႔တင္ တစ္ေၾကာင္း ဆင္းခ်င္တယ္။ အလြယ္ဆံုး နည္းလမ္းကေတာ့ dream weaver သံုးလိုက္ျခင္းပဲ။ အဲဒါဆိုရင္ေတာ့ HTML နားလည္မွာ မဟုတ္ေတာ့ဘူး။
ေနာက္တစ္နည္းကေတာ့ <pre> ပါ။ ဒါေပမယ့္ သူက font ပံုစံေျပာင္းသြားတယ္။ အဲဒါက ကိစၥ မရိွပါ ဘူး။ ေနာက္ပိုင္း font ေတြ ဘယ္လို ေျပာင္းရလဲဆိုတာ သိလာရင္ လာျပင္လုိက္လို႔ ရပါတယ္။ ေနာက္ၿပီး <pre> မွာ သူက tab ေခါက္ထားတာေတြ အစသိပါတယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<pre>Pre Tag, Now Enter
Now Tab Tab
</pre>
</body>
</html>
Paragraph Tag
ကြၽန္ေတာ္တို႔ေတြ စာေတြကို paragraph ပံုစံ ေရးခ်င္တယ္။ စာပိုဒ္ေတြနဲ႔ ေရးမယ္ေပါ့။ ဒါဆိုရင္ <p> ကို သံုးလို႔ရပါတယ္။ သူက အပိတ္ tag မပါလည္း ရပါ တယ္။ ထည့္ရင္ေတာ့ ပိုေကာင္းတာေပါ့။
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly used to view or edit text files. A text file is a file type typically identified by the .txt file name extension.</p>
<b> How do I change the font style and size?</b>
<p>Changes to the font style and size affect all the text in the document.<br/>
Click the Format menu, and then click Font.<br/>
Make your selections in the Font, Font style, and Size boxes.<br/>
An example of how your font will look appears under Sample.<br/>
When you are finished making font selections, click OK.<br></p>
</body>
</html>
Horizonal Line
ကြၽန္ေတာ္တို႔ေတြ horizonal မ်ဥ္းသားခ်င္တဲ့အခါ မွာ သံုးလို႔ ရပါတယ္။ သံုးပံုသံုးနည္းကေတာ့ <hr> ပါပဲ။ close tag မပါပါဘူး။
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly used to view or edit text files. A text file is a file type typically identified by the .txt file name extension. </p>
<hr>
<h1> How do I change the font style and size?</h1>
<p>Changes to the font style and size affect all the text in the document.<br/>
Click the Format menu, and then click Font.<br/>
Make your selections in the Font, Font style, and Size boxes.<br/>
An example of how your font will look appears under Sample.<br/>
When you are finished making font selections, click OK.<br></p>
</body>
</html>
အထက္ပါ code ကို run လိုက္ရင္ ဒီလိုျမင္ ရမယ္။ အဲမွာ <hr> ထည့္ထားတဲ့ေနရာက line ေလးတား ထားတာကို ျမင္ရပါလိမ့္မယ္။
Source : Link
No comments:
Post a Comment
ေဆာ႔၀ဲေတြ update လုပ္ခိုင္းလွ်င္မလုပ္ပါနွင္႔။