Attribue
tag ေတြမွာလည္း attribute ေတြထည့္ၿပီး သံုးႏိုင္ ပါတယ္။ attribute ဆိုတာကေတာ့ အဲဒီ tag ပိုင္ဆိုင္တဲ့ properties ေပါ့။ tag တိုင္းမွာေတာ့ attribute မရိွပါဘူး။ အခုအရင္ဆံုး body မွာပါတဲ့ color attribute အေၾကာင္း ေလးနဲ႔ စလိုက္ရေအာင္။
Body Color
<html>
<head>
<title>Example</title>
</head>
<body bgcolor=silver>
Body BGCOLOR
</body>
</html>
အဲဒီ code ေလးကို run လုိက္ရင္ေတာ့ အရင္ ကလို background color က အျဖဴေရာင္မဟုတ္ေတာ့ပဲ စိမ္းႏုေရာင္ေလး ျဖစ္ေနတာကို ေတြ႕ရပါမယ္။
ေအာက္မွာ ေဖာ္ျပထားတဲ့ဇယားက အသံုးမ်ားတဲ့ color 16 အေရာင္နာမည္ေတြပါ။
Silver Gray Maroon Green
Navy Purple Olive Teal
White Black Red Lime
Blue Magenta Yellow Cyan
ကြၽန္ေတာ္တို႔ေတြဟာ color ေတြကို code အေနနဲ႔ လည္း အသံုးျပဳႏိုင္ပါတယ္။ သံုးရမွာကေတာ့ RGB color ပါ။ Hex code number ကို အသံုးျပဳရပါတယ္။ #FF0000 ဆိုရင္ေတာ့ အနီေရာင္ပါ။ ေရွ႕ဆံုး ၂ လံုးက အနီေရာင္ျဖစ္ျပီး အလယ္ ၂ လံုးက အစိမ္းေရာင္ပါ။ ေနာက္ဆံုး ၂ လံုးကေတာ့ အျပာေရာင္ေပါ့။ အဲဒီ အေရာင္ ၃ ေရာင္ကို စပ္ၿပီး သံုးရပါတယ္။ တကယ္လို႔ color ေတြ ကို မသိဘူးဆိုရင္ photoshop ကေနလည္း ႀကိဳက္ႏွစ္ သက္တဲ့ အေရာင္ကိုယူၿပီး သံုးႏိုင္ပါတယ္။ ဘယ္လိုယူရ မလဲ ဆိုရင္ေတာ့ အရင္ဆံုး photoshop ကို ဖြင့္လိုက္။ ဘယ္ဘက္ေအာက္နားမွာ color ေရြးေလးပါတယ္။
အဲဒါေလးကို double click လုပ္လိုက္ပါ။ color dialog box က်လာပါမယ္။ ၿပီးရင္ ႏွစ္သက္ရာ အေရာင္ ေရြးပါ။ Color အေရာင္ေရြးၿပီးရင္ ေအာက္နားမွာ hex code ေလးကို copy ကူးလိုက္ရုံပါပဲ။ ကြၽန္ေတာ္တို႔ေတြ color အေနနဲ႔ သံုးခ်င္ရင္ # ေလးကို ေရွ႕မွာ ခံၿပီး သံုးလိုက္႐ံု ပါပဲ။
<html>
<head>
<title>Example</title>
</head>
<body bgcolor=#e5bb2c>
Body BGCOLOR Hex code
</body>
အခုဆိုရင္ေတာ့ attribute ပိုင္းနဲ႔ color ပိုင္းေလး ကို နည္းနည္းပါးပါး သိေလာက္ၿပီလို႔ ထင္ပါတယ္။ attribute ထည့္လို႔ရတဲ့ tag ေတြကလည္း အမ်ားႀကီးရိွပါ ေသးတယ္။ ျဖည္းျဖည္းျခင္း ေျပာျပသြားမယ္။ အခု ေနာက္ထပ္ tag တစ္ခုျဖစ္တဲ့ <hr> ရဲ႕ attribute အေၾကာင္းေလး ေျပာပါမယ္။
Hr Attribute
ကြၽန္ေတာ္တို႔ေတြဟာ tag တစ္ခုရဲ႕ ေနာက္မွာ attribute တစ္ခုထက္မက လိုက္လို႔ရပါတယ္။ tag ေတြ ေနာက္မွာ attribute တစ္ခုထက္မက ပါတာေတြကို ေနာက္ပိုင္းမွာ ေတြ႕ရပါလိမ့္မယ္။ အခုေတာ့ hr အေၾကာင္း ေလး ဆက္ရေအာင္။
<html>
<head>
<title> Example </title>
</head>
<body bgcolor=#e0e0e0>
Default HR
<hr>
Hr with size=1
<hr size=1>
Hr with size=5
<hr size=5>
Hr with size=10
<hr size=10>
Hr with size=10 and noshade
<hr size=10 noshade>
Hr with size=5 and color
<hr size=5 color=#D60000>
</body>
</html>
Default HR
Hr with size = 1
Hr with size = 5
Hr with size = 10
Hr with size = 10 and noshade
Hr with size = 5 and color
အဲမွာ size ကေတာ့ အရြယ္အစားပါ။ noshade ဆိုတာကေတာ့ shade မပါတဲ့ဟာကို ေျပာတာပါ။ ေျဗာင္ ၾကီးေပါ့။ color ကေတာ့ မိမိၾကိဳက္ႏွစ္သက္တဲ့ အေရာင္ ထည့္လို႔ ရပါတယ္။
List
List ပိုင္းမွာ order list နဲ႔ unorder list ဆိုၿပီး ရိွပါ တယ္။ တနည္းအားျဖင့္ နံပါတ္စဥ္ list နဲ႔ နံပါတ္စဥ္ေတြ မပါတဲ့ list ေပါ့။
ေနာက္ၿပီး defination list ဆိုတာ ရိွပါေသးတယ္။ လူသံုးနည္းပါတယ္။ ပထမဆံုး unorder list အေၾကာင္း ေလးသြားရေအာင္။
Unorder list
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Unorder List</h3>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
Unorder List
First Item
Second Item
Third Item
<ul> က unorder list ပါ။ <li> ကေတာ့ list ေပါ့။ list တစ္ခုပဲဆိုရင္ <li>1</li>။ ၂ခုဆိုရင္ <li>1</li> <li>2</li> လို႕ ေရးပါတယ္။ အေပၚက code ကို run လုိက္ရင္ list ေလးေတြကို ျမင္ရမွာပါ။ အကုန္လံုးက အ၀ိုင္းေလးေတြနဲ႔ List ပါပဲ။ ကဲ အခု attribute ေလး ထည့္ျပီး ပံုစံေျပာင္းၾကည့္ရေအာင္။
<html>
<body>
<h3>Unorder List</h3>
<h5>Disc</h5>
<ul type=”disc”>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<h5>Square</h5>
<ul type=”square”>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<h5>Circle</h5>
<ul type=”circle”>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
unorder list မွာ disc, square, circle ဆိုျပီး ၃ မ်ဳိး ေျပာင္းလို႔ ရပါတယ္။ default ကေတာ့ disc ပါ။
Ordered List
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Ordered List</h3>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
Unorder List
Disc
First Item
Second Item
Third Item
Square
First Item
Second Item
Third Item
Circle
First Item
Second Item
Third Item
<ol> ကေတာ့ order list ပါ။ အဲဒီ code ေလးကို run လိုက္ရင္ နံပါတ္ အစဥ္လိုက္ ေပၚလာပါလိမ့္မယ္။ သူ႔မွာလည္း attribute ေတြ ရိွပါတယ္။
Order List
1. First Item
2. Second Item
3. Third Item
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Ordered List</h3>
<ol type=”1">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type A</h5>
<ol type=”A”>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type a</h5>
<ol type=”a”>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type a</h5>
<ol type=”I”>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type i</h5>
<ol type=”i”>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
Order List
1. First Item
2. Second Item
3. Third Item
Type A
A. First Item
B. Second Item
C. Third Item
Type a
a. First Item
b. Second Item
c. Third Item
Type a
I. First Item
II. Second Item
III. Third Item
Type i
i. First Item
ii. Second Item
iii. Third Item
Order List မွာလည္း Unorder List ကဲ့သို႔ပင္ type မ်ား ရိွပါတယ္။ အဲဒါေတြကို အေပၚက code မွာ ေဖာ္ျပထားပါတယ္။ Order list က unorder list နဲ႔ မတူတဲ့ အခ်က္ကေတာ့ နံပါတ္စဥ္လိုက္ ျဖစ္ပါတယ္။ မိမိႀကိဳက္ တဲ့ နံပါတ္ကေန စႏိုင္တယ္။ မိမိႀကိဳက္တဲ့ နံပါတ္က စႏိုင္ဖို႔ start ဆိုတဲ့ attribute ကို သံုးႏိုင္ပါတယ္။
<ol type=”A” start=4> မွာဆိုရင္ေတာ့ D ကေန စမွာပါ။ ဒါဆိုရင္ေတာ့ HTML နဲ႔ list ေတြပါတဲ့ webpage ေလး ေရးလို႔ရျပီေပါ့။ ေနာက္ထပ္ list တစ္ခုကေတာ့ definition list ပါ။
Source : Link
No comments:
Post a Comment
ေဆာ႔၀ဲေတြ update လုပ္ခိုင္းလွ်င္မလုပ္ပါနွင္႔။