cars

วันจันทร์ที่ 21 พฤศจิกายน พ.ศ. 2559

Upload ​တင္​နည္း ​ႏွင့္ Downlaod Link ​ခ်​ေပး​နည္း



​မ​ဂၤ​လာ​ပါ  ​က်ြန္​ေတာ္ ​သည္​ေန႔ ​ေတာ့ Upload  ​တင္​နည္း  ​တင္​ထား​ေသာ ​ေဒါင္း​လင့္​အား ​ဘ​ေလာ့​မွာ Downlaod  Link  ​ခ်​ေပး​နည္း  ​ေလး​ကို ​ေရး​ျဖစ္​ပါ​တယ္.. ​ဒါ​ေလး​က​လည္း ​က်ြန္​ေတာ္ ​ရဲ့ ​ညီ​ေလး ​အ​ဆို​ေတာ္    ​ေနာင္​ရဲ​ထြဋ္    ​အ​တြက္ ​ေတာင္း​ဆို​ထား​လို႔  ​ခု​လို​အ​ေသး​စိတ္ ​ေရး​သား​တင္​ေပး​လို္​က​တာ​ပါ..
​ဘ​ေလာ့​ကာ​ေတြ​အ​တြက္​ေတာ့  ​အား​လံုး​သိ​ထား​ေသာ​နည္း​ပ​ညာ​ျဖစ္​တဲ့​အ​တြက္  ​ေက်ာ္​သြား​လိုက္​ပါ​ေနာ္..

​ ပ​ထ​မ​ဆံုး  ​မိ​မိ​တို႔  Upload  ​တင္​လို​ေသာ ​ဆိုဒ္​မွာ ​အ​ေကာင့္​တ​ခု ​လုပ္​ထား​ဖို႔​လို​ပါ​လိမ့္​မယ္  ​အဲ​တာ​က​ေတာ့ ​ေျပာ​မ​ျပ​ေတာ့​ပါ​ဘူး​ေနာ္ ​ဆိုဒ္​တ​ခု​မွာ Singup  ​လုပ္​တာ​ေတာ့ ​အဲ​ေလာက္ ​ခက္​ခဲ​မယ္​မ​ထင္​လို႔​ပါ... ​တင္​ႏိုင္​ေသာ​ဆိုဒ္း​ေတြ ​က​ေတာ့ ​မ်ား​ပါ​တယ္  ​ဒါ​ေပ​မယ့္ ​က်ြန္​ေတာ္ ​က​ေတာ့  
​ယ​ခု ​န​မူ​နာ​အ​ေန​နဲ႔  Mediafire.com  ​နဲ႔​ဘဲ ​န​မူ​နာ​ျပ​လိုက္​ပါ​တယ္​ေနာ္...
​ပ​ထ​မ​ဆံုး www.mediafire.com  ​ကို​သြား​ၿပီး ​အ​ေကာင့္​တ​ခု​လုပ္​လိုက္​ပါ​ေနာ္။ ​အ​ေကာင့္​တ​ခု​ရ​တာ​နဲ႔ ​စ​လို႔​ရ​ပါ​ၿပီ..​ေနာ္ ​ေအာက္​မွာ ​ပံု​ေလး​ေတြ​နဲ႔ ​ျပ​ထား​ပါ​တယ္..​စ​မယ္​ေနာ္..
​အ​ေကာင့္​ဝင္​လိုက္​တာ​နဲ႔....

Upload   ​တင္​ႏိုင္​ေသာ ​ဆိုဒ္​မ်ား
================

​စ​တဲ့ ​ဆိုဒ္​ေတြ ​မ​က​ဘဲ ​မ်ား​ႀကီး​ရွိ​ပါ​တယ္ ​ႏွစ္​သက္​ရာ​က​ေန ​တင္​ႏိုင္​ပါ​တယ္..

​ပ​ထ​မ​ဆံုး​အ​ေန​နဲ႔  ​ေတြ႕​ၾက​ရ​မွာ​က​ေတာ့...

  ​အ​ေပၚ​မွာ​ျပ​ထား​သ​လို Upload  ​ဆို​တာ​ေနာက္​က ​ဖိုင္​တည္​ေဆာက္​ဖို႔ ​ဆို​တာ​ေလး ​က​လစ္​ၿပီး  ​ဖိုင္​ေလး​ေတြ ​တည္​ေဆာက္​ထား​လိုက္​ပါ... ​အဲ​တာ​ဆို​ျပန္​ရွာ​မယ္​ဆို​လည္း ​လြယ္​ကူ​ေစ​ပါ​တယ္.. ​ဥ​ပ​မာ။ ။​ေဆာ့​ဝဲလ္...apk...ebook...mp3...​စ​တာ​ေတြ​ေပါ့  ​ခု​က်​ေနာ္  mp3 ​ေလး​တ​ခု​တင္​ျပ​မွာ​မို႔  ​ဖိုင္​ေလး​တ​ခု ​တည္​ေဆာက္​လို္​က​ပါ​တယ္.. ​ၿပီး​တာ​နဲ႔ ​ကိုယ္​တည္​ေဆာက္​ထား​တဲ့ ​ဖိုင္​ေလး​ကို ​က​လစ္​လိုက္​ပါ​ေနာ္...


  ​အ​ေပၚ​က​တိုင္း​က်​လာ​မယ္  ​အ​ထဲ​မွာ ​ဘာ​မွ​မ​တင္​ရ​ေသး​ဘူး​ဆို ​ဘာ​မွ​မ​ရွိ​ေသ​ေၾကာင္း​ေျပာ​ထား​ပါ​မယ္  ​တင္​လိုက္​ၾက​မယ္​ေနာ္... ​အ​ေပၚ​က Upload  ​ဆို​တာ​ကို​ကလ္​စ​လိုက္​ပါ ​ေအာက္​မွာ From Computer ​နဲ႔ From Web ​ဆို​တာ​က်​လာ​မယ္   ​ကြန္​ပ်ဴ​တာ  ​ကို​ေရြး​ခ်ယ္ ​က​လစ္​ေပး​လိုက္​ပါ​ေနာ္.. ​ကိုယ္​တင္​မဲ့  ​အ​ေၾကာင္း​အ​ရာ​က ​ကိုယ့္​ကြန္​ပ်ဴ ​တာ​ထဲ​မွာ ​ရွိ​ေန​မွာ ​မို႔​ပါ...​အို​ေက​ေနာ္...​က​လစ္​လိုက္​တာ​နဲ႔


​ အ​ေပၚ​က​ပံု​တိုင္း​က်​လာ​မယ္ ​က​လစ္​လိုက္​ပါ..​ဒါ​ဆို ​မိ​မိ​တို႔ ​ကြန္​ပ်ဴ ​တာ​ဖိုင္ ​က်​လာ​မယ္​ေနာ္  ​မိ​မိ​တို႔ ​တင္​လို​တဲ့  ​အ​ေၾကာင္း​ရာ​ရွိ​တဲ့ ​သိမ္း​ထား​တဲ့  ​ဖိုင္​ကို ​အ​ေရာက္​သြား​လိုက္​ပါ​ေနာ္...


​ေရာက္​တာ​နဲ႔ ​တင္​လို​ေသာ ​အ​ေၾကာင္း​အ​ရာ​ကို ​တ​ခ်က္​က​လစ္​ပါ  ​ေနာက္ ​ေအာက္​က Open  ​ဆို​တာ​ဆက္​ကလ္​စ​လိုက္​ပါ.. ​အ​ေၾကာင္း​အ​ရာ​ကို  Double  ​က​လစ္​လိုက္​လည္း​ရ​ပါ​တယ္​ေနာ္..


​အ​ေပၚ​က​ပံု​မွာ​လို  Upload  ​ေပး​ဖို႔ ​အ​သင့္​အ​ေန​ထား​ျဖစ္​ေန​ပါ​ၿပီ ​အဲ​လို​ျဖစ္​တာ​နဲ႔ ​ေအာက္​နား​က Begin Uplaod  ​ဆို​တာ​က​လစ္​ေပး​လိုက္​ရံု​ပါ​ဘဲ​ေနာ္...


​ သည္​အ​ဆင့္​မွာ​ေတာ့ ​မိ​မိ​တို႔ ​တင္​တဲ့ ​အ​ေၾကာင္း​အ​ရာ​ေပၚ​မူ​တည္​ၿပီး ​အ​ခ်ိန္​ေစာင့္​ရ​ပါ​မယ္  ​ဥ​ပ​မာ ​ေဆာ့​ဝဲလ္ ​ဆိုဒ္​ႀကီး​တာ​ေတြ​ဆို ​အ​ခ်ိန္​ၾကာ​ပါ​မယ္  mp3..ebook  ​ေတြ​က​ေတာ့ ​ခ​ဏ​တာ​နဲ႔ ​ၿပီး​ပါ​မယ္..​ၿပီး​တာ​နဲ႔ ​ေနာက္​က Copy Link ​ဆို​တာ​က​လစ္​ၿပီး ​ေဒါင္း​လင့္​ကို ​ယူ​ႏိုင္​ပါ​တယ္..
​ေနာက္​တ​ဆင့္ ​ယူ​နည္း​လည္း​ျပ​လိုက္​ပါ​မယ္...​ေနာ္


  ​ဒါ​က​ေတာ့ ​ဘယ္​ခ်ိန္​ယူ​ယူ ​ရ​တဲ့​နည္း​ေလး​ပါ ​မိ​မိ​လို​ျခင္​တဲ့ ​အ​ေၾကာင္း​အ​ရာ ​ရဲ့​လင့္​ကို ​သူ႔​ေနာက္​က ​မ်ွား​မည္း​ေလး ​က​လစ္​ပါ ​ေနာက္ Copy Link ​ဆို​တာ​က​လစ္​လိုက္​တာ​နဲ႔ ​မိ​မိ​တို႔ ​ေမာက္​ထဲ​မွာ ​လင့္​ပါ​လာ​ပါ​မည္... ​ဒါ​ဆို ​အ​ဆင္​ေျပ​ပါ​ၿပီ  ​အဲ​လင့္​က ​ဘ​ေလာ့​မွာ​ဘဲ ​ေဒါင္း​ဖို႔ ​တင္​ေပး​ေပး  ​သူ​ငယ္​ခ်င္း​ဆီ​ဘဲ​ပို႔​ေပး​ေပး  ​အ​သံုး​ျပဳ​လို႔​ရ​ပါ​ၿပီ... ​ဒါ​ဆို  ​အ​ေၾကာင္း​ရာ​တစ္​ခု​ခု​ကို  ​သူ​မ်ား​ေပး​ဖို႔  Uplaod  ​တင္​တဲ့​နည္း​လမ္း​ကို  ​နား​လည္​ေလာက္​ပါ​ၿပီ​ေနာ္... ​အ​ဆင္​ေျပ​ၾက​ပါ​ေစ..

