Editor တစ်ခုကို ပြင်ဆင်ခြင်း

HTML Code တွေ ရေးဖို့ဆိုရင် Code Editor တစ်ခု မဖြစ်မနေ လိုအပ်ပါတယ်။ Code Editor ဆိုတာ ခင်ဗျားရဲ့ HTML ဖိုင်တွေကို ရေးမယ့်၊ ပြင်မယ့် နေရာလေးပါ — သူက ရိုးရိုး Word processor တွေနဲ့ မတူဘဲ Code တွေကို Raw Text အဖြစ် သေသေချာချာ ကိုင်တွယ်ပေးပါတယ်။

လူသုံးများတဲ့ Editor -

VS Code: အစွမ်းထက်ပြီး အခမဲ့ရတဲ့ code editor ပါ။

HTML ဖိုင်တွေကို Save လုပ်ခြင်း:

HTML ဖိုင်တစ်ခု ဖန်တီးတဲ့အခါမှာ နာမည်ရဲ့အနောက်မှာ .html ဆိုတဲ့ Extension လေးနဲ့ Save ဖို့ သေချာပါစေ။ ဒါမှသာ ခင်ဗျားရဲ့ ကွန်ပျူတာက ‘အော် ဒါဟာ Browser မှာ ဖွင့်ရမယ့် HTML ဖိုင်တစ်ခုပါလား’ ဆိုပြီး သိမှာ ဖြစ်ပါတယ်။

ဥပမာ: index.html

ခင်ဗျားရဲ့ ပထမဆုံး HTML စာမျက်နှာ

ကဲ! ခင်ဗျားရဲ့ ပထမဆုံး HTML စာမျက်နှာလေးကို စပြီး ရေးကြည့်ကြရအောင်! HTML စာမျက်နှာတစ်ခုရဲ့ အခြေခံတည်ဆောက်ပုံက အောက်ပါအတိုင်း ဖြစ်ပါတယ်။

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage created using HTML.</p>
  </body>
</html>

ရှင်းလင်းချက် -

<!DOCTYPE html>: ဒါက document type ကြေညာချက်ဖြစ်ပြီး၊ browser ကို ဒါဟာ HTML5 document တစ်ခုဖြစ်ကြောင်း ပြောပြပါတယ်။
<html>: ဒါက HTML စာမျက်နှာတစ်ခုလုံးအတွက် အဖွင့် tag ပါ။
<head>: စာမျက်နှာရဲ့ meta-information တွေ (ခေါင်းစဉ်၊ stylesheet တွေရဲ့ link) ပါဝင်ပါတယ်။
<title>: Browser ရဲ့ tab မှာပေါ်မယ့် ခေါင်းစဉ်ပါ။
<body>: ခင်ဗျား စာမျက်နှာရဲ့ မြင်ရမယ့် အကြောင်းအရာတွေဖြစ်တဲ့ ခေါင်းစဉ်တွေ၊ စာပိုဒ်တွေ၊ ပုံတွေ၊ link တွေ ထည့်ရမယ့်နေရာပါ။
<h1>: စာမျက်နှာရဲ့ အဓိကခေါင်းစဉ်အတွက် သုံးတဲ့ heading tag ပါ။
<p>: စာသားအကြောင်းအရာတွေ ပြဖို့သုံးတဲ့ paragraph tag ပါ။

Browser တွေက HTML ကို ဘယ်လိုဖတ်သလဲ

Google Chrome, Firefox, ဒါမှမဟုတ် Safari လို Browser တွေက ခင်ဗျားရေးထားတဲ့ HTML code တွေကို ဖတ်ပြီး Webpage တစ်ခုအဖြစ် ပြသပေးပါတယ်။ Browser က အဲဒီ Tag တွေကို User တွေအတွက် မြင်သာတဲ့ ပုံစံအဖြစ် ဘာသာပြန်ပေးလိုက်တာ ဖြစ်ပါတယ်။

ဥပမာအနေနဲ့၊ <h1> tag က စာသားကို အကြီးကြီးနဲ့ bold ဖြစ်အောင်လုပ်ဖို့ browser ကို ပြောပြပြီး၊ <p> tag ကတော့ စာသားကို ပုံမှန်စာပိုဒ်အဖြစ် format ချဖို့ ပြောပြပါတယ်။

Webpage တွေရဲ့ အခြေခံတည်ဆောက်ပုံကို HTML နဲ့ ရေးကြပါတယ်။
<h1>, <p>, <body> လိုမျိုး tag တွေက webpage မှာပါတဲ့ စာတွေ၊ အကြောင်းအရာတွေကို ဘယ်လိုပုံစံနဲ့ပြမလဲဆိုတာ သတ်မှတ်ပေးပါတယ်။
HTML စာမျက်နှာတိုင်းမှာ အဓိက အပိုင်းနှစ်ပိုင်း ရှိပါတယ်။ head က Webpage ရဲ့ အချက်အလက်တွေအတွက်ဖြစ်ပြီး၊ body ကတော့ ကျွန်တော်တို့ မြင်နေရတဲ့ စာတွေ၊ ပုံတွေ ထည့်တဲ့နေရာပါ။
စာမျက်နှာရဲ့ ထိပ်ဆုံးမှာ <!DOCTYPE html> လို့ရေးတာက ဒီစာမျက်နှာဟာ HTML5 version ဖြစ်တယ်ဆိုတာကို browser ကို သိစေချင်လို့ပါ။
Browser (ဥပမာ Chrome, Firefox) တွေက ဒီ HTML code တွေကို ဖတ်ပြီး ကျွန်တော်တို့ မြင်တွေ့နေရတဲ့ webpage ပုံစံအဖြစ် ပြောင်းလဲပြသပေးတာ ဖြစ်ပါတယ်။