.: html

Web Page မ်ားကိုေရးသားျခင္း၏ အေျခခံအုတ္ျမစ္ျဖစ္ေသာ HTML (Hyper Text Markup Language) ႏွင့္ CSS (Cascading Style Sheet) ဆိုင္ရာ ေလ့က်င့္ခန္းမ်ားကို (W3 Schools) မွ ဘာသာျပန္ဆိုတည္းျဖတ္၍ အတတ္ႏိုင္ဆံုး စံုလင္ေအာင္ ေလ့လာ ျပဳစု တင္ျပထားသည္။

နည္းပညာလမ္းေၾကာင္းေပၚမွာ အေျခခံအက်ဆံုး အ႐ိုးရွင္းဆံုးနဲ႔ နားလည္အလြယ္ဆံုး Webpage ေရးနည္းကိုျပပါဆိုရင္ HTML ပဲရွိပါတယ္… ဒါကိုနားမလည္ရင္.. ဘာမွ အလုပ္မျဖစ္ပါဘူး Pro မျဖစ္ႏိုင္ပါဘူး… ဘာပဲျဖစ္ျဖစ္ ၾကားနာမွတ္သားဖူးသမွ် ေ၀မွ်ပါတယ္.. နားလည္ၿပီးသူမ်ားအတြက္ မရည္ရြယ္ပါ.. စတင္ေလ့လာလိုသူမ်ားအတြက္သာ အထူးဦးတည္ ေရးသားတာျဖစ္ပါတယ္.. ကၽြန္ေတာ္ သိလြန္းလို႔မဟုတ္ပါ.. အထက္မွာ ဆိုခဲ့သလို "ဧ၀ံေမ သုတံ " ပါလို႔ ထပ္ၿပီး ၀န္ခံပါရေစ…

ဒီသင္ခန္းစာမွာ စာဖတ္သူဟာ ကိုယ္ပိုင္၀က္ဘ္ဆိုဒ္တစ္ခုကို Html နဲ႔ ဘယ္လိုဖန္တီး ယူရမယ္ဆိုတာကို ေလ့လာသြားရမွာျဖစ္ပါတယ္။
html ဟာ တကယ္ေတာ့ သင္ယူရ အလြန္လြယ္ကူပါတယ္… ေအးေအးေဆးေဆးနဲ႔ စိတ္ကို ေလွ်ာ့ၿပီး ဖတ္ပါ ။ ဖန္တီးပါ ။ ေလ့က်င့္ပါ။ စာဖတ္သူ ေပ်ာ္ရႊင္လာမွာေသခ်ာပါတယ္။ ကဲ… ေပ်ာ္ေပ်ာ္ရႊင္ရႊင္ ရယ္စရာေလးေတြေျပာၿပီး သင္ၾကရေအာင္..

မိတ္ဆက္စကား
နည္းပညာလမ္းေၾကာင္းေပၚမွာ အေျခခံအက်ဆံုး အ႐ိုးရွင္းဆံုးနဲ႔ နားလည္အလြယ္ဆံုး Webpage ေရးနည္းကိုျပပါဆိုရင္ HTML ပဲရွိပါတယ္… ဒါကိုနားမလည္ရင္.. ဘာမွ အလုပ္မျဖစ္ပါဘူး Pro မျဖစ္ႏိုင္ပါဘူး… ဘာပဲျဖစ္ျဖစ္ ၾကားနာမွတ္သားဖူးသမွ် ေ၀မွ်ပါတယ္.. နားလည္ၿပီးသူမ်ားအတြက္ မရည္ရြယ္ပါ.. စတင္ေလ့လာလိုသူမ်ားအတြက္သာ အထူးဦးတည္ ေရးသားတာျဖစ္ပါတယ္.. ကၽြန္ေတာ္ သိလြန္းလို႔မဟုတ္ပါ.. အထက္မွာ ဆိုခဲ့သလို "ဧ၀ံေမ သုတံ " ပါလို႔ ထပ္ၿပီး ၀န္ခံပါရေစ…

သင္ခန္းစာမိတ္ဆက္

HTML file ဆိုတာ ဘာလဲ…?

HTML ဆိုတာ Hyper Text Markup Language ဆိုတာကို ကုိယ္စားျပဳတဲ့ ေရွ႕စာလံုးေလးလံုးပါပဲ။ မသိမျဖစ္မို႔ အေသသာ က်က္မွတ္ထားလိုက္ပါ။ ေတာ္ၾကာေန ကိုယ္စီးတဲ့ျမင္းအထီးမွန္း အမမွန္း မသိျဖစ္ေနမယ္ဆိုပဲ….။

HTML file ဆိုတာကေတာ့ Markup tags လို႔ေခၚတဲ့ tag ေတြနဲ႔႐ိုက္ထားတဲ့ text ဖိုင္ တစ္ဖိုင္ပါပဲ….။ (ဘာမွမထူးဆန္းဘူးေနာ္… စာေတြကို စနစ္တက်သာ ႐ိုက္ထည့္လိုက္ ၀က္ဘ္ဆိုဒ္ တစ္ခုရမယ္ေပါ့… တယ္ဟုတ္ပါလား)

အဲဒီမွာ ထပ္တိုးလာတဲ့စကားလံုးတစ္လံုးျဖစ္တဲ့ Markup tag ကေရာ ဘာလဲ ၊ Markup tag ဆိုတာဟာ browser ကို ဘာစာလံုးျမင္ရင္ ဘာေတြေဖာ္ျပလိုက္ပါလို႔ ညႊန္ၾကားတဲ့ ညႊန္ၾကားခ်က္ပါ။ tag ဆိုတာဟာ ေထာင့္ကြင္း အဖြင့္အပိတ္ထဲမွာ စာေရးထားတဲ့ဟာေလးေတြပါ။ ဥပမာ− <html> ၊ </head> ၊ <style> အစရွိတဲ့ဟာေလးေတြပါ။ အဲဒီေတာ့ tag ဆိုတာ ေထာင့္ကြင္းအဖြင့္အပိတ္နဲ႔ စာသားေလးေတြလို႔ပဲ မွတ္လိုက္လို႔ရပါတယ္။ အဲဒီေထာင့္ကြင္းကေလးေတြကပဲ အင္တာနက္စာမ်က္ႏွာတစ္ခုကို ထိန္းခ်ဳပ္ ဖန္တီးသြားတာပါတဲ့။ ( browser ကေရာ ဘာလဲလို႔ ေမးအံုးမွာလား… ေမးရင္ေျဖမယ္.. ၀င္းဒိုးမွာ ပါၿပီးသား အင္တာနက္ၾကည့္ဖို႔သံုးတဲ့ Internet Explorer ဆိုတာဟာ browser ပါပဲဗ်ား….. ဒါမွမဟုတ္လည္း Mozilla ရဲ့ Fire Fox ေပါ့ )

HTML file တစ္ဖိုင္ဟာ .html သို႔မဟုတ္ .htm ဆိုတဲ့ Extension နဲ႔ ျဖစ္ရပါမယ္..။ (ဆိုလိုတာက မိမိေရးထားတဲ့ဖိုင္ကို သိမ္းတဲ့အခါ filename.html ဒါမွမဟုတ္ filename.htm လို႔ ေပးၿပီးသိမ္းရမယ္တဲ့ ။ ဥပမာ − index.html ။)

HTML ဖိုင္ကို ဘာနဲ႔ ေရးရမလဲ၊ ေရးလို႔ရတာေတြကေတာ့ အမ်ားႀကီးပဲ။ ဒါေပမယ့္ အေျခခံအက်ဆံုးနဲ႔ အလြယ္ကူဆံုးရႏိုင္မယ့္ notepad လို႔ေခၚတဲ့ simple text editor တစ္ခုနဲ႔ပဲ ေရးၾကရေအာင္။ ပံုမွန္အားျဖင့္ ဘယ္ကြန္ပ်ဴတာမွာမဆိုပါတဲ့ notepad ဆိုတဲ့ စာ႐ိုက္ပ႐ိုဂရမ္ေလးဟာ Start => Program=>Accessories => notepad ကိုႏွိပ္ၿပီး ဖြင့္ႏိုင္ပါတယ္။ ဒီထက္လြယ္တာ ရွိေသးတယ္။ Start=>Run ကို ဖြင့္ၿပီး notepad လို႔႐ိုက္ၿပီးေတာ့ Enter ေခါက္ခ်လိုက္၊ notepad ဖိုင္တစ္ဖိုင္ပြင့္လာမွာပဲ)