​ ေနာက္​ထပ္  ​မိ​မိ​တို႔​တင္​ထား​တဲ့ ​အ​ေၾကာင္း​ရာ​ကို  ​မိ​မိ​တို႔ ​ဘ​ေလာ့​မွာ  ​သူ​မ်ား​အ​သံုး​ျပဳ​ႏိုင္​ေအာင္ ​တင္​ေပး​နည္း​ေလး​ကို​ဆက္​ျပ​ပါ​မယ္...

​ဘ​ေလာ့​မွာ  Downlaod Link  ​ခ်​ေပး​နည္း ( ​ဘ​ေလာ့​ကာ​ဆိုင္​ရာ )

​ပ​ထ​မ​ဆံုး ​မိ​မိ​တို႔​ဘ​ေလာ့​ရဲ့  post ​တင္​ဖို႔ ​အ​ေန​ထား​ကို ​သြား​လိုက္​ပါ​ေနာ္..


​ အ​ေပၚ​က​တိုင္း ​ေရာက္​တာ​နဲ႔  ​မိ​မိ​တို႔  ​ေဒါင္း​လင့္ ​ခ်​ေပး​လို​ေသာ ​အ​ေၾကာင္း​ရာ ​ရဲ့ ​လင့္​ကို ​တင္​ေပး​ၾက​မယ္​ဗ်ာ... ​တင္​တာ​က​လည္း ၂  ​နည္း​ရွိ​ပါ​တယ္.. 
​နံ​ပါတ္(၁)  ​စာ​သား ​နဲ႔ ​ေဒါင္း​လင့္​ေပး​နည္း
​နံ​ပါတ္ (၂)  ​ပံု​ေလး​ေတြ​နဲ႔ ​ေဒါင္း​လင့္​ေပး​နည္း
​ ဆို​ၿပီး​ေပါ့..​ႀကိဳက္​တာ​နဲ႔  ​ေပး​ပါ...​လုပ္​ေဆာင္​ခ်က္​က​ေတာ့ ​တူ​တူ​ဘဲ​ျဖစ္​ပါ​တယ္...​ေနာ္  ​က်​ေနာ္ ​စာ​သား​ေလး​နဲ႔ ​ျပ​သ​ထား​ပါ​တယ္.... ​ပံု​မွာ​ျပ​ထား​သ​လို​ေပါ့   ​သည္​မွာ    ​ေဒါင္း​ရန္  ​ဆို​တာ​ေလး​မွာ
​သည္​မွာ   ​ဆို​တာ​ေလး​ထဲ​ကို ​မိ​မိ​တို႔  ​ေဒါင္း​လင့္​ကို ​ဖြက္​ထား​ရ​မွာ​ျဖစ္​ပါ​တယ္..​အဲ​အ​တြ့္
​သည္​မွာ   ​ဆို​တာ​ေလး​ကို  Select  ​ လုပ္​ေပး​လိုက္​ပါ  ​ၿပီး​တာ​နဲ႔ ​အ​ေပၚ​ဘား​က  link   ​ဆို​တာ​ကို ​က​လစ္​လိုက္​ပါ​ေနာ္... ​ေဘာ္​က​ေလး​တ​ခု​က်​လာ​မွာ​ျဖစ္​ပါ​တယ္...


​ ခု​လို ​က်​လာ​တဲ့ ​ေဘာ္​က​ေလး​မွာ ​အ​ကြက္​ေလး  ၂​ခု ​ရွိ​ပါ​တယ္..​အ​ေပၚ​က​ေတာ့ ​မိ​မိ​တို႔ ​ေစာ​ေစာ​က​ေရး​သား​ခဲ့​တဲ့  ​သည္​မွာ   ​ဆို​တာ​ေလး​ရဲ့ ​ေန​ရာ​ျဖစ္​ပါ​တယ္...  ​သည္​ေန​ရာ​မွာ ​ပံု​နဲ႔ ​တင္​တဲ့ ​သူ​ေတြ​အ​တြက္  ​အ​ေပၚ​အ​ကြက္​ေလး​က ​ဘာ​မွ ​မ​ေပၚ​ဘဲ ​ျဖစ္​ေန​မယ္  ​ပံု​နဲ႔​မို႔​ေပါ့...
​အို​ေက  ​ေအာက္​က Web Adress ​ဆို​တာ​ထဲ​မွာ​ဘဲ  ​မိ​မိ​တို႔  ​ေဒါင္း​ေစ​ျခင္​ေသာ  ​လင့္​အ​မွန္​ကို
​ ထည့္​ေပး​လိုက္​ပါ​ေနာ္.. ​ေစာ​ေစာ​က  Upload  ​တင္​တုန္း​က ​ေန​ရာ​မွာ  ​လင့္​ကို ​ေကာ္​ပီ ​သြား​ယူ​လိုက္​ပါ ​သည္​မွာ ​ထည့္​ေပး​လိုက္​ပါ... ​အဲ​လို​နဲ႔  ​ပို႔စ္​ထဲ​က ​သည္​မွာ   ​ဆို​တာ​ေလး​က ​ပံု​မွန္​စာ​သား​မ​ဟုတ္​ေတာ့​ဘဲ
​လင့္​အ​ျဖစ္ ​ေျပာင္း​လည္း​ေန​ပါ​ၿပီ...​ေနာ္....​ဒါ​ဆို ​သ​ေဘာ​ေပါက္​ေရာ​ေပါ့....​ဟူးး​ေမာ​ထာာ​ေိ​ေိ
​ မွတ္​ခ်က္   ။      ။  ​ပံု​နဲ႔ ​ေဒါင္း​လင့္​ေပး ​တာ​လည္း ​တူ​တူ​ပါ​ဘဲ ​ႀကိဳက္​တဲ့ ​ပံု​ထည့္​ပါ... ​ၿပီး​တာ​နဲ႔  ​အဲ​ပံု​ကို ​က​လစ္​ပါ.. ​ေနာက္ ​အ​ေပၚ​က link ​က​လစ္​ပါ..​တူ​တူ​ပါ​ဘဲ​ဗ်ာ..

​အ​စ​စ​အ​ဆင္​ေျပ​ပါ​ေစ​လို႔  ​ဆု​ေတာင္း​လို္​က​ပါ​တယ္ ​မ​ရွင္း​တာ​မ်ား​ရွိ​ပါ​က  ​ခ်က္​ေဘာက္​မွာ ​ေအာ္​ခဲ့​ပါ​ေနာ္...

​စာ​အုပ္​အ​ျဖစ္ ​ေဒါင္း​ယူ​လို​ပါ​က

( OR )


​ဘ​ေလာ့​ခ​ရီး​သည္

Leaves-Brushes for photoshop cs







Photoshop သမားမ်ားအတြက္
Leaves-Brushes plugin ေလးၿဖစ္ပါတယ္
ရွာထားတာေတာ့ၾကာၿပီ ခုမွဘဲေပးၿဖစ္တယ္
ေအာက္မွာရယူၾကပါခင္ဗ်

DOWNLOAD

မိမိရဲ့ folder ကို colour ခ်ိန္းမယ္

အလွအပၾကိုက္သူေတြအတြက္လို႕ပဲေျပာရမလား ဒါမွမဟုတ္ မိမိရဲ႕ file or folder ေတြကို မိမိတို႕ထည့္ထားတဲ့ ဖိုင္အလုိက္ အေရာင္ နဲ႕ သတ္မွတ္ျပီးထားခ်င္တဲ့ သူေတြအတြက္ folder icon အေရာင္ေလးေတြကို အေရာင္ေျပာင္းလုိ႕ရတဲ့ ေဆာ့၀ဲေလးတစ္ခု ပါ။


1.အသံုးျပဳပံုကေတာ့ လြယ္ကူပါတယ္။ေအာက္တြင္ေပးထားေသာ ေဆာ့၀ဲအားေဒါင္းျပီး install လုပ္ပါ။အထဲတြင္ key generator ပါပါတယ္။ 2.မိမိတို႕အလုိရွိေသာေျပာင္းခ်င္ေသာ folder အား right click ေပးျပီး ေျပာင္းနိုင္ပါတယ္။ေအာက္ပံုတြင္ၾကည့္ ပါ။


Software ရယူရန္
 DOWNLOAD

วันอาทิตย์ที่ 20 พฤศจิกายน พ.ศ. 2559

HTML ေရးသားေသာ Tool မ်ား


Note pad သုိ႔မဟုတ္ Text Editor ကုိသုံးျပီး ေရးသားျခင္း
HTML ကုိ professional HTML editor ေတြသုံးျပီး ဖန္တီးႏုိင္ပါတယ္။
  • Adobe Dreamweaver
  • မုိက္ခရုိေဆာ့ဖ္ Expression Web
  • CoffeeCup HTML Editor
Windows ကြန္ျပဴတာေတြမွာပါတဲ့ Word, Excel ေတြသုံးျပီးလည္း ေရးလုိ႔ရပါတယ္။
ဒါေပမယ့္ HTML အေျခခံကုိကုိေလ့လာဖုိ႔အတြက္ PC မွာပါတဲ့ Note Pad ဒါမွမဟုတ္ Mac မွာပါတဲ့ Text Editor ကုိသုံးျပီးေလ့လာ ေရးသားၾကဖုိ႔တုိက္တြန္းခ်င္ပါတယ္။ ရုိးစင္းတဲ့ editor — Note Pad ကုိသုံးျပီးေလ့လာျခင္းက နည္းလမ္းေကာင္းတစ္ခုလုိ႔ယုံၾကည္ပါတယ္။
ကုိယ္တုိင္ ဝဘ္စာမ်က္ႏွာ တစ္ခုကုိ Note Pad အသုံးျပဳျပီး စတင္ဖန္တီးဖို႔အတြက္ ေအာက္ကအခ်က္ (၄) ခ်က္ကုိ အခုပဲစတင္လုိက္ပါ။

