HTML Basic
<!DOCTYPE html>ကြေငြာချက်သည် ဤစာရွက်စာတမ်းသည် HTML5 စာရွက်စာတမ်းဖြစ်ကြောင်း သတ်မှတ်သည် ။
<html>သည် HTML စာမျက်နှာတစ်ခု၏ အရင်းအမြစ်ဖြစ်သည် ။
<head>တွင် HTML စာမျက်နှာနှင့်ပတ်သက်သော matter အချက်အလက်ပါရှိသည် ။
<title>HTML စာမျက်နှာအတွက် ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည် (ဘရောက်ဆာ၏ ခေါင်းစဉ်ဘားတွင် သို့မဟုတ် စာမျက်နှာ၏ တက်ဘ်တွင် ပြထားသည်)
<body>ကိုယ်ထည်ကို သတ်မှတ်ပေးပြီး ခေါင်းစီးများ၊ စာပိုဒ်များ၊ ရုပ်ပုံများ၊ ဟိုက်ပါလင့်ခ်များ၊ ဇယားများ၊ စာရင်းများ စသည်တို့ကဲ့သို့ မြင်နိုင်သောအကြောင်းအရာအားလုံးအတွက် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
<h1>သည် ကြီးမားသော ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည် ။<h1><h6>အထိအသုံးပြုနိုင်သည်။
<p>သည် စာပိုဒ်တစ်ခုကို သတ်မှတ်သည် ။
https://t.me/pdwebdevelopermm/12
<!DOCTYPE html>ကြေငြာချက်သည် ဤစာရွက်စာတမ်းသည် HTML5 စာရွက်စာတမ်းဖြစ်ကြောင်း သတ်မှတ်သည် ။
<html>သည် HTML စာမျက်နှာတစ်ခု၏ အရင်းအမြစ်ဖြစ်သည် ။
<head>တွင် HTML စာမျက်နှာနှင့်ပတ်သက်သော matter အချက်အလက်ပါရှိသည် ။
<title>HTML စာမျက်နှာအတွက် ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည် (ဘရောက်ဆာ၏ ခေါင်းစဉ်ဘားတွင် သို့မဟုတ် စာမျက်နှာ၏ တက်ဘ်တွင် ပြထားသည်)
<body>ကိုယ်ထည်ကို သတ်မှတ်ပေးပြီး ခေါင်းစီးများ၊ စာပိုဒ်များ၊ ရုပ်ပုံများ၊ ဟိုက်ပါလင့်ခ်များ၊ ဇယားများ၊ စာရင်းများ စသည်တို့ကဲ့သို့ မြင်နိုင်သောအကြောင်းအရာအားလုံးအတွက် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
<h1>သည် ကြီးမားသော ခေါင်းစဉ်တစ်ခုကို သတ်မှတ်သည် ။<h1><h6>အထိအသုံးပြုနိုင်သည်။
<p>သည် စာပိုဒ်တစ်ခုကို သတ်မှတ်သည် ။
https://t.me/pdwebdevelopermm/12
Telegram
PD Web Developer School MM ( Myanmar Developer School )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<p></p>
p tag ကို Paragraph ပုံစံစာတွေရေးချင်တဲ့နေရာမျာသုံးပါတယ်။
(ဥပမာ - <p>Hello! My name is J-My. I am 25 year old.</p>)
ဒါဆိုရင် p tag ထဲမှာရေးထားတာတွေကို Paragraph အနေနဲ့ဖော်ပြသွားမှာ။သိပ်မသိသာပေမဲ့အရမ်းအသုံးဝင်ပါတယ်။
p tag ကို Paragraph ပုံစံစာတွေရေးချင်တဲ့နေရာမျာသုံးပါတယ်။
(ဥပမာ - <p>Hello! My name is J-My. I am 25 year old.</p>)
ဒါဆိုရင် p tag ထဲမှာရေးထားတာတွေကို Paragraph အနေနဲ့ဖော်ပြသွားမှာ။သိပ်မသိသာပေမဲ့အရမ်းအသုံးဝင်ပါတယ်။
<span></span>
span tag ကိုစာလုံးကိုခွဲပြီး effect ထည့်ချင်တဲ့အခါမှာသုံးပါတယ်။
(ဥပမာ - <p>I say <span>Hello World!</span></p>)
ဒါဆိုရင် Hello World! ကို CSS နဲ့ကိုယ်ကြိုက်တဲ့ effect ထည့်လို့ရပါပြီ။
span tag ကိုစာလုံးကိုခွဲပြီး effect ထည့်ချင်တဲ့အခါမှာသုံးပါတယ်။
(ဥပမာ - <p>I say <span>Hello World!</span></p>)
ဒါဆိုရင် Hello World! ကို CSS နဲ့ကိုယ်ကြိုက်တဲ့ effect ထည့်လို့ရပါပြီ။
<center></center>
ဒီ tag ကို browser ရဲ့အလယ်မှာပေါ်စေချင်တဲ့အခါမှာသုံးပါတယ်။
(ဥပမာ - <center>Hello World!</center>)
ဒါဆိုရင် Hello World! က browser ရဲ့အလယ်မှာတည့်တည့်မှာသွားပေါ်မှာပါ။
ဒီ tag ကို browser ရဲ့အလယ်မှာပေါ်စေချင်တဲ့အခါမှာသုံးပါတယ်။
(ဥပမာ - <center>Hello World!</center>)
ဒါဆိုရင် Hello World! က browser ရဲ့အလယ်မှာတည့်တည့်မှာသွားပေါ်မှာပါ။
<pre></pre>
pre ကထူးခြားတဲ့ tag ဖြစ်ပါတယ်။ တခြား Programming ဘာသာစကားတေွကိုရေးတဲ့အခါအလုပ်လုပ်သွားပါတယ်။ အလုပ်မလုပ်ချင်ဘူး။စာသားအတိုင်းဘဲပေါ်စေချင်တယ်ဆိုရင်တော့ pre ကိုသုံးပါတယ်။
(ဥပမာ - <pre><p>Hello World!</p></pre>)
ဒီလိုဆို Hello World! ကို Paragraph အတိုင်းဖော်ပြပါလိမ့်မယ်။ ဒါပင်မဲ့ pre tag နဲ့ရေးထားတာမို့လို့ရေးထားတဲ့အတိုင်း <p>Hello World!</p> အဖြစ်ဖော်ပြပါလိမ့်မယ်။
pre ကထူးခြားတဲ့ tag ဖြစ်ပါတယ်။ တခြား Programming ဘာသာစကားတေွကိုရေးတဲ့အခါအလုပ်လုပ်သွားပါတယ်။ အလုပ်မလုပ်ချင်ဘူး။စာသားအတိုင်းဘဲပေါ်စေချင်တယ်ဆိုရင်တော့ pre ကိုသုံးပါတယ်။
(ဥပမာ - <pre><p>Hello World!</p></pre>)
ဒီလိုဆို Hello World! ကို Paragraph အတိုင်းဖော်ပြပါလိမ့်မယ်။ ဒါပင်မဲ့ pre tag နဲ့ရေးထားတာမို့လို့ရေးထားတဲ့အတိုင်း <p>Hello World!</p> အဖြစ်ဖော်ပြပါလိမ့်မယ်။
<div></div>
div ကို Web page တွေရေးသားတဲ့နေရာမှာသုံးပါတယ်။ content တစ်ခုနဲ့တစ်ခု division ပိုင်းခြားပြီးပြချင်တဲ့အခါမျိုးကိုယ့်ရဲ့ UL ကို layout ချတဲ့အခါတွေမှာသုံးပါတယ်။
(ဥပမာ - <div></div>)
အတော်သုံးများပြီး Web developer တွေအကြိုက်တွေ့ရတဲ့အထိသုံးလို့ကောင်းပါတယ်။ဒါပင်မဲ့အသုံးများတာနဲ့အညီမသုံးသင့်တာတွေပါသုံးမိနေကြပါတယ်။စာပိုဒ်ဖွဲ့တဲ့နေရာကအစ div ကိုသုံးနေကြပါတယ်။အမှန်တော့စာပိုဒ်ဖွဲ့ရင် p tag ကိုသုံးရမျာပါ။
ဒါ့ကြောင့် div ကိုသူ့နေရာနဲ့သူသုံးသင့်ကြောင်းပြောပြလိုက်ရပါတယ်။
div ကို Web page တွေရေးသားတဲ့နေရာမှာသုံးပါတယ်။ content တစ်ခုနဲ့တစ်ခု division ပိုင်းခြားပြီးပြချင်တဲ့အခါမျိုးကိုယ့်ရဲ့ UL ကို layout ချတဲ့အခါတွေမှာသုံးပါတယ်။
(ဥပမာ - <div></div>)
အတော်သုံးများပြီး Web developer တွေအကြိုက်တွေ့ရတဲ့အထိသုံးလို့ကောင်းပါတယ်။ဒါပင်မဲ့အသုံးများတာနဲ့အညီမသုံးသင့်တာတွေပါသုံးမိနေကြပါတယ်။စာပိုဒ်ဖွဲ့တဲ့နေရာကအစ div ကိုသုံးနေကြပါတယ်။အမှန်တော့စာပိုဒ်ဖွဲ့ရင် p tag ကိုသုံးရမျာပါ။
ဒါ့ကြောင့် div ကိုသူ့နေရာနဲ့သူသုံးသင့်ကြောင်းပြောပြလိုက်ရပါတယ်။
အဖွင့်အပိတ်မပါသော tag များ
HTML tag တွေဟာအဖွင့်တစ်ကွင်းအပိတ်တစ်ကွင်းပါပါတယ်။ ဒါပင်မဲ့မပါတာတွေလည်းရှိပါတယ်။ အပိတ်မပါတဲ့ tag တစ်ချို့ကိုအောက်မှာဖော်ပြလိုက်ပါတယ်။
<br> - br tag ကိုတစ်ကြောင်းကျော်တဲ့နေရာမှာသုံးပါတယ်။
<hr> - hr tag က horizontal line ကိုပြောတာပါ။
<img> - img ကမိမိ pag မှာဓာတ်ပုံတွေထည့်တဲ့နေရာမှာသုံးပါတယ်။
မှတ်ချက် - သူ့မှာတော့နောက်ကမျဥ်းတစ်ကြောင်းပိတ်ပေးလို့လည်းရသလိုမပိတ်ရင်လည်းရပါတယ်။
(ဥပမာ - <img/> or <img>)
HTML tag တွေဟာအဖွင့်တစ်ကွင်းအပိတ်တစ်ကွင်းပါပါတယ်။ ဒါပင်မဲ့မပါတာတွေလည်းရှိပါတယ်။ အပိတ်မပါတဲ့ tag တစ်ချို့ကိုအောက်မှာဖော်ပြလိုက်ပါတယ်။
<br> - br tag ကိုတစ်ကြောင်းကျော်တဲ့နေရာမှာသုံးပါတယ်။
<hr> - hr tag က horizontal line ကိုပြောတာပါ။
<img> - img ကမိမိ pag မှာဓာတ်ပုံတွေထည့်တဲ့နေရာမှာသုံးပါတယ်။
မှတ်ချက် - သူ့မှာတော့နောက်ကမျဥ်းတစ်ကြောင်းပိတ်ပေးလို့လည်းရသလိုမပိတ်ရင်လည်းရပါတယ်။
(ဥပမာ - <img/> or <img>)
img အကြောင်းအကျယ်တဝင့်ဆွေးနွေးခြင်း
အခုတော့ <img> အကြောင်းကိုပြောတော့မှာပါ။သူက Website တွေအတွက်အလွန်အရေးပါတဲ့ tag ဖြစ်ပါတယ်။
alt - ကို img tag အထဲမှာရေးရပါတယ်။ မတော်လို Website အတွက် Photo ရှာမတွေ့တော့ရင် alt မှာရေးထားတာတွေကို Website မှာပြသွားမှာပါ။
<img alt = 'hello Wold!'>
src - က Website အတွက် Photo တစ်ခုလိုချင်တယ်ဆိုပါဆို။ ဒါဆိုရင် src ကနေပြီး Photo လမ်းကြောင်းကိုလှမ်းချိန်ပေးရပါတယ်။
<img src = 'Photo လမ်းကြောင်းရေးပါ။' >
Photo လမ်းကြောင်းကိုချိန်တဲ့အခါချိန်တဲ့အနည်းနှစ်မျိုးရှိပါတယ်။Photo ကိုတစ်ခါထဲ Website အတွက်ထည့်ပေးလိုက်တာ (သိုမဟုတ်) အင်တာနက်ကနေလှမ်းချိတ်တာတိုဖြစ်ပါတယ်။
1. Photo ကိုတစ်ခါထဲ Website အတွက်ထည့်ပေးနည်း။
(ဥပမာ - ကိုယ်က Photo အတွက်ဖိုင်တစ်ခုနဲ့သက်သက်ထည့်သိမ်းထားတယ်ဆိုပါဆို။ဒါဆိုအဲ့ဖိုင်ကိုအတိအကျလှမ်းချိတ်ပေးရပါမယ်။ )
ဖိုင်Aထဲမှာဖိုင်Bနဲ့ဖိုင်Cရှိတယ်ဆိုပါဆို။ ကိုကဖိုင်Bထဲမှာဖိုင်Cမှာကဓာတ်ပုံရှိတယ်။ဒါ../နဲ့ချိတ်ရတယ်။
<img src = '../C/A.png'>
../ အဓိပ္ပာယ်ကဒီဖိုင်ထဲကနေထွက်ဆိုပြီးအဓိပ္ပာယ်ရတယ်။ပြီးရင် C လိုရေးတာဟာ C ဖိုင်ထဲဝင်ဆိုတဲ့အဓိပ္ပာယ်ပါ။ပြီးရင် Photo ရဲ့နာမည်ကိုအတိအကျရေးပေးပါ။နာမည်တွင်မကပါဘူး Photo ရဲ့ file type ကိုပါအတိအကျရေးပေးပါ။ မှာမယ်ဆိုရင်ပေါ်မှာမဟုတ်ပါဘူး။
A - ဟာဓာတ်ပုံနာမည်ဖြစ်ပါတယ်။
.png - ဟာ Photo ရဲ့ file type ဖြစ်ပါတယ်။
2. အင်တာနက်ကနေလှမ်းချိတ်နည်း။
ဒီနည်းကအတော်လေးအလုပ်ဖြစ်ပါတယ်။ Photo ကိုတစ်ခါထဲ Website အတွက်ထည့်ပေးတာဟာ Website လေးစေတဲ့အပြင်ပုံများလာရင် Website ကိုသုံးရတာဟာထစ်တာ၊လေးတာ၊ပုံမပေါ်တာတွေဖြစ်တတ်ပါတယ်။အင်တာနက်ကနေလှမ်းချိတ်နည်းကတော့အဲ့ဒါတွေမဖြစ်ပါဘူး။အင်နက်မှာမိမိကြိုက်နှစ်သက်ရာပုံကိုရှာပြီး copy link ယူလိုက်ပြီး src ထဲမှာထည့်လိုက်ရုံပါဘဲ။
(ဥပမာ - <img alt = 'အင်တာနက်ကနေလှမ်းချိတ်နည်း။' src = 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FBor5lkRyeGo%2Fhqdefault.jpg&imgrefurl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBor5lkRyeGo&tbnid=5LRstxhDYEbxBM&vet=12ahUKEwjt4qvrwK73AhXHk9gFHUFQCAAQMygEegUIARDNAQ..i&docid=htz-fo0Xys4-eM&w=480&h=360&q=html%20img&ved=2ahUKEwjt4qvrwK73AhXHk9gFHUFQCAAQMygEegUIARDNAQ' >)
Photo ရဲ့ဆိုဒ်ကိုပြင်ချင်တယ်ဆိုရင် -
img ကိုဒီအတိုင်ချိတ်မယ်ဆိုရင် Photo ရဲ့ရှိပြီးသားဆိုဒ်ကိုဘဲပြမှာပါ။ကိုလိုချင်တဲ့ဆိုဒ်ကိုပြောင်းချင်တယ်ဆိုရင်တော့အောက်ပါအတိုင်းရေးပေးရပါမယ်။
<img alt = 'ဖော်ပြချင်သောအကြောင်းအရာ' src = 'ဓာတ်ပုံလမ်းကြောင်း' width='20%'>
width ကိုပြောင်းလဲလိုက်တာနဲ့သူ့အလိုလို height ကပြောင်းလဲပါလိမ့်မယ်။
width ကို % နဲ့ပေးလိုရပါတယ်။ အခြားဆိုဒ်တွေနဲ့လည်းပေးလိုရပင်မဲ့ % နဲ့ပေးတာဟာပိုပြီးတိကျတယ်ဆိုတာကိုသတိပြုစေချင်ပါတယ်။
% ဟာ broswer ရဲ့မျက်နှာပြင်ကိုရည်ညွှန်းပါတယ်။
အနှစ်ချုပ်ပြောရရင် img tag ကအလွန်အရေးပါပါတယ်။ Website ရဲ့အနှစ်သက်ရတွေထဲကတစ်ခုလည်းဖြစ်ပါတယ်။
အခုတော့ <img> အကြောင်းကိုပြောတော့မှာပါ။သူက Website တွေအတွက်အလွန်အရေးပါတဲ့ tag ဖြစ်ပါတယ်။
alt - ကို img tag အထဲမှာရေးရပါတယ်။ မတော်လို Website အတွက် Photo ရှာမတွေ့တော့ရင် alt မှာရေးထားတာတွေကို Website မှာပြသွားမှာပါ။
<img alt = 'hello Wold!'>
src - က Website အတွက် Photo တစ်ခုလိုချင်တယ်ဆိုပါဆို။ ဒါဆိုရင် src ကနေပြီး Photo လမ်းကြောင်းကိုလှမ်းချိန်ပေးရပါတယ်။
<img src = 'Photo လမ်းကြောင်းရေးပါ။' >
Photo လမ်းကြောင်းကိုချိန်တဲ့အခါချိန်တဲ့အနည်းနှစ်မျိုးရှိပါတယ်။Photo ကိုတစ်ခါထဲ Website အတွက်ထည့်ပေးလိုက်တာ (သိုမဟုတ်) အင်တာနက်ကနေလှမ်းချိတ်တာတိုဖြစ်ပါတယ်။
1. Photo ကိုတစ်ခါထဲ Website အတွက်ထည့်ပေးနည်း။
(ဥပမာ - ကိုယ်က Photo အတွက်ဖိုင်တစ်ခုနဲ့သက်သက်ထည့်သိမ်းထားတယ်ဆိုပါဆို။ဒါဆိုအဲ့ဖိုင်ကိုအတိအကျလှမ်းချိတ်ပေးရပါမယ်။ )
ဖိုင်Aထဲမှာဖိုင်Bနဲ့ဖိုင်Cရှိတယ်ဆိုပါဆို။ ကိုကဖိုင်Bထဲမှာဖိုင်Cမှာကဓာတ်ပုံရှိတယ်။ဒါ../နဲ့ချိတ်ရတယ်။
<img src = '../C/A.png'>
../ အဓိပ္ပာယ်ကဒီဖိုင်ထဲကနေထွက်ဆိုပြီးအဓိပ္ပာယ်ရတယ်။ပြီးရင် C လိုရေးတာဟာ C ဖိုင်ထဲဝင်ဆိုတဲ့အဓိပ္ပာယ်ပါ။ပြီးရင် Photo ရဲ့နာမည်ကိုအတိအကျရေးပေးပါ။နာမည်တွင်မကပါဘူး Photo ရဲ့ file type ကိုပါအတိအကျရေးပေးပါ။ မှာမယ်ဆိုရင်ပေါ်မှာမဟုတ်ပါဘူး။
A - ဟာဓာတ်ပုံနာမည်ဖြစ်ပါတယ်။
.png - ဟာ Photo ရဲ့ file type ဖြစ်ပါတယ်။
2. အင်တာနက်ကနေလှမ်းချိတ်နည်း။
ဒီနည်းကအတော်လေးအလုပ်ဖြစ်ပါတယ်။ Photo ကိုတစ်ခါထဲ Website အတွက်ထည့်ပေးတာဟာ Website လေးစေတဲ့အပြင်ပုံများလာရင် Website ကိုသုံးရတာဟာထစ်တာ၊လေးတာ၊ပုံမပေါ်တာတွေဖြစ်တတ်ပါတယ်။အင်တာနက်ကနေလှမ်းချိတ်နည်းကတော့အဲ့ဒါတွေမဖြစ်ပါဘူး။အင်နက်မှာမိမိကြိုက်နှစ်သက်ရာပုံကိုရှာပြီး copy link ယူလိုက်ပြီး src ထဲမှာထည့်လိုက်ရုံပါဘဲ။
(ဥပမာ - <img alt = 'အင်တာနက်ကနေလှမ်းချိတ်နည်း။' src = 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FBor5lkRyeGo%2Fhqdefault.jpg&imgrefurl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBor5lkRyeGo&tbnid=5LRstxhDYEbxBM&vet=12ahUKEwjt4qvrwK73AhXHk9gFHUFQCAAQMygEegUIARDNAQ..i&docid=htz-fo0Xys4-eM&w=480&h=360&q=html%20img&ved=2ahUKEwjt4qvrwK73AhXHk9gFHUFQCAAQMygEegUIARDNAQ' >)
Photo ရဲ့ဆိုဒ်ကိုပြင်ချင်တယ်ဆိုရင် -
img ကိုဒီအတိုင်ချိတ်မယ်ဆိုရင် Photo ရဲ့ရှိပြီးသားဆိုဒ်ကိုဘဲပြမှာပါ။ကိုလိုချင်တဲ့ဆိုဒ်ကိုပြောင်းချင်တယ်ဆိုရင်တော့အောက်ပါအတိုင်းရေးပေးရပါမယ်။
<img alt = 'ဖော်ပြချင်သောအကြောင်းအရာ' src = 'ဓာတ်ပုံလမ်းကြောင်း' width='20%'>
width ကိုပြောင်းလဲလိုက်တာနဲ့သူ့အလိုလို height ကပြောင်းလဲပါလိမ့်မယ်။
width ကို % နဲ့ပေးလိုရပါတယ်။ အခြားဆိုဒ်တွေနဲ့လည်းပေးလိုရပင်မဲ့ % နဲ့ပေးတာဟာပိုပြီးတိကျတယ်ဆိုတာကိုသတိပြုစေချင်ပါတယ်။
% ဟာ broswer ရဲ့မျက်နှာပြင်ကိုရည်ညွှန်းပါတယ်။
အနှစ်ချုပ်ပြောရရင် img tag ကအလွန်အရေးပါပါတယ်။ Website ရဲ့အနှစ်သက်ရတွေထဲကတစ်ခုလည်းဖြစ်ပါတယ်။
Google
Image: HTML img tag Example and Tutorial using CSS - YouTube
Found on Google from www.youtube.com
list ဆိုတာဘာလဲ။
ဒီတစ်ခေါက်မှာတော့ HTML ရဲ့ List တွေအကြောင်းပြောမှာပါ။ HTML မှာ List ၃မျိုးရှိပါတယ်။တစ်နည်းအားဖြင့် list ဆိုတာက offic software တွေမှာ bullet တပ်တာဘဲဖြစ်ပါတယ်။List၃မျိုးကတော့-
Unordered list
Ordered list
Definition list
စတာတွေဖြစ်ပါတယ်။
ဒီတစ်ခေါက်မှာတော့ HTML ရဲ့ List တွေအကြောင်းပြောမှာပါ။ HTML မှာ List ၃မျိုးရှိပါတယ်။တစ်နည်းအားဖြင့် list ဆိုတာက offic software တွေမှာ bullet တပ်တာဘဲဖြစ်ပါတယ်။List၃မျိုးကတော့-
Unordered list
Ordered list
Definition list
စတာတွေဖြစ်ပါတယ်။
Unordered list
Unordered list က တွေထဲမှာ တပ်ချင်တဲ့အခါမှာသုံးပါတယ်။ သူ့ကို အဖွင့်နဲ့အပိတ်အကြားမှာရေးရပါတယ်။ကိုယ်ဖော်ပြချင်တဲ့စာရင်းကိုတော<ul> tag အဖွင့်အပိတ်နဲ့ရေးရပါတယ်။ bullet ကိုပုံစံအမျိုးမျိုးနဲ့ရေးချင်တယ်ဆိုရင်တော့ <ul> tag အဖွင့်ထဲမှာ type ကိုထည့်သွင်းရေးရပါတယ်။type မှာ square, circle, disc စတာတွေကိုထည့်သွင်းပြီးရေးပေးနိုင်ပါတယ်။
(Eg - <ul type='circle'><li>Unordered list</li></ul>)
Unordered list က တွေထဲမှာ တပ်ချင်တဲ့အခါမှာသုံးပါတယ်။ သူ့ကို အဖွင့်နဲ့အပိတ်အကြားမှာရေးရပါတယ်။ကိုယ်ဖော်ပြချင်တဲ့စာရင်းကိုတော<ul> tag အဖွင့်အပိတ်နဲ့ရေးရပါတယ်။ bullet ကိုပုံစံအမျိုးမျိုးနဲ့ရေးချင်တယ်ဆိုရင်တော့ <ul> tag အဖွင့်ထဲမှာ type ကိုထည့်သွင်းရေးရပါတယ်။type မှာ square, circle, disc စတာတွေကိုထည့်သွင်းပြီးရေးပေးနိုင်ပါတယ်။
(Eg - <ul type='circle'><li>Unordered list</li></ul>)
Ordered list
Ordered listကတော<ol> tag အဖွင့်အပိတ်နဲ့ရေးရပါတယ်။စာတွေရဲ့အရှေ့မှာနံပါတ်တပ်ချင်တဲ့အခါဒါမှမဟုတ်ရောမဂဏန်းအကြီးအသေးတက်ချင်တဲ့အခါစတာတွေမှာအသုံးပြုပါတယ်။type မှာ i,I,1,a,A စတာတွေကိုထည့်သွင်းပြီးရေးပေးနိုင်ပါတယ်။
(Eg- <ol type = 'i' ><li>Ordered list<li><ol>)
သူ့မှာထူးခြားချက်အနေနဲ့ start ပါထည့်သွင်းရေးသားနိုင်ပါတယ်။
(Eg- <ol type = 'i' start = '5'><li>Ordered list<li><ol>)
ဒါဆိုရင်ရောမဂဏန်းအသေး i နေမစဘဲ V ကနေစမှာဘဲဖြစ်ပါတယ်။
Ordered listကတော<ol> tag အဖွင့်အပိတ်နဲ့ရေးရပါတယ်။စာတွေရဲ့အရှေ့မှာနံပါတ်တပ်ချင်တဲ့အခါဒါမှမဟုတ်ရောမဂဏန်းအကြီးအသေးတက်ချင်တဲ့အခါစတာတွေမှာအသုံးပြုပါတယ်။type မှာ i,I,1,a,A စတာတွေကိုထည့်သွင်းပြီးရေးပေးနိုင်ပါတယ်။
(Eg- <ol type = 'i' ><li>Ordered list<li><ol>)
သူ့မှာထူးခြားချက်အနေနဲ့ start ပါထည့်သွင်းရေးသားနိုင်ပါတယ်။
(Eg- <ol type = 'i' start = '5'><li>Ordered list<li><ol>)
ဒါဆိုရင်ရောမဂဏန်းအသေး i နေမစဘဲ V ကနေစမှာဘဲဖြစ်ပါတယ်။
Definition list
Definition list ကတော့ခေါင်းစဥ်နဲသူ့ရဲ့အကြောင်းကိုပြန်ရှင်းပြတဲ့အခါမှာသုံးပါတယ်။သူ့ကိုတော့ dl tag အဖွင့်အပိတ်နဲ့ရေးရပါတယ်။ထူးခြားချက်အနေနဲ့ dt dd ag အဖွင့်အပိတ်နဲ့ရေးရတာဖြစ်ပါတယ်။dt ကတော့ခေါင်းစဉ်ဖြစ်ပါတယ်။ dd ကတော့ဖော်ပြချက်ဖြစ်ပါတယ်။
(Eg- <dl><dt>ခေါင်းစဥ်<dt><dd>ဖော်ပြချက်<dd><dl>
Definition list ကတော့ခေါင်းစဥ်နဲသူ့ရဲ့အကြောင်းကိုပြန်ရှင်းပြတဲ့အခါမှာသုံးပါတယ်။သူ့ကိုတော့ dl tag အဖွင့်အပိတ်နဲ့ရေးရပါတယ်။ထူးခြားချက်အနေနဲ့ dt dd ag အဖွင့်အပိတ်နဲ့ရေးရတာဖြစ်ပါတယ်။dt ကတော့ခေါင်းစဉ်ဖြစ်ပါတယ်။ dd ကတော့ဖော်ပြချက်ဖြစ်ပါတယ်။
(Eg- <dl><dt>ခေါင်းစဥ်<dt><dd>ဖော်ပြချက်<dd><dl>