LOAD HTAR PAR

Thursday, April 19, 2012

Medal Of Honor (2010) Repack

Oh! You come to my blog. Welcome....


Minimum system requirements:

Processor: Pentium D 3.0GHz, Core 2 Duo 2.0GHz,
• Windows XP SP3/Vista SP1;
• Intel Core 2 Duo 1,4 GHz / Athlon 64 X2 1,8 GHz;
• 1 GB of RAM;
• 20 GB free hard disk space;
• Video-level GeForce 6600/Radeon X850 with 128 MB of memory;
• DirectX - compatible sound card;
• DirectX 9.0c;
• device to read DVD-ROM drive;
• Keyboard;
• Mouse.

SERIALS-

2NH9-37LE-TV6K-M2YS-VJB8
APVM-DLAR-AL20-33R0-9312
67EE-5XGA-9817-YFDE-8XCD
BBK3-X24Q-CD9D-2RSE-0EP1
2FR9-23EQ-NBT4-380P-VN1X.



Mediafire Download Links-
size: [3.13gb]

B-17 Game

Oh! You come to my blog. Welcome....

ပစ္ခ်င္ခတ္ခ်င္ၾကသူမ်ား.. အာသာေျပေပါ ့..





( join by HJ-Split ) ဖိုင္လ္ဆက္ရန္ အခက္ခဲရွိပါက ဒီမွာ

Fifa 10

Oh! You come to my blog. Welcome....


pass Mediafire ( meohongkieu@tech24.vn)

Wednesday, April 18, 2012

ကၽြန္ေတာ္ေရာက္ခဲ့တဲ့ေနရာေတြပါ

Oh! You come to my blog. Welcome....
 http://www.downloadatoz.com/
 http://www.flickr.com/
 http://pizap.com/pizap.php?width=1440
 http://myanmardaily-news.blogspot.com/
 http://www.livescore.com/soccer/u21_euro/
 http://drvikekalay3.blogspot.com/
 http://monblogdirectory.blogspot.com/
 http://mtalk.net.mm/index.php?option=com_content&view=category&id=27&Itemid=38
 http://www.hackedfreegames.com/
 http://www.cserial.com/
 http://www.quicksilverscreen.ch/
 http://zerobalance84.grou.ps/wiki/item/-----me
 http://www.novatech.co.uk/products/components/
 http://www.tblop.com/
 http://www.color-games.com/categori/adventure-games.html

Tuesday, April 17, 2012

Popup Boxes

Oh! You come to my blog. Welcome....

                    Javascript  popup boxes  သည္  user ေတြ အတြက္ ေရြးခ်ယ္ေဆာင္ရြက္နိုင္ေသာ boxes အမ်ိဳးအစားေတြ ပါဝင္ပါတယ္ ၊  popup boxes  သံုးမ်ိဳးရိွပါတယ္ ၊ ၎ တို႕မွာ Alert box, Confirm box, and Prompt box တို႕ ျဖစ္ပါတယ္။ Alert box, Confirm box, and Prompt box တို႕ သည္ window object method အမ်ိဳးအစားေတြျဖစ္ပါတယ္။

Alert () method
               Alert ()method  သည္ user အတြက္ message  ကို alert boxes နဲ႕ေဖာ္ျပေပးပါတယ္ ၊ အဲဒီ message ကို အတည္ ျပဳျပီးမွပဲ  ေရွ႕ ကို ဆက္သြားလို႕ ရမွာ ျဖစ္ပါတယ္ ၊ message ကို အတည္ျပဳေပးဖို႕ “  ok “ click buttom  ပါဝင္ပါတယ္ ။ alert boxes ကို function ေတြ ထဲမွာ သံုးမယ္ဆိုရင္ ေတာ့  name  တစ္ခုေပးျပီး သံုးရမွာ ျဖစ္ပါတယ္၊ alert ( yortext) ; ဆိုျပီး သံုးပါတယ္။

<html>
<head>
<script type="text/javascript">
alert("Hello! I am kyawko");
</script>
</head>
</html>




function ထဲမွာ  အသံုးျပဳပံုကို ဆက္ၾကည့္လိုက္ပါဦး ၊ function ေနာက္က   show_ alert  (  ) ဆိုတာ function name ျဖစ္ပါတယ္။  event attribute ျဖစ္တဲ့ onclick က ေန function call ေခၚထားေသာပံုစံျဖစ္ပါတယ္။ event type  အေၾကာင္းကို ေခါင္းစဥ္သက္သက္ခြဲျပီးေရေပးထားပါတယ္၊ ဒီေနရာမွာေတာ့ alert( )method အသံုးျပဳပံုကိုသာ ေလ့လာေစခ်င္ပါတယ္။ 

