Google Play badge

hypertext markup ဘာသာစကား


သင်ခန်းစာ- Hypertext Markup Language (HTML)

HTML သည် Hypertext Markup Language ကို ကိုယ်စားပြုသည်။ ၎င်းသည် ဝဘ်စာမျက်နှာများကို တည်ဆောက်ရာတွင် အသုံးပြုသည့် အထူးဘာသာစကားတစ်ခုဖြစ်သည်။ ဝဘ်ဆိုက်တစ်ခုကို ဝင်ကြည့်တဲ့အခါ စကားလုံးတွေ၊ ရုပ်ပုံတွေနဲ့ လင့်ခ်တွေကို ပြဖို့အတွက် ကွန်ပျူတာက HTML ကို ဖတ်ပါတယ်။ HTML ကို ဝဘ်ဆိုဒ်တစ်ခု၏ တည်ဆောက်မှုတုံးများအဖြစ် ယူဆပါ။ အိမ်တစ်လုံး သို့မဟုတ် ကားတစ်ခုတည်ဆောက်ရန် Lego အပိုင်းများကို သင်အသုံးပြုသကဲ့သို့၊ ကျွန်ုပ်တို့သည် ဝဘ်စာမျက်နှာတစ်ခုတည်ဆောက်ရန်အတွက် HTML Tag များကို အသုံးပြုပါသည်။

HTML ဆိုတာဘာလဲ။

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

HTML က ဘာကြောင့် အရေးကြီးတာလဲ။

သင်ဝင်ရောက်ကြည့်ရှုသည့် ဝဘ်ဆိုက်တိုင်းသည် HTML ကို တစ်နည်းနည်းဖြင့် အသုံးပြုသည်။ HTML မရှိရင် မင်းကြည့်ဖို့ ဝဘ်စာမျက်နှာတွေ ရှိမှာမဟုတ်ဘူး။ HTML သည် အကြောင်းအရာများကို စုစည်းစေပြီး စာမျက်နှာကို မည်သို့ပြသရမည်ကို ကွန်ပျူတာအား ပြောပြသည်။ ၎င်းသည် အင်တာနက်ကို အလုပ်လုပ်စေသောကြောင့် ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုတွင် ပထမဆုံး သင်ယူသည့်အရာဖြစ်သည်။

HTML Document တစ်ခု၏ အခြေခံဖွဲ့စည်းပုံ

HTML စာရွက်စာတမ်းတစ်ခုတွင် အထူးဖွဲ့စည်းပုံရှိသည်။ ၎င်းသည် <code><!DOCTYPE html></code> ဟုခေါ်သော ကြေငြာချက်ဖြင့် စတင်ပြီး ၎င်းသည် ကွန်ပြူတာကို စာမျက်နှာ HTML ကို အသုံးပြုကြောင်း ပြောပြသည်။ ထို့နောက် စာတမ်းကို အဓိက အပိုင်းနှစ်ပိုင်း ခွဲထားသည်- ဦးခေါင်းနှင့် ခန္ဓာကိုယ်။

အလွန်ရိုးရှင်းသော HTML စာရွက်စာတမ်းသည် ဤကဲ့သို့ ဖြစ်သည်-

<code><!DOCTYPE html>
<html>
<head>
<title>ကျွန်ုပ်၏ ပထမဆုံး ဝဘ်စာမျက်နှာ</title>
</head>
<body>
<p>မင်္ဂလာပါ ကမ္ဘာ။</p>
</body>
</html> </code>

ဤဥပမာတွင်၊ <head> ကဏ္ဍသည် စာမျက်နှာ၏ ခေါင်းစဉ်ကို ပေးဆောင်ပြီး <body> ကဏ္ဍသည် ဖန်သားပြင်ပေါ်တွင် ပေါ်လာသည့် အကြောင်းအရာကို သင်ထည့်သည့်နေရာဖြစ်သည်။

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

HTML သည် ဝဘ်စာမျက်နှာ၏ မတူညီသော အစိတ်အပိုင်းများကို အမှတ်အသားပြုရန် တဂ်များကို အသုံးပြုသည်။ Tag သည် ထောင့်ကွင်းများအတွင်းရှိ စကားလုံးတစ်ခုဖြစ်သည်။ ဥပမာအားဖြင့်၊ <code><p></code> သည် ကွန်ပြူတာအား အောက်ပါအရာသည် စာပိုဒ်တစ်ခုဖြစ်ကြောင်း ပြောပါသည်။ စာပိုဒ်ကို ပြီးသောအခါ၊ အဆုံးကိုညွှန်ပြရန် အပိတ် tag၊ <code></p></code> ကို အသုံးပြုသည်။