အဆင့္ ၁ — Note pad နဲ႔စမယ္။

Note pad ကုိဖြင့္ဖုိ႔အတြက္ —
Start Menu ကိုႏွိပ္ပါ။
    All Programme ကိုႏွိပ္ပါ။
        Accessorie ကုိသြားပါ။
           Note Pad ဆုိတာကုိေတြ႔ပါလိမ့္မယ္။ ႏွိပ္ျပီး ဖြင့္လုိက္ပါ။
search box ကေနလည္း notepad ဆိုျပီးေခၚနိဳင္ပါတယ္

အဆင့္ ၂ — Note pad အသုံးျပဳျပီး HTML ေရးသားျခင္း

Note Pad 
 ေအာက္က HTML code ေတြကုိ Note pad ထဲမွာရုိက္ထည့္ပါ။ မွန္ေအာင္ၾကိဳးစားျပီးရုိက္ပါ။ မွားခါမွ ေခၽြးျပန္ေအာင္ အမွားရွာရတာထက္စာရင္ တစ္ခါတည္း ေသခ်ာရုိက္တာက ပုိေကာင္းပါတယ္။
ဒီလိုမ်ိဳးရုိက္ရမွာျဖစ္ပါတယ္။
Note Pad

အဆင့္ ၃ — သင္ေရးထားတဲ့ HTML ကုိသိမ္းပါ။

Note pad ရဲ့ ဖိုင္ menu က Save as...ကုိေရြးပါ။
HTML ဖိုင္ တစ္ခုကုိ သိမ္းတဲ့ေနရာမွာ .htm ဒါမွ မဟုတ္   .html ဖိုင္ extension ေတြသုံးျပီး သိမ္းႏုိင္ပါတယ္။ အဲဒီ့ႏွစ္္ခုက ဘာမွမကြာပါဘူး။ သင့္အၾကိဳက္အေပၚမွာပဲမႈတည္ပါတယ္။
သင္မွတ္မိလြယ္တဲ့ နာမည္တစ္ခုေပးပါ။ ဖိုင္ Name ေနာက္မွာေတာ့ .html ဒါမွ မဟုတ္ .hml ပါရပါမယ္။

အဆင့္ ၄ — သုံးေနက် Browser (ဘေရာက္ဆာ) မွာ ဖြင့္ၾကည့္ပါ။

သင္သုံးေနက် Web browser (ဘေရာက္ဆာ) တစ္ခုကုိဖြင့္လုိက္ပါ။ ျပီးရင္ သူ႔မွာပါတဲ့ ဖိုင္ Menu ကတဆင့္ Open menu ကုိဖြင့္ျပီး သင္ေရးထားတဲ့ HTML ဖိုင္ ကုိ Double Click ႏွိပ္ျပီးဖြင့္ပါ။
ေအာက္မွာျပထားတဲ့အတုိင္းေပၚပါလိမ့္မယ္။
Result
ဒီစမ္းသပ္ေလ့က်င့္မႈက HTML မွာ ေလ့က်င့္သင့္တဲ့ သင္ခန္းစာေပါင္းမ်ားစြာရဲ့ အစျဖစ္ပါတယ္။ အေပၚမွာ ရွင္းျပထားတဲ့အတုိင္း လုိက္လုပ္ရင္ အဆင္ေျပမယ္ထင္ပါတယ္။


  http://www.soemoeaung.com
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

HTML Element မ်ား

HTML Element မ်ား

HTML document ေတြကုိ HTML element ေတြဆုိျပီ ေခၚေဝၚသတ္မွတ္ၾကပါတယ္။

HTML Element မ်ား

HTML element ဆုိတာက start tag နဲ႔ end tag ၾကားက အရာေတြအကုန္လုံးျဖစ္ပါတယ္။
Start tag * Element တြင္ပါဝင္ေသာအရာမ်ား End tag *
<p> ဒါက စာပုိဒ္တစ္ခုျဖစ္ပါတယ္။ </p>
<a href="default.htm"> လင့္ခ္တစ္ခုျဖစ္ပါတယ္။ </a>
<br /> ေရျပင္ညီ မ်ဥ္းတစ္ေၾကာင္းျဖစ္ပါတယ္။ ၎တြင္ End Tag မရွိပါ။ 
* Start tag ကုိတစ္ခါတစ္ေလမွာ opening tag လုိ႔လဲေခၚေလ့ရွိပါတယ္။ End tag ကုိေတာ့ closing tag လုိ႔ေခၚပါတယ္။

HTML Element Syntax

  • HTML element တစ္ခုကုိ start tag / opening tag နဲ႔အစျပဳပါတယ္။ end tag / closing tag နဲ႔အဆုံးသတ္ပါတယ္။
  • element မွာပါဝင္တဲ့ အရာ content ေတြကေတာ့ start နဲ႔ end tag ၾကားကအရာေတြျဖစ္ပါတယ္။
  • တစ္ခ်ိဳ႕တဲ့ HTML element ေတြမွာဗလာ empty content ပဲပါပါတယ္။
  • Empty element ေတြကုိ start tag နဲ႔ပိတ္ထားပါတယ္။
  • HTML element အမ်ားစုမွာ Attribute ေတြ ပါႏုိင္ပါတယ္။
Noteမွတ္ခ်က္ — Attribute ေတြအေၾကာင္းကုိ ေနာက္လာမယ့္အခန္းမွာ သင္ရပါမယ္။

HTML Element အတြဲမ်ား (Nested)

HTML element ေတြဟာ အတြဲလုိက္ ျဖစ္ႏုိင္ပါတယ္။ (အျခား HTML element ေတြလည္းပါႏုိင္ပါတယ္)။
HTML document ေတြမွာ HTML element အတြဲေတြပါရွိပါတယ္။

HTML Document ဥပမာ

<! DOCTYPE html>
<html>
<body>
<p>ဒါက ပထမ စာပုိဒ္ျဖစ္ပါတယ္။</p>
</body>
</html>
အေပၚက ဥပမာကုိ ၾကည့္ရင္ HTML element ၃ ခုပါတာကုိ ေတြ႔ရမွာျဖစ္ပါတယ္။

HTML ဥပမာရွင္းလင္းခ်က္

<p> element
<p>ဒါက ပထမစာပုိဒ္ျဖစ္ပါတယ္။</p> 
<p> element က HTML document မွာရွိတဲ့ စာပုိဒ္ကုိ သတ္မွတ္ပါတယ္။
ဒီ element မွာ start tag <p> တစ္ခုနဲ႔ end tag </p> တစ္ခုပါပါတယ္။
element မွာပါဝင္တဲ့ အရာ — ဒါကပထမစာပုိဒ္ျဖစ္ပါတယ္။
<body> element



<body><p>ဒါက ပထမစာပုိဒ္ျဖစ္ပါတယ္။</p> </body> 
<body> element က  HTML document ရဲ့ ကုိယ္ထည္ျဖစ္တဲ့ Body ကုိသတ္မွတ္ပါတယ္။
element မွ  start tag <body> တစ္ခုနဲ႔ end tag </body> တစ္ခုပါပါတယ္။
ဒီ element မွာ အျခား HTML element တစ္ခုပါပါတယ္။ (<p> element တစ္ခုပါတာကို ဆုိလုိပါတယ္)။

<html> element
<html>
<body>
<p>ဒါက ပထမစာပုိဒ္ျဖစ္ပါတယ္။</p>
</body>
</html>
<html> element က  HTML document တစ္ခုလုံးကုိ သတ္မွတ္ပါတယ္။
element မွ  start tag <html> တစ္ခုနဲ႔ end tag </html> တစ္ခုပါပါတယ္။
ဒီ element မွာ အျခား HTML element တစ္ခုပါပါတယ္။ (<body> element တစ္ခုပါတာကို ဆုိလုိပါတယ္)။

End Tag ကုိမေမ့ပါနဲ႔

တစ္ခ်ိဳ႕တဲ့ HTML element ေတြဟာ သင့္အေနန႔ဲ end tag ထည့္ဖုိ႔ေမ့ခဲ့ရင္ေတာင္ အမွား ျပမွာမဟုတ္ပါဘူး။ ၾကည့္လုိက္ရင္အဆင္ေျပေနမွာပါ။
<p>ဒါက စာပုိဒ္တစ္ခုျဖစ္ပါတယ္။
<p>ဒါက စာပုိဒ္တစ္ခုျဖစ္ပါတယ္။
အေပၚမွာျပထားတဲ့ ဥပမာကုိ browser (ဘေရာက္ဆာ) အမ်ားစုက အမွားမျပပဲလက္ခံပါတယ္။ closing tag ကဒီေနရာမွာ အေရးမၾကီးလုိ႔ပါ။
ဒါေပမယ့္ ဒီလုိေတာ့အျမဲမလုပ္သင့္ပါဘူး။ HTML element အမ်ားစု end tag ေမ့ခဲ့ရင္ေတာ့ မေမွ်ာ္လင့္ထားတဲ့ အမွားေတြျဖစ္လာေစႏုိင္ပါတယ္။

HTML Element အလြတ္မ်ား (Empty)

HTML element ေတြရဲ့အထဲမွာ ဘာမွမပါရင္ empty element ေတြလုိ႔ေခၚပါတယ္။
<br> ဆုိတာက Empty element တစ္ခုျဖစ္ျပီး closing tag မပါပါဘူး။ (<br> tag ကေအာက္တစ္ေၾကာင္းဆင္းဖုိ႔ line break အျဖစ္အသုံးျပဳၾကတာပါ)။
 မွတ္ခ်က္ —  Closing Tag မပါဘူးဆုိတာ အပိတ္မပါတာနဲ႔ မတူပါဘူး။ </br> ဆိုတာမ်ိဳးမရွိတာကုိ ေျပာတာပါ။ ဒါေပမယ့္ အဲသလုိမပါတဲ့အတြက္ သူ႔မွာ ထူးျခားခ်က္လည္း ရွိပါတယ္။ (/) မ်ဥ္းေစာင္းတစ္ခုကုိ ေနာက္မွထည့္ေပးရပါတယ္။ XHTML မွာ element အားလုံးမွာ အပိတ္ပါရပါမယ္။ start tag မွာ အခုလုိပုံစံမ်ိဳး <br /> မ်ဥ္းေစာင္းေလးထည့္လုိက္တာဟာ XHTML နဲ႔ XML အတြက္ လုပ္ထုံးလုပ္နည္းတစ္ခုျဖစ္ပါတယ္။ End Tag ေတာ့မရွိပါဘူး။

