Other HTML5 Elements

ရည်ရွယ်ချက်

ဒီအခန်းမှာတော့ HTML5 ရဲ့ <audio>, <video>, <canvas>, <svg>, <details>/<summary> element တွေ၊ Local Storage နဲ့ Data Attribute တွေကို ဆက်ပြီး လေ့လာကြပါမယ် ခင်ဗျာ။ ဒီ Feature တွေကြောင့် ကျွန်တော်တို့ရဲ့ Web page တွေက ပိုပြီး Powerful ဖြစ်သွားမှာပါ။

<audio> နှင့် <video> Elements များ

HTML5 ကြောင့် Flash လိုမျိုး တခြား ပြင်ပ Plugin တွေ မလိုတော့ဘဲ Audio, Video လို Media တွေကို Website တွေမှာ အလွယ်တကူ ထည့်သွင်းနိုင်လာပါတယ်။

<audio> Tag:

<audio> element ကို Webpage မှာ အသံဖိုင်တွေ (Audio) ထည့်ဖို့ သုံးပါတယ်။ MP3, Ogg, WAV လို Audio format မျိုးစုံကို Support ပေးပါတယ်။

ဥပမာ -

<audio controls>
  <source src="song.mp3" type="audio/mp3">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

controls attribute ကတော့ Play, Pause လုပ်တာတွေ၊ အသံအတိုးအကျယ် (Volume) Control တွေကို အလိုအလျောက် ထည့်ပေးသွားမှာပါ။

<video> Tag:

<audio> နဲ့ အလားတူပဲ <video> tag က Video content တွေ ထည့်သွင်းဖို့အတွက် ဖြစ်ပါတယ်။

ဥပမာ -

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video element.
</video>

controls က Play/Pause, Volume control နဲ့ တခြား လိုအပ်တဲ့ Control တွေကို ထည့်ပေးသွားမှာပါ။

<canvas> Element

<canvas> tag က JavaScript ကိုသုံးပြီး Webpage ပေါ်မှာ Graphics တွေကို တိုက်ရိုက် ဆွဲခွင့်ပေးပါတယ်။ သူ့ကို Dynamic graphics တွေ၊ Animation တွေ၊ ဒါမှမဟုတ် Game element တွေ ဖန်တီးတဲ့နေရာမှာ အဓိက သုံးပါတယ်။

ဥပမာ -

<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript ကိုသုံးပြီး Canvas ပေါ်မှာ ပုံစံတွေ၊ မျဉ်းတွေ၊ ပုံတွေ အစုံ ဆွဲနိုင်ပါတယ်။

JavaScript နဲ့ Canvas ပေါ်မှာ ဆွဲတဲ့ ဥပမာ -

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);  // Draws a blue rectangle

<canvas> က ဘာကြောင့် အသုံးဝင်တာလဲ?

Game တွေ၊ Animation တွေနဲ့ Real-time visualization တွေလိုမျိုး Interactive ဖြစ်တဲ့ Graphics တွေ ဖန်တီးဖို့အတွက် အသင့်တော်ဆုံးပါပဲ။

SVG (Scalable Vector Graphics)

HTML5 မှာ SVG ကိုလည်း မိတ်ဆက်ပေးခဲ့ပါတယ်။ SVG ဆိုတာက XML format ကိုသုံးပြီး Vector graphics တွေ ဖန်တီးတဲ့ နည်းလမ်းတစ်ခုပါ။ JPEG, PNG တို့လို ရိုးရိုးပုံတွေနဲ့ မတူတာက SVG တွေက အရွယ်အစားကို ကြိုက်သလောက် ချဲ့ချုံ့လုပ်လည်း အရည်အသွေး (Quality) လုံးဝ မကျသွားပါဘူး။ ဒါကြောင့် Responsive web design အတွက် အသင့်တော်ဆုံး ဖြစ်ပါတယ်။

ဥပမာ -

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

ဒီ Code က အနက်ရောင် ဘောင်ခတ်ထားတဲ့ အနီရောင် စက်ဝိုင်းတစ်ခုကို ဆွဲပေးပါတယ်။

ဘာကြောင့် SVG ကို သုံးသင့်လဲ?

• အရွယ်အစား ပြောင်းလွယ်ခြင်း - SVG တွေက အရွယ်အစား ချဲ့ချုံ့လုပ်လိုက်ပေမဲ့ အရည်အသွေး လုံးဝ မကျသွားပါဘူး။

