ကျွန်တော်မှာ html ဖိုင်တစ်ခုရပြီဆိုတော့ html ဖိုင်တစ်ခုရဲ့ တည်ဆောက်ပုံကို မျှဝေမှာဖြစ်ပါတယ်။ အခု ကျွန်တော်မှာရှိတဲ့ html ရဲ့ version က html 5 ဖြစ်ပါတယ်။ html မှာလည်း version ပေါ်မူတည်ပြီး ပါဝင်တဲ့ html elements တွေကွဲပြားပါတယ်။
html ဖိုင်တစ်ခုမှာ အခြေခံအားဖြင့် (၂) ပိုင်းရှိပါတယ် head နဲ့ body ဆိုပြီးရှိပါတယ်။ head ပိုင်းမှာ ပါဝင်တဲ့ html element တွေက browser မှာ display မလုပ်ပေမယ့် browser တွေကိုဖြစ်စေ၊ အောက် body ထဲမှာပါတဲ့ elements တွေကိုဖြစ်စေ အကူအညီပေးဖို့ ထည့်သွင်းပါတယ်။
အခုရရှိလာတဲ့ html မှာကြည့်ရင် head ထဲမှာ meta နဲ့ title ဆိုတဲ့ element နှစ်ခုကိုတွေ့ရမှာပါ။ title ကတော့ လက်ရှိ ဝက်စာမျက်နှာရဲ့ ခေါင်းစဉ်ကိုပြောပေးပါတယ်။ meta က လက်ရှိဝက်စာမျက်နှာကို ဖော်ပြတဲ့ browser တွေကို ဘယ်လိုဖော်ပြပေးရမယ် ပြောပေးသလို search engine တွေ၊ web service တွေကိုလည်း လက်ရှိဝက်စာမျက်နှာရဲ့ဖော်ပြထားတဲ့ကြောင်းအရာကိုလည်းပြောပေးပါတယ်။ meta က display ပိုင်းမှာမပါပေမယ့် system ပိုင်းတွေမှာအကောင်းဆုံး အလုပ်လုပ်ပါတယ်။
နောက်တစ်ခုက body ပိုင်းမှာရှိတဲ့ html element တွေကို support ပေးတဲ့ languange တွေကိုလည်း head ပိုင်းမှာထည့်သွင်းပါတယ်။ ဥပမာ CSS။
နောက်တစ်ပိုင်းက html ဖိုင်တစ်ခုရဲ့ အဓိကအပိုင်းဖြစ်တဲ့ body ပါ။ body မှာ အဓိကဖော်ပြချင်တဲ့ အချက်အလက် (content) တွေကို html element တွေသုံးပြီး တည်ဆောက်တဲ့အပိုင်းဖြစ်ပါတယ်
ကဲအခုလက်တွေ့ တည်ဆောက်ကြည့်ရအောင်ဗျာ
အခုကျွန်တော် လိုချင်တဲ့အချက်အလက်တွေဖော်ပြနိုင်ဖို့အတွက် body tag အထဲမှာ စတင်ရေးပါမယ်။ body tag ထဲမှာအောက်ဖော်ပြပါအတိုင်းရေးသားလိုက်ပါမယ်။
<body>
Hello HTML
</body>
ရိုက်ထည့်ပြီရင် save လိုက်ပါ။
အခု index.html ကို browser တစ်ခုခုနဲ့ဖွင့်ကြည့်လိုက်မယ်ဆိုရင် Hello HTML ကိုတွေ့ရပါမယ်။ သို့သော်လည်း အခုလို Hello HTML ဆိုတဲ့ plain text ကို body tag ထဲမှာတိုက်ရိုက်ရေးတာက ရေးနည်းမမှန်ပါဘူး။ ဘာလို့ဆိုတော့ မိမိဖော်ပြတဲ့ plain text က ဘာလဲဆိုတာကို browser သိအောင်ပြောဖို့လို့ပါတယ်။ သိအောင်ပြောဖို့အတွက်လည်း သင့်တော်ရာ html element ကိုသုံးပေးရပါတယ်။ အခု ရေးထားတဲ့ Hello HTML ကို ခေါင်းစဉ်အနေဖြင့်ဖော်ပြစေချင်ရင်
<h1>Hello HTML</h1>
လို့ရေးရပါတယ်။ ခေါင်စဉ်မဟုတ်ဘူး သာမန်စာပုဒ်အနေနဲ့ပဲဖော်ပြစေချင်ရင်တော့
<p> Hello HTML</p>
လို့ရေးရပါတယ်။
အထက်ဖော်ပြပါ html element (၂) ခုကို တစ်လှည့်စီသုံးပြီး Save ပြီးလျှင် index.html ဖိုင်ကို browser မှာပြန်ဖွင့်ကြည့်လိုက်ပါ။ အစောကဖွင့်ထားပြီးသားရှိရင်တော့ refresh လုပ်ကြည့်လိုက်ပါ။ ဖော်ပြပုံကွဲလွဲတာကိုတွေ့ရမှာဖြစ်ပါတယ်။