HTML တွင် ဒြပ်စင် တစ်ခုတွင် အဖွင့်တက်ဂ်၊ အကြောင်းအရာအချို့နှင့် အပိတ် tag တစ်ခုတို့ ပါဝင်သည်။ ဥပမာအားဖြင့်:

<code><p>ဒါက စာပိုဒ်ပါ။</p></code>

tag တစ်ခုစီသည် အကြောင်းအရာကို မည်သို့ပြသရမည်ကို ဝဘ်ဘရောက်ဆာအား ညွှန်ကြားသည်။

အသုံးများသော HTML Tag

HTML တွင် tag အများအပြားရှိသည်။ အဖြစ်အများဆုံးအရာအချို့မှာ-

HTML အရည်အချင်းများ

ရည်ညွှန်းချက်များသည် HTML ဒြပ်စင်တစ်ခု၏ အပိုအချက်အလက်များကို ပေးဆောင်သည်။ ၎င်းတို့ကို တဂ်၏ထောင့်ကွင်းစကွက်များအတွင်း အဖွင့် tag ထဲသို့ ထည့်ထားသည်။ အသုံးအများဆုံး attribute များသည် image tag နှင့် src နှင့် alt တို့ဖြစ်သည်။

ဥပမာအားဖြင့်၊ ပုံတစ်ခုထည့်ရန်၊ သင်ရေးနိုင်သည်-

<code><img src="picture.jpg" alt="ပုံကောင်း"></code>

ဤတွင်၊ src သည် ရုပ်ပုံဖိုင်ရှိရာ ဘရောက်ဆာအား ပြောပြပြီး alt သည် ပုံ၏ဖော်ပြချက်ကို မပြသနိုင်ပါက ပေးသည်။

ဦးခေါင်းနှင့် ခန္ဓာကိုယ် အပိုင်းများ

HTML Document ကို နှစ်ပိုင်းခွဲထားသည်။

HTML တွင် လင့်ခ်များ ဖန်တီးခြင်း။

လင့်ခ်များသည် သင့်အား စာမျက်နှာတစ်ခုမှ အခြားတစ်ခုသို့ ခုန်ကူးနိုင်သည်။ HTML တွင် <a> tag ကို အသုံးပြု၍ လင့်ခ်များကို ဖန်တီးပါသည်။ tag အတွင်းရှိ attribute href သည် browser အား လင့်ခ်၏ ဦးတည်ရာကို ပြောပြသည်။

ဥပမာအားဖြင့်:

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

သင်ဤလင့်ခ်ကိုနှိပ်လိုက်သောအခါ၊ သင့်ဘရောက်ဆာသည် ဝဘ်ဆိုဒ် example.com ကိုဖွင့်လိမ့်မည်။

ဝဘ်စာမျက်နှာသို့ ပုံများထည့်ခြင်း။

ပုံများသည် ဝဘ်စာမျက်နှာကို တောက်ပစေပြီး ပိုမိုစိတ်ဝင်စားစရာကောင်းစေသည်။ ပုံတစ်ခုထည့်ရန်၊ သင်သည် <img> tag ကို အသုံးပြုသည်။ <img> tag တွင် အပိတ် tag မပါရှိကြောင်း သတိရပါ။

ဤသည်မှာ ပုံတစ်ပုံထည့်နည်း။

<code><img src="sunflower.jpg" alt="တောက်ပနေကြာပန်း"></code>

ဤကုဒ်သည် နေကြာပန်းပုံတစ်ပုံကို ပြရန် ဘရောက်ဆာအား ပြောထားသည်။ src attribute သည် ပုံတည်နေရာကို ညွှန်ပြပြီး alt attribute သည် ပုံ၏ဖော်ပြချက်ကို ပေးပါသည်။

HTML တွင် Lists ကိုအသုံးပြုခြင်း။

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

ဤသည်မှာ အစီအစဥ်မထားသောစာရင်း၏ ဥပမာတစ်ခုဖြစ်သည်။

<code><ul>
<li>Apple</li>
<li>ငှက်ပျောသီး</li>
<li>ချယ်ရီ</li>
</ul></code>

ဤသည်မှာ မှာယူထားသောစာရင်း၏ ဥပမာတစ်ခုဖြစ်သည်။

<code><ol>
<li>ပထမ</li>
<li>ဒုတိယ</li>
<li>တတိယ</li>
</ol> </code>

HTML တွင်ဇယားများ