ေျပာင္းလြယ္ျပင္လြယ္ျပင္ဆင္ျခင္း

ေရးရလြယ္၊ ျပင္ရလြယ္၊ ျပန္ၾကည့္ရလြယ္ေအာင္

ကၽြန္ေတာ္တို႔ ေရးသားထားတဲ့ Web စာမ်က္ႏွာကို ျပန္လည္တည္းျဖတ္မယ္ဆိုရင္.. အဲဒီ Html Page ကို Internet Explorer နဲ႔ဖြင့္ၿပီး View => Source ကို ႏွိပ္ေပးလိုက္ရင္ Notepad ျပန္ပြင့္လာပါတယ္.. အဲဒီမွာ ထပ္သြင္းခ်င္တာသြင္းမလိုတာဖ်က္ၿပီး Save လုပ္လိုက္ရပါတယ္.. ၿပီးေတာ့ Internet Explorer မွာ Refresh သြားလုပ္လိုက္ရင္ ေနာက္ဆံုးျပင္ဆင္ခဲ့တာကို ျပန္ျမင္ရပါတယ္.. ဒီလိုလုပ္တာကို Firefox မွာ လုပ္လို႔အဆင္မေျပပါဘူး ဒါေၾကာင့္ ဒီျဖစ္စဥ္ေလးကို IE မွာပဲ လုပ္ဖို႔ အႀကံေပးပါတယ္.. ေရးလိုက္၊ သိမ္းလိုက္ ျပန္ၾကည့္လိုက္ အၿမဲတမ္းလုပ္ေနရမယ့္ ဒီျဖစ္စဥ္ေလးကို ေျပာင္းလြယ္ျပင္လြယ္ျဖစ္ရေအာင္ ျပင္ဆင္ၾကည့္ရေအာင္..

ပထမဆံုး notepad ကိုဖြင့္ထားမယ္။ (ဒါမွမဟုတ္ ေရးၿပီးသားဆိုရင္လည္း IE မွာ View => Source ႏွိပ္ၿပီး Code ျပင္မယ္ေပါ့)

Web စာမ်က္ႏွာတစ္ခုဆြဲမယ္။

သိမ္းမယ္။ ၿပီးရင္ Browser ကိုဖြင့္မယ္။

ျပန္ၾကည့္မယ္။

ဒါဟာ Web page ေရးေနသမွ် အၿမဲတမ္းလုပ္ေနရမယ့္ ျဖစ္စဥ္ပါ။ အဲဒီျဖစ္စဥ္ကေလးအတြက္ ကၽြန္ေတာ္တို႔က အလြယ္ကူဆံုးနည္းလမ္းေလးလုပ္ထားမယ္−
(၁) notepad ကို Ctrl+S နဲ႔ Save လိုက္။
(၂) Alt+Tab ႏွိပ္ၿပီး Browser ကို သြားလိုက္။
(၃) F5 ကိုႏွိပ္ၿပီး Refresh လုပ္လိုက္ရင္ ေနာက္ဆံုးျပင္ဆင္ခဲ့တဲ့အေနအထားျပန္ေပၚလာမယ္။

ဒါဆို မၾကာခဏ ကၽြန္ေတာ္တို႔ စာမ်က္ႏွာကို ေရးဆြဲေနရင္း မွန္မမွန္ ျပန္ၾကည့္ႏိုင္ၿပီေလ….

မွတ္စုတို

၁။ HTML စာတမ္းတစ္ခုဆိုတာ HTML element (HTML အစိတ္အပိုင္း) ေတြနဲ႔တည္ေဆာက္ထားတဲ့ ဟာျဖစ္တယ္။
၂။ HTML element ေတြဟာ tag ေတြရဲ့ အဓိပၸါယ္ဖြင့္ဆိုခ်က္အတိုင္း စာမ်က္ႏွာကို ေဖာ္ျပၾကတာျဖစ္တယ္။
၃။ Tag မ်ားနဲ႔ပတ္သက္ၿပီးေအာက္ပါတို႔ကေတာ့ မွတ္သားစရာေလးေတြျဖစ္ပါတယ္−

HTML tag ေတြကို HTML element ေတြ ဖန္တီးဖို႔အသံုးျပဳပါတယ္။

HTML tag ေတြဟာ angle bracket လို႔ေခၚတဲ့ ေထာင့္ကြင္းအဖြင့္ < နဲ႔ ေထာင့္ကြင္းအပိတ္ > ျဖင့္ ကြင္းခတ္ထားတဲ့ ဟာေတြျဖစ္ပါတယ္။

HTML tag ေတြဟာ ပံုမွန္အားျဖင့္ အဖြင့္ အပိတ္ တစံု လာတတ္ပါတယ္… ဥပမာ နဲ႔ ။

အဖြင့္ကို start tag လို႔ေခၚၿပီး အပိတ္ကိုေတာ့ end tag လို႔ေခၚပါတယ္။

HTML tag ရဲ့ေထာင့္ကြင္း ႏွစ္ခုၾကားက စာကေတာ့ element content လို႔ေခၚပါတယ္။

HTML tag ေတြဟာ စာလံုးေပါင္း အႀကီးအေသး မေရြးပါဘူး။ ဥပမာ လို႔ေရးတာဟာ လို႔ေရးတာနဲ႔ အတူတူပါပဲ။

HTML Element (HTML အစိတ္အပိုင္း)

အေပၚမွာၿပီးခဲ့တဲ့ ေလ့က်င့္ခန္းမွာပါ၀င္တဲ့ စာေၾကာင္းေတြထဲက ပဲထုတ္ျပရရင္ အဖြင့္အပိတ္ Tag တစံု ပါတဲ့ အပိုင္းဟာ Element တစ္ခုပါပဲ−

This text is bold

ဒီစာေၾကာင္းကို သ႐ုပ္ခြဲၾကည့္မယ္ဆိုရင္

ပထမဆံုး Start tag ျဖစ္တဲ့ ဆိုတာနဲ႔ စပါတယ္။

ပါ၀င္တဲ့ element content ကေတာ့ This text is bold ဆိုတဲ့ စာသားပါ။

ၿပီးေတာ့ end tag ျဖစ္တဲ့ နဲ႔ element ကို ပိတ္လိုက္ပါတယ္။

အဲဒီမွာ ဆိုတဲ့ အဖြင့္အပိတ္ tag ရဲ့ ေစညႊန္မႈေၾကာင့္ စာသားဟာ This text is bold ဆိုၿပီး စာလံုးအမည္းနဲ႔ထြက္လာတာပါ။

ေနာက္တခု

<body>
This is my first homepage.
This text is bold
</body>

ကလည္း HTML element တစ္ခုပါပဲ။
သူလည္း <body>နဲ႔ဖြင့္တယ္.. </body> နဲ႔ပိတ္တယ္။ ဒီ tag တစံုရဲ့ ရည္ရြယ္ခ်က္ကေတာ့ ၾကားထဲက အပိုင္းေတြအားလံုးကို HTML body အျဖစ္နဲ႔ ေဖာ္ျပေပးတာပါပဲ။