<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("Hello! I am an kyawko");
}
</script>
</head>
<body>
<input type="button" ondblclick="show_alert()" value="alert box" />
</body>
</html>


ေပၚလာေသာပံု---






Prompt( ) method
                Prompt( )   method သည္  window object method အမ်ိဳးစားတစ္ခုျဖစ္ပါတယ္ ၊ prompt ( ) method သည္ user အတြက္ အသံုးျပဳနိုင္ေသာ  text  field    နွင့္   “ ok “  ၊ cancen  buttom ေတြ ပါဝင္ တယ္ ၊ user ကေန text field အတြင္း မွာ  data ကို ရိုက္ထဲ့ အသံုးျပဳရမွာ ျဖစ္ပါတယ္။

 1.  prompt(" your name:")  = “   “ အတြင္းမွာ ပါေသာ text သည္  prompt ( ) boxes ထဲမွာ ေပၚရန္ သတ္မွတ္ပါတယ္။
2.  prompt("Type your name:", "Type here") ထဲမွာပါဝင္ေသာ  “ Type here”  သည္ text field ထဲမွာ ေပၚရန္ျဖစ္ပါတယ္၊ ။
 3.  var name = prompt("Type your name:", "Type here") = var name    တစ္ခုနွင့္ေၾကညာပံုျဖစ္
ပါတယ္။



<html>
<body>
<script type="text/javascript">
var name = prompt("What is your name?", "Type your name here");
alert("Your name is: "+name)
</script>
</body>
</html>

ေပၚလာေသာပံုစံ



Function နွင့္ အသံုးျပဳပံု
 
<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var x=prompt("Please enter your name","text");
if (x!=0)
          {
                document.write("Hello " + x + "! How are you today?");
          }
}
</script>
</head>
<body>
 <input type="button" onclick="show_prompt()" value="Show prompt box" />
 </body>
</html>


အေပၚက ဥပမာကို  ေလ့လာၾကည့္ရေအာင္ ၊ show_promt() သည္ function name ျဖစ္ပါတယ္ ၊ user ရိုက္ထည့္မဲ႕ prompt ( )method ကို var x  လို႕ေၾကညာထားပါတယ္ ၊ user က ရိုက္ထည့္လိုက္ေသာ  x တန္ဖိုးကို  if statement  နဲ႕စစ္ျပီး output ထုတ္ေပးမွာ ျဖစ္ပါတယ္၊ input tag ထဲမွာ ပါဝင္ေသာ onclick = show-prompt ( ) ကို function  call ေခၚျပီး သံုးထားပါတယ္။output ကိုေတာ့ x တန္ဖိုးနွင့္ ေပါင္းျပီး (Hello   x  ! How are you today?) ဆိုျပီး ထုတ္ေပးမွာ ျဖစ္ပါတယ္။

Confirm( )method
              Confirm( ) method  သည္  user ကို message တစ္ခု ေဖာ္ျပေပးျပီး  ေရြးခ်ယ္ အတည္ျပဳ ခိုင္းပါတယ္ ။ confirm( ) boxes မွာ  “ok” /  “cancel “ buttom ေတြ  ပါဝင္ပါတယ္။

ေအာက္ကဥပမာသည္  ok နွင့္ cancel buttom ၏ အလုပ္လုပ္ပံုကို if statement  သံုးျပီး user ကို  confirm( ) အတည္ျပဳေရြးခ်ယ္ခိုင္းေသာ ပံုစံေလးျဖစ္ပါတယ္။ var x  သည္  true  (x ==true )နွင့္ ညီမယ္ဆိုရင္ ok ကို နွိပ္ပါ ။ ok နွိပ္ရင္ output က “welcome “ဆိုျပီး ထုတ္ေပးပါလိမ္မယ္။ cancel နွိပ္ရင္ “go back” ဆိုျပီး ထုတ္ေပးပါလိမ္မယ္။

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
  {
  alert("welcome!");
  }
else
  {
  alert("go back!");
  }
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Show a confirm box" />

</body>
</html>

List


       list tag သည္ စာသားေတြ ၊စာပိုဒ္ေတြကို  list ေတြသတ္မွတ္ခ်င္တဲ့ အခါမွာ အသံုးျပဳပါတယ္၊
