HTML Basic with Examples
wailynnooIntroduction
Html ဆိုတာ tag တွေနဲ့ ဖွဲ့စည်းထားတဲ့ နည်းပညာတစ်ခုဖြစ်ပါတယ်။
Html ကိုရေးနိုင်ဖို့ အတွက် tag တွေရဲ့ဖွဲ့စည်းပုံကို သေသေချာချာ လေ့လာထားရပါမယ်။
Html ကိုလေ့လာဖို့အတွက် window နဲ့ အသင့်ပါလာတဲ့ Notepad နဲ့ Internet Explorer ရှိရင်ရပါပြီ။
Tag and Element
ကျွန်တော်တို့ဟာရိုးရိုး စာသားတွေ ပုံတွေ video တွေကို browser မှာ ကျွန်တော်တို့လိုချင်တဲ့ပုံစံ ပေါ်ဖို့ Html tag တွေကြားထဲမှာထည့်သွင်းရေးသား ရပါတယ်။ browser မှာပေါ်မှ ကျွန်တော်တို့ရဲ့ စာသားတွေ ပုံတွေ video တွေကို internet ကနေကြည့်လို့ရမှာပေါ့။
ဥပမာ။ ။
<b>Bold text</b>
ဒီနေရာမှာ Bold text က browser screen မှာပေါ်မယ့်စာသားပါ။ <b> </b> တော့ browser မှာမပေါ်ပါဘူး။ သူက Html tag ဖြစ်ပါတယ်။
သူက သူ့ကြားက Bold text စာသားကို browser screen မှာ ပေါ်တဲ့အခါ စာလုံးမည်းဖြစ်အောင် လုပ်ဆောင်ပေးပါတယ်။
Html tag တွေမှာ များသောအားဖြင့် အဖွင့် tag <b> နဲ့ အပိတ် tag </b>ပါပါတယ်။ ကိုယ် effect ဖြစ်စေချင်တဲ့စာသားကို ဒီနှစ်ခုကြားမှာ ထားရေးပေးရပါတယ်။ သူ့ကိုတော့ element content လို့ခေါ်ပါတယ်။<b>Bold text</b> တစ်ခုလုံးကို Html element တစ်ခုအဖြစ်သတ်မှတ်ပါတယ်။
<b>How to start Html</b>
<b>Basic structure</b>
<html>
<head>
<title>This text will appear in the browser title bar.</title>
</head>
<body>
<b>Hello! </b>I am body text.
</body>
</html>
ဒီ structure မှာ ပထမဆုံး <html> ဆိုတာကတော့ browser ကို html code စပြီဖြစ်ကြောင်းပြောလိုက်တာပါ။ သူ့ရဲ့အပိတ်ကတော့ coding ရဲ့နောက်ဆုံးမှပြန်ပိတ်ပေးရ ပါတယ်။
အခြား tag တွေအားလုံးသူ့ကြားထဲမှာ ရှိရပါတယ်။
<head> tag ထဲက အရာတွေကတော့ browser screen ပေါ်မှာမဟုတ်ပါဘူး။ သူ့ထဲမှာရှိတဲ့ <title> tag ကြားထဲက စာသားတွေဟာ browser ရဲ့ title bar ပေါ်မှာပေါ်မှာဖြစ်ပါတယ်။
သူ့ထဲမှာရေးတဲ့အခြား tag တွေရှိပါသေးတယ်။ နောက်ပိုင်းရောက်မှာသေးစိတ်လေ့လာကြပါမယ်။
<body> tag ထဲက ဟာတွေကတော့ browser screen မှာ ကိုယ်ပေါ်စေချင်တဲ့စာသားတွေပေါ့။
အဲဒီအထဲကမှ <b> tag ကြားမှာရှိတဲ့ စာသားတွေက bold အနေနဲ့ပေါ်ပါလိမ့်မယ်။
ဒီ html code လေးကို notepad မှာရိုက်လိုက်ပါ။ notepad ကိုဖွင့်တဲ့နည်းကတော့ Window key နဲ့ r key ကိုတွဲနှိပ်လိုက်ပါ။ ပေါ်လာတဲ့ box ကလေးရဲ့ open ဆိုတဲ့ text box လေးထဲမှာ notepad လို့ရိုက်ထည်ပြီး Enter ခေါက်လိုက်ပါ။ notepad ပွင့်လာပါလိမ့်မယ်။
code တွေရိုက်ပြီးရင် save လုပ်ရပါမယ်။ save လုပ်တဲ့အခါမှာ notepad ကဲ့ extension နဲ့ မ save ပါနဲ့ .html ဆိုပြီး save ရပါမယ်။ ဒါဆိုရင်ကျွန်တော်တို့ save လုပ်လိုက်တဲဖိုင်လေးကို explorer ပုံလေးနဲ့သိမ်းထားတာတွေ့ရပါလိမ့်။ အဲဒီ ဖိုင်လေးကို double click ခေါက်လိုက်ပါ။ အဲဒီဆိုရင် Enternet explore ပွင့်လာပြီး
Hello! I am body text.
လို့ browser screen မှာပေါ်လာပါလိမ့်မယ်။