HTML ရေးကြည့်မယ်
HTML ရေးတော့မယ်ဆိုရင်တော့ အရင်ဆုံး HTML ရဲ့ file extension ကိုတော့ သိထားရပါမယ် ၊ file extension ကတော့ .htm (သို့မဟုတ်) .html နဲ့ သုံးပါတယ်၊ အဲဒီနှစ်ခု ဘာကွာလဲဆိုတော့ ဖိုင်အမျိုးအစားကို သုံးလုံးပဲ လက်ခံတဲ့ ဆော့ဖ်ဝဲတွေဖို့ .htm နဲ့ သိမ်းပေးရပါတယ် … ဖိုင်အမျိုးအစားမှာ လေးလုံးလက်ခံတဲ့ ဆော့ဖ်ဝဲဆိုရင်တော့ ကြိုက်တာနဲ့ သိမ်းနိုင်ပါတယ်၊ နောက်ပြီးတော့ HTML ရေးမယ်ဆိုရင် ကျွန်တော်ကတော့ plain text editor (note pad) ကို သုံးပြီးရေးပါတယ်၊ Pro တွေကတော့ Frontpage, Dreamweaver စသည်တို့ကို သုံးကြပါတယ်၊ အဲဒါတွေကတော့ HTML ကို နားလည်သွားရင် လွယ်လွယ်နဲ့ ရေးလို့ရအောင်၊ အလုပ်လည်း မြန်အောင် ပြုလုပ်ထားတဲ့ ဆော့ဖ်ဝဲတွေပါ၊ ကျွန်တော်ကတော့ ပရို မဟုတ်သေးတော့ notepad ပဲသုံးပါတယ်။
ကဲ၊ ဖတ်ရတာတွေလည်း မျက်စေ့နောက်နေလောက်ရောပေါ့၊ ကျွန်တော်တို့ အခုစရေးပါမယ်၊ Start>Run ကိုသွားလိုက်ပါ၊ shortcut အနေနဲ့ windows key+r ကိုနှိပ်လို့ရပါတယ်၊ run box ပေါ်လာရင်တော့ Notepad လို့ ရိုက်လိုက်ပါ၊ ပြီးရင် Enter နှိပ်ပါ၊ Notepad ပေါ်လာပါပြီ၊ HTML ရေးမှာဖြစ်တဲ့အတွက် အစ tag ကို <html> နဲ့ဖွင့်ပေးရပါမယ်၊ အရင်ပို့စ် မှာတုန်းက tag တွေဟာ များသောအားဖြင့် အတွဲလိုက် လာတတ်ကြောင်းကို ပြောပြီးပါပြီ။ အဲဒီအတွက် အပိတ် tag အဖြစ် </html> ကိုသုံးရပါမယ်၊ <html>????</html>ပေါ့ဗျာ question mark တွေနေရာမှာ content တွေ ထည့်ရေးရပါမယ်၊ အဖွင့် tag ကို “/” (slash) ထည့်ပေးခြင်းအားဖြင့် အပိတ် tag ဖြစ်သွားပါတယ်။
ကဲ … ဖွင့်ထားတဲ့ notepad ထဲမှာ အောက်ကလို ရေးကြည့်လိုက်ပါဦး။
<html> <body> <p>This is Paragraph</p> </body> </html>
ရေးပြီးပြီဆိုရင်တော့ file- >save as ကိုရွေးလိုက်ပါ။ နေရာတစ်နေရာရွေးပြီးတော့ သိမ်းလိုက်ပါ၊ ကျွန်တော်ကတော့ Desktop မှာပဲ သိမ်းဖြစ်ပါတယ်၊ ပြန်ရှာရတာ မြန်တာပေါ့ဗျာ၊ file name မှာ ကျွန်တော်တို့က စမ်းရေးကြည့်တာ ဖြစ်တဲ့အတွက် test လို့ ပေးလိုက်ပါ၊ file extension က .htm ဆိုတော့ test.htm လို့ပေးရမယ်ပေါ့၊ save as type ဆိုတဲ့နေရာမှာတော့ All Files ကို ရွေးပေးပါ၊ ပြီးရင်တော့ Save ကိုနှိပ်လိုက်ပါ၊ Desktop ပေါ်မှာ test.htm ဆိုပြီးတော့ ဖိုင်တစ်ခု ရလာပါမယ်၊ အင်တာနက် Browser တစ်ခုခု (ဥပမာ … Mozilla, Internet Explorer ) တို့ နဲ့ ပွင့်လာပါမယ်၊ ဖွင့်လိုက်ရင် ပေါ်မယ့်စာသားကတော့ this is Paragraph ဆိုတာလေးပါ၊ ဒါပေမယ့် Web Page တစ်ခု အနေနဲ့ ပေါ်မှာဖြစ်ပါတယ် …
အခုရေးလိုက်တဲ့ Code မှာ <body> နဲ့ </body> ကြားမှာ ပါတာက အဓိကိုယ်ထည်ပါ။ <p> နဲ့ </p> ကြားမှာတော့ စာပိုဒ်(Paragraph) တွေဖြစ်ပါတယ်။ အောက်က ကုဒ်လေးတွေကိုလည်း ကြိုးစားကြည့်ပါဦး။
<html> <body> <h1>About HTML</h1> <p>HTML, which stands for Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms. It is written in the form of HTML elements consisting of "tags" surrounded by angle brackets within the web page content. It can include or can load scripts in languages such as JavaScript which affect the behavior of HTML processors like Web browsers; and Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both HTML and CSS standards, encourages the use of CSS over explicit presentational markup.</p> </body> </html>
အခုရေးတဲ့ Code မှာ <h1> နဲ့ </h1> အသစ်ပါလာပါတယ်၊ အဲတော့ အဲဒါကဘာလဲပေါ့၊ header ကို ကိုယ်စားပြုတာပါ၊ ခေါင်းစဉ်တွေ ရေးရာမှာ သုံးပါတယ်၊ ဖောင့်အရွယ် ကြီးသွားပါတယ်၊ header အဖြစ် h1 to h6 ထိ ရှိပါတယ်၊ h1 က font size အကြီးဆုံးပါ၊ ဒါဆို h6 က အငယ်ဆုံးပေါ့၊ header နဲ့ ပတ်သတ်လို့ တစ်ခုသိထားရမှာက header တွေကို font size ကြီးဖို့အတွက် မသုံးရပါဘူး၊ ဘာဖြစ်လို့လည်းဆိုတော့ Search Engine တွေက header တွေနဲ့ တိုက်ပြီး Websites တွေကို ရှာကြလို့ပါ၊ နောက်ပြီးတော့ အခုကုဒ်မှာ စာပိုဒ်ရိုက်တာမှာ စာတန်းတွေက အရှည်ကြီးဖြစ်ပြီးတော့ screen အဆုံးရောက်မှ အောက် တစ်ကြောင်း ဆင်းပါတယ်၊ ဒါကို ကိုယ့်စိတ်ကြိုက် နေရာမှာ အောက်တစ်ကြောင်း ဆင်ခိုင်းလို့ ရပါတယ်။
ဆက်ပါဦးမယ် …
Facebook comments:
4 Responses
Leave a comment
About the Author
လူခါး
Graduated with Bachelor of Electrical Engineering. Currently working as a web designer. For more detail, please visit https://plus.google.com/100200594914313828932/about (my Google plus )
Ads
hi,bro!i want copy about html!plx allow me!u may be happy!
Thanks for your interesting our site. We appreciate your work to post our topics in your blog. We would like to request you to link back to us. Just highlight http://www.myanmartutorials.com … Thanks!
Notepad နဲ႕ရေးတာမှ Pro ဗျ။ ဘာအကူမှမလိုဘူးဆိုတော့။ အဟဲ
ပြောင်းပြန်ဖြစ်နေပြီဗျ … Pro ဆိုတာ professional(အသက်မွေးဝမ်းကြောင်း) ရဲ့အတိုကောက်လေ အသက်မွေးဝမ်းကျောင်းနေတဲ့လူတစ်ယောက်အတွက် မြန်မြန်ပြီးဖို့က အရေးကြီးတယ်လေ၊ notepad နဲ့သာရေးနေရင် website တစ်ခုကို ခြောက်လလောက်ရေးနေရမယ် … အဲဒီအတွေးနဲ့တော့ တွက်ခြေမကိုက်သေးဘူးဗျ ..