Unordered Lists
Unordered list ကို <ul> tag ျဖင့္ စေရးရျပီး ၄င္း tag အတြင္းမွာမွ list ျဖင့္ ေဖာ္ျပ လိုေသာ syntax မ်ားကို <li> tag မ်ားျဖင့္ ေရးရပါတယ္။ Unordered lists မ်ားကို Browser တြင္ bullets မ်ားျဖင့္ ေဖာ္ျပေပးပါတယ္။Example:
<!DOCTYPE html><html>
<body>
<ul>
<li>Acer</li>
<li>Dell</li>
<li>Toshiba</li>
</ul>
</body>
</html>
Different Types of Unordered Lists
မတူညီေသာ Bullets မ်ား အတြက္ က်ေနာ္တို. <ul> tag မွာ style=" " attribute ကိုထည့္သြင္း ေရးသား ျခင္းျဖင့္ ေျပာင္းလဲလို.ရပါတယ္။Example:
<!DOCTYPE html><html>
<body>
<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
</body>
</html>
HTML Ordered Lists
Ordered list ကို <ol> tag ျဖင့္ ေရးျပီး <ol> ႏွင့္ </ol> အတြင္းတြင္ ေဖာ္ျပခ်င္ေသာ order items မ်ားကို <li> tag ကိုသံုးျပီး ေရးရပါတယ္။Example:
<!DOCTYPE html><html>
<body>
<ol>
<li>The first list item</li>
<li>The second list item</li>
<li>The third list item</li>
</ol>
</body>
</html>
Different Type of Ordered Lists
Ordered list ကိုက်ေနာ္တို. <ol> tag ကိုသံုးျပီး ေရးပါက 1.2.3 စသည့္ number ျဖင့္သာ order list ကိုေဖာ္ျပေပးပါတယ္။ အျခားေသာ ordered lists ပံုစံျဖင့္ ေဖာ္ျပလိုပါက <ol> tag မွာ type=" " attribute ကိုသံုးရပါတယ္။Example:
<!DOCTYPE html><html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
</body>
</html>
Nested List
Example:
<!DOCTYPE html><html>
<body>
<ul>
<li>Name</li>
<li>Sex
<ul>
<li>Male</li>
<li>Female</li>
</ul>
</li>
<li>Date of Birth</li>
</ul>
</body>
</html>
Description Lists
Description list ကို <dl> tag ျဖင့္ စေရးရပါတယ္။ <dl> tag သည္ <dt> ႏွင့္ <dd> tag တို.ကို conjunction လုပ္ေပးပါတယ္။ <dt> ကို names သို.မပာုတ္ terms ကိုေဖာ္ျပဖို.သံုးပါတယ္။ <dd> ကိုေတာ့ <dt> tag မွာေဖာ္ျပထားေသာ name သို. မပာုတ္ term ကို describe ျပန္လုပ္ဖို.အသံုးျပဳျခင္း ျဖစ္ပါတယ္။Example:
<!DOCTYPE html><html>
<body>
<dl>
<dt> HTML </dt>
<dd> - Hyper Text Markup Language </dd>
<dt> CSS </dt>
<dd> - Cascading Style Sheets </dd>
</dl>
</body>
</html>
No comments:
Post a Comment