ဇယားများသည် အတန်းများနှင့် ကော်လံများတွင် အချက်အလက်များကို ပြသရန် ကူညီပေးသည်။ ဒေတာကို နှိုင်းယှဉ်ရန် သို့မဟုတ် ဇယားကွက်တစ်ခုတွင် စာရင်းသွင်းရန် လိုအပ်သည့်အခါ ၎င်းတို့သည် အသုံးဝင်သည်။

ဤသည်မှာ HTML ဇယားတစ်ခု၏ ရိုးရှင်းသော ဥပမာတစ်ခုဖြစ်သည်။

<code><table border="1">
<tr>
<th>အမည်</th>
<th>အသက်</th>
</tr>
<tr>
<td>အဲလစ်</td>
<td>10</td>
</tr>
</table> </code>

ဤဇယားတွင် <tr> သည် ဇယားအတန်းတစ်ခုကို သတ်မှတ်သည်၊ <th> ကို ဇယားခေါင်းစီး (bold စာသား) အတွက် အသုံးပြုပြီး <td> ကို ဇယားဒေတာ (ဆဲလ်များ) အတွက် အသုံးပြုသည်။

မာလ်တီမီဒီယာနှင့် လုပ်ဆောင်ခြင်း- အသံနှင့် ဗီဒီယို

HTML သည် အသံနှင့် ဗီဒီယိုကဲ့သို့ မာလ်တီမီဒီယာကို ပေါင်းထည့်နိုင်သည်။ <audio> tag ဖြင့်၊ သင်သည် အသံဖိုင်များကို ထည့်သွင်းနိုင်သည်။ <video> တက်ဂ်ဖြင့်၊ သင်သည် သင့်ဝဘ်စာမျက်နှာတွင် ဗီဒီယိုဖွင့်စက်များကို ထည့်သွင်းနိုင်သည်။

ဤသည်မှာ ဗီဒီယို မြှုပ်သွင်းကုဒ်၏ ဥပမာတစ်ခုဖြစ်သည်။

<code><video width="320" height="240" ထိန်းချုပ်မှုများ>
<source src="movie.mp4" type="video/mp4">
</video> </code>

ဤကုဒ်သည် ဖွင့်ရန်၊ ခေတ္တရပ်ရန် သို့မဟုတ် အသံအတိုးအကျယ်ကို ပြောင်းလဲရန် ခလုတ်များပါရှိသော ဗီဒီယိုပလေယာကို ဖန်တီးပေးသည်။ controls attribute သည် ဤခလုတ်များကိုပြသရန် browser ကိုပြောပြသည်။

နေ့စဉ်ဘဝတွင် HTML

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

ဥပမာအားဖြင့်၊ သင်အနှစ်သက်ဆုံး ကာတွန်းဇာတ်ကောင်၏ပုံကို အွန်လိုင်းတွင်မြင်ရသည် သို့မဟုတ် ပျော်စရာအကြောင်းအရာတစ်ခုအကြောင်း ပိုမိုဖတ်ရှုရန် လင့်ခ်တစ်ခုကို နှိပ်လိုက်သည့်အခါ၊ HTML သည် ၎င်းကို လုပ်ဆောင်ရန် ရှိနေပါသည်။

ရိုးရှင်းသော HTML ပရောဂျက်နမူနာ

ရိုးရှင်းတဲ့ ပရောဂျက်ကို ကြည့်ရအောင်။ ကြောင်ကဲ့သို့ သင်နှစ်သက်သော တိရိစ္ဆာန်အကြောင်း ဝဘ်စာမျက်နှာငယ်လေးတစ်ခု ဖန်တီးလိုသည်ဟု စိတ်ကူးကြည့်ပါ။ ခေါင်းစဉ်တစ်ခု၊ ကြောင်များအကြောင်း စာပိုဒ်တစ်ပိုဒ်၊ ရုပ်ပုံတစ်ပုံနှင့် ကြောင်ပျော်စရာအချက်များရှိသည့် ဝဘ်ဆိုက်သို့ လင့်ခ်တစ်ခုတောင် ပါဝင်နိုင်သည်။

သင်၏ HTML ကုဒ်သည် ဤကဲ့သို့ဖြစ်နိုင်သည်-

<code><!DOCTYPE html>
<html>
<head>
<title>ကျွန်ုပ်အနှစ်သက်ဆုံးတိရစ္ဆာန်</title>
</head>
<body>
<h1>ကြောင်များအကြောင်း အားလုံး</h1>
<p>ကြောင်များသည် အပျော်သဘောရှိပြီး နူးညံ့သည်။ သူတို့သည် အိပ်ခြင်းနှင့် ပွတ်ခြင်းကို နှစ်သက်ကြသည်။ လူများစွာသည် ကြောင်များကို အိမ်မွေးတိရစ္ဆာန်အဖြစ် နှစ်သက်ကြသည်။</p>
<img src="cat.jpg" alt="ချစ်စရာကြောင်">
<a href="https://www.catfacts.com">ကြောင်များအကြောင်း ပိုမိုလေ့လာပါ</a>
</body>
</html> </code>

