HTML5 နဲ့ CSS3 သုံးပြီး Site တစ်ခုဆောက်မယ်

ThihaJanuary 7, 2011HTML & CSS

အခန်း (၁)

ကျွန်တော်တို့ရဲ့ ရှေ့မဆက်တာကြာပြီ ဖြစ်တဲ့ HTML နဲ့ CSS ဖက်ကို လှည့်ကြရအောင်။ ဒီတစ်ခါ ရွေးချယ်ထားတာတော့ HTML5 နဲ့ CSS3 နည်း ပညာကို အကောင်းဆုံး အသုံးချထားတဲ့ Tutorials တစ်ခုဖြစ်တဲ့ Design Instruct က ဟာကို နမူနာယူပြီး ရေးလိုက်ရပါတယ်။ သူကတော့ အသေးစိတ် မရေးထားပေမယ့် ကျွန်တော်ကတော့ အသေးစိတ် ရေးသွားပါတယ်။ အဲဒီ Tutorial မှာတော့ PSD ဆွဲတာပါ ပါတယ်။ ကျွန်တော် ကတော့ အဲဒီအပိုင်းကို ကျော်သွားမှာပါ။ တစ်ခါတည်း Website ကို တန်းရေးသွားမှာ ဖြစ်ပါတယ်။

HTML5 Vs HTML4

HTML5 ထွက်လာတော့ ဘာတွေ ပိုကောင်းလာလဲ။ ပြောရရင် အများကြီးပါပဲ။ အရင်ဆုံး သိသာ ထင်ရှားတဲ့ အပြောင်းအလဲ ကတော့ <doctype> ပါပဲ။ (ကျွန်တော် အကြိုက်ဆုံး အပြောင်းအလဲလည်း ဖြစ်ပါတယ်။ ဘာဖြစ်လို့ ကြိုက်ရတာလဲ ဆိုရင် မှတ်ရလွယ်လို့ပါ) အောက်မှာ ပြထားတဲ့ နမူနာကို ကြည့်လိုက်ပါ။

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

အပေါ်မှာ ပြထားတာက အခု HTML5 Version ပါ။ ကဲဒီတော့ အရင်က ရေးခဲ့ရတဲ့ ပုံစံကို လေ့လာကြည့်ရအောင်

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

အဲဒီ နှစ်ခုကို ယှဉ်ကြည့်ရင် ဘယ်ဟာက မှတ်ရလွယ်တယ်ဆိုတာ သိသာပါတယ်။ အဲဒီ အပြောင်းအလဲတွေ အပြင် တစ်ခြား အပြောင်းအလဲတွေ အများကြီး ရှိပါသေးတယ်။ အရင်က <div id = “header”> လို့ သုံးခဲ့ကြတာတွေကို <header> <footer> <aside> <section> စသည်ဖြင့် Tag အသစ်တွေ တိုးထားပါတယ်။ ကျွန်တော် တည်းဆောက့်မယ့် နမူနာပုံစံကတော့

အပေါ်မှာ ပြထားတဲ့ ဆိုက်မျိုးပါ။ ကျွန်တော့် သမီးလေးအတွက် Website ပေါ့။ တစ်ခုတော့ ရှိပါတယ်။ HTML5 နဲ့ CSS3 ကို သုံးမှာ ဖြစ်တဲ့ အတွက် IE8 အစရှိတဲ့ Web Browser တွေရယ်၊ ဒိတ်အောက်သွားတဲ့ အခြား Browser တွေမှာ အဆင်ပြေမှာ မဟုတ်ပါဘူး။

Demo Now