<li> tag ကို   orderlist <ol> နွင့္unorderlist<ul> တို႕ ထဲမွာ အသံုးျပဳနိုင္ပါတယ္။ list ထဲမွာ ထပ္ျပီး သတ္မွတ္ခ်င္ရင္ေတာ့ <li type = “value”>  ကို အသံုးျပဳပါသည္။  ဥပမာ= <li type="square">Tea</li>
 
For ordered lists (<ol>)သတ္မွတ္ရန္
Value
Description
1
Numerical ordered list (this is default) (1, 2, 3, 4)
a
Alphabetically ordered list, lowercase (a, b, c, d)
A
Alphabetically ordered list, uppercase (A, B, C, D)
i
Roman numbers, lowercase (i, ii, iii, iv)
I
Roman numbers, uppercase (I, II, III, IV)


 နံပါတ္ေတြကို ဘယ္ကေန စျပီးေဖၚျပျခင္တယ္ဆိုရင္ေတာ့<ol></ol>ကိုသံုးေပးရပါတယ္။ နံပါတ္ေတြကို ကိုၾကိဳက္တဲ့ေနရာကေန စေစခ်င္လ်ွင္ <ol start="4"> ဒါဆိုရင္ ၄ ကေနစသြားမွာျဖစ္ပါတယ္။

<ul> ဆိုတာ ကေတာ့  နံပါတ္မဟုတ္တဲ့ တစ္ျခားအရာေတြ(circle )ကို သတ္မွတ္ဖို႕ျဖစ္ပါတယ္။
 
For unordered lists (<ul>):

Value
Description
disc
Default. A filled circle
circle
An unfilled circle
square
A filled square



<html>
<body>
<ol>
  <li>ခ်စ္သူ</li>
  <li type="b">သူငယ္ခ်င္း</li>
  <li>ရည္းစား</li>
</ol>
<ul>
  <li>ေယာက္က်ား</li>
  <li type="square">မိန္းမ</li>
  <li>သတၱဝါ</li>
</ul>
</body>
</html>



  1. ခ်စ္သူ
  2. သူငယ္ခ်င္း
  3. ရည္းစား

  • ေယာက္က်ား
  • မိန္းမ
  • သတၱဝါ



အားလံုးကိုေလးစားလ်က္ပါ။

Background Images

Oh! You come to my blog. Welcome.

   
             Image  သည္ web designer ေတြရဲ႕ အသက္ျဖစ္တယ္လိုဆိုထားပါတယ္။ ရုပ္ပံုေလးပါမွ
ၾကည့္ရတဲ့သူ   ဖတ္ရတဲ့သူအဖို႕  ပိုးျပီးေတာ့   အသက္ဝင္သြားပါတယ္။  အခု   ေနာက္ပိုင္းမွာေတာ့ 
အသံုးျပဳပံုေတြကို Video ဖိုင္ေတြနဲ႕ ေဖၚျပက်ပါသည္။       ရုပ္ပံုထည္ရာတြင္ the same directory   
ထဲတြင္ထည့္မထားပါက  ၄င္းပါရိွသည့္ Folder ကို  ညြန္းေပးရပါမယ္။   ေအာက္က ဥပမာ ေလးက
ေတာ့ ကိုယ့္ရဲ႕ ကြန္ပ်ဴတာ ထဲမွ ပံုကိုယူရန ္ ညြန္ထားတာပါ။ လုပ္ၾကည့္လိုက္ရင္ နားလည္သြားမွာပါ။
တကယ္လို႕ ပံုမျမင္ရပဲ ၾကက္ေျခခတ္ (x ) ပဲျမင္ရရင္ေတာ့ ထည့္ထားတဲ့ image ပတ္လမ္းေၾကာင္းမွား
တာျဖစ္ႏိုင္သလို၊ image extension မွားတာလည္း ျဖစ္ႏိုင္တယ္။ size ၾကီးေနလို႕ ဒါမွမဟုတ္ ငယ္ေနလို
လဲျဖစ္နိုင္ပါတယ္။ image ထည့္လို႕ရတဲ့ extension ေတြကေတာ့ jpg/ gif/ png ေတြပါ။ 
ဥပမာ-

           <html>
        <head><title>bgbackground image </title></head>

        <body background=  “  C:\Users\Public\Pictures\Sample Pictures   “bgproperties=”fixed”>
        <h1>this is bgpicture</h1>
        </body>
        </html>

