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


N .

Saturday 7 January 2012

HTML မိတ္ဆက္

ယေန႕အခါမွာ  Internet ဟာ အလြန္က်ယ္ျပန္႕လာျပီး လူတိုင္း နီးပါး အသံုးျပဳေနၾကၿပီ ျဖစ္ပါတယ္။ ကြၽန္ေတာ္တို႔ဟာလည္း  Internet  ေပၚမွာ ကိုယ္ပိုင္ေနရာမ်ားအား ကိုယ္ပိုင္ Homepage မ်ားျဖင့္ အလြယ္ တကူ ယူေဆာင္ႏိုင္ေလၿပီ။  Internet ဆိုတာကို အလြယ္ရွင္းရရင္ေတာ့  ကမၻာေပၚရိွ  ကြန္ပ်ဴတာမ်ား အျပန္အလွန္ခ်ိတ္ဆက္ထားေသာ Network ကြန္ယက္ၾကီးတစ္ခု ျဖစ္ပါတယ္။ အဲဒီလို  Information  ေတြ  ဖလွယ္ဖို႔ အတြက္ Web  Page  ေတြကို  ေရးဆြဲရၿပီး Web Page ေရးဆြဲဖို႔အတြက္ ဆုိရင္ HTML ဟာ အဓိက က်ပါတယ္။ ေရးသားထားတဲ့ Web Page ေတြကို Web Browser Software နဲ႕ ၾကည့္ရႈရပါတယ္။ Web Broswer Software ေတြထဲမွာေတာ့ Internet Explorer နဲ႕ Firefox တို႕က အဆင္ ေျပဆုံးနဲ႔ နာမည္ၾကီးဆုံးေတြပါ။
HTML History

         1989 ခုက Tim Berners Lee နဲ႕ Rober Calliau ဟာ Research Documents ေတြကို ပိုမိုျမန္ဆန္ ေကာင္းမြန္မယ့္ နည္းလမ္းကို ရွာေဖြ ခဲ့ပါတယ္။ ၂ ႏွစ္  ေလာက္ၾကာေတာ့  Berners Lee ဟာ  browser  ေတြက  ၾကည့္ရႈဖတ္သားႏိုင္ျပီး  Tag  မ်ားႏွင့္ ဖြဲ႕စည္းတည္ေဆာက္ထားတဲ့  နည္း ပညာတစ္ခုကို  ျပဳလုပ္ႏိုင္ခဲ့ပါတယ္။  ထို႔ေနာက္ အဲဒီ tage ေတြထဲမွာ  HyperQLink နဲ႕ document အခ်င္း ခ်င္း ခ်ိတ္ဆက္ႏိုင္တဲ့ tag ေတြပါ ထည့္သြင္းႏိုင္ခဲ့ပါသည္။ Berners Lee ရဲ႕ နည္းပညာက Hyber Text Markup Language ဆိုတဲ့ HTML ပါပဲ။ 


Tag ဆိုတာဘာလဲ

         Tag  ဆိုတာကေတာ့  ရိုးရိုး  Text  ေတြနဲ႔  HTML  code  ေတြကို  ခြဲျခားလို႔ရေအာင္ လုပ္ထားတာပါ။  ဘယ္လိုမ်ဳိးလဲဆိုရင္ေတာ့ <b>This is bold </b> ဆိုရင္ web browser နဲ႔ ၾကည့္ရင္ စာလံုးဟာ bold ျဖစ္ေနပါ လိမ့္မယ္။ အဲဒီမွာ <b> နဲ႕ </b> တို႔ ဟာ tag ေတြပါ။ အမ်ားအားျဖင့္ tag ေတြဟာ အဖြင့္နဲ႔ အပိတ္ ပါပါတယ္။ အပိတ္ဆိုရင္ / ေလး ခံထားေပးရ ပါတယ္။ 

HTML အတြက္ Editor

         HTML အတြက္ Editor ေတြ IDE ေတြ အမ်ားၾကီး ရိွပါတယ္။ ကၽြန္ေတာ္ကေတာ့ Dreamweaver အၾကိဳက္ဆံုးပါပဲ။ သူက HTML မ တတ္ရင္ေတာင္ Website တစ္ခု ဆြဲ လို႔ရပါတယ္။ ဒါေပမယ့္ Dream-weaver ကို သံုးရင္ေတာ့ HTML  code ေတြ သိလာမွာ မဟုတ္သလို  တျခား website ေတြကို ျပင္ရတာ လည္း ခက္ပါလိမ့္မယ္။ ကြၽန္ေတာ္ တို႔ေတြ သူမ်ားေတြ ေပးထားတဲ့  website template ကိုျပင္ခ်င္တယ္၊ ကိုယ္ပိုင္ေသေသခ်ာခ်ာ HTML code ေတြကို သိခ်င္တယ္ဆိုရင္ေတာ့ ေလ့လာကာစမွာ Notepad သံုးျပီး ေလ့လာပါ။  ေလ့က်င့္ပါ။  HTML  က  website ဆြဲရတဲ့အထဲမွာ  အလြယ္ ဆံုးနဲ႔ အေျခခံအက်ဆံုးပဲ။
         သူ႕ကို ေသေသခ်ာခ်ာ နား လည္ထားမွ တျခား web pro-gramming ေတြျဖစ္ၾကတဲ့ PHP,  ASP.NET , JSP , Ruy On Rail တို႕မွာ အေထာက္အကူျဖစ္မွာပါ။
 
