Primer lesson: hypertext markup ဘာသာစကား

Hypertext Markup Language (HTML)

HTML သည် Hypertext Markup Language ကို ကိုယ်စားပြုသည်။ ၎င်းသည် ဝဘ်ဘရောက်ဆာတစ်ခုတွင် ပြသရန် ဒီဇိုင်းထုတ်ထားသော စာရွက်စာတမ်းများအတွက် စံသတ်မှတ်ထားသော ဘာသာစကားဖြစ်သည်။ HTML ကို Cascading Style Sheets (CSS) နှင့် JavaScript ကဲ့သို့သော scripting languages များကဲ့သို့သော နည်းပညာများဖြင့် ကူညီပေးနိုင်ပါသည်။

ဝဘ်၏အခြေခံ

၎င်း၏ အဓိကအချက်မှာ အင်တာနက်သည် ကမ္ဘာနှင့်အဝှမ်း ချိတ်ဆက်ထားသော ကွန်ပြူတာများ၏ ကျယ်ပြန့်သောကွန်ရက်တစ်ခုဖြစ်သည်။ ဤကွန်ရက်နှင့် ကျွန်ုပ်တို့အပြန်အလှန်ဆက်ဆံရာတွင် အဓိကနည်းလမ်းမှာ အင်တာနက်မှတစ်ဆင့် ဝင်ရောက်ချိတ်ဆက်ထားသော ဟိုက်ပါစာသားစာရွက်စာတမ်းစနစ်တစ်ခုဖြစ်သည့် World Wide Web (WWW) မှတဆင့်ဖြစ်သည်။ WWW ၏ အလယ်ဗဟိုတွင် HTML ဖြင့် ရေးသားထားသော စာရွက်စာတမ်းများဖြစ်သည်။ HTML သည် CSS နှင့် JavaScript ကဲ့သို့သော အခြားနည်းပညာများဖြင့် မြှင့်တင်ကာ ပြုပြင်မွမ်းမံထားသည့် ဆိုက်များ၏ အခြေခံဖွဲ့စည်းပုံကို ထောက်ပံ့ပေးသည်။

HTML Documents Structure

HTML စာရွက်စာတမ်းတစ်ခုအား ထောင့်ကွင်းစကွက်များတွင် ထည့်သွင်းထားသော ဒြပ်စင်များဖြစ်သည့် nested tags အစုအဝေးအလိုက် ဖွဲ့စည်းတည်ဆောက်ထားပါသည်။ ဤတက်ဂ်များသည် အကြောင်းအရာကို မည်သို့ပြသရမည်ကို ဝဘ်ဘရောက်ဆာအား ပြောပြသည်။ ရိုးရှင်းသော HTML စာရွက်စာတမ်းတည်ဆောက်ပုံ၏ ဥပမာတစ်ခုမှာ-

 <!DOCTYPE html>
<html>
    <head>
        <title>စာမျက်နှာခေါင်းစဉ်</title>
    </head>
    <body>
        <h1>ဒါက ခေါင်းစီးတစ်ခု</h1>
        <p>ဒါက စာပိုဒ်ပါ။</p>
    </body>
</html>

ဤကုဒ်သည် ခေါင်းစဉ်၊ ခေါင်းစီးနှင့် စာပိုဒ်ပါသော အခြေခံ ဝဘ်စာမျက်နှာကို သတ်မှတ်သည်။

HTML အစိတ်အပိုင်းများနှင့် တဂ်များ

HTML စာရွက်စာတမ်းများကို HTML အစိတ်အပိုင်းများဖြင့် ဖွဲ့စည်းထားသည်။ ဒြပ်စင်တစ်ခုစီကို စတင်တက်ဂ်၊ အချို့အကြောင်းအရာနှင့် အဆုံးတဂ်ဖြင့် ကိုယ်စားပြုသည်။ ဒြပ်စင်တစ်ခု၏ အစနှင့်အဆုံး တဂ်များသည် တူညီသည်၊၊ အဆုံးတဂ်တွင် ဒြပ်စင်အမည်၏ ရှေ့သို့ ရှေ့သို့ မျဉ်းစောင်းတစ်ခု ပါ၀င်သည်မှတပါး၊