HTML မွာ အေသးစာလုံးေတြကုိသာသုံးပါ။

HTML tag ေတြဟာ စာလုံးအၾကီးအေသး လြဲလုိ႔သိပ္ျပႆနာမရွိတဲ့ အရာေတြျဖစ္ပါတယ္။ Case Sensitive ေတြမဟုတ္ပါဘူး —  <P> က <p> နဲ႔အတူတူပါပဲ။  ဝဘ္ဆိုဒ္ အမ်ားအျပားက စာလုံးအၾကီးနဲ႔ uppercase HTML tag ေတြကုိသုံးၾကပါတယ္။
ဒီသင္ခန္းစာေတြမွာေတာ့ စာလုံးအေသးန႔ဲပဲသင္ေပးမွာျဖစ္ပါတယ္။ World Wide Web Consortium (W3C) က HTML 4 မွာ စာလုံးအေသးကုိသုံးဖုိ႔ တိုက္တြန္းထားျပီး XHTML အတြက္ကေတာ့ စာလုံးအေသးပဲလက္ခံလုိ႔ျဖစ္ပါတယ္။
   http://www.soemoeaung.com
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

HTML Attribute မ်ား

HTML Attribute မ်ား

Attribute ေတြက HTML Element ေတြအတြက္ လုိအပ္တဲ့ သီးျခား အခ်က္အလက္ေတြ ပ့ံပိုးေပးပါတယ္။

HTML Attribute မ်ား

  • HTML element ေတြမွာ attribute ေတြပါတတ္ပါတယ္။
  • Attribute ေတြက Element ေတြအတြက္ additional အခ်က္အလက္ ပ့ံပိုးေပးပါတယ္။
  • Attribute ေတြကုိ start tag ထဲမွာအျမဲရွိပါတယ္။
  • Attribute ေတြ က name/value စုံတြဲအျဖစ္လာတတ္ပါတယ္။ ဥပမာ — name="value"

Attribute နမူနာမ်ား

HTML link ေတြကုိ <a> tag ေတြနဲ႔ သတ္မွတ္ၾကတယ္။ သူ႔ကုိ href attribute နဲ႔အထူးျပဳထားပါတယ္။

နမူနာ


<a href="http://www.soemoeaung.com"> ဒါက link တစ္ခုျဖစ္ပါတယ္။</a>

Attribute တန္ဖုိးေတြကုိ အျမဲ မ်က္ေတာင္အဖြင့္ အပိတ္ နဲ႔ထည့္တယ္။

Attribute တန္ဖုိးေတြကုိ Tag ေတြထဲမွာ ထည့္ထားတတ္ပါတယ္။ ႏွစ္ခုပါတဲ့ quote (“ ”) ေတြကုိ အသုံးေတြျပီး quote တစ္ခုတည္း (‘ ’) လည္း သုံးႏိုင္ပါတယ္။
Noteမွတ္ခ်က္ — ျဖစ္ေတာင့္ျဖစ္ခဲ တစ္ခါတစ္ေလမွာ attribute တန္ဖုိး ေတြကုိယ္တုိင္က quote ေတြပါေနတတ္ပါတယ္။ အဲဒီအခ်ိန္မွာေတာ့ Single Quote (‘ ’) ကုိသုံးရမွာျဖစ္ပါတယ္။ နမူနာ — name='John "ShotGun" Nelson'

HTML မွာ စာလုံးအေသး Attribute ေတြကုိသုံးပါ။

Attribute အမည္ေတြနဲ႔ attribute တန္ဖုိးေတြဟာ စာလုံးအေသးအၾကီး လြဲလုိ႔ျပႆနာမရွိတဲ့ case-insensitive ေတြျဖစ္ပါတယ္။
ဒါေပမယ့္ World Wide Web Consortium (W3C) က lowercase Attribute ေတြ/attribute တန္ဖုိးေတြကုိ HTML 4 မွာသုံးဖုိ႔ တိုက္တြန္းထားပါတယ္။ အသစ္ထြက္တဲ့ (X)HTML ကလည္း စာလုံးအေသး lowercase Attribute ေတြ ကုိပဲ အဆင္ေျပေစႏိုင္မွာပါ။

HTML Attribute အညႊန္းမ်ား

ေအာက္က စာရင္းကေတာ့ HTML Element ေတြထဲက အသုံးမ်ားဆုံး Attribute အခ်ိဳ႕ျဖစ္ပါတယ္။
Attribute တန္ဖုိး အေၾကာင္းအရာ
class classname Element တစ္ခုရဲ့ classname ကုိအထူးျပဳပါတယ္။
id Id element  တစ္ခုရဲ့ သီးျခားစီရွိတဲ့ id တစ္ခုကုိ အထူးျပဳပါတယ္။
style style_definition element တစ္ခုရဲ့ Inline Style တစ္ခုကုိ အထူးျပဳပါတယ္။
title tool မွတ္စု_စာသား  Element တစ္ခုရဲ့ အပုိအခ်က္အလက္ေတြကုိ တစ္ခုကုိ အထူးျပဳ ပါတယ္။ (tool  မွတ္ခ်က္ အျဖစ္ေဖာ္ျပ)
အေသးစိပ္ Standard attribute ေတြအတြက္ — HTML Standard Attribute အညႊန္းမ်ား
ေအာက္မွာ ဆက္လက္ေလ့လာနိဳင္ပါတယ္
  

HTML / XHTML Standard Attribute မ်ား

ေအာက္က Attribute ေတြက Standard Tag ေတြျဖစ္ျပီး HTML/XHTML အားလုံးနီးပါးမွာသုံးႏုိင္ပါတယ္။

Core Attribute မ်ား

<base>, <head>, <html>, <meta>, <param>, <script>, <style> နဲ႔ <title> တုိ႔ကလြဲျပီး က်န္ element ေတြအားလုံးမွာသုံးလို႔႔ရပါတယ္။
Attribute အေၾကာင္းအရာ
class element တစ္ခုရဲ့ classname တစ္ခု ဒါမွ မဟုတ္ တစ္ခုထက္ပုိတဲ့ classname ေတြ အတြက္ အထူးျပဳရန္ (style sheet တစ္ခုထဲမွာ class တစ္ခုကုိရည္ညႊန္းပါတယ္)။
id Element တစ္ခုရဲ့ unique id အတြက္သုံးပါတယ္။
style element တစ္ခု အတြက္  inline CSS style ကုိအထူးျပဳရန္
title element တစ္ခုအေၾကာင္း အပုိအခ်က္အလက္ ေတြျဖည့္ရန္

Language Attribute မ်ား

<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> နဲ႔<script> တုိ႔ကလြဲျပီး က်န္ element ေတြအားလုံးမွာသုံးလို႔႔ရပါတယ္။
Attribute အေၾကာင္းအရာ
dir element တစ္ခုရဲ့ content ေတြအတြက္  စာသား direction အတြက္ျဖစ္ပါတယ္။
lang Element ရဲ့ content အတြက္ ဘာသာစကား သတ္မွတ္ဖုိ႔ျဖစ္ပါတယ္။
xml —lang Element ရဲ့ content အတြက္ ဘာသာစကား သတ္မွတ္ဖုိ႔ျဖစ္ပါတယ္။(XHTML document ေတြ အတြက္)။

Keyboard Attribute မ်ား

Attribute အေၾကာင္းအရာ
accesskey element တစ္ခုကုိ ဦးစားေပး/အာရုံစုိက္ေစရန္ Shortcut key တစ္ခုထည့္ရန္။
tabindex Element တစ္ခုကို စီစဥ္ေနရာခ်ရန္။
 http://www.soemoeaung.com
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

HTML ေခါင္းစဥ္မ်ား

HTML document ေတြမွာ ေခါင္းစဥ္ heading ေတြက အေရးပါပါတယ္။
ေခါင္းစဥ္ heading ေတြကုိ <h1> ကေန <h6> အထိ Tag ေတြနဲ႔ သတ္မွတ္ပါတယ္။ အေရးပါဆုံး ေခါင္းစဥ္ေတြကုိ <h1> အဆင့္ မွာထားျပီး <h6>ကေတာ သူန႔ဲ ဆန္႔က်င္ဖက္ အေရးပါမႈအနည္းဆုံး ေခါင္းစဥ္အတြက္ျဖစ္ ပါတယ္။

ဥပမာ

<h1>ေခါင္းစဥ္တစ္ခုျဖစ္ပါတယ္။</h1>
<h2> ေခါင္းစဥ္တစ္ခုျဖစ္ပါတယ္။</h2>
<h3> ေခါင္းစဥ္တစ္ခုျဖစ္ပါတယ္။</h3>
Noteမွတ္ခ်က္ — Browser (ဘေရာက္ဆာ) ေတြက space (margin အနည္းငယ္) ကုိ ေခါင္းစဥ္တစ္ခုစီၾကားမွာ အလုိေလ်ာက္ျခားေပးပါတယ္။

ေခါင္းစဥ္ Heading ေတြကအေရးၾကီးပါတယ္။

HTML ေခါင္းစဥ္ heading ေတြကုိ ေခါင္းစဥ္သီးသန္႔အတြက္ပဲသုံးသင့္ပါတယ္။ စာပုိဒ္ထဲက စာသားေတြကုိ ၾကီးေစျခင္း BIG သုိ႔ မဟုတ္ စာသားအထူ bold ေတြအတြက္ ေခါင္းစဥ္ heading အမ်ိဳးအစား ကုိမသုံးသင့္ပါဘူး။
Search Engine ေတြက သင္ေရးထားတဲ့ ဝဘ္စာမ်က္ႏွာ ရဲ့ ပါဝင္တဲ့အေၾကာင္းအရာနဲ႔ အသြင္သ႑ာန္ကုိ ရွာဖုိ႔အတြက္ ေခါင္းစဥ္ေတြကုိ သုံးပါတယ္။
ကိစၥရပ္တစ္ခုကုိ ရွာေဖြသူ အသုံးျပဳေတြ ကဝဘ္ဆုိဒ္ တစ္ခုကုိအၾကမ္းဖ်င္းသိခ်င္ရင္ ေခါင္းစဥ္ေတြကုိပဲ ၾကည့္တတ္ပါတယ္။ ဒါေၾကာင့္ ေခါင္းစဥ္ဟာ သင့္ေရးထားတဲ့ ဝဘ္စာမ်က္ႏွာ  ရဲ့ကုိယ္စားျပဳျဖစ္သင့္ပါတယ္။ H1ေခါင္းစဥ္က အဓိကေခါင္းစဥ္ main heading ျဖစ္သင့္ျပီး သူ႔ေနာက္ကမွ H2 ေခါင္းစဥ္၊ သူ႔ေနာက္ကမွ H3 ေခါင္းစဥ္ စသျဖင့္ သုံသင့္ပါတယ္။

