
HTML (HyperText Markup Language)ဆိုတာ ဝဘ်ဆိုဒ်တွေဖန်တီးရာမှာ အခြေခံဖြစ်တဲ့ ဘာသာစကားတစ်ခုဖြစ်တယ်။ HTML ကိုသုံးပြီး ဝဘ်စာမျက်နှာတွေမှာ စာသား (text), ပုံများ (images), link များ, button များ စသည်တို့ကို ပြသနိုင်ပါတယ်။
HTML ကိုမည်သို့နားလည်ရမလဲ?
HTML ကို လွယ်ကူစွာနားလည်နိုင်ရန် အောက်ပါ အဆင့်များအတိုင်း လေ့လာနိုင်ပါတယ်။
1. HTML ၏ အခြေခံဖွဲ့စည်းမှု
HTML သည် tag များဖြင့်ဖွဲ့စည်းထားသည်။ Tag တစ်ခုစလှုပ်ခြင်းနှင့် ပိတ်ခြင်းတို့ဖြင့် အကြောင်းအရာများကို သတ်မှတ်သည်။
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>မင်္ဂလာပါ!</h1>
<p>ဒီမှာ HTML ကို လေ့လာနေပါတယ်။</p>
</body>
</html>
• <!DOCTYPE html> → HTML5 အတွက်အသုံးပြုသော အမိန့်။
• <html> → ဝဘ်စာမျက်နှာအားလုံးကို ထုပ်ပိုးပေးသော tag
• <head> → မျက်နှာဖုံးခေါင်းစဉ် (title) နှင့် metadata များ
• <body> → အဓိကကြည့်ရှုနိုင်သော အကြောင်းအရာများ
• <h1> → ခေါင်းစဉ်အကြီး
• <p> → ပုံမှန်စာသား
2. HTML Tag များနှင့် ၎င်းတို့၏ သုံးစွဲမှု
HTML တွင် အဓိကအသုံးများသော tag များမှာ –
Tag | အသုံးပြုမူ | ဥပမာ |
<h1> to <h6> | ခေါင်းစဉ်များ | <h1>Heading 1</h1> |
<p> | စာပိုဒ် | <p>Hello World</p> |
<a> | Link ထည့်ရန် | <a href=”https://example.com”>Click Here</a> |
<img> | ဓာတ်ပုံထည့်ရန် | <img src=”image.jpg” alt=”Description”> |
<ul> | အမှတ်မဲ့စာရင်း | <ul><li>Item 1</li></ul> |
<ol> | အမှတ်ပေးစာရင်း | <ol><li>Step 1</li></ol> |
<table> | ဇယား | <table><tr><td>Data</td></tr></table> |
<input> | Form အတွက် ထည့်သွင်းမှု | <input type=”text” placeholder=”Enter Name”> |
3. HTML သုံးပြီး အလွယ်တကူ ဝဘ်စာမျက်နှာဖန်တီးနည်း
1. Notepad (Windows) / TextEdit (Mac) / VS Code ကိုဖွင့်ပါ။
2. အထက်ပါ HTML ကို ကူးယူပြီး index.html ဟုသိမ်းပါ။
3. File ကို web browser (Chrome, Firefox) ဖြင့် ဖွင့်ကြည့်ပါ။
4. HTML CSS နှင့် JavaScript နှင့် တွဲသုံးခြင်း
HTML သည် ဝဘ်စာမျက်နှာကို ဖန်တီးပေးသော်လည်း CSS (Design) နှင့် JavaScript (Functionality) တို့ဖြင့် ပိုမိုလှပပြီး interactive ဖြစ်စေနိုင်သည်။
CSS ပေါင်းထည့်ခြင်း (ပုံစံအသွင်အပြင်)
<style>
body {
background-color: lightblue;
text-align: center;
}
</style>
JavaScript ပေါင်းထည့်ခြင်း (လှုပ်ရှားမှုများ)
<script>
function sayHello() {
alert("Hello, Welcome to HTML!");
}
</script>
<button onclick="sayHello()">Click Me</button>
5. HTML တွင် အသုံးဝင်သော အကြံပြုချက်များ
1. Tag များကို မှန်မှန်ကန်ကန် သုံးရန်။
2. ဖိုင်များကို .html ဖြင့် သိမ်းရန်။
3. Browser များတွင် အမြဲစမ်းသပ်ကြည့်ရန်။
4. ပိုမိုမေးမြန်း၍ လေ့လာရန်။
6. HTML သင်ယူရန် အသုံးဝင်သော အရင်းအမြစ်များ
1. W3Schools – HTML ကို အခြေခံမှစ၍ လေ့လာရန်
2. MDN Web Docs – သင်ကြားမှုအတွက် Mozilla Developer Network
3. YouTube မှာ “HTML for Beginners” ဟုရှာဖွေရန်
ဒီအတိုင်းလိုက်လုပ်လျှင် HTML ကိုအလွယ်တကူ သင်ကြားပြီး ဝဘ်ဆိုဒ်များ ဖန်တီးနိုင်ပါမည်။ သင်ရှေးထာသော HTML မေးခွန်းများရှိပါက ဆက်မေးမြန်းနိုင်ပါတယ်။
HTML ကုတ်တွေကို ရေးတဲ့အခါ မြန်မြန်ဆန်ဆန် ရေးချင်သူများအတွက် HTML-Shortcuts လေ့လာရန်
CSS Selectors နဲ့ Pseudo Class အကြောင်း သိလိုသူများအတွက် Learn More ကို နှပ်ပြီးလေ့လာရန်
Font-Size တွေအကြောင်း Font-Family တွေနဲ့ပတ်သက်ပြီး လေ့လာရန်
Color တွေနဲ့ပတ်သက်ပြီး ဆက်လက်လေ့လာရန်