HTML5 နဲ့ CSS3 သုံးပြီး Website ဆောက်ကြမယ် (၁)
HTML5 နဲ့ CSS3 ကိုသုံးပြီး Website တစ်ခု ဆောက်ကြည့်ရအောင်။ ဒီ Tutorial ကို လုပ်ကြည့်ဖို့အတွက် ဒါတွေ လိုပါမယ်။
- Mozilla Firefox 3+, Google Chrome, Apple Safari 4+ or Opera 10+
- Notepad ++ or other text editor
ခု ရေးမယ့် Tutorials ကတော့ အရင် Website ရေးကြမယ်ရဲ့ အဆက်လို့ ဆိုနိုင်ပါတယ်။ ကဲ စလိုက်ကြရအောင် Notepad++ ကိုဖွင့်ပါ။
Notepad
ဒီနေရာမှာ တစ်ခု သတိထားကြည့်ပါ။ အရင်က doctype ဆိုရင်
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
အပေါ်မှာ ပြထားတဲ့ အတိုင်း ရေးခဲ့ကြပေမယ့် အခု HTML5 မှာတော့ အတော်လေးကို လွယ်ကူသွားတာ တွေ့ရပါလိမ့်မယ်။
<!DOCTYPE html>
ဆိုရင် ပြည့်စုံပါပြီ။ Code အပြည့်အစုံကတော့ ဒီမှာပါ။ ကိုယ်စက်ထဲက Notepad++ မှာ ကူးထည့်လိုက်ပါ။
<!doctype html>
<html>
<head>
<title>HTML From Scratch</title>
</head>
<body>
<!-- content goes here -->
</body>
</html>
ကို ဖျက်လိုက်ပြီး Header အပိုင်းကို ဆက်ရအောင်။ ကိုဖျက်ပြီး HTML5 ရဲ့ Feature အသစ်ဖြစ်တဲ့ header tag ကို ထည့်ပါမယ်။ ဒီနေရာမှာ တစ်ခု သတိထားဖို့ လိုတာက <header> tag နဲ့ <head> tag မတူပါဘူး။ <header> tag ထဲမှာ h1 ကနေ h6 အထိ သုံးလို့ရပါတယ်။ အောက်မှာ ရေးထားတဲ့အတိုင်း စမ်းထည့်ကြည့်ပါ။
<!doctype html>
<html>
<head>
<title>HTML From Scratch</title>
</head>
<body>
<header>
<h1>HTML From Scratch</h1>
<h2>HTML From Scratch</h2>
<h3>HTML From Scratch</h3>
<h4>HTML From Scratch</h4>
<h5>HTML From Scratch</h5>
<h6>HTML From Scratch</h6>
</header>
</body>
</html>
Result အနေနဲ့ အောက်မှာ ပြထားတဲ့အတိုင်း ထွက်လာပါလိမ့်မယ်။
HEADER TEST
အဲဒီလို Header တွေကို စမ်းသပ်ပြီးရင် <h1> ကိုပဲ ချန်ထားပြီး ကျန်တာတွေကို ဖျက်လိုက်ပါ။ ရှေ့ဆက်ပြီး Navigation တွေ ထည့်ပါမယ်။ <header> … </header> section ရဲ့ အောက်မှာ ဆက်ရေးမှာ ဖြစ်ပါတယ်။ <nav> … </nav> ဆိုတဲ့ HTML5 Feature အသစ်ကို သုံးမှာပါ။ ရေးရမယ့် Code ကတော့
<nav> <ul> <li> Home </li> <li> Myanmar Tutorials </li> <li> Google </li> </ul> </nav>
ထွက်လာမယ့် Result ကတော့
Nav
လောလောဆယ် nav မှာ List တွေကို Link မတတ်ရသေးပါဘူး။ ဒါကြောင့် Link တွေ လိုက်ထည့်ပါမယ်။ နဂိုရေးထားတဲ့ nav section မှာပဲ ပြန်ပြင်လို့ ရပါတယ်။
<nav> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="http://www.myanmartutorials.com">Myanmar Tutorials</a> </li> <li> <a href="http://www.google.com">Google</a> </li> </ul> </nav>
ထွက်လာတဲ့ Result ကတော့
Links
ကဲဒီ တစ်ခါ nav section ပြီးပြီဆိုတော့ Section အပိုင်းကို ဆက်ရမှာပါ။ ဒါလည်း HTML5 ရဲ့ Feature အသစ်ပါပဲ။ <section> … </section> အတွင်းမှာ ရေးရပါတယ်။ <nav> … </nav> ရဲ့ နောက်မှာ အောက်က အတိုင်း ဆက်ရေးပါ။
<section> <p>This is the main content for my site. <br /> Myanmar Tutorials offer the following:</p> <p>Toturals, Articles, Interviews, Tips and Tricks and much more. welcome to Myanmar Tutorials.</p> </section>
Result ကို ကြည့်မယ်ဆိုရင်
Section
ဒီတစ်ခါတော့ ဓာတ်ပုံတစ်ပုံထည့်ပါမယ်။ အောက်မှာ ပေးထားတဲ့ ပုံလေးကို Download ချပါ။ index.html ရှိတဲ့ Folder မှာ images ဆိုတဲ့ Folder တစ်ခု ဆောက်လိုက်ပါ။ ပြီရင် Download ချထားတဲ့ Image ကို ထည့်ပါ။
ပြီးရင် </section> ရှေ့မှာ ပုံတစ်ပုံထည့်ရအောင်
<img src="images/html5-image.jpg" alt="Myanmar Tutorials" />
Result ကို ကြည့်မယ်ဆိုရင်
Image
ဒီတစ်ခါ ဆက်သွားမယ့် အပိုင်းကတော့ sidebar အပိုင်းဖြစ်ပါတယ်။ <aside> …. </aside> ဆိုတဲ့ HTML5 Features အသစ်ကို သုံးမှာပါ။ ဒီအပိုင်းကတော့ <section> … </section> ရဲ့ နောက်မှာ ဆက်ရေးရမှာပါ။ ရေးရမယ့် Code ကတော့
<aside> <h3>Sidebar</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Sed do eiusmod tempor incididunt.</li> <li> Ut enim ad minim veniam.</li> </ul> </aside>
Result ကတော့
Sidebar
header, section, aside တွေပြီးတော့ နောက်ဆုံး အပိုင်းအနေဲ့ footer ဆိုတာကို သွားပါမယ်။ ဒါလည်း HTML5 ရဲ့ Feature အသစ်ပဲ ဖြစ်ပါတယ်။ <footer> … </footer> ဆိုတဲ့ Tag နဲ့ သုံးပါတယ်။ <aside> … </aside> ရဲ့ နောက်မှာ ဆက်ရေးရမှာပါ။ ရေးရမယ့် code ကတော့
<footer> <p> Copyright © Myanmar Tutorials 2010. <br /> Let's collaborate with <a href="http://www.myanmartutorials.com">MyanmarTutorials</a>. </p> </footer>
Result ကတော့
Footer
ကဲ ဒီအပိုင်းကို ဒီမှာတင် ခဏရပ်ထားပါ့မယ်။ နောက်တစ်ပိုင်းကျရင်တော့ CSS နဲ့ ပေါင်းတော့မှာပါ။ လိုက်လုပ်ဖြစ်အောက် လုပ်ထားနော်ဗျာ … 
ရေးထားတဲ့ Coding အစအဆုံးကတော့
<!DOCTYPE html> <html> <head> <title>HTML From Scratch</title> </head> <body> <header> <h1>HTML From Scratch</h1> </header> <nav> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="http://www.myanmartutorials.com">Myanmar Tutorials</a> </li> <li> <a href="http://www.google.com">Google</a> </li> </ul> </nav> <section> <p>This is the main content for my site. <br /> Myanmar Tutorials offer the following:</p> <p>Tutorials, Articles, Interviews, Tips and Tricks and much more. welcome to Myanmar Tutorials.</p> <img src="images/html5-image.jpg" alt="Myanmar Tutorials" /> </section> <aside> <h3>Sidebar</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Sed do eiusmod tempor incididunt.</li> <li> Ut enim ad minim veniam.</li> </ul> </aside> <footer> <p> Copyright © Myanmar Tutorials 2010. <br /> Let's collaborate with <a href="http://www.myanmartutorials.com">MyanmarTutorials</a>. </p> </footer> </body> </html>
Facebook comments:
14 Responses
Leave a comment
About the Author
Thiha
စာမရေးရ မနေနိုင်သူ၊ ဒီဇိုင်းဆွဲခြင်း၊ ပရိုဂရမ်ရေးခြင်း၊ အင်တာနက်တွင် သင်ယူခြင်းတို့ အမြဲမပြတ် ပြုလုပ်နေသူ၊ နည်းပညာနှင့် ပတ်သက်လျှင် အကုန် စိတ်ဝင်စားသူ၊ ကလေး တစ်ယောက် အဖေ၊ နည်းပညာသမားအပေါ် နားလည်မှု အပြည့်ပေးနိုင်သော ဇနီးတစ်ယောက်၏ ခင်ပွန်း၊ Myanmar Links မှာ နည်းပညာ အကြောင်း သောင်းပြောင်းထွေလာ သင်တဲ့ဆရာ ... လောလောဆယ် လေ့လာနေတာက iOS
Ads
Browser နဲ့Notepad ရှိရင် လေ့လာလို့ရတယ်ဆိုလို့ HTML နဲ့ CSS အစချီတဲ့ Web Design ကိုလေ့လာလိုက်ပါတယ်။ HTML 3.2, 4.0, XTML, CSS 1, 2 ဖတ်လို့မဆုံးသေးဘူး … ခု HTML5, CSS3 … ဟူး … နောက်ဆုံးပေါ်တွေနောက်ကို မျက်ခြေမပြတ်အောင် လိုက်ရဦးမယ် … ဒါမှ … ဒါမှ …
HTML5 နဲ့ CSS3 ကတော့ တော်တော့်ကို မိုက်တယ်ဗျ။ ပိုပြီး နားလည်ရ လွယ်သွားတယ်။ Learning Curve လည်း အရင်လောက် မမြင့်တော့ပါဘူ။
ဟုတ်ကဲ့ခင်ဗျ။ ခုအပိုင်းကို ဒေါင်းသွားပြီး နောက်အပိုင်းတွေလည်း ဆက်လက်မျှော်လင့်နေပါကြောင်း။
အစ်ကို web design သင်တန်း တစ်ခုလောက် တက်ချင်လို့အခြေခံကနေ တက်ချင်တာပါ အဲဒါ ညီကို တချက်လောက် လမ်းညွှန်ပေးပါ ဒါမှမဟုတ်
ကိုသီဟ ကိုယ်တိုင်ရော သင်တန်း မဖွင့်ဘူးလားဟင် စာအုပ်တွေ ဖတ်ပါတယ် အသေးစိတ်လေး လေ့လာချင်လို့ပါ
ကူညီပေးပါနော်
ကိုသီဟကိုယ်တိုင်လဲ သင်တန်းဖွင့်ထားပါတယ်ဗျာ.. သူ့ဆီမှာသွားတက်ဗျ.. သင်တာ အရမ်းကောင်းတယ်..
ဒါပေမယ့်ဗျာ.. သင်တန်းဆိုတာက အချိန်က ရှိသေးတော့ အစ်ကိုပြောသလို အသေးစိတ်ထိရောက်အောင် ဘယ်သူမှ မသင်နိုင်ဘူးဗျ.. အဲလို အသေးစိတ်သိဖို့ကတော့ ကိုယ့်အားကိုယ်ကိုးပီး ဆက်လျှောက်ရတာပဲ.. တခြားသူတွေကိုလဲ မေးကြည့်ပါ….
If you want to know the basic course of web design, as i know, CREATIVE WEB STUDIO is good.
[...] ခုမှာ စဖတ်မယ့်သူတွေ အနေန HTML5 နဲ့ CSS3 သုံးပြီး Website ဆောက်ကြမယ် (၁)ဲ့ ကို ဖတ်ပြီး လိုက်လုပ်ထားမှ [...]
သင်တန်းကတော့ တက်ချင်တယ်ဗျ။ အခု ကိုသိဟ ရှင်းထားတာတောင် တော်တော်လေးကို ကောင်းတယ် နောက်တစ်ခု request လုပ်ချင်တာက အကုန်လုုံးပြီးယင်ဖြစ်ဖြစ် တစ်ခုချင်းစီအတွက်ပဲဖြစ်ဖြစ် pdf လေးနံ့ ပြန်ပေးယင်ကောင်းမယ်ထင်တယ်
ဟုတ်ကဲ့ဗျ … ကျွန်တော်တို့ အဲဒီအတွက် စီစဉ်နေပါတယ်ခင်ဗျ
good job
thank!
HTML5 နဲ့ CSS3 သုံးပြီး webpage ရေးတာဟာ ဘာများထူးခြားမှုရှိသလဲ ဆိုတာ တစ်ချက်လောက်ပြောပြပါလား
ခင်ဗျာ။
တစ်ချို့ code တွေကတော့ မပြောင်းလဲသလိုပဲ
ဘာကွာပါလဲ ခင်ဗျာ
ကွာတာတော့ အများကြီးပေါ့ဗျာ.. အခုအပိုင်းမှာက Structural tag တွေပဲ ပါသေးလို့ သိပ်မသိသာသေးတာပါ။ ဒါတောင်မှာ မြင်တတ်ရင် အရင်ထက် အများကြီး ပိုကောင်းသွားတာ သိသာမှာပါ.. အရင်ထဲက ဆိုက်တွေ ရေးနေကျလူ.. SEO အကြောင်းနားလည်တဲ့သူဆို ဒါတွေ သိပါတယ်… ဥပမာပေးရရင်.. အရင်ကလဲ ကျွန်တော်တို့တွေ webpage တွေကို div တွေနဲ့ အပိုင်းတွေပိုင်းရပါတယ်။ webpage တစ်ခုမှာ အများအားဖြင့် header, navigation, main content, sidebar, footer ဆိုပီး ရှိတတ်ကြပါတယ်.. အဲဒါကို div id=”header”, div id=”nav” ဆိုပီး ခွဲခဲ့ရပါတယ်.. id name ကို ကိုယ်ကြိုက်သလိုပေးလို့ရနေပါတယ်… nav လို့ ပေးတဲ့လူရှိသလို navigation လို့ပေးတဲ့လူလဲ ရှိနိုင်ပါတယ်… အင်္ဂလိပ်မဟုတ်တဲ့ language တွေနဲ့ ပေးတာလဲ ရှိနိုင်ပါတယ်.. အဲတော့ စံ မဖြစ်တော့ဖူးပေါ့ဗျာ… HTML5 မှာတော့ အဲဒီအတွက် header, nav, footer စတဲ့ tag အသစ်တွေနဲ့ webpage တစ်ခုရဲ့ အပိုင်းတွေကို စံ စနစ်တစ်ခုနဲ့ တညီတညာထဲပေးလို့ရပါပီ.. အဲဒီမှာ ဘာပိုကောင်းသွားလဲဆိုရင်.. ကျနော်တို့ webpage တစ်ခုကို အမြင်မှာတော့ ဒါဟာ header အပိုင်းလား၊ footer အပိုင်းလားဆိုတာ ရှင်းပါတယ်.. ဒါပေမယ့်… div id=”header” လို့ဆိုရင် computer (browser), search crawler တွေက ဒါဟာ header ဖြစ်တယ်၊ ဒါက footer ဖြစ်တယ်လို့ မသိပါဖူး.. HTML5 မှာတော့ header tag ထဲမှာ ရှိတဲ့ content တွေကို ဒါတွေဟာ header အပိုင်းလို့ သိသွားပါပီ.. အဲဒါတွေ ပိုကောင်းလာပါတယ်.. စနစ်တကျ ပိုဖြစ်လာပါတယ်…
ကျွန်တော်တို့တွေ computer language တွေကို လေ့လာရာမှာ ကိုယ့်အမြင်ကို ဦးစားပေးလို့မရပါဖူး.. computer နားလည်အောင် စနစ်တကျရေးပေးရပါတယ်.. ဥပမာ- heading တစ်ခုဆိုရင် font size ကြီးပေး၊ bold ထည့်ပေးလိုက်ရုံနဲ့ အမြင်မှာတော့ ဒါဟာ heading ဆိုတာသိသာပါတယ်.. computer တော့ ဒါဟာ font size ကြီးထားပီး bold တင်ထားတဲ့ စာသားလို့ပဲသိပါမယ်… heading အတွက် သတ်မှတ်ပေးထားတဲ့ h1 to h6 tag တွေထဲ ထည့်ရေးမှသာ heading မှန်းသိပါတယ်..
ကဲ.. comment မှာ ဖြစ်နေလို့ ရှည်နေမှာလဲ စိုးရပါသေးတယ်… HTML5 နဲ့ ပတ်သက်ကမျှ ဆိုတဲ့ ပို့စ်မှာ နည်းနည်း သွားဖတ်ကြည့်ပါ.. အဲမှာ HTML5 အကြောင်းရေးထားတဲ့ ပို့စ်တွေကို ညွှန်းပေးထားပါတယ်..
CSS3 နဲ့ ပတ်သက်လို့ကတော့.. ပြောရရင် အရင်က rounded corner box, shadow, gradient, reflection တွေ လုပ်ချင်ရင် ပုံတွေ သုံးရပါတယ်.. CSS3 မှာ မလိုတော့ပါဖူး.. တကယ်လုပ်တတ်ရင် logo တွေတောင် ပုံနဲ့ မဟုတ်ဘဲ CSS3 နဲ့ ဆွဲလို့ရပါတယ်.. http://www.1stwebdesigner.com/resources/css-icons-logos/ မှာ pure CSS3 logo တွေ နမူနာကြည့်လို့ ရပါတယ်.. ဒီလောက်ဆို ဘာတွေ ကွာသွားလဲ သိလောက်ပါပီ…
how about html5 audio/video player is not working on the firefox တစ်ခုက်လောက်ပြောပြပေးပါဦး။
[...] HTML5 နဲ့ CSS3 သုံးၿပီး Website ေတြေလ့လာၾကမယ္ အပ… [...]