မွတ္ခ်က္(Image ရဲ႕ေနရာကိုေတာ့ Picture ရဲ႕ properties ကေနယူေပးပါ) ၊  Background image 
ထည့္ပံုကိုနားလည္မွာပါ။Web page ေပၚတြင္ image ထားရိွပံုကို ဆက္ျပီးေလ့လာၾကည့္ပါဦး။
            Bg image နွင့္ Web page ရိွ image (forder) ထားရိွပံုျခင္းတူေသာလဲ၊သေဘာသဘာဝ ျခင္းမတူပါ။ ဘာေၾကာင့္မတူတာလဲဆိုတာကို    what is html  ဆိုတဲ့ေခါင္းစဥ္အာက္မွာ  ရွင္းထား
ပါတယ္။   <imgsrc=" " alt=” "texT”border=” “hspace=””vspacce=””>   tag   ပံုစံတြင္ Src 
သည္ source ျဖစ္ျပီး image ပါရိွသည့္ေနရာနွင့္ fine name / file extension ကိုရည္ညြန္းပါသည္။ 
border   သည္ အနားသတ္မ်ဥ္း၏  အထူကိုသတ္မွတ္ရန္ျဖစ္ပါသည္။Border ေပးထားပါက Space
(ကြာဟ)မူကို  Hspace / Vspace တို႕ျဖစ္သတ္မွတ္နိုင္ပါသည္။Boderline မေပးထားေသာ Image 
မ်ားကို <imasrc=”  ”> ျဖစ္ေရးနိုင္ပါသည္။အတိုင္းအတာ သတ္မွတ္လိုပါက Height=” “ / Width
=” “ မ်ားျဖင့္ Pixet  တန္းဖိုးမ်ားကို ေရးသားေပး၇ပါသည္။၄င္းသတ္မွတ္ခ်က္မ်ားကို Image pixet Dimension ႏွင့္သတ္ မွတ္သျဖင့္ Graphic  သေဘာတရားမ်ားကို အနည္းငယ္သိထားရင္ ပိုေကာင္း
ပါတယ္။
          Image  မ်ားတြင္ ရိုးရိုး Image  ႏွင့္ Animated  Image (Animated Fig) မ်ားပါ၇ိွပါသည္။ Animated image  သည္ အသက္လႈပ္ရွားမႈရိွေသာ Image တစ္မ်ိဳးျဖစ္ပါသည္။ ၄င္းကို Web page တြင္ထည့္တြင္းရသည္နည္းမွာ  ရိုးရိုး  Image  ထည့္နည္းအတိုင္းပဲ ထည့္ပါတယ္။   ေအာက္မွာလဲ 
ကၽြန္ေတာ္ နားလည္တက္ေလာက္ အတက္နိုင္ဆံုး ရွင္းထားေပးပါတယ္။  ေလ့လာၾကည့္ပါဦး


Image SRC
     Src သည္ သြားခ်င္တဲ့ Image ၏ ေနရာကို ရည္ညြန္းေပးတာပါ။  Src သည္ သတ္မွတ္ခ်က္ တစ္ခုျဖစ္ပါတယ္။

Src url types


Local   Src                                       Location   Description
 src="sunset.gif"                         picture file resides in same directory as .html file
 src="../sunset.gif"                      picture file resides in previous directory as .html file
 src="../pics/sunset.gif"               picture file resides in the pic directory in a previous directory as .html file





Alt

            Image သည္ ၎နွင့္ ပါတ္သက္ေသာ အခ်က္လက္ေတြကို မေဖၚျပနိုင္ဘူးဆုိလ်ွင္ alt tag ကိုသံုးပါသည္။ image အတြက္ ကိုယ္စာလွယ္ လုပ္ေဆာင္တာေပါ့ဗ်ာ။  ၎ tag ကိုေတာ့ ဘယ္လို
အေျခေနမ်ိဳးမွာ သံုးတယ္ဆိုတာ ေအာက္တြင္ ေဖၚျပထားပါတယ္။


1.         image ထဲမွာ အခ်က္လက္ေတြပါဝင္ေနလွ်င္ ၎ကို  သရုပ္ေဖၚျပရန္ သံုးသည္။(ပံုကိုေတာ့   ေျပာင္းလဲသြားေစခ်င္း မဟုတ္ပါ)
2.         image သည္ element တစ္ခုအတြင္းမွာေရာက္ေနလ်ွင္  ၎သည္ link သြားရမည့္ေနရာကို  ရွင္းျပရန္ သံုးပါသည္။
3.         image  ကို   decotation (တန္ဆာဆင္) တစ္ခုတည္း   အတြက္သာ သံုးမယ္ဆိုရင္လဲ ၎ကို သံုးပါတယ္။


