Notepad++ မရွိေသးေသာ သူမ်ား http://notepad-plus-plus.org/ မွာ download ရယူႏိုင္ပါတယ္။ HTML ကိုေလ့က်င့္ ရာတြင္ notepad++ ျဖင့္ ေရးသားေလ့က်င့္သြားဖို. တိုက္တြန္းပါတယ္။ HTML ကို စတင္ ေလ့လာသူမ်ား အတြက္ notepad သို. Notepad++ ကအေကာင္းဆံုးပါပဲ။ http://www.w3schools.com တြင္လည္း Adobe Dreamweaver ကဲ့သို. professional HTML editor ေတြအမ်ားၾကီး ရွိေပမယ့္ simple text editor မ်ား ျဖင့္ HTML ေလ့လာျခင္းကို ေကာင္းမြန္တဲ့ နည္းလမ္း အျဖစ္ မွတ္ခ်က္ ေပးထားပါတယ္။
HTML document တစ္ခု ကို ေအာက္ပါ Steps မ်ား အတိုင္း စနစ္တက် ေရးသြားပါမယ္ ...
Step 1
Notepad++ ကိုဖြင့္လိုက္ပါ။ Notepad++ မရွိေသးသူမ်ားက ေတာ့ Start > All Programs > Accessories > Notepad ကိုေရြးျပီး ဖြင့္လိုက္ပါ။Step 2
File menu မွ save as ႏိွပ္ျပီး index.html အမည္ျဖင့္ သိမ္းလိုက္ပါ။ index ေနရာမွာ မိမိၾကိဳက္ႏွစ္သက္ရာ name ကိုေပးႏိုင္ပါတယ္။ name ၏ ေနာက္တြင္ .html ထည့္ေရးေပးမွသာ html file အျဖစ္ သိမ္းေပးမွာပါ။HTML ေရးတိုင္း Save ကို ဦးစြာ လုပ္ထား ေစခ်င္ ပါတယ္။ Syntax မ်ား ေရးျပီးတိုင္း Ctrl+s ကို ႏွိပ္ျပီး အျမဲ save လုပ္သြားလို. ရပါတယ္။ အားလံုးျပီးမွ save လုပ္လ်င္ စိတ္မခ်ရပါဘူး။ ေရးရင္းနဲ. Ctrl+s ကို ႏွိပ္ျပီး အျမဲ save လုပ္သြားျခင္းျဖင့္ အေၾကာင္းအမ်ိဳးမ်ိဳး ေၾကာင့္ ကြန္ပ်ဴတာ Shut down က်သြားခဲ့ရင္ က်ေနာ္တို. အစကေန ျပန္ေရးစရာမလိုေတာ့ပါဘူး။ ေနာက္တစ္ခ်က္က Tag တစ္ခု ေရးျပီးတိုင္း Ctrl+s ကိုႏွိပ္ျပီး Browser မွာ ေျပာင္းလဲသြားမွဳကို reload လုပ္ျပီး တစ္ဆင့္ျခင္းစီ ၾကည့္သြားႏိုင္ပါတယ္။
Step 3
ေအာက္ပါတို.ကို Notepad++ တြင္ ေရးျပီး save လုပ္လိုက္ပါ။<!DOCTYPE html>
<html>
<head>
<title> Basic HTML page </title>
</head>
<body>
<h1> This is heading 1 </h1>
<p>This is first paragraph</p>
<p> This is second paragraph. </p>
<hr>
<h2> This is Heading 2 </h2>
<p>
They are <b> bold </b>, <strong> strong </strong>, <i> italic </i> and
<em> Emphasized </em>
</p>
<p> This is an example of Subscript: H<sub>2</sub>O. </p>
<p> This is an example of Superscript: x<sup>2</sup>. </p>
</body>
</html>
Step 4
Save လုပ္ထားေသာ index.html file ကို Double Click ႏွိပ္ျပီး run ၾကည့္ပါ။ Browser တြင္ ေအာက္ပါအတိုင္း ျမင္ရပါမည္။
က်ေနာ္တို. ေရးသားထားေသာ HTML Tags မ်ား၏ လုပ္ေဆာင္ခ်က္မ်ား ကို ေအာက္မွ ပံုတြင္ ေလ့လာႏိုင္ပါတယ္။
No comments:
Post a Comment