HTML မ်ဥ္းမ်ား

 <hr /> tag ေတြက HTML စာမ်က္ႏွာအတြက္ ေရျပင္ညီမ်ဥ္းေတြ ဖန္တီးေပးပါတယ္။

ဝဘ္စာမ်က္ႏွာ မွာပါဝင္တဲ့ content ေတြကုိ ျခားဖုိ႔အတြက္လည္း မ်ဥ္းေတြကုိ သုံးႏုိင္ပါတယ္။

ဥပမာ


<p>ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>
<hr />
<p> ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။ </p>
<hr />
<p> ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။ </p>

HTML မွတ္ခ်က္မ်ား

ကုိယ္ေရးထားတဲ့ HTML code ေတြကုိ ဖတ္လုိ႔မွတ္လုိ႔လြယ္ေအာင္ Code ေတြၾကားမွာပဲ မွတ္ခ်က္ေတြထားႏိုင္ပါတယ္။ မွတ္ခ်က္ေတြကုိ browser (ဘေရာက္ဆာ) ေတြက ထည့္မတြက္လုိ႔ Browser (ဘေရာက္ဆာ) နဲ႔ၾကည့္ရင္ျမင္ရမွာ မဟုတ္ ပါ။
မွတ္ခ်က္ေတြကုိ ဒီလိုေရးၾကပါတယ္ — 

ဥပမာ

<!-- ဒါက မွတ္ခ်က္တစ္ခုျဖစ္ပါတယ္။-->
Noteမွတ္ခ်က္ — opening bracket ရဲ့အေနာက္မွာ exclamation mark အာေမဋိတ္အမွတ္အသား တစ္ခုရွိပါတယ္။ သတိထားရမွာက closing bracket ေရွ႕မွာထားရမွာ မဟုတ္ ပါဘူး။

HTML Noteမွတ္ခ်က္ — HTML Source ကုိဘယ္လုိဖတ္မလဲ။

ဝဘ္စာမ်က္ႏွာ  တစ္ခုကုိၾကည့္ျပီး "ဟာ ဒါဘယ္လုိလုပ္ထားပါလိမ့္?" ဆုိျပီးအံ့အားသင့္ဖူးလား။
ဘယ္လုိေရးထားတာလဲ သိႏုိင္ဖုိ႔အတြက္ စာမ်က္ႏွာကုိ right-click ႏွိပ္ျပီး (IE) မွာဆုိရင္ "View Source" ကုိႏွိပ္ ဒါမွမဟုတ္ (Firefox) မွာဆုိရင္ "View Page Source" ကုိႏွိပ္ျပီးၾကည့္ႏုိင္ပါတယ္။ တစ္ျခား Browser (ဘေရာက္ဆာ) ေတြမွာလဲ အလားတူပါပဲ။ အဲဒီလုိႏွိပ္ရွာလုိက္ရင္ ဝင္းဒုိး တစ္ခုတတ္လာျပီး ေရးထားတဲ့ HTML code ေတြကုိ ျပေပးမွာျဖစ္ပါတယ္။

ယခုစာမ်က္ႏွာမွ ဥပမာမ်ား

ေခါင္းစဥ္မ်ား
HTML document တစ္ခုမွာ ေခါင္းစဥ္ေတြဘယ္လုိသုံးထားလဲျပထားေပးပါတယ္။
ေရျပင္ညီမ်ဥ္းမ်ား
ေရျပင္ညီမ်ဥ္း horizontalline ေတြဘယ္လုိထည့္ရမလဲ ျပသေပးပါတယ္။ မျမင္ရတဲ့မွတ္ခ်က္မ်ား
HTML code ေတြၾကားထဲမွာ မွတ္ခ်က္ေတြဘယ္လုိေရးထားလဲျပသေပးပါတယ္။

HTML Tag အညႊန္းမ်ား

ယခု ဝဘ္ဆုိဒ္ မွာပါဝင္တဲ့ tag အညႊန္းေတြမွာ Tag ေတြနဲ႔၎တုိ႔မွာပါဝင္တဲ့ Attribute ေတြ အေၾကာင္း ရွင္းျပထားတာေတြ ပါပါတယ္။ ဒီသင္ခန္းစာရဲ့ ေနာက္လာမယ့္ အခန္းမွာ HTML Tag ေတြ နဲ႔ attribute ေတြအေၾကာင္း ပုိျပီးရွင္းျပထားတယ္။
Tag အေၾကာင္းအရာ
<html> HTML document တစ္ခု အတြက္သုံးပါတယ္။
<body> document ရဲ့ ကုိယ္ထည္ကုိ သတ္မွတ္ပါတယ္။
<h1> မွ <h6> အထိ HTML ေခါင္းစဥ္ heading ေတြ အတြက္သုံးပါတယ္။
<hr /> ေရျပင္ညီမ်ဥ္း horizontal line အျဖစ္သတ္မွတ္ပါတယ္။
<!--> မွတ္ခ်က္တစ္ခုအျဖစ္သတ္မွတ္ပါတယ္။
 http://www.soemoeaung.com
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက **************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

HTML စာပိုဒ္မ်ား


စာပုိဒ္ေတြကုိ <p> tag ေတြနဲ႔ ေရးသားၾကပါတယ္။

ဥပမာ


<p>ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>
<p>ဒါကအျခားစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>
Noteမွတ္ခ်က္ — Browser (ဘေရာက္ဆာ) ေတြက empty sentence line တစ္ခုကုိ စာပုိဒ္တစ္ခုမတုိင္ခင္နဲ႔ စာပုိဒ္ဆုံးသြားတဲ့ ေနရာမွာ အလုိေလ်ာက္ထည့္ေပးပါတယ္။

End Tag ကုိမေမ့ပါနဲ႔

Browser (ဘေရာက္ဆာ) ေတြ အမ်ားစုက end tag ေမ့ခဲ့ရင္ေတာင္ အမွားမျပပဲ ပုံမွန္အလုပ္လုပ္ေပးပါတယ္။

ဥပမာ


<p>ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။
<p>ဒါကအျခားစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။
အေပၚက ဥပမာကုိ browser (ဘေရာက္ဆာ) အမ်ားစုက ျပႆနာမရွိပဲ ပုံမွန္ျပသေပးပါတယ္။ ဒါေပမယ့္ ဒီလုိမ်ိဳးမလုပ္သင့္ပါဘူး။ End Tag ေမ့တာက မလုိအပ္တဲ့ အမွားေတြကုိ ဖိတ္ေခၚသလုိျဖစ္ေစပါတယ္။
Noteမွတ္ခ်က္ — ေနာက္ပုိင္းေပၚေပါက္လာမယ့္ HTML ေတြက end tag မပါတာကို လက္ခံမွာ မဟုတ္ ပါဘူး။

HTML စာေၾကာင္း Break မ်ား

<br /> tag ကုိ စာပုိဒ္အသစ္မစပဲ စာေၾကာင္းေနာက္တစ္ေၾကာင္းဆင္းခ်င္ရင္ သုံးပါ။

ဥပမာ


<p>ဒါဟာ<br />Line Break<br />ပါတဲ့ စာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>
<br />ဟာ empty HTML element ျဖစ္ျပီး end tag မပါပါဘူး။

<br> လား <br /> လား

XHTML နဲ႔ XML မွာ end tag (closing tag) မပါတဲ့ Element ေတြကုိလက္မခံပါ။
<br>Tag ဟာ browser (ဘေရာက္ဆာ) အားလုံးမွာ အဆင္ေျပေနေပမယ့္ <br /> ေရးျခင္းကသာ XHTML နဲ႔ XML အပလီေကးရွင္းေတြ အတြက္အဆင္ေျပေစမွာျဖစ္ပါတယ္။

HTML ရလာဒ္ - သိမွတ္စရာမ်ား

HTML မွာေရးထားတဲ့ Code ေတြသင္လုိခ်င္တဲ့အတုိင္း အတိအက်ေပၚဖုိ႔မလြယ္ပါဘူး။ screen အၾကီး၊ အေသးေတြက ကြဲျပားတဲ့ ရလာဒ္ေတြျဖစ္ေစႏုိင္ပါတယ္။
HTML code ေတြအၾကား Space ေတြျခားျပီး Browser (ဘေရာက္ဆာ) View မွာ Space ေတြျခားေနခ်င္လုိ႔မရပါဘူး။
Browser (ဘေရာက္ဆာ) ေတြက Browser (ဘေရာက္ဆာ) View အတြက္အပုိ space ေတြ၊ Code ေတြၾကားမွာေက်ာ္သြားခဲ့တဲ့ Line ေတြအားလုံးကုိ ဖယ္ရွားလုိက္မွာျဖစ္ပါတယ္။ Line အားလုံးကုိ ၁ လုိင္းတည္း ျဖစ္သြားေစမွာျဖစ္ျပီး Space ေတြအားလုံးကုိ Space ၁ ခုတည္း လုပ္လုိက္မွာျဖစ္ပါတယ္။
(ဒီဥပမာက တစ္ခ်ိဳ႕တဲ့ HTML Code ေတြေရးရာမွာျဖစ္တတ္တဲ့ ျပႆနာအခ်ိဳ႕ကို ရွင္းထားပါတယ္)။

ယခုစာမ်က္ႏွာမွ ဥပမာမ်ား

HTML စာပုိဒ္မ်ား
HTML စာပုိဒ္ေတြ Browser (ဘေရာက္ဆာ) View မွာဘယ္လုိေပၚတယ္ဆုိတာ ရွင္းျပထားပါတယ္။
Line break မ်ား (ေအာက္သုိ႔တစ္ေၾကာင္းဆင္းျခင္း)
HTML document ေတြမွာ သုံးတဲ့ Line Break အေၾကာင္းျဖစ္ပါတယ္။
စာေၾကာင္းျပႆနာမ်ား(Poem ျပႆနာ)
HTML Code ေတြအသုံးျပဳဖန္တီးရာမွာျဖစ္တတ္တဲ့ အမွားေတြျဖစ္ပါတယ္။