ကၽြန္ေတာ္တို႔ ဘာေၾကာင့္ စာလံုးအေသးနဲ႔ ေရးရသလဲ
အထက္က စာပိုဒ္မွာ စာလံုးအႀကီးနဲ႔ ေရးေရး စာလံုးအေသးနဲ႔ေရးေရး နဲ႔ ဟာ အတူတူပဲလို႔ ေျပာခဲ့ပါတယ္။ အင္တာနက္ေပၚ သင္ေရာက္လာတဲ့အခါ ၀က္ဘ္ဆိုဒ္အေတာ္မ်ားမ်ားနဲ႔ source code ေတြက စာလံုးအေသးေတြကိုသာ သံုးစြဲေနၾကျခင္းျဖစ္ေနတာကို စာဖတ္သူ သတိထားမိလိမ့္မယ္… ကၽြန္ေတာ္တို႔အားလံုးလည္း စာလံုးအေသး lower case ကိုသာ အသံုးျပဳၾကတယ္… ဘာေၾကာင့္လဲ စာဖတ္သူဟာ အင္တာနက္ရဲ့ ေနာက္ဆံုးေပၚ စံသတ္မွတ္ခ်က္ ကိုသာလိုက္နာခ်င္တယ္ဆိုရင္ေတာ့ အၿမဲတမ္း lower case နဲ႔သာ html ကိုေရးပါ။ The World Wide Web Consotium (W3C) ကလည္း ၎တို႔ရဲ့ HTML 4 ၊ XHTML (The next generation of HTML) တို႔မွာပါ lower case tag ေတြကို အသံုးျပဳဖို႔ ခိုင္မာစြာ ရည္ညႊန္းေထာက္ခံထားပါတယ္။ အနည္းဆံုးေတာ့ အမွားျပန္စစ္တဲ့ေနရာမွာ lower case tag ေတြက အျမင္ရွင္းလင္းစြာနဲ႔ သံသယ စိတ္ႏွစ္ခြ မျဖစ္ေစရေအာင္ ရွင္းလင္းေစပါတယ္ ။ အဲဒါေၾကာင့္ ကၽြန္ေတာ္တို႔ဟာ စာလံုးအေသးနဲ႔ပဲ tag ေတြကို ေရးသားၾကပါစို႔။

အရွင္းဆံုး HTML

လက္ေတြ႔လုပ္လိုက္ပါအံုး
ေအာက္ကဥပမာေလးဟာ အလြန္ရွင္းလင္းတဲ့ HTML စာတမ္းေလးတခုပါ။ HTML tag ကလည္း အနည္းဆံုးျဖစ္ေအာင္ေရးထားတာ။ ဒါေလးက browser ထဲမွာ စာေတြ ဘယ္လိုေပၚလာတယ္ဆိုတာ ရွင္းျပထားတာပါပဲ..

<html>

<body>
The content of the body element is displayed in your browser.
</body>
</html>

စာေၾကာင္း ၁ နဲ႔ ၄ က HTML စာတမ္းရဲ့ အဖြင့္နဲ႔အပိတ္ပါ… ။
ၿပီးတာနဲ႔ စာတမ္းရဲ့ ကိုယ္ပိုင္း <body> အဖြင့္အပိတ္ပါ။ အလယ္မွာ စာကိုယ္မွာ ကိုယ္ျပခ်င္တဲ့ စာတန္းေလးတတန္း ႐ိုက္လိုက္တယ္… ၿပီးရင္ save လုပ္ၿပီး Browser မွာျပန္ဖြင့္ၾကည့္လိုက္ ဒီလိုေပၚေနရင္ မွန္တယ္…

The content of the body element is displayed in your browser.

ေလ့က်င့္ခန္း (၂) အရွင္းဆံုး စာမ်က္ႏွာတစ္ခု မေပၚရင္ ထံုးစံအတိုင္း စာလံုးေပါင္းျပန္စစ္ပါ… မ်ဥ္ေစာင္းေလးေတြ က်န္မက်န္ ၊ စာလံုးေပါင္းမွန္မမွန္ အားလံုးမွန္ရင္ ေပၚရမယ္… အိုေကေနာ္…

စာပိုဒ္မ်ားတည္ေဆာက္ပံု

အ႐ိုးရွင္းဆံုးစာပိုဒ္တည္ေဆာက္ပံု
ေအာက္က ဥပမာဟာ browser ထဲမွာ စာပိုဒ္ေတြကို ဘယ္လိုေဖာ္ျပသလဲဆိုတာ သ႐ုပ္ျပထားျခင္း ျဖစ္ပါတယ္…

<html>
<body>
This is a paragraph (1).
This is a paragraph (2).

This is a paragraph (3).
Paragraph elements are defined by the p tag.
</body>
</html>

ဒီသင္ခန္းစာေလးမွာ မွတ္လို႔ရတာက စာပိုဒ္ေတြကိုေရးခ်င္ရင္ ၾကားမွာ ေရးရမယ္ေပါ့… အဲဒီ Tag တစ္စံုၿပီးသြားတာနဲ႔ HTML ဟာ က်န္တာကို blank ထားၿပီး ေအာက္တေၾကာင္းကို အလိုအေလ်ာက္ဆင္းသြားပါတယ္…

ေခါင္းစဥ္စာလံုးအရြယ္အစား
ကၽြန္ေတာ္တို႔ စာစီစာ႐ိုက္လုပ္တဲ့ေနရာမွာလည္း ေခါင္းစဥ္ကို ထင္ရွားေစခ်င္ရင္ သာမန္စာပိုဒ္ထဲက စာသားထက္ နည္းနည္း ႀကီးေပးေလ့ရွိပါတယ္… ေခါင္းစဥ္စာလံုးအရြယ္အစားကို Heading လို႔ေခၚပါတယ္… အခု HTML မွာ ေခါင္းစဥ္စာသား ( Heading Size) ေတြကို ေလ့လာၾကည့္ရေအာင္.. ထံုးစံအတိုင္း notepad မွာ ေအာက္က ဥပမာကို ကူးထည့္ၿပီး Output ေလးထုတ္ၾကည့္ရေအာင္…

<html>
<head>
<title>HEADING SIZE</title>
</head>
<body>
<h1>This is a heading</h1>

<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
</body>

</html>

Heading & Line breaking
ထူးျခားတာေလးတစ္ခုကေတာ့ HTML ဟာ <h></h> အဖြင့္အပိတ္ Tag တစ္စံုၿပီးတာနဲ႔ ေအာက္တပိုဒ္ကို အလိုအေလ်ာက္ ဆင္းေပးလိုက္ပါတယ္… ဘာေၾကာင့္လဲဆိုေတာ့ ေခါင္းစဥ္ၿပီးရင္ ဆင္းသင့္ၿပီကိုး… ကဲဒီေတာ့ စာပိုဒ္ဆံုးတယ္လည္းမဟုတ္ေသးတဲ့ အခ်ိန္မွာ ေအာက္တစ္ေၾကာင္းကိုဆင္း႐ိုက္ခ်င္တယ္ဆိုရင္ ဘယ္လိုလုပ္ၾကမလဲ…

အဲဒါကိုေတာ့ Line Breaking လုပ္တယ္လို႔ေခၚပါတယ္… အဲဒီအတြက္ေရးခ်င္ရင္ေတာ့

လို႔ေရးရမွာ ျဖစ္ပါတယ္… ျပန္ပိတ္စရာမလိုပါဘူး

စာပိုဒ္ကိုေရးသြားရင္းကေန ေအာက္တစ္ေၾကာင္းကို ေရာက္တဲ့ေနရာက ဆင္းခ်င္ၿပီဆိုတာနဲ႔ လို႔ ႐ိုက္လိုက္ယံုပါဘဲ.. ေအာက္က ဥပမာစာေၾကာင္းေလးကို html body ပိုင္မွာ ထည့္႐ိုက္ႀကီးၿပီး Output ကို ထုတ္ၾကည့္ပါအံုး…
ေနာက္ပိုင္းသင္ခန္းစာေတြမွာ … အေပၚမွာလို html စာပိုဒ္တစ္ခုလံုးမေရးေတာ့ဘူးေနာ္… body ပိုင္းေလးပဲ ေရးျပေတာ့မယ္… ကၽြန္ေတာ္ေရးျပတဲ့ဥပမာကို <body></body> ၾကားထဲမွာသာ ထည့္ၾကည့္ လိုက္ေပေတာ့… အိုေကမယ္ မဟုတ္လား…