နမူနာကြည့်ချင်တယ်ဆိုရင် အပေါ်မှာ ပေးထားတဲ့ Demo Now ဆိုတဲ့ Button လေးကို ကလစ် ခေါက်လိုပါ။ အရင်ဆုံး ဒီ Tutorials ကို လုပ်တဲ့အခါ လိုအပ်မယ့် Requirements တွေကို ပြောချင်ပါတယ်။ ပထမ ကျွန်တော်အရင်က ညွှန်းခဲ့ဖူးတဲ့ HTML & CSS လေ့လာနည်းများ ဆိုတဲ့ Article မှာပါတဲ့ Tutorials တွေကို လုပ်ဖူးရပါမယ်။ နောက်တစ်ခုကတော့ 960.gs ရဲ့ Grid System အကြောင်းပါ။ လောလောဆယ် မသိသေးရင်တော့လည်း သိပ်တော့ ပြဿနာ မရှိပါဘူး။ ကျွန်တော် အတတ်နိုင်ဆုံး နားလည်အောင် ရေးပေးသွာမှာ ဖြစ်ပြီး နောက်ထပ် Tutorial တစ်ခု အနေနဲ့ 960.gs အကြောင်းကို ထပ်ရေးပေးမှာ ဖြစ်ပါတယ်။

HTML5 ၏ ထူးခြားချက်များ

Character Encoding

အရင်က Character Encoding နဲ့ တုန်းက ရေးမယ်ဆိုရင် အောက်မှာ ရေးထားတဲ့ ပုံစံမျိုးရေးရပါမယ်။ ဒီနေရာမှာ Character Encoding ဆိုတဲ့ အကြောင်းကို အရင်ရှင်းပြလိုပါတယ်။ Character Encoding ဆိုတာ စာလုံးတွေ၊ ဂဏန်းတွေ၊ အမှတ်အသားတွေ စတဲ့ ကွန်ပျတာမှာ ပါတဲ့ စာလုံးတွေ အများကြီးရှိပါတယ်။ အင်္ဂလိပ်စာလုံးတွေ အပြင် တစ်ခြား ဘာသာစကားတွေရဲ့ စာလုံးတွေလည်း အများကြီး ပါပါတယ်။ အဲဒီလို စာလုံးတွေ အားလုံးအတွက် အမှတ်အသား သတ်မှတ်ချက် code တွေ သတ်မှတ်ပေးထားပါတယ်။ အဲဒီလိုသတ်မှတ်ချက်တွေ အပေါ်မှာ မူတည်ပြီး ကွန်ပျူတာက ပြန်လည် ပုံဖော်ယူရပါတယ်။ ဘယ် encoding စနစ်ကို သုံးထားတယ်ဆိုတာ Browser ကို ပြောပြလိုက်မှသာ Browser က စာလုံးတွေကို မှန်ကန်စွာ ပုံဖော်နိုင်ပါတယ်။ အင်္ဂလိပ်ဘာစာ စကားအတွက် ဘယ်လို encoding နဲ့ မဆို အဆင်ပြေပေမယ့် မြန်မာစာ ယူနီကုတ်လို စာတွေအတွက် Encoding ကတော့ UTF-8 လို့ခေါ်တဲ့ Encoding ပါပဲ။ အရင်တုန်းက ရေးခဲ့ကြတဲ့ ပုံစံကို လေ့လာကြည့်မယ် ဆိုရင်

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

ခု HTML5 မှာတော့ လွယ်သွားပါပြီ။

<meta charset="UTF-8">

အဲဒီလို ရေးလိုက်တာနဲ့ ကိစ္စပြတ်သွားပါပြီ။

MathML နဲ့ SVG

MathML ဆိုတာ Mathematical Markup Language ကိုခေါ်တာ ဖြစ်ပြီး MathML 3.0 မှာ HTML5 ရဲ့ Native အနေနဲ့ ပါဝင်လာခဲ့တာ ဖြစ်ပါတယ်။ နားလည်အောင် ပြောရရင်တော့ ပုံသဏ္ဏန်တွေ ဖြစ်တဲ့ စက်ဝိုင်းတို့ တြိဂံတို့ စတုဂံတို့ စတာတွေကို ဆွဲတဲ့နေရာမှာ XML ဆိုတဲ့ Language ကို အခြေခံပြီး ခိုင်းစေရေးဆွဲတာပါ။ AutoCAD သုံးတဲ့သူတွေကတော့ ကောင်းကောင်း သိနိုင်ပါလိမ့်မယ်။

<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>