HTML Tag အညႊန္း

ယခု ဝဘ္ဆုိဒ္ မွာပါတဲ့ tag အညႊန္း ေတြမွာ HTML element ေတြ နဲ႔ ၎တုိ႔ရဲ့ Attribute ေတြ နဲ႔ပတ္သက္ျပီး အေသးစိပ္ရွင္းလင္းထားပါတယ္။
Tag အေၾကာင္းအရာ
<p> စာပုိဒ္အတြက္ျဖစ္ပါတယ္။
<br /> ေအာက္တစ္ေၾကာင္းဆင္းရန္ single line break အတြက္ျဖစ္ပါတယ္။
 http://www.soemoeaung.com
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

HTML စာသားမ်ားေရးသားျခင္း

HTML Formatting

ဒါက စာသားအထူပုံစံ bold ျဖစ္ပါတယ္။

ဒါက စာလုံးအၾကီးပုံစံ big ျဖစ္ပါတယ္။

ဒီစာသားက အေစာင္းပုံစံ italic ျဖစ္ပါတယ္။
This is Computer Output Text.

ဒါက subscript ပုံစံ နဲ႔ superscript ပုံစံ ျဖစ္ပါတယ္။

HTML Tag မ်ား (Formatting Tags)

HTML <b> နဲ႔ <i> Tag ေတြကုိ စာသားအထူ bold နဲ႔ စာသားအေစာင္း italic ပုံစံလုိခ်င္ရင္ သုံးပါတယ္။
ဒီ HTML tag ေတြကို formatting tag ေတြလုိ႔ေခၚပါတယ္။
Noteမွတ္ခ်က္ — တစ္ခါတစ္ေလမွာ <strong> ကုိ <b> အစားနဲ႔ <em> ကုိ <i>အစားသုံးတတ္ပါတယ္။ ဒီလုိ မကြဲမျပားပဲ သုံးေနၾကေပမယ့္ ဒီ tag ေတြၾကားမွာ ျခားနားခ်က္ေတြလည္း ရွိေနပါတယ္။
<strong> ဒါမွမဟုတ္ <em> ကုိက်ေတာ့ ဝဘ္ဆုိဒ္ေရးသားသူက ဖတ္သူကုိ ဒီေနရာက အေရးၾကီးပါတယ္ဆုိတာျပခ်င္လုိ႔ သုံးတာျဖစ္ပါတယ္။
ဒီေန႔ Browser (ဘေရာက္ဆာ) ေတာ္ေတာ္မ်ားမ်ားက <strong>ကုိ <b> နဲ႔အတူတူ၊ <em >ကုိ <i> နဲ႔အတူတူ လုိပဲျမင္ေနၾကပါေသးတယ္။ ဒါေပမယ့္ တစ္ေန႔မွာ Browser ေတြက stong လုပ္ထားတဲ့ Tag ေတြကုိပဲ သီးသန္႔ Highlight ေပးခဲ့ရင္ေတာ့ strong လုပ္မထားရင္ hightlight ရေတာ့မွာမဟုတ္ပါဘူး။
<b> နဲ႔<i> ေတြက bold နဲ႔ italic သီးသန္႔အတြက္သုံးတာျဖစ္ပါတယ္။

HTML စာသား Formatting Tag မ်ား

Tag အေၾကာင္းအရာ
<b> စာသားကုိ အထူ Bold လုပ္ရန္
<big> စာသားကုိ အၾကီး Big လုပ္ရန္
<em> စာသားကုိ အထူးျပဳတဲ့ပုံစံလုပ္ရန္
<i> စာသားကုိ အေစာင္းလုပ္ရန္
<small> စာသားကုိ အေသးလုပ္ရန္
<strong> စာသားကုိ အေရးပါတဲ့ပုံစံ Strong လုပ္ရန္
<sub> စာသားကုိ ေအာက္မွာကပ္လ်က္ပါတဲ့တန္ဖုိးကိန္းပုံစံ subscript လုပ္ရန္
<sup> စာသားကုိ ထပ္ကိန္းပုံစံ subscript လုပ္ရန္
<ins> စာသားကုိ  ထည့္ ပုံစံ လုပ္ရန္
<del> စာသားကုိဖ်က္ထားတဲ့ပုံစံ လုပ္ရန္

HTML "Computer Output" Tag မ်ား

Tag အေၾကာင္းအရာ
<code> ကြန္ျပဴတာ code ပုံစံေတြလုပ္ရန္
<kbd> keyboard စာသားပုံစံေတြလုပ္ရန္
<samp> နမူနာ ကြန္ျပဴတာ code ပုံစံလုပ္ရန္
<tt> လက္ႏွိပ္စက္ စာသားပုံစံလုပ္ရန္
<var> Variable ပုံစံလုပ္ရန္
<pre> preformatted စာသားပုံစံလုပ္ရန္

HTML Citation မ်ား၊ Quotation မ်ားနဲ႔ Definition Tag မ်ား

Tag အေၾကာင္းအရာ
<abbr> အတုိေကာက္စာလုံးအျဖစ္သုံးရန္
<acronym> စကားလုံး၏ အေရွ႕စာလုံးအျဖစ္သုံးရန္
<address> Document  ပုိင္ရွင္ ဒါမွ မဟုတ္  ေရးသားသူ ကုိဆက္သြယ္ရန္လိပ္စာ အျဖစ္သုံးရန္
<bdo> စာသား direction အျဖစ္သုံးရန္
<blockquote> ရွင္းလင္းခ်က္စာပုိဒ္အရွည္အျဖစ္သုံးရန္
<q> ရွင္းလင္းခ်က္စာပုိဒ္အတုိအျဖစ္သုံးရန္
<cite> အထူးမွတ္ခ်က္တစ္ခုအျဖစ္သုံးရန္
<dfn> အဓိပၸယ္ရွင္းလင္းခ်က္တစ္ခုအျဖစ္သုံးရန္
 http://www.soemoeaung.com/
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

HTML Block မ်ား

HTML <div> နဲ႔ <span>

HTML element ေတြကုိ <div> နဲ႔ <span> ေတြနဲ႔ အုပ္စုဖြဲ႔ထားႏုိင္ပါတယ္။

HTML Block Element မ်ား

HTML element အမ်ားစုကုိ block level element ေတြ ဒါမွမဟုတ္ inline element ေတြအျဖစ္သတ္မွတ္ၾကပါတယ္။
Block level element ေတြကုိမွာ ပုံမွန္အားျဖင့္ browser (ဘေရာက္ဆာ) မွာျပတဲ့အခါ Line အသစ္တစ္ခုနဲ႔ အစျပဳ (အဆုံးသတ္) ပါတယ္။
ဥပမာမ်ား <h1>, <p>, <ul>, <table>

HTML Inline Element မ်ား

Inline element ေတြကေတာ့ Line အသစ္ မဆင္းပဲ ျပသပါတယ္။
ဥပမာမ်ား <b>, <td>, <a>, <img>

 HTML <div> Element

HTML <div> element မွာ အုပ္စုဖြဲ႔ျခင္းအတြက္ ဒါမွမဟုတ္ HTML Element အတြက္ Container ပါတဲ့ block level element ျဖစ္ပါတယ္။
<div> element မွာထူးေထြတဲ့ အဓိပၸယ္မရွိပါ။ block level element တစ္ခုျဖစ္ျပီး  browser (ဘေရာက္ဆာ) မွာေပၚတဲ့အခါ ၎မတုိင္ခင္ခဲ့ ျပီးေနာက္မွာ line break တစ္ခုထားေပးမွာျဖစ္ပါတယ္။
CSS နဲ႔တြဲသုံးတဲ့အခါ <div> element ကုိ Content အမ်ားအျပားပါဝင္တဲ့ large Block ေတြကုိ style attribute ေတြ setting ခ်ဖုိ႔အတြက္သုံးႏိုင္ပါတယ္။
အျခားအသုံးမ်ားတဲ့ <div> element ပုံစံမွာ document အတြက္ layout ခ်ဖုိ႔ျဖစ္ပါတယ္။ ၎ကနည္းလမ္းအေဟာင္းျဖစ္တဲ့ ဇယားေတြနဲ႔ Layout ခ်ျခင္းကုိ အစားထုိးလုိက္ပါတယ္။ ဇယားေတြအသုံးျပဳျခင္းမွာ <table> element ရဲ့ နည္းလမ္းအမွန္ မဟုတ္ ပါဘူး။ <table> element ရဲ့ ရည္ရြယ္ခ်က္က tabular data ေတြအတြက္ျဖစ္ပါတယ္။

HTML <span> Element

HTML မွာ <span> element မွာ inline element ျဖစ္ျပီး စာသား အတြက္ Container အျဖစ္အသုံးျပဳႏုိင္ပါတယ္။
<span> element မွာထူးေထြတဲ့ အဓိပၸယ္မရွိ။
CSS နဲ႔တြဲသုံးတဲ့အခါ <span> element ကုိ style attribute ေတြကုိ စာသားရ့ဲ အစိပ္အပုိင္းအျဖစ္ Setup လုပ္ဖို႔ သုံးႏုိင္ပါတယ္။

 

 


HTML Grouping Tag မ်ား

Tag အေၾကာင္းအရာ
<div> Div ျဖစ္ပါတယ္။
<span> Span ျဖစ္ပါတယ္။

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

HTML Style မ်ား - CSS

HTML Style မ်ား - CSS

HTML element ေတြကုိ စတုိင္အမ်ိဳးမ်ိဳးလုပ္ဖုိ႔ CSS (Cascading Style Sheet မ်ား) ကုိသုံးပါတယ္။

စာလုံးပုံစံနဲ႔ အေရာင္ေတြကုိ ၾကည့္ပါ။

This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

HTML မွာ CSS သုံးျပီး Style မ်ားျပဳလုပ္ျခင္း