Image အတြက္လိုအပ္ေသာ သတ္မွတ္ခ်က္မ်ား


Attribute
Value
Description
align
top
bottom
middle
left
right
Image ရွိခ်င္တဲ့ေနရာ  

<img src=" "  align="middle">
border
pixels
Image  ပံု၏ အနားသတ္ အထူ၊အပါး
<img src=" "  border="5" />
border အေရာင္ထည့္ခ်င္လ်ွင္ bordercolor ေပါ့ဗ်ာ။
height
pixels
%
အျမင့္   ( height="  ")
hspace
pixels
Body ၏ မ်ဥ္းနွင့္ ဘယ္ေလာက္ (အလ်ား)လိုက္အကြာမွာ (whitespace)  ထားခ်င္တယ္ဆိုတာကိုေျပာတာပါ။  left နွင့္ right ထားသာထက္ပိုျပီးတိက်စြာ ထားနိုင္ပါတယ္။
 (hspace=" ")
vspace
pixels
Body ၏ မ်ဥ္းနွင့္ ဘယ္ေလာက္ (ေဒါင္)လိုက္အကြာမွာ (whitespace)  ထားခ်င္တယ္ဆိုတာကိုေျပာတာပါ။  top နွင့္ bottom ထားသာထက္ပိုျပီးတိက်စြာ ထားနိုင္ပါတယ္။
(vspace="  ")
width
pixels
%
အက်ယ္


Image  anign ထည့္ပံု


<html>
<body>

<p>
An image
<img src=" " alt="heart" align="bottom" width="32" height="32" />
မ်ဥ္းေၾကာင္းအေပၚမွ
An image
<img src=" " alt="heart" align="middle" width="32" height="32" />
မ်ဥ္းေၾကာင္းေအာက္မွ
An image
<img src="  " alt="heart" align="top" width="32" height="32" />
စာပိုဒ္ထဲမွ
</p>

<p>
<b>Note:</b> align="bottom" is the default alignment!
</p>

<p>
<img src="   " alt="heart" width="32" height="32" />
စာပိုဒ္ မတိုင္ခင္
</p>

<p>
စာပိုဒ္ျပီးတဲ့ေနာက္
<img src="" alt="heart" width="32" height="32" />
</p>

<p> align သတ္မွတ္ျခင္းသည္ HTML 4 ထဲမွာ ကန္သတ္ခ်က္ေတြရိွပါတယ္၊ ျပီးေတာ့ ၎ tag သည္  HTML 4.01 Strict DTD နွင့္ XHTML 1.0 Strict DTD မွာေတာ့ support မျဖစ္ပါဘူး၊  CSS  ထဲမွာလဲ အသံုးျပန္နိုင္ပါတယ္။</p>

</body>
</html>

     က်န္ေသာ tag မ်ားကိုေတာ့ အစားထိုးျပီးေလ့လာၾကည့္ပါ၊ေအာက္ကပံုေပၚလာပါလိမ္မယ္။

An image Angry မ်ဥ္းေၾကာင္းအေပၚမွ An image Angry မ်ဥ္းေၾကာင္းအလယ္ An image Angry စာပိုဒ္ထဲမွ
Note: align="bottom" is the default alignment!
Angryစာပိုဒ္မတိုင္ခင္
စာပိုဒ္ျပီးတဲ့ေနာက္Angry
         align သတ္မွတ္ျခင္းသည္ HTML 4 ထဲမွာ ကန္႕သတ္ခ်က္ေတြရိွပါတယ္၊ ျပီးေတာ့ ၎ tag သည္  HTML 4.01 Strict DTD နွင့္ XHTML 1.0 Strict DTD မွာေတာ့ support မျဖစ္ပါဘူး၊  CSS  ထဲမွာလဲ အသံုးျပဳနိုင္ပါတယ္။


Thumbnails

         ဆိုတာ images ၏ အရြယ္စားကိုအေသးငယ္ဆံုးျဖစ္ေအာင္ျပဳလုပ္ေပးတာပါ၊
သူ႕ရ႕ဲသေကၤသေလးက
 

<a href="sunset.gif">
<img src="thmb_sunset.gif">
</a>

Thmb ဆိုတဲ့သေကၤတပါ။


ဒီဥပမာေလးကေတာ့ မိမိကြန္ပ်ဳတာထဲရိွ image ကို  Img src   နဲ႕ညြန္းျပီးသံုးထားတာပါ။




