HTML5 အကြောင်း သိကောင်းစရာ (၂)
HTML5 ၏ Structure Element (ပေါင်းစပ်ပါဝင်နေသည့် အစိတ်အပိုင်းများ) ကို အသုံးချခြင်း
HTML5 နဲ့ ပတ်သက်တဲ့ Structure Element တွေကို လေ့လာကြည့်မယ်ဆိုရင် အသုံးအများဆုံး Div ID နဲ့ Class Name တွေကို Tag အနေနဲ့ သတ်မှတ်ပေးလိုက်တာ တွေ့ရမှာ ဖြစ်ပါတယ်။ လွန်ခဲ့တဲ့ ၂၀၀၄ ခုနှစ်ခန့်က တစ်ဘီလီယံခန့်ရှိတဲ့ Google ရဲ့ index တွေကို လေ့လာပြီး Website တွေမှာ ဘာတွေနဲ့ သုံးထားတယ်ဆိုတာ လေ့လာခဲ့ပါတယ်။ အဓိကကတော့ ဘယ်လို id နာမည်တွေနဲ့ သုံးထာတယ်၊ class တွေကိုရော နာမည်ဘယ်လို ပေးကြလဲ စသည်ဖြင့်ပေါ့။ အဲဒီ လေ့လာတွေ့ရှိချက်ကိုလည်း ဒီနေရာမှာ လေ့လာနိုင်ပါတယ်။ အဲဒီလိုပဲ Opera MAMA Crawler ကလည်း Google လို အလားတူပုံစံမျိုး ဆာဗေးတစ်ခု ပြုလုပ်ခဲ့ပါတယ်။ သူ့မှာလည်း အတူတူပါပဲ။ ဘယ်လို id တွေ class တွေကို ဘယ်လို နာမည်ပေးသလဲပေါ့။ သူတို့ နှစ်ခုရဲ့ လေ့လာတွေ့ရှိချက်တွေကို အောက်ပါအတိုင်း တွေ့ရပါတယ်။
အဲဒီတွေ့ရှိချက်တွေကို လေ့လာကြည့်မယ်ဆိုရင် footer ဆိုတာ ဆိုက်တိုင်းသုံးနေတဲ့ အတွက် ထိပ်ဆုံးမှာ ရောက်နေတာ တွေ့ရပါလိမ့်မယ်။ အဲဒီအပြင် header, nav စသည်ဖြင့် နေရာတိုင်း သုံးနေတာတွေလည်း တွေ့လာရပါတယ်။ အဲဒီလို တွေ့ရှိချက်တွေရယ် နောက်ထပ် ကောင်းနိုးရာရာတွေကို ပေါင်းစပ်ပြီး elements အသစ် 28 ခုကို HTML5 မှာ ထည့်သွင်းခဲ့ပါတယ်။ တကယ်တော့ Web Developer တွေ သုံးနေကြတွေကိုပဲ ထည့်သွင်းသတ်မှတ်လိုက်တယ်လို့ ဆိုနိုင်ပါတယ်။ HTML5 ရဲ့ element အသစ်တွေဟာ အတွေ့အကြုံတွေက မြစ်ဖျား ခံလာတယ်လို့ ဆိုရမှာ ဖြစ်ပါတယ်။
ကဲဒီတော့ ပြောနေကြာပါတယ်။ နစ်ခုယှဉ်ပြီး ရေးကြည့်လိုက်ရအောင်ဗျာ။ blog တစ်ခု ဆိုပါတော့။ HTML4 နဲ့ အရင်ရေးကြည့်ပါမယ်။
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 11 August 2008), see www.w3.org" />
<link rel="stylesheet" href="css_html4.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<title>HTML4</title>
</head>
<body>
<div id="header">
<h1>My Blog</h1>
</div>
<div id="sidebar">
<h2>Menu</h2>
<ul>
<li><a href="Last-week.html">Last Week</a></li>
<li><a href="archive.html">Archives</a></li>
</ul>
</div>
<div class="post">
<h2>Yesterday</h2>
<p>Today I drank coffee for breakfast. 14 hours later, I went to bed.</p>
</div>
<div class="post">
<h2>Tuesday</h2>
<p>Ran out of coffee, so had orange juice for breakfast. It was from concentrate.</p>
</div>
<div id="footer">
<p><small>This is copyright by Bruce Sharp. Contact me to negotiate the movie rights.</small></p>
</div>
</body>
</html>
HTML ပြီးတော့ CSS ဖိုင်လည်း ထည့်မှ အဆင်ပြေမှာပါ။ ဒီတော့ CSS လည်း ရေးလိုက်ရအောင်
#sidebar {float:left; width: 20%;}
.post {float:right; width: 79%;}
#footer {clear:both;}
အဲဒီ code ကို Run ကြည့်မယ်ဆိုရင်
အပေါ်မှာတုန်းက Google Index မှာရယ်၊ Opera MAMA Crawler ကတွေ့ ရှိချက်တွေကို လေ့လာကြည့်မယ်ဆိုရင် <header> တို့ <footer> တို့က အားလုံး တစ်ပြေးညီ အတူတူရေးကြပေမယ့် Navigation လို နေရာတွေမှာတော့ တစ်ချို့တွေက nav၊ တစ်ချို့တွေက menu တစ်ချို့တွေက navigation၊ တစ်ချို့တွေက links စသည်ဖြင့် အမျိုးမျိုးသုံးကြတာ တွေ့ရပါလိမ့်မယ်။ အကယ်၍များ နောက်ဆုံးပေါ် Browser က တိကျတဲ့နေရာတစ်ခုကို တန်းသွားချင်တာမျိုးဆို ဘယ်လိုလုပ်မလဲ။ အဲဒီလို နေရာတွေမှာကော စံသတ်မှတ်လိုက်လို့ မရဘူးလား။ စံသတ်မှတ်လိုက်ရင် အကျိုးများဖို့ရှိတယ် ဆိုပြီး HTML5 မှာ စံအနေနဲ့ ထည့်သွင်း သတ်မှတ်ခဲ့ပါတယ်။ အပေါ်မှာ HTML4 စတိုင်ရေးတုန်းက ကောင်းကောင်း ရေးလို့ရပါတယ်။ အဲဒီလို ရေးလို့ ရနေတာကို ဘာဖြစ်လို့ ထပ်လုပ်ရတာလဲဆိုတဲ့ အဖြေကလည်း အဲဒါပါပဲ။ အဓိအဲဒီလို သတ်မှတ်ခဲ့တဲ့အတွက် <header> <footer> <nav> အစရှိသည်တို့ ပါဝင်လာခဲ့ပါတယ်။ ကဲ HTML5 နဲ့ ထပ်ရေးကြည့်ရအောင်
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>HTML5</title>
<link rel="stylesheet" href="css_html5.css" type="text/css" media="screen" title="no title" charset="utf-8" />
</head>
<body>
<header>
<h1>My Blog</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="Last-week.html">Last Week</a></li>
<li><a href="archive.html">Archives</a></li>
</ul>
</nav>
<article>
<h2>Yesterday</h2>
<p>Today I drank coffee for breakfast. 14 hours later, I went to bed.</p>
</article>
<article>
<h2>Tuesday</h2>
<p>Ran out of coffee, so had orange juice for breakfast. It was from concentrate.</p>
</article>
<footer>
<p><small>This is copyright by Bruce Sharp. Contact me to negotiate the movie rights.</small></p>
</footer>
</body>
</html>
ရလာတဲ့ Result ကတော့ အတူတူပါပဲ။
အဲဒီလို tag တွေ သီးသန့်ခွဲလိုက်တဲ့အတွက် Short Cut တွေ ထည့်ချင်တဲ့အခါလည်း လွယ်သွားစေပါတယ်။ တစ်ခြား အားသာချက်တွေလည်း အများကြီးရှိပါသေးတယ်။
HTML5 ကို CSS နဲ့တွဲစပ်ခြင်း
HTML5 ကို CSS နဲ့ တွဲစပ်ခြင်းဆိုတော့ ထူးထူးခြားခြားလားလို့ ထင်စရာရှိပါတယ်။ တကယ်တော့ အဲဒီလို မဟုတ်ပါဘူး။ အရင်လိုပါပဲ။ CSS3 ဆိုရင်တော့ ပိုလာတာတွေ ရှိမှာပေါ့။ ကျန်တာကတော့ HTML4 က အတိုင်းပါပဲ။ CSS ကိုယ်တိုင်က HTML မှာ တည်ဆောက်ထားတဲ့ Element တွေကို အားဖြည့်ပေးရတာ ဖြစ်တဲ့အတွက် Structure ရှိတယ်ဆိုတာနဲ့ သုံးလို့ ရနေပါပြီ။
ခုချိန်မှာ Modern Browser တွေ အတော်များများ HTML5 ကို နားလည်နေကြပါပြီ။ သုံးလို့ရနေပါပြီ။ ဒီတော့ <nav>, <header>, <footer>, <article> စတာတွေကို ရိုးရိုး HTML Element တွေ ဖြစ်တဲ့ body တို့လိုဟာတွေအတိုင်း တန်းသုံးလို့ရပါတယ်။ ဒါပေမယ့် သူတို့ကိုတော့ div ရဲ့ သဘောအတိုင်း သုံးဖို့လိုမှာဖြစ်ပါတယ်။
CSS ရဲ့ Default အရ display: inline ဆိုပြီးသုံးပါတယ်။ အကယ်၍ ကိုယ့်အနေနဲ့ Width တွေ Height တွေ သုံးမယ်ဆိုရင် အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။ အဲဒီလို သတ်မှတ်ပေးချင်တယ်ဆိုရင် display: block ဆိုပြီး ပြောင်းပေးဖို့ လိုမှာပါ။ အဲဒီအပြင် Browser တွေ အနေနဲ့ တစ်ခြား element တွေအတွက် Default properties တွေ ရှိပေမယ့် <header>, <nav> အစရှိတဲ့ HTML5 element တွေအတွက် Default တွေ မရှိပါဘူး။ အဲဒါကြောင့် ကိုယ့်ဘာသာ သတ်မှတ်ပေးရပါမယ်။ အကယ်၍များ Browser တွေအနေနဲ့ HTML5 ကို သုံးလို့ရတာအပြင် Default Rule တွေလည်း ထည့်သွင်းလာပြီ ဆိုရင်တော့ ကျွန်တော်တို့ ရေးထားတာတွေ ထပ်နေမှာဖြစ်ပါတယ်။ အဲဒီတော့ HTML4 မှာ တည်ဆောက်ခဲ့တဲ့ ပုံစံနဲ့တူအောင် HTML5 အတွက် CSS ရေးကြည့်ရအောင်
header, nav, footer, article {display: block;}
nav {float:left; width: 20%;}
article {float: right; width: 79%;}
footer {clear: both;}
အပေါ်မှာ ရေးခဲ့တာတွေက IE မှ အပ တစ်ခြား Browser တွေ အားလုံး အဆင်ပြေပါတယ်။ ရှေ့ဆက်ပြီး IE နဲ့ ဟိုးအရင်က Browser တွေမှာ HTML5 ကို အလုပ်လုပ်အောင် ဘယ်လိုလုပ်မလဲဆိုတာကို ဆက်လေ့လာကြတာပေါ့။
ဆက်ပါဦးမယ် ….
Facebook comments:
2 Responses
Leave a comment
About the Author
Thiha
စာမရေးရ မနေနိုင်သူ၊ ဒီဇိုင်းဆွဲခြင်း၊ ပရိုဂရမ်ရေးခြင်း၊ အင်တာနက်တွင် သင်ယူခြင်းတို့ အမြဲမပြတ် ပြုလုပ်နေသူ၊ နည်းပညာနှင့် ပတ်သက်လျှင် အကုန် စိတ်ဝင်စားသူ၊ ကလေး တစ်ယောက် အဖေ၊ နည်းပညာသမားအပေါ် နားလည်မှု အပြည့်ပေးနိုင်သော ဇနီးတစ်ယောက်၏ ခင်ပွန်း၊ Myanmar Links မှာ နည်းပညာ အကြောင်း သောင်းပြောင်းထွေလာ သင်တဲ့ဆရာ ... လောလောဆယ် လေ့လာနေတာက iOS
Ads
ကျေးဇူးဗျာ…. စောင့်မျှော်နေမယ်ဗျို့…
IE အတွက်ဘယ်လိုရေးလဲ သိချင်နေတာကြာပြီ…
ဘယ် browser နဲ့ကြည့်ကြည့် အဆင်ပြေအောင် ဘယ်လိုလုပ်မလဲ သိချင်နေတာနဲ့
အတော်ပဲ….
HTML5 ကို အခုလို မြန်မာလို လေ့လာရတာ အရမ်း အဆင်ပြေပါတယ်…။
ဆက်ရေးဦးဗျ… အားပေးနေမယ်…။