HTML Element ေတြကုိ ပုိျပီး အဆင္ေျပေျပနဲ႔ Style လုပ္ႏိုင္ဖုိ႔အတြက္ CSS ကုိ HTML 4 နဲ႔အတူ စတင္မိတ္ဆက္ခဲ့ပါတယ္။
ေအာက္မွာျပထားတဲ့ နည္းလမ္းေတြအရ CSS ကုိ HTML Document ထဲကုိ ထည့္ႏိုင္ပါတယ္။
  • Inline - HTML element ေတြထဲမွာပဲ styleattribute ကုိအသုံးျပဳျခင္း။
  • Internal - <head> section ထဲမွာ <style>element ကုိသုံးျပီးေရးျခင္း။
  • External - ျပင္ပ CSSဖိုင္ တစ္ခုေရးျပီးခ်ိတ္ဆက္ျခင္း။
ျပင္ပဖုိင္တစ္ခုစီသီးျခားေရးျပီး HTML ထဲကုိ ထည့္သုံးဖုိ႔ အၾကံျပဳခ်င္ပါတယ္။
ဒီ HTML သင္ခန္းစာ မွာေတာ့ style attribute ကုိသုံးျပီး CSS ကုိမိတ္ဆက္ေပးလုိက္ပါတယ္။ ဥပမာေတြက ရုိးရွင္းပါတယ္။ Code ေတြကလည္း ကုိယ္တုိင္ေလ့က်င့္ဖုိ႔လြယ္ပါတယ္။

Inline Style မ်ား

Inline style ကုိ ဝဘ္စာမ်က္ႏွာ တစ္ခုရဲ့ လုိခ်င္တဲ့ အပုိင္းတစ္ခုတည္းအတြက္ပဲသီးျခား style လုပ္ခ်င္ရင္သုံးသင့္ပါတယ္။
Inline style ကုိသုံးဖုိ႔အတြက္ ကုိ Style လုပ္ခ်င္တဲ့ Tag မွာ style attribute ကိုသုံးရမွာျဖစ္ပါတယ္။
Style attribute မွာ CSS တန္ဖုိးတစ္ခုခုပါဝင္ႏုိင္ပါတယ္။ ေအာက္က ဥပမာမွာ စာသားအေရာင္န႔ဲ စာပုိဒ္ရဲ့ ဘယ္ဖက္ Margin ကုိေျပာင္းဖုိ႔အတြက္ CSS ကိုဘယ္လုိသုံးထားတယ္ဆုိတာ ၾကည့္ႏုိင္ပါတယ္။

<p style=“color:blue;margin-left:20px;">ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္</p>

HTML Style ဥပမာ - ေနာက္ခံအေရာင္

ေနာက္ခံအေရာင္တန္ဖုိးက Element တစ္ခုရဲ့ ေနာက္ခံအေရာင္ကုိ သတ္မွတ္ပါတယ္။

ဥပမာ

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">ဒါကေခါင္းစဥ္တစ္ခုျဖစ္ပါတယ္။</h2>
<p style="background-color:green;">ဒါက စာပုိဒ္တစ္ခုျဖစ္ပါတယ္</p>
</body>
</html>
ဒီေနာက္ခံအေရာင္တန္ဖုိးက အရင္တုန္းကသုံးခဲ့တဲ့ပုံစံ အတုိင္းျပမွာျဖစ္ပါတယ္။

HTML Style ဥပမာ - Font အမ်ိဳးအစား၊ အေရာင္နဲ႔ အရြယ္အစား

Font အမ်ဳိးအစား၊ အေရာင္နဲ႔ အရြယ္အစားတန္ဖုိးေတြက Element တစ္ခုမွာပါတဲ့ စာသားရဲ့ font အမ်ဳိးအစား၊ အေရာင္နဲ႔ အရြယ္အစား ေတြကိုသတ္မွတ္ပါတယ္။

ဥပမာ

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">ေခါင္းစဥ္တစ္ခု</h1>
<p style="font-family:arial;color:red;font-size:20px;">စာပုိဒ္တစ္ခု။</p>
</body>
</html>
ဒီ font အမ်ဳိးအစား၊ အေရာင္နဲ႔ အရြယ္အစားတန္ဖုိးက သိပ္မသုံးၾကေတာ့တဲ <font> tag အေဟာင္း (အရင္တုန္းကသုံးခဲ့တဲ့ပုံစံ) အတုိင္းျပမွာျဖစ္ပါတယ္။

HTML Style ဥပမာ- စာသား Alignment

text-align ရဲ့တန္ဖုိးဟာ Element တစ္ခုရဲ့ စာသားအတြက္ ေရျပင္ညီ alignment ကုိအထူးျပဳပါတယ္။

ဥပမာ

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">အလည္ပို႔ထားတဲ့ ေခါင္းစဥ္</h1>
<p>စာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>
</body>
</html>
text-align တန္ဖုိးက သိပ္မသုံးၾကေတာ့တဲ့ Tag အေဟာင္း <center> tag ပုံစံ ျဖစ္ပါတယ္။

Internal Style Sheet ဆိုသည္မွာ?

Internal style sheet ကုိလုိခ်င္တဲ့ ဝဘ္စာမ်က္ႏွာ တစ္ခုတည္းကုိပဲ သီးျခား style လုပ္ခ်င္ရင္သုံးသင့္ပါတယ္။ သူ႔ကုိ <head> Section ထဲမွာ <style> Tag ကုိသုံးျပီးေရးရမွာျဖစ္ပါတယ္။
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

External Style Sheet ဆိုသည္မွာ ?

external style sheet မွာ ဝဘ္စာမ်က္ႏွာ  အမ်ားအျပားအတြက္ တူညီတဲ့ Style လုပ္ႏုိင္ဖုိ႔သုံးရတာျဖစ္ပါတယ္။ external style sheet တစ္ခုနဲ႔ ဝဘ္ဆုိဒ္ တစ္ခုလုံးရဲ့ Style ကုိစာမ်က္ႏွာတစ္ခုတည္းကုိ ျပင္ရုံနဲ႔ ေျပာင္းႏုိင္မွာျဖစ္ပါတယ္။ ဒါေပမယ့္ ဝဘ္စာမ်က္ႏွာ တုိင္းကုိေတာ့ <link> Tag သုံးျပီး ခ်ိတ္ထားရမွာျဖစ္ပါတယ္။ <link> Tag ကုိ <head> section ထဲမွာထားရမွာျဖစ္ပါတယ္။
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

HTML Style Tag မ်ား

Tag အေၾကာင္းအရာ
<style> Document တစ္ခုအတြက္ Style လုပ္ဖုိ႔သုံးပါတယ္။
<link /> Document တစ္ခုနဲ႔ ျပင္ပ CSS ဖုိင္တစ္ခုခ်ိတ္ဖုိ႔ သုံးပါတယ္။

Deprecated Tag နဲ႔ Attribute မ်ား

HTML 4 မွာ tag အမ်ားအျပားနဲ႔ attribute ေတြမ်ားစြာကုိ Style လုပ္ဖို႔သုံးၾကပါတယ္။ အဲဒါေတြကို New HTML က လက္မခံပါ ဘူး။
ဒါေၾကာင့္ <font>, <center> နဲ႔ <strike> Element ေတြနဲ႔ အေရာင္ နဲ႔ bgcolor Attribute ေတြကုိမသုံးပါန႔ဲ။
 http://www.soemoeaung.com/
ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

HTML ပုံမ်ား - Tag နဲ႔ Src Attribute


HTML ပုံမ်ား - <img> Tag နဲ႔  Src Attribute

HTML မွာ ပုံေတြကုိ  <img> tag နဲ႔ သတ္မွတ္ၾကပါတယ္။
<img> tag သီးသန္႔ဆုိရင္ ဗလာ ၾကီးျဖစ္ျပီး Attribute ေတြ သက္သက္ပဲပါမွာပါ။ Tag အပိတ္လည္းမရွိပါဘူး။
စာမ်က္ႏွာေပၚမွာ ပုံေပၚဖုိ႔အတြက္ src attribute ကိုသုံးဖုိ႔လုိပါတယ္။ Src ဆုိတာက "source" ရဲ့အတုိေကာက္စာလုံးျဖစ္ျပီး  src attribute ရဲ့တန္ဖုိးက သင္ေပၚခ်င္တဲ့ ပုံရဲ့ URL လည္းျဖစ္ပါတယ္။
ပုံအတြက္ Syntax


<img src="url" alt="some_text"/> 
URL ကပုံဘယ္မွာရွိလဲ ျပပါတယ္။ "trip.jpg" လုိနာမည္ရွိတဲ့ ပုံတစ္ပုံမွာ www.aungsanmks.com ရဲ့ images folder (Directory) ထဲမွာရွိတယ္ဆုိရင္ URL က http://i.minus.com/ibidJBu0i95gl8.PNG
Browser (ဘေရာက္ဆာ) က Image Tag ျပတဲ့ပုံကုိ ေခၚသုံးပါတယ္။ တကယ္လုိ႔ စာပုိဒ္ႏွစ္ခုၾကား ပုံထားခဲ့ရင္ Browser (ဘေရာက္ဆာ) က ပထမစာပုိဒ္ကို အေရွ႕က ေပၚေစပါမယ္။ သူ႔ေအာက္မွာမွ သင္ညႊန္းထားတဲ့ပုံ သူျပီးမွ ေနာက္ဆုံးစာပုိဒ္ကုိ ေပၚေစမွာပါ။  

HTML ပုံမ်ား - Alt Attribute

လုိအပ္တဲ့ alt attribute ဟာ ပုံအတြက္ အျခားနည္းလမ္းနဲ႔ေပၚမယ့္စာျဖစ္ပါတယ္။ ပုံေပၚဖုိ႔ အဆင္မေျပတဲ့ အခါမ်ိဳးမွာျဖစ္ပါတယ္။
Alt attribute ရဲ့တန္ဖုိးကေတာ့ ဝဘ္ဆုိဒ္ ေရးသူ ထည့္တဲ့အတိုင္းပါပဲ...။


<img src="trip.jpg" alt="Blogger Aung Aung" /> 
alt attribute က အင္တာနက္လုိင္း ေႏွးလုိ႔ ပုံေတြမေပၚႏိုင္ေသးရင္ပဲျဖစ္ျဖစ္၊ Src Attribute မွာ အမွားတစ္ခုခုရွိလုိ႔ပဲျဖစ္ျဖစ္ ၾကည့္ရႈ႔သူဟာ Screen Reader ကုိအသုံးျပဳျပီးၾကည့္လုိ႔ပဲျဖစ္ျဖစ္ ပုံေတြကို Browser (ဘေရာက္ဆာ) က ခ်က္ခ်င္းေဖၚျပဖုိ႔မတတ္ႏုိင္တဲ့ အခ်ိန္မွာလည္း alt ေပးထားတဲ့ (သတ္မွတ္ထားတဲ့) စာကုိ အရင္ေပၚေနေစမွာျဖစ္ပါတယ္။