အပေါ်မှာ ရေးထားတဲ့ code ကို html အနေနဲ့ စမ်းကြည့်ပါ။

အသစ်တိုးလာသော Elements များ

အသစ်တိုးလာတာတွေကတော့ အများကြီးပါပဲ။ ဒါပေမယ့် ဒီ Tutorials မှာ သုံးမယ့် Element အသစ်တွေကိုပဲ အဓိကထား ပြောချင်ပါတယ်။

section – section ဆိုတာကို နားလည်အောင် အကန့်တစ်ကန့်ပါပဲ။ Web Page ဆိုရင်လည်း Heading တွေပါမယ်။ စာတွေ ပါမယ်။ ပုံတွေ ပါမယ် စသည်ဖြင့် သီးသန့် သက်ဆိုင်ရာတွေကို ကန့်သတ်လိုက်တာပါပဲ။ အဲဒီလိုအပြင် Web Application မှာ ဆိုရင်လည်း သီးသန့် အုပ်စုတစ်စုပေါ့။ အရင်ကတော့ DIV တွေ အနေနဲ့ သုံးခဲ့ကြပါတယ်။

article – <article> ဆိုတဲ့ tag ကတော့ သတင်းစာတစ်ခုက Article ကို ပြေးမြင်လို့ရသလို၊ ခု ကျွန်တော်ရေးနေတာလဲ article ပါပဲ။ blog entry တစ်ခုကလည်း article ပါပဲ။ သတ်သတ်မှတ်မှတ် ကန့်သတ်ပေးလိုက်တဲ့ သဘောပေါ့ဗျာ။

header – <header> ဆိုတဲ့ tag ကတော့ အရင်တုန်းက သုံးခဲ့တဲ့ <div id=”header”> ဆိုတာကို မှတ်မိကြလိမ့်မယ် ထင်ပါတယ်။ အဲဒီ သဘောနဲ့ အတူတူပါပဲ။ ဘယ် Website မဆို Header Section ပါနေတဲ့အတွက် div အနေနဲ့ သုံးနေမယ့် အစား တစ်ခါတည်း Tag အနေနဲ့ <header> ဆိုပြီး သုံးလိုက်တာပါ။

nav – nav ဆိုတာကတော့ Website Navigation တွေအတွက် အဓိက ရည်ရွယ်ပါတယ်။

figure – ဒီ <figure> ဆိုတဲ့ Tag က XML နဲ့ တော်တော့်ကို ဆင်သွားပါတယ်။ နမူနာကိုသာ ကြည့်လိုက်ပါဗျာ။ အဓိကသုံးတာကတော့ ပုံတွေအတွက်ပါ။ ဒါပေမယ့် ဗီဒီယိုအတွက်လည်း သုံးနိုင်ပါတယ်။

<figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>

အထဲမှာ ဆိုတဲ့ tag တစ်ခု ပါလာပါတယ်။ အဓိကကတော့ အဲဒီပုံနဲ့ သက်ဆိုင်တဲ့ စာသာတွေရေးဖို့ အတွက်ပါ။

input – input နဲ့ ပတ်သက်ပြီး ပါလာတာတွေကတော့ အများကြီးပါပဲ။ ဒါပေမယ့် ဒီ tutorials မှာတော့ တစ်မျိုးပဲ သုံးသွားပါတယ်။ input email ပါ။ input နဲ့ ပတ်သက်ပြီး ကျွန်တော် နောက်ထပ် ဆောင်းပါးရေးပါဦးမယ်။ (ကျွန်တော်လည်း အကြွေးတွေ များနေပြီ)

HTML4 နဲ့ HTML5 မှာ ပြောင်းလဲမှုတွေ ထပ်တိုးလာတာတွေ အများကြီး ဖြစ်ပေါ်လာခဲ့ပါတယ်။ အဲဒီအပြင် Web Application ကိုလည်း တစ်ခေတ် ဆန်းသစ်စေခဲ့ပါတယ်။ အဲဒီအပြင် နောက်ပိုင်း Browser တော်တော် များများကလည်း HTML5 Support ကောင်းကောင်း ပေးလာပါတယ်။ ဒီနေရာမှာ သွားကြည့်မယ်ဆိုရင် ဘယ် Browser တွေက ဘယ်လောက် အတိုင်းအတာ အထိ အထောက်အပံ့ပေးနိုင် နေပြီဆိုတာ တွေ့နိုင်ပါတယ်။

