ံ၅၁။ HTML Tutorials For Beginner

 

 

 

HTML Beginner Tutorial

အက္၍ သင္သည္ Web Design ဆိုင္ရာ ဘာသာရပ္၌ လံုးဝကို အစိမ္း သက္သက္ၾကီးျဖစ္ေနပါက ဤေနရာမွေနျပီး HTML အေျခခံကို တစ္ဆင့္ျပီး တစ္ဆင့္ လမ္းညႊန္ျပသ ေပးသြားမည္ ျဖစ္ပါတယ္

• Getting Started: သင့္၏ ပထမဦးဆံုး HTML Page အတြက္လုပ္ေဆာင္ရန္ဘာေတြလိုအပ္ေနတယ္ဆိုတာကို ဒီေနရာမွ စတင္ေလ့လာပါ။
• Tags, Attributes and Elements: HTML ကိုေရးသားရာတြင္ အသံုးျပဳရမည့္ အစိတ္ပိုင္း ပစၥည္းမ်ား။
• Page Titles: Pages တစ္ခု၏ Titles ကိုေရးသားရာတြင္ ရွိတပ္ေသာ အယူဆ ခက္ခဲမွဳ။
• Paragraphs: စာပိုဒ္ မ်ားႏွင့္ မာတိကာ တည္ေဆာက္ျခင္။ 
• Headings: ေခါင္းစီး ျပဳလုပ္ရန္ အဆင့္ ၆ ခု။
• Lists: အမွတ္စဥ္တပ္ရာတြင္ (သို႔) စရင္းျပဳရာတြင္ အစီစဥ္အလုိက္ျပဳလုပ္ျခင္း ႏွင့္ အစီစဥ္ မၾကျခင္းကို ဘယ္လို သိသေအာင္ အနက္ဖြင့္ေပးမလဲ။
• Links: အျခားေသာ Page မ်ားကို ကူးသြာနိဳင္ေအာင္ Link ခ်ိပ္ေပးျခင္းကို ဘယ္လိုလုပ္မလဲ။
• Images: စာလံုးသက္သက္ မဟုတ္ဘဲ အျခားေသာေပါင္းထဲ့နိဳင္သည့္အရာ အခ်ိဳ႕။
• Tables: Table data ေတြကို ဘယ္လိုသံုးမလဲ။
• Forms: အသံုးျပဳသူမ်ား ျဖည့္ရမည္ Form ပံုစံျပဳလုပ္နည္း။
• Putting It All Together: HTML မွာရွိေသာ အသံုးျပဳရမည့္ အစိတ္ပိုင္း ပစၥည္းမ်ားကို စုစည္းျပသေပးျခင္း။

(1) Getting Started (သို႔) HTML ကို စတင္ျခင္း