HTML ပုံမ်ား - ပုံအျမင့္နဲ႔ အလ်ားကုိ သတ္မွတ္ျခင္း

အျမင့္နဲ႔ အလ်ား attribute ေတြမွာ ပုံ၏ အျမင့္နဲ႔ အလ်ားအတြက္ျဖစ္ပါတယ္။
Attribute တန္ဖုိးေတြကိုေတာ့ အျမဲ Pixel နဲ႔ သတ္မွတ္ပါတယ္။


<img src="trip.jpg" alt="Blogger Aung Aung" width="334" height="227" />
မွတ္ခ်က္ — ပုံအတြက္ အျမင့္နဲ႔ အလ်ား Attribute ေတြကို ေသခ်ာ စီစဥ္သင့္ပါတယ္။ သတ္မွတ္ထားတဲ့တန္ဖုိး အတိုင္း ပုံရဲ့ အရြယ္အစားကုိ စာမ်က္ႏွာ loading ျဖစ္ေနစဥ္မွာ ေနရာခ်မွာျဖစ္ပါတယ္။ဒါေပမယ့္ ဒီ attribute ေတြမပါခဲ့ဘူးဆုိရင္ browser (ဘေရာက္ဆာ) က ပုံအရြယ္အစားကုိ သိမွာ မဟုတ္ ပါဘူး။ ပုံေပၚလာဖုိ႔ဆြဲတင္ေနခ်ိန္မွာ စာမ်က္ႏွာအေနအထားကေျပာင္းတဲ့ effect ျဖစ္လာေစပါလိမ့္မယ္။

မွတ္စုမ်ား

မွတ္ခ်က္ — တကယ္လုိ႔ HTML ဖုိင္မွာ ပုံ ၁ဝ ပုံပါခဲ့ပါက အဲဒီ့စာမ်က္ႏွာအတြက္ ဖိုင္ ၁၁ ခုကုိ ဖြင့္ရတာနဲ႔တူပါတယ္။ ပုံေတြေပၚလာဖုိ႔ဆြဲတင္ရတာလည္း အခ်ိန္ေပးရပါတယ္။ ဒါေၾကာင့္ပုံေတြကုိ ထည့္သုံးမယ္ဆုိ အရြယ္အစားကအစ ဂရုစုိက္ဖုိ႔ အၾကံျပဳခ်င္ပါတယ္။
မွတ္ခ်က္ — ဝဘ္စာမ်က္ႏွာ တက္ေနတဲ့အခ်ိန္မွာ Browser (ဘေရာက္ဆာ) ကေန Web Server ကပုံေတြကုိ ယူျပီး စာမ်က္ႏွာထဲကုိ ထည့္ေပးတာျဖစ္ပါတယ္။ ဒါေၾကာင့္ ထည့္ထားတဲ့ပုံဟာ ကုိယ္ေပးထားတဲ့ လမ္းေၾကာင္းအမွန္မွာ တကယ္ရွိရဲ့လားဆုိတာကုိ ေသခ်ာအတည္ျပဳဖုိ႔လုိပါတယ္။ လြဲခဲ့ရင္ေတာ့ ပုံမေပၚပဲ အဲဒီ႔ေနရာမွာ ကြက္လပ္တစ္ခုေပၚေနမွာျဖစ္ပါတယ္။ ဒါဟာ Browser (ဘေရာက္ဆာ) ကရွာေပးဖုိ႔ မတတ္ႏုိင္ေတာ့တဲ့ အေျဖျဖစ္ပါတယ္။

HTML ပုံ Tag မ်ား

Tag အေၾကာင္းအရာ
<img /> ပုံထည့္ရန္
<map> image-map ထည့္ရန္
<area /> image-map တစ္ခုထဲက ႏွိပ္လုိ႔ရတဲ့ ေနရာတစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။

http://www.soemoeaung.com
အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ
စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

ပံုေေတြကိုျပဳျပင္ရာမွာအသံုး၀င္တဲ့photoscape3.6.5ေနာက္ဆံုး pudate အသံုးျပဳနည္း


  27 ရက္ေန႔ကထြက္သြားတဲ့ update ေလးပါ ။

က်ေနာ္ လိုပဲ Photoshop မသံုးတက္တဲ့ သူငယ္ခ်င္းေတြအတြက္ အရမ္းအဆင္ေျပပါတယ္

ဓါတ္ပံုျဖတ္ညွပ္ ကပ္၊နာမည္ေရး စာေရး၊ Logo ဆြဲ ၊ ေမြးေန႔ဖိတ္စာေတြ ေလာက္ကေတာ့

ေကာင္းေကာင္းေလးဆြဲ လို႔ရတယ္။ အသံုးလိုမယ္ ဆိုေအာက္မွာဆြဲသြားလိုက္ပါ ခင္ဗ်ာ






ေဒါင္းျပီးတာနဲ႕  အသုံးျပဳလို႕ရမွာ ျဖစ္ပါတယ္.. အသုံးျပဳနည္းကုိလည္း  ကြ်န္ေတာ္ တတ္နိဳင္သေလာက္
ရွင္းျပလိုက္ပါ့မယ္... လြယ္ကူတာမို႕ ကလိရင္းးတတ္မွာ ေသခ်ာပါတယ္ဗ်ာ... အသင့္တင့္ေလာက္ေတာ့
ေျပာျပလုိက္ပါတယ္ေနာ္...ကဲ စမယ္... ေဆာ့၀ဲလ္ကို ဖြင့္လိုက္ပါေနာ္.. ေအာက္ကပုံေပါ့

 သည္လိုက်လာမွာ ျဖစ္ပါတယ္... အေပၚက ကင္မရာ ပုံေလးကိုကလစ္ျပီး စၾကမယ္ေနာ္..ကလစ္လုိက္ပါ
သည္လိုျဖစ္လာမယ္... သည္မွာ ရွင္းစရာေတြ မ်ားးေနမယ္... ပုံေတြ မ်ားေနမွာ မို႕  တခုခ်င္းးသည္ပုံေလး
ကိုအဓိက  နမူနာထား ရွင္းျပလိုက္မယ္ေနာ္....
(၁)  သည္လိုက်လာတာနဲ႕  ဘယ္ဘက္က ကြန္ပ်ဴတာ ဖိုင္ေတြထဲက ပုံရွိတဲ့ ေနရာကိုသြားလုိက္ပါ။
(၂)  အဲမွာ ရွိေနတဲ့ ပု့ေတြကို သဴ႕ေအာက္ကေန ပုံေလးေတြ ေပၚေနမွာ ျဖစ္ပါတယ္... ေရြးခ်ယ္လုိက္ပါ။
(၃)  ပုံေရြးျပီၤး ေရာက္ေနတာနဲ႕  စၾကမယ္ေနာ္... တခုခ်င္းးစလိုက္မယ္... လက္ေတြ႕ လုပ္ရင္းစမ္းသတ္ပါ။
(၄)  အေရးၾကီးးတာကေတာ့ ပုံကို စာေရးတာ ျပဳျပင္ ေပါင္းစပ္တာေတြအတြက္ Object ကိုကလစ္ရမယ္။

  (i) ပုံေပၚစာေရးဖို႕အတြက္   T  ဆိုတာေလးကိုကလစ္ရပါမယ္။
  (ii)  ပုံေပၚကို ေနာက္ထပ္ ပုံေတြ ေပါင္းစပ္မယ္ ထပ္ထည့္မယ္ဆို  T ရဲ႕အေပၚေထာင့္က photo ဆိုတာ
        ေလးကိုကလစ္လုိက္ပါ ကြ်န္ပ်ဴတာဖိုင္က်မယ္  လိုရာပုံ ထပ္ထည့္မယ္...ေပါင္းစပ္မယ္ေပါ့။
  (iii)  Home  ဆိုတာကေတာ့ ပုံျပီးးတာနဲ႕ ေဘာင္ခတ္လို႕ရတဲ့ ေနရာ တစ္ခု ဆိုပါေတာ့ေနာ္..တျခားးေတြလည္းလုပ္လို႕ရပါတယ္.. စမ္းၾကည့္ပါ။
(iv) Crop  ဆိုတာက ပုံေတြကို လိုအပ္တဲ့ ေနရာကေန ျဖတ္ေတာက္ယူတဲ့ အပိုင္းေလးပါ။
(v )  Tools  ဆိုတာကလည္း လုပ္စရာေတြ မ်ားစြာ ရွိပါတယ္...
( vi)  ေအာက္က ၾကယ္ပုံေတြ ေလးေထာင့္ကြက္ေတြ  အ၀ိုင္းေလးေတြကေတာ့  မိမိလိုအပ္သလို အသုံးျပဳ
       နိဳင္ပါတယ္... ဥပမာ ကြ်န္ေတာ္ ပုံေတြေပၚ အနီကြက္ေလးေတြ မွ်ားေလးေတြ ျပထာ အဲထဲကပါ။
ကဲဗ်ာ သည္လိုဆို လုပ္ရင္းးတတ္မွာေသျခာပါတယ္... လုပ္ေဆာင္ခ်က္  မွားလို႕ ျပန္ဖ်က္မယ္ဆိုရင္
ညာဘက္ ေအာက္ေထာင့္မွာ  Undo ဆိုတာ ကလစ္တာနဲ႕ သူ႕ဘာသာ ပ်က္ပါတယ္...
ေဆ့ေတာ့မယ္ဆိုတာနဲ႕ အဲေအာက္က  Save ေပါ့ဗ်ာ... ဒါဆို ဇယားေလးက်လာမယ္..
 သည္လိုေပါ့ အဲခါမွာ ေအာက္က  Save As ဆိုတာကလစ္ျပီး မိမိတို႕ လိုအပ္ေသာေနရာ ကြ်န္ပ်ဴတာ ဖိုင္ထဲမွာ ေဆ့ျပီးသိမ္းထားနိဳင္ပါျပီၤ.....


ေဒါင္းနည္းမသိခဲ့ပါက { ဒီမွာ } သြားလိုက္ပါ