ဒီပို႔စ္ကိုေရးရတဲ့ရည္ရြယ္ခ်က္ကေတာ့ မသိေသးသူမ်ား ဗဟုသုတရၿပီး HTML နဲ႔ပတ္သက္တာေတြကို အေျခခံကစၿပီး ေလ့လာႏိုင္ဖို႔အတြက္ပါ။ သိၿပီးသားပုဂၢိဳလ္မ်ားကေတာ့ မ်က္စိေညာင္းလိမ့္မယ္ဗ်။
HTML ဆိုတာ
Hypertext Markup Language ကိုေခၚတာျဖစ္ပါတယ္။ အရိုးရွင္းဆံုးေျပာရမယ္ဆိုရင္ေတာ့ HTML ဆိုတာ အင္တာနက္စာမ်က္ႏွာ (website) မ်ားကိုဖန္တီးရာမွာ အသံုးျပဳတဲ့ ကြန္ပ်ဴတာဘာသာစကားတစ္မ်ိဳးျဖစ္ပါတယ္။
Hypertext - ဆိုတာက အသံုးျပဳသူ သို႔မဟုတ္ ၾကည့္ရွဳသူရဲ႕ ေတာင္းဆိုမွဳကိုအေျခခံၿပီး အျခားသက္ဆိုင္ရာ သတင္းအခ်က္အလက္မ်ားရွိတဲ့ေနရာမ်ားကို hyperlinks ဆိုတဲ့အထူးျပဳလုပ္ထားေသာ text မ်ားကိုႏွိပ္ျခင္းအားျဖင့္ ေရာက္ရွိသြားေအာင္ ျပဳလုပ္ေပးေသာနည္းပညာတစ္ခုပါ။
Markup Language - ဆိုတာက text ေတြနဲ႔အဲဒီ text ေတြရဲ႕အျခားအခ်က္အလက္မ်ားကို ေပါင္းစပ္ထားတဲ့ language တစ္ခုပါ။ အျခားအခ်က္အလက္ေတြဆိုတာက အဲဒီ text ေတြရဲ႕ဖြဲ႕စည္းပံု သို႔မဟုတ္ ဘယ္လိုေပၚရမယ္၊ ဘယ္လိုေနရာမွာေပၚရမယ္ စတာမ်ိဳးေတြအတြက္ျဖစ္ပါတယ္။
သမိုင္းေၾကာင္း
HTML ရဲ႕သမိုင္းေၾကာင္းကို အက်ဥ္းခ်ဳပ္ေျပာရရင္ေတာ့ ၁၉၉၀ ခုႏွစ္မွာ Tim Berners-Lee ဆိုတဲ့ Scientist တစ္ေယာက္က တီထြင္ခဲ့တာပါ။ သူ႔ရဲ႕အဓိကရည္ရြယ္ခ်က္ကေတာ့ တျခားတကၠသိုလ္၊ ေကာလိပ္မ်ားမွာရွိတဲ့ Scientists မ်ားနဲ႔ research လုပ္ထားတဲ့ စာရြက္စာတမ္းမ်ားကိုသူတို႔အခ်င္းခ်င္း ဖလွယ္ၾကည့္ရွဳႏိုင္ဖို႔ပါ။ ဒါေပမယ့္သူ႔ရဲ႕တီထြင္မွဳဟာ သူေမွ်ာ္မွန္းထားတာထက္ အဆေပါင္းမ်ားစြာ ပိုမိုႀကီးမားခဲ့ပါတယ္။ ဘာျဖစ္လို႔လဲဆိုေတာ့ ယေန႔ကမာၻႀကီးတစ္ခုလံုး အသံုးျပဳေနတဲ့ အင္တာနက္ထဲက စာမ်က္ႏွာမ်ားဟာ အဲဒီ HTML ဆိုတဲ့ဘာသာစကားကိုပဲ အေျခခံၿပီးအသံုးျပဳေနၾကရလို႔ပါပဲ။
ယေန႔ကာလမွာ Website တစ္ခုကိုဖန္တီးေတာ့မယ္ဆိုရင္ HTML ကိုဖယ္ထားလို႔မရပါဘူး။ Website ေတြဖန္တီးဖို႔ အထူးထုတ္လုပ္ထားတဲ့ software (ဥပမာ - Dreamweaver) ေတြကိုသံုးရင္ေတာင္မွ HTML ကိုသိထားမွအဆင္ေျပႏိုင္လိမ့္မယ္။ ဒါေပမဲ့ ပူစရာေတာ့မရွိပါဘူး။ HTML ကသင္ယူရတာလြယ္ကူၿပီး အသံုးျပဳရတာလဲ လြယ္ကူပါတယ္။
ဘယ္လိုအလုပ္လုပ္လဲဲ
HTML Tags ေတြနဲ႔ရိုးရိုးစာေတြေရးထားတဲ့ ဖိုင္တစ္ခုကို ေရးၿပီးသြားၿပီဆိုရင္ အဲဒီဖိုင္ကို .html သို႔မဟုတ္ .htm ဆိုတဲ့ file extension နဲ႔သိမ္းလိုက္ရမယ္။ အဲဒီဖိုင္ကို browser (Firefox သို႔မဟုတ္ IE) နဲ႔ဖြင့္ၾကည့္လိုက္ရင္ အဲဒီ browser က HTML ဖိုင္မွာေရးထားတဲ့ text ေတြကိုဖတ္လိုက္မယ္။ ၿပီးရင္ဖိုင္ထဲမွာပါတဲ့ Tags နဲ႔ Text ေတြကိုဘာသာျပန္ၿပီး browser ေပၚမွာစာမ်က္ႏွာတစ္ခုအျဖစ္ ျပန္ပံုေဖာ္ေပးပါတယ္။
Tag ဆိုတာဘာလဲ
Tag ဆိုတာကရိုးရိုးသာမန္ Text ေတြနဲ႔ HTML ကုဒ္ေတြကိုပိုင္းျခားေပးထားတာပါ။Tag အမ်ိဳးမ်ိဳးဟာ တစ္ခုနဲ႔တစ္ခု အသံုးျပဳရတာျခင္း ကြဲျပားၾကပါတယ္။ ကိုယ့္ရဲ႕ HTML စာမ်က္ႏွာကို Browser တစ္ခုခုနဲ႔ ၾကည့္လိုက္ရင္ Tags ေတြကိုျမင္ရမွာမဟုတ္ပါဘူး။ ဒါေပမယ့္ သူတို႔ရဲ႕ effects ေတြကအလုပ္လုပ္ပါလိမ့္မယ္။ ေယဘူယ်အားျဖင့္ေျပာရရင္ Tag ႏွစ္မ်ိဳးရွိပါတယ္။ အဖြင့္ Tag (opening tag) နဲ႔ အပိတ္ Tag (closing tag) ဆိုၿပီးေတာ့ျဖစ္ပါတယ္။ ေအာက္မွာျပထားတဲ့ ရိုးရိုးရွင္းရွင္း ဥပမာတစ္ခုကိုၾကည့္ပါ။<b>This text is bold.</b>
အဲဒီ <b> နဲ႔ </b> တို႔ဟာ text ေတြကို bold ျဖစ္ေအာင္လုပ္ေပးတဲ့ Tag ျဖစ္ပါတယ္။ အဖြင့္ <b> နဲ႔အပိတ္ </b> တို႔ၾကားမွာေရးထားတဲ့စာမွန္သမွ်ဟာ bold text အေနနဲ႔ေပၚမွာပါ။
HTML tags တိုင္း အဖြင့္နဲ႔အပိတ္လိုသလားဆိုေတာ့ ျခြင္းခ်က္တစ္ခ်ိဳ႕ရွိပါတယ္။ အနည္းငယ္ေသာ HTML tags တစ္ခ်ိဳ႕က အပိတ္မလိုၾကပါဘူး။ ဥပမာ <br /> ဆိုတဲ့ လုိင္းတစ္ေၾကာင္းေအာက္ကိုဆင္းေစတဲ့ tag ဆိုရင္တစ္ခုပဲေရးရပါတယ္။ အဖြင့္အပိတ္ ႏွစ္ခုေရးစရာမလိုပါဘူး။
HTML နဲ႔စေရးၾကည့္ရေအာင္
ကိုယ္တိုင္အလြယ္ကူဆံုး page တစ္ခုကိုစေရးၾကည့္လိုက္ရင္ ပိုၿပီးနားလည္သြားပါလိမ့္မယ္။ ပထမဆံုး Notepad ကိုဖြင့္ၿပီးေတာ့ ေအာက္မွာျပထားတဲ့ ကုဒ္ေတြကိုကူးေရးပါ။<html>
<head>
<title>This is Title</title>
</head>
<body>
<h1>This is header 1</h1>
This is my first HTML page.
<br/>
<b>This text is bold</b>
<br/>
<i>This text is italic.</i>
<br/>
<u>This text is underlined.</u>
</body>
</html>
ေရးၿပီးသြားၿပီဆိုရင္ အဲဒီဖိုင္ကို mypage.html ဆိုတဲ့ file extension အေနနဲ႔သိမ္းလိုက္ပါ။ ၿပီးရင္ေတာ့ အဲဒီဖိုင္သိမ္းထားတဲ့ေနရာ (ဥပမာ - C:\MyDocuments\mypage.html) ကိုသြားၿပီး ဖိုင္ကို double click ႏွိပ္ဖြင့္ၾကည့္လိုက္ပါ။
ေဟာဒီလိုျမင္ရပါလိမ့္မယ္။ HTML page ေတြဟာ <html> နဲ႔စၿပီး </html> နဲ႔အဆံုးသတ္ပါတယ္။ <head> နဲ႔ </head> ၾကားမွာ header information ေတြကိုေဖာ္ျပရန္ျဖစ္ပါတယ္။ ဥပမာ - ေနာက္ပိုင္းကိုယ့္ page ကို CSS (Cascading Style Sheet) ေတြနဲ႔တန္ဆာဆင္မယ္ဆိုရင္ CSS ကုဒ္ေတြကို သူတို႔ၾကားမွာေရးရမွာေပါ့။ အဲဒီ header information ေတြဟာ browser ကေနဖြင့္ၾကည့္ရင္ ျမင္ရမွာမဟုတ္ပါဘူး။ <title> ကေတာ့ကိုယ့္ page ရဲ႕ေခါင္းစဥ္ေပါ့။ အဲဒီေခါင္းစဥ္က browser ရဲ႕ caption မွာေပၚမွာပါ။
browser ကေနကိုယ္ျမင္ေစခ်င္တဲ့စာေတြအားလံုးကို <body> နဲ႔ </body> ၾကားမွာေရးရမွာပါ။
<h1> ဆိုတာကေခါင္းစဥ္အတြက္ tag တစ္ခုပါ။ ေခါင္းစဥ္အတြက္ ၆ မ်ိဳးရွိပါတယ္။ <h1>, <h2>, <h3>, <h4>, <h5>, <h6> ဆိုၿပီးေတာ့ျဖစ္ပါတယ္။
<br/> ရဲ႕ရည္ရြယ္ခ်က္ကေတာ့ ေနာက္စာေၾကာင္းတစ္ေၾကာင္းကိုဆင္းေစတာပါ။
<b> ကစာသားကို bold ျဖစ္ဖို႔အတြက္
<i> ကေတာ့ စာသားေတြကုိနည္းနည္းေစာင္းေစရန္နဲ႔
<u> ဆိုတာကေတာ့ စာသားေတြရဲ႕ေအာက္က မ်ဥ္းေၾကာင္းတားဖို႔ ျဖစ္ပါတယ္။
အဲဒီထက္အမ်ားႀကီးရွိပါေသးတယ္။ ဒီမွာသြားၿပီးေလ့လာၾကည့္ၾကပါ။
ခုလက္ရွိျမင္ေနၾကတဲ့ အင္တာနက္စာမ်က္ႏွာ (Website) ေတြလိုလွလွပပ ဒီဇိုင္းေတြလုပ္ခ်င္ရင္ေတာ့ HTML တစ္ခုထဲနဲ႔တင္ မရပါဘူး။ CSS (Cascading Style Sheet ) ေတြ Javascript ေတြနဲ႔ထပ္ၿပီးေပါင္းစပ္လိုက္မွ အဲဒီလိုအဆင့္ျမင့္လွပတဲ့ အင္တာနက္စာမ်က္ႏွာ (Website) ေတြကိုဖန္တီးလို႔ရပါတယ္။
ဒါေလာက္ဆိုရင္ HTML ကိုနည္းနည္းေတာ့ မတတ္တစ္ေခါက္ေလး သိသြားေလာက္ၿပီထင္ပါတယ္။ ဒီထက္ပိုၿပီး အမ်ားႀကီးသိခ်င္ၾကသူမ်ားကိုေတာ့ လင့္ခ္ေလးေတြေပးလိုက္ပါတယ္။ အဲဒီက Tutorial ေတြကိုထပ္ေလ့လာလိုက္ရင္ HTML ဆိုတာႀကီးကို ကၽြမ္းက်င္သြားပါလိမ့္မယ္။ မခက္ပါဘူး။ လုပ္ၾကည့္ဖို႔ပဲလိုပါတယ္။
http://www.w3schools.com/html/default.asp
http://www.devx.com/projectcool/Article/17861/0/page/3
http://www.yourhtmlsource.com/myfirstsite/
အဲဒီေနရာေတြမွာ ေလ့လာႏိုင္ပါတယ္။
Credit: w3schools, devx, yourhtmlsource
Technorati:html, tutorial
Myanmar Blogger Forum
Wednesday, June 06, 2007
HTML ဆိုတာ
Subscribe to:
Post Comments (Atom)
10 comments:
ဒါမ်ိဳးပို႔စ္ေတြ မ်ားမ်ားေရးဗ်ာ အားေပးတယ္ :)
ဟုတ္ကဲ့ အစ္ကိုေရ။ ေက်းဇူးပါ။
You are my first HTML eye opener. Thanks a lot.
Thanks and appreciated for this html post...normally..such a tech geek overlook simple and basic things, needed by some plp. BTW..here in comment place, I can not use ZG font..it just appear square. Is it cos of ur blog or my computer?
me>>>Thura Tun:
I am really glad to hear that. I will try to post this kind of basic tech. Thanks for your support.
me>>>Kay:
Umm... I dont know what's the problem. If you can see the other posts and only cant see in comment, may be it's my blog problem. I will check it. Thanks for your comment.
mite tae...kyay zuu pae...but i'm just a starter to these...i should learn a lot in my free time...
Thanks for ur comment. :)
I really really appreciate you for writing this post! =)
It's something essential for Myanmar people.
Keep it up!
Cheers!
mgthantzin
ဒီ post ေလးကို ကၽြန္ေတာ္တို႕ MYSTERY ZILLION က လုပ္ေနတဲ့ Computer ဆိုင္ရာ wiki မွာ ထည့္သြင္းခြင့္ျပဳႏိုင္မလားမသိဘူး...
ရပါတယ္ ကိုေစတန္။ ကၽြန္ေတာ့္ပို႔စ္ေလးေတြကို ႀကိဳက္တဲ့ေနရာမွာ သံုးႏိုင္ပါတယ္ ခင္ဗ်ာ။
Post a Comment