ရိုးရှင်းတဲ့ text editor တစ်ခုကို HTML လေ့လာဖို့အတွက်လိုအပ်ပါတယ်။
Learn HTML Using Notepad or TextEdit
Web စာမျက်နှာတွေကို professional HTML editors တွေသုံးပြီး ပြင်ဆင်ခြင်း၊ ဖန်းတီးခြင်းတွေပြုလုပ်နိုင်တယ်။
သို့ပေမယ့် HTML လေ့လာဖို့အတွက် ရိုးရှင်းတဲ့ text editor (ဥပမာ - Notepad (Windows) or TextEdit (Mac)) တွေကိုသုံးဖို့ အကြံပေးပါတယ်။
ဒီရိုးရှင်းတဲ့ text editor ကိုအသုံးပြုခြင်းက HMTL လေ့လာရန်ကောင်းတဲ့နည်းလမ်းလို့ကျွန်ုပ်တို့ယုံကြည်ပါတယ်။
အောက်ဖော်ပြပါအချက်တွေကိုကြည့်ပြီး Notepad or TextEdit ကိုအသုံးပြုပြီးတော့ ပထမဆုံး web page ကိုစပြီးဖန်တီးကြည့်ကြမယ်။
Step 1 : Notepad ကိုဖွင့်ပါ (Windows OS)
Windows 8 or later :
Screen ကိုဖွင့်ပါ။ (screen ရဲ့ဘယ်ဘက်အောက်ခြေနားမှာရှိတဲ့ windows ပုံစံ icon)
ထို့နောက် Notepad ဆိုပြီးစာရိုက်ရှာပါ။
Windows 7 or earlier:
Start ကိုဖွင့်ပါ။ > Programs file ကိုဖွင့်ပါ။ > Accessories file ကိုဖွင့်ပါ။ > Notepad ကိုဖွင့်ပါ။
Step 1 : TextEdit ကိုဖွင့်ပါ (Mac OS)
Finder ကိုဖွင့်ပါ။ > Applications file ကိုဖွင့်ပါ။ > TextEdit file ကိုဖွင့်ပါ။
Files တွေကို format မှန်မှန်သိမ်းရန်တချို့ preferences တွေကိုပြောင်းပေးရပါတယ်။ Preferences ထဲက > Format ကိုရွေးပါ > ထို့နောက် "Plain Text" ကိုရွေးပါ။
ထို့နောက် "Open and Save" အောက်တွင် "HTML ဖိုင်များကို format လုပ်ထားသောစာသားအစား HTML code အဖြစ်ပြရန်" ("Display HTML files as HTML code instead of formatted text") ဆိုသော box ကိုအမှန်ခြစ်ပေးပါ။
ထို့နောက် code စရေးဖို့အတွက် document အသစ်ကိုဖွင့်ပါ။
Step 2 : HTML code အချို့ရေးပါ
အောက်ဖော်ပြပါ HMTL code တွေကို Notepad ထဲသို့ကူးထည့်ပါ သို့မဟုတ် ရေးပါ။
Example
<!DOCTYPE html><html><body>-
<h1>My First Heading</h1> -
<p>My First Paragraph<p> </body></html>
Step 3 : HTML Page ကိုသိမ်းပါ
ရေးထားတဲ့ HTML file ကို computer ထဲမှာသိမ်းပါ။
File ကိုရွေးပါ။ > Notepad menu ထဲက "save as" ကိုနှိပ်ပါ။
File ကို "index.html" ဟုနာမည်ပေးပါ။ ထို့နောက် UTF-8 ကို encode လုပ်ပေးပါ။ (HTML file အတွက်ပိုကောင်းတဲ့ encoding ဖြစ်ပါတယ်။)
Step 4 : Browser ပေါ်မှာ HTML page ကိုဖွင့်ကြည့်ပါ
သိမ်းထားတဲ့ HTML file ကို ကြိုက်နှစ်သက်ရာ browser မှာဖွင့်ကြည့်ပါ။ (File ကို double click နှိပ်ပြီးဖွင့်ပါ။ OR right click နှိပ်ပြီး "Open with" ကိုရွေးပီးဖွင့်ပါ။)
ရလဒ်ကဒီလိုပုံစံဖြစ်ပါတယ် :
Online Editor နဲ့ ကိုယ်တိုင်လေ့လာကြည့်ပါ။
Online editor နဲ့ HTML code ကိုလေ့လာပြင်ဆင်ပြီး browser မှာရလာတဲ့result ကိုကြည့်ပါ။
Code ကိုမြန်မြန် test လုပ်ရန်အတွက်ဒါဟာအကောင်းဆုံး editor ပါ။ ၎င်းတွင် code များကိုအရောင်များနှင့်ဖော်ပြနိုင်ခြင်း နှင့်အခြားသူများနှင့်အတူ code များကိုသိမ်းဆည်းခြင်းနှင့်မျှဝေခြင်းပြုလုပ်နိုင်ပါတယ်။
Example
<!DOCTYPE html><html><head><body><h1>My First Heading</h1><p>My First Paragraph<p></body></html>
"Try it yourself" button ကိုနှိပ်ပြီး code အလုပ်ဘယ်လိုလုပ်သွားလဲဆိုတာကိုလေ့လာကြည့်ပါ။
No comments:
Post a Comment