HTML ဆိုတာဘာလဲ။
HTML သည် H yper T ext M arkup L anguage ကို ကိုယ်စားပြုသည်။
HTML သည် ဝဘ်စာမျက်နှာများအတွက် စံသတ်မှတ်ထားသော ဘာသာစကားဖြစ်သည်။
HTML ဒြပ်စင် များသည် HTML စာမျက်နှာများ၏ တည်ဆောက်မှုတုံးများဖြစ်သည်။
HTML အစိတ်အပိုင်းများကို <> တဂ်များ ဖြင့် ကိုယ်စားပြုသည်။
HTML အစိတ်အပိုင်းများ
HTML ဒြပ်စင်တစ်ခုသည် စတင် တက်ဂ်တစ်ခုနှင့် အကြားရှိ အကြောင်းအရာပါရှိသော အဆုံး တဂ်တစ်ခုဖြစ်သည်။
<h1>ဒါက ခေါင်းစီးတစ်ခု</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
HTML အရည်အချင်းများ
- HTML ဒြပ်စင်များတွင် အရည်အချင်းများ ရှိနိုင်ပါသည်။
- ရည်ညွှန်းချက်များ သည် ဒြပ်စင်နှင့်ပတ်သက်သော နောက်ထပ်အချက်အလက်များကို ပေးဆောင်သည်။
- ရည်ညွှန်းချက်များသည် charset="utf-8" ကဲ့သို့သော အမည်/တန်ဖိုးအတွဲများဖြင့် လာပါသည်။
ရိုးရှင်းသော HTML စာရွက်စာတမ်း
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
နမူနာရှင်းပြထားပါတယ်။
HTML ဒြပ်စင်များသည် HTML စာမျက်နှာများ၏ တည်ဆောက်မှုတုံးများဖြစ်သည်။
<!DOCTYPE html>ကြေငြာချက်သည် ဤစာရွက်စာတမ်းကို HTML5 အဖြစ် သတ်မှတ်သည် ။<html>ဒြပ်စင်သည် HTML စာမျက်နှာတစ်ခု၏ အမြစ်ဒြပ်စင်ဖြစ်သည် ။- ရည်ညွှန်းချက်သည် စာရွက်စာတမ်း ၏
langဘာသာစကားကို သတ်မှတ်သည်။ <meta>ဒြပ်စင်တွင် စာရွက်စာတမ်းနှင့်ပတ်သက်သည့် မက်တာအချက်အလက်ပါရှိသည် ။charsetရည်ညွှန်းချက်သည် စာရွက်စာတမ်းတွင် အသုံးပြုသည့် စာလုံးအစုံကို သတ်မှတ်သည် ။<title>ဒြပ်စင်သည် စာရွက်စာတမ်းအတွက် ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည် ။<body>ဒြပ်စင်တွင် မြင်နိုင်သော စာမျက်နှာ အကြောင်းအရာ ပါရှိသည် ။<h1>ဒြပ်စင်သည် ကြီးမားသော ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည် ။<p>ဒြပ်စင်သည် စာပိုဒ်တစ်ခုကို သတ်မှတ်သည် ။
HTML စာရွက်စာတမ်းများ
HTML စာရွက်စာတမ်းအားလုံးသည် စာရွက်စာတမ်းအမျိုးအစား ကြေငြာချက်ဖြင့် စတင်ရပါမည် <!DOCTYPE html>။
HTML Document သည် သူ့ဘာသာသူ အစ <html>ပြုပြီး အဆုံးသတ်သည် </html>။
HTML Document ၏ မြင်နိုင်သော အပိုင်းသည် <body>နှင့် </body>.
HTML Document Structure
အောက်တွင် HTML စာရွက်စာတမ်း (HTML စာမျက်နှာတစ်ခု) ကို ပုံဖော်ခြင်းဖြစ်သည်-
မှတ်ချက်- <body> ကဏ္ဍ (အထက်အဖြူရောင်ဧရိယာ) အတွင်းရှိ အကြောင်းအရာကိုသာ ဘရောက်ဆာတစ်ခုတွင် ပြသထားသည်။
HTML ခေါင်းစီးများ
HTML ခေါင်းစီး <h1>များကို <h6>tags များနှင့် သတ်မှတ်သည်။
<h1>အရေးကြီးဆုံး ခေါင်းစဉ်ကို သတ်မှတ်သည်။ <h6>အရေးကြီးဆုံးခေါင်းစဉ်ကို သတ်မှတ်သည်-
ဥပမာ
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML စာပိုဒ်များ
HTML စာပိုဒ် <p>များကို တဂ်များဖြင့် သတ်မှတ်သည်-
ဥပမာ
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML လင့်ခ်များ
HTML လင့်ခ် <a>များကို တဂ်များဖြင့် သတ်မှတ်သည်-
ဥပမာ
<a href="https://www.w3schools.com">This is a link</a>
လင့်ခ်၏ ဦးတည်ရာကို ရည်ညွှန်းချက်တွင် hrefသတ်မှတ်ထားသည်။
HTML ပုံများ
HTML ပုံများကို <img>တဂ်များဖြင့် သတ်မှတ်သည်။
အရင်းအမြစ်ဖိုင် ( src) ၊ အစားထိုးစာသား ( alt)
widthနှင့် heightရည်ညွှန်းချက်များအဖြစ် ပံ့ပိုးပေးသည်-
ဥပမာ
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
HTML ခလုတ်များ
HTML ခလုတ်များကို <button>တဂ်များဖြင့် သတ်မှတ်သည်-
ဥပမာ
<button>Click me</button>
HTML စာရင်းများ
HTML စာရင်းများကို <ul>(အမှာစာမထားသော/ကျည်ဆန်စာရင်း) သို့မဟုတ်
<ol>(မှာယူထားသော/နံပါတ်တပ်ထားသောစာရင်း) တဂ်များဖြင့် သတ်မှတ်ပြီး၊ နောက်တွင် <li>
တဂ်များ (စာရင်းအရာများ)-
ဥပမာ
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML ဇယားများ
<table>HTML ဇယားကို tag တစ်ခုဖြင့် သတ်မှတ်သည် ။
ဇယားတန်း <tr>များကို တဂ်များဖြင့် သတ်မှတ်သည်။
ဇယားခေါင်းစီး <th>များကို တဂ်များဖြင့် သတ်မှတ်သည်။ (ပုံမှန်အားဖြင့် ရဲရင့်ပြီး ဗဟိုပြုသည်)။
ဇယားဆဲလ်များ (ဒေတာ) ကို <td>တဂ်များဖြင့် သတ်မှတ်သည်။
ဥပမာ
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML ပရိုဂရမ်ရေးခြင်း။
HTML ဒြပ်စင်တိုင်းတွင် attribute များ ရှိ နိုင်ပါသည်။
ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုနှင့် ပရိုဂရမ်ရေးသားခြင်းအတွက် အရေးကြီးဆုံးသော အရည်အချင်းများသည် id နှင့် အတန်းအစားဖြစ်သည်။ ဤအရည်အချင်းများကို ပရိုဂရမ်အခြေခံ ဝဘ်စာမျက်နှာ ကိုင်တွယ်ဖြေရှင်းရန် မကြာခဏအသုံးပြုသည်။
| ဂုဏ်ရည် | ဥပမာ |
|---|---|
| အိုင်ဒီ | <table id = "table01" |
| အတန်း | <p class ="normal"> |
| စတိုင် | <p style ="font-size:16px"> |
| ဒေတာ- | <div data -id="500"> |
| onclick ပါ။ | <input onclick ="myFunction()"> |
| မြူးမြူးကြွကြွ | <a onmouseover = "this.setAttribute('style','color:red')"> |
HTML ကျူတိုရီရယ် အပြည့်အစုံ
ဤသည်မှာ HTML ၏ အတိုကောက်ဖော်ပြချက်ဖြစ်ပါသည်။
HTML သင်ခန်းစာအပြည့်အစုံအတွက် W3Schools HTML Tutorial သို့သွားပါ ။
HTML tag အပြည့်အစုံကို ကိုးကားရန်အတွက် W3Schools Tag Reference သို့ သွားပါ ။