ဤပရောဂျက်သည် ခေါင်းစီးများ၊ စာပိုဒ်များ၊ ရုပ်ပုံများနှင့် လင့်ခ်များကို အသုံးပြုသည်။ ၎င်းသည် အစိတ်အပိုင်းများစွာဖြင့် ပြီးပြည့်စုံသော ဝဘ်စာမျက်နှာတစ်ခုကို တည်ဆောက်ရန် HTML ကိုအသုံးပြုပုံကို ပြသသည်။

HTML၊ CSS နှင့် JavaScript

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

ယနေ့ကျွန်ုပ်တို့ HTML အကြောင်းလေ့လာနေသော်လည်း CSS နှင့် JavaScript အကြောင်းသိခြင်းသည် ဝဘ်ဆိုက်များဖန်တီးပုံကိုနားလည်ရန် ကူညီပေးပါသည်။

HTML Tags များနှင့် ၎င်းတို့၏ အသုံးပြုမှုများ

HTML ကိုလေ့လာတဲ့အခါ တခြား tag တွေ အများကြီးတွေ့လိမ့်မယ်။ ဤတွင် နောက်ထပ်သိရန်အချက်အချို့ ရှိပါသည်။

ဤတဂ်များသည် သင့်အား ဝဘ်စာမျက်နှာပေါ်တွင် သင့်အကြောင်းအရာ မည်သို့ပေါ်လာပုံအပေါ် ပိုမိုထိန်းချုပ်နိုင်စေပါသည်။

HTML ၏တိုးတက်မှု

HTML ကို စတင်ဖန်တီးပြီးကတည်းက အများကြီး ပြောင်းလဲခဲ့ပါတယ်။ တဂ်များနှင့် အင်္ဂါရပ်အသစ်များစွာကို အချိန်နှင့်အမျှ ပေါင်းထည့်ထားသည်။ HTML ဗားရှင်းအသစ်တိုင်းသည် ရှုပ်ထွေးပြီး လှပသော ဝဘ်ဆိုဒ်များကို ဖန်တီးရန် ပိုမိုလွယ်ကူစေသည်။ ယနေ့ခေတ်တွင် HTML သည် CSS နှင့် JavaScript တို့နှင့်အတူ အသုံးပြုရပျော်စရာကောင်းပြီး ကြည့်ကောင်းသည့် ခေတ်မီဝဘ်ဆိုဒ်များကို တည်ဆောက်ရန် လုပ်ဆောင်ပါသည်။

ဤဆင့်ကဲဖြစ်စဉ်က HTML သည် ရိုးရှင်းသော ဝဘ်စာမျက်နှာများမှ ရှုပ်ထွေးသော ဝဘ်အက်ပ်လီကေးရှင်းများအထိ အရာအားလုံးကို ဖန်တီးရန် လွယ်ကူပြီး အစွမ်းထက်သည်ဟု ဆိုလိုသည်။

အွန်လိုင်းတွင် လုံခြုံစွာနေပါ။

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

သုံးသပ်ချက်- အဓိက HTML စည်းမျဉ်းများ

ယနေ့ သင်လေ့လာခဲ့သော အရေးကြီးသော အသုံးအနှုန်းအချို့ကို ကြည့်ကြပါစို့။

Real-World Applications များ

HTML ကို real-world settings တော်တော်များများမှာ သုံးပါတယ်။ ဤသည်မှာ ဥပမာအချို့ဖြစ်သည်။

ဤနမူနာများက HTML သည် နေ့စဉ်လူနေမှုဘဝ၏ အစိတ်အပိုင်းများစွာတွင် အလွန်အသုံးဝင်သော tool တစ်ခုဖြစ်သည်ကို ပြသသည်။

အဓိကအချက်များ အကျဉ်းချုပ်

ယနေ့တွင်၊ HTML သည် Hypertext Markup Language ၏ အတိုကောက်ဖြစ်ကြောင်း သိရှိလာရပါသည်။ ၎င်းသည် ဝဘ်စာမျက်နှာများကို ဖန်တီးရာတွင် အသုံးပြုသည့် အခြေခံဘာသာစကားဖြစ်သည်။ ဤသည်မှာ မှတ်ထားရမည့် အဓိကအချက်များဖြစ်သည်-

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

Download Primer to continue