အခန်း (၂) ဆက်လက်ရေးသားနေဆဲ …

Facebook comments:

13 Responses

stringlive says:

January 7, 2011 at 6:58 PM

ကိုသီဟ ခင်ဗျာ

အခုလို စေတနာ ထားပြီး နည်းပညာ အသစ်တွေ အပေါ် အချိန်နဲ့ တပြေးညီ မျှဝေနေတဲ့ အတွက် အားလုံးကိုယ်စား ကျေးဇူးတင်ပါတယ်။

အစ်ကို အခုထက်ပိုတဲ့ အောင်မြင်မှုများကို လှမ်းကို လှမ်းကိုင်နိုင်ပါစေလို့ ဆုတောင်း ပေးလိုက်ပါတယ်။

Reply
- Thiha says:
  
  January 7, 2011 at 7:19 PM
  
  ပေးတဲ့ဆုနဲ့ ပြည့်ပါစေဗျာ၊ ကျွန်တော် အခန်းတွေခွဲပြီး ဆက်တိုက်ရေးသွားပါ့မယ်
  
  Reply
kyawminlwin says:

January 7, 2011 at 8:03 PM

ကျေးဇူးပါပဲခင်ဗျား…… ကိုသီဟတို့ကတော့ ပါရမီရှင်တွေပဲဗျာ….. အသစ်ထွက်လာတာနဲ့ ချက်ချင်းကို တတ်မြောက်သွားတော့တာပါပဲ ကျွန်တော်တို့ကတော့ မနည်းကိုလေ့လာယူရတယ်…… ဗျို့

Reply
- Thiha says:
  
  January 7, 2011 at 8:14 PM
  
  အဲဒီလိုလည်း မဟုတ်ပါဘူးခင်ဗျာ၊ လေ့လာတဲ့ နေရာတွေမှာ အခက်အခဲရှိရင် ကျွန်တော့်ကို ပြောပါ ကျွန်တော် ကူညီပေးပါ့မယ်
  
  Reply
winzinnine says:

January 8, 2011 at 7:43 AM

အားပေးနေပါတယ် ကိုသီဟ။

Reply
winzinnine says:

January 8, 2011 at 8:01 AM

တစ်ခုမေးချင်တာလေး ရှိတယ် ခင်ဗျာ။ အရင်တင်ထားတဲ့ ပို့စ်အဟောင်းက စာတွေကို unicode font ဘယ်လိုပြောင်းလိုက်သလဲ။ ဒါပေမဲ့ သိပ်တော့ အဆင်မပြေသေးဘူးနော်။ unicode font အသုံးပြုရတာ။ http://www.myanmartutorials.com/mm-tutorials/html-css-mm-tutorials/website-%e1%80%b1%e1%80%9b%e1%80%b8%e1%81%be%e1%80%80%e1%80%99%e1%80%9a%e1%80%b9-%e1%81%85-%e1%80%b1%e1%80%94%e1%80%ac%e1%80%80%e1%80%b9%e1%80%86%e1%80%80%e1%80%b9%e1%80%90%e1%80%bc%e1%80%b2/ အဲဒီ post တွေမှာ ကျွန်တော် font မမြင်ရသေးဘူး။ နောက်ပိုင်း post တွေတော်တော်များများတော့ မြင်နေရပါတယ်။ ကျွန်တော်လည်း unicode font စမ်းသုံးနေဆဲပဲ။ နောက်ထပ်မေးချင်တာလေးက အခု ကျွန်တော်ကိုယ်ပိုင် ကွန်ပျူတာမှာ unicode font သုံးချင်တယ်။ ဥပမာ ကွန်ပျူတာ အိုင်ကွန် နာမည်တွေကအစ ယူနီကုဒ်ဖောင့်နဲ့အသုံးချချင်တယ်။ အဆင်ပြေပါ့မလား။ နေရာတော်တော်များများမှာ zawgyi ကနေရာယူထားတော့ ဇော်ဂျီဖောင့်တွေကိုတော့ မမြင်နိုင်တော့ဘူး။ ကျွန်တော် font နေရာမှာ myanmar 3 ထားပြီး rename တွေရေးကြည့်သေးတယ်။ သိပ်အဆင်မပြေဘူး။ ကိုသီဟတို့များ အသုံးချနေပြီလား မသိဘူး။ အဲဒါလေးတွေ ဖြေကြားပေးပါဦး။

