- မူရင္းစာမ်က္ႏွာ »
- Other Webdeveloper Lesson »
- html_14
ေရးသားသူ : Christ Leo
Thursday, September 15, 2016
HTML List
ဒီအခန္းမွာေတာ့ HTML List ေတြအေၾကာင္းကိုသင္ျပသြားပါမယ္၊ HTML List ေတြကို သင့္၀က္ဆိုက္မွာ အစီအစဥ္က်တဲ့စာရင္းပံုစံ ေတြကိုတည္
ေဆာက္ရာမွာ အသံုး၀င္လွပါတယ္၊ အခု List တည္ေဆာက္ပံုသံုးမ်ိဳးကိုသင္ျပေပးသြားမယ္၊ Ordered List , Unordered List နဲ႔ Defination List တို႔ပါ၊
Ordered List
Ordered List ဆိုတာကေတာ့ အစီအစဥ္က်တဲ့ စာရင္တည္ေဆာက္ပံုေတြကိုေခၚပါတယ္၊ နာပတ္ေတြ နဲ႔ တည္ေဆာက္ထားတာပါ၊ အမွတ္စဥ္ ၁၊ အမွတ္စဥ္
၂ ဆိုျပီးတည္ေဆာက္ပံုပါ၊ ေအာက္က ပံုကိုၾကည့္လိုက္ပါ ပိုျပီးနားလည္သြားေအာင္၊
အထက္ က ပံုမွာ The following are list of lessons ဆိုတာကေတာ့ ေခါင္းၾကီးစာလံုးျဖစ္တဲ့ <h1> ဆိုတဲ့ HTML Tag နဲ႔ တည္ေဆာက္ထားပါတယ္၊
ေအာက္ က 1, 2, 3, 4, 5 ကေတာ့ list ေတြပါ၊ သူတို႔ေတြကိုတည္ေဆာက္ရင္ နံပါတ္ေတြေရးစရာမလိုဘူး၊ List Tags ျဖစ္တဲ့ <li> အဖြင့္ နဲ႔ </li>
အပိတ္တို႔ကိုထည့္လိုက္ရင္ သူ႔အလုိလုိနံပါတ္ တပ္ေပးပီးသား၊ ေအာက္မွာ ဥပမာ ၾကည့္ၾကည့္
<li>HTML </li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
အထက္က လို စာရင္းျပဳစုခ်င္တဲ့ စာသားရဲ့ ေရွ႕နဲ႔ ေနာက္မွာ <li> အဖြင့္နဲ႔ </li> အပိတ္တို႔ကိုထည့္ေပးရပါတယ္၊ ဒါဆိုရင္ေတာ့ သူ႔လိုလို
စာရင္းျဖစ္သြားမွာပါ၊ ဒါေပမယ့္ ေနာက္ထပ္အခ်က္တစ္ခုေတာ့ က်န္ေသးတယ္၊ အဲ့ဒါကေတာ့ သင္ေရးမယ့္ စာရင္းက Ordered List အစီအစဥ္တက်ျဖစ္တဲ့
စာရင္းလား၊ Unordered List အစီအစဥ္မက်တဲ့ စာရင္းလားဆိုတာကိုေတာ့သိ ဖို႔လိုတယ္၊ အထက္က က ရွင္းျပခဲ့သလိုပဲ အစီအစဥ္က်စာရင္းကိုမွသာလွ်င္
နံပါတ္ေတြနဲ႔ ေဖာ္ျပမွာ၊ ဒီေတာ့ သင္ေရးလိုက္တဲ့ကုတ္က အစီအစဥ္က်တဲ့စာရင္းျဖစ္ေၾကာင္းကိုေဖာ္ျပရမယ္၊ ဒါ့ေၾကာင့္ သင့္ စာရင္း အစ နဲ႔
စာရင္းေတြအားလံုးအဆံုးမွာ Ordered List ရဲ့ HTML Tags ျဖစ္တဲ့ <ol> အဖြင့္ နဲ႔ </ol> အပိတ္တို႔ကိုထည့္ေပးလိုက္၊ ေအာက္က အတိုင္း
<ol>
<li>HTML </li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
အထက္က ပံုမ်ိဳး သင့္ရဲ့စာရင္းေတြကို HTML tags ေတြနဲ႔ ၀န္းရံျပီးေရးလိုက္ရင္ အေျဖမွာေတာ့ အေပၚမွာျပထားတဲ့စာရင္းေတြပံုစံျဖစ္တဲ့ 1, 2,3, 4, 5
နံပါတ္ေတြနဲ႔ စာရင္းကိုရမယ္၊
Unodered List
အကယ္၍ အထက္ က ကုတ္ေတြကို Ordered List ေတြမျဖစ္ေစခ်င္ပဲ Unordered List အစီအစဥ္မက်တဲ့စာရင္းေတြျဖစ္ေစခ်င္တယ္ဆိုရင္ေတာ့
စာရင္းအမ်ိဳးအစားကိုသတ္မွတ္တဲ့ <ol> အဖြင့္နဲ႔ </ol> အပိတ္တို႔ေနရာမွာ Unordered List ရဲ့ HTML Tags ေတြျဖစ္တဲ့ <ul> အဖြင့္နဲ႔ </ul>
အပိတ္တို႔ကိုထည့္ေပးရမယ္၊ ဒါဆိုရင္ေတာ့ သင္ေရးရမယ့္ကုတ္က ေအာက္က အတိုင္းျဖစ္သြားမယ္၊
<h1>The following are list of lessons </h1>
<ul>
<li>HTML </li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
အထက္က အတိုင္း Unordered List ကိုေရးရင္ျဖင့္ ေအာက္က ပံုမ်ိဳးနဲ႔ တူတဲ့ သင့္ရဲ့ ၀က္ဆိုက္စာမ်က္ႏွာကိုေတြ႔ရမွာပါ၊
အထက္က ေတာ့ Unordered List နဲ႔ တည္ေဆာက္ထားတဲ့ စာရင္းပံုစံပါ၊
List ေတြကိုတည္ေဆာက္ရာမွာ ထူးျခားတဲ့ List တစ္မ်ိဳးရွိပါတယ္၊ ဒါကေတာ့ Defination List ပါ၊ သူ႔ကိုေတာ့ Dictonary ေရးတဲ့အခါ လုပ္ငန္းသံုး
စာလံုးေတြကိုရွင္းျပတဲ့အခါမ်ိဳးမွာသံုးပါတယ္၊ Defination List ေတြျဖစ္တဲ့ အတြက္ သူတို႔ကို <dl> အဖြင့္ <dl> အပိတ္တို႔နဲ႔ သတ္မွတ္ပါတယ္၊
ရွင္းျပမယ့္စာသားကိုေတာ့ Defination Data ေတြျဖစ္တဲ့အတြက္ <dt> အဖြင့္ နဲ႔ <dt> အပိတ္တို႔ကိုသံုးျပီး သတ္မွတ္ပါတယ္၊
ဆိုၾကပါစို႔ သင္က လူ ဆိုတဲ့ စာလံုးရဲ့ အဓိပၸါယ္ကိုရွင္းျပခ်င္တယ္၊ ေအာက္က အတိုင္းေပါ့၊
Human
An evolution of ape, example Roney from Manchester United Club
အထက္က လို ပထမစာလံုးကို ေအာက္က စာေၾကာင္းက အဓိပၸါယ္ဖြင့္ခ်င္တဲ့အခါမ်ိဳးမွာ Defination List ကိုသံုးျပီးေရးပါတယ္၊ အထက္က
စာေၾကာင္းမ်ိဳးသင့္၀က္ဆိုက္မွာေပၚေအာင္ေအာက္က အတိုင္းေရးႏိုင္တယ္၊
<dl>Human</dl>
<dd>An evolution of ape, example: Roney from Manchester United Club</dd>
ပထမ <dl> အဖြင့္အပိတ္ ၾကားမွာေတာ့ အဓိပၸါယ္ ဖြင့္လိုတဲ့ စာလံုးကို ထည့္ထားတယ္၊ ဒုတိယ စာေၾကာင္းကေတာ့ ပထမ စာလံုးရဲ့ အဓိပၸါယ္ကို ရွင္းျပဖို႔
အတြက္ေရးတဲ့ ၀ါက်၊ အထက္က အတိုင္းေရးလိုက္ရင္ သင့္၀က္ဆိုက္မွာ ေအာက္ပါပံုအတိုင္း webpage ကိုေတြ႔ရမယ္၊
အထက္က ဥပမာ ကေတာ့ list style ေတြထဲက Defination List တည္ေဆာက္ပံုဥပမာပါ၊
ယခုဘေလာ့သည္မိတ္ေဆြမ်ားထံမွျပန္လည္မွ်ေ၀ထားပါသည္
ကၽြန္ေတာ္ပိုင္ေနရာေလးမ်ား
ေရာင္ျပန္ေလးစာေပသို႔ဒီမွာသြားပါ
18+တို႔ဆံုဆည္းရာသို႔ဒီမွာသြားပါ
****အဆင္မေျပမႈ႔တစ္စံုတစ္ရာရွိပါက****
Facebook Account ျဖစ္တဲ႔
ေအာက္ပါပံုေလးကိုႏွိပ္ျပီးေ၀ဖန္အၾကံေပးႏိုင္ပါတယ္