This is a para graph with line breaks.

ထြက္လာမယ့္ Output က ဒီလိုျဖစ္ေနရမယ္…

This

is a para

graph with line breaks.

အသံုး၀င္မယ့္ မွတ္စုေလးမ်ား
စာဖတ္သူအေနနဲ႔ HTML text ေတြကို ေရးတဲ့အခါမွာ စာပိုဒ္ေတြကို text editor ထဲမွာ ေသေသခ်ာခ်ာ ခ်ိန္ညိႇတာမ်ိဳး မလုပ္ပါနဲ႔.. ဆိုလိုတာက စာလံုးအစိပ္အက်ဲ လိုင္းနဲ႔ဆန္႔မဆန္႔ ၾကည့္လို႔ေကာင္းမေကာင္း စတဲ့ ကိစၥေတြကို note pad ထဲမွာ မခ်ိန္ပါနဲ႔ … ဘာေၾကာင့္လဲဆိုရင္ မိမိရဲ့ ၀က္ဘ္စာမ်က္ႏွာကို ၾကည့္႐ႈၾကမယ့္သူေတြသံုးတဲ့ Browser ေတြဟာ တခုနဲ႔ တခု တူမွာမဟုတ္ပါဘူး… တခ်ဳိ႕မွာ ေမာ္နီတာ ႀကီးႀကီးရွိမယ္ … တခ်ိဳ႕မွာ ေမာ္နီတာေသးေသးပဲရွိမယ္… ႀကီးႀကီးရွိသူက စာလံုးေတြကို က်ယ္က်ယ္လြင့္လြင့္ ျမင္ရမယ္… ေသးတဲ့သူကလည္း ေသးတဲ့အေလ်ာက္ ျမင္ရမွာပဲျဖစ္တဲ့အတြက္ browser ကလည္း အလိုအေလ်ာက္ ဒီစာသားေတြကို ခ်ိန္ညႇိသြားမွာပါ… မိမိက notepad မွာ လိုက္ခ်ိန္ေပးတာမ်ိဳးမလုပ္ရပါဘူး … အခ်ိန္ကုန္ၿပီး အရာမထင္ျဖစ္တတ္ပါတယ္… HTML ဟာ space ေတြကို သိပ္မွတ္ေလ့မရွိပါဘူး… notepad မွာ အမ်ားႀကီးပုတ္ထားေပမယ့္… တကယ္ျပေတာ့ တခုပဲျပတာမ်ိဳးျဖစ္ပါတယ္… ဘာမွမပါတဲ့ စာပိုဒ္ (Empty paragraph) ကိုသံုးၿပီး စာပိုဒ္ကို ပိုၿပီးျခားေအာင္လုပ္တာ မေကာင္းတဲ့အက်င့္ပါ… မလုပ္သင့္ပါဘူး… စာပိုဒ္တစ္ပိုဒ္နဲ႔ တစ္ပိုဒ္အၾကား လိုင္းေတြပိုျခားခ်င္ရင္ ကိုပဲသံုးၿပီးျခားသင့္ပါတယ္… ေလာေလာဆယ္ဆယ္ အမည္စာရင္းလို list ေတြကို ႐ိုက္ဖို႔အတြက္ဆိုရင္လည္း ကိုပါ မသံုးပါနဲ႔ဦး… List နဲ႔ပတ္သက္လို႔ ေနာက္ပိုင္းက်ရင္ ရွင္းျပသြားအံုးမွာပါ….

Html တြင္ မိမိကိုယ္ပိုင္သေကၤတမွတ္ခ်က္မ်ား
ကၽြန္ေတာ္တို႔ေရးတဲ့စာမ်က္ႏွာတစ္ခုဟာ အလြန္႐ိုးစင္းၿပီး အလြယ္တကူ နားလည္ႏိုင္တဲ့ စာမ်က္ႏွာ ျဖစ္ႏိုင္သလို … ေနာက္ပိုင္းမွာ ထည့္သြင္းပို႔ခ်မယ့္ Style ေတြ ၊ Script ေတြ အျခား ပိုမို႐ႈပ္ေထြးလာမယ့္ ကိစၥေတြပါ၀င္တဲ့ စာမ်က္ႏွာတစ္ခုလည္း ျဖစ္ႏိုင္ပါတယ္… အဲဒီေတာ့ ဒီလိုစာမ်က္ႏွာကို အမွားျပန္စစ္ရင္ျဖစ္ေစ… လိုအပ္လို႔ မိမိမဟုတ္တဲ့ တျခားသူက ျပန္လည္ျပင္ဆင္တည္းျဖတ္ရာမွာျဖစ္ေစ… ဒီေနရာကေတာ့ ဘာအပိုင္းကိုလုပ္ထားတာပါ… ဒီေနရာကေတာ့ စာပိုဒ္ရဲ့ စတိုင္လ္ကို ျပင္ထားတာပါ.. အစရွိသျဖင့္ မွတ္ခ်က္ကေလးေတြကို ထည့္ေရးသြားမယ္ဆိုရင္… အထက္မွာ ေျပာခဲ့တဲ့ အမွားစစ္ျခင္း ၊ ျပန္လည္ျပင္ဆင္တည္းျဖတ္ျခင္းမွာ ပိုမိုလြယ္ကူထိေရာက္စြာ ျပဳလုပ္ႏိုင္မွာျဖစ္ပါတယ္… အဲဒီလို ကၽြန္ေတာ္တို႔ရဲ့ ကိုယ္ပိုင္မွတ္ခ်က္ေတြကို စာမ်က္ႏွာထဲမွာ ထည့္ေရးခ်င္ရင္…

<!– This is a comment –>

ဆိုၿပီး <!– န႔ဲ –> ၾကားမွာ ေရးခ်င္တာကို ထည့္ေရးရပါတယ္… အဲဒီ tag ကို HTML က စာမ်က္ႏွာမွာ မျပပါဘူး အဲဒီ Tag ကိုေတြ႔တာနဲ႔ ေအာ္… ဒါကေတာ့ စာမ်က္ႏွာေရးသူရဲ့ ေရးခ်င္ရာေရးထားတဲ့ မွတ္ခ်က္ကေလးပါလား ဆိုၿပီး အလိုက္တသိနဲ႔ေက်ာ္သြားမွာပါ… ဟဲဟဲ

ျပန္ေပါင္းခ်ဳပ္ၾကည့္ရေအာင္…
HTML Element တိုင္းမွာ element name တခုခုေတာ့ ပါ၀င္ပါတယ္… (ဥပမာ body,h1/h2…,p,br)v Start Tag လို႔ေခၚတဲ အစပိုင္းက ေထာင့္ကြင္းႏွစ္ခုထဲမွာ ထည့္ေရးရပါတယ္… (ဥပမာ <h1>, ,etc…)

End Tag လို႔ေခၚတဲ့ အဆံုးပိုင္းကေတာ့ ေထာင့္ကြင္းႏွစ္ခုသာမက မ်ဥ္းေစာင္းပါ ပါေသးတယ္.. (ဥပမာ </h1>,etc..)
Element Content ေတြကို ျမင္ရေစမႈအားလံုးဟာ အဲဒီ အဖြင့္အပိတ္ Tag ေတြရဲ့ၾကားမွာသာ ျဖစ္ေပၚပါတယ္..
အခ်ိဳ႕ HTML Element ေတြမွာ HTML Content မပါပဲရွိတတ္တယ္… (ဥပမာ ဘာမွမေရးပဲ အလြတ္ သံုးေၾကာင္းဆင္းလိုက္တာ)
အခ်ိဳ႕ HTML Element ေတြမွာ အပိတ္မပါဘူး (သို႔) အပိတ္မလိုဘူး.. (ဥပမာ… )

Attribute