<html>
<head><title> use the image</title></head>
<body>
<img src=" C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg  "border=" 4"h
space=" 5"vspace="10"alt="This is image  "align="center"height="100"width="200">
</body>
</html>


ဒီေလာက္ဆိုရင္ေတာ့ image အပိုင္းကို နားလည္မယ္လိုထင္ပါတယ္။ မွားတဲ့ေနရာေလးေတြကိုျပင္ေပးသြားခဲ့ပါ။

                                                                        
                                                                                                         အားလံုးကိုေလးစားလ်က္ပါ၊

Division( div)

Oh! You come to my blog. Welcome....
     
        div(division) သည္ HTML Document ထဲမွ အစိတ္အပိုင္းတစ္ခုကို သတ္မွတ္ရန္အသံုးျပဳပါ သည္၊  ဆိုလိုတာက  block –element  ေတြကို  အုပ္စုဖြဲ၍  style  fromat  အျဖင့္ အသံုးျပဳ ပါသည္။ ျပီးေတာ့ <div> tag သည္ web page တစ္ခု တည္ေဆာက္ရန္(layout) CSS နွင့္ အသံုးမ်ားပါတယ္။  ေအာက္ကပံုစံကိုၾကည့္လိုက္ပါဦး------
 


<html>
<body>
<h3>ေခါင္းစဥ္</h3>
<p>စာပိုဒ္။</p>
<div style="color:#008000">
  <h3>ေခါင္းစဥ္</h3>
  <p>စာပိုဒ္။</p>
</div>
</body>
</html>


အစိမ္းေရာင္ေျပာင္းသြားတာက style color သတ္မွတ္လို႕ပါ၊ Style ေနရာမွာ က်န္တဲ့အရာေတြကို
အစားထိုးအသံုးျပဳနိုင္ပါတယ္။ဒီေနရာမွာ သတ္မွတ္ေသာ style သည္  inline style ျဖစ္ပါတယ္။


ေခါင္းစဥ္


စာပိုဒ္။

ေခါင္းစဥ္


စာပိုဒ္။


 ေအာက္က CSS နဲ႕ div သတ္မွတ္တဲ့ ပံုစံ မွာ div ကို  class and id တို႕နဲ႕ တြဲျပီး ေခၚသံုးထားတာကို သတိျပဳေစခ်င္ပါတယ္ ၊ အဲဒီလို ေခၚသံုးလိုက္ေတာ့ body ထဲမွာ ကိုလိုခ်င္တာကို div နဲ႕ format ခ်လို႕ ရတယ္ ၊ div သည္ group -element ေတြကို  format လုပ္နိုင္တာကို သတိျပဳမိပါမွာ

    