Reply
- Thiha says:
  
  January 8, 2011 at 4:28 PM
  
  အဲဒီလို သုံးလို့ရတာတော့ ကျွန်တော် မကြားဖူးသေးဘူးခင်ဗျ၊ တစ်ချို့ပို့စ်တွေကို ကျွန်တော် ယူနီကုတ် စနစ်ကူးပြောင်းနေဆဲပါ အဲဒါကြောင့် မမြင်ရသေးတာပါ။ ကျွန်တော်ကတော့ တစ်ပုဒ်ခြင်းစီ ပြန်ပြောင်းပါတယ်။ စာလုံးပေါင်းအမှားတွေကို ပြန်စစ်ပြီးသား ဖြစ်သွားအောင်ပါ။ ကျေးဇူးတင်ပါတယ်ခင်ဗျ
  
  Reply
Mohammed Aung says:

January 8, 2011 at 10:31 AM

ကျေးဇူးတင်ပါတယ်။

ကြုံတုန်းမိမိ ကြည့်ရှုရာလေးကို html5 score စစ်နိုင်ပါတယ်။

http://html5test.com

Reply
- Thiha says:
  
  January 8, 2011 at 4:29 PM
  
  ကျေးဇူးတင်ပါတယ်ခင်ဗျာ
  
  Reply
Aung Aung says:

January 8, 2011 at 8:51 PM

ဟိုမရောက် ဒီမရောက် ဖြစ်နေတာလေး အခုမှ အစက ပြန်လေ့လာရမယ်။
တစ်စုတစ်စည်းလေး ပြန်လုပ်ပေးထားတာ..
အသစ်လေးတွေကို မိတ်ဆက်ပေးတာ..
ကျေးဇူးတင်ပါတယ်ဗျာ. . .

Reply
Arkar says:

January 9, 2011 at 5:20 AM

Hi! I am waiting for ur HTML5 (Chapter -2)
I am learning HTML with u.
thanks
and
I like u…..!

Reply
- Thiha says:
  
  January 9, 2011 at 5:24 AM
  
  That’s OK, I will continue chapter today. Thanks!
  
  Reply
HTML5 နဲ့ CSS3 သုံးပြီး Site တစ်ခုဆောက်မယ် (၃) | Myanmar Tutorials says:

January 13, 2011 at 12:28 PM

[...] HTML5 နဲ့ CSS3 သုံးပြီး Site တစ်ခုဆောက်မယ် အပိ… [...]

Reply

About the Author

Thiha

စာမရေးရ မနေနိုင်သူ၊ ဒီဇိုင်းဆွဲခြင်း၊ ပရိုဂရမ်ရေးခြင်း၊ အင်တာနက်တွင် သင်ယူခြင်းတို့ အမြဲမပြတ် ပြုလုပ်နေသူ၊ နည်းပညာနှင့် ပတ်သက်လျှင် အကုန် စိတ်ဝင်စားသူ၊ ကလေး တစ်ယောက် အဖေ၊ နည်းပညာသမားအပေါ် နားလည်မှု အပြည့်ပေးနိုင်သော ဇနီးတစ်ယောက်၏ ခင်ပွန်း၊ Myanmar Links မှာ နည်းပညာ အကြောင်း သောင်းပြောင်းထွေလာ သင်တဲ့ဆရာ ... လောလောဆယ် လေ့လာနေတာက iOS