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 တွေဟာ ပုံမှန်အားဖြင့် အဖွင့် အပိတ် တစုံ လာတတ်ပါတယ်… ဥပမာ <b> နဲ့ </b> ။
- အဖွင့်ကို start tag လို့ခေါ်ပြီး အပိတ်ကိုတော့ end tag လို့ခေါ်ပါတယ်။
- HTML tag ရဲ့ထောင့်ကွင်း နှစ်ခုကြားက စာကတော့ element content လို့ခေါ်ပါတယ်။
- HTML tag တွေဟာ စာလုံးပေါင်း အကြီးအသေး မရွေးပါဘူး။ ဥပမာ <b>လို့ရေးတာဟာ <B> လို့ရေးတာနဲ့ အတူတူပါပဲ။
HTML Element (HTML အစိတ်အပိုင်း)
အပေါ်မှာပြီးခဲ့တဲ့ လေ့ကျင့်ခန်းမှာပါ၀င်တဲ့ စာကြောင်းတွေထဲက ပဲထုတ်ပြရရင် အဖွင့်အပိတ် Tag တစုံ ပါတဲ့ အပိုင်းဟာ Element တစ်ခုပါပဲ−
<b>This text is bold</b>
ဒီစာကြောင်းကို သရုပ်ခွဲကြည့်မယ်ဆိုရင်
- ပထမဆုံး Start tag ဖြစ်တဲ့ <b> ဆိုတာနဲ့ စပါတယ်။
- ပါ၀င်တဲ့ element content ကတော့ This text is bold ဆိုတဲ့ စာသားပါ။
- ပြီးတော့ end tag ဖြစ်တဲ့ </b> နဲ့ element ကို ပိတ်လိုက်ပါတယ်။
- အဲဒီမှာ <b> ဆိုတဲ့ အဖွင့်အပိတ် tag ရဲ့ စေညွှန်မှုကြောင့် စာသားဟာ This text is bold ဆိုပြီး စာလုံးအမည်းနဲ့ထွက်လာတာပါ။
နောက်တခု
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
ကလည်း HTML element တစ်ခုပါပဲ။
သူလည်း <body>နဲ့ဖွင့်တယ်.. </body> နဲ့ပိတ်တယ်။ ဒီ tag တစုံရဲ့ ရည်ရွယ်ချက်ကတော့ ကြားထဲက အပိုင်းတွေအားလုံးကို HTML body အဖြစ်နဲ့ ဖော်ပြပေးတာပါပဲ။
ကျွန်တော်တို့ ဘာကြောင့် စာလုံးအသေးနဲ့ ရေးရသလဲ
အထက်က စာပိုဒ်မှာ စာလုံးအကြီးနဲ့ ရေးရေး စာလုံးအသေးနဲ့ရေးရေး <b> နဲ့ <B> ဟာ အတူတူပဲလို့ ပြောခဲ့ပါတယ်။ အင်တာနက်ပေါ် သင်ရောက်လာတဲ့အခါ ၀က်ဘ်ဆိုဒ်အတော်များများနဲ့ 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>
<p>This is a paragraph (1).</p>
<p>This is a paragraph (2).</p>
<p>This is a paragraph (3).</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
ဒီသင်ခန်းစာလေးမှာ မှတ်လို့ရတာက စာပိုဒ်တွေကိုရေးချင်ရင် <p> </p> ကြားမှာ ရေးရမယ်ပေါ့… အဲဒီ 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 လုပ်တယ်လို့ခေါ်ပါတယ်… အဲဒီအတွက်ရေးချင်ရင်တော့
<br>
လို့ရေးရမှာ ဖြစ်ပါတယ်… ပြန်ပိတ်စရာမလိုပါဘူး
စာပိုဒ်ကိုရေးသွားရင်းကနေ အောက်တစ်ကြောင်းကို ရောက်တဲ့နေရာက ဆင်းချင်ပြီဆိုတာနဲ့ <br>လို့ ရိုက်လိုက်ယုံပါဘဲ.. အောက်က ဥပမာစာကြောင်းလေးကို html body ပိုင်မှာ ထည့်ရိုက်ကြီးပြီး Output ကို ထုတ်ကြည့်ပါအုံး…
နောက်ပိုင်းသင်ခန်းစာတွေမှာ … အပေါ်မှာလို html စာပိုဒ်တစ်ခုလုံးမရေးတော့ဘူးနော်… body ပိုင်းလေးပဲ ရေးပြတော့မယ်… ကျွန်တော်ရေးပြတဲ့ဥပမာကို <body></body> ကြားထဲမှာသာ ထည့်ကြည့် လိုက်ပေတော့… အိုကေမယ် မဟုတ်လား…
<p> This <br> is a para<br>graph with line breaks. </p>
ထွက်လာမယ့် Output က ဒီလိုဖြစ်နေရမယ်…
Thisis a para
graph with line breaks.
အသုံးဝင်မယ့် မှတ်စုလေးများ
စာဖတ်သူအနေနဲ့ HTML text တွေကို ရေးတဲ့အခါမှာ စာပိုဒ်တွေကို text editor ထဲမှာ သေသေချာချာ ချိန်ညှိတာမျိုး မလုပ်ပါနဲ့.. ဆိုလိုတာက စာလုံးအစိပ်အကျဲ လိုင်းနဲ့ဆန့်မဆန့် ကြည့်လို့ကောင်းမကောင်း စတဲ့ ကိစ္စတွေကို note pad ထဲမှာ မချိန်ပါနဲ့ … ဘာကြောင့်လဲဆိုရင် မိမိရဲ့ ၀က်ဘ်စာမျက်နှာကို ကြည့်ရှုကြမယ့်သူတွေသုံးတဲ့ Browser တွေဟာ တခုနဲ့ တခု တူမှာမဟုတ်ပါဘူး… တချို့မှာ မော်နီတာ ကြီးကြီးရှိမယ် … တချို့မှာ မော်နီတာသေးသေးပဲရှိမယ်… ကြီးကြီးရှိသူက စာလုံးတွေကို ကျယ်ကျယ်လွင့်လွင့် မြင်ရမယ်… သေးတဲ့သူကလည်း သေးတဲ့အလျောက် မြင်ရမှာပဲဖြစ်တဲ့အတွက် browser ကလည်း အလိုအလျောက် ဒီစာသားတွေကို ချိန်ညှိသွားမှာပါ… မိမိက notepad မှာ လိုက်ချိန်ပေးတာမျိုးမလုပ်ရပါဘူး … အချိန်ကုန်ပြီး အရာမထင်ဖြစ်တတ်ပါတယ်… HTML ဟာ space တွေကို သိပ်မှတ်လေ့မရှိပါဘူး… notepad မှာ အများကြီးပုတ်ထားပေမယ့်… တကယ်ပြတော့ တခုပဲပြတာမျိုးဖြစ်ပါတယ်… ဘာမှမပါတဲ့ စာပိုဒ် (Empty paragraph) ကိုသုံးပြီး စာပိုဒ်ကို ပိုပြီးခြားအောင်လုပ်တာ မကောင်းတဲ့အကျင့်ပါ… မလုပ်သင့်ပါဘူး… စာပိုဒ်တစ်ပိုဒ်နဲ့ တစ်ပိုဒ်အကြား လိုင်းတွေပိုခြားချင်ရင် <br> ကိုပဲသုံးပြီးခြားသင့်ပါတယ်… လောလောဆယ်ဆယ် အမည်စာရင်းလို list တွေကို ရိုက်ဖို့အတွက်ဆိုရင်လည်း <br> ကိုပါ မသုံးပါနဲ့ဦး… List နဲ့ပတ်သက်လို့ နောက်ပိုင်းကျရင် ရှင်းပြသွားအုံးမှာပါ….
Html တွင် မိမိကိုယ်ပိုင်သင်္ကေတမှတ်ချက်များ
ကျွန်တော်တို့ရေးတဲ့စာမျက်နှာတစ်ခုဟာ အလွန်ရိုးစင်းပြီး အလွယ်တကူ နားလည်နိုင်တဲ့ စာမျက်နှာ ဖြစ်နိုင်သလို … နောက်ပိုင်းမှာ ထည့်သွင်းပို့ချမယ့် Style တွေ ၊ Script တွေ အခြား ပိုမိုရှုပ်ထွေးလာမယ့် ကိစ္စတွေပါ၀င်တဲ့ စာမျက်နှာတစ်ခုလည်း ဖြစ်နိုင်ပါတယ်… အဲဒီတော့ ဒီလိုစာမျက်နှာကို အမှားပြန်စစ်ရင်ဖြစ်စေ… လိုအပ်လို့ မိမိမဟုတ်တဲ့ တခြားသူက ပြန်လည်ပြင်ဆင်တည်းဖြတ်ရာမှာဖြစ်စေ… ဒီနေရာကတော့ ဘာအပိုင်းကိုလုပ်ထားတာပါ… ဒီနေရာကတော့ စာပိုဒ်ရဲ့ စတိုင်လ်ကို ပြင်ထားတာပါ.. အစရှိသဖြင့် မှတ်ချက်ကလေးတွေကို ထည့်ရေးသွားမယ်ဆိုရင်… အထက်မှာ ပြောခဲ့တဲ့ အမှားစစ်ခြင်း ၊ ပြန်လည်ပြင်ဆင်တည်းဖြတ်ခြင်းမှာ ပိုမိုလွယ်ကူထိရောက်စွာ ပြုလုပ်နိုင်မှာဖြစ်ပါတယ်… အဲဒီလို ကျွန်တော်တို့ရဲ့ ကိုယ်ပိုင်မှတ်ချက်တွေကို စာမျက်နှာထဲမှာ ထည့်ရေးချင်ရင်…
<!– This is a comment –>
ဆိုပြီး <!– နဲ့ –> ကြားမှာ ရေးချင်တာကို ထည့်ရေးရပါတယ်… အဲဒီ tag ကို HTML က စာမျက်နှာမှာ မပြပါဘူး အဲဒီ Tag ကိုတွေ့တာနဲ့ အော်… ဒါကတော့ စာမျက်နှာရေးသူရဲ့ ရေးချင်ရာရေးထားတဲ့ မှတ်ချက်ကလေးပါလား ဆိုပြီး အလိုက်တသိနဲ့ကျော်သွားမှာပါ… ဟဲဟဲ
ပြန်ပေါင်းချုပ်ကြည့်ရအောင်…
HTML Element တိုင်းမှာ element name တခုခုတော့ ပါ၀င်ပါတယ်… (ဥပမာ body,h1/h2…,p,br)v Start Tag လို့ခေါ်တဲ အစပိုင်းက ထောင့်ကွင်းနှစ်ခုထဲမှာ ထည့်ရေးရပါတယ်… (ဥပမာ <h1>,<p> ,etc…)
End Tag လို့ခေါ်တဲ့ အဆုံးပိုင်းကတော့ ထောင့်ကွင်းနှစ်ခုသာမက မျဉ်းစောင်းပါ ပါသေးတယ်.. (ဥပမာ </h1>,etc..)
Element Content တွေကို မြင်ရစေမှုအားလုံးဟာ အဲဒီ အဖွင့်အပိတ် Tag တွေရဲ့ကြားမှာသာ ဖြစ်ပေါ်ပါတယ်..
အချို့ HTML Element တွေမှာ HTML Content မပါပဲရှိတတ်တယ်… (ဥပမာ <br><br><br> ဘာမှမရေးပဲ အလွတ် သုံးကြောင်းဆင်းလိုက်တာ)
အချို့ HTML Element တွေမှာ အပိတ်မပါဘူး (သို့) အပိတ်မလိုဘူး.. (ဥပမာ… <br> )
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>
<p>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.</p>
</body>
</html>
တခြားမှတ်စရာလေးတွေအနေနဲ့..
- <p align=left> = စာပိုဒ်အနေအထား ဘယ်ညှိပေါ်မယ်.. (မထည့်လည်း ဘယ်ညှိက အလိုလိုပေါ်ပါတယ်..)
- <p align=right> = စာပိုဒ်အနေအထား ညာညှိပေါ်မယ်..
- <p align=center> = စာပိုဒ်အနေအထား အလယ်ညှိပေါ်မယ်..
- <p align=justify> = စာပိုဒ်အနေအထား ဘယ်ညာနှစ်ဘက်စလုံးညှိထားတဲ့အနေအထားနဲ့ပေါ်မယ်.. (ကြည့်လို့အကောင်းဆုံးပဲ)
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 = <b></b>
* Italic = <i></i>
* underline = <u></u>
* subscript = <sub></sub>
* superscript = <sup></sup>
* strike through = <del>
အဲဒါတွေအပြင် ပိုပါလာတဲ့ format တချို့လည်းရှိသေးတယ်ဗျ…
- <strong>= သူက Bold နဲ့တူတယ်.. ဘာကွာလဲတော့မသိဘူး..
- <em>= သူက Italic နဲ့ တူတယ် (Emphasized လို့ခေါ်တယ်..)
- <ins>= သူက underline နဲ့တူတယ်.. (Inserted လို့ခေါ်တယ်..)
- <small>= စာလုံးကိုပုံမှန်ထက်နည်းနည်းပိုသေးသွားစေတယ်..
- <big>= စာလုံးကို ပုံမှန်ထက် နည်းနည်း ပိုကြီးလာစေတယ်..
ဟုတ်မဟုတ် လက်တွေ့စမ်းကြည့်ရအောင်နော်..
<html>
<body>
<b>This text is bold</b><br>
<strong> This text is strong </strong><br>
<big> This text is big </big><br>
<em> This text is emphasized </em><br>
<i> This text is italic </i><br>
<small> This text is small </small><br>
This text contains
<sub> subscript </sub><br>
This text contains
<sup> superscript </sup>
</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>
<p>The pre tag is good for displaying computer code:</p>
<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><br>
<kbd>Keyboard input</kbd><br>
<tt>Teletype text</tt><br>
<samp>Sample text</samp><br>
<var>Computer variable</var><br>
<p><b>Note:</b> These tags are often used to display
computer/programming code. </p>
</body>
</html>
Address
နောက်တစ်ခုကတော့ address လို့ခေါ်တဲ့ Tag ဗျ.. ဘာထူးသွားလဲဆိုတော့ ကျွန်တော့မျက်လုံးထဲမှာတော့ စာလုံးနည်းနည်းကြီးပြီးစောင်းသွားတာပဲမြင်တယ်.. .
<address> Donald Duck<br>
BOX 555<br>
Disneyland<br>
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><br>
<acronym title=”Promoted Admin of MZ”>MrDBA</acronym>
<p>The title attribute is used to show the spelled-out
version when holding the mouse pointer over the
acronym or abbreviation.</p>
<p>This only works for the acronym
element in IE 5.</p>
<p>This works for both the abbr and acronym element
in Netscape 6.2.</p>
</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>
<p> With the block quote element, the browser inserts line breaks and
margins, but the q element does not render as anything special.
</p>
</body>
ပုံများထည့်သွင်းခြင်း
သင်ခန်းစာပထမဆင့်ကိုကျော်ဖြတ်ပြီး ရောက်ရှိလာတဲ့ စာဖတ်သူကို ကြိုဆိုပါတယ်.. ဆက်ပြီးလေ့လာရအောင်နော်..
Inserting Image
အခုဆက်လက်ပြီးကျွန်တော်တို့ ဓါတ်ပုံထည့်နည်းတွေ လေ့လာရအောင်ဗျာ.. ကိုယ့်ရဲ့ Web စာမျက်နှာကို စာသားသက်သက်ပဲ ဖန်တီးဖို့ တော့ ဘယ်သူမှ စိတ်ပါကြမှာမဟုတ်ပါဘူး.. သက်ဆိုင်ရာ သက်ဆိုင်ရာနေရာလေးတွေမှာ ပုံလေးတွေ ကို ထည့်သွင်းဖော်ပြခြင်းဖြင့် ဆိုလိုရင်းကိုပိုမိုထိရောက်စေတာ၊ ပြချင်တာကို အကောင်းဆုံးပြနိုင်တာ.. ပိုမိုလှပပြီး စိတ်ဝင်စားဖွယ်ကောင်းစေတာကို ဘယ်သူမှ မငြင်းနိုင်ပါဘူး..
အောက်ကပုံလေးကို Right Click နှိပ်ပြီး Save လုပ်ယူထားပါ..
ဓါတ်ပုံတစ်ပုံ(image)ကို ထည့်ဖို့ရာ ရေးရမယ့် HTML tag ကတော့
HTML Code:
<img src=”File path”>
ဖြစ်ပါတယ်.. 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>
<p>This is an image.</p>
<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">
လေ့ကျင့်ကြည့်ပါ..
<img src=A.jpg> (or)<img src=A.GIF>
<html><body><p> An image:
<img src=”constr4.gif” width=”144″ height=”50″></p><p> A moving image:
<img src=”hackanm.gif” width=”48″ height=”48″></p><p> Note that the syntax of inserting a moving image is no different from that of a non-moving image.
</p></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>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</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>
<p>To download Zawgyi Unicode System Click button shown below. </p>
<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 ဖိုင်တစ်ဖိုင်ဖန်တီးကြည့်ပါ.. ရလာမယ့် အဖြေကိုသေချာကြည့်ပြီးသုံးသပ်ကြည့်ပါ..