Notepad ျဖင့္ စတင္ျခင္း

         Windows Key + R ကို ႏိွပ္လိုက္ပါ။ Run Dailog Box တက္ လာပါမည္။ ထို႕ေနာက္ notepad လုိ႔ ရိုက္လိုက္ပါ။ 
         ျပီးလွ်င္ OK ကို ႏိွပ္ပါ။ ဒါဆို ရင္ notepad တက္လာပါလိမ့္မယ္။
         Notepad ထဲတြင္ Format ေအာက္က word warp ကို check လုပ္ထားပါ။ ဘာျဖစ္လို႔လဲဆိုရင္ေတာ့ Word Warp က Notepad မွာ စာရိုက္ တာ ျပည့္သြားရင္ ေအာက္တစ္ ေၾကာင္း ဆင္းသြားရန္အတြက္ ျဖစ္ ပါတယ္။

HTML စတင္ေရးသားျခင္း

            Notepad ထဲတြင္ ေအာက္ပါ အတုိင္း ေရးသားလိုက္ပါ။



<html>
  <head> 
    <title>This is title</title>
  </head>
  <body>
    This is body</body>
</html>
         HTML နဲ႔စျပီး HTML နဲ႔ ျပန္ ပိတ္ရပါတယ္။ အဲဒီၾကားမွာ html  code ေတြ ေရးရပါတယ္။ Head Tag  နဲ႔ Head Tag အပိတ္ၾကားတြင္ Title
ထည့္ထားသည္ကို ေတြ႕ရမည္။ Title  သည္ Browser ၏ ထိပ္ bar တြင္ ေတြ႕ျမင္ရန္ ျဖစ္တယ္။ Body အဖြင့္ နဲ႔ အပိတ္ၾကားမွာ မိမိ၏ ႏွစ္သက္ရာ စာမ်ား ေရးသားႏိုင္ပါတယ္။ 
         အဲဒါကို တေနရာမွာ save သြင္းလိုက္ပါ။ Save Dialog box တက္လာရင္ filetype ကို All file  လို႔ ေပးလိုက္ပါ။ file name ကို  firstrun. html လို႔ ေပးလိုက္ပါ။  firstrun သည္  မိမိ၏ ႏွစ္သက္ရာနာမည္ ေပးႏိုင္ပါ တယ္။ .html ဟာ file extension ျဖစ္တယ္။ HTML ေရးထားေသာ page မ်ားကို .html ႏွင့္ .htm လို႕ ေပးမွသာ browser တြင္ ေပၚပါ လိမ့္မယ္။
         Save လုပ္လိုက္ေသာ  file  လမ္းေၾကာင္းကို သြားလိုက္ပါ။  first. html file ေလးကို double click လုပ္ျပီး ဖြင့္လိုက္ပါ။
         ဒါဆို page ေလးတစ္ခု တက္ လာတာကို ျမင္ရပါမယ္။
         ထိပ္ပိုင္းတြင္ File ပတ္လမ္း ေၾကာင္းကို address bar တြင္ ေတြ႕ရ မည္ ျဖစ္ပါတယ္။
         Title tag ထဲတြင္ ေရးထား ေသာ This is title ဆိုေသာ စာကို Windows ၏ Title bar ႏွင့္ Tab Title bar တို႔တြင္ ေတြ႕ရမည္။ Body tag ထဲတြင္ ေရးထားေသာ This is body  ဆိုေသာ စာသားကို  စာမ်က္ႏွာအျဖဴ ေပၚတြင္ ေပၚေနသည္ကို ေတြ႕ရမည္ ျဖစ္ပါတယ္။
         ျပင္မယ္ဆိုရင္ေတာ့  -
         IE7 မွာ ဆိုရင္ Page > View Source ကို ႏိွပ္လိုက္ပါက Notepad နဲ႔ ကိုယ္ေရးထားတဲ့ HTML ပြင့္လာပါ မယ္။
         IE 6 မွာ ဆိုရင္ View > Source ကို ႏိွပ္လိုက္ပါက Notepad နဲ႔ ကိုယ္ေရးထားတဲ့ HTML ပြင့္လာ ပါမယ္။
         အဲဒီမွာ ေရးထားတဲ့ code ေတြကို ဖတ္ႏိုင္သလို  ကိုယ့္စက္ထဲမွာ ေရးထားတဲ့ page ဆိုရင္ေတာ့  ျပင္ျပီး  တစ္ခါတည္း  save လုပ္ႏိုင္ပါတယ္။ Internet ေပၚက Website ေတြကို ေတာ့ view > source ကေန ဖြင့္ျပင္ ျပီး save လုပ္လို႔ မရပါဘူး။


Source : Link

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...