အေပၚမွာရွင္းခဲ့တာေတြကေတာ့ HTML ျဖင့္ Web စာမ်က္ႏွာတစ္ခုကို ဖန္တီးဖို႔အတြက္ မရွိမျဖစ္ မသိမျဖစ္တဲ့ tag ေတြ အေၾကာင္းပါ… အခု အဲဒီ tag ေတြမွာ ရွိေနတဲ့ ပင္ကိုယ္အရည္အေသြးအျပင္ ထပ္မံၿပီး ေပါင္းထည့္လို႔ရတဲ့ အရည္အခ်င္း (additional attributes) ေလးေတြအေၾကာင္းေလ့လာရေအာင္
Attribute ေတြဟာ အမည္နဲ႕တန္ဖိုး တြဲၿပီးလာပါတယ္.. အမည္နဲ႔တန္ဖိုးေပါင္းထားတဲ့ Attribute တစ္စံုဟာ မူရင္း tag ကို ပိုမိုေပၚလြင္ေစျခင္း၊ ပိုမိုလွပေစျခင္းနဲ႔၊ စြမ္းေဆာင္ရည္ ျမင့္တက္ေစျခင္းတို႔ကို ျဖစ္ေပၚေစပါတယ္.. စကားလံုးႀကီးႀကီးေတြေျပာရတာေမာတယ္.. တခုေလာက္ လက္ေတြ႔စမ္းလိုက္ၾကစို႔

ဘယ္လိုေရးရလဲဆိုေတာ့ HTML element ရဲ႕ အစ tag ထဲမွာ ထည့္ေရးရပါတယ္..
ဥပမာ (၁) း
<h1> ဆိုရင္ ေခါင္းစဥ္တစ္ခု ရဲ့ အစ tag ျဖစ္တယ္…။
<h1 align="center"> ဆိုရင္ေတာ့ ေခါင္းစဥ္ကို အလယ္ညႇိျဖစ္ေစတဲ့ attribute ပါ ထည့္ထားတဲ့ အစ tag ျဖစ္သြားၿပီ… align ကေတာ့ attribute ရဲ့ အမည္ (name)ျဖစ္ၿပီး center ဆိုတာကေတာ့ attribute ရဲ့ တန္ဖိုး (value) ျဖစ္ပါတယ္.. အဲဒီႏွစ္ခုေပါင္း align="center" ဆိုတဲ့ attribute တစ္စံု ေၾကာင့္ h1 ဆိုတဲ့ ေခါင္းစဥ္ tag ထဲက စာသားဟာ Web Page ေပၚမွာ အလယ္ညႇိအေနအထား ေပၚပါမယ္…

လက္ေတြ႔စမ္းရန္ :

<html>
<body>
<h1 align="center">This is heading 1</h1>
The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.
</body>
</html>

တျခားမွတ္စရာေလးေတြအေနနဲ႔..

= စာပိုဒ္အေနအထား ဘယ္ညႇိေပၚမယ္.. (မထည့္လည္း ဘယ္ညႇိက အလိုလိုေပၚပါတယ္..)

= စာပိုဒ္အေနအထား ညာညႇိေပၚမယ္..

= စာပိုဒ္အေနအထား အလယ္ညႇိေပၚမယ္..

= စာပိုဒ္အေနအထား ဘယ္ညာႏွစ္ဘက္စလံုးညႇိထားတဲ့အေနအထားနဲ႔ေပၚမယ္.. (ၾကည့္လို႔အေကာင္းဆံုးပဲ)

Heading (ေခါင္းစဥ္) ေတြကိုလည္း အဲဒီအတိုင္း Alignment ညႇိ ေပးလို႔ရပါတယ္..

ဥပမာ (၂) း

<body> ဆိုရင္ Web စာမ်က္ႏွာရဲ႕ စာကိုယ္ပိုင္းကို ျဖစ္ေပၚေစတဲ့ အစ tag ျဖစ္တယ္။
<body bgcolor=yellow> ဆိုရင္ေတာ့ စာကိုယ္ပိုင္းမွာ ေနာက္ခံအေရာင္ကိုျဖစ္ေပၚေစတဲ့ Attribute ပါ၀င္ေသာ အစ tag ျဖစ္သြားၿပီ… bgcolor ကေတာ့ attribute ရဲ႕အမည္ (name) ျဖစ္ၿပီး yellow ကေတာ့ attribute ရဲ့တန္ဖိုး value ျဖစ္ပါတယ္။ အဲဒီ ႏွစ္ခုေပါင္း bgcolor=yellow ဆိုတဲ့ attribute တစ္စံုေၾကာင့္ Web page ဟာ ေနာက္ခံအ၀ါေရာင္နဲ႔ ေပၚလာပါမယ္..

<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>

</html>

Text Formatting

စာသားေတြရဲ့ ပံုစံနဲ႔ အေနအထား ေျပာင္းလဲေပးျခင္းကို Formatting လုပ္တယ္လို႔ ေခၚပါတယ္..

အမ်ားအားျဖင့္ format ျပင္ရာမွာ-

* Bold = စာလံုးအမည္းျဖင့္ေဖာ္ျပေစျခင္း
* Italic = စာလံုးအေစာင္းျဖင့္ ေဖာ္ျပျခင္း
* Underline= ေအာက္မွမ်ဥ္းသား၍ ေဖာ္ျပျခင္း
* Sub script = မူရင္းစာသားေအာက္မွ စာလံုးအေသးျဖင့္ ေဖာ္ျပျခင္း (ဥပမာ H2O)

* Super script = မူရင္းစာသားအေပၚမွ Expotential ပံုစံျဖင့္ ေဖာ္ျပျခင္း

* Strike through = စာသားေပၚမွ "မ်ဥ္းတစ္ေၾကာင္းျဖတ္ဆြဲၿပီး ဖ်က္ထားေသာပံုစံ" ျဖင့္ေဖာ္ျပျခင္း

တို႔ပဲျဖစ္ပါတယ္။
HTML မွာ စာသားေတြကို format ျပင္မယ္ဆိုရင္ေတာ့ အေပၚက Format ေတြကို tag ညီမွ်ျခင္းေတြနဲ႔ေရးျပမယ္ေနာ္..

* Bold = 
* Italic = 
* underline =

* subscript = 
* superscript = 
* strike through = <del>

အဲဒါေတြအျပင္ ပိုပါလာတဲ့ format တခ်ိဳ႕လည္းရွိေသးတယ္ဗ်…

= သူက Bold နဲ႔တူတယ္.. ဘာကြာလဲေတာ့မသိဘူး..

= သူက Italic နဲ႔ တူတယ္ (Emphasized လို႔ေခၚတယ္..)

<ins>= သူက underline နဲ႔တူတယ္.. (Inserted လို႔ေခၚတယ္..)

= စာလံုးကိုပံုမွန္ထက္နည္းနည္းပိုေသးသြားေစတယ္..

<big>= စာလံုးကို ပံုမွန္ထက္ နည္းနည္း ပိုႀကီးလာေစတယ္..

ဟုတ္မဟုတ္ လက္ေတြ႔စမ္းၾကည့္ရေအာင္ေနာ္..

<html>
<body>
This text is bold 

 This text is strong 
<big> This text is big </big> 
 This text is emphasized 

 This text is italic 
 This text is small 
This text contains
 subscript 

This text contains
 superscript 
</body>
</html>

Preformatted Text

ကၽြန္ေတာ္တို႔အထက္မွာေျပာခဲ့တာေလးရွိပါတယ္.. HTML မွာ စာပိုဒ္ထဲ Enter ေခါက္ေပမယ္လို႔ Web page ေပၚမွာေတာ့ ေအာက္တပိုဒ္ကို ဆင္းမသြားပါဘူး.. ထို႔နည္းတူစြာ Space ေတြ ေလးငါးခ်က္ ပုတ္ထားေပမယ့္ Web page ေပၚမွာေတာ့ တစ္ခ်က္စာပဲ ျမင္ရမွာပါ..
သို႔ေသာ္…