• အပြန်အလှန် တုံ့ပြန်နိုင်ခြင်း - SVG တွေကို CSS နဲ့ Style ပြင်လို့ရသလို၊ JavaScript နဲ့လည်း Interactive ဖြစ်အောင် ချိတ်ဆက် လုပ်ဆောင်နိုင်ပါတယ်။

<details> နှင့် <summary> Elements

<details> element ကို သုံးပြီး JavaScript လုံးဝ မလိုဘဲ Show/Hide လုပ်နိုင်တဲ့ Collapsible content section လေးတွေ ဖန်တီးနိုင်ပါတယ်။ <summary> ကတော့ Click နှိပ်ရမယ့် ခေါင်းစဉ် Label ဖြစ်ပါတယ်။

ဥပမာ -

<details>
  <summary>HTML ဆိုတာ ဘာလဲ?</summary>
  <p>HTML (HyperText Markup Language) ဆိုတာ web ပေါ်မှာ content တွေကို structure ချဖို့သုံးတဲ့ language ဖြစ်ပါတယ်။</p>
</details>

ဒီ Code လေးက FAQ section တွေ၊ Accordion menu တွေ ဖန်တီးဖို့အတွက် အသင့်တော်ဆုံးပါ — JavaScript တစ်ကြောင်းမှ မရေးဘဲ Browser ရဲ့ Built-in behavior ကိုသုံးပြီး Expand/Collapse လုပ်နိုင်ပါတယ်။

Local Storage နှင့် Data Attributes

1. Local Storage:

HTML5 က Page ကို ပိတ်လိုက်ပြီးရင်တောင်မှ User ရဲ့ Browser ထဲမှာ Data တွေကို သိမ်းထားနိုင်တဲ့ Local Storage ကို မိတ်ဆက်ပေးခဲ့ပါတယ်။ ဒီ Data တွေက User က Browser cache ကို မရှင်းမချင်း ဒါမှမဟုတ် ခင်ဗျားရဲ့ Code ကနေ လှမ်းမဖျက်မချင်း အမြဲ တည်ရှိနေမှာပါ။

ဥပမာ -

localStorage.setItem("username", "JohnDoe");
var user = localStorage.getItem("username");

Local storage ကို User preference တွေ (ဥပမာ - Dark mode/Light mode ရွေးထားတာ)၊ Form data တွေလိုမျိုး Data တွေကို Session တစ်ခုပြီးတစ်ခု မှတ်ထားဖို့ အဓိက သုံးပါတယ်။

2. Data Attributes:

Data attribute တွေက Page ရဲ့ အမြင်ပိုင်း (UI) ကို မထိခိုက်စေဘဲ HTML tag တွေထဲမှာ လိုအပ်တဲ့ အပို Data တွေ ထည့်ခွင့်ပေးပါတယ်။ ဒီ Attribute တွေကို data- ဆိုတဲ့ စကားလုံးနဲ့ စရေးရပါတယ်။

ဥပမာ -

<div data-product-id="1234" data-price="29.99">Product 1</div>

ဒီလို ထည့်ထားတဲ့ တန်ဖိုးတွေကို JavaScript နဲ့ ပြန်ယူသုံးပြီး ခင်ဗျားရဲ့ Webpage ကို ပိုပြီး Interactive ဖြစ်အောင် လုပ်ဆောင်နိုင်ပါတယ်။

အကျဉ်းချုပ်

• HTML5 Input type တွေက Form တွေကို ပိုကောင်းမွန်စေပါတယ် (ဥပမာ - Email, Date, Range စသည်ဖြင့်)။

• <audio> နဲ့ <video> tag တွေက Webpage မှာ Media တွေကို အလွယ်တကူ ထည့်နိုင်စေတယ်။

• <details> နဲ့ <summary> တွေက JavaScript မလိုဘဲ Collapsible content (အဖွင့်အပိတ်လုပ်လို့ရတဲ့ အပိုင်း) တွေ ဖန်တီးနိုင်စေတယ်။

• Canvas က Dynamic graphics တွေနဲ့ Interactive content တွေကို ဖန်တီးနိုင်စေတယ်။

• SVG က Responsive design အတွက် အရည်အသွေးမြင့် Vector ပုံတွေ ဖန်တီးနိုင်ခွင့် ပေးတယ်။

• Local Storage က User ရဲ့ Device မှာ Data တွေ သိမ်းနိုင်ပြီး၊ Data attributes တွေက Element တွေမှာ အပို Data တွေ ထည့်နိုင်စေပါတယ် ခင်ဗျာ။

နောက်တစ်ဆင့်

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