Photobucket
ပင္မစာမ်က္နွာ


N .

Saturday 7 January 2012

HTML Attribute & List အေၾကာင္း


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

Related Posts Plugin for WordPress, Blogger...