ကၽြန္ေတာ္တို႔က Programming Code လိုဟာမ်ိဳးေတြကို စနစ္တက် ေရးျပခ်င္တယ္ဆိုရင္ေတာ့ preformatted နဲ႔မွ ေကာင္းမွာပါ .. Preformatted နည္းနဲ႔ေရးမယ္ဆိုရင္ ခုနက ေျပာတဲ့ Space ေတြကို ငါးခ်က္ပုတ္ထားရင္ ငါးခ်က္အတိုင္းထိန္းထားေပးပါတယ္.. ၿပီးေတာ့ font ပံုစံကိုလည္း ေျပာင္းလဲေပးသြားပါတယ္… စမ္းၾကည့္ရေအာင္…
ဒီလိုေရးရပါတယ္..

<pre>This is preserved text . </pre>

ေလ့က်င့္ၾကည့္ရေအာင္…

<html>
<body>
<pre> This is

preformatted text.
It preserves both spaces
and line breaks. </pre>
The pre tag is good for displaying computer code:
<pre> for i = 1 to 10
print i

next i </pre>
</body>
</html>

Computer Output Text

ေအာက္မွာျပထားတဲ့ tag တခ်ိဳ႕ ကေတာ့ သာမန္အားျဖင့္ သံုးခဲပါတယ္.. သူ႕ကို ကြန္ပ်ဴတာ ကုဒ္ေတြကို ေရးျပခ်င္တဲ့အခါမ်ိဳးမွာ သံုးတဲ့ tag ေတြျဖစ္ပါတယ္.. စာလံုးပံုစံေတြက္ Programming ေရးတဲ့အခါေတြ႔ရတဲ့ font မ်ိဳးေတြေျပာင္းသြားပါတယ္.. ဘာပဲျဖစ္ျဖစ္ ေတြ႔ဖူးေအာင္ေတာ့ ၾကည့္ထားလိုက္ေနာ္…

<html>
<body>
<code>Computer code</code>

<kbd>Keyboard input</kbd> 
<tt>Teletype text</tt> 
<samp>Sample text</samp> 
<var>Computer variable</var>

Note: These tags are often used to display
computer/programming code. 
</body>
</html>

Address

ေနာက္တစ္ခုကေတာ့ address လို႔ေခၚတဲ့ Tag ဗ်.. ဘာထူးသြားလဲဆိုေတာ့ ကၽြန္ေတာ့မ်က္လံုးထဲမွာေတာ့ စာလံုးနည္းနည္းႀကီးၿပီးေစာင္းသြားတာပဲျမင္တယ္.. .

<address> Donald Duck BOX 555 Disneyland USA </address>

ပြိဳင္တာအၫႊန္းတပ္နည္း Acronym & Abbbreviation

အဆန္းေလးေတြလား
မိမိရဲ့ Web စာမ်က္ႏွာေပၚက စာလံုး/အိုင္ကြန္တစ္ခုေပၚမွာ ေမာက္စ္ပြိဳင္တာေလးကို ေထာက္လိုက္တဲ့အခါ ဒါဟာဘာလုပ္ထားတာပါ လို႔ ရွင္းျပတဲ့စာသားေလး ပြိဳင္တာအၿမီးမွာ ေပၚလာတာကို ေတြ႔ဖူးၾကမွာပါ.. အဲလိုေလးလုပ္ခ်င္ရင္.. <acronym> ဒါမွမဟုတ္ <abbr> ဆိုတဲ့ tag ေတြကို သံုးရမွာပါ .. သံုးနည္းေလးက ဒီလို

<abbr title="Mysteryzillion Forum">MZ</abbr>
<acronym title="Promoted Admin of MZ">MrDBA</acronym>

အဲဒါဆိုရင္ Web page ေပၚမွာ MZ ေပၚ mouse pointer ေထာက္လိုက္ရင္ Mysteryzillion Forum လို႔ သတ္မွတ္ထားခဲ့တဲ့ Attribute ေလးကို Mouse အၿမီးေလးမွာ ကပ္ၿပီး ျမင္ရမွာပါ..
MrDBA ဆိုတဲ့ စာသားေပၚေထာက္ရင္လည္း သူ႕ရဲ title attribute မွာေရးထားေပးတဲ့အတုိင္းေလးပဲ ေပၚလာမွာပါ.. [4]

စမ္းၾကည့္ရေအာင္… မွတ္ခ်က္ကေလးကိုေတာ့ ေလ့က်င့္ခန္းထဲမွာပဲထည့္ေရးထားေပးပါတယ္

<html>
<body>
<abbr title="Mysteryzillion Forum">MZ</abbr> 
<acronym title="Promoted Admin of MZ">MrDBA</acronym>

The title attribute is used to show the spelled-out
version when holding the mouse pointer over the
acronym or abbreviation.
This only works for the acronym
element in IE 5.
This works for both the abbr and acronym element

in Netscape 6.2.
</body>
</html>

မွန္စာေရးနည္း

bi-directional override
မွန္စာေရးဖူးပါသလား… ကိုယ္ေရးတဲ့စာကိုမွန္ထဲမွာၾကည့္ရင္ လားရာေျပာင္းျပန္ျမင္ရတယ္ေလ..
အဲဂလိုလဲ HTML မွာ ေရးလို႔ရသတဲ့

<bdo dir="rtl">

Here is some Hebrew text
</bdo>

Line Breaking

မာဂ်င္ေလွ်ာ့မယ္
ကိုယ့္စာမ်က္ႏွာမွာ ေရးေနက် အတိုင္းကေနခြဲထြက္ၿပီး Line break ဖမ္းထားတဲ့ပံုစံလိုခ်င္ရင္..
<blockquote> နဲ႔ <q> ဆိုတဲ့ Quotation tag ေတြကို သံုးပါ…. ဒီလိုသံုးစြဲပံုမ်ိဳးကို ဖိုရမ္ေတြမွာ ေတြ႔ရေလ့ရွိပါတယ္.. တစ္ဦးေဆြးေႏြးထားတဲ့အေၾကာင္းကို ေနာက္တစ္ဦးက Reply လုပ္တဲ့အခါမွာျဖစ္ေစ.. ဒါမွမဟုတ္ Quote လုပ္တဲ့အခါမွာျဖစ္ေစ၊ ဒါမ်ိဳးေလးေတြနဲ႔ေရးပါတယ္..

<blockquote> Tag ဟာ စာပုိဒ္ကို ပံုမွန္ေရးေနက် ဘယ္/ညာ ႏွစ္ဘက္မာဂ်င္မ်ဥ္းကေန လက္မ၀က္ေလာက္ အတြင္းထဲ တို၀င္သြားေစပါတယ္..
<q> Tag ကေတာ့ စာပိုဒ္ရဲ့ ပုံမွန္ေရးေနက်ရဲ့ ဘယ္ညာႏွစ္ဘက္မာဂ်င္ကေန 0.25 လက္မေလာက္ပဲ အတြင္းထဲ ကို တို၀င္ေစပါတယ္..

<body>
<blockquote> This is a long quotation.
This is a long quotation. This is a longquotation.
This is a long quotation. This is a long quotation.

This is a long quotation. This is a long quotation.
This is a long quotation. This is a long quotation.
This is a long quotation. This is a long quotation.
This is a long quotation. This is a long quotation.
This is a long quotation. This is a long quotation.
This is a long quotation. This is a long quotation.
This is a long quotation. This is a long quotation.
This is a long quotation. This is a long quotation.
</blockquote>

Here comes a short quotation:
<q> This is a short quotation. This is a short quotation.
This is a short quotation. This is a short quotation.
This is a short quotation. This is a short quotation.
This is a short quotation. This is a short quotation.
This is a short quotation. This is a short quotation.
This is a short quotation. This is a short quotation.
</q>

 With the block quote element, the browser inserts line breaks and
margins, but the q element does not render as anything special.

</body>

ပံုမ်ားထည့္သြင္းျခင္း