ဥပမာအားဖြင့်၊ <code><p></code> tag သည် စာပိုဒ်တစ်ပိုဒ်ကို ဖုံးကွယ်ထားပြီး ၎င်းကို အောက်ပါအတိုင်း ဖွဲ့စည်းထားပါသည်။

 <p>ဤသည်မှာ ဥပမာစာပိုဒ်ဖြစ်သည်။</p>

မတူညီသောဒြပ်စင်များသည် မတူညီသောရည်ရွယ်ချက်များကို ဆောင်ရွက်ပေးသည်။ ဥပမာအားဖြင့်:

<code><h1>...</h1></code> မှ <code><h6>...</h6></code> တဂ်များကို ခေါင်းစဉ်များအတွက် အသုံးပြုပါသည်။
<code><a></code> tag သည် ဟိုက်ပါလင့်ခ်ကို သတ်မှတ်သည်။
<code><img></code> တဂ်သည် စာရွက်စာတမ်းတွင် ပုံတစ်ပုံကို မြှုပ်ထားသည်။

ဂုဏ်တော်

HTML ဒြပ်စင်များတွင် ဒြပ်စင်များနှင့်ပတ်သက်သော နောက်ထပ်အချက်အလက်များကို ပေးဆောင်သည့် အရည်အချင်းများ ရှိနိုင်သည်။ ရည်ညွှန်းချက်များကို ဒြပ်စင်တစ်ခု၏ အစတဂ်တွင် ထည့်သွင်းထားပြီး <code>name="value"</code> ကဲ့သို့သော အမည်/တန်ဖိုးအတွဲများတွင် ပေးလေ့ရှိသည်။

ဥပမာအားဖြင့်၊ ပုံတစ်ပုံကို မြှုပ်နှံရန်အတွက်၊ ကျွန်ုပ်တို့သည် ပုံ၏ URL ကို သတ်မှတ်ရန် <code>src</code> (အရင်းအမြစ်) ရည်ညွှန်းချက်ဖြင့် <code><img></code> တဂ်ကို အသုံးပြုသည်-

 <img src="url to image.jpg" alt="ပုံ၏ဖော်ပြချက်">

<code>alt</code> ရည်ညွှန်းချက်သည် မပြသနိုင်ပါက ပုံအတွက် အခြားစာသားကို ပေးဆောင်သည်။

လင့်ခ်များနှင့် လမ်းညွှန်ချက်များ

<code><a></code> တဂ်ကိုအသုံးပြုခြင်းသည် ဝဘ်၏အပြန်အလှန်ချိတ်ဆက်မှုအတွက် အခြေခံကျသည့် ဟိုက်ပါလင့်ခ်များကို ဖန်တီးပေးသည်။ ဟိုက်ပါလင့်ခ်သည် အခြားဝဘ်စာမျက်နှာ၊ တူညီသောစာမျက်နှာရှိ အခြားကဏ္ဍတစ်ခု သို့မဟုတ် ဒေါင်းလုဒ်လုပ်နိုင်သော ဖိုင်တစ်ခုသို့ လင့်ခ်ချိတ်နိုင်သည်။ ဥပမာအားဖြင့်:

 <a href="https://example.com">Example.com</a> ကို ဝင်ကြည့်ပါ။

၎င်းသည် <code>https://example.com</code> သို့ လင့်ခ်တစ်ခုကို ဖန်တီးပေးသည်။

စာရင်းများ

HTML သည် စာရင်းများကို ဖန်တီးရန်အတွက် အစိတ်အပိုင်းများကို ပံ့ပိုးပေးသည်။ စာရင်း၏ အဓိက အမျိုးအစား နှစ်မျိုးရှိသည်။

ပစ္စည်းများ၏ အစီအစဥ်မှာ သိသာထင်ရှားခြင်းမရှိသော အစီအစဥ်မရှိသောစာရင်းများ (<code><ul></code>)။ အစီအစဥ်မရှိသောစာရင်းရှိပစ္စည်းများကို ကျည်ဆန်များဖြင့် အမှတ်အသားပြုထားသည်။
မှာယူထားသောစာရင်းများ (<code><ol></code>)၊ မှာယူထားသောစာရင်းရှိပစ္စည်းများကို နံပါတ်တပ်ထားပါသည်။

စာရင်းရှိအရာတစ်ခုစီကို <code><li></code> (list item) တဂ်အတွင်းတွင် ထည့်သွင်းထားသည်။

HTML5