ဝက္ဆိုဒ္ ေတြေပၚမွာ ရွိတဲ အရာေတြနဲ႔ သင့္ကြန္ပ်ဴတာထဲမွာ ရွိတဲ့ ဟာေတြက ဘာမွကြာျခားမွဳရွိၾကတာမဟုတ္ပါဘူး။ Files ေတြရဲ့လုပ္ေဆာင္မွဳအားလံုးဟာ လမ္းညႊန္မွဳလုပ္ေဆာင္ခ်က္မ်ားအားလံုးႏွင့္ အမ်ိဳးစား ကိုတူညီေစပါတယ္။ HTML ဖိုင္မ်ားဟာ ရိုးရိုး စာလံုးဖိုင္မ်ားထက္ ဘာမွသိသာထင္ရွားတဲ့ ေျပာင္းလဲမွဳေတြမရွိပါဘူး။ ဒါေၾကာင့္ HTML ကိုေရးဖို႔ရန္ ရိုးရိုး Text Editor တစ္ခုကလြဲျပီး ဘာမွအပိုမလိုအပ္ပါဘူး။ Windows ကိုအသံုးျပဳေနတဲ့ ကြန္ပ်ဴတာေတြအေနနဲ႔ ကေတာ့ Notepad ဟာသာမန္ Text Editor တစ္ခုပါဘဲ ( Notepad ကိုရွာျခင္ရင္ Programs > Accessories ထဲမွာရွာပါ။ Mac OSX ကြန္ပ်ဴတာမ်ားအတြက္ ကေတာ့ TextEdit ကိုသံုးရမွာျဖစ္ပါတယ္ ဒါေပမဲ့ မည္သည့္ Program မဆိုသင့္ကို ေမႊေႏွာက္ခြင့္ျပဳထားတာက ေတာ့ Text မ်ားသာျဖစ္ပါတယ္။ ဒါ့ေၾကာင့္ သင့္ရဲ့ Text Editor ေအာက္ကစလံုးမ်ားကို ရိုက္သြင့္းပါ။ 

 This is my first web page 

" html " ဟုေခၚေသာ Folder တစ္ခုကိုတည္ေဆာက္ပါျပီး ႏွစ္သက္ရာေနရာမွာသိမ္းပါ File Name ကို “myfirstpage.html” ဟုေပးပါ။

အေရးၾကီးတဲ့ သတိထားရမဲ့အခ်က္က html ကိုေနာက္တိုးအျဖင့္ထဲ့ထားတဲ့ “.html” ဟာ အခ်ိဳ႕ေသာ Text Editors မ်ားမွာ ျပဌာန္းထားတာရွိေနပါတယ္ ဥပမာ Notepad လို Text Editors ဆိုပါေတာ့ Notepad ဟာသင္ေရးထားတဲ့ Text ေတြကို Save လုပ္တဲ့အခါမွာ “.txt” အျဖစ္နဲ႔သင့္ရဲ့ Files မ်ားကိုသိမ္းေပးမွာျဖစ္ပါတယ္။ သင့္အေနနဲ႔လည္း File ေတြကိုသိမ္းတဲ့အခါမွာ Plain Text အျဖစ္နဲ႔သာ ေသခ်ာေအာင္သိမ္းေပးဖို႔လိုအပ္ပါတယ္။ ဥပမာ TextEdit ကဖိုင္ေတြကိုသိမ္းတဲ့အခါမွာ Default အျဖင့္နဲ႔မ်ားလွစြာေသာ စလံုးမ်ားကို “Rich text” အျဖင့္နဲ႔သိမ္းမွာျဖစ္ပါတယ္ ဒါေၾကာင့္ သင့္ရဲ့ဖိုင္ေတြကို မသိမ္းခင္ “Plain text” သိမ္းမသိမ္းကို သူလမ္းညႊန္အတိုင္းသြားေရာက္ စစ္ေပးပါ။ 
သင့္ Save လုပ္ထားျပီးသား HTML files ျပန္ၾကည့္ဖို႔ရန္ ဝက္ဆိုဒ္ေပၚကိုတက္ေနစရာမလိုပါဘူး သင္သံုးေနၾက Browser တစ္ခုခုကိုသာဖြင့္လိုက္ပါ Browser ဆိုတာက Chrome, Firefox, Safari နဲ႔ Internet Explorer တိုဟာ Browsers မ်ားျဖစ္ပါတယ္၊ သင္ဖြင့္လိုက္တဲ့ Browser ရဲ့လိပ္စာဘားေပၚမွာ သင္ Save လုပ္ျပီးသိမ္းထားတဲ့ File လမ္းေၾကာင္းကို ေကာ္ပီကူးယူျပီး အဲဒီ Browser ရဲ့လိမ္စာဘားေနရာမွာ ရိုက္ထဲ့ျပီး Enter ေခါက္လိုက္ပါ သင္ေရးထားတဲ့ HTML files ကိုဝက္ဆိုဒ္ေပၚမွာတန္းေတြ႔ရမွာျဖစ္ပါတယ္ က်ေနာ္စမ္းထားတဲ့ File လမ္းေၾကာင္းေလးကို ဥပမာအျဖစ္ထဲ့ေပးထားပါတယ္ file:///C:/Users/HTML/myfirstpage.html  ေနာက္တစ္နည္းကေတာ့ သင္သိမ္းထားတဲ့ သင္သိမ္းထားတဲ့ File ေပၚမွာကလစ္တမ္းႏွိပ္ျပီးၾကည့္လည္းရပါတယ္။  သင့္ကို က်ေနာ္ေျပာထားတာက HTML ကို Text Editor ျဖစ္တဲ့ Notepad မွာေရးပါလို႔ေျပာထားတာေနာ္ ဒါကိုသင္က Adobe Dreamweaver လို software program ကိုအသံုးျပဳေရးသားမယ္ဆိုရင္ သင့္အေနနဲ႔ အမ်ားၾကီးကို သတိထားဆင္ျခင္စရာေတြရွိတာကို အသိေပးပရေစ ဘာ့ေၾကာင့္လဲဆိုေတာ့ software program မလိုအပ္သည္မ်ားကို သူတို႔ဖာသာဖယ္ထုပ္ျပစ္လိုက္တာေၾကာင့္ သင့္လို ခုမွ HTML ကိုစသင္သူအေနနဲ႔ ေခါင္းေျခာက္စရာေတြကို ဘယ္လိုမွရွင္းလို႔ရမွာမဟုပ္ေတာ့ပါဘူး။ အကယ္၍ သင့္အေနနဲ႔ HTML ကိုေလးေလးနက္နက္စိတ္ဝင္စားလို႔သင္ယူမယ္ဆိုရင္ ဒီေနရကေနစျပီး ေနာက္ဆက္တြဲမ်ားကိုအားလံုးဖတ္သြားသင့္ပါသည္၊ အဲဒီလိုဖတ္ေပးသြားမွသာလွ်င္သင္ဟာ HTML အေျခခံကိုရရွိမွာျဖစ္ပါတယ္။ Software programs ကေတာ့ Web Page ေပၚကိုခုလိုကိုတိုင္ေရးတင္လို႔ရတဲ့ လုပ္ပိုင္ခြင့္မ်ိဳးေပးမွာမဟုတ္ပါဘူး။ သင့္အေနနဲ႔ အထူးထုပ္လုပ္ေပးထားတဲ့ Code-Editing software သံုးမယ္လို႔စိတ္ဆံုးျဖတ္ထားရင္ေတာ့  သင္ကိုယ္တိုင္လက္ျဖစ္ Code မ်ားကိုေရးေပးဖိုသတိေပးခ်င္ပါတယ္ သင္ကိုယ္တိုင္ေရးေပးမွလဲသင္ရဲ့အရည္ေသြးတိုးတက္မွာျဖစ္ပါတယ္။

(2) Tags, Attributes, ႏွင့္ Elements မ်ား

 

HTML ဆိုတာ Plane Test ဆိုေပမဲ့ က်ေနာ္တို႔ေတြနည္းနည္းေလးေတာ့ လွပေတာင္ေျပာင္ေအာင္ HTML ဆိုင္ရာ စာရြက္ စာတန္းေတြကို လုပ္ေပးဖို႔လိုပါတယ္။

<!DOCTYPE html>
<html>
<body>
    This is my first web page
</body>
</html>

ပထမတစ္ၾကိမ္ This is my first web page လို႔ေရးျပီးတစ္ၾကိမ္ Save လုပ္ျပီးပါျပီ၊ ခုအထက္ပါပန္းေရာင္နဲ႔ေရးထားတဲ့ စာေတြကို ေရးျပီး ထပ္မံ Save လုပ္ပါ။ ဒီလိုေရးတဲ့အခါမွာThis is my first web page လို႔ေရးထားတဲ့စာကို အလယ္မွာထားျပီး Tags ကိုအထက္ေအာင္မွန္ေအာင္ျဖည့္စြက္ျပီးရိုက္သြင္းပါ  ျပီးရင္ သင္ဖြင့္ထားတဲ့ Browser ကိုသြားျပီး Reload ျပန္လုပ္ပါ သင္ေရးထားတဲ့ စာမ်က္မွာမွာ This is my first web page ဆိုတဲ့စာကလြဲျပီးထူးျခားမွဳေတြ မရွိေသးပါဘူး သို႔ေသာ္လည္း သင္ HTML ရဲ့ Tags ကိုေတာ့စျပီးအသံုးျပဳထားပါျပီ။ ဒီနမူနာပံုစံေလးမွာ HTML ရဲ့ အေျခခံက်တဲ့ အစိတ္ပိုင္းေတြကိုစတင္ အသံုးျပဳထားပါျပ။
ပထမဆံုးလိုင္းမွာေရးထားတဲ့ <!DOCTYPE html> စာကေတာ့ document type declaration  ျဖစ္ပါတယ္ ဒါဟာ Browsers ေတြကိုသင္ဘယ္လို HTML ကိုသံုးထားတယ္ဆိုတာအသိေပးျခင္းျဖစ္ပါတယ္ ( ဒီေနရာမွာ သံုးထားတာက္ HTML5 ျဖစ္ပါတယ္) ဒါဟာအလြန္အေရးၾကီးတဲ့အရာပါ ဒီလိုမွသင္မလုပ္ေပးဘူးဆိုရင္ Browser ကေနျပီးသင္အသံုးျပဳေနတာဟာ အလြန္ထူးဆန္းတဲ့နည္းတစ္ခုလို႔ယူဆသြားမွာျဖစ္ပါတယ္။ 
ဦးတည္ခ်က္ကိုအဓိက ထားျပန္ေျပာျပရရင္ <html> ဆိုတဲ့ Tag ဟာ HTML ေရးသားရာမွာ opening tag  ေခၚအဖြင့္ Tag ျဖစ္ပါတယ္ ဒိအျပင္ Browser ကို HTML ဆိုင္ရာ Code ေတြနဲ႔ပါတ္သက္တဲ့လုပ္ငန္းစဥ္ေတြစျပီဆိုတာေျပာလိုက္တာဘဲျဖစ္ပါတယ္၊ လုပ္သမွ်လုပ္ေဆာင္ခ်က္အားလံုးဟာလည္း အဖြင့္ Tag ႏွင့္ အပိတ္ Tag  ျဖစ္တဲ့ <html> နဲ႔  </html> closing tag  ၾကားမွာရွိရပါမည္ ဒါဟာ HTML Document တစ္ခုလံုးအတြက္ျဖစ္ပါတယ္။ <body> Tag  နဲ႔ </body> Tag ကလည္း အဓိကပါဝင္ရမဲ့ Tags မ်ားျဖစ္ျပီး Browser နားလည္ေအာင္အသိေပးရတဲ့ Tags ေတြဘဲျဖစ္ပါတယ္။

 

အပိတ္ Tags မ်ား

</body> နဲ႔ </html> တို႔ကိုလိုအပ္သလိုဆိုင္ရာဆိုင္ရာေနရာေတြမွာ ထားေပးရပါတယ္၊ သို႔ေသာ္လည္း Tags အားလံုးကို အပိတ္ Tags သံုးရတာမ်ိဳးမဟုတ္ပါဘူး လိုရင္လိုသလို ပိတ္ေပးရတာပါ ဥပမာ  (<html></html>)   ဒီလို Tags မ်ားဟာ စာပိုဒ္အစ နဲ႔ အဆံုးအတြက္သာျဖစ္ပါတယ္၊ Line-Break Tag ဟာဆိုရင္ အျခားေသာ Tags မ်ားႏွင့္ခ်ိပ္ေနတဲ့ Tag မဟုတ္ပါဘူး သူ႔ဘာသာသည္းသန္႔ Tag အမ်ိဳးစားျဖစ္ပါတယ္၊ <br> ဒါဟာ Line-Break Tag ျဖစ္ပါတယ္ ေနာက္ပိုင္းမွာ ဥပမာမ်ားထုပ္ျပိးရွင္းျပေပးပါမယ္၊ သင္ပံုေသ မွတ္ထားသင့္တာေလးက သင္ေရးမဲ့ ပံုစံအခ်ိဳးအစားအလိုက္ Open Tag နဲ႔စဖြင့္ေပးရပါတယ္ ျပိးရင္လိုအပ္တာေတြကို ေရးျပိးရင္ Closing Tag နဲ႔မျဖစ္မေနျပန္ပိတ္ေပးရပါတယ္ ဒါကို အေသမွတ္ထားပါ Line-Break Tag လိုမ်ိဳးကိုမဆိုလိုပါဘူး။ အတိအက်ေျပာရရင္ အျမဲလိုအပ္မွဳျဖစ္ေပမဲ့သူ႔ေနရာနဲ႔သူသာ လိုအပ္တာကုိသိထားဖို႔လိုပါတယ္။ အခ်ိဳ႕ Tag ေတြဟာ သူ႔ဘာသာသူျပန္ပိတ္ေပးတာကို ေနာက္ပိုင္းမ်ာသင္ေတြ႔လာပါလိပ္မယ္ ဥပမာ br Tag ပါသူ႕ကို ေရးရင္ “<br>” လို႔ေရးမဲ့အစား “<br />” လို႔တစ္ခါတည္းေရးလိုက္ၾကပါတယ္၊ ဒါဟာတကယ္ေတာ့ XHTML ကိုသံုးတဲ့စနစ္ရဲ့လက္က်န္မ်ားျဖစ္ပါတယ္ ျပိးေတာ့ သင္သိထားရမွာက HTML ဆိုတာက XML အေပၚမွာအေျခခံျပီး ေရးသားလာတဲ့ Language လည္းျဖစ္ပါတယ္၊ HTML5 ကိုသံုးရတာဟာ XHTML ထက္ပိုျပိးအသံုးျပဳတာအဆင္ေျပေစပါတယ္၊ သို႔ေသာ္လည္း လူတစ္ကိုယ္အၾကိဳက္တစ္မ်ိဳးဆိုေတာ့ အသံုးျပဳခ်င္ၾကတာခ်င္း တူခ်င္မွေတာ့တူမယ္ ဒီေနရာမွာေတာ့ က်ေနာ္တို႔ ေခါင္း ပန္း လွန္ျပီးဆံုးျဖတ္ၾကတာပိုေကာင္းမယ္ထင္တယ္။

Attributes

Tags မ်ားမွာလည္း attributes ရွိပါတယ္ အဲဒါေတြကေတာ့ အပို သတင္းအခ်က္လက္ အခ်ိဳ႕ျဖစ္ပါတယ္၊ attributes ကို Open Tag ရဲ့အတြင္းမွာထားေရးရျပီး သူတို႔ရဲ့ Value ကို Quotation Marks ရဲ့အတြင္းမွာထားေရးရပါတယ္၊ Tag Attribute ကိုဒီလိုမ်ိဳးေရးရပါတယ္ <tag attribute="value">Margarine</tag>  ေနာက္ပိုင္းသင္ခန္းစားေတြမွာ Tag Attribute  ေတြကိုေတြ႔ရမွာျဖစ္ပါတယ္။ ေနာက္တစ္ခုကေတာ့ Quotation Marks ေတြဟာ အျမဲတန္း မရွိမျဖစ္ထဲ့ကိုထဲ့ရမယ္လို႔ ပံုေသ မွတ္္ထားဖို႔မလိုပါဘူး သို႔ေသာ္လည္းဘဲ Quotation Marks ကိုထည့္သံုးျခင္းဟာ ေကာင္းမြန္တဲ့ေလ့က်င့္မွဳဆိုတာကို အၾကံျပဳခ်င္ပါတယ္။

Elements

Element ဆိုတာ အဖြင့္ နဲ႔ အပိတ္ ႏွစ္ခုပါတဲ့ Tags တစ္စံုလို႔ အလြယ္ မွတ္ထားပါ ဥပမာ  <body> နဲ႔  </body> Tags တစ္စံု Body Element လို႔ေခၚပါတယ္၊ ေနာက္တစ္ခု ဥပမာ ျပေပးပါအုန္းမယ္ <title> နဲ႔ </title> Tags, ဆိုပါေတာ့ ေခါင္းစဥ္တစ္ခုကို ေဖၚျပခ်င္လို႔ေရးတဲ့အခါမွာသံုးပါတယ္ အျပည့္စံုေရးမယ္ ဆိုရင္ “<title>Rumple Stiltskin</title>” ဒီလိုမ်ိဳးေရးရမွာ ျဖစ္ပါတယ္ ဒါဟာ Title Element ျဖစ္ပါတယ္ ဒီလိုမ်ိဳး Element ေတြကိုလည္းနားလည္ထားရမွာျဖစ္ပါတယ္။ Elements ေတြကိုပိုနားလည္သြားေအာင္ နမူနာမ်ားထပ္ျပထားေပးပါတယ္။

<p> element: <p>This is my first paragraph.</p> 
 p အဖြင့္ အပိတ္Tag ႏွစ္ခုအတြင္းမွာရွိရပါတယ္။

<body> element: <body>
<p>This is my first paragraph.</p>
</body> 
 body အဖြင့္ အပိတ္Tag ႏွစ္ခုအတြင္းမွာရွိရပါတယ္။

<html> element: <html>
<body>
<p>This is my first paragraph.</p>
</body>
</html> 
 html အဖြင့္ အပိတ္Tag ႏွစ္ခုအတြင္းမွာရွိရပါတယ္။ ခုေလာက္ဆိုရင္ elements ေတြကိုနားလည္ျပီလို႔ယူဆပါတယ္။

(3) Page Titles စာရြက္မ်ားကို ေခါင္းစဥ္တပ္ျခင္း

HTML Pages ေတြအားလံုးမွာေခါင္းစဥ္ရွိသင့္ပါတယ္ သင့္ရဲ့စာရြက္မွာေခါင္းစဥ္တပ္ဖို႔ရန္ သင္ေရးထားျပီး Save လုပ္သိမ္းထားတဲ့ HTML ဖိုင္ကိုဖြင့္ျပီး လုိအပ္တဲ့ Code ေတြကို ျပင္ေရးျပီး ထပ္မံ Save လုပ္ပါ။ ဒီလိုျပင္ဖို႔ရန္ ေအာက္မွာ အနီေရာင္နဲ႔ ေရးထားတဲ့ Code ေတြကုိ သင္ေရးျပီးသား ဖိုင္ထဲကို ျဖည့္ေရးေပးပါ။ 

<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
</head>
<body>
    This is my first web page
</body>
</html>

အထက္ပါ Code ေတြမွာက်ေနာ္ Elements ႏွစ္ခုထပ္ေပါင္းထဲ့လိုက္ပါတယ္ အဲဒီႏွစ္ခုကေတာ့ Head Element နဲ႔ Title Element တို႔ျဖစ္ပါတယ္၊  Head Element ကိုအရင္ေရးျပီး Title Element ကိုၾကားမွာထဲ့သံုးထားတာကို ေသခ်ာနားလည္ေအာင္ၾကည့္ပါ၊  Head Element ကို အဖြင့္ Tag ျဖစ္တဲ့ <head>  နဲ႔ဖြင့္းျပီး  </head> နဲ႔ျပန္ပိတ္ေပးထားတာပါ Body Element ရဲ့အေရွ႕မွာခ်ေရးထားတာပါ၊ ဒီ Head Element ဟာ Browser မွာျမင္ရမွာေတာ့မဟုတ္ပါဘူး သို႔ေသာ္လည္း အေရးၾကီးတာက Title Element ျဖစ္ပါတယ္ သူ႔ကို ဒီ Title Element ကို Head Element ၾကားမွာထဲ့ေရးေပးရပါတယ္။ အထက္မွာေရးျပထားတဲ့ Code ေတြကုိျပင္ျပိးသြားရင္္ Save လုပ္ျပီး Browser ကိုဖြင့္ၾကည့္နိဳင္ပါတယ္။ ဒါေပမဲ့ ဒီေခါင္းစဥ္က Browser Windows မွာျမင္ရမွာမဟုပ္ပါဘူး ကြန္ပ်ဴတာ Screen ရဲ့အထက္ဆံုး ဘယ္ဘက္ေထာင့္က Firefox Logo ေနရာနားမွာသြားေပၚမွာျဖစ္ပါတယ္ ( သင္သံုးေနတာ Firefox ဆိုရင္ေပါ့ေနာ္ ) သင္ရိုက္သြင္းလုိက္တဲ့စလံုးေတြဟာ သင့္စာရြက္အတြက္ ေခါင္းစဥ္ဘဲျဖစ္ပါတယ္။ တကယ္လို႔သင္က သင့္စာရြက္ကို “Favorites” တို႔ “Bookmarks” တို႔မွာထဲ့သိမ္းလိုက္မယ္ ဆိုရင္ေတာ့ သင့္ေပးထားတဲ့ေခါင္းစဥ္ကို အဲဒီ “Favorites” တို႔ “Bookmarks” တို႔မွာျမင္ရမွာျဖစ္ပါတယ္။

(4) Paragraphs စာပိုဒ္မ်ားေရးသားျခင္း

သင္ Save လုပ္ထားတဲ့ HTML Document  ေလးတစ္ခုရွိေနျပီးျဖစ္တဲ့အတြက္ သင့္မွာအေျခခံ HTML တည္ေဆာက္မွဳ အရည္ခ်င္းေလးေတာ့ရွိေနပါျပီ၊ ဒီေတာ့ HTML ကို နဲနဲေလာက္ စတင္ျပီးေမႊေႏွာက္ လက္သရမ္းၾကည့္ၾကတာေပါ့။ ဒီေတာ့ Text Editor ျဖစ္တဲ့ Notepad ဆီကိုျပန္သြားပါ။ သင္ေရးထားတဲ့ HTML ဖိုင္ထဲ့မွာ How exciting ဆိုတာေလးကို ထပ္ျဖည့္ေပးပါ ျပီးရင္ Save လုပ္ျပီး သင့္ရဲ့ Browser မွာဘာေျပာင္းသြားလည္းဆိုတာကို သြားျပန္ၾကည့္ပါ။ သင္ေရးထားတဲ့ Code ေတြကိုအားလံုးေပါင္းထားတဲ့ ပံုစံေလးကေတာ့ ေအာက္ပါအတိုင္းျမင္ရမွာျဖစ္ပါတယ္။ How exciting ေလးဘဲအပိုျဖည့္ထားတာျဖစ္ပါတယ္။

<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
</head>
<body>
    This is my first web page
    How exciting
</body>
</html>

 သင္စာရိုက္ထားတာက လိုင္း ႏွစ္လိုင္းျဖစ္ေနပါျပီ သို႔ေသာ္လည္း ထိုလိုင္း ႏွစ္ခုကို သင္ Browser မွာၾကည့္ရင္ This is my first web page How exciting ဆိုျပီး တစ္ေၾကာင္းထဲျမင္ရမွာျဖစ္ပါတယ္။ သင္ေရးထားတဲ့ စာေၾကာင္း ဟာ ႏွစ္ေၾကာင္းဆိုတာ Browser ကနားမလည္ေသးပါဘူး ဒါကို Browser နားလည္ေအာင္သင္ကရွင္းျပေပးဖို႔လိုပါတယ္ ဒီလို Browser နားလည္သြားေအာင္ က်ေနာ္တို႔ p Tag ေလးကိုသံုးၾကည့္ၾကရေအာင္လား၊ ေကာင္းျပီး သင္ရိုက္ထားတဲ့ This is my first web page နဲ႔ How exciting စာေၾကာင္းေတြကို ေအာက္မွာျပထားတဲ့ နမူနာေလးအတိုင္း <p> </p> Elements ရဲ့ၾကားထဲမွာထဲ့ျပီး Save လုပ္မယ္ ျပီးရင္ Browser မွာသြားၾကည့္မယ္.

 

<p>This is my first web page</p>
<p>How exciting</p>

 

ကဲခုေတာ့ စာေၾကာင္းႏွစ္ေၾကာင္းျဖစ္သြားျပီေနာ္ P Tag ကို Paragraphs ခြဲတဲ့ေနရာမွာသံုးတယ္ ဆိုတာနားလည္ျပီေနာ္၊

Emphasis အသားေပးေဖၚျပလိုေသာစာလံုးကို သံုးရမည့္ Tags မ်ား

သင့္ရဲ့စာပိုဒ္ေတြထဲကစာလံုးေတြကို သိသာထင္ရွားေအာင္ အသားေပးေဖၚျပလိုတဲ့အခါမွာ em Tag ႏွင့္ strong Tag ကိုသံုးရမွာျဖစ္ပါတယ္။ 

<p>Yes, that really <em>is</em> exciting. <strong>Warning:</strong> 

level of excitement may cause head to explode.</p>

 

ဒီေနရာမွာ em Tag ကိုသံုးမယ္ဆိုရင္ Browser ကသင္ေရးထားတဲ့ em Tag ကို စလံုးအေစာင္းေရးျပိး ျပေပးမွာျဖစ္ပါတယ္၊ အကယ္၍သင္က strong Tag ကိုသံုးရင္ေတာ့ စလံုးကို bold တင္ထားသလို သင္ေရးထားတဲ့စာကို အေရာင္ပိုထင္းေစမွာျဖစ္ပါတယ္။ သို႔ေသာ္လည္းသင္စာေရးရာတြင္ သံုးေနၾကျဖစ္တဲ့ စလံုးကို ေစာင္းေရးလိုပါက သံုးရေသာ " i " ႏွင့္ bold လုပ္လိုေသာအခါသံုးရေသာ " b " တို႔ႏွင့္မတူဘူးဆိုတာကို သိထားလိုပါတယ္။ ဒါေၾကာင့္ စလံုး ကိုေစာင္းေရးလိုေသာအခါႏွင္ အေရာင္ထင္းေစလိုတဲ့အခါမွာ <em> Tag ႏွင့္ <strong> Tag ကိုသံုးရမွာျဖစ္ပါတယ္။ 

 

Line breaks ကို သံုးျခင္း

ေရးလက္စ စာေၾကာင္းကေန ေနာက္ထပ္စာေၾကာင္းကို ေျပာင္းျပီးသံုးလိုတဲ့အခါမွာ Line-break Tag ကိုသံုးရမွာျဖစ္ပါတယ္။ ဥပမာ ကိုေအာက္မွာျပထားေပးပါတယ္။

This is my first web page<br>
How exciting

 

 အထက္ပါ Line-break Tag မွာ closing Tag မပါတာကိုသတိျပဳပါ Line-break Tag သည္ closing Tag မပါေသာ Tag ျဖစ္ပါသည္။ 

အထူးသတိထားရမွာကေတာ့  Line-break Tag ျဖစ္တဲ့ <br> Tag ႏွင့္စာပိုဒ္ခြဲတဲ့အခါမွာသံုးေသာ <p> Tag တို႔မတူတာကို အထူးဂရုျပဳေစခ်င္ပါတယ္။

(5)Headings ေခါင္းစဥ္တပ္ျခင္း

 p Tag ဟာ စာစရိုက္သြင္းဖို႔ရန္ အသံုးျပဳတဲ့ Tag ျဖစ္ပါတယ္။ ဒိလိုစာပိုဒ္ေတြေရးသားေတာ့မယ္ဆိုတာနဲ႔ ေခါင္းစဥ္ဆိုတာလဲဘဲ ရွိရမယ္ဆိုေတာ့ ဒီေနရာမွာ HTML ကေခါင္းစဥ္ထဲ့နည္း ကို အရြယ္အစားေတြနဲ႔တခါထဲခြဲျပိးထဲ့လို႔ရေအာင္ စီစဥ္ထားေပးပါတယ္ ေခါင္းစဥ္တပ္ရင္ သံုးတဲ့ Tag ကေတာ့ h Tag ျဖစ္ပါတယ္ သို႔ေသာလည္းအရြယ္စားကို လိုခ်င္သလိုထဲ့လို႔ရေအာင္ h ကို h1, h2, h3, h4, h5 ႏွင့္ h6 စသျဖင့္ အရြယ္စားကို ေျပာင္းသံုးနိဳင္ပါတယ္။ အရြယ္အစားအားျဖစ္ h1 ဟာအၾကီးဆံုးျဖစ္ျပီး h6 က အေသးဆံုးပါ။

 

သင္ေရးလက္စ HTML ဖိုင္မွာ ေအာက္ပါ Code ေတြကိုထပ္မံျဖည့္သြင္းေရးေပးပါ

<!DOCTYPE html>

<html>

<head>
    <title>My first web page</title>
</head>

<body>
    <h1>My first web page</h1>

    <h2>What this is</h2>
    <p>A simple page put together using HTML</p>

    <h2>Why this is</h2>
    <p>To learn HTML</p>
</body>

</html>

 

 အသစ္ေရးထဲ့ရမဲ့ Code ကိုအနီေရာင္နဲ႔ျပေပးထားပါတယ္။

 

 

 

(6) Lists ေရးနည္း Tags မ်ား

List တပ္ျပီးေရးသားနည္း သံုးနည္းရွိပါတယ္ unordered lists, ordered lists  ႏွင့္ Definition lists တို႔ျဖစ္ပါတယ္။ ဒီေနရာကေနျပီး Unordered List ႏွင့္ Ordered Lists အေရးနည္းကိုရွင္းျပေပးမွာျဖစ္ျပီး  definition lists ကိုေတာ့  HTML Intermediate Tutorial. မွာထပ္မံေလ့လာေစလိုပါတယ္။ ခုရွင္းျပေပးမဲ့ Lists ႏွစ္မ်ိဳးလံုးဟာ နည္းအားျဖင့္အတူတူပါဘဲ အစီစဥ္က်တာနဲ႔ မက်တာဘဲကြာပါတယ္။ Unordered Lists ကိုသံုးတဲ့အခါမွာ Bullets ေတြထဲသံုးထားတာကိုေတြရမွာျဖစ္ပါတယ္ Order Lists ကိုသံုးတဲ့အခါမ်ားၾကေတာ့ အမွတ္စဥ္တပ္ေပးျပိး အတိအက်ေဖၚျပလိုတဲ့အခါမ်ားမွာသံုးၾကတာမ်ားပါတယ္။ Unordered Lists အတြက္အသံုးျပဳရမဲ့ Tag ကေတာ့ ul Tag ျဖစ္ျပီး Order Lists အတြက္သံုးရမဲ့ Tag မ်ားကေတာ့ ol Tag ျဖစ္ပါတယ္။ ဒီေနရာမွာ li Tag ဆိုတာရွိပါေသးတယ္ ဒီ Tag ကိုၾကေတာ့ ပစၥည္းတစ္ခုျခင္းကို အမွတ္စဥ္တပ္ျပီးသံုးတဲ့ေနရာမွာသံုးပါတယ္ ဒီေတာ့ သင္ေရးထားတဲ့ HTML Code ေတြကုိေအာက္ပါ Code မ်ားျဖင့္ေျပာင္းလည္းေလ့က်င့္ေပးပါ။

<!DOCTYPE html>

<html>

<head>
    <title>My first web page</title>
</head>

<body>
    <h1>My first web page</h1>

    <h2>What this is</h2>
    <p>A simple page put together using HTML</p>

    <h2>Why this is</h2>
    <ul>
        <li>To learn HTML</li>
        <li>To show off</li>
        <li>Because I've fallen in love with my computer and want to give 

her some HTML loving.</li>
    </ul>

</body>

</html> 

ခုသင္ျပင္လိုက္တဲ့ Code ေတြကို Browser မွာၾကည့္မယ္ဆိုရင္ Bullet ေခၚအမဲတံုးေလးေတြတပ္ထားတဲ့ Lists မ်ားကိုေတြ႔ရမွာျဖစ္ပါတယ္။ ဘာ့ေၾကာင့္လဲဆိုေတာ့ သင္က <ul> Tag ကိုသံုးထားလို႔ပါဘဲ <ul> Tag ကေနျပီး <ol> Tag ကိုေျပာင္းသံုးမယ္ဆိုရင္ အမွတ္စဥ္တပ္ထားတဲ့ Lists ကိုေတြ႔ရမွာျဖစ္ပါတယ္ ဒီေတာ့ သင္အေပၚမွာေရးထားတဲ့ Code ေနရာမွာ ေအာက္ပါ Code မ်ားေျပာင္းသံုးၾကည့္မယ္ဆိုရင္ တစ္ ႏွစ္ သံုး စျဖင့္ အမွတ္စဥ္တပ္ထားတဲ့ Lists ကိုေတြ႔ရမွာျဖစ္ပါတယ္ ေအာက္ပါ <ol> Tag မ်ားကိုအနီေရာင္နဲ႔ျပေပးထားပါတယ္။

<ul>
    <li>To learn HTML</li>
    <li>
        To show off
        <ol>
            <li>To my boss</li>
            <li>To my friends</li>
            <li>To my cat</li>
            <li>To the little talking duck in my brain</li>
        </ol>
    </li>
    <li>Because I've fallen in love with my computer and want to give

 her some HTML loving.</li>
</ul> 

Lists ႏွင့္ပါတ္သက္ျပီးသိထားသင့္ေသာ Tags မ်ား

 

<ol>     Defines an ordered list
<ul>     Defines an unordered list
<li>     Defines a list item
<dl>     Defines a description list
<dt>     Defines a term/name in a description list
<dd>     Defines a description of a term/name in a description list

(7) Links မ် ားခ်ိပ္ဆက္ျခင္း

So far you’ve been making a stand-alone web page, which is all very well and nice, but what makes the Internet so special is that it all links together.
The “H” and “T” in “HTML” stand for “hypertext”, which basically means a system of linked text.

An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.
Add this to your document:

<!DOCTYPE html>

<html>

<head>
    <title>My first web page</title>
</head>

<body>

    <h1>My first web page</h1>

    <h2>What this is</h2>
    <p>A simple page put together using HTML</p>

    <h2>Why this is</h2>
    <p>To learn HTML</p>

    <h2>Where to find the tutorial</h2>
    <p><a href="http://www.htmldog.com">HTML Dog</a></p>

</body>

</html>

The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as “http://www.htmldog.com”, or it can be relative to the current page.
So if, for example, you had another file called “flyingmoss.html” in the same directory then the line of code would simply be <a href="flyingmoss.html">The miracle of moss in flight</a> or something like this.
A link does not have to link to another HTML file, it can link to any file anywhere on the web.

A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example <h2 id="moss">Moss</h2>, and then link to it by using something like this: <a href="#moss">Go to moss</a>. Selecting this link will scroll the page straight to the element with that ID.