သင္ခန္းစာပထမဆင့္ကိုေက်ာ္ျဖတ္ၿပီး ေရာက္ရွိလာတဲ့ စာဖတ္သူကို ႀကိဳဆိုပါတယ္.. ဆက္ၿပီးေလ့လာရေအာင္ေနာ္..

Inserting Image

အခုဆက္လက္ၿပီးကၽြန္ေတာ္တို႔ ဓါတ္ပံုထည့္နည္းေတြ ေလ့လာရေအာင္ဗ်ာ.. ကိုယ့္ရဲ့ Web စာမ်က္ႏွာကို စာသားသက္သက္ပဲ ဖန္တီးဖို႔ ေတာ့ ဘယ္သူမွ စိတ္ပါၾကမွာမဟုတ္ပါဘူး.. သက္ဆိုင္ရာ သက္ဆိုင္ရာေနရာေလးေတြမွာ ပံုေလးေတြ ကို ထည့္သြင္းေဖာ္ျပျခင္းျဖင့္ ဆိုလိုရင္းကိုပိုမိုထိေရာက္ေစတာ၊ ျပခ်င္တာကို အေကာင္းဆံုးျပႏိုင္တာ.. ပိုမိုလွပၿပီး စိတ္၀င္စားဖြယ္ေကာင္းေစတာကို ဘယ္သူမွ မျငင္းႏိုင္ပါဘူး..

ေအာက္ကပံုေလးကို Right Click ႏွိပ္ၿပီး Save လုပ္ယူထားပါ..

ဓါတ္ပံုတစ္ပံု(image)ကို ထည့္ဖို႔ရာ ေရးရမယ့္ HTML tag ကေတာ့

HTML Code:

ျဖစ္ပါတယ္.. File path ဆိုတာကေတာ့ မိမိဓါတ္ပံုရဲ့တည္ေနရာလမ္းေၾကာင္းကို ဆိုလိုတာပါ..
ဥပမာ ကိုယ့္စက္ထဲမွာပဲ ေလ့က်င့္ေနတယ္ဆိုရင္ေတာ့ Html page နဲ႔ Directory(Folder) တစ္ခုထဲေအာက္မွာ ထားတာ ေကာင္းပါတယ္.. ဒါမွမဟုတ္ Image ဆိုၿပီး Folder အသစ္တစ္ခုေဆာက္ၿပီး သတ္သတ္မွတ္မွတ္ စုထားတာေကာင္းပါတယ္.. ၿပီးေတာ့မွ File path ေနရာမွာ ကိုယ့္ image ရွိေနတဲ့ လမ္းေၾကာင္းကိုေပးလိုက္တာေပါ့..
ဥပမာ.. Desktop ေပၚမွာ Image ဆိုၿပီး Folder အသစ္တစ္ခုေဆာက္တယ္.. အဲဒီထဲမွာ A.png ဆိုတဲ့ Image ကို ထည့္ထားတယ္ဆိုပါစို႔.. အဲဒီပံု ကို ကိုယ့္ Web page မွာ ေပၚေစခ်င္ရင္.. Image folder ကိုဖြင့္လိုက္၊ အေပၚက Address bar ထဲမွာေပၚေနတဲ့ လမ္းေၾကာင္းကို ေကာ္ပီကူးလိုက္၊ ၿပီးေတာ့မွ ဖိုင္နာမည္နဲ႔ တြဲၿပီး ထည့္ေပးလိုက္ေပါ့..
ကၽြန္ေတာ့စက္မွာေတာ့ Address bar မွာ ဒီလိုေလးေပၚတယ္..

C:\Documents and Settings\Admin\Desktop\Image

အဲဒီေတာ့ ကၽြန္ေတာ္က အဲဒါကို ေကာ္ပီကူးၿပီး image code ကို ဒီလိုေရးလိုက္တယ္..

<img src=C:\Documents and Settings\Admin\Desktop\Image\A.png>

\A.png ဆိုတာကကၽြန္ေတာ္ ႐ိုက္ထည့္လိုက္တဲ့ File name ေနာ္
ကဲဟုတ္ၿပီ.. Image ပါတဲ့ html ဖိုင္တစ္ဖိုင္ေလာက္ ေရးၾကည့္ရေအာင္…

<html>
<head>
<title>Inserting Images</title>

<head>

<body>
This is an image.
<img src=C:\Documents and Settings\Admin\Desktop\Image\A.png>
</body>
</head>
</html>

Web page မွာ ပင္ဂြင္းပံုေလး ေပၚလာရမယ္ေနာ္.. စမ္းၾကည့္ပါ…

Image ေတြကို ကၽြန္ေတာ္တို႔ရဲ့ Web စာမ်က္ႏွာေပၚမွာ ဘယ္ကပ္ ညာကပ္ အလယ္ညႇိ စသျဖင့္ လိုအပ္တဲ့ေနရာေတြမွာ ထည့္လို႔ရသလို Image Size ေတြကိုလည္း လိုသလို သတ္မွတ္ၿပီး အရြယ္အစားကို လိုခ်င္သလို ေဖာ္ျပေစႏိုင္ပါတယ္.. Image Attribute လို႔ ေခၚၾကရေအာင္..

Image လို႔ဆိုရာမွာ အသံုးအမ်ားဆံုး Image Type ျဖစ္တဲ့ အမ်ိဳးအစားေတြကေတာ့ JPG,BMP,PNG နဲ႔ GIF အစရွိသျဖင့္ ျဖစ္ၾကပါတယ္.. GIF ကေတာ့ လႈပ္ရွားေနတဲ့ပံုေလးေတြပါ..
လႈပ္တဲ့ပံုျဖစ္ေစ.. မလႈပ္တဲ့ပံုျဖစ္ေစ ထည့္နည္းကေတာ့ တူတူပါပဲ.. ေအာက္မွာယူထားပါ..

လွုပ္တယ္

မလွုပ္ဘူး

အရြယ္အစားကိုနဲ႔ပတ္သက္တဲ့ကုတ္ကိုေတာ့ ဒီလိုေရးပါတယ္..

<img src="constr4.gif" width="144" height="50">

ေလ့က်င့္ၾကည့္ပါ..

<html><body> An image:
<img src="constr4.gif" width="144″ height="50″> A moving image:

<img src="hackanm.gif" width="48″ height="48″> Note that the syntax of inserting a moving image is no different from that of a non-moving image.

</body></html>

Attribute Image

Image ေတြကို အေနအထားအမ်ိဳးမ်ိဳးနဲ႔ Alignment ခ်ိန္ျပထားတာပါ..

Alternate Tag

alt ဆိုတဲ့ attribute ကို img tag နဲ႔ တြဲသံုးရင္ ကိုယ္သတ္မွတ္ထားတဲ့စာသားဟာ ပံုေနရာမွာ ေပၚပါမယ္.. ကိုယ့္စာမ်က္ႏွာကို ၀င္ၾကည့္သူဟာ အေၾကာင္းတစ္ခုခုေၾကာင့္ (ဥပမာ ေကာ္နက္ရွင္မေကာင္းလို႔) Browser မွာအဲဒီပံုကိုမျမင္ရဘူးဆိုရင္ေပါ့ေလ.. ဒီပံုဟာ ဘာပံုလဲဆိုတာကို အဲဒီစာသားေလးက ေျပာျပေနမွာပါ.. တခ်ိဳ႔လူေတြက်ေတာ့လည္း တမင္တကာ ပံုေတြကို Disable လုပ္ထားၿပီး Text သက္သက္ၾကည့္တာရွိတတ္တယ္ေလ.. အဲဒါမ်ိဳးက်ေတာ့ ဒီေနရာမွာ ဘာပံုထည့္ထားတယ္ ဆိုတာေလးကို ၾကည့္လို႔ရေစတာေပါ့။

<img src="boat.jpg" alt="Big Boat">

Image background