HTML5 သည် မာလ်တီမီဒီယာနှင့် အပြန်အလှန်အကျိုးပြုသော စာရွက်စာတမ်းများအတွက် ခေတ်မီလိုအပ်ချက်များကို ထင်ဟပ်စေသည့် အင်္ဂါရပ်အသစ်များစွာကို မိတ်ဆက်ပေးသည့် စံ၏နောက်ဆုံးဆင့်ကဲပြောင်းလဲမှုဖြစ်သည်။ ၎င်းတို့တွင် ဖွဲ့စည်းပုံဆိုင်ရာ အစိတ်အပိုင်းအသစ်များ (<code><header></code>၊ <code><footer></code>၊ <code><article></code>၊ <code><section></code>) ပုံဆွဲရန်အတွက် ဂရပ်ဖစ်ဒြပ်စင်များ (<code><canvas></code>၊ အရွယ်အစားကြီးနိုင်သော vector ဂရပ်ဖစ်အတွက် <code><svg></code>) နှင့် မီဒီယာဒြပ်စင်များ (<code><audio></code> နှင့် <code <video></code>)။

Semantic HTML

Semantic HTML သည် ဝဘ်စာမျက်နှာများရှိ အချက်အလက်များ၏ အဓိပ္ပါယ် သို့မဟုတ် အဓိပ္ပါယ်ကို အားဖြည့်ရန်အတွက် HTML markup ကို အသုံးပြုခြင်းကို ရည်ညွှန်းသည်။ ဒြပ်စင်များ၏ပုံသဏ္ဍာန် သို့မဟုတ် ပြုမူပုံတို့ကို အဓိပ္ပါယ်ဖွင့်ဆိုခြင်းထက် (၎င်းသည် CSS နှင့် JavaScript အတွက် အလုပ်ဖြစ်သည်)၊ အဓိပ္ပါယ်ရှိသော HTML သည် ဖွဲ့စည်းပုံနှင့် အကြောင်းအရာအမျိုးအစားကို တိကျစွာဖော်ပြသည်။ ဥပမာအားဖြင့်၊ <code><article></code> တဂ်တစ်ခုသည် အတွင်းမှ အကြောင်းအရာသည် ဆောင်းပါးတစ်ခုဖြစ်ကြောင်း ညွှန်ပြနေချိန်တွင် <code><nav></code> တဂ်သည် လမ်းညွှန်မီနူးကို ကိုယ်စားပြုသည်။

semantic HTML ကိုအသုံးပြုခြင်းသည် ဝဘ်အကြောင်းအရာ၏ ဝင်ရောက်နိုင်မှုနှင့် ရှာဖွေနိုင်မှုကို ပိုမိုကောင်းမွန်စေပြီး ၎င်းကို ပိုမိုအသုံးပြုနိုင်စေပြီး ရှာဖွေတွေ့ရှိနိုင်စေသည်။

နိဂုံး

HTML သည် ဝဘ်စာမျက်နှာများအတွက် အခြေခံဖွဲ့စည်းပုံကို ပံ့ပိုးပေးသည့် World Wide Web ၏ အခြေခံနည်းပညာတစ်ခုဖြစ်သည်။ တဂ်များ၊ အရည်အချင်းများနှင့် ဒြပ်စင်များကို အသုံးပြုခြင်းအားဖြင့် HTML သည် ဖွဲ့စည်းတည်ဆောက်ထားသော စာရွက်စာတမ်းများကို ဖန်တီးနိုင်စေပါသည်။ HTML ကို နားလည်ပြီး အသုံးချခြင်းဖြင့်၊ ရိုးရှင်းသော စာသားစာရွက်စာတမ်းများမှသည် ရှုပ်ထွေးသော အပြန်အလှန်တုံ့ပြန်မှုရှိသော မာလ်တီမီဒီယာ အတွေ့အကြုံများအထိ ဝဘ်ပေါ်တွင် ဝင်ရောက်နိုင်သော အကြောင်းအရာများစွာကို ဖန်တီးနိုင်သည်။ ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုအတွက် အခြေခံအုတ်မြစ်အနေဖြင့်၊ ဝဘ်အတွက် ဒီဇိုင်းဆွဲရန် သို့မဟုတ် တီထွင်ဖန်တီးလိုသူတိုင်းအတွက် HTML ကို ကျွမ်းကျင်ပိုင်နိုင်စွာ ကျွမ်းကျင်ရန် လိုအပ်ပါသည်။

hypertext markup ဘာသာစကား