<html>
<head>
<style type="text/css">
div.kyawko
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}       
 
}
div.kyawko:hover {background:#66ff66;}
div.thu
{
  text-align: center;
  font-weight: normal;
  width: 130px;
  margin: 2px;
}
</style>
</head>
<body>
<div class="kyawko">
 <img src ="https://sites.google.com/site/moethu33/thet-mon-myint-02.jpg"width="120"height="90"></a>
 <div class="thu">သက္မြန္ျမင့္(ခ်စ္ခ်စ္)</div>
</div>
<div class="kyawko">
 <img src="https://sites.google.com/site/moethu33/plw.jpg"width="110" height="90" />
 <div class="thu">ပုလဲ(ခ်စ္သူ)</div>
</div>
</body>
</html>


 ဥပမာ မွာ  (div. kyawko) ဆိုျပီး ေခၚသံုးထားတာကိုေတြ႕မွာပါ။
div. kyawko ဆိုတာ image ၏ size ကိုသတ္မွတ္တာ မဟုတ္ပါဘူး ၊  image frame ကို သတ္မွတ္သာ ျဖစ္ပါတယ္၊( ေဘာင္ခက္တာေပါ့ဗ်ာ) ။
div.kyawko:hover ဆိုတာ link style ကို သတ္မွတ္ထားတာပါ။ ကၽြန္ေတာ္ က ဒီေနရာမွာ frame တစ္ခုလံုးကို hover လုပ္ထားတာျဖစ္ပါတယ္။ image ရိွတဲ့ေနရာကိုတာ hover လုပ္ျခင္တယ္ဆိုရင္ေတာ့
div.kyawko a:hover img {border: 1px solid red;} ဆိုျပီး ေၾကညာရပါတယ္။ img ဆိုတာေတာ့ ပါရပါမယ္။ဒီေနရာမွာေတာ့ hover style မေပၚပါဘူး။
div.lin ဆိုတာ ပံုထဲမွာ ေရးထားတဲ့ စာသားေတြရဲ႕ style ကို သတ္မွတ္သာ ျဖစ္ပါတယ္။




သက္မြန္ျမင့္(ခ်စ္ခ်စ္)


ပုလဲ(ခ်စ္သူ)



Span
        Span သည္  inline style ေတြသတ္မွတ္တဲ့ အခါမွာ အသံုးမ်ားပါတယ္။ CSS နဲ႕သတ္မွတ္မယ္ ဆိုရင္ေတာ့  class ကိုေတာ့ ေခၚသံုးရပါတယ္။ ကိုလိုခ်င္ေသာ ေနရာေရာက္မွ (span class=” “) ဆိုျပီးေၾကညာလိုက္ေပါ့။ ေအာက္က ဥပမာေတြ ၾကည့္လိုက္ပါဦး--------

<html>
<head>
<style type="text/css">
.kyaw {color:blue;font-weight:bold}
.ko {color:green;font-weight:bold}
</style>
</head>
<body>
<p>လြတ္လပ္ေပ်ာ္ရြင္ေနေသာ <span class ="kyaw">ခ်စ္သူ</span> ေမွာင္မိုက္ေသာ <span class="ko">ကိုဘဝ</span> ထဲကိုမလာပါနဲ႕ကြာ.</p>
</body>
</html>

ဲေပၚလာေသာပံုကို ၾကည္႕လိုက္ပါ---

လြတ္လပ္ေပ်ာ္ရြင္ေနေသာ ခ်စ္သူ ေမွာင္မိုက္ေသာ ကိုဘဝ ထဲကိုမလာပါနဲ႕ကြာ.

What is HTML?

Oh! You come to my blog. Welcome....
        

      Web Browser   ျဖစ္သည္ Internet Explorer (သို႕) Netspace Communicator စသည္တို႕အား ဘာလုပ္ရမည္ ဆိုသည္ကို ေျပာျပ(ညြန္းၾကား)သည္ သေကၤတ အစုအေဝးျဖစ္ပါသည္။ HTML သည္ စာသား Format လုပ္ျခင္း၊မ်ဥ္းေၾကာင္းမ်ား ထည့္သြင္းျခင္း၊ရုပ္ပံုမ်ား၊အသံမ်ားနွင့္ ရုပ္ရွင္မ်ားအာ ေပါင္းထည့္ ျပီး File တစ္ခုအတြင္း သိမ္းဆည္းနိုင္ရန္ ခြင့္ျပဳေပးျပီး ၎ကို HTML File (Internet Document)ဟုတ္ေခၚသည္။
      HTML သည္ Internet Web pages( အင္တာနက္ေပၚရိွ စာမ်က္နွာမ်ား) ကိုေရးသားသည့္  language တစ္ခုျဖစ္ပါသည္။ Internet Technology အသံုးျပဳျပီး Data(information ) မ်ားအား ဖလွယ္မႈလုပ္ရာတြင္ Web   page  မ်ားသည္  အဓိက်ပါတယ္။   HTML   အား သာမန္   Text Editor    ကို     အသံုးျပဳျပီး ေရးသားနိုင္ပါတယ္။   HTML  ကိုေလ့လာသူတစ္ဦးအေနျဖစ္   Notepad  ကဲ့သို႕ေသာ Plain Text Editor တစ္ခုခုျဖစ္ စတင္ေရးသားလ်ွင္ ေကာင္းပါသည္။ အဘယ္ေၾကာင့္ဆိုေသာ HTML Editor မ်ားသည္ HTML code  (tag ) သေဘာတရားမ်ားကို နားလည္ရန္လိုပါတယ္။ ထို႕အျပင္ Internet  Communication Line မ်ားျဖစ ္ အသံုးျပဳျပီးခ်ိတ္ဆက္ျပဳလုပ္ထားရာ  အခ်က္လက္မ်ား  အေပးအယူျပဳလုပ္ရာတြင္   Data ပမာဏ (Byte)  အနည္းဆံုးျဖစ္ေလ ပိုျပီးျမန္ေလျဖစ္ပါသည္။  သို႕ရာတြင ္ HTML  Editor  မ်ားသည္ ေကာင္းမြန္လယ္ ကူသည္ Feature မ်ားပါရိွသျဖင့္  Multimedia Persentation မ်ားပါဝင္သည့္  Web page စသည္မ်ားကို လ်ွင္ျမန္စြာ ဖန္းတီးလိုပါက အသံုးျပဳနိုင္ပါသည္။
                 
           HTML မွာ Static HTML နွစ္ Dynamic HTML ဆိုျပီးနွစ္မ်ိဳး၇ိွပါတယ္။      Internet Web Pages  ေပၚတြင္ ပံုေသလြင့္ထားရေသာအခ်က္လက္မ်ားပါင္သည့္ ဖိုင္အမ်ိဳးစားကို  Static  HTML လို႕ပါတယ္။ Multimadia CD အမ်ားစုကိုေတာ့ Statis HTML နဲ႕ေရးနိုင္ပါတယ္ ။အီလက္ထေရာနစ္ ကူသန္းေရာင္းဝယ္ေရးျပဳလုပ္သည္ Super Market Stroe ဆိုင္မ်ား၊ဘဏ္လုပ္ငန္းမ်ား၊မိုးေလဝသသတင္းမ်ား အခ်ိန္နဲ႕အညီေျပာင္းလဲမူရိွေနေသာ Web pages Files မ်ားကို Dynamic HTML File ဟုေခၚသည္။   ၄င္းကို    Web   Server    မ်ားေပၚတြင္အလြယ္ တကူ  Update ျပဳလုပ္နိုင္ေအာင္ Database မ်ားအားအသံုးျပဳ ေရးသားၾကသည္။အခ်ိဳ႕ဖိုင္မ်ားကို
Active Server Pages (ASP) File မ်ားဟုေခၚသည္။HTML ေလ့လာမယ္ဆိုရင္ ဒီ Notpead ++ ကို အရင္ Runလိုက္ပါ။ေတာ္ေတာ္ေလးဆံုတဲ့ေဆာ့ဝဲေလးပါ။  HTML သာမက က်န္ေသာ program ေတြကိုလဲ Run နိုင္ပါတယ္။ တစ္ခုေလး Runရံုနဲ႕က်န္တဲ့ program  ေတြပါ  ေလ့လာလို႕ရပါတယ္။       ဒီမွာ    ေဒါင္းလိုက္ပါ။ 
Notepad ကို Save တဲ့အခါ (*.html (or) *.htm ျဖစ္ေစ့ပါ။


 HTML Tags ေရးထံုးမ်ား
<html></html>
<title></title>
<head></head>တြင္ နံပါတ္ေတြေပးျပီးေရးနိုင္ပါသည္။
<body></body>

<html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>


ေအာက္ကဇယားပါထပ္ၾကည့္လိုက္ပါဦးဗ်ာ

HTML head Elements

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base /> Defines a default address or a default target for all links on a page
<link /> Defines the relationship between a document and an external resource
<meta /> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

အေသးစိတ္ရွင္းျပစရာမလိုေလာက္ေတာ့ပါဘူး၊စာကိုၾကည့္သာနဲ႕ ဘာကိုဆိုလိုတယ္ဆိုတာ သေဘာေပါက္မယ္လို ထင္ပါတယ္။အစားထိုးျပီးေလ့က်င္တာ ပိုျပီးနားလည္လြယ္ပါတယ္။ ေရးရမွာပ်င္းတယ္ဆိုရင္ ေရးထားတာေလးေတြကို Notepad မွာ Copy ၊  Paste လုပ္ျပီးသံုးၾကည့္လိုက္ပါ။

Heading

     Heading တြင္ level(6) ခု၇ိွပါတယ္။<h7></h7> ထည့္ေပါင္းပါက (၇)နွစ္မ်ိဳးျဖစ္ပါတယ္၊တစ္မ်ိဳးစီမွာ ပံုမွန္အရြယ္စားရိွပါတယ္။ေအာက္မွာၾကည့္ၾကည့္ပါဦး-

<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>


  html ဖိုင္နဲ႔ေစ့လိုက္ရင္ ေအာက္ကပံုစံေလးေပၚလာပါလိမ္မယ္-

Headings

are

great

for

titles
and subtitles


     ဇယားေလးေတြကိုယွဥ္ၾကည့္ရင္ သေဘာေပါက္သြားမွာပါ။                                                                          
 Body

     body ရဲ႕ boundry ကို သတ္မွတ္ၾကမယ္၊ code ေတြကိုၾကည့္တာနဲ႕သိမွာပါ။
 
<body topmargin="50">
 
<body leftmargin="50">
 
<body text="red" >    or  <body text="rgb(255,0,0)" >

<body link="white" vlink="black" >  or  <body link="rgb(255,255,255)"
 vlink="rgb(0,0,0)" >