ကၽြန္ေတာ္တို႔ ေရွ႔သင္ခန္းစာမွာတုန္းက စာမ်က္ႏွာရဲ့ ေနာက္ခံအေရာင္ကို ကိုယ္ႀကိဳက္ရာထည့္ေပးလို႔ရေၾကာင္း ေျပာခဲ့ပါတယ္.. အခု ဒီတစ္ခါ ေနာက္ခံ ပံုေလးေတြထည့္ၾကည့္ရေအာင္ေနာ္.. ေနာက္ခံပံုနဲ႔ပတ္သက္ၿပီးေတာ့ ေျပာစရာေလးေတြေတာ့ ရွိပါတယ္.. HTML မွာ ေနာက္ခံပံုတစ္ခုကို ထည့္သြင္းလိုက္တဲ့အခါ အဲဒီပံုရဲ့ ဆိုဒ္ဟာ web page ေအာက္ငယ္ေနရင္.. (ဆိုလိုတာက ပံုေသးေနရင္) ဒီပံုကို Repeat ထည့္ေပးေနမွာပါ..

ဒါေလး ယူထားပါ..

<body background="background.jpg">

Example:

<html>

<body background="background.jpg">
<h3>Look: A background image!</h3>
Both gif and jpg files can be used as HTML backgrounds.

If the image is smaller than the page, the image will repeat itself.
</body>
</html>

Hyberlink

Web Page တစ္ခုရဲ့အသက္ဟာ Hyperlink လို႔ေျပာရင္ မွားမယ္မထင္ပါဘူး…
အင္တာနက္သံုးတဲ့သူတိုင္း Hyperlink ကို သိၾကပါတယ္.. တေနရာကတေနရာ အသြားကေနအျပန္ အျပန္ကေနအသြား အြန္လိုင္းတနံတလ်ား Web Page မ်ားကို တစ္ခုနဲ႔တစ္ခု ခ်ိတ္ဆက္ဖို႔အတြက္ Hyperlink ကို မသံုးမျဖစ္သံုးရပါတယ္.. အဲဒီ Hyper link ေလးေတြကို ဒီလိုေရးပါတယ္..

Anchor tag and Href attribute
HTML မွာ Web document တစ္ခုကေန အျခားတစ္ခုကို ခ်ိတ္ဆက္ဖို႔ <a> လို႔ေခၚတဲ့ anchor tag ကို သံုးပါတယ္.. anchor တစ္ခုဟာ Web ေပၚမွ ဓါတ္ပံု၊ သီခ်င္းဖိုင္၊ ႐ုပ္သံဖိုင္ စတဲ့ မည္သည့္ Resource ကိုမဆို ၫႊန္ျပႏိုင္ပါတယ္..

<a href="url">Text to be displayed</a>

<a> tag ဟာ လက္ရွိစာမ်က္ႏွာကေန တေနရာရာကိုခ်ိတ္ဆက္ဖို႔ anchor တစ္ခုကို ဖန္တီးေပးပါတယ္.. href ဆိုတဲ့ attribute က သူ႕ရဲ့ value ျဖစ္တဲ့ url ကိုဖတ္ၿပီး သက္ဆိုင္ရာစာမ်က္ႏွာကို သြားေရာက္ ခ်ိတ္ဆက္မွာျဖစ္ပါတယ္.. Text to be displayed ဆိုတဲ့ေနရာမွ ကိုယ္႐ိုက္ထားခ်င္တဲ့စာေပါ့.. Link ခ်ိတ္ၿပီးတဲ့အခါမွာ အဲဒီစာကိုႏွိပ္ရင္ သက္ဆိုင္ရာ ခ်ိတ္ဆက္ကို ေရာက္သြားပါလိမ့္မယ္…

ေအာက္မွာေရးျပထားတဲ့ Hyper Link ဟာ MZ ဖိုရမ္ ေရွ႕စာမ်က္ႏွာကို ခ်ိတ္ထားပါတယ္..

<a href="http://www.mysteryzillion.org/">Lets Visit MZ!</a>

ဒီလိုေပၚေနပါမယ္…. ေပၚေနတဲ့စာကို ႏွိပ္လိုက္ရင္ MZ ၀က္ဘ္ဆိုဒ္ရဲ႕ Front Page ကိုေရာက္သြားမွာပါ… Lets Visit MZ!

Image Hyberlink

အေပၚမွာျပခဲ့တဲ့ Hyper link ဟာ ဆိုရင္ စာလံုးကိုႏွိပ္ၿပီးေတာ့ေနာက္ထပ္စာမ်က္ႏွာတစ္ခုဆီ သြားေစတဲ့အမ်ိဳးအစားျဖစ္ပါတယ္..အဲဒီအေပၚကသြားေစခ်င္တဲ့ URL ေနရာမွာ ဖိုင္တစ္ဖိုင္ရဲ့တည္ေနရာျဖစ္မယ္ဆိုရင္ေတာ့အဲဒီလင့္ကိုႏွိပ္လိုက္ရင္ Download Box ေပၚလာမွာပါ.. ၿပီးေတာ့ Clickႏွိပ္ခံမယ့္ စာသားေနရာမွာ စာသားမဟုတ္ပဲ ပံုတစ္ပုံကိုလည္းအစားထိုးလို႔ရပါတယ္.. Command Button တစ္ခုကိုလည္း အစားထိုးလို႔ရပါတယ္..နားလည္တတ္ကၽြမ္းမႈအေပၚမွာပဲ မူတည္ပါတယ္..ဒီတခါ ပံုေလးတစ္ပံုကိုႏွိပ္ရင္ဖိုင္တစ္ဖိုင္ကို ေဒါင္းလုပ္ က်လာေစမယ့္ ေလ့က်င့္ခန္းေလးေလ့က်င့္ၾကည့္ရေအာင္.. မစမ္းခင္မွာ ဒီလင့္ေလးႏွစ္ခုကေန ဖိုင္ေလးႏွစ္ဖိုင္ယူထားပါ.

ေအာက္မွာျပထားတဲ့ လင့္ႏွစ္ခုကေန Download Now ဆိုတဲ့စာပါတဲ့Button ပံုေလးရယ္.. ေဇာ္ဂ်ီယူနီကုတ္(Blog day Version) ရယ္ကို ရယူထားၿပီးမိမိဖန္တီးမယ့္ HTML စာမ်က္ႏွာနဲ႔ Directory တစ္ခုထဲမွာထားပါ…

1.Download Icon
2.Zawgyi Blog day Version

ဆိုလိုတာက HTML စာမ်က္ႏွာက Desktop ေပၚမွာရွိတယ္ဆိုရင္ ဒီဖိုင္ႏွစ္ဖိုင္ကိုလည္း Desktop ေပၚမွာပဲထားပါ.. ၿပီးရင္ အဲဒီဖိုင္ေတြရဲ့ ဖိုင္ပတ္လမ္းေၾကာင္းကို <a> tag မွာ အစားထိုးယံုပါပဲ.. ကၽြန္ေတာ္ကေတာ့ Online အစားထိုးျပထားတယ္..

<html> <head> <title>IMAGE HYPERLINK</title> </head> <body> To download Zawgyi Unicode System Click button shown below. <a href=http://www.alpha.com.mm/alphazawgyi2008/image/ZFK-EG-WC2.EXE>

<img src=http://i173.photobucket.com/albums/w71/computer__crazy/Download.png>
</a>

</body>
</html>

အဲဒီ Code ေတြကို ေကာ္ပီကူးၿပီး Html ဖိုင္တစ္ဖိုင္ဖန္တီးၾကည့္ပါ.. ရလာမယ့္ အေျဖကိုေသခ်ာၾကည့္ၿပီးသံုးသပ္ၾကည့္ပါ..

ဒီ blog က HTML အေျခခံလည္းျဖစ္၊ ျပည့္စုံမႈလည္းရွိၿပီး html ကုိ ေလ့လာခါစက print ထုတ္ၿပီး ဖတ္ရေလာက္ေအာင္ ေကာင္းတဲ့ blog မုိ႔ မွ်ေ၀းလုိက္ပါတယ္။

.

Sunday, October 2, 2011

html

No comments:

♠♠ ဆက္သြယ္ရန္လိပ္စာ ♠♠

Myanmar Fonts