HTML Lessons
Introduction to HTML
ကျ နော်တို့ ဝက်ဆိုဒ် တစ်ခု လုပ်ချင်တယ်ဆိုရင် ဘယ်လို့ရေးရမှာလည်းမသိဘူးဆိုရင် အများအားဖြင့် HTML လို့ခေါ်တဲ့ Hypertext Makeup Language နဲ့စတင်ရပါတယ်။ HTML ကို လေ့လာပီးရင်တော့ ရိုးရှင်းတဲ့ Website လေးတခုလောက် တည်ဆောက်နိုင်ပါပြီ ။ Website မှာဆိုရင် အမျိုးစားအနေနှင့် Web Design ၊ Web Developement ဆိုပီး နှစ်မျိုးရှိပါတယ်။ အခြား Technology တွေ့နဲ့ နိုင်ယှဉ်မယ်တဲ့အခါမှာ ကိုယ်ရဲ့လုပ်ထားမှုကို ချက်ချင်းမြင်နိုင်ပါတယ်။ HTML ကို လေ့လာပီး Website မလုပ်ရသေးတာတောင်မှ ကျနော်တို့ရဲ့ content တွေ့ကို web ပေါ်မှာ ဘယ်လို့ပြရမလဲ ဆိုတာကလည်း လွယ်ကူပါတယ်။ HTML ဆိုတာ Website အားလုံးနီးပါးရဲ့ အခြေခံ အုပ်မြစ်ဖြစ်ပါတယ်။ ဒါကြောင့် HTML ကိုလေ့လာပီးတဲ့အခါမှာ တခြား နည်းပညာများဖြစ်တဲ့ CSS, Javascript စတဲ့ နည်းပညာများ ထပ်လေ့လာဖို့ လိုအပ်ပါတယ်။ HTML က Modern Website တွေ့ Web Application တွေ့ကိုလည်း ဖန်တီးနိုင်ပါတယ်။ ကျနော်တို့ website တခုကို တစ်ဆင့်ပီး တစ်ဆင့် စတင်ဖန်တီးကြည့်ရအောင် Website တခုဖန်တီးဖို့ဆို Text Editor တစ်ခု နဲ့ Web Browserတစ်ခု တို့ လိုအပ်ပါတယ်။
TextEditor ဆိုတာ ဘာလဲ
TextEditor ဆိုတာ ရိုးရှင်းတဲ့ program တစ်ခုဖြစ်ပါတယ်၊အဲ့ program က plan text files တွေ့ကို ဖန်တီးနိုင်တယ်၊ ပြုပြင်နိုင်တယ်။ Computer တိုင်းမှာ TextEditor ပါရှိပြီးသားဖြစ်ပါတယ်။ မင်းဟာ Window သုံံးမယ်ဆိုရင် texteditor သုံးနိုင်ပီး၊ Max မှာဆိုရင် Application folder အောက်က TextEdit ကို သုံးနိင်ပါတယ်။ Mac မှာ ပိုမိုကောင်းမွန်တဲ့ Word Processing Apllication(eg. Microsoft Word or Pages) ကို သုံးမယ်ဆိုရင် styling rules နဲ့ metadata တို့ မကြာခန ပျာက်သွားတာလိုမျိုး ဖြစ်တက်ပါတယ်။ အဲ့ software က ကျနော်တို့ HTML page ရေးဖို့အတွက် အလုပ်မလုပ်ပါဘူး ၊ အဲ့ဒါကြောင့် ကျနော်တို့ဟာ Basic Text Editor ကိုသုံးတာက သေချာပါတယ်။Mac မှာ ပိုမိုကောင်းမွန်တဲ့ Word Processing Apllication(eg. Microsoft Word or Pages) ကို သုံးမယ်ဆိုရင် styling rules နဲ့ metadata တို့ မကြာခန ပျာက်သွားတာလိုမျိုး ဖြစ်တက်ပါတယ်။ အဲ့ software က ကျနော်တို့ HTML page ရေးဖို့အတွက် အလုပ်မလုပ်ပါဘူး ၊ အဲ့ဒါကြောင့် ကျနော်တို့ဟာ Basic Text Editor ကိုသုံးတာက သေချာပါတယ်။အာ့ကြောင့် ကျနော်ပြောချင်တာကတော့ window မှာဆိုရင် Notepad ကို သုံးပြီး၊ Mac မှာဆိုရင် TextEdit ကို သုံးဖို့ ဖြစ်ပါတယ်။ TextEditor ကို ဖွင့်ပီး ကျနော့်တို့ IT သမားတွေ့သုံးတဲ့ Test စကားလုံးလေးဖြစ်တဲ့ Hello World ဆိုတဲ့ ရိုးရှင်းတဲ့ စာသားလေးရိုက်ပြီး save တဲ့အခါမှာ dialog box လေး တက်လာပါလိမ့်မယ် ၊ အဲ့မှာ မင်းက save မှာ သေချာလားဆိုတဲ့မေးခွန်းလေးပါပဲ ၊ မ save ခင် file extension မှာ .html file type ပြောင်းပေးရပါလိမ့်မယ်။ ပြီးတော့ ကိုယ့် save ခဲ့တဲ့ file လမ်းကြောင်းကိုသွားပီး extension က .html ဟုရဲ့လား .html ဆိုရင်တော့ ဘာမှလုပ်စရာမလိုတော့ပါဘူး browser ကိုဖွင့်ပီး run လို့ရပါပြီး၊ .txt ဖြစ်နေရင်တော့ rename လုပ်ပြီး .html ပြန်ပြောင်းပေးရပါမယ်။
Web Browser
Web Broswer ဆိုတာ web page တွေ့ကို ကြည့်လို့ရတဲ့ Pgrogram တခုဖြစ်ပါတယ်။ Window မှာရှိတဲ့ browser ကို internet explorer လို့ခေါ်ပါတယ်၊ ခုနောက်ပိုင်းမှာဆိုရင် Google Chrome, Mozila Firefox စတဲ့ browser တွေ့ကိုလည်း သုံးနိုင်ပါတယ်။ Mac မှာရှိတဲ့ browser ဆိုရင် Safari လို့ခေါ်ပါတယ်။အစောက .html နဲ့ save ခဲ့တဲ့ file ကို double click နှိပ်လိုက်ရင် ကိုယ့်computer ရဲ့ default broswer မှာ hello world ဆိုတဲ့စာသားလေး ပေါ်လာပါပြီး။ အဲ့တာကိုမှ ကိုယ်ကြိုက်တဲ့ browser ပြန်ပြောင်းဖွင့်ချင်ရင်တော့ .html file ကို right click မှာ open with မှာ ကိုယ်လိုချင်တဲ့ browser နဲ့ ဖွင့်လိုက်ရင် ရပါပြီး။ အဲ့ စာသားကိုမှ ကိုယ်က ပြောင်းချင်တာဖြစ်ဖြစ် ၊ ပြင်ချင်တာဖြစ်ဖြစ် တခုခုလုပ်ချင်ရင် notepad နဲ့ဖွင့်ပီး ပြန်ပြင်ပီး save လုပ်ပီးတာနဲ့ browser မှာ refresh button ကို နှိပ်လိုက်ရင် ကိုယ်ပြင်ထားတဲ့စားသားပေါ်ပါပြီ။ မင်းက computer မှာ ရှိတဲ့ internet explorer သုံးတာဆိုရင် refresh shortcut key က ctrl + f5 ဖြစ်ပါတယ်။ မင်းက mac မှာ safari ကိုသုံးတာဆိုရင်တော့ refresh shortcut key က cmd+ R ဖြစ်ပါတယ်။
About Tags
HTML မှာ hypertext နဲ့ markup language ဆိုပီး နှစ်မျိုးရှိပါတယ်။ markup language က programming language နဲ့ မတူပါဘူး၊ ကျနော်တို့ programming language ကို သုံးတဲ့ အခါမှာ တချို့အရာတွေ့ကိုဘယ်လို့ပြုမှုရမလဲဆိုတာကို ဖော်ပြဖို့ ဖြစ်ပါတယ်။ markup language က book editor or writing instructor တွေ့ရဲ့ idea ကနေလာတာဖြစ်ပါတယ်။ HTML မှာ tag များစွာရှိပါတယ်။tag ဆိုတာက opening bracket နဲ့ closing bracket တို့ပါတဲ့ကောင်ကို tag လို့ခေါ်ပါတယ်။eg. text document တခုရဲ့ ဘယ်အပိုင်းက header လို့ခေါ်တာလဲ၊ ဘယ်အပိုင်းက paragraph လို့ခေါ်တာလဲ၊ header ဆိုတာက <h1></h1>(that is first line of header) ၊ pargaraph ဆိုတာ <p> </p>(that is paragraph)။<h1></h1> ဆိုတာနဲ့ browser က text တခုရဲ့header ဆိုတာ တန်သိတယ်၊<p></p> ဆိုတာနဲ့ browser က တခုရဲ့ paragraph ဆိုတာ တန်သိတယ်။ ကျွန်တော်တို့ မြင်နေရတဲ့ speradsheet application တစ်ခုပေါ်မှာ ဘယ်အပိုင်းက tabular data ဖြစ်တယ် ဘယ်အပိုင်းက image ဖြစ်တယ်ဆိုတာ web browser က သိပါတယ်။ markup languages တွေ့ကို information age စတင်ချိန်နှင့် အတူ ၁၉၆၀ ခုနှစ်မှာ စတင်ခဲ့ပါတယ်။
History of HTML
HTML ကို European Organization နဲ့ Nuclear Research အတွက် CERN က တီထွင်ခဲ့ပါတယ်။ SGML base language သို့မဟုတ် standard generalized markup language က HTML ကို များကြီးလွှမ်းမိုးခဲ့ပါတယ်။ CERN မှာ customized လုပ်ထားတဲ့ SGML ကို scientific research အတွက် in-house document format တခုအဖြစ် အသုံးပြုခဲ့ပါတယ်။ HTML ဆိုတာ research papaers တွေ့အတွက် document format တခုကို ဆိုလိုတာပါ(eg. page, document, doctype 4, document type, ...)။ ကျနော်တို့ HTML အကြောင်းပြောရင်း Internet အကြောင်းလေ ကြားဖြတ်ပြောချင်ပါတယ်။ Internet ဆိုတာ ဘာလဲပေါ့။ Internet ဆိုတာက physical infrastructure ဖြစ်ပါတယ်၊ Infrastructure က တကမ္ဘာလုံးကို network တွေ့နဲ့ ချိတ်ဆက်ကာ data တွေ့ကို အလွယ်တကူ transport လုပ်လို့ရတာ ဖစ်ပါတယ်(eg. wires, computers,servers, switches, satellites, စတာတွေ့နဲ့ ချိတ်ဆက်ရတာဖြစ်ပါတယ်)။ Sir Tim Berners-Lee ဟာ CERN မှာ physicist နှင့် contractor ဖြစ်ခဲ့ပါတယ်။ 80 centruary လောက်မှာ markup languages နှင့် အတူ ပိုမိုကောင်းမွန်တဲ့ document ကို ဖန်တီးချင်ခဲ့တယ်။ပြီးတော့ သူဟာ HTML ရဲ့ ပထမဦးဆုံး version ကို စတင်တီထွင်ခဲ့ပါတယ်။ သူကပြောပါတယ် HTML က SGML နဲ့ ဆင်တယ်လို့ပြောခဲ့ပါတယ်။ သို့သော်လည်း hypertext ရဲ့ Key Addition ကိုလည်းပြုလုပ်ခဲ့ပါတယ်။ Hypertext ဟာ တခုနဲ့ တခုချိတ်ဆက်ပေးတဲ့ documents တွေ့ရဲ့ idea ဖြစ်ပါတယ်။ html document တခုမှာရှိတဲ့ text အပိုင်း သို့မဟုတ် image တခုက တခြား html document ကို ရည်ညွှန်နိုင်ပါတယ်။ ခုခေတ်မှာတော့ အဲ့တာကို hyperlink သို့မဟုတ် link လို့ သိလာကြပါတယ်။ Sir Tim Berners-Lee က hypertext နဲ့ markup language တို့ကို ချိတ်ဆက်ပြီးတော့ ယနေ့ခေတ် web pages တည်ဆောက်ပုံတွေ့ကို ဖော်ပြဖို့ ဖန်တီးခဲ့ပါတယ်။ ၁၉၉၄ ခုနှစ်မှာ Tim Berners-Lee က W3C (World Wide Web Consortium) ကို တွေ့ခဲ့ပါတယ်။W3C က များပြားလှတဲ့ companies တွေ့နဲ့ ဖွဲ့စည်းပြီးတော့ html specifications တွေ့ကို ဆက်လက် လုပ်ဆောင်နေပါတယ်။ ကျနော်တို့ဟာ html ရဲ့ သမိုင်းကြောင်းအချို့ကို နားလည်ပြီးဆိုရင်ပိုမိုကောင်းမွန်တဲ့ frame တခုကို ရပါလိမ့်မယ်။ HTML page ရဲ့ global structure အကြောင်းကို လေ့လာသွားမှာဖြစ်ပါတယ်။ယခု google chrome browser လေး ဖွင့်လိုက်ပါ၊ ပီးရင် texteditor မှာ doctype လေးဖန်တီးကြည့်ရအောင်။ ကို html5 doctype လို့ခေါ်ပါတယ်။ html document type တွေ့များစွာ ရှိပါတယ်။ က english အတွက် ဖြစ်ပါတယ်၊ tag ကတော့ document တခုရဲ့ header အပိုင်းဖြစ်ပါတယ်၊header ဆိုတာ page တခုရဲ့ render လုပ်တာတော့မဟုပါဘူး၊ page ကိုခေါ်တာနဲ့ header ကနေ စလုပ်တာဖြစ်ပါတယ်၊ အဲ့ထဲ့မှာ meta,title,css,javascriptတို့ကို ရေးရပါတယ်၊ meta tag ကတော့ doctype နဲ့တူတဲ့ void element ဖြစ်ပါတယ် အဲ့တာကြောင့် သူ့ကို ရေးမယ်ဆိုရင်တော့ () ပိတ်ပေးစရာမလိုပါဘူး၊ သူ့မှာ attribute ပါပါတယ် ဥပမာ- ၊ charset="utf-8" က website 99% မှာ characterset တွေ့ကို အဆင်ပြေစေတာဖြစ်ပါတယ်။ tag ကတော့ browser title bar မှာစာသားမှာပေါ်မှာ ဖြစ်ပါတယ်။body tag ထဲ့မှာတော့ text တို့ video တို့ ရေးရတာ ဖြစ်ပါတယ်။ က "this is called div"၊ က "this is called span"၊ က နဲ့ဆင်ပါတယ်၊ ဒါပေမဲ့ မတူပါဘူး ။ html မှာ elements က block level element နဲ့ in-line level element ဆိုပီးနှစ်မျိုးရှိပါတယ်။ block elements တွေ့ကတော့ eg. , ,စသည့်ဖြင့် ရှိကျပါတယ်၊ in-line elements တွေ့ကတော့ ,,,စသည့်ဖြင့်။ block elment က new line နဲ့ စတင်ပြီး full width ယူမှာမို့ တခြားအရာတွေ့ကို တွန်းပစ်လိုက်တယ်၊ in-line element က new line နဲ့ မစတင်ပါဘူး၊ လိုအပ်မှသာ စတင်တာပါ၊ သူက သူရဲ့ width ရှိသလောက်ပဲယူတာပါ။ elements အကြောင်းတွေ့ကို အသေးစိတ်လေ့လာချင်ရင်တော့ w3schools ရဲ့ အောက်က link မှာ ထပ်လေ့လာနိုင်ပါတယ်။
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Page</title>
<head>
<body>
<div>This is a <span>div</span></div>
<span>This is a span</span>
</body>
</html>
About Head Line, Paragraph
အောက်မှာဖော်ပြထားတာကတော့ head ၊ pargaraph ၊ emphasis ၊ strong ၊ horizontal rule တို့အကြောင်းကို ဖော်ပြထားတာ ဖြစ်ပါတယ်။ head tag မှာ h1,h2,h3,h4,h5,h6 ဆိုပီး ၆မျိုုးရှိကျပါတယ်။h1 tag ကအကြီးဆုံးဖြစ်ပြီး တဖြည့်ဖြည့်ချင်းစီ သေးသွားပါတယ်။ paragraph tag ကတော့ စာသားတွေ့ကို အစုလိုက်ပြတဲ့နေရာမှာ သုံးပါတယ် ဥပမာ- စာပိုဒ်နှစ်ခုရှိတယ်ဆိုပါစို့ အပေါ်က စာပိုဒ်ကို paragraph တခုရဲ့ အဖွင့်ပိတ်ကြားမှာရေး၊ နောက်စာပိုဒ်ကျလည်း paragraph တခုရဲ့ အဖွင့်ပိတ်ကြားမှာရေး အာ့ဆိုရင်တော့ စာပိုဒ်နှစ်ခုက သူ့အပိုင်းနဲ့သူ ရောထွေးမနေဘဲ သီခြားလေးတွေ့ဖြစ်နေတာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ empasis tag() ကတော့ p tag ရဲ့ အတွင်းမှာ ရေးရတာ ဖြစ်ပါတယ် ၊ သူက in-line element ဖြစ်ပါတယ်၊ em tag အဖွင့်ပိတ်ကြားမှာ စာသားထားရင် out put မှာ စာသားက အစောင်းလေးမြင်ရမှာဖြစ်ပါတယ်၊ empsasis က italic ကိုရည်ရွယ်တာမဟုတ်ပါဘူး၊ သူက side effect တွေ့ default style တွေ့ပါပြီးသားဖြစ်ပါတယ်။ နောက်တခုကတော့ strong tag အကြောင်းပဲ ဖြစ်ပါတယ်၊ strong tag အဖွင့်ပိတ်ကြားမှာ စာသားထည့်တာဆိုရင် အဲ့စာသားကို ထင်ရှားအောင် အမည်းလေး ဖြစ်စေပါတယ်။ နောက်တခုကတော့ hr tag အကြောင်းပဲဖြစ်ပါတယ်၊ paragraph တွေ့ ၂ခုထပ်ပိုတဲ့ ခါမှာ သုံးသင့်တာဖြစ်ပါတယ်၊ pargraph တခုနဲ့ တခုကြားမှာ ပိုပြီးရှင်းလင်းအောင်လို့ Horizontal line လေးတားပေးတာဖြစ်ပါတယ်။ hr tag ကလည်း void element ဖြစ်ပါတယ်။
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>This is a 1 head line</h1>
<h2>This is a 2 head line</h2>
<h3>This is a 3 head line</h3>
<h4>This is a 4 head line</h4>
<h5>This is a 5 head line</h5>
<h6>This is a 6 head line</h6>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto qui iure aperiam ea praesentium, laudantium voluptate odit, quae excepturi adipisci mollitia corporis consequatur? Harum placeat vero quo ratione amet cumque.
</p>
<hr>
<p>
<em> Lorem ipsum dolor</em> sit amet consectetur adipisicing elit. Iusto qui iure aperiam ea praesentium, laudantium voluptate odit, quae excepturi adipisci mollitia corporis consequatur? Harum placeat vero quo ratione amet cumque.
</p>
<hr>
<p>
<strong> Lorem ipsum dolor sit</strong> amet consectetur adipisicing elit. Iusto qui iure aperiam ea praesentium, laudantium voluptate odit, quae excepturi adipisci mollitia corporis consequatur? Harum placeat vero quo ratione amet cumque.
</p>
</body>
</html>
Output Here
About Quote Tag and Bloquote Tag
blockquote သို့မဟုတ် blockquote tag တွေ့ဟာ wrap quotes တွေ့ကို သုံးဖို့ ဖြစ်ပါတယ်။ blockquote ထဲ့မှာ paragraph tag သုံးရပါတယ် ဘာကြောင့်လဲဆိုရင် quote ဖြစ်ဖို့ တချို့သော text တွေ့ကို wrapping လုပ်ရပါတယ်။ blockquote ကို သုံးလိုက်ခြင်းအားဖြင့် ကျနော်တို့ ရေးထားတဲ့ text ရဲ့ရှေ့မှာ tab တချက်စာလောက်ကွာနေတာကိုး တွေ့ရမှာဖြစ်ပါတယ်။ blockquote artibute တခုပါပါတယ်၊ အဲ့တာကတော့ cite ဖြစ်ပါတယ်၊ cite attribute မှာ url ပဲ ထည့်ပေးရပါတယ်၊ cite attr ထည့်ပေးခြင်းအားဖြင့် quote က ဘယ် url ကလာတာလဲ သိနိုင်ပါတယ်၊ web page မှာတော့ cite url ကို မြင်ရမှာမဟုပါဘူး၊ အခြေခံကျကျပြောမယ်ဆိုရင်တော့ quote အတွက် cite က ရှိပေးရပါတယ်။ CSS ကိုသုံးပြီး quote အတွက် cite ရေးပေးချင်လည်းရပါတယ်၊ဒါပေမဲ့ မလိုအပ်ပါဘူး။ နောက်တဆင့်ကတော့ Q element or Q tag or quote tage ဖြစ်ပါတယ်။ Q element က blockquote element နဲ့ ဆက်ဆက်နေပါတယ်၊ Q element က inline content အတွက် သုံးရပါတယ်၊ paragraph break လုပ်ဖို့မလိုအပ်ပါဘူး။ blockquote က block level content ဖြစ်ပါတယ်၊ သူကတော့ paragraph break လုပ်ဖို့ လိုအပ်ပါတယ်။ ကျနော်တို့ Page မယ် blockquote လို့ပဲ quote မှာလည်း semantic meaning ပေါ်ချင်ရင် cite attribute ကို သုံးနိုင်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My page</title>
</head>
<body>
<p>My Name is <q>Tun Tun Min <q></p>
<blockquote>
<p>
I am a student
</p>
</blockquote>
</body>
</html>
About the code, pre and br elements
ယခုအခါမှာ code, pre, br elements တွေ့အကြောင်းလေ့လာရမှာ ဖြစ်ပါတယ်။ အဲ့ elements တွေ့က property or computer code တွေ့ကို format ကျအောင် ကူညီပေးပါလိမ့်မယ်။ Code element က computer code ရဲ့ တစိတ်တပိုင်းအဖြစ် ကိုယ်စားပြုပါတယ်။အဲ့တာတွေ့က XML element name, file name, a computer program or အခြား string တွေ့ကို computer က လုပ်ဆောင်ပါလိမ့်မည်။ ကြားမှာရေးတဲ့ စာသားတိုင်းကို browser က code လို့သတ်မှတ်ပါလိမ့်မယ်။ သူရဲ့ original font ကတော့ monosapce font ဖြစ်ပါတယ်။ နောက်တခုက pre element ဖြစ်ပါတယ်၊သူက code element နဲ့ ဆင်ပါတယ်၊ ကြားထဲ့မယ်ရေးထားတာကို preformated text လို့ခေါ်ပါတယ်၊ သူက ဘယ်လို့လုပ်လဲဆိုရင် ကိုယ်ရေးခဲ့တဲ့ text ထဲ့မယ် space ပါရင် အဲ့ space အတိုင်း နေရာယူပီးပေါ်ပေးတယ်၊ လိုင်းတကြောင်းဆင်းထားရင်လည်း လိုင်းတကြောင်းလိုက်ဆင်းပေးတယ်၊ text ထဲ့မယ် tab ခုန်ထားရင်လည်း tab ခုန်တဲ့လိုက်ပဲ ပေါ်ပေးပါတယ်။ နဲ့တော့ ဆင်တယ် ဒါပေမဲ့ မတူပါဘူး၊ p tag ထဲ့မယ်ရှိတဲ့ text မှာ စာကြောင်းတကြောင်းမဆုံးသေးပဲ အောက်တကြောင်းဆင်းထားဆိုရင်လည်း ဆင်းထားတဲ့ စာသားကို အပေါ်က ဆုံးခဲ့တဲ့ စာကြောင်းနောက်မှာ သွားကပ်ပီး ပေါ်နေပါတယ်၊ ဒါပေမဲ့ မဆုံးသေးတဲ့ စာကြောင်းနောက်မှာ br tag ရေးထားတာ ဆိုရင်တော့ အောက်က စာကြောင်းက အပေါ်ကို သွားမကပ်တော့ပါဘူး။ အဲ့တော့ br tag ရဲ့ အလုပ်လုပ်ပုံက အောက်တကြောင်းဆင်းတာ ဖြစ်ပါတယ်၊ ဘာလို့လဲဆို သူက block element ဖြစ်နေလို့ပါ။သူက meta,hr tag တို့လို့ပါပဲ၊ သူ့မှာလည်း closing tag မလိုပါဘူး။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My page</title>
</head>
<body>
<p>
We use the <code>drive()</code> function on the <code>vehicle</code> object, it moves forward.
</p>
<pre>
He is ...
smoething.
</pre>
<p>I am Mg Mg.<br>
I live in NaypyiTaw.
</p>
<pre>
<code>
if(!foo){
then bar = 3;
}
</code>
</pre>
</body>
</html>
About Abbreviations,Address, and Citations
ပထမဦးဆုံး Abbreviations အကြောင်းလေးပြောရအောင်၊ ကျနော်တို့ Abbreviations ကို ဘယ်ချိန်မှာ သုံးမလဲပေါ့နော်။ ရှင်းရှင်းပြောရရင် ကျနော်တို့ text ထဲ့မှာ တချို့စကားလုံးတွေ့ကို အတိုချုုပ်ချင်တဲ့အချိန်မှာ သုံးရမှာဖြစ်ပါတယ်။ သူကိုဘယ်လို့သုံးရမလဲဆိုရင် ကျနော်တို့က pargraph tag ထဲ့မှာ ရေးဖို့လိုတယ်ဗျ၊ အဲ့paragraph ထဲ့မယ် ကိုယ်အတိုကောက်ထားချင်တဲ့ စကားလုံးကို tag ကြားထဲ့မှာ ရေးပါရမှာဖြစ်ပါတယ်။ အတိုချုံးထားတဲ့ စာသားကို အကျယ်ဘယ်လို့ပြန်ချဲ့ရမလဲဆိုရင် abbr tag မယ် title attribute ပါပါတယ်ခင်ဗျ၊ title attribute ထဲ့မှာ ကိုယ့်ပြန်အကျယ်ချဲ့ချင်တဲ့ စာသားကို double code ထဲ့မှာ ရေးရမှာ ဖြစ်ပါတယ်။အောက်မှာ ဥပမာ နှင့်တကွ ဖော်ပြပေးထားပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My page</title>
</head>
<body>
<p>
I know how to use <abbr title="self-contained underwater breathing apparatus">SCUBA</abbr> gear
</p>
</body>
</html>
About OrderList and UnorderList
ခုကျနော်တို့ပြောမဲ့ orderlist နဲ့ unorderlist က ရိုးရိုးရှင်းရှင်းလေး မှတ်ယုံပါပဲ။ order list ကတော့ အလိုအလျောက် အမှတ်စဉ်တွေ့ကို တပ်ဆင်ပေးပါတယ်၊Unorder list ကတော့ အမှတ်စဉ်တွေ့ကို အလိုလျောက်တပ်ဆင်းမပေးပါဘူး သူက အစက်လုံးလုံးသေးသေးလေးကိုပဲ ပြပေးတာပါ(called bullet)။OrderList မှာ ကျနော်တို့ list(<list></list>) သုံးမယ်ဆိုရင် <ol></ol>ကြားမှာမဟုဘဲ သုံးလို့မရပါဘူး၊ List tag ကြည့်ပဲ သုံးမယ်ဆိုရင်တောင် default ဖြစ်တဲ့ unorderlist အနေနဲ့ပဲ ပေါ်ပါလိမ့်မယ်။list tag (<li></li>) မပါဘဲနဲ့ orderlist မှာကော unorderlist မှာကော သုံးလို့မရပါဘူး။ သုံးမယ်ဆိုရင် ဘာbullet မှ၊ ဘာ ဂဏန်းမှ မပြပေးပါဘူး။orderlist မှာကော unorderlist မှာကော list element ကိုယ့်ထပ်ထည့်ချင်ရင် list(<list></list>) အဖွင့်ပိတ်ကြားမယ် ကိုယ်ထည့်ချင်တဲ့ orderlist ဆို orderlist ထည့်၊ unorderlist ထည့်ချင်ရင် unorderlist ထည့်။ အဲ့လို့ပဲ ကိုယ့်ထပ်ပီးလိုချင်သလောက်ထည့်သွားနိုင်ပါတယ်။
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
About Definition Lists
Definition list or dl element က list of definitions သို့မဟုတ် descriptions for various items ကို ကိုယ်စားပြုပါတယ်။ definition list or dl element က <dl></dl> နဲ့ ရေးရပါတယ်၊ ပြီးတော့ သူက ul or ol element တို့နဲ့ တူပါတယ်၊ သူက တခြား tag တွေ့ လိုအပ်ပါတယ်၊ သူကိုးတခုတည်းနဲ့တော့ မသုံးပါဘူး။ သူက မတူညီတဲ့ tag နှစ်ခုလိုအပ်ပါတယ်။ ပထမတခုကတော့ definition title element or dt ဖြစ်ပါတယ်။ သူ့ကို list ရဲ့ အရေးကြီးတဲ့အပိုင်း သို့မဟုတ် higher-level categories အဖြစ် title အနေနဲ့ လုပ်ဆောင်ပါတယ်။ဒုတိယတခုကတော့ dd element သို့မဟုတ် description သို့မဟုတ် definition element ဖြစ်ပါတယ်။ သူကတော့ dl element ရဲ့အတွင်းမှာ ရေးရမှာ ဖြစ်ပြီး dt element ရဲ့အောက်မှာ ရေးရမှာဖြစ်ပါတယ်။ dl element or definition list က identation မရှိတဲ့အတွက် ရှုပ်ထွေးနိုင်တယ်။ dd element က dt element နဲ့ ဆက်နွယ်နေပါတယ်၊ ဒါပေမဲ့ dt tag ထဲ့မယ် ရေးရမှာ မဟုတ်ပါဘူး၊ ဘာလို့လဲဆိုရင် ကျနော်တို့ဟာ မည်သည့် identation ကိုမှ သုံးဖို့ မလိုအပ်လို့ဖြစ်ပါတယ်။ Identation ကို nested element တွေ့သာလျှင် သုံးပါတယ်။ description တခုမှာ dd element တွေ့များကြီးဖန်တီးနိုင်သလို့ dt element တွေ့များကြီးနဲ့လည်း ဖန်တီးနိုင်ပါတယ်။ဥပမာ-
<dl>
<dt>Video Pros</dt>
<dt>Video State</dt>
<dd>Jon</dd>
<dd>Michael</dd>
<dt>Teachers</dt>
<dd>Nick</dd>
<dd>Jim</dd>
<dd>Amit</dd>
</dl>
Output Here
About Anchor Tag
anchor tag(<a></a>) က အမျိုးမျိုးသော page တွေ့ကို connect လုပ်ဖို့သုံးပါတယ်။ page တခုတည်းမှာလည်း လိုင်းနံပါတ်များကြီးခြားနားနေတာကနေ တခါတည်း တန်ရောက်ချင်ရင်လည်းသုံးပါတယ်။ ခု eg မှာတော့ attribute နှစ်မျိုး သုံးထားပါတယ်။ id ကတော့ သူ့ဆီကိုး ပြန်လာဖို့အတွက်သုံးထားပါတယ်၊ href or hyperlink reference ကတော့ ကိုယ်သွားချင်တဲ့နေရာကို တန်ရောက်အောင် သုံးတဲ့နေရာမှာ သုံးပါတယ်။ ဥပမာ - ကိုယ်က ဒီpage ထဲ့မယ် ရှိတဲ့ စာသားတွေ့ကို တန်သွားချင်တာဆိုရင် href ရဲ့ value ထဲ့မယ် hash sign(#) နဲ့ အဲ့နောက်က ကိုယ်သွားမယ့် id ရဲ့ value လေးကပ်ပေးရမှာဖြစ်ပါတယ်။
<a href="#some_text" id="mylink">My Link</a>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<p id="some_text">The anchor is here.</p>
<a href="#mylink">Go Back</a>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br>
Output Here
Website Part-1
ကျနော့်တို့ အရှေပိုင်း html အကြောင်းတွေ့ကို လေ့လာခဲ့ရပါတယ်။ web site ဆိုတာ ဘာလဲ။ web site ဆိုတာ web page တွေ့များကြီး ပေါင်းပီးရေးထားတာကို web site လို့ခေါ်တာဖြစ်ပါတယ်။ web site တခုမှာ ဘယ် file က စလုပ်တာလဲ၊ index.html က စလုပ်တာပါ။အဲ့ index.html ကနေမှ တခြား page တွေ့ကို ဘယ်လို့သွားမလဲ အာ့ဆိုရင်တော့ ကျနော့်တို့ link လုပ်ဖို့လိုအပ်လာပါပြီ၊ အာ့ဆိုရင်တော့ a tag(<a></a>) ကိုသုံးပြီးတော့ href attribute ရဲ့ value ထဲ့မယ် နောက်တစ် page ကို သွားမယ့် file name အပြည့်စုံ ထည့်ပေးရင်ရောက်ပါပြီ။ ဥပမာ-
Output Here
Website Part-2
ကျနော့်တို့ hyper linkသုံးတဲ့နေရာမယ် file path အမျိုုးစားနှစ်ခုရှိပါတယ်။ပထမတစ်ခုက absolute linkဖြစ်ပြီး relative link ဖြစ်ပါတယ်။ relative link က folder တစ်ခုထဲ့မယ် ရှိတဲ့ file ကနေ အခြား folder အောက်က file ကို link လုပ်ပေးတာဖြစ်ပါတယ်။ absolute link က ပြီးပြည့်စုံတဲ့ file path ကိုသုံးပြီးတော့ relative ရဲ့ လက်ရှိတည်နေရာထက် file structure တစ်ခုမှာ root ကနေ စတင်ပါတယ်။ ကျနော့်တို့ internet ပေါ်မှာ web page ကနေ တခြား web page ကို သွားချင်ရင် full URL နဲ့သွားဖို့ လိုအပ်ပါတယ်။ URL ဆိုတာ Uniform Resource Locator ဖြစ်ပါတယ်။ ကျနော့်တို့ကြားဖူးတဲ့ URI က Uniform Resource Identifier ဖြစ်ပါတယ်။ ကျနော့်တို့က URL နှင့် URI ကြား ဘာကွာတာလဲဆိုရင် URL ဆိုတာက URI ရဲ့အမှန်တကယ်တိကျတဲ့ အပိုင်းဖြစ်တယ်လို့ပြောလို့ရပါတယ်။ လက်တွေ့မှာ သုံးရင်တော့ နှစ်ခုလုံးကို အပြန်အလှန်သုံးပါတယ်။ ဥပမာ-
<p>
Another Page
</p>
<a href="../index.html">Go Back</a>
<a href="http://google.com">Google</a>
Output Here
About Image
ကျနော်တို့ဟာ များပြားလှတဲ့ စာသားအကြောင်းတွေ့ကို လေ့လာခဲ့ပြီး ယခုအခါမှာတော့ images အကြောင်းကို လေ့လာမှာဖြစ်ပါတယ်။ ကျနော့်တို့ image file format တွေ့ကတော့ JPEG, PNG, GIF အစရှိတဲ့ တခြားimage file တွေ့လည်းအလုပ်လုပ်ပါတယ်။ image tag ကိုသုံးတဲ့ အခါမှာ <img> ဆိုပြီ သုံးပေးရင်ရပါတယ်။ သူ့မှာက self-closing tag ပါပြီးသားဖြစ်ပါတယ်။ ပုံပေါ်ဆို သူ့မှာ ပါတဲ့ src attribute ကို သုံးပေးရမယ် ဖြစ်ပါတယ်။ src arrtibute ထဲ့မယ်မှ ပုံရဲ့ ပတ်လမ်းကြောင်းနဲ့ ပုံ နမည်အပြည့်စုံ ထည့်ပေးရမှာဖြစ်ပါတယ်။ နော်ထပ် attribute တခုကတော့ alt ဖြစ်ပါတယ်။ alt က ပုံပတ်လမ်းကြောင်းမှားလို့ မပေါ်ရင်လည်း alt ထဲ့မယ် ရှိတဲ့ value က ပေါ်ပေးပါတယ်၊ ပုံပတ်လမ်းကြောင်းမှန်ရင်တော့ မပေါ်ပေးပါဘူး။ ကျနော့်တို့ ဘယ်website မှန်းမသိလို့ ရှာတဲ့ချိန်မှာလည်း alt ထဲ့မယ် ရှိတဲ့ value နဲ့တိုက်ပီး စကားလုံး တူရင်ဖြစ်ဖြစ် နီးစပ်ရင်ဖြစ်ဖြစ် ကျနော့်တို့ ဆိုက်ကို ပေါ်ပေးတာဖြစ်ပါတယ်။ နောက် attribute တခုက title ဖြစ်ပါတယ်။ သူကတော့ ပုံပေါ်ကို မျှားလေးတင်လိုက်တဲ့ချိန်ကျ ပေါ်ပေးတာဖြစ်ပါတယ်။ပုံရဲ့အထက်မှာ စာသားရေးနိုင်သလို့ အောက်မှာလည်း ရေးနိုင်ပါတယ်။ ဥပမာ-
<p>
Here are some flowers
</p>
<img src="flower.jpg" alt="Flower booming is in the warm sunlight" title="Flower booming is in the warm sunlight">
<p>
Aren't they nice?
</p>
Output Here
About Embeded
တခါတလေမှာ ကျနော်တို့က ကျနော့်တို့ရဲ့ web site မှာ flash သို့မဟုတ် အခြားသော plugin တွေ့ကဲ့သို့ ပိုမိုရှုပ်ထွေးလှတဲ့ media တွေ့နဲ့ အလုပ်လုပ်ဖို့ လိုအပ်ပါတယ်။ html 5 video ကဲ့သို့သော technology အသစ်တွေ့ကို သုံးတာပိုကောင်းပါတယ်၊ ဒါပေမဲ့ ကျနော့်တို့က အရင်တော့က element တွေ့ကိုတော့ သိဖို့အရေးကြီးပါတယ်။ object element ကတော့ html 4 မှာကတည်းက စတင်ခဲ့တာဖြစ်ပြီး သူ့ရဲ့ရည်ရွယ်ချက်က media element တွေ့အတွက် embeded လုပ်ဖို့ ခွင့်ပြုပေးတာဖြစ်ပါတယ်။ ကောင်းတဲ့အချက်ကတော့ site တွေ့မှာ embeded code ကို အလွယ်တကူ copy ကူးပြီး paste လုပ်လုပ်နိုင်ပါတယ်၊ ဥပမာ- Youtube။ အဲ့ code တွေ့ကို အနည်းငယ်ပြင်ပြီး ပြန်သုံးနိုင်ပါတယ်။ ကျနော့်တို့ဟာ flash ကဲ့သို့ things တွေ့ကို အပြန်လှန်သက်ရောက်စေဖို့ HTML 5, Javascript, အခြားသော technologies တွေ့ကို သုံးတာ ပိုကောင်းပါတယ်။ ကျနော့်တို့နောက်ပိုင်းမှာ HTML 5, Javascript တွေ့ကို လေ့လာရပါလိမ့်မယ်။ ဘာလို့လဲဆိုရင် flash or other plugin တွေ့က ထောက်ပံ့မှုသိပ်မရလို့ ဖြစ်ပါတယ်၊ သူတို့ကိုကျ individual companies တွေ့က ပိုင်ဆိုင်ထားတာ ဖြစ်ပါတယ်။ Open standards ဖြစ်တဲ့HTML, CSS,Javascript တွေ့ဟာ ထောက်ပံ့မှုရကျပါတယ်။ ခုခေတ်မှီတဲ့ခေတ်မှာOBJECT or EMBED elementsတွေ့ကို မသုံးသင့်တော့ပါဘူး ၊ ဒါပေမဲ့ သိဖို့တော့ အရေးကြီးပါတယ်။
<object width="420" height="315">
<iframe width="560" height="315" src="https://www.youtube.com/embed/SR9P21TgrjI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</object>
Output Here
About Link , Script
ပထမကတော့ link element အကြောင်းပြောမှာ ဖြစ်ပါတယ်။ link element က head tag ထဲ့မယ် ရေးရမှာဖြစ်ပါတယ်၊ body tag ထဲ့မှာ မဟုတ်ပါဘူး။ link tag မယ် rel attribute(relative attribute) နဲ့ type ဆိုတဲ့ attribute နှင့် href attribute တို့ပါပါတယ်။ rel မှာတော့ stylesheet ဆိုတဲ့ value ထည့်ပေးရပြီး type မှာတော့ text/css ထည့်ပေးရတာဖြစ်ပါတယ်၊ href မှာတော့ တခြား external css file path ထည့်ပေးရတာဖြစ်ပါတယ်။ external css file ကတော့ မလေ့လာရသေးတဲ့အတွက် နောက်မှာ ပြောပြပါမယ်။ javascript က လည်း link tag နဲ့တူပါတယ်။javascript attribute မှာ link tag လို့ပဲ type တူပါတယ် text/javascript ဖြစ်ပါတယ်။ src attribute ဟာ href လို့ပါပဲဖြစ်ပါတယ်။ဥပမာ-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About Link and script</title>
<link rel="stylesheet" href="application.css" type="text/css">
<script src="application.js" type="text/javascript">
alert('Hello World!');
</script>
</head>
<body>
</body>
</html>
Output Here
About iframe
နောက်တစ်ခုကတော့ iframe element ဖြစ်ပါတယ်။ မတူညီတဲ့ web page နှစ်ခုလိုအပ်ပါတယ်။ iframe element က တခြား page ပေါ်မှာ တစ်page ကို ဖော်ပြပြီး box နဲ့ ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။ HTML အကြောင်းများကြီး မလေ့လာခင် comment ကို သိထားရပါမယ်။ အဲ့တာက object တော့ မဟုတ်ပါဘူး။ Comment က code အကြောင်းတွေ့ကို note အဖြစ်ထည့်ပီးတော့ user တွေ့ကို တော့ တိတိကျကျပြမှာ မဟုတ်ပါဘူး။ user တွေ့က အဲ့ comment တွေ့ကို ကြည့်ချင်ရင် မြင်ရပါလိမ့်မယ်။ ဘယ်လို့ကြည့်ရင်မြင်နိုင်လဲဆိုရင်တော့ browser တိုင်းရဲ့ right click view page soruce ကြည့်ရင်မြင်နိုင်ပါတယ်။
iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About ifrmae</title>
</head>
<body>
<iframe src="another_page.html" width="500" height="400"></iframe>
</body>
</html>
another_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About ifrmae another page</title>
</head>
<body>
<!-- This is some text bleow paragraph -->
<p>
This is some text that will appear inside the iframe
</p>
</body>
</html>
Output Here
About Table(Rows & Headers)
table က tabular data တွေ့အတွက်သာလျှင် သုံးဖို့ ဖြစ်ပါတယ်။ table က page layout တွေ့အတွက် သုံးဖို့ စွဲဆောင်ဖို့ကောင်းနေရပါမယ်၊ အမြဲတမ်း ပေါက်ကတရဖြစ်မနေသင့်ပါဘူး။ အာ့ကြောင့် page layout က css နဲ့ပေါင်းပြီး ပိုကောင်းတဲ့ structured နဲ့ ပေါင်းစပ်သင့်တာဖြစ်ပါတယ်။ ကျနော့်တို့ဟာ table ကိုသုံးရင် <table></table> နဲ့ သုံးရပါမယ်။ table မှာ border ဆိုတဲ့ attribute ပါပါတယ်။ အဲ့ attr မှာ value 1 or 1 pixel ပါပေးရပါတယ်။ အာ့မှ css ကနေ table များသိသာအောင် border လေးခက်ပေးမှာဖြစ်ပါတယ်။ table မှာ အရှင်းဆုံးပြောရရင် tr ဆိုတဲ့ row နဲ့ td ဆိုတဲ့ column တို့ပါဝင်ပါတယ်။ အဲ့ tr ထည့်မှာမှ header တက်ချင်ရင် th ဆိုပီး သုံးပေးရပါတယ်။ ဥပမာလေးကြည့်လိုက်ရအောင် ရှင်းသွားအောင်။နောက်ထပ် table ကိုမှ row နဲ့ cell ကို အကျယ်ချဲ့ပြောမှာဖြစ်ပါတယ်။ table ကို structure ကျကျရေးမယ်ဆိုရင် သုံးပိုင်းရှိပါတယ် ပုံမှန်မှတ်လို့လွယ်အောင် table မှာလည်း header(<thead></thead>),body(<tbody></tbody>),footer(<tfooter></tfooter>) ဆိုပီးရှိပါတယ်။ ခုပြောမှာကတော့ table မှာ နောက်ထပ် attribute နှစ်ခုအကြောင်းဖြစ်ပါတယ်။ပထမတစ်ခုကတော့ cellpadding ဖြစ်ပြီး ဒုတိယတစ်ခုကတော့ cellspacing ဖြစ်ပါတယ်။ cellpadding က column ထဲ့မှာရှိတဲ့ cell ကို padding တွန်းပေးတာဖြစ်ပါတယ်။ cellspacing က table border ကနေ column ရဲ့ border ကို spacing ခြားပေးတာဖြစ်ပါတယ်။ th tag ရဲ့ attr က valign ဖြစ်ပြီး td tag ရဲ့ attr က align ဖြစ်ပါတယ်။ သူတို့နှစ်ခုလုံးရဲ့ ထားချင်တဲ့ပါဝင်တဲ့ value က သုံးမျိုးဖြစ်ပါတယ်။ td ရဲ့ value တွေ့က left,center, right တို့ဖြစ်ပါတယ်။ th ရဲ့ value တွေ့က top,middel,bottom တို့ဖြစ်ပါတယ်။ td,th တွေ့မှာ colspan, rowspan တို့ကိုသုံးနိုင်ပါတယ်။ သူတို့ကို အလွယ်မှတ်နိုင်ပါတယ်။ဥပမာ- colspan="2" ဆို column တခုက နှစ်ခုအဖြစ်နေရာယူပေးတာလို့ မှတ်နိုင်ပါတယ်၊ rowspan ကျ ပြောင်ပြန်မှတ်နိုင်ပါတယ် rowspan="2" ဆို row နှစ်ခုကို တခုကို အဖြစ်ယူပေးတာပေါ့။အဲ့တော့ တခုမှတ်မိရင် နှစ်ခုရပါပြီ။ကဲ့အောက်မှာ ဥပမာနှင့်တကွ ဖော်ပြပေးထားပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About Table</title>
</head>
<body>
<table border="1">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
</tr>
<tr>
<td>Oranges</td>
<td>Carrots</td>
</tr>
<tr>
<td>Apples</td>
<td>Broccoli</td>
</tr>
<tr>
<td>Strawberries</td>
<td>Asparagus</td>
</tr>
<tr>
<td></td>
<td>Potatoes</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About More Table Rows and Cells</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>Fruits</th>
<th>Vegetables</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2" align="center">Thanks u for buying</td>
</tr>
</tfoot>
<tr>
<td rowspan="2">Oranges</td>
<td>Carrots</td>
</tr>
<tr>
<!-- <td>Apples</td> -->
<td>Broccoli</td>
</tr>
<tr>
<td>Strawberries</td>
<td>Asparagus</td>
</tr>
<tr>
<td></td>
<td>Potatoes</td>
</tr>
</table>
</body>
</html>
Output Here
About Form Input-part1
form တခုတည်ဆောက်ရင် body tag ထဲ့မယ် ရေးရပြီး form မှာ opening form tag (<form>) နဲ့ closing form tag(</form>) ဆိုပီး ပါပါတယ်။ form မှာပါပါတဲ့ attribute အကြောင်းကိုပြောပြမှာဖြစ်ပါတယ်။ ပထမ attr ကတော့ action ဖြစ်ပါတယ်၊ သူက လိုအပ်ပါတယ်၊ user data ထည့်ပီး submit လုပ်လိုက်ပြီးတဲ့နောက်မှာ action attr ကတခြားweb page ကို လုပ်တာဖြစ်ပါတယ်။တခြား website ရဲ့ url ကိုသွားချင်ရင်လည်းရပါတယ်။ submit မလုပ်ရင် တခြား page ကိုမသွားပါဘူး form မှာရှိတဲ့ data တွေ့ကလည်း ဘာprocess မှလုပ်မှာမဟုတ်ပါဘူး။နေက်ထပ် attr က method ဖြစ်ပါတယ်။သူ့မှာ value နှစ်ခုပါဝင်ပါတယ် all capital letters နဲ့ POST, GETဆိုပီး ပါပါတယ်။ နောက်တစ်ခုက name attr ဖြစ်ပါတယ်။ သူက form တကယ်အလုပ်လုပ်မလုပ်ဖော်ပြပေးတာဖြစ်ပါတယ်။ form submit လုပ်ပြီးတဲ့အခါမှာ web server က form က data တွေ့ရမရ သိပါတယ်။ နောက်ထပ် form ထဲ့မှာပါတဲ့ input element အကြောင်းသွားရအောင်။ input element မှာ major 4ခုပါဝင်ပါတယ်၊ကျနော်တို့ သုံးချင်တဲ့ type attribute ပေါ်မူတည်ပြီး သုံးရမှာဖြစ်ပါတယ်။ ပထမ type attribute ကတော့ text ဖြစ်ပါတယ်၊ input မှာ name attr ပေးဖို့လိုအပ်ပါတယ်။ နောက်တခုက တော့ type မှာ password ဆိုတာဖြစ်ပါတယ်။ အဲ့နောက်တခုက radio ဖြစ်ပါတယ်၊ radio မှာ name တွေ့တူရပါမယ်၊ ဘာလို့လဲဆိုရင် name မတူရင် radio က နှစ်ခု သို့မဟုတ် ကိုယ်ရေးသလောက်select မှတ်လို့ရနေပါလိမ့်မယ်၊ radio ဆိုတဲ့သဘောတရားကတစ်ခုကိုပဲ select မှတ်ရတာ ဖြစ်ပါတယ်။ များကြီး select မှတ်ချင်ရင် နောက် attr ဖြစ်တဲ့ checkbox ကိုသုံးပါ။ ကဲ ဥပမာလေးကြည့်လိုက်ရအောင်။
<body>
<form action="#" method="POST">
<input type="text" name="username"><br>
<input type="password" name="password"><br>
<input type="radio" name="gender" value="Male">Male<br>
<input type="radio" name="gender" value="Female">Female<br>
<input type="checkbox" name="apple" id="">Apple <br>
<input type="checkbox" name="orange" id="">Orange <br>
<input type="checkbox" name="banana" id="">Banana <br>
<input type="submit" value="Onward!">
</form>
</body>
Output Here
About Textarea and Select
ပထမ အနေဲ့ textarea အကြောင်းပြောမှာဖြစ်ပါတယ်။သူ့မှာ input tag လို့ name ပါဖို့လိုအပ်ပါတယ်။ သူ့မှာ rows နဲ့ cols ဆိုပီး မတူညီတဲ့ attribute ပါလာတာဖြစ်ပါတယ်။ rows attr ကတော့ textarea ရဲ့ row အရေးအတွက်ထည့်ပေးရတာဖြစ်ပြီး၊ cols ကတော့ textarea ရဲ့ column အရေးအတွက် ထည့်ပေးရတာဖြစ်ပါတယ်။ တကယ်လို့ ကျနော့်တို့က radio button တွေ့များကြီးဆိုရင် select box ကိုသုံးသင့်ပါတယ်။ select က ဘယ်လို့လဲဆိုရင် သူ့မှာ ul, ol တို့လို့ပဲ option tag လေးတွေ့ထပ်လိုအပ်ပါတယ်။ဒါပေမဲ့ သူ့မှာလည်း attr name ပေးဖို့လိုအပ်ပါတယ်။ တူညီတဲ့ option တန်ဖို့းတွေ့ပါနေရင် optgroup tag ထဲ့မယ် option လေးတွေ့ထည့်သင့်ပါတယ်။ အဲ့တာဆို ကျနော့်တို့ select ရွေးတဲ့အခါမှာ ပိုမိုအဆင်ပြေမှာဖြစ်ပါတယ်။ဥပမာ-
<body>
<form action="#" method="POST">
<input type="text" name="username"><br>
<input type="password" name="password"><br>
<input type="radio" name="gender" value="Male">Male<br>
<input type="radio" name="gender" value="Female">Female<br>
<input type="checkbox" name="apple" id="">Apple <br>
<input type="checkbox" name="orange" id="">Orange <br>
<input type="checkbox" name="banana" id="">Banana <br>
<textarea name="eassier" id="" cols="30" rows="10"></textarea><br>
<select name="city" id="">
<optgroup label="America">
<option value="north_ameraca">North America</option>
<option value="south_ameraca">South America</option>
</optgroup>
<optgroup label="Eurasila">
<option value="europe">Europe</option>
<option value="asia">Asia</option>
</optgroup>
<option value="africa">Afirca</option>
<option value="austila">Austila</option>
<option value="anterctica">Anterctica</option>
</select><br>
<input type="submit" value="Onward!">
</form>
Output Here
About Fieldset and Label
နောက်ထပ် fieldset နဲ့ label တို့အကြာင်းတို့ကိုလေ့လာသွားမှာဖြစ်ပါတယ်။ fieldset က input တွေ့များကြီးကို ဘယ်ပိုင်းက ဘယ်လို့မျိုးပြောပြတာနေရာမယ် သုံးတာဖြစ်ပါတယ်။ သူ့မှာ laegend ဆိုတဲ့ title ပုံစံမျိူး ပါတာဖြစ်ပါတယ်။ legend ကို fieldset tag ရဲ့ အဖွင့်ပိတ်ကြားမှာ ရေးရတာဖြစ်ပါတယ်။ အရင်ဆုံး fieldset အဖွင့်ပိတ်ရေး အဲ့ကြားမှာ ပထမဦးဆုံး label ပုံစံ သို့မဟုတ် title ပုံစံ လိုမျိုး legend အဖွင့်ပိတ်ကြားမယ် စာသားရေးပေးရတာဖြစ်ပါတယ်။ အဲ့တော့မှ ကိုယ့်ခွဲချင်တဲ့ input element တွေ့ကို အစောက legend အောက်မှာ ရေးပေးရတာဖြစ်ပါတယ်။ အဲ့တာကတော့ fieldset အကြောင်းပဲဖြစ်ပါတယ်။ နောက်ထပ်တခုကတော့ label ဖြစ်ပါတယ်။ label က select box တွေ့ input box တွေ့ကို label တက်ချင်ရင်သုံးတာဖြစ်ပါတယ်။သူ့မှာလည်း for ဆိုတဲ့ attribute ပါပါတယ်။ အဲ့ထဲ့မှာမှ input နဲ့ဆိုင်တဲ့ သက်ဆိုင်ရာ name ပေးလို့ရပါတယ်။ label ရဲ့ for value က input or select တို့ရဲ့ id value နဲ့တူမှာသာလျှင် label တခုကို click လုပ်တာနဲ့ input or select တို့ကို သက်ဆိုင်ရာ focus လုပ်ပေးတာဖြစ်ပါတယ်။ကဲအောက်မှာ ဥပမာနှင့်တကွ ကြည့်လိုက်ရအောင်။
<body>
<form action="#" method="POST">
<fieldset>
<legend>Important Information</legend>
<label for="username">Username:</label>
<input type="text" name="username" id="username"><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password"><br>
<input type="radio" name="gender" value="Male" id="male">
<label for="male">Male</label>
<br>
<input type="radio" name="gender" value="Female" id="female">
<label for="female">Female</label>
<br>
<input type="checkbox" name="apple" id="apple"><label for="apple">Apple</label> <br>
<input type="checkbox" name="orange" id="orange"><label for="orange">Orange</label> <br>
<input type="checkbox" name="banana" id="banana"> <label for="banana">Banana</label> <br>
</fieldset>
<fieldset>
<legend>Optional Item</legend>
<label for="essay">We want to know about</label><br>
<textarea name="eassier" id="" cols="30" rows="10"></textarea><br>
<label for="city">Where are u from ?</label><br>
<select name="city" id="city">
<optgroup label="America">
<option value="north_ameraca">North America</option>
<option value="south_ameraca">South America</option>
</optgroup>
<optgroup label="Eurasila">
<option value="europe">Europe</option>
<option value="asia">Asia</option>
</optgroup>
<option value="africa">Afirca</option>
<option value="austila">Austila</option>
<option value="anterctica">Anterctica</option>
</select><br>
</fieldset>
<input type="submit" value="Onward!">
</form>
</body>
Output Here
Overview of TABLE
Web ဟာ text တွေ့ images တွေ့ပါဝင်ပါတယ်။များပြားလှတဲ့ နှစ်မှာsport scores ကဲ့သို့သော employee name listsတွေ့၊ email address တွေ့၊ အစားအစာတွေ့အတွက် အာဟာရဖြစ်တဲ့ အကြောင်းရာတွေ့ပါဝင်ပါတယ်။ HTML Table ဆိုတာ information တွေ့ပြဖို့ဖြစ်ပါတယ်၊တနည်းအားဖြင့် သူ့ကို tabular data လို့လည်းခေါ်ပါသေးတယ်။Information တွေကို columns တွေ rows တွေရဲ့ structure ပုံစံနဲ့ပဲ table ထဲမှာသိမ်းထားပါတယ်။ Table အတွက် အသုံးဝင်ပုံတွေအများကြီးရှိပါတယ်။ဒါ့ကြောင့် information တွေကိုဖော်ပြဖို့အမြဲတမ်းအသုံးပြုနေကြဖြစ်တဲ့ method တွေကိုပဲဖော်ပြမှာဖြစ်ပါတယ်။ table မှာအခြား html tag တွေဖြစ်တဲ့ paragraph တွေ text တွေထက်ပိုပါဝင်ပါတယ်။ CSS ပါဝင်ခြင်းက table တွေမှာ browser ကအလိုအလျှောက်သတ်မှတ်ပေးထားတာထက်ပိုပြီးကောင်းမွန်ပါတယ်။ ပထမဆုံး row မှာရှိတဲ့ table cell တွေဟာ regular data မဟုတ်ပဲ header အဖြစ် browser ,search engine နဲ့ screen readers တွေကသိဖို့အတွက် table header ကိုသုံးပါတယ်။ row (သို့) column တွေကို labeling လုပ်ဖို့ scope element ကိုသုံးပါတယ်။thead တွေ tbody တွေကိုသုံးခြင်းက css ကိုအသုံးပြုပြီး styling လုပ်တဲ့နေရာမှာပိုမိုကောင်းမွန်စေပါတယ်။ table footer element ကတော့ table ရဲ့နောက်ဆုံး cell ဖြစ်ပြီး အကျဉ်းချုပ်တွေကိုဖော်ပြပါတယ်။Caption element ကတော့ table ရဲ့ title ကိုအခြေခံပြီးတော့ table tag အဖွင့်ရဲ့နောက်ကပ်ရပ်မှာရေးရပါတယ်။ 1990 နောက်ပိုင်းနှင့် 2000s ကြားထဲအခြေအနေမှာဆိုရင်browser တွေရဲ့ web page layout တွေမှာ tables တွေကိုအသုံးပြုတာကကောင်းမွန်ခဲ့ပါတယ်။အခုအချိန်မှာတော့ browser တွေက တိုးတက်လာပြီဖြစ်တဲ့အတွက် အဲ့ဒီနည်းလမ်းတွေကကျန်ခဲ့ပါပြီ။အဲ့တာကြောင့်ကျွန်တော်တို့ဟာ tables တွေကို web browser ရဲ့ layout အဖြစ်ဘယ်တော့မှအသုံးမပြုသင့်ပါဘူး။tabular data တွေကိုဖော်ပြဖို့အတွက်ပဲ table တွေကိုအသုံးပြုကြပါတယ်။ ဒါပေမယ့် html email , table တွေမှာတော့ အသုံးပြုနေဆဲပဲဖြစ်ပါတယ်။ကိုက်ညီမှုတွေတွေ အဆင်ပြေမှုတွေရှိနေသေးသောကြောင့်ဖြစ်ပါတယ်။ကျွန်တော်တို့တည်ဆောက်ခဲ့တဲ့ table တွေကအသုံးပြုမှုမရှိသေးပါဘူး။အဲ့တာကြောင့်ကျွန်တော်တို့မှာရွေးချယ်ခွင့်နှစ်ခုရှိပါတယ်။friend end development ကိုလေ့လာဖို့ရွေးချယ်မယ်ဆိုရင် table တွေထဲကို jQuery အချို့ထည့်ဖို့အတွက်ကြိုးစားရပါမယ်။ အမှန်တကယ်ပါသော plug-inနဲ့ sorting တွေ filtering စတဲ့ feature တွေနဲ့ static table ဖြစ်ဖို့ပြူလုပ်ပေးရျမှာပဲဖြစ်ပါတယ်။ back end languages(ruby ,php ,python) ကိုလေ့လာမယ်ဆိုရင်တော့ database က data တွေကိုအသုံးပြုပြီး dynamic table တွေကို populated လုပ်နိုင်အောင်ကြိုးစားရပါမယ်။Database တွေက information ကို table ပုံစံနှင့်သိမ်းပါတယ်။data တွေကို database query မရေးပဲနဲ့အသုံးပြုရင် အချိန်တိုင်းပြောင်းလဲပေးနေဖို့လိုအပ်ပါတယ်။Html table ရဲ့အကြောင်းတွေကိုအကုန်ပြောပြပြီးပြီဖြစ်ပါတယ်။ Table တွေကို tabular data တွေအတွက်အသုံးပြုတယ်ဆိုတာတော့ကျွန်တော်တို့မေ့ထားလို့မရပါဘူး။
About Video and Audio
Text နဲ့ images တွေ့ဟာ web content ရဲ့ အခြေခံဖြစ်ပါတယ်။ ဒါပေမဲ့ အဲ့ထက်ပိုတဲ့ video တွေ့ audio တွေ့ဟာ content တွေ့ရောထားတဲ့ အရာတွေ့ရဲ့ အစိတ်ပိုင်းထဲ့က တစ်ခုဖြစ်ပါတယ်။ ကျနော့်တို့ media တွေ့ကို play ဖို့ video elements တွေ့နဲ့ audio elements တွေ့အကြောင်းလေ့လာကြည့်ရအောင်။ ကျနော့်တို့က အဲ့ video နဲ့ audio တွေ့မှာ caption တွေ့ ၊custom playback controls တွေ့ ဘယ်လို့ထပ်ထည့်ရမယ်ဆိုတာကို လေ့လာရမှာဖြစ်ပါတယ်။ web ပေါ်မှာ ရှိတဲ့ video က plugins တွေ့ကဲ့သို့သော QuickTime,Flash, RealPlayer စသည့်ဖြင့်ပါဝင်ဖို့ အသုံးပြုခဲ့တယ်။ သို့ပေးမဲ့လည်း browser plugins တွေ့ဟာ သုံးရတာလွယ်ကူဖို့အတွက် ဖုန်း အမျိုးစားတွေ့အတွက် ဘယ်ရီသက်တမ်းတွေ့အတွက် များပြားလှတဲ့အရာတွေ့အတွက် အမြဲတမ်းတော့ မကောင်းပါဘူး။ browser plugins ကို သုံးတာရှောင်းရှားနိုင်ရင် ရှောင်းရှားသင့်ပါတယ်။ ကံအားလျော်စွာ ကျနော့်တို့က plugings တွေ့မသုံးပဲ ဖန်တီနိုင်ပါတယ်။Video နဲ့ audio တို့ကို web page မှာထည့်ချင်က ပုံတွေ့ ၊ စာတွေ့ထည့်သလို့ပဲ လွယ်ကူပါတယ်အခြား element တွေအကြောင်းကိုလေ့လာရမှာဖြစ်ပေမယ့် video နဲ့ audio element ကအရေးအကြီးဆုံးဖြစ်ပါတယ်။ workplace အသုံးပြုပုံကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ အရေးကြီးတဲ့ အချက်က local web server setting အကြောင်းနဲ့ ဖိုင်းအလုပ်လုပ်ဖို့တို့ပါဝင်ပါတယ်။workplace ထဲ့မယ် project တစ်ခုဆောက်ပီးသား ရှိရပါမယ်။ ဆောက်ထားတဲ့ project ရဲ့ html file ထဲ့မယ်ရေးရမှာဖြစ်ပါတယ်။ video ဆောက်မယ်ဆို video ( <video></video>) ပါရမှာဖြစ်ပါတယ်။သူ့ထဲ့မှာမှ src က video url ထည့်ပေးရမှာဖြစ်ပြီး type မှာတော့ video/mp4 ဆိုပီး ထည့်ပေးရမှာဖြစ်ပါတယ်။ audio က video နဲ့ တူပါတယ်။ audio ဆိုပီး အဖွင့်ပိတ်ကြားမယ် ရေးရမယ်ဖြစ်ပြီး type မှာတော့ audio/mp3 ဆိုပီးပြောင်းလဲလိုက်ရင်ရပါပြီ။ audio ကိုအသေးစိတ်ထပ်လေ့လာချင်ရင် audio mdn ဆိုပီး google မှာ ထပ်လေ့လာနိုင်ပါတယ်။video ကိုလည်းအသေးစိတ်လေ့လာချင်ရင် video mdn ဆိုပီး google မှာ ရှာရမှာ ဖြစ်ပါတယ်။နောက်ထပ် video မှာ caption လေးတွေ့တပ်ဖို့လိုပါတယ်။ ဘာလို့လဲဆိုရင် ကျနော်တို့ဟာ တခြားနိုင်ငံခြားကားကြည့်တဲ့ခါမျိုးမှာ သူ့များရဲ့ languange ကို နားမလည်းကျဘူး၊ ဒါပေမဲ့ subtitle or caption လေးတွေ့ပါတော့ ကျနော့်တို့ နားလည်တယ်။ကျနော့်တို့မှာ earphone မရှိတာဖြစ်ဖြစ်၊ ပြောတာကိုး နားမလည်တာဖြစ်ဖြစ် အတွက်ဖြစ်ပါတယ်။ ကျနော့်တို့ ကအဲ့တော့ာ video တွေ့မှာ caption တက်ဖို့ဆိုရင် file type နှစ်မျိုးရှိပါတယ်။ SRT file နဲ့ web VTT file ဖြစ်ပါတယ်။ ကျနော့်တို့က workplace မှာ .vtt file ဆောက်ရပါမယ်။ WebVTT က အလွန်တိကျတဲ့ file format ဖြစ်ပါတယ်။အဲ့တာကြောင့် ကျနော့်တို့က တိကျဖို့လိုအပ်ပါတယ်။ ကိုယ်ရေးထားတဲ့ webvtt file ကို မှန်မမှန်စစ်ချင်ရင်တော့ https://quuz.org/webvtt/ အဲ့ linkမှာ စစ်ဆေးနိုင်ပါတယ်။
<video src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/mp4" width="400"></video>
<audio controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"
type="audio/mp3">
</audio>
VTT FILE Example
WEBVTT FILE
0
00:00:00.500 --> 00:00:05.000
[truck engine]
1
00:00:06.000 --> 00:00:10.000
[bird chriping]
2
00:00:13.000 --> 00:00:16.000
[schhool bus engine]
3
00:00:17.000 --> 00:00:24.350
[water flowing]
4
00:00:24.350 --> 00:00:30.000
[water flowing continue]
About Create Media
web page create လုပ်တဲ့အခါမှာ media file size ကကြီးနေရင် loading ကြာကြီးကြာနေလိမ့်မယ်။အဲ့လိုဆို ကျနော့်တို့က အဲ့video ကို file size သေးဖို့ အရေးကြီးပါတယ်၊ ဒါပေမဲ့ အသံဖိုင်းတွေ့လည်းကောင်းရပါမယ်။ file size သေးဖို့ program နှစ်ခုရှိပါတယ်။ပထမကတော့ VLC သို့မဟုတ် ဒုတိယကတော့ VideoLAN ဖြစ်ပါတယ်။ သူတို့က medial player တွေ့ဖြစ်ပါတယ်၊ဒါပေမဲ့ သူတို့နှစ်ခုကထဲ့က တခုကတော့ video convert လုပ်နိုင်ပါတယ်။ မင်းက တခြား program ဖြစ်တဲ့ adobe media encoder သို့မဟုတ် nonlinear video editor တို့ကိုလည်းသုံးနိင်ပါတယ်။ convert လုပ်မယ်ဆိုရင် အနည်းဆုံး H.264 လောက်တော့ လိုအပ်ပါတယ်။ အာ့ဆိုရင်တော့ internet explorer နဲ့ Safari တို့က Support ပေးပါတယ်။ သို့ပေမယ်လည်း Ogg Theora အရ ဖိုင်းကိုရဖို့ဆိုရင် VLC က ကောင်းစွာ အလုပ်လုပ်ပါတယ်။ အာ့ကြောင့် ကျနော့်တို့က ခုပဲ VLC ကို download လုပ်ဖို့ လိုအပ်သွားပါပြီး။မင်းက mac မှာဆိုရင် download လုပ်ပြီးတဲ့ခါမှာ ဆိုရင် file အောက်မှာ Convert/ Stream ကို နှိပ်ပြီး Convert & Stream ဆိုပီး dialog box တက်လာပါလိမ့်မယ်။ အဲ့မှာ open media ကို နှိပ်ပြီး ကိုယ်ပြောင်မယ့် video file ကို နှိပ်ပါ။ နှိပ်ပြီးတဲ့ခါမှာ ကျနော့်တို့ profile မှာ ပထမတခါက ရွေးပီးသားဖြစ်နေပါလိမ့်မယ်။ပြီးတော့ Choose desination မှာ output ထွက်မယ့်လမ်းြကောင်းရွေးပါ၊ ရွေးပြီးရင် save လုပ်လိုက်ပါ။ save လုပ်လိုက်တာ အဲ့တာစပြောင်နေပါပြီး။ကျနော့်တို့ဟာ default ဖြစ်တဲ့ Encapsulation ကို မလုပ်ချင်ဘူးဆိုရင် Video codec မှာပြောင်းနိုင်ပါပြီ ။ Birate မှာ ဥပမာ - 10000, frame rate မှာ 24, width မှာ 1280 ဆိုရင်, height မှာ 720 ။
HTML Dialog
ဝက်ဆိုက်တွေ့ကို ဝင်ရောက်လေ့လာတဲ့အခါမှာ တချို့websiteတွေ့မှာ dialogue box ကိုဖြတ်ပြီးမှသွားရတာတို့ တွေ့ရပါလိမ့်မယ်။ web app မှာ ကျနော့်တို့ confirmပေးမှသာလျှင် သို့မဟုတ် email address ကို sign up လုပ်မှသာလျှင် သတင်းအတွက် ပြောင်းလဲမှုကိုရပါမယ်။ အဲ့တာဟာ လူတွေ့များသုံးတဲ့ user interface design ဖြစ်ပြီ ထပ်ခါထပ်ခါလာနေတာကို တွေ့ရပါမယ်။ အဲ့တာကြောင့် W3C က dialog window ဖော်ပြဖို့ တချို့သော standard ကျတဲ့ HTML markup ကိုဖန်တီးခဲ့ပါတယ်။ Dialog က တစ်ခြားသော HTML markup နဲ့ ဖန်တီးပြီးတော့ CSS က front end frameworks အများစုကို အချိန်ကြာကြီး ဖန်တီးခဲ့တာ ဖြစ်ပါတယ်။ Dialog က browser တိုင်းတော့လုပ်မှာမဟုတ်ပါဘူး။ front end frameworks တွေ့က အကောင်းဆုံးရှိနေသေးရင် standard ကျတဲ့ dialogue element ကို ဘာကြောင့်ဖန်တီးခဲ့တာလဲ့ဆိုရင် အဲ့တာက ကျနော့်တို့မှာ reansons များကြီးရှိပါတယ်။ ဘယ်လို့လဲ့ဆိုရင် screen readers သုံးချင်တာရယ်၊ search engines တွေ့အတွက် သုံးချင်တာရယ် ၊ machine learning agent ဟာ interpret လုပ်ချင်တာရယ် အဲ့လို့မျိုးကြောင့် diaog window ကို ဖန်တီးတာဖြစ်ပါတယ်။
<body>
<dialog id="dialogWindow">
<form method="dialog">
<input type="text">
<button type="submit">Ok</button>
</form>
</dialog>
<button id="openDialog">Open Dialog</button>
<button id="openModalDialog">Open Modal Dialog</button>
<script src="app.js"></script>
</body>
app.js
(function(){
//Gather page elements
var openDialog =document.getElementById('openDialog');
var openModalDialog = document.getElementById('openModalDialog');
var dialogWindow = document.getElementById('dialogWindow');
//Open the dialog window normally
openDialog.addEventListener('click', function() {
dialogWindow.show();
});
//Open the dialog window normally
openModalDialog.addEventListener('click', function() {
dialogWindow.showModal();
});
})();
Output Here
Responsive Image
Web browser devicesတွေ့က sizes,resolutions, pixel densities စတာတွေ့ကနေ လာတာဖြစ်ပါတယ်။အများအားဖြင့်တော့ landscape သို့မဟုတ် portrait တို့ဖြစ်ပါတယ်။ ကျနော်တို့က media query ကိုသုံးပီး ကျနော့်တို့ရဲ့ webpage layout ကို ချိန်ညှီနိုင်ပါတယ်၊ ဒါပေမဲ့ image ဆိုတာဘာလဲ။image ဆိုတာ image ရဲ့ src attribute ကနေ device တိုင်းကို ပုံပို့ပေးရတာဖြစ်ပါတယ်၊အာ့ကြောင့် များပြားလှတဲ့ ဖြစ်စဉ်တွေ့မှာ မှန်ကန်တဲ့ technique က ရှိနေတုန်းဖြစ်ပါတယ်။ မတူညီတဲ့ device တိုင်းကို မတူညီတဲ့ ပုံတွေ့ပိုဖို့ အချိုသော ပြသနာတွေ့ရှိပါတယ်။ ကျနော်တို့မှာရှိတဲ့ image အကြောင်းကိုပြောချင်ပါတယ် screen ပေါ်မှာ image က space များကြီးကို ယူတာ ကျနော့်တို့ သိထားသင့်ပါတယ် eg-photobackground။ ကျနော်တို့က မြင့်မားလှတဲ့ DPI screen တွေ့၊ Apples' retina displays တွေ့၊ ခေတ်ပေါ် phone တွေ့အတွက် resolution က နှစ်ဆလိုအပ်ပါတယ်။ သို့ပေမယ်လည်း ကျနော်တို့က mobile device တခုပေါ် ပုံတပုံ ပို့မယ်ဆိုရင် 1 x resolution ပဲလိုပါတယ်၊ သေးငယ်လှတဲ့ screen မှာတော့ ဘယ်လို့backgroundမဆို မပြတော့ဘူးဖြစ်ပါတယ်။ အဲ့တာက page load ချိန်မှာ pageကို နှေးသွားစေပါတယ်။ Reponsive image တွေ့ရဲ့အကောင်းဆုံး အခြေခံကတော့ ပုံကြီးတဲ့ imageကို device အားလုံးဆီ ပို့ရမယ်ဖြစ်ပါတယ်၊ အဲ့တာက အကောင်းဆုံးလို့ မျှော်လင့်လို့ရပါတယ်။ကျနော် HTML attributes နှစ်ခုနဲ့ HTML element အကြောင်းပြောချင်ပါတယ်။ Attribute လို့ခေါ်တဲ့ source set,sizes,element တွေ့ဟာ picture element ဖြစ်ပါတယ်။ makup ရဲ့ အပိုင်းအစတွေ့က resolution, pixel ပေါ်အခြေခံပီး မှန်ကန်တဲ့ device ဆီ မှန်ကန်တဲ့ image ပို့ဖို့ ခွင့်ပြုပေးတာ ဖြစ်ပါတယ်။ CSS background နဲ့ media query တို့ပေါင်းရင် devices က လိုအပ်လို့ရှိရင် image ကို download လုပ်ရပါလိမ့်မယ်။တစ်ခါတရံမှာ css layoutကန့်သတ်ချက်တွေ့အတွက် technical reasons တွေ့ရှိပါတယ် ဘာလို့လဲဆိုရင် backend server တခုက HTML မှာ image ထည့်ဖို့ HTML ကို generate ထုတ်ပေးနိုင်ပါတယ်၊ဒါပေမဲ့ css မှာတော့ မထုတ်နိုင်ပါဘူး။ အကောင်းဆုံး အကြောင်းပြချက်ကတော့ များပြားလှတဲ့ images က content ဖြစ်ပါတယ်။ images တွေ့ပါတာက SEO, accessibility, RSS Feeds တွေ့ အတွက် ကောင်းပါတယ်။ ရေဘူးရ စီးမျဉ်းအဖြစ် images တွေ့က HTML မှာရှိတဲ့ content တွေ့ဖြစ်ပါတယ်။ပြီးတော့ presentation အတွက် လွယ်ကူတယ်၊ Wallpaper background ပုံတွေ့ ထပ်နေရင်တော့ CSS မှာ သွားရေးရမှာဖြစ်ပါတယ်။ Javascript နဲ့ image ပို့တာက HTML, CSS ထက် ပိုerror ရှိတာဖြစ်ပါတယ်။Respnsive Image ကို မပြောပြခင် ကျနော့်တို့ image အကြောင်းလေးကို အရင်းပြောပြပေးမှာဖြစ်ပါတယ်။ ကျနော့်တို့ သိပြီးသားဖြစ်တဲ့ SVGs လို့ခေါ်တဲ့ sclable vector graphics က images တွေ့ထဲ့မယ် အကောင်းဆုံး option တစ်ခုဖြစ်ပါတယ်။သူက pixcel densities resolutions ကော sizes တော်တော်များကော လုပ်ပါတယ်။ အာ့ကြောင့် SVGs က mark-up ဖြစ်ပါတယ်၊ Queries media သုံးပီးတော့ page layout တို့ကို ပြုပြင်နိုင်ပါတယ်။ SVGs image အတွက် အကောင်းဆုံးအလုပ်လုပ်တယ်၊သူ့မှာ fiile size ကတော့ကြီးတယ် flat colors တွေ့လည်းရှိတယ်။ images မှာ file type များစွာရှိပါတယ်(svg,png,jpeg,jpg,webp,gif)။ အများအားဖြင့်တော့ jpeg or png or jpg တို့သုံးတာများပါတယ်။animate လုပ်ချင်ရင်တော့ gif ကိုသုံးပါတယ်။jpeg က digital photography တွေ့အတွက်ပဲ သုံးပါတယ်။ ကျနော်တို့ web page layout တွေ့အတွက် image မှာ width,height တွေ့ပေးရပါတယ်။အဲ့လို့ width height filesize ကို ပြုပြင်ချင်ရင် phtotoshop ကဲ့သို့သော software tool တွေ့သုံးပေးရပါတယ်။picture element နဲ့အတူ soruce set attribute တွေ့၊ sizes attributes တွေ့ က ပုံတွေ့ကို ပို့ဆောင်ပေးဖို့ ခွင့်ပြုပေးတာဖြစ်ပါတယ်။ device တစ်ခုဟာ 1x pixel density ကြီးမားတဲ့ display ရှိရင်သို့မဟုတ် သေးငယ်တဲ့ mobile screen က 2 x pixel density ရှိမယ်ဆိုရင် ကျနော့်တို့ အဲ့eleement တွေ့ကို bandwidth တွေ့ဖြုန်းတီးတာ သို့မဟုတ် resolution နိမ့်တဲ့element တွေ့ကို ပို့ဆောင်းတာထက် လက်တွေ့ကျကျအတွေ့ကြုံပေါ်မူတည်ပြီးတော့ ဂရုစိုက်သင့်ပါတယ်။ old browsers မှာ HTML ရဲ့ အစိတ်ပိုင်းအသစ်တွေ့ကို လက်ရှိbrowser အတိုင်း ပေါ်ချင်ရင် polyfill လို့ခေါ်တဲ့ Javascript အပိုင်းတွေ့ပါဝင်လာမှာဖြစ်ပါတယ်။ polyfill က browser မှာ specific features တွေကိုပြီးမြောက်စေနိုင်ပေမယ့် အဲ့ဒီfeatures တွေရဲ့မူလကိုတော့ထောက်ပံ့မပေးနိုင်ပါဘူး။ ပြီးတော့ broswer က polyfill ကိုတော့ သုံးမှာ မဟုတ်ပါဘူး။ plyfill သုံးတဲ့ဖြစ်စဉ်ကိုတော့ picturefill လို့ခေါ်ပါတယ်။ကျနော်တို့ ထပ်လေ့လာရမှာကတော့ sourceset attribute ဖြစ်ပါတယ်။ အမျိုးမျိုးသော image resource တွေ့က browser မှာ အသုံးပြုနိုင်ပါတယ်။ size attribute က CSS media condition တစ်ခုသို့မဟုတ် တခုထက်ပိုပါတယ်၊ length unit မှာ ဆုံးပါတယ်။ layout မှာ image က space ဘယ်လောက်ယူလဲဆိုတာ ပြောပြတာဖြစ်ပါတယ်။ဘာကြောင့်လဲဆိုရင်တော့ image ရဲ့ size ကို broswer နဲ့ချိန်ညှီရမှာဖြစ်ပါတယ်။ ဥပမာ - 1000pixels မှာရှိတဲ့ 2x image ကို layout မှာ 500 pixels ညီမျှအောင်အမှန်တကယ် အသုံးပြုနိုင်ပါတယ်။ source set attr ထည့်မယ် ပုံ large,medium,small size စတာတွေ့ကို comma ပြီး ရေးပေးရမှာဖြစ်ပါတ်ယ။ အဲ့လို့ရေးထားတာဆိုရင် screen မှာ ရှိတဲ့ browser အလိုက် ပုံsize က change ပေးမှာဖြစ်ပါတယ်။ ပုံsize change သွားတာကို brower ကို inspect ထောက်ပီး network ထည့်မယ်ကြည့်နိုင်ပါတယ်။ Art direction က အမျိုးမျိုးသော devices တွေ့ ပေါ်မှာ မြင်နိုင်တဲ့ imageရဲ့အရေးကြီးဆုံး အပိုင်းဖြစ်ပြီး ပုံဆွဲဖို့အတွက် နည်းပညာဖြစ်ပါတယ်။ ကျနော့်တို့က art direction ကို ဘယ်လို့ချိန်မှာ လိုတာလဲဆိုရင် screen အကြီးမှာတော့ ပုံကိုအားလုံးမြင်ရပြီ screen သေးသွားတဲ့ခါမှာ ပုံရဲ့ focal point ကို မမြင်ရတော့ပါဘူး အဲ့လို့ချိန်မှာ ပုံရဲ့ကိုယ်မြင်ချင်တဲ့ focal point ကို ဖြတ်ပြီးပြဖို့ နေရာမယ်လိုအပ်တာဖြစ်ပါတယ်။
About Basic HTML and CSS
HTML နဲ့ CSS ဟာ languages နှစ်ခုဖြစ်ပြီတော့ ကျနော်တို့က structure နဲ့ style webpages တွေ့ကို အတူတကွ သုံးတာဖြစ်ပါတယ်။ web ပေါ်မှာ တော်တော်များက HTML နဲ့ CSS သုံးကျတာဖြစ်ပါတယ်။ တချို့သော websites တွေ့မှာ ကြီးမားပြီးတော့ ရှုပ်ထွေးပါတယ် eg- Pinterest, Twitter ။ HTML က hypertext markup language အတွက် ရပ်တည်နေပြီ၊ အရိုးရှင်းဆုံး tag တွေ့နဲ့အဖွဲစည်းဖြစ်ပါတယ်၊ ပြီတော့ ကျနော်တို့ရဲ့ webpages ကို browser မှာ ဘယ်လို့structure နဲ့ ဖော်ပြဖို့သုံးတာဖြစ်ပါတယ်။ CSS or Cascading style sheets က browserကို content တွေ့ကို ဘယ်လို့ရောင်နဲ့ပေါ်ကွာလို့ပြောတဲ့နေရာမှာ သုံးတာဖြစ်ပါတယ်။ ကျနော်တို့ရဲ့ HTML နဲ့ ကျနော်တို့က browser ကို ကျနော့်တို့ရဲ့ web site မှာ paragraph တွေ့ကို ဘယ်လို့သီးခြားပိုင်းနဲ့ ပြောတဲ့နေရာမယ်သုံးပါတယ်။ CSS ကတော့ browser ကို ကျနော်တို့ရဲ့ website မှာ ဘယ်လို့ပေါ်ဆိုတဲ့ ပြထားတဲ့ကောင်ကို ဘာရောင်နဲ့ပြကွာ လို့ပြောတဲ့နေရာမယ်သုံးတာဖြစ်ပါတယ်။ CSS က မင်းရဲ့ cotent တွေ့ကို funny animations နဲ့လည်းပြနိုင်ပါတယ်။ websites တော်တော်များများမှာ javascript နဲ့ effects တွေ့ interactivity တွေ့ကိုထည့်ပြီ data တွေ့ ထည့်သွင်းတာ ပြန်ထုတ်ပြတာလုပ်ဖို့ဆို server နဲ့ ချိတ်ဆက်ပါတယ်။ HTML နဲ့ CSS ဟာ အခြေခံအဆောက်အုံဖြစ်ပြီ browser မှာမြင်ရအောင် ပြုလုပ်ပေးတာဖြစ်ပါတယ်။ HTML က opening tag နဲ့ closing tag နဲ့ရေးရတာဖြစ်ပါတယ်။ tag တော်တော်များက openging tag နဲ့ closing tag တို့ပါဝင်တာဖြစ်ပါတယ်။ HTML မယ် id ရဲ့ value ကို တခုပဲပေးရပါတယ်၊ သူ့ကို css မှာသုံးချင်ရင်တော့ id nameရဲ့ value ရှေ့မယ် hash(#) ခံပြီ သူ့ရဲ့နောက်မှာ bracket({}) အဖွင့်ပိတ်ပါရပါတယ်။အဲ့ကြားမှာမှ css element တွေ့ရေးရတာဖြစ်ပါတယ်။ class attribute မှာတော့ name တွေ့ကို တစ်ခုထက်ပိုရေးလို့ရပါတယ်၊ သူ့ကို css မှာရေးချင်ရင်တော့ name ရဲ့ရှေ့မှာ dot (.) ခံပြီသူ့ရဲ့နောက်မှာ bracket({}) အဖွင့်ပိတ်ကြားမယ်ရေးရတာဖြစ်ပါတယ်။
Structural Foundation
HTML မယ် အခြေခံအားဖြင့် box နှစ်မျိုးရှိပါတယ် head နဲ့ body ဖြစ်ပါတယ်။head box က userကို မမြင်ရပပါဘူး ဆိုပေမယ့် သူကwebpage အတွက်ပါဖို့ အရေးကြီးပါတယ်။ body boxထဲ့မယ် ကိုယ်ကလွတ်လွတ်ရေးလို့ရပါတယ်။ designer တွေ့က body ကို boxသုံးပိုင်းခွဲပါတယ်၊header,main,footer တို့ဖြစ်ပါတယ်။ Header မယ်က company logo, site name, purpose of site,navigation menu တို့ဖြစ်ပါတယ်။ main ထဲ့မယ်က user ပြချင်တဲ့ content data တွေ့၊ image တွေ့ စသည့်ဖြင့်ပြလို့ရပါတယ်။ footer မယ်ဆိုရင်တော့ copy right တွေ့ short link တွေ့၊ တချို့site တွေ့မှာ socia media embed ဆိုပီအသီးသီးရှိကျပါတယ်။
About Images and Paragraph
images မပါတဲ့ website ကိုကြည့်ရတာဟာ ပျင်းစရာကောင်းနေပါလိမ့်မယ်။ images ပါတဲ့ website ဟာ ကြည့်ရတာ စွဲမက်ဖွယ်ကောင်းနေပါလိမ့်မယ်။ အာ့ကြောင့် ကျနော့်တို့ website မှာ images တွေ့ထည့်ဖို့လိုပါတယ်။ HTML tags အများစုမှာ attributes လို့ခေါ်တဲ့ additional information တွေ့ထည့်နိုင်ပါတယ်။ Attribute က browser ကို instructions ပေးနိုင်ပါတယ်။ eg- image tag မှာဆိုရင် attribute သုံးခုဆိုပါဆို class,source,alt ။ အာ့ဆိုရင် class မှာ name ပေးပီ css မှာ ဘယ်လောက်widthရေးပြီ browser ကို အဲ့width အတိုင်းပဲပေါ်ကွာလို့ပြောလို့ရပါတယ်။ နောက်ထပ် source ကကျတော့ ဘယ်folder အောက်က ဘယ်ပုံ၊ ဘယ်websiteက ဘယ်ပုံ ပေါ်ကွာလို့ broswer ကို instruction ပေးနိုင်ပါတယ်။ alt ကကျတော့ src ပတ်လမ်းကြောင်းမှားတဲ့ခါကျရင် user ကို alt ထဲ့က စားသားလေးပြပြီး၊ src မှန်ရင်တော့ user က သူသိချင်တဲ့အကြောင်းရာကို google ကနေ ရှာတဲ့ခါကျ user ရှာတဲ့စာသားနဲ့ alt tag ထဲ့မယ်ရှိတဲ့စာသားနဲ့ ကိုက်ရင်ဖြစ်ဖြစ် နီးစပ်ရင်ပဲဖြစ်ဖြစ် ငါတို့website ပေါ်ကွာလို့ browser ကို instruction ပေးနိုင်ပါတယ်။နောက်ထပ် paragraph အကြောင်းလေးဆက်ပြောသွားရအောင်။ paragraph တွေ့ကို ဒီအတိုင်းရေးမယ်ဆိုရင် broswer မှာဖတ်ရတာ အဆင်မပြေပါဘူး။ ဘာလို့လဲဆိုရင် စာသားတွေ့ကို ပြွတ်သိပ်ပြီး ကြည့်ရတာလည်းမကောင်းဘူး ဖတ်ရတာလည်း မလွယ်ကူဘူး ဖြစ်နေပါလိမ့်မယ်။ အာ့ကြောင့် ကျနော့်တို့က စာသားတွေ့ကို p tag ထဲ့မယ်ရေးရမှာဖြစ်ပါတယ်။ p tag ထဲ့မယ်ရေးခြင်းအားဖြင့် p tag မှာ css ဖြစ်တဲ့ default ပါတဲ့ margin တွေ့တို့ align တို့က စာသားကိုဖတ်ရလွယ်ကူအောင် ပြွတ်သိပ်မသွားအောင် လုပ်ဆောင်ပေးပါလိမ့်မယ်။
About Anchor Tag
links က internet ပေါ်မှာ တနေ့ရာနဲ့ တနေရာ အပြန်လှန်ချိတ်ဆက်ပေးဖို့ ဖြစ်ပါတယ်။ မြင်လွယ်အောင်ပြောရရင် ခု ကျနော့်တို့ fb မှာ post တွေ့ကို share တာဟာ အဲ့တာ link ဖြစ်ပါတယ်။ ကျနော့်တို့ website မှာ တစ် page ထဲ့မယ် ထိပ်ကနေ အောက်ဆုံးကို တန်သွားချင်ရင် သုံးတာလည်း link ဖြစ်ပါတယ်။ဥပမာ - href မှာ hash နဲ့name ရေးရပြီ ကိုယ့်သွားချင်တဲ့ section မှာ id ပေးပြီ အစောက ပေးခဲ့တဲ့ name ရေးပေးရမှာဖြစ်ပါတယ်။အာ့ဆိုရင်တော့ ကျနော့်တို့က ထိပ်ကနေ အောက်သွားချင်တာပဲဖြစ်ဖြစ် အောက်ကနေ ထိပ်သွားချင်တာပဲဖြစ်ဖြစ် သုံးလို့ရပါပြီ။ တစ်pageကနေ တခြားwebsite သို့မဟုတ် တစ်ခြား page ကို သွားချင်ရင်တော့ full url ထည့်ပေးရပါတယ်။တစ်ခြား page ကို သွားချင်တာဖြစ်ဖြစ် တခြားwebsite ကိုသွားချင်တာဖြစ်ဖြစ် full url ထည့်ပေးတာက အဲ့ link ကိုတော့သွားပါတယ်။ဒါပေမယ့် ကျနော့်တို့ ခုလက်ရှိpageက ကျန်မနေဘဲ လက်ရှိpage မှာ ကိုယ့်သွားခဲ့တဲ့ link ကိုပဲမြင်ရပါလိမ့်မယ်။အဲ့လို့မျိုးအခြေနေကျရင် ကိုယ့်လက်ရှိ page ကိုလည်းမြင်ချင်တယ်၊ ကိုယ်နှိပ်တဲ့ link ကိုလည်းမြင်ချင်တယ်ဆိုရင် a tag မှာ target attribute ထည့်ပေးရပြီ သူ့ရဲ့ value မယ် underscroll blank(_blank) ထည့်ပေးရပါတယ်။
About HTML Lists
HTML မှာ listsတွေ့များကြီးကို ကျနော့်တို့ အသုံးပြုခဲ့ဖူးပါလိမ့်မယ်။ HTML Lists က ရိုးရှင်တဲ့ numbered lsits သို့မဟုတ် unnumbered lists တို့ဖြစ်ပါတယ်။ numbered lists က ol tag (<ol></ol>) နဲ့ရေးရပြီ unnumbered list က ul tag(<ul></ul>) နဲ့ရေးရပါတယ်။ အဲ့ ul သို့မဟုတ် ol tagထဲ့မှာမှ list item တွေ့ဖြစ်တဲ့ list tag(<li></li>) ပါပေးရမှာဖြစ်ပါတယ်။
About Select and Style
CSS မပါတဲ့ websites အားလုံးဟာ အဖြူရောင်plain pageပေါ်မှာရှိတဲ့ စာအများပြားရှိတာနဲ့ အတူတူဖြစ်နေပါလိမ့်မယ်။ CSS က ကျနော့်တို့ရဲ့ website မှာရှိတဲ့ color,size,shape,border,shadow,animation စတဲ့ ဖြစ်နိုင်ချေတွေ့ကို ထိန်းချုပ်နိုင်ပါတယ်။ ကျနော့်တို့ web siteကို လှပအောင် css ကိုသုံးရပါတယ်။ ကျနော့်တို့ html မှာရှိတဲ့ ကိုယ်ရေးချင်တဲ့ပိုင်းကို class or id မှာ name ပေးပြီ css မှာသုံးနိုင်ပါတယ်။ ကျနော့်တို့က id ပေးထားတာဆိုရင်တော့ css မှာ hash ကိုယ့်ပေးခဲ့တဲ့ name (#name) အဲ့နော်မှာမှ opening curly brace(opening bracket) နဲ့ closing curly brace ကြားမှာ style element တွေ့ရေးရတာဖြစ်ပါတယ်။ class ပေးထားတာဆိုရင်တော့ dot ကိုယ်ပေးခဲ့တဲ့ name(.name) ၊ အဲ့နောက်မှာမှ အစောကလိုပဲ opening bracket နဲ့ closing bracket ကြားမယ်ရေးရတာဖြစ်ပါတယ်။ style element တိုင်းရဲ့နောက်ဆုံးမယ် simicoma ရေးဖို့ မမေ့ရပါဘူး။ CSS မှာ .name နဲ့ တခါရေးထားလိုရှိရင် အဲ့style element တိုင်းပြန်သုံးချင်ရင် နှစ်ခါပြန်ရေးစရာမလိုဘဲ html element မယ် class မှာ CSS ရေးခဲ့တဲ့ ကိုယ်သုံးမယ့် name ပေးလိုက်ရင် တစ်ခါတည်းနဲ့ html element မယ် အဲ့ပုံစံအတိုင်းလိုချင်တာဆိုရင် လိုသလောက် ခေါ်သုံးလို့ရမှာဖြစ်ပါတယ်။
Output Here
About Padding and Margin
space တွေ့ကို ချိန်ညှီချင်ရင် padding နဲ့ margin ကိုသုံးရပါတယ်။ padding က border box ရဲ့ အတွင်းဘက်ကနေ space ကနေချိန်ညှီပေးတာဖြစ်ပါတယ်။ Margin ကတော့ border box ရဲ့ အပြင်ဘက်ကနေ space တွေ့ကို ချိန်ညှီပေးတာဖြစ်ပါတယ်။
Create HTML,CSS,Link
HTML Page တစ်ခုရေးပါမယ်။ ပထမ HTML page ရဲ့ body tag ထဲ့ကို image ထည့်မှာဖြစ်ပါတယ်။ image ရေးမယ်ဆိုရင် ကျနော့်တို့အရင်လေ့လာခဲ့တဲ့ source attribute နဲ့ alt attribute တို့ကိုပြန်မှတ်မိဖို့လိုပါတယ်။ source attr က image ရဲ့ ပတ်လမ်းကြောင်းထည့်ရတာဖြစ်ပြီ alt attr ကတော့ screen reader တွေ့ accessibility တွေ့အတွက် ဖြစ်ပါတယ်။ ပုံအောက်မှာမှ ခေါင်းစဉ်တပ်ချင်ရင် head tag (၆)ခု တွေ့ထဲ့က တခုကို သုံးပေးရမှာဖြစ်ပါတယ်။ Content ကို lists ပုံစံအနေနဲ့ ပြသပေးပါမှာဖြစ်ပါတယ်။ ဥပမာ-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About Create HTML</title>
<link rel="stylesheet" href="resume.css">
</head>
<body>
<img src="http://placeimg.com/200/200/any" alt="About Creating HTML in Introduction to HTML" srcset="">
<h1>Treasure Proth, WebDeveloper</h1>
<h2 class="summary">Summary of Qualifications</h2>
<ul>
<li>FreeLance Webdeveloper</li>
<li>HTML,CSS,Javascript,Web Developer</li>
<li>Bechalor of Economics</li>
</ul>
<p>
<span class="note">Note:</span>
if you want to visit referance link,u can visit this follow link.
</p>
<a href="http://csstricks.com/" target="_blank">Referance Link</a>
</body>
</html>
resume.css
.summary{
color: blue;
}
.note{
color: red;
font-size: 19px;
}
Output Here
Wire frames
ကိုယ်ပိုင် website project တစ်ခုဖန်တီးတဲ့ခါမှာ design ကို ဒီဖြစ်စဉ်မှာ မင်းကြိုက်သလို့ဖန်တီးလို့မရသေးပါဘူး။ design decision ကိုဖြတ်ပြီးမှသာ ဆောက်ရပါမယ်၊ အဲ့တာက အရေးကြီးပါတယ်၊အာ့ကို နားလည်ရပါမယ်။ ဘာလို့်လဲဆိုရင် တစ်ဆိုက်ကနေ တဆိုက်လေ့လာကြည့်ပြီး design ကပြောင်းသွားနိုင်ပါတယ်။အာ့ကြောင့် ကျနော့်တို့က design ကိုသေချာဆုံးဖြတ်ရမှာဖြစ်ပါတယ်။ ပထမ page elements listsတွေ့ကို ဆွဲထုတ်ပြီးတော့ အဲ့ pageတွေ့ကို shapesနဲ့ lay out ချရပါမယ်။ image gallery , about page , content page တွေလိုအပ်ပါတယ်။ title နဲ့ Navigation ပါတဲ့ simple header လိုအပ်ပါတယ်။ site footer လည်းလိုအပ်ပါတယ်။ About Page လည်းလိုအပ်ပါတယ်၊ About page က website တခုလုံးရဲ့ အချို့ contacts တွေ့ကိုဖော်ပြပြီ လာလည်တဲ့သူတွေ့ကို ပိုပြီinformation ပေးပါတယ်။ပြီးတော့ လာလည်တဲ့သူတွေ့ကို ဘယ်လို့ဆက်သွယ်ရမယ်ဆိုတာကိုလည်း ပေးပါတယ်။ အဲ့တာတွေ့က အသစ်ဘယ်ကနေစလုပ်ဖို့ portfolio design အတွက် အရေးကြီးပါတယ်။ အဲ့technique ကိုသုံးခြင်းဖြင့် Wire frame လို့ခေါ်တဲ့ shape တွေ့ကို layout နဲ့ ကျနော့်တို့ရဲ့ site ကို visual structureကျစေတာဖြစ်ပါတယ်။ အဲ့ layout နဲ့ ပြုလုပ်ချင်းက လျင်မြန်ပြီး အချိန်ကုန်သက်သာစေတာဖြစ်ပါတယ်။ ကျနော့်တို့က mobile version ကိုလည်းသွားရမှာဖြစ်ပြီ ပိုမိုရှုပ်ထွေးတဲ့ layout တွေ့ကိုသွားရအောင်မှာ ဖြစ်ပါတယ်။ အဲ့လိုရှုပ်ထွေးလှတဲ့ layout တွေ့ကိုသွားမယ်ဆိုရင် image editing tool ဖြစ်တဲ့photoshop လို့မျိုး software နဲ့ အကြမ်းအရင်ဆွဲရမှာဖြစ်ပါတယ်။
Create the Content Containers
ခုbody elementထဲ့မယ် အမှန်တကယ် page အချို့ကို ရေးရမှာဖြစ်ပါတယ်။ body tagထဲ့မှာ အပိုင်းသုံးပိုင်းရေးရမှာဖြစ်ပါတယ်။ ပထမတခုက header ဖြစ်ပါတယ်၊ဒုတိယက section ဖြစ်ပါတယ်၊ တတိယကတော့ footer ဖြစ်ပါတယ်။ head element () မယ်တော့ HTML document နဲ့ပတ်သက်တဲ့ အကြောင်းရာတွေ့ကို meta tag နေဖတ်ဖို့ဖြစ်ပါတယ်။ ပြီးတော့ title element တွေ့၊ link css element တွေ့ javascript element တွေ့စတောတွေ့လုပ်ဆောင်ပါတယ်။ header tag ထဲ့မယ်တော့ h1 တို့ h2 တို့ ထည့်ရေးရမှာဖြစ်ပြီ၊ company logo တို့ site title တို့ရေးရမှာဖြစ်ပါတယ်။ section tag ထဲ့မယ်တော့ image gallery တွေ့ စာသားတွေ့ကို ဖော်ပြပေးရမှာဖြစ်ပါတယ်။ section က name ကို implies လုပ်ပြီ page ကို break up လုပ်ပေးနိုင်ပါတယ်။ newspaper ရဲ့ section ကိုလည်း လုပ်ဆောင်ပေးပါတယ်။ gallery ကို တည်ဆောက်ဖို့ဆို အဆင့်သင့်မဖြစ်သေးပါဘူး ၊ ဒါပေမဲ့ placeholder paragraph ကိုထည့်ပြီတော့ section ဘယ်လို့လုပ်လဲဆိုတာ သိနိင်ပါတယ်။ အာ့ကြောင့် section ထဲ့မယ် paragaraph တခု ရေးထည့်ပေးထားဖြစ်ပါတယ်။ footer element မှာတော့ header နဲ့ဆင်တူတဲ့ social media or copyright တွေ့ထည့်ပေးရတာဖြစ်ပါတယ်။ အဲ့လို့ထည့်တာက ကောင်းတဲ့နေရာဖြစ်ပါတယ်။page တိုင်းမှာ ကျနော့်တို့ လိုချင်တဲ့ feature ဖြစ်ပါတယ်။ footer မယ် paragraph တခုဖန်တီးပြီ copy right ဆိုတဲ့ character code လေးထည့်ပေးရပါတယ်။အဲ့တာကို အလွတ်ကျက်ထားဖို့ မလိုအပ်ပါဘူး။ အဲ့တာကို html entity လို့ခေါ်ပါတယ်။ web desingers တွေ့ devlopers တွေ့လိုအပ်တဲ့အခါ ရှာသုံးဖို့ဖြစ်ပါတယ်။workspaces ပေါ်မှာ ampersand (&) ရိုက်လိုက်လျင် Html entities list တွေအလိုလို generate လုပ်ပေးမှာဖြစ်ပြီး ကျွန်တော်တို့ရွေးချယ်ဖို့အတွက်ပဲဖြစ်ပါတယ်။
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jenny Petty | Designer</title>
</head>
<body>
<header>
<h1>Jenny Petty</h1>
<h2>Designer</h2>
</header>
<section>
<p>Gallery will go here.</p>
</section>
<footer>
<p>© 2015 Jenny Petty.</p>
</footer>
</body>
Output Here
Navigation
ကျနော့်တို့ web site ရဲ့ အခြေခံကျတဲ့ထဲ့က အရေးကြီးတဲ့ အပိုင်းကို ရောက်ရှိလာပြီး ဖြစ်ပါတယ်။ websites တော်တော်များက home page ရဲ့ အပေါ်ဆုံး ဘယ်ဘက်ထောင့်လေးမှာရှိတဲ့ logo ကိုclick လုပ်လိုက်ရင် home page ကို ပြန်ရောက်သွားတာဖြစ်ပါတယ်။ pages တွေ့များကြီးကို ချိတ်ဆက်တဲ့ နေရာမယ်သုံးကျပါတယ်။ links တွေ့ကို anchor element or tag နဲ့ဖန်တီးရတာ ဖြစ်ပါတယ်။ anchor tag ထဲ့မယ် href attribute ပါဝင်ပါတယ် အရှည်ခေါက်ကတော့ hyper link reference လို့ခေါ်ပါတယ်။ header tag ထဲ့မယ် naviation လို့ခေါ်တဲ့ nav tag ထဲ့မယ်ရေးရတာဖြစ်ပါတယ်။ အဲ့ nav tag ထဲ့မယ်မှ unorderlist လို့ခေါ်တဲ့ ul lists ထည့်ပေးရမှာဖြစ်ပါတယ်။ ul ထည့်မှာ list tag ထပ်ထည့်ပေးရပြီ၊ list tag ကြားမှာမှ anchor tag ရေးပေးရတာဖြစ်ပါတယ်။ ဥပမာ-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Jenny Petty</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Profolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="content.html">Contact</a></li>
</ul>
</nav>
</header>
<section>
<p>Gallery will go here.</p>
</section>
<footer>
<p>© 2015 Jenny Petty.</p>
</footer>
</body>
</html>
Output Here
Gallery
image နဲ့ text နဲ့ ပေါင်းပြီ gallery တည်ဆောက်မှာဖြစ်ပါတယ်။ အစောက ဆောက်ခဲ့သလို့ပဲ section ထဲ့မယ် html list တွေ့ကိုပဲအသုံးပြုသွားမှာ ဖြစ်ပါတယ်။ navigation နဲ့ ပုံစံတူပြီးနောက် section ထဲ့မယ် unordered lists ကိုပဲသုံးမှာ ဖြစ်ပါတယ်။ image ကိုအရင်ဆောက်ပြီ အောက်မှာမှ text တို့ ရေးမှာဖြစ်ပါတယ်။သူ့ကိုနှိပ်ရင် detail ပြဖို့အတွက် image ကော text ကောပေါ်မယ် a tag အုပ်ပေးရမှာ ဖြစ်ပါတယ်။ဥပမာ-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation</title>
<link rel="stylesheet" href="gallery.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Jenny Petty</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Profolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="content.html">Contact</a></li>
</ul>
</nav>
</header>
<section class="gallery">
<ul>
<li>
<a href="flower.jpg" target="_blank">
<img src="flower.jpg" alt="Experimentaion with color and texture">
<p>Experimentaion with color and texture</p>
</a>
</li>
<li>
<a href="flower.jpg" target="_blank">
<img src="flower.jpg" alt="Experimentaion with color and texture">
<p>Experimentaion with color and texture</p>
</a>
</li>
<li>
<a href="flower.jpg" target="_blank">
<img src="flower.jpg" alt="Experimentaion with color and texture">
<p>Experimentaion with color and texture</p>
</a>
</li>
<li>
<a href="flower.jpg" target="_blank">
<img src="flower.jpg" alt="Experimentaion with color and texture">
<p>Experimentaion with color and texture</p>
</a>
</li>
<li>
<a href="flower.jpg" target="_blank">
<img src="flower.jpg" alt="Experimentaion with color and texture">
<p>Experimentaion with color and texture</p>
</a>
</li>
</ul>
</section>
<footer class="gallery-footer">
<p>© 2015 Jenny Petty.</p>
</footer>
</body>
</html>gallery.css
.gallery ul li{
float: left;
margin: 15px;
list-style: none;
}
.gallery-footer{
clear: both;
}
.gallery-footer p{
text-align: center;
background-color: aqua;
padding: 10px;
}
Output Here
About Footer
HTML structure ရဲ့ အောက်ဆုံးပိုင်းဖြစ်တဲ့ footer မယ် copy right တွေ့ထည့်ပေးရမှာ ဖြစ်ပါတယ်။ header menu ကဲ့သို့သော short link တွေ့ထည့်ပေးရမှာဖြစ်ပါတယ်။ social icon တွေ့ဖြစ်တဲ့ facebook or twitter or linkedIn စတာတွေ့ကို ထည့်ပေးရမှာဖြစ်ပါတယ်။ အဲ့ social icon ကိုနှိပ်ရင် ကျနော့်တို့ရဲ့ profileကို တန်ရောက်ရမှာ ဖြစ်ပါတယ်။
<footer class="gallery-footer">
<a href="http://twitter.com"><img src="image/twitter.jpg" alt="Twitter logo"></a>
<a href="http://facebook.com"><img src="image/facebook.jpg" alt="Facebook logo"></a>
<p>© 2015 Jenny Petty.</p>
</footer>
Output Here
External CSS
ကျနော့်တို့ရဲ့ hompage အတွက် content တွေ့များကြီးဖန်တီးခဲ့ပြီးပါပြီ။ ကျနော့်တို့ ခု html file နဲ့ css file တို့ဘယ်လို့ဆက်ဆက်နေတာကို လေ့လာရမှာဖြစ်ပါတယ်။ CSS ကို html file ရဲ့ head tag ထဲ့မယ် ထည့်ရတာဖြစ်ပါတယ်။ CSS ရဲ့ style တွေ့က html က default ပါတဲ့ sytleတွေ့ကိုတောင် reset လုပ်ပေးနိင်တာဖြစ်ပါတယ်။ css file ကို ခေါ်ချင်ရင် link tag နဲ့ရေးရတာဖြစ်ပါတယ်။သူက self-closing tag ဖြစ်ပါတယ်။ တခြား css file ကိုခေါ်ချင်ရင် link tagရဲ့ href attributeထဲ့မယ် ဘယ်folder အောက်က ဘယ်css ပါဆိုပြီးခေါ်ပေးရတာဖြစ်ပါတယ်။rel attribute ကတော့ relationshipကိုကိုယ်စားပြုပြီး valueမှာ stylesheet ဆိုပီးထည့်ပေးရပါတယ်။ဥပမာ -
<head>
<link rel="stylesheet" href="gallery.css">
</head>
Output Here
External CSS
ကျနော့်တို့ရဲ့ hompage အတွက် content တွေ့များကြီးဖန်တီးခဲ့ပြီးပါပြီ။ ကျနော့်တို့ ခု html file နဲ့ css file တို့ဘယ်လို့ဆက်ဆက်နေတာကို လေ့လာရမှာဖြစ်ပါတယ်။ CSS ကို html file ရဲ့ head tag ထဲ့မယ် ထည့်ရတာဖြစ်ပါတယ်။ CSS ရဲ့ style တွေ့က html က default ပါတဲ့ sytleတွေ့ကိုတောင် reset လုပ်ပေးနိင်တာဖြစ်ပါတယ်။ css file ကို ခေါ်ချင်ရင် link tag နဲ့ရေးရတာဖြစ်ပါတယ်။သူက self-closing tag ဖြစ်ပါတယ်။ တခြား css file ကိုခေါ်ချင်ရင် link tagရဲ့ href attributeထဲ့မယ် ဘယ်folder အောက်က ဘယ်css ပါဆိုပြီးခေါ်ပေးရတာဖြစ်ပါတယ်။rel attribute ကတော့ relationshipကိုကိုယ်စားပြုပြီး valueမှာ stylesheet ဆိုပီးထည့်ပေးရပါတယ်။ဥပမာ -
<head>
<link rel="stylesheet" href="gallery.css">
</head>
Output Here
What is CSS?
CSS ဆိုတာက Cascading Style Sheets ဖြစ်ပါတယ်။ CSS rule တစ်ခုချင်ဆီမယ် ပထမ ရေးခဲ့တဲ့ css rule တွေ့ကို override or cancel လုပ်နိုင်ပါတယ်။ တူညီတဲ့ rule တွေ့ထပ်ခါထပ်ခါရေးတာဆိုရင် နောက်ဆုံးရေးခဲ့တဲ့ rule ကိုပဲပြသပေးမှာဖြစ်ပါတယ်။ တခါတရံမယ် ဖြေရှင်းဖို့ခက်တဲ့ ပြသနာမျိုးကြုံရတက်ပါတယ်။ ဒါပေမဲ့ ဂရုတစိုက်သေချာရေးမယ်ဆိုရင်တော့ လွယ်ကူပါတယ်။ အာ့ကြောင့် ကျနော့်တို့ project လုပ်တဲ့ခါ ကျနော့်တို့အတွက် အကျိုးရှိရှိ အသုံးချနိုင်ပါတယ်။ code ရဲ့ element sleector တွေ့၊ property တွေ့၊ value တွေ့၊ curly braces တွေ့က css ရဲ့ ruleတွေ့ဖြစ်ပါတယ်။ page ရဲ့ဘယ်ပိုင်းလေးကို name နဲ့ခေါ်သုံးတာကိုelement selector လို့ခေါ်ပါတယ်။ css ရဲ့ curly braces ထဲ့မယ် ရှိတဲ့ lines တွေ့ကို declaration လို့ခေါ်ပါတယ်။ declaration များစွာရှိပါတယ်။ declaration ရဲ့ရှေ့က name ကို property လို့ခေါ်ပါတယ်။သူနောက်ကလိုက်တဲ့ကောင်ကိုတော့ value လို့ခေါ်ပါတယ်။
element(or)selector {
property : value; //This line is called decleration.
}
ID selectors
ကျေနော်တို့ CSS ရဲ့ basic syntax ကို လေ့လာခဲ့ပြီးဖြစ်ပါတယ်။ ခုဆက်လေ့လာမှာကတော့ selectrors , properties, values တွေ့ကို ဆက်လေ့လာသွားမှာ ဖြစ်ပါတယ်။ external css file ကို ချိတ်ဆက်ပါတယ်။ချိတိဆက်ပြီးတော့ html fileမှာ id attribute မှာ ကိုယ့်ကြိုက်တဲ့ name ပေးနိုင်ပါတယ်။ အဲ့ပေးခဲ့တဲ့ name ကိုပဲ css မှာ hash နောက်ကname(eg- #name)၊ အဲ့နောက်မှာမှ opening bracket နဲ့ closing bracket ကြားမယ်declaration တွေ့ကိုရေးပေးရမှာဖြစ်ပါတယ်။ ခုcss ရေးထားတဲ့ file ကို html file တိုင်းက ချိတ်ဆက်ထားရင် အဲ့name ကို တွေ့တာနဲ့ css ကိုတန်အလုပ်လုပ်ပါတယ်။ တခြားcssဖိုင်းမှာ name တူcss ထပ်ရေးထားရင်လည်း အပေါ်က cssကို အောက်က css ကလာပြီ override လုပ်မှာဖြစ်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About ID selectors</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1>Jenny Petty</h1>
<nav>
<ul>
<li><a href="index.html">Profolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="content.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<p>Gallery will go here.</p>
</section>
</div>
<footer>
<p>© 2015 Jenny Petty.</p>
</footer>
</body>
</html>
normalize.css
#wrapper{
color: white;
background-color: olive;
padding: 10%;
}
main.css
#wrapper{
color: white;
background-color: olive;
padding: 10%;
}
Output Here
Mobile first Approach
ကျနော်တို့ website တွေ့ကို mobile version အတွက် တည်ဆောက်ပေးရမှာ ဖြစ်ပါတယ်။ site တွေ့ကို သေးငယ်တဲ့ counter-intuitive အဖြစ်မြင်ပါတယ်၊ ဒါပေမဲ့ modern website တွေ့ဆောက်ပြီးကတည်းက mobile device တွေ့အတွက်ပါ ဆောက်ပြီးသားဖြစ်ပါတယ်။ အဲ့လို့ ဆောက်တဲ့နေရာမယ် နှစ်မျိုးရှိပါတယ်။ ပထမတစ်ခုက စပြီး တည်ဆောက်ခဲ့ကတည်းက mobile device မှာ ပိုပြီလွယ်ကူအောင် တည်ဆောက်ရမှာ ဖြစ်ပါတယ်။ ဘာကြောင့်လဲဆိုတော့ ဒါက ရိုးရှင်းပါတယ်။ ရှုပ်ထွေးလှတဲ့ features တွေ့၊ advertisements တွေ့၊ ရှုပ်ထွေးလှတဲ့ layout စတာတွေ့ရဲ့ tons ကိုစိုးရိမ်းစရာမလိုပါဘူး။ Website ကို pure essence အဖြစ်အေင် လျှော့ချရမှာဖြစ်ပါတယ်။ ကျနော့်တို့ဟာ tablets နဲ့ desktops ကဲ့သို့သော design ဘက်သွားတဲ့အခါ website ကို ပိုမိုကောင်းမွန်အောင် လုပ်ရမှာဖြစ်ပါတယ်။ ဒုတိယတစ်ခုကတော့ အလွန်အရေးကြီးပြီ mobile experience အတွက် ပေးပါတယ်၊ mobile web က သေးငယ်တဲ့ platform မဟုတ်ပါဘူး။ ဒါကြောင့် mobile browsing တွေ့က eclipse destop browsing ပေါ်အခြေခံတာ ဖြစ်ပါတယ်။ ကျနော့်တို့ရဲ့ design က mobile ပေါ်မှာ experience များပြီ destop မှာ ကောင်းကောင်းအလုပ်လုပ်နိုင်ဖို့ဖြစ်ပါတယ်။
Colors in CSS
ကျနော့်တို့ဟာ မတူညီတဲ့ တန်ဖိုး အမျိုးမျိုးနဲ့ CSS မှာ ရှိတဲ့ units အကြောင်းကိုလေ့လာခဲ့ပြီဖြစ်ပါတယ်၊ ဒါပေမဲ့ color အကြောင်းကို ခုထိ မဆွေးနွေးရသေးဘူး ဖြစ်ပါတယ်။ CSS ကိုသုံးပြီးတော့ နည်းလမ်းအချို့နဲ့ color ကိုသတ်မှတ်ကျတာ ရှိပါတယ်။ ခုကတော့ hexadecimal colors အကြောင်းကို လေ့လာသွားမှာဖြစ်ပါတယ်။ သူ့ရဲ့အသံကြားရုံနဲ့ ရှုပ်ထွေးတယ်လို့ထင်ပါလိမ့်မယ်။ ဒါကြောင့် ဖြည့်ဖြည့်ချင်း လေ့လာသွားရအောင်။ Hexadecimal ဆိုတာ 10 base ပါတဲ့ system ထက် 16 base number ပါတဲ့ system ကိုသုံးမှာဖြစ်ပါတယ်။ 0-9 က numeric valuesတွေ့ဖြစ်ပြီ၊ 10-15 ကတော့ single digit သို့မဟုတ် character ဖြစ်ပါတယ်။တနေရာဆီမယ် 16 မျိုးရှိနိုင်ပါတယ်။ Hexadeciaml color ကိုရေးတဲ့အခါ အနီရောင်အတွက်၊ အစိမ်းရောင်အတွက်၊ အပြာရောင်အတွက် ဆိုပြီရှိကျပါတယ်။ Digital screen ပေါ်မှာ မည်သည့်color ကိုမဆို အဲ့သုံးရောင်ပေါင်းပြီ ထုတ်နိုင်ပါတယ်။ အဲ့ဒီသုံးရောင်မယ် hexadecimal number နှစ်လုံးဆီပါပါတယ်။စုစုပေါင်း ၆ နေရာဖြစ်ပါတယ်။ အနီရောင်အတွက် ပထမ ဂဏာန်းနှစ်လုံးဖြစ်ပြီ၊ အစိမ်ရောင်အတွက် ဒုတိယ နှစ်လုံးဖြစ်ပြီ၊ အပြာရောင်အတွက် နောက်ဆုံး ဂဏာန်းနှစ်လုံးဖြစ်ပါတယ်။ Hex valueက အားလုံး zero ဖြစ်နေလျှင် black ဖြစ်ပြီ၊ f အားလုံးဖြစ်နေရင် အဖြူရောင်ဖြစ်ပါတယ်၊ 8 တွေ့ကြည့်ဖြစ်နေလျှင် gray ရောင်ဖြစ်ပါတယ်။ Hexadecimal valueတွေ့က hash sign or pound sign စပေးရပြီ အဲ့နောက်မှာမှ hex decimal valuesတွေ့လိုက်တာဖြစ်ပါတယ်။ element နှစ်ခုကို styel နဲ့တူညီအောင်လုပ်တဲ့အခါ selector နှစ်ခုကို တခါတည်းသုံးချင်ရင် comma ခံပြီး သုံးနိုင်ပါတယ်။ Hexadecimal value တွေ့ကို ၆ လုံးအစား သုံးလုံးနဲ့လည်းသုံးနိုင်ပါတယ်။ anchor elements တွေ့မှာ pseudo class ထည့်ပီသုံးနိင်ပါတယ်။ html မှာ real class တော့ မဟုတ်ပါဘူး ၊ ဒါပေမဲ့ အခြေခံကျတဲ့ မှန်ကန်တဲ့ အခြေနေအောက်မှာဆိုရင် ထည့်နိုင်ပါတယ်။
header {
background-color: #000000;
border-color: #888888;
}
nav a:visited { //pseudo class
background: #fff;
}
Class in CSS
ခု ကျနော့်တို့ nav linkတွေ့ထဲ့မယ် လုပ်စရာအချို့ရှိပါတယ်။ အထူးသဖြင့် visitors တွေ့ကို လက်ရှိဘယ်page ရောက်နေပြီဆိုတာကို hightlight နဲ့ selectလုပ်ပြီ သိသာထင်းရှားအောင် လုပ်ဆောင်ပေးရမှာဖြစ်ပါတယ်။ class က id နဲ့ဆင်တူပါတယ်၊ ဒါပေမဲ့ id က unique ဖြစ်ပါတယ်။ တစ်page ထဲ့မှာဆို တစ်ခုပဲ သုံးသင့်ပါတယ်။ များကြီးသုံးချင်ရင်တေ့ class သုံးသင့်တာဖြစ်ပါတယ်။ nav tag ထဲ့မယ် ကိုယ်ကြိုက်တဲ့ list ကို element dot selected လို့သုံးနိင်ပါတယ်။
nav a.selected, nav a:hover {
color: rgb(245, 13, 13);
}
CSS Comments
ကျနော့်တို့ webpage အတွက် shape တွေ့ယူဖို့ စတင်နေပါပြီ။ site ကို ပိုမိုစိတ်ဝင်စားအောင် တချို့သော color တွေ့ကို သေချာထည့်ရမှာဖြစ်ပါတယ်။ ထို့နောက် font size တွေ့ဘယ်လို့ထည့်မယ် third party service ကနေ custom font တွေ့ပါဝင်လာတာဖြစ်ပါတယ်။ ကျနော့်တို့ CSSတွေ့များကြီးမရေးခင်မှာ comments တွေ့ဆိုတာ ဘာလဲဆိုတာ သိထားသင့်ပါတယ်။ comments တွေ့မပါဘူးဆိုရင် project ရေးရင် css styleတွေ့များကြီးဖြစ်နေပါပြီ။အဲ့လို့ချိန်ကျရင် ကျနော့်တို့က ဘယ်styleက ဘာအတွေက်ရေးထားတာများသိဖို့ မလွယ်ကူတော့ပါဘူး။ comments ဆိုတာ လွယ်လွယ်ပြောရရင် note ပါ ၊ visitor တွေ့တော့ မမြင်နိုင်ပါဘူး၊ ဒါပေမဲ့ browser ကနေ right click ထောက်ပီး view page source ဆိုကြည့်မှာသာလျှင် မြင်နိုင်မှာ ဖြစ်ပါတယ်။
/* selected nav link */
nav a.selected, nav a:hover {
color: rgb(245, 13, 13);
}
Pick Fonts
ခုဟာကတော့ ကျနော့်တို့ နှစ်သက်တဲ့ third-party font service က google.com/fonts မှာကိုယ့်ကြိုက်တဲ့ font သုံးဖို့ head tag ထဲ့မယ်ရေးရမှာဖြစ်ပါတယ်။ ကျနော့်တို့ဘာကြောင့်ကြိုက်ကျတာလဲ။ google ကနေ တရားဝင် ခွင့်ပြုပေးထားပြီ free လည်းရလို့ဖြစ်ပါတယ်။ hosting ကတိကျလျှင် ပိုမိုမြန်ဆန်းပါတယ်။မကြာသေးခင်ကပဲ အလွန်ကျယ်ပြန့်လာတာဖြစ်ပါတယ်။ အဲ့မှာ ကိုယ့်ကြိုက်တဲ့ font ကို select လုပ်ပြီး font link ကို copy ကူးပြီး အလွယ်တကူသုံးနိုင်ပါတယ်။အဲ့ဒါပြင် download လုပ်ပြီးတော့လည်းကိုယ့်project ထည့်ကိုသွားထည့်ပြီးတော့လည်းသုံးနိုင်ပါတယ်။link ချိုတ်ပြီးပြီးဆိုရင် css ထည့်သွားပြီး အဲ့font ကိုသုံးဖို့ font-family property ကိုသုံးနိုင်ပါပြီ။paragraph တွေ့ဆိုရင် font-size မှာ default size က 14px ၊ font-weight က normal ပါပြီးသားဖြစ်ပါတယ်။px ဆိုတာ pixels ဖြစ်ပါတယ်။ px က photoshop တွေ့မှာကောသုံးတဲ့ px ပါပဲ၊ အဲ့တော့ ကျနော့်တို့ ရင်းနှီးပါသားဖြစ်ပါတယ်။နောက်တခုက font-size value မှာ emဆိုတာဖြစ်ပါတယ်။ 1em က browser က default သတ်မှတ်တဲ့ 16px နဲ့ညီမျှပါတယ်။ တစ်ခြား pt unit တို့ဘာတို့ ရှိပါသေးတယ်၊ဒါပေမဲ့ em, px unit က cascading nature of CSS အတွက် သင့်လျော်ဆုံးဖြစ်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Picking Font</title>
<link href="https://fonts.googleapis.com/css?family=Beth+Ellen&display=swap" rel="stylesheet">
<style>
p{
font-family: 'Beth Ellen', cursive;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum nemo beatae, in et provident minus, fugit voluptatum voluptates quaerat consequatur qui similique fugiat dolores optio vitae aut sed harum id.
</p>
</body>
</html>
Output Here
Build Navigation
ကျနော်တို့ အခြေခံတွေ့ကို လေ့လာခဲ့ပြီးနောက် တစ်ခြားpageပေါ်မှာ style တွေ့ screen sizesတွေ့ကို မသွားခင် ၊ ကျနော့်တို့ navigation ကိုတည်ဆောက်ဖို့လိုပါတယ်၊ ပြီတော့ page ပေါ်မှာ တစ်ခြားသော thingsတွေ့ကိုပြီးစီးအောင် လုပ်ဖို့လိုပါတယ်။ ပထမဦးဆုံး page ရဲ့အပေါ်မယ် space လေးတွေ့ရှိနေပါတယ်။အာ့ဘာကြောင့်လဲဆိုရင် margin ကြောင့်ပဲဖြစ်ပါတယ်။ အာ့ကြောင့် margin ကို ချိန်ညှီဖို့လိုပါတယ်။ margin မှာ vlaue ၄မျိုးရှိပါတယ်။သူတို့က top, right, bottom, left ဖြစ်ပါတယ်။ padding property မှာလည်းတူတူပါပဲ။ Navigation မှာ float left ပေးရပါမယ်။ ဘယ် pracitcal မှ right ကိုသုံးတာမရှိပါဘူး။ width ကိုတော့ 100% ပေးထားဖို့လိုပါတယ်။ ဆိုလိုတာက floated element ဖြစ်တဲ့ကြောင်း width ကိုတိတိကျကျမသိလို့ ဖြစ်ပါတယ်။ ခု ကျနော့်တို့ property အသစ်သုံမှာဖြစ်ပါတယ်။ အဲ့တာကတော့ display ဖြစ်ပြီး element တိုင်းမှာ property default ဖြစ်တဲ့ block or inline တွေ့ရှိပါတယ်။ Block level element က space တွေ့ယူပါတယ်။ အခြားအရာတွေ့ကို တွန်ထုတ်ပြီးထွက်ပေါပေးပါတယ်(eg-div,section,p,etc)။ ကျနော့်တို့ အမှန်တကယ်သုံးမှာကတော့ inline element ဖြစ်ပါတယ်။ အဲ့တာက ဒီ items တွေ့ကို inline ကဲ့သို့သော side by side ခွင့်ပြုပေးထားတာဖြစ်ပါတယ်၊ ဒါပေမဲ့ width , height တွေ့ကဲ့သို့သော အခြားသော block level element တွေ့ကိုလည်း ထိန်းသိမ်းပေးထားပါလိမ့်မယ်။Home page ကိုကျွန်တော်တို့တည်ဆောက်ခဲ့ပြီးဖြစ်ပါတယ်။ဒါပေမယ့် အခုကျွန်တော်တို့ about page တွေ content page တွေကိုတည်ဆောက်ရမှာပဲဖြစ်ပါတယ်။ about page ကတော့ content page လောက်မရှုပ်ထွေးပါဘူး။ပထမ about page ကိုwebsite ရဲ့အကြောင်းတွေကိုရေးပေးရမှာဖြစ်ပါတယ်။ Portfolio နဲ့ About pages တွေရေးပြီးတဲ့အခါမှာ content page ကိုရေးပေးရမှာဖြစ်ပါတယ်။ About page ရေးတာနဲ့ပုံစံတူပြီး websites တွေဆက်သွယ်နိုင်ရန်အတွက် content information တွေထည့်ရေးပေးရမှာပဲဖြစ်ပါတယ်။ telphone number တွေကိုထည့်မယ်ဆိုရင်တော့ anchor tag ရဲ့ href attributes ထဲမှာ tel: ဆိုတဲ့နောက်မှာ phone number ကိုထည့်ပြီး values အဖြစ်အသုံးပြုပေးရမှာဖြစ်ပါတယ်။ အဲ့လိုရေးပေးတဲ့အခါ browser ကဖုန်းနံပါတ်ဆိုတာကိုသိပြီးဖုန်းခေါ်ဖို့ရန်သတ်မှတ်ပေးမှာပဲဖြစ်ပါတယ်။email ကိုဖော်ပြတဲ့အခါမှာတော့ mailto: ဆိုတဲ့နောက်မှာ email လိပ်စာကိုထည့်ရေးပေးပြီး value အဖြစ်အသုံးပြုပေးရပါမယ်။ အဲ့တာက browser ကို mail အဖြစ်ပြောပြမှာပဲဖြစ်ပါတယ်။အခြား content လုပ်နိုင်တဲ့ things တွေကိုလဲထပ်ထည့်နိုင်ပါတယ်။
/* the whole font */
@font-face {
font-family: 'Myanmar3';
src: url('font/mm3_05-jan-2011.ttf');
}
body{
font-family: 'Myanmar3';
}
/* end the whole font */
/* Header */
header{
float: left;
width: 100%;
background-color: green;
}
/* end Header */
/* Navigation */
/* top nav of profile */
header a.top-navprofile{
text-decoration: none;
text-align: center;
color: #fff;
}
/* end top nav of profile */
nav{
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
background-color: aquamarine;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav ul li{
display: inline-block;
}
nav ul li a, nav ul li a:visited{
text-decoration: none;
font-weight: 800;
padding: 15px 10px;
color: red;
}
nav ul li a:hover,nav ul li a.selected{
color: #32673f;
}
/* end Navigation */
/* Gallery */
.gallery ul{
margin: 0;
padding: 0;
list-style: none;
}
.gallery ul li{
float: left;
margin: 2.5%;
background-color: #f5f5f5;
}
.gallery ul li a{
text-decoration: none;
text-align: center;
}
.gallery-footer{
clear: both;
}
.gallery ul li p{
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/* end gallery */
footer{
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
clear: both;
}
footer img{
width: 20px;
height: 20px;
margin: 0 5px;
}
Output Here
Responsive Web Design and Mobile Design Testing
လွန်ခဲ့တဲ့နှစ်အနည်းငယ်က အမျိုးသော devicesတွေ့ ပေါ်ထွက်လာခဲ့တာဖြစ်ပါတယ်။ ခုလို့နေမျိုးမှာဆို destops, laptops, tablets, smartphones, smart watches, smart television စတာတွေ့ကို ဝယ်နိုင်နေပါပြီ။ အဲ့ ပစ`စည်းတွေ့ရဲ့ screen sizes ဟာဆိုရင် သေးငယ်ပြီ ကျဉ်မျောင်းလာတာဖြစ်ပါတယ်။ အာ့ကြောင့် လူတယောက်က website တခုကို ဖန်တီးပြီ လူတိုင်းကြည့်လို့ရအောင် ဘယ်လို့လုပ်မလဲ။ကျနော့်တို့ အရင်က code တွေ့များကြီးကို ရေးခဲ့ပြီးဖြစ်ပါတယ်။ယခုတော့ ကျနော့်တို့ website ကို သေးငယ်တဲ့ screen sizesပေါ်မှာ မြင်စေချင်တယ်။ အဲ့ဒါဆိုရင်တော့ မည့်သ်ည့ code မှ မထပ်ပဲနဲ့ သို့မဟုတ် website ပိုင်းပြီးဖန်တီးတာ မဟုတ်ဘဲနဲ့ ကျနော့်တို့ site ကို tablets မှာကော destops မှာကော အလုပ်လုပ်ဖို့ အချို့သော ပြုပြင်တွေ့ ထပ်လုပ်ရမှာ ဖြစ်ပါတယ်။ အဲ့လိုမျိုး နှစ်ခုလုံးအဆင်ပြေအောင် လုပ်တဲ့နည်းပညာကို responsive web design လို့ခေါ်ပါတယ်။ ပိုမိုတိကျအောင် ကျနော့်တို့က responsive web design ဖြစ်ဖို့ mobile-first approach ကိုယူရပါလိမ့်မယ်။ ကျနော့်တို့ရဲ့ mobile version design က destop design ထက် ပိုပြီ scale ကျဖို့လိုပါတယ်။ အဲ့တာ ဘာကြောင့်လဲဆိုရင် mobile design layout က ရိုးရှင်တယ်၊ အဲ့တော့ ကျနော့်တို့က ရှုပ်ထွေးတဲ့ layout ကို လျော့ချပြီ ရိုးရှင်းတဲ့ layout ဖြစ်ဖို့ထက် ရိုးရှင်းတဲ့ layout ကနေ ရှုပ်ထွေးတဲ့ layout ဖြစ်အောင် လုပ်ဆောင်ရမှာ ဖြစ်ပါတယ်။ Responsive web design ကို နားလည်ဖို့ရန် အရေးကြီးတဲ့ concept ဖြစ်ပါတယ်။ web site ကို web browser ရဲ့ sizes နဲ့ညှီချင်ရင် ကျနော့်တို့သတိထားရမှာက layout က flexes ဖြစ်ရဲ့လား ပြီးတော့ browser ရဲ့width ကို increases နဲ့ decreases ပြောင်လဲပြီ size ညှီရမှာဖြစ်ပါတယ်။အဲ့တာကို fluid layout လို့ ခေါ်ပါတယ်။ ကျနော့်တို့ခု လေ့လာမှာကတော့ responsive web design ဖြစ်ပြီ 2010 လောက်က ပေါ်ပေါက်ခဲ့တာဖြစ်ပါတယ်။Responsive web design က နည်းပညာနဲ့ တစ်ခုတည်းမဟုတ်ပါဘူး။ technique သုံးခုပေါင်းထားပြီတော့ responsive web design ဆိုတဲ့ နမည်အောက်မှာ ရှိတာဖြစ်ပါတယ်။ ပထမ အဆင့်အနေဲ့ responsive layout က fluid images ကို ဖန်တီးမှာဖြစ်ပါတယ်။ အဲ့တာက လွယ်ကူပါတယ်။ css tag မယ် image ကို max-width 100% ပေးထားရမှာ ဖြစ်ပါတယ်။ ဒုတိယ တစ်ခုအနေနဲ့ fluid grid layout ဖန်တီးမှာဖြစ်ပါတယ်။ ကျနော့်တို့ site မှာ grid ကိုဘယ်လို့လုပ်ရမှာ အမှန်တကယ်မသိသေးဘူးဆိုရင် ဒါပေမဲ့ ကျနော့်တို့ရဲ့ layout က fluid ဖြစ်နေတုန်းပါပဲ။ အဲ့တာက ကျနော့်တို့က element width တွေ့ကိုစဆောက်ကတည်းက pixel ထက် percentage(%) ကို သုံးခဲ့လို့ဖြစ်ပါတယ်။ Percentage က relative unit ဖြစ်ပါတယ်။ Realative unit ဆိုတာက parent container or browser ရဲ့ size အလိုက် width ကိုပြောင်လဲပေးနိုင်ပါတယ်။ ဘာကြောင့်လဲဆိုရင် page ပေါ်မှာရှိတဲ့ elements အားလုံးကို percentage ပေးထားလို့ဖြစ်ပါတယ်။ fixed unit ကတော့ relative unit ထက် parent container ပေါ်မူတည်ပြီ width ကိုတော့ ပြောင်လဲမပေးပါဘူး။ တတိယတစ်ခုကတော့ special css rule သုံးပြီး media query လို့ခေါ်ပါတယ်။ အဲ့တာတွေ့ကလည်း page ရဲ့ width ပေါ်မှာ အခြေခံပြီ width ကိုပြောင်လဲနိုင်ပါတယ်။
Output Here
Media Query
ကျနော့်တို့ responsive web design ကို overview လေ့လာခြံပီးတော့ နောက်ဆုံးအဆင့်အနေနဲ့ လေ့လာဖို့ အချိန်ရောက်လာပါပြီ။ ကျနော့်တို့က page တွေ့ရဲ့ width တွေ့ပေါ်မှာ အခြေခံထားတဲ့ page layout ကို ချိန်ညှိဖို့ရန် media query တွေ့ကို သုံးရမှာဖြစ်ပါတယ်။ ကျနော့်တို့ ထည့်လိုက်တဲ့ media querye တစ်ခုချင်ဆီမယ် break point တခုချင်ဆီကို ရည်ညွှန်ပါတယ်။ medial query အလုပ်လုပ်ပုံကို ဥပမာထည့်မယ် လေ့လာနိုင်ပါတယ်။
<--The following example is media query.-->
@media screen and (min-width: 660px) and (min-width: 480px){
/**********************
TWO COLUMN LAYOUT
**********************/
.primary {
width: 50%;
float: left;
}
.secondary {
width: 50%;
float: right;
}
}
@media screen and (max-width: 660px){
.primary, .secondary{
width: 100%;
}
}
Output Here
Adjustment for mobile device
media query ထဲမှာနောက်ဆုံးကျန်တဲ့အရာကတော့ profile page ကိုချိန်ညှိပေးဖို့ပဲဖြစ်ပါတယ်။display block ကိုထားပေးခြင်းက element ရဲ့ auto margin တွေ့ကိုjustify လုပ်ပေးပါလိမ့်မယ်။responsive ဖြစ်ဖို့ရာအတွက် responsive အတွက် create လုပ်ထားတဲ့ css ထဲကနေ float တွေ margin တွေချိန်ညှိပေးရမှာပဲဖြစ်ပါတယ်။ wesites တွေကို Mobile devices တွေကနေဝင်ကြည့်တဲ့အခါ responsive ဖြစ်နေအောင် <meta name="viewport" content="width=device-width, initial-scale=1.0" >ဆိုတာကိုထည့်ရေးပြီးချိန်ညှိပေးရပါမယ်။ content attributes ကတော့ mobile device screen ရဲ့ scale နဲ့ကိုက်ညီအောင်ချိန်ညှိပေးမှာပဲဖြစ်ပါတယ်။initial-scale attribute ကတော့ ၁.၀ ပဲအသုံးပြုပါတယ်။ websites ကိုကျွန်တော်တို့စရေးတဲ့အခါမှာ mobile layout နဲ့စပြီးရေးခဲ့ရင် desktop version အတွက် extra code အနည်းငယ်သာထပ်ရေးရုံနဲ့အဆင်ြပေမှာ ဖြစ်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Website Testing
ကျနော့်တို့ website တည်ဆောက်ပြီတဲ့အခါမှာ ကျနော့်တို့ site က ကောင်းလားမကောင်းလား ပြန်စစ်ဖို့လိုပါတယ်။ website test လုပ်တာ နည်းလမ်းကြီးရှိပါတယ်။ ရိုးရှင်းတဲ့ website ကနေ ရှုပ်ထွေးတဲ့ website ထိ သွားရမှာဖြစ်ပါတယ်။ ပထမ ကိုယ့်လုပ်ချင်တဲ့ web page ကို screen shot ရိုက်ရပါမယ်၊ ပြီးရင် ကျနော့်တို့ image editor tool တွေ့ဖြစ်တဲ့ photoshop ထဲ့ကို ထည့်ရပါမယ်။ phtoshop မရှိလျှင် ကြိုက်တဲ့ editor tool ထဲ့ကို ထည့်ရမှာ ဖြစ်ပါတယ်။ ကျနော့်တို့ ခု အဲ့screen image ထဲ့ကို filter saturation value မှာ zero ထည့်ရပါမယ်။ အာ့ဆိုရင် website image ဟာ အဖြူ အမည်းနဲ့ စစ်လို့ရပါပြီ။ Website တွေ့ကို ကြည့်တဲ့လူတွေ့ဟာ အမျိုးမျိုးသော degree တွေ့ကနေ color blindness တွေ့ကို မြင်နိုင်ပါတယ်။ကျနော့်တို့ site က grayscale or black မှာကော ကောင်းတယ်ဆိုရင် ကျနော့်တို့ website က safe ဖြစ်တယ်ဆိုတာ သိရပါလိမ့်မယ်။ HTML CSS တွေ့ကိုလည်း မှန်မမှန်စစ်ဆေးဖို့လိုပါတယ်။ W3C or Worldwide Web Consortium အဖွဲစည်းက HTML, CSS , စတဲ့ များပြားတဲ့ languages တွေ့နဲ့ ဖွဲစည်းထားတာဖြစ်ပါတယ်။ ကျနာ်တို့က W3C validation services မှာ ကျနော့်တို့ရဲ့ web site ကို test လုပ်နိုင်ပါတယ်။ validator.w3.org မှာ ကျနော့်တို့ရဲ့ website url သို့မဟုတ် ကိုယ့်စစ်ချငိတဲ့ တခြား website linkတွေ့ ၊ ဒါမှမဟုတ် ကျနော့်တို့ file တွေ့ စတာတွေ့ကို စစ်ဆေးနိုင်ပါတယ်။ နောက်ထပ်တစ်ခြားsite ဖြစ်တဲ့ http://jigsaw.w3.org မှာလည်းစစ်ဆေးနိုင်ပါတယ်။အချို့companies တွေကhardware devices တွေအများကြီးပေါ်မှာသူတို့ရဲ့ codeတွေဘယ်လိုအလုပ်လုပ်လဲဆိုတာကိုမြင်ရဖို့အတွက် အမှန်တကယ် device testing suite တွေရှိပါတယ်။ သို့သော်လည်း အဲ့တာတွေက အလွန်ဈေးကြီးပါတယ်။
Domain
Websites တွေ့ဟာ ကြီးမားတဲ့ content တွေ့နဲ့ သွားတာဖြစ်ပါတယ်၊ ဒါပေမဲ့ အရေးကြီးတာက လူတွေ့မှတန်မိစေမဲ့ domain name ကိုရှာပီးပေးဖို့ အရေးကြီးပါတယ်။ domain name ဆိုတာ web address ဖြစ်ပြီးတော့ facebook or google တို့လို့မျိုးသွားလို့ရတဲ့ website မျိုးဖြစ်ပါတယ်။ domain တိုင်းဟာ unique ဖြစ်ပါတယ်။ ဘယ်လို့လဲဆိုရင် မင်းလိုချင်တဲ့ name ကို google မှာ ဥပမာ- http://example.com ကိုရှာကြည့်ရပါမယ်၊ ရှာကြည့်လို့ ရှိနေရင် တစ်ခြားသူ ဝယ်ပီးသား ဖြစ်ပါတယ်။ ရှိပီးသား ဆိုရင် ဝယ်လို့မရပေါဘူး။ အဲ့လို့ပဲ ကိုယ်လိုချင်တဲ့ nameကို ထပ်ရှာပီး မရှိသေးရင်တော့ ဝယ်လို့ရပါတယ်။ http:// ဆိုတာ HTTP(hyper text transfer protocol) protocol ဖြစ်ပါတယ်။ Web Pages တည်ဆောက်ဖို့ အခြားသော protocol ကိုမမြင်ရင် multiplayer games or straming video chat တွေ့က protocol တွေ့ကို မကြာခန hidden လုပ်ထားလို့ ဖြစ်ပါတယ်။ domain ရဲ့ နောက်ပိုင်းတခုကတော့ subdomain လို့ခေါ်တဲ့ www ဖြစ်ပါတယ်။ Web ရဲ့ စောစော ရက်တွေ့တော့က subdomain ထည့်ဖို့ popular ဖြစ်လာပါတယ်၊ ဒါပေမဲ့ မလိုပါဘူး။ နောက်တခုက မင်းရဲ့ siteနမည်လိုချင်တဲ့ မှန်မှန်ကန်ကန် domain name ပေးသင့်တာဖြစ်ပါတယ်။ နောက်ဆုံးမှာတော့ domain name ရဲ့ အဆုံးကကောင်ကို top level domain or TLD လို့ခေါ်ပါတယ်။ ဒီဖြစ်စဉ်မှာ TLD ဆိုတာ .com ဖြစ်ပါတယ်၊ ဒါပေမဲ့ TLD ကဲ့သို့သော .net, .org, စသသည့်ဖြင့် familar ဖြစ်နေရပါ့မယ်။ .com, .net , .orgတွေ့က popular ဖြစ်ပါတယ်။ဒါပေမဲ့ TLD ကဲ့သို့သော .me or .name တို့ကိုလည်း သုံးနိုင်ပါတယ်။
<a href="https://www.google.com/">https://www.google.com/</a>
<a href="https://www.facebook.com/">https://www.facebook.com/</a>
Web Hosting
ကျနော်တို့ web address တွေ့ရိုက်တဲ့အခါ domain name ဟာ IP address or Internet Protocol လို့ခေါ်တဲ့ special set of numbers တွေ့နဲ့ရောထားတာဖြစ်ပါတယ်။ IP address က server လို့ခေါ်တဲ့ special computer ကို points လုပ်ပေးတာဖြစ်ပါတယ်။ server accept ရတဲ့အခါ web server software က webpage ကို load ဖို့ files တွေ့ကို ရှာနေပါလိမ့်မယ်၊ အဲ့နောက် ကျနော့်တို့က request လုပ်တဲ့ခါ client computer ဆီကို set up လုပ်ဆောင်ပါတယ်။ domain ရှိပြီးသားဆိုရင် domain က ကျနော့်တို့ file တွေ့ရှိတယ့် server ဆီကို ညွှန်ပေးရပါတယ်။ ကျနော့်တို့က server မရှိဘူးဆို domain ဝယ်သလို့ ဝယ်ဖို့လိုအပ်ပါတယ်။ ကျနော့်တို့က အကြမ်းဖြင့် host or web hostingကြားဖူးပါလိမ့်မယ် ၊ အဲ့တာက server ပဲဖြစ်ပါတယ်။ domain register လုပ်သလိုပဲ web hosting များစွာရှိပါတယ်။ အဲ့တာတွေ့ကတော့ MediaTemplate, BlueHost,DreamHost စတာတွေ့မှာ domain လုပ်သလို့ register လုပ်ပြီး ဝယ်ယူနိုင်ပါတယ်။
Upload Website
ကျနော့်တို့ဟာ local မှာ project ရေးပြီးသွားလို့ရှိင် server ပေါ်တင်ဖို့လိုအပ်ပါတယ်။ server တင်တဲ့ခါကျရင် ကျနော့်တို့က cpanel ထဲ့ကနေ ဝင်ပြီးတင်နိုင်သလို့ SFTP(Secure File Transfer Protocol) software toolကိုသုံးပြီးတင်နိုင်ပါတယ်။ အဲ့နှစ်ခုထဲ့ကမှ ကျနော့်တို့က file လေးပဲဆိုရင် sftp ပဲသုံးသင့်ပါတယ်။ဘာလို့လဲဆိုရင် sftp software tool က သုံးရတာလည်း လွယ်ကူပါတယ်။ Cpanel လောက်ကြီးလည်း အာရုံးမနောက်ရပါဘူး၊ ဒါပေမဲ့ database file ပါလာပီဆိုရင်တော့ cpanel ကိုသုံးမှကိုး ရတော့မှာ ဖြစ်ပါတယ်။ file ပဲတင်မယ်ဆိုရင်တော့ sftp ဖြစ်တဲ့ cyberduck ကို cyberduck.io မှာ mac အတွက်ကော window အတွက်ကော သုံးနိုင်ပါတယ်။
Use Developer Tool
အကောင်းဆုံး creative professionals တွေကပိုက်ဆံပိုပြီးရကြပါတယ် ဘာ့ကြောင့်လဲဆိုတော့သူတို့မှာ သတ်မှတ်ထားတဲ့အချိန်ရယ် အလုပ်အပေါ်မှာပြတ်သားတဲ့ဆုံးဖြတ်ချက်တွေကြောင့်ပဲဖြစ်ပါတယ်။ သူတို့ကမြန်ဆန်ပြီ ကောင်းမွန်စွာ လုပ်ဆောင်နိုင်ပါတယ်။company မှာသို့မဟုတ် အလုပ်ရဲ့marketplaceနေရာတွေမှာမင်းရဲ့value ကိုတိုးတက်စေဖို့နည်းလမ်းတစ်ခုကတော့ problem solving skills တွေတိုးတက်လာတာပဲဖြစ်ပါတယ်။ computer code တွေကိုရေးတဲ့အခါမှာ problem (သို့) issue တွေက bug တွေကိုရည်ညွှန်းပါတယ်။project ကိုစရေးတဲ့အချိန်ကနေပြီးတော့ပြီးတဲ့အချိန်ထိကောင်းမွန်အောင်တည်ဆောက်ခဲ့မယ်ဆိုရင် bug တွေဖြေရှင်းရတာနည်းပါလိမ့်မယ်။ ကျွန်တော်တို့ အချို့ဖြစ်နေကြဖြစ်သော problem တွေကိုမသွားခင် method အချို့ကိုလေ့လာရပါမယ်။အဲ့တာတွေက issues တွေကို diagnose နဲ့ Identify လုပ်တဲ့နေရာမှာကူညီပေးပါတယ်။google chrome မှာရှိတဲ့ Developer Tools ကိုစပြီးလေ့လာပါမယ်။ အခြား browser တွေကိုသုံးတဲ့အခါမှာလည်း ပုံစံတူ feature တွေကိုရှာတွေ့နိုင်ပါတယ်။ဒါပေမယ့် chrome ဟာကောင်းမွန်တဲ့ developer tool ဖြစ်ပြီးတော့ web standards တွေကိုထောက်ပံပေးနိုင်တာကြောင့် designer တွေ developer တွေက chrome ကိုပဲအသုံးပြုဖို့ရည်ညွှန်းပါတယ်။dev tool ကိုဖွင့်ဖို့ နည်းလမ်းသုံးမျိုးရှိပါတယ်။ပထမကတော့ shortcut key နဲ့ ဖွင့်မယ်ဆိုရင် mac အတွက် Cmd+Option+I ဖြစ်ပြီး window မှာဆိုရင် ctrl+shift+I key ဖွင့်နိုင်ပါတယ်။ ဒုတိယတစ်ခုကတော့ page ရဲ့ မည်သည့်element မှာမဆို right click နှပ်ပီး inspect elemnt ကို select မှတ်ပြီ ဖွင့်နိုင်ပါတယ်။ တတိယတစ်ခုကတော့ browser ရဲ့ setting ထဲ့ကနေ more tools ထဲ့မယ် Developer Tools ကို select လုပ်ပြီး ဖွင့်နိုင်ပါတယ်။ browser ရဲ့အောက်ခြေမှာ panel တစ်ခုအနေနဲ့ပွင့်လာမှာဖြစ်ပြီး ကျွန်တော်တို့ site ရဲ့ HTML နဲ့ CSS တွေကိုဖော်ပြပေးပါတယ်။ ကျွန်တော်တို့ကြိုက်သလို CSS တွေကိုပြုပြင်နိုင်ပြီးတော့ refresh လုပ်လိုက်တဲ့အခါမှာတော့ ပြင်ထားတာတွေကိုပြန်ဖြတ်ပေးမှာပဲဖြစ်ပါတယ်။ ကျနော့်တို့ပြင်ချင်တဲ့ CSS တွေ့က ဘယ် file ရဲ့ line no ဘယ်လောက်လဲဆိုတာတောင့်ကြည့်လို့ရတာဖြစ်ပါတယ်။ နောက်တစ်ခုကတော့ element ဘေးမှာရှိတဲ့ console ပဲ ဖြစ်ပါတယ်။ သူ့မှာတော့ link ခေါ်ထားတဲ့ကောင်တွေ့ကို link မှားနေရင် console မှာ errors အဖြစ်နဲ့ လာဖော်ပြပေးတာဖြစ်ပါတယ်။ ပြီးတော့ js file တွေ့ ရေးရင်လည်း js file ရေးပုံရေးနည်း မှားတာဆိုရင်လည်း errors ဆိုပြီ ပြပေးတာဖြစ်ပါတယ်။ js file မယ် trace လိုက်ချင်တာဖြစ်ဖြစ် ရလာတဲ့ result ကို output ထော်ကကြည့်ချင်တာဆိုရင်လည်း console နဲ့ထုတ်ပြီ ကြည့်နိုင်တာဖြစ်ပါတယ်။ network tag ထဲမှာတော့ page ရဲ့ဘယ်အပိုင်းတွေကအချိန်ဘယ်လောက်ယူတယ်ဆိုတာကိုဖော်ပြပါတယ်။အဲ့တာတွေကိုကြည့်ပြီးတော့ ဘယ်file size တွေကကြီးနေတယ်ဆိုတာကိုရှာနိုင်ပါတယ်။
Continue Learning
web ဆိုတာ သင့်လျော်တဲ့ unexplored medium ဖြစ်ပါတယ်။ အဲ့တာကြောင့် အတော်ဆုံး web professionals တွေ့က လေ့လားဖို့အတွက် အဆုံးမရှိတဲ့ သိချင်စိတ်တွေ့၊ ချစ်စိတ်တွေ့နဲ့ လေ့လာသင့်ယူကြတာဖြစ်ပါတယ်။ တခုတည်း လုပ်လို့မရနိုင်ဘဲ လိုအပ်တဲ့ resource network ကို အပေါ်ဆွဲတင်ဖို့ကိုလည်း သူတို့က နားလည်ပါတယ်။ web အကြောင်းနဲ့ ပက်သက်ပြီ new things တွေ့ကို လေ့လာမယ်၊ ပြီးတော့ industry ထဲ့ပါဝင်တဲ့ အရာတွေ့က ဘယ်ကနေ လာတာလည်း ဆိုတာကို လေ့လာမှာဖြစ်ပါတယ်။ ကျနော့်တို့ တည်ဆောက်ခဲ့တဲ့ web siteက ရိုးရှင်းတဲ့ front end ဖြစ်တဲ့ html နဲ့ css နဲ့ပေါင်းရေးထားတာကို static web site လို့ခေါ်ပါတယ်။ ဘာကြောင့်လဲ့ဆိုတော့ server ပေါ်မယ် database မပါဘူး၊ backend မပါလို့ဖြစ်ပါတယ်။ မင်းက contact forms တွေ့၊ social networks တွေ့၊ e-commerce stores စတာတွေ့ကို advanced ထပ်လုပ်ချင်ရင် bacend programming languages ဖြစ်တဲ့ ruby or php ကဲ့သို့သော languagesတွေ့ကို သုံးပြီး dynamic siteလုပ်ဖို့ လေ့လာရမှာဖြစ်ပါတယ်။ treehouse တို့ w3c တို့မှာ လေ့လာနိုင်ပါတယ်။
Fixed problems with code
ခုကျနော့်တို့ အဖြစ်များတဲ့ HTML နဲ့ CSS bugsတွေ့ကို လေ့လာသွားမှာဖြစ်ပါတယ်။ သူတို့ဘာကြောင့် bugs တွေ့ဖြစ်တာလည်းဆိုတာကို ဘယ်လို့ fix လုပ်ရမယ်ဆိုတာကို လေ့လာသွားရမှာ ဖြစ်ပါတယ်။ HTML နဲ့ CSS တွေ့ရဲ့ တစ်ချို့သော ပြသနာတွေ့က typing မှားသောကြောင့် သို့မဟုတ် အပိတ်ကျန်ခဲ့တာတွေ့ကြောင့် သို့မဟုတ် အတိုခေါက်သုံးမယ်နေရာမယ် name အပြည့်စုံ သုံးထားခြင်းတို့ကြောင့်ဖြစ်ပါတယ်။ attribut တွေ့ကိုလည်း quote ထဲ့ထည့်ဖို့လိုပါတယ်။ ကျနော့်တို့က HTML ကော CSS မှာကော စာလုံးပေါင်းကိုတော့ မှန်ကန်အောင်ရိုက်ရမှာ ဖြစ်ပါတယ်။selector တွေမှားရေးတာ curly brace တွေထည့်ဖို့မေ့နေတာတွေပဲဖြစ်ပါတယ်။အများဆုံးမေ့နေတက်တာကတော့ decleration တွေနောက်မှာ simicolon တွေသုံးဖို့မေ့နေတာပဲဖြစ်ပါတယ်။ နောက်ထပ် bug တစ်ခုကတော့ selector တွေသုံးတဲ့ခါမှာ ID နဲ့ class တွေလွဲပြီးခေါ်မိတာပဲဖြစ်ပြီးတော့ web professional တွေတောင်မှလွဲတက်ကြပါတယ်။selector တွေကိုခေါ်ပြီးသုံးတဲ့ အခါမှာလည်းတိကျစွာခေါ်သုံးဖို့ကလည်းအရေးကြီးပါတယ်။
Introduction to Accessibility
web accessibility က content တွေ့ကို လက်တွေ့လုပ်ပြီးတော့ လူအများကြီးက သုံးနိုင်ပါတယ်၊ သို့မဟုတ် software ရဲ့ များပြားလှတဲ့ အစိတ်ပိုင်းတွေ့ကနေ သူတို့ရဲ့ abilities (သို့) disabilities အဖြစ်လည်း သုံးနိုင်ပါတယ်။ လူအများစုက accessibility ကို traditional definition ထက်ပိုတယ်လို့ ထင်ကျတယ်။ အမြင် ယိုယွင်နေတဲ့ လူတွေ၊ နားမကြားတဲ့ လူတွေ့၊ ကိုယ်လက်အင်္ဂါယိုယွင်းနေတဲ့ လူတွေ့အတွက် web browser တွေ့နဲ့ကူညီဖို့ နည်းလမ်းများစွာ ရှိပါတယ်။ ဥပမာ - မျက်စီမမြင်တဲ့လူ (သို့) မျက်စီယိုယွင်နေတဲ့လူ အတွက် special software ကိုသုံးပြီး screen ပေါ်မှာ စာဖတ်နိုင်အောင် ကူညီပေးရမှာ ဖြစ်ပါတယ်။ နားယိုယွင်းနေတဲ့လူ (သို့) လူတွေ့က native language ကို မပြောနိင်ရင်တောင်မှ video ပေါ်မှာရှိတဲ့ subtitleကိုကြည့်ပြီး ရေးနိုင်ပါလိမ့်မယ်။ နောက်ထပ် definitions မှာ မတူညီတဲ့ hardware types ပါဝင်ပါတယ်။ ငယ်ရွယ်တဲ့လူတွေ၊အသက်ကြီးတဲ့လူတွေ၊ချမ်းသာတဲ့လူ၊ဆင်းရဲတဲ့လူတွေ အားလုံးလူအများစုကယနေ့ခေတ်မှာ web တွေကိုလက်ခံအသုံးပြုဖို့ mobile devices တွေကိုအသုံးပြုကြပါတယ်။ Mobile devices တွေ့ဟာ online မှာရှိတဲ့ အမျိုးမျိုးသော လူတွေ့လက်ခံဖို့ အလွန်စိတ်ဝင်စားစရာကောင်းတဲ့ နည်းလမ်းဖြစ်ပါတယ်။ဒါကြောင့်နောက်အနာဂက်အတွက်ကျွန်တော်တို့အဆင်သင့်ပြုလုပ်ထားဖို့လိုအပ်ပါတယ်။mobile devices တွေတင်မကပဲအခြားသော devices တွေဖြစ်တဲ့ PDAs, music players, tablet computers, netbooks, laptops, gaming consoles နဲ့ traditional desktop computers တွေကိုလည်းပဲအသုံးပြုကြပါတယ်။ တစ်နေ့မှာ web browsers တွေကို cars, airplanes, refrigerators တွေနဲ့ toaster တွေမှာတောင်မှပါဝင်လာနိုင်ပါတယ်။အဲ့တာကြောင့်ကျွန်တော်တို့က standard-based websites ကိုတိုးတက်လာတဲ့technologies တွေ ကောင်းမွန်တဲ့ structure markup တွေကိုအသုံးပြုကာဖန်တီးပြီးအဆင်သင့်ပြုလုပ်ထားဖို့လိုအပ်ပါတယ်။ သင်ကြိုက်တဲ့ search engine (googleလိုမျိုး) ထဲမှာတစ်စုံတစ်ခုကိုရိုက်ပြီးရှာတဲ့အခါမှာ links တွေ billions ပေါင်းများစွာပါဝင်တဲ့ vast database ထဲကိုရောက်သွားမှာပဲဖြစ်ပါတယ်။အဲ့ဒီ links တွေကို huge database ကိုပထမနေရာရောက်အောင်ဘယ်လိုယူသလဲဆိုတာကိုပြောပြပေးသွားပါမယ်။ search engine တွေမှာကောင်းမွန်တဲ့ programs နဲ့ search spider လို့ခေါ်တဲ့ကောင်းမွန်တဲ့ computer တွေရှိပါတယ်။spider လို့ဘာကြောင့်ခေါ်သလဲဆိုရင် သူတို့က web ပေါ်မှာပဲရှိပြီးတော့ သူ့တိုကသက်ဆိုင်တဲ့ content တွေကိုရှာဖွေပြီး Link တစ်ခုကနေ အခြား link တစ်ခုကိုသွားကြပါတယ်။ search engine spider တွေက လူတွေလိုဘာသာမပြန်တက်ပါဘူး။သူတို့က links တွေ keywords တွေ headers တွေနဲ့ အခြား semantic tag တွေကိုရှာဖွေပါတယ်။အဲ့တာတွေက document ရဲ့ Meaning နဲ့ structure တွေကိုဖော်ပြတဲ့အခါမှာကူညီပါတယ်
Vision
Accessibility က ကျယ်ပြန့်တဲ့ subject တခုဖြစ်ပါတယ်၊ ဒါပေမဲ့ ကျနော့်တို့ သိရှိတဲ့ အာရုံထဲ့မှာတော့ ကျဉ်းမျောင်းနေပါသေးတယ်။ အခု ကျနော့်တို့ site ကို techniques ပေါ်အခေခြံပြီး အမြင်အာရုံယိုယွင်နေတဲ့သူတွေ့အတွက် ပိုမိုအသုံးဝင်အောင်ပြုလုပ်ရမှာဖြစ်ပါတယ်။ မျက်လုံးချွတ်ယွင်းနေတဲ့သူလို့ပြောလိုက် လူတော်တော်များများက မျက်လုံးမမြင်တဲ့လူလို့ ထင်ကျပါလိမ့်မယ်။ သို့ပေမယ်လည်း full eyesight နဲ့ blindness ကြား ချွတ်ယွင်းချက်များစွာ ရှိပါတယ်။ တယောက်ချင်ဆီအတွက် စဉ်းစားဆင်ခြင်ဖို့ လိုအပ်ပါတယ်။ ပထမတစ်ခုကတော့ color blindness အကြောင်းပြောမှာ ဖြစ်ပါတယ်။ အရောင်တမျိုးသာ မြင်ရတဲ့ အမျိုးမျိုးသော color blindness တွေ့ရှိပါတယ်။ အဲ့တာက web designer တွေ့အတွက် ရှုပ်ထွေးတဲ့ challenge ဖြစ်ပြီ တစ်ခါတရံမှာ plan မချနိုင်အောင်တောင် ဖြစ်နိုင်ပါတယ်။ ဒါပေမဲ့ အဖြေက ရိုးရှင်းပါတယ်။ မင်းက website design ဆွဲနေသော်လည်း အနှစ်ချုပ်မှာတော့ အမြဲပြန်စစ်သင့်တာဖြစ်ပါတယ်။လူတွေ့မှာ မြင်နိုင်တဲ့အာရုံတွေ့ မတူကျပါဘူး။ အချို့သော screen readerတွေ့ကို အသုံးပြုပြီး ကျနော့်တို့ site ကို လာလည်တဲ့သူတွေ့ကို အသုံးပြုရအောင်လွယ်ကူအောင် အချို့သော technique toolတွေ့ကို သုံးသွားမှာ ဖြစ်ပါတယ်။ အဲ့tool ကိုတော့ Spur App လို့ခေါ်ပါတယ်။ အဲ့လို့သုံးပြီပြီဆိုရင် ကျနော်တို့ web site မယ် url ရိုက်ထည့်ပြီ image upload လုပ်ပြီးတာနဲ့ test လုပ်ဖို့ကူညီပေးပါလိမ့်မယ်။ အဲ့လို့မျိုး ပုံကို တင်ပြီးပြီးဆိုရင် ကောင်းမွန်တဲ့ သေးငယ်တဲ့ animation နဲ့ play ပါလိမ့်မယ်။ ချို့ယွင်နေတဲ့ နေရာကို select ကို grayscale နဲ့မှတ်ပြီ စပြီ စစ်ဆေးနိုင်ပါပြီ။ ခုတော့web site က တော်တော်လေးကောင်းသွားပါပြီ။နားချို့ယွင်းနေတဲ့ သူတွေ့အတွက် တချို့သော နည်းပညာတွေ့ကို သုံးပြီ တိုးတက်စေဖို့လုပ်ဆောင်သွားမှာ စြဖ်ပါတယ်။ screen reader အချို့ကပိုက်ဆံနဲ့ပေးဝယ်ရတာဖြစ်ပြီး အချို့ကတော့ အလကားအသုံးပြုနိုင်ပါတယ်။တစ်ချို့ screen reader တွေကတော့ operating system ထဲမှာ ပါဝင်ပြီးသားတွေပဲဖြစ်ပါတယ်။ web content တွေမှာအသံကိုအသုံးပြုခြင်းက ရိုးရှင်းတဲ့ပထမဆုံးနည်းလမ်းတစ်ခုဖြစ်ပါတယ်။screen reader တွေက paragraph text တွေဖတ်ခြင်းအတွက်အလွန်ကိုအသုံးဝင်ပါတယ်။ ဒါပေမယ့် ယနေ့ခေတ် web sites တွေမှာတော့ link တွေကိုကြယ်ပြန့်စွာအသုံးပြုတာတွေ၊imagesတွေ၊headers တွေ၊multi-column layout တွေ၊tabular data တွေ၊ browsser plug-insတွေ၊forms တွေ၊ Javascripts တွေနဲ့အခြားအရာတွေကိုကိုဘယ်လိုဆုံးဖြတ်ရမလဲဆိုတာပဲဖြစ်ပါတယ်။အဲ့တာတွေမှာပြသနာတစ်ခုခြင်းစီပါဝင်နေပြီးတော့အဲ့တာတွေကို plain HTML နဲ့စပြီးလေ့လာတာကကောင်းမွန်ပါတယ်။လွယ်ကူတဲ့နည်းလမ်းတစ်ခုကတော့ web developer tool bar ကိုအသုံးပြုခြင်းပဲဖြစ်ပါတယ်။ Google Chrome တို့ Firefox တို့မှာ Download ဆွဲပြီးအသုံးပြုနိုင်ပါတယ်။အဲ့တာကိုထည့်ပြီးအသုံးပြုဖို့အတွက် browser မှာ web developer toolbar လို့ရိုက်ရှာပြီး down နိုင်ပါတယ်။ web developer tools ထဲမှာ image တွေကို disable လုပ်ပြီး hide ထားနိုင်သလို css style အားလုံးကိုလည်း disable လုပ်ထားနိုင်ပါတယ်။အဲ့တာကတော့ plain html ရဖို့အတွက်နည်းလမ်းတစ်ခုပဲဖြစ်ပါတယ်။
Website Lowfidelity
ခု ကျနော့်တို့ knowledge ကို action အဖြစ် ထည့်မှာ ဖြစ်ပြီ၊ ရိုးရှင်းတဲ့ web project လေးတည်ဆောက်မှာ ဖြစ်ပါတယ်။ ကျနော့်တို့ရဲ့ site element layout အကြမ်းရဖို့ low-fidelity mockup ဖန်တီနေတာဖြစ်ပါတယ်။ အဲ့နောက်မှာမှ real HTML နဲ့ CSS တို့ကို သွားမှာ ဖြစ်ပါတယ်။ product အတွက် lending page တွေ့ တည်ဆောက်တာကို widget လို့ခေါ်ပါတယ်။ company ကနေ ပြုလုပ်တဲ့ ဟာကိုလည်း widget လို့ခေါ်ပါတယ်။ widget အသစ်တခု launched လုပ်ရပါမယ်၊ page create လုပ်နေရင်းနဲံ tasked လုပ်ပြီးတဲ့ အခါ announce လုပ်ရမှာ ဖြစ်ပါတယ်။ site က လူတိုင်း ဝယ်နိုင်လောက်တဲ့ accessible ဖြစ်ဖို့ လိုအပ်ပါတယ်။ ပထမ site က ဘယ်လို့ site မျိုးဖြစ်တယ်ဆိုတာကို သိဖို့အတွက် logo အကြီးထည့်ပေးရမှာ ဖြစ်ပါတယ်။ အဲ့နောက်မှာမှ အချို့သော navigation ဖြစ်တဲ့ text ကြီးတွေ့ ရေးရမှာ ဖြစ်ပါတယ်။ အဲ့ဒီနောက်ကျွန်တော်တို့နှစ်သက်တဲ့ပုံစံအတိုင်း layout ချထားနိုင်ပါတယ်။ project တွေရေးတဲ့အခါမှာ layout တွေကိုဆွဲဖို့ရန်အတွက် mockup application လိုအပ်ပါတယ်။ Mockup Application ကို download ရယူရန်အတွက် DOWNLOAD MOCKUP ဒီကနေသွားနိုင်ပါတယ်။
Access Web Example Project
အစောက ကျနော့်တို့ design ဆွဲထားတာကို html နဲ့ပြန်ရေးရမှာ ဖြစ်ပါတယ်။ text editor ထဲ့မယ် design layout အတိုင်း html tag ရဲ့ body tag ထဲ့မယ် လိုအပ်တဲ့ div tagတွေ့ paragraph tag တွေ့ကို လိုအပ်သလို့သုံးရမှာ ဖြစ်ပါတယ်။ အဲ့ page တွေ့က html tag တွေ့ပဲဖြစ်ပါသေးတယ်။ css ကိုတော့ တခြားဖိုင်းမှာ အသစ်ဆောက်ပြီးရေးပေးရင် ပိုအဆင်ပြေပါတယ်။ ဥပမာ -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example Project Web</title>
<link rel="stylesheet" href="css/egproject.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="egproject.html"><h1>Wdiget</h1></a>
<ul id="nav">
<li><a href="egproject.html">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div id="content">
<div id="about">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum itaque aliquid, officia alias vitae quae nemo quas accusantium repellendus ullam suscipit iste quo consequuntur cum laudantium, enim fugiat culpa. Recusandae?
</p>
<div id="cta">
<h3>The new widget is $10.</h3>
<a href="#">BUY NOW</a>
</div>
</div>
</div>
<div id="widget_pic">
<img src="images/gear.png" alt="A drawing of a widget, which looks similar to a gear">
</div>
<p id="compare">Compare Wdiget to other projects</p>
<table id="product_table">
<thead>
<tr>
<th>Product</th>
<th>Quality</th>
<th>Speed</th>
<th>Strength</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wdiget</td>
<td>High Quality</td>
<td>Fast</td>
<td>Strong</td>
<td>$10</td>
</tr>
<tr>
<td>Gadget</td>
<td>Good Quality</td>
<td>Slow</td>
<td>Weak</td>
<td>$15</td>
</tr>
<tr>
<td>Gizmo</td>
<td>Poor Quality</td>
<td>Slowest</td>
<td>Weakest</td>
<td>$25</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output Here
Access Web App Form
websites နဲ web app ကြား အချို့သော မတူညီတာလေးတွေ့ရှိပါတယ်။ web app ရဲ့ကြီးမားတဲ့အပိုင်းကတော့ form တွေ့ပဲ ဖြစ်ပါတယ်။ Forms တွေ့ဟာ မကြာခနအသုံးဝင်မှု နည်းပါးတဲ့ source ဖြစ်ပါတယ်။ ကောင်းမွန်တဲ့ visual design နဲ့ sighted users တွေ့အတွက် အကျိုးရှိပြီတော့ ကောင်းမွန်တဲ့ markupနဲ့ form ကတော့ လူတွေ့အတွက် အကျိုးရှိပါလိမ့်မယ်။ text editor ကနေ input တွေ့ label တွေ့ ပါတဲ့ form ရေးလိုက်ရင် browser မယ် screen reader တွေ့အတွက် form ကရရှိလာမှာ ဖြစ်ပါတယ်။ ပထမနေနဲ့ form ကို မည်သည့်နေရာကိုမှ submit လုပ်အုံးမှာ မဟုတ်သေးပါဘူး။ အရေးကြီးတဲ့ အရာက label tagတွေ့ဖြစ်ပါတယ်။ user က input dataတွေ့ကို အစဉ်လိုက် သွားချင်တယ်ဆိုရင် tab key နဲ့လည်းသွားချင်မှာ ဖြစ်ပါတယ်။ အဲလို့မျိုးအခြေနေရောက်ရင် ကျနော့်တို့က label မှာ ပါတဲ့ for attribute မယ် input နဲ့သက်ဆိုင်တဲ့ ကိုယ်ကြိုက်တဲ့နမည်ပေးပြီ သူနဲ့သက်ဆိုင်တဲ့ input မှာလည်း label tag ရဲ့ for valueနဲ့ တူအောင်ရေးရမှာ ဖြစ်ပါတယ်။ အဲ့လို့ရေးပေးခြင်းအားဖြင့် user က tab key နဲ့ သွားမယ်ဆိုလည်း တစ်ဆင့်ချင်ဆီ သက်ဆိုင်ရာကို input tagထဲ့ကို focus သွားလုပ်ပေးမှာ ဖြစ်ပါတယ်။ ပြီးတော့ tag key တွေ့ကို စခုန်ချင်တဲ့ ကောင်ကိုလည်း label tag ထဲ့မယ် tabindex attribute အနေနဲ့ value 1 or 2 or 3 ဆိုပီ ထည့်ပီးသုံးနိင်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Accessibility of Web App Form</title>
<style>
#submit{
padding: 10px 5px;
color: #000;
background: rgb(77, 196, 150);
border-radius: 2px;
}
</style>
</head>
<body>
<form action="#" method="GET">
<p><strong>Please choose your favourite colors:</strong></p>
<input type="checkbox" name="color" id="red" tabindex="2">
<label for="red">Red</label>
<input type="checkbox" name="color" id="green" tabindex="3">
<label for="green">Green</label>
<input type="checkbox" name="color" id="blue" tabindex="4">
<label for="blue">Blue</label>
<br>
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" tabindex="1">
<br>
<br>
<input type="submit" value="SEND" id="submit">
</form>
</body>
</html>
Output Here
Web App Table
Web app တွေ့မှာဆိုရင် မကြာခန tabular data တွေ့ကို ပြဖို့လိုအပ်ပါတယ်။ table အကြောင်းကို ပိုမိုလေ့လာသွားမှာ ဖြစ်ပါတယ်။ ဥပမာ - fruit တွေ့ကြားမယ် fresh ဖြစ်သလား (သို့) canned ဖြစ်သလားဆိုတာကို နှုင်ယှဉ်ပြီး တခုချင်ဆီအတွက် price တွေ့နဲ့ မြင်သာအောင် ဖော်ပြသွားမှာ ဖြစ်ပါတယ်။ screen reader က table က ဘာဖော်ပြထားလည်ဆိုတာကို text ရဲ့ bit တွေ့ကို ဖတ်ရပါတယ်။ ကျနော့်တို့က caption tag တွေ့ထည့်ပြီးတော့ fix လုပ်နိုင်ပါတယ်။ caption tag က table ရဲ့ အထက်မှာ ပေါ်ပေးမှာ ဖြစ်ပါတယ်။ Caption tag က summery attributes နဲံ တူပါတယ်။ summery ဆိုတာက table မှာ ပါတဲ့ attribute ဖြစ်ပါတယ်။ သူက assistance devices တွေ့သုံးပြီ လူတွေ့ကို ဖော်ပြနိုင်ပါတယ်။ table ရဲ့ summery attribute က users တွေ့မြင်ရမှာတော့ မဟုတ်ပါဘူး။ summery attribute ထည့်မယ် ပါတဲ့ value က ကျနော့်တို့ကို ကျနော့်တို့ကို လျင်လျင်မြန်မြန် table data တွေ့ဖော်ပြပေးတာဖြစ်ပါတယ်။ screen reader (သို့) braille က navigate table ထက်ပြနိုင်ရင် summery information ကို user တွေ့ဖတ်ဖို့ ပိုလွယ်ကူသွားမှာ ဖြစ်ပါတယ်။ scope ဆိုတဲ့ attributes တွေကိုတော့ header တွေကိုသင့်လျှော်တဲ့ rows တွေ column တွေနဲ့ချိတ်ဆက်ပေးဖို့ပဲဖြစ်ပါတယ်။အဲ့တာတွေကိုအောက်ပါexample ထဲမှာထပ်ပြီးလေ့လာနိုင်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web App Table</title>
</head>
<body>
<table summery="Comparison of canned fruit prices and fresh fruit prices.">
<caption>Fresh Fruit Prices versus Canned Fruit Prices</caption>
<tr>
<th scope="col"> Packaging</th>
<th scope="col"> Peaches</th>
<th scope="col"> Pears</th>
<th scope="col"> Apples</th>
</tr>
<tr>
<td scope="row">Canned</td>
<td>$1</td>
<td>$2</td>
<td>$1</td>
</tr>
<tr>
<td scope="row">Fresh</td>
<td>$2</td>
<td>$3</td>
<td>$2</td>
</tr>
</table>
</body>
</html>
Output Here
Web App Chart and Graph
ခုခါမှာတော့ chart တွေ့ graph တွေ့ဘယ်လို့လုပ်လုပ်လဲဆိုတာကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ ခုကတော့ online ပေါ်မယ် chart တွေ့၊ graph တွေ့နဲ့ ပါတ်သက်တဲ့ flash ကဲ့သို့သော plugin တွေ့များကြီးရှိပါတယ်။ သူတို့က ပုံတွေ့ကို သုံးပြီး ဖြေရှင်းကျတာဖြစ်ပါတယ်။ သို့ပေးမယ်လည်း အဲ့ဖြေရှင်းချက်တွေ့ကို screen reader တွေ့က လက်ခံနိုင်ကျပါတယ်။ ကျနော့်တို့ကတော့ HTMLနဲ့ CSSကိုသုံးပြီးတော့ chart ကိုဘယ်လို့လုပ်လဲဆိုတာကို လေ့လာမှာ ဖြစ်ပါတယ်။ libraries အများစုက အမျိုးမျိုးသော degreeတွေ့ကို ပြောင်းလဲပြီး HTML နဲ့ CSS နဲ့ပဲ လုပ်ထားတာဖြစ်ပါတယ်။ ခုကျနော့်တို့က horizontal bar graph လေးကိုဖန်တီးပြီး unordered listလေးနဲ့ပြသပေးမှာ ဖြစ်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web App Chart & Graph</title>
<link rel="stylesheet" href="css/chart.css">
</head>
<body>
<div id="wrapper">
<h1>Fruit farms in Florida.</h1>
<ul class="graph">
<li>
<span class="fruit" id="orange">Oranges</span>
<span class="total">120 Farms</span>
</li>
<li>
<span class="fruit" id="strawberry">Strawberries</span>
<span class="total">80 Farms</span>
</li>
<li>
<span class="fruit" id="apple">Apples</span>
<span class="total">60 Farms</span>
</li>
<li>
<span class="fruit" id="banana">Bananas</span>
<span class="total">40 Farms</span>
</li>
</ul>
</div>
</body>
</html>
Output Here
Introduction to SVG
မင်းက computer screen ကို အနီးကပ်ကြည့်ရင် (သို့) ပုံကို အကြီးကြိးချဲ့ပြီကြည့်ရင် ပုံမှာ pixels လို့ခေါ်တဲ့ လေးထောင့်ပုံလေးတွေ့ကို မြင်ရပါလိမ့်မယ်။ Graphics က raster graphics လို့သိထားတဲ့ pixels တွေ့နဲ့ ဖွဲ့စည်းထားတာဖြစ်ပါတယ်။ မကြာသေးခင် နှစ်ကပဲ phones, tablets, desktops စတာတွေ့ များကြီးပေါ်ပေါက်လာခဲ့တာဖြစ်ပါတယ်။သူတို့မှာ မတူညီတဲ့ physical dimensions တွေ့ရှိသော်လည်း မတူညီတဲ့ pixel densities တွေ့ပါ ရှိတာဖြစ်ပါတယ်။ တခြားနည်းပြောရရင် traditional screens ဟာ တစ်လက်မကို 72 pixels (သို့) 72 ppi ပါဝင်တာဖြစ်ပါတယ်။ နောက်အသစ် screen တွေ့မှာ တူညီတဲ့ space မှာ pixels တွေ့ပိုဝေးရင် 330 ppi ထက် တွန်းနိုင်ပါတယ်။ အဲ့တာက end user တွေ့အတွက် ကြီးမားလွန်းပါတယ်၊ဘာကြောင်လဲဆိုရင်တော့ များပြားလာတဲ့ detail နဲ့ clarity နဲ့ image တွေ့ကို ခနလေးအသုံးပြုခြင်းကို ဆိုလိုပါတယ်။ သို့ပေမယ်လည်း အဲ့တာက web designer အတွက် အမှန်တကယ် ပြသနာဖြစ်လာနိုင်ပါတယ်။ မတူညီတဲ့ screen sizes တွေ့ဆို responsive design နဲ့ ဖြေရှင်းနိုင်ပါတယ်၊ မတူညီတဲ့ densities ကိုတော့ လေ့လာသွားမှာဖြစ်ပါတယ်။ ပုံတွေ့ကို ပို့တဲ့ခါကျ ကျနော့်တို့က resolution ကောင်းကောင်းနဲ့ မပို့လို့ရှိရင် ပုံတွေ့က ဝါးဝါးနေမှာ ဖြစ်ပါတယ်။ resolution ကောင်းလွန်းပြီး ပို့ရင်လည်း ကျနော့်တို့ website က နှေးကွေးနေမှာ ဖြစ်ပါတယ်။ အဲ့တာကြောင့် scalble vector graphics တွေ့ကသာ အကောင်းဆုံး အဖြေဖြစ်ပါလိမ့်မယ်။ အဲ့files တွေ့က JPEG or PNG file တို့လို pixelsတွေ့နဲ့ ဖွဲစည်းထားတာမဟုတ်ဘဲ vectors တွေ့နဲ့သာ ဖွဲစည်းထားတာဖြစ်ပါတယ်။ SVG fileမယ် vector က 2D space ရှိတဲ့ xနဲ့ y coordinateနဲ့အတူ point တစ်ခုဖြစ်ပါတယ်။ မင်းက points အမျိုးမျိုးကို အတူတကွ ပြုလုပ်တဲ့အခါမှာ မင်းက shapes တွေ့ outlines တွေ့ကိုလုပ်ဆောင်နိုင်လိမ့်မယ်။ SVG fileကို ချဲ့ကြည့်တဲ့အခါ detailed တော့ မြင်ရလိမ့်မယ် pixels တော့ ဟုတ်တော့မှာ မဟုတ်ဘူး။ vectorized လုပ်ထားတဲ့ imagesက automatically pixel grid ထဲ့ကျသွားပါလိမ့်မယ်။ အဲ့တာကြောင့် ကျနော့်တို့ screen မှာ physical pixels တွေ့ကို ကြည့်ရင်တောင်မှ မတူညီတဲ့ scales ရှိတဲ့ ine နဲ့ colors တို့ကို မြင်နိုင်ပါတယ်။ နော်ထပ် SVG file က ဘာလို့အချိန်တိုင် မသုံးတာလဲဆိုတာ ေ့လလာသွားမှဖြစ်ပါတယ်။ ပုံတွေ့မှာ ပါတဲ့ pixel တစ်ျငိဆီကို ဆက်စပ်ဖို့ ကြီးမားတဲ့ေ ပြာင်းလဲမှုမျိုးလိုအပ်လာရင် pixel data သုံးဖို့ထက် SVGကို storeလုပ်ဖို့ ပိုအရေးကြီးသွားပါပြီ။ Digital camera တွေ့က vector images အဖြစ် phtographs တွေ့ကို မယူသလဲဆိုရင် resolution မြင့်မားတဲ့ sensors တွေ့တောင်မှ capture images တွေအဖြစ်ရှိနေပြီးတော့ single pixel တိုင်းကneighboring pixels အားလုံးနဲ့အမြဲတန်းခြားနားနေပါလိမ့်မယ်။ SVG အလုပ်လုပ်ဖို့အတွက် သက်သေပြတဲ့ ပုံစံတွေ့လိုအပ်ပြီးတော့ computer က follow လုပ်နိုင်ပါတယ်။ general rule တွေ့ကို ပြောပြပ့ါမယ်။ web page ပေါ်မယ် photograph or traditional artworkထည့်မယ်ဆိုရင် raster file formatကိုပဲ အမြဲသုံးသင့်တယ်။ SVG က color အများပြားကိုမလုပ်နိုင်ဘူးလိ့ု မဆိုလိုပါဘူး။ သူ့မှာ intricate illustrations အတွက် advanced gradientsတွေ့ subtle blending, SVG တို့ကို သုံးတာဖြစ်ပါတယ်။ နောက်တစ်ပိုင်းမှာတော့ scalable vector graphics တွေကိုဘယ်လိုဖန်တီးလဲဆိုတာကိုလေ့လာရမှာပဲဖြစ်ပါတယ်။ အခြား image format တွေကို svg file format အဖြစ်ပြောင်းပြီးအသုံးပြုလိုပါက SVG Creatorကနေသွားပြီးပြောင်းနိုင်ပါတယ်။SVG က HTML တိုလို့ပဲ XML markup language ဖြစ်ပါတယ်။ SVG elements တွေ့နဲ့ attributes တွေ့ကတော့ တခုလုံး ကွဲပြားခြားနားနေတာဖြစ်ပါတယ်။ SVG file တွေ့ကို html တိုလ့ိုပဲ text editor သုံးပြီး ဖန်တီးနိုင်ပါတယ်။
Create SVG
SVG markup မှာ professionals တွေ့အတွက် typing ရိုက်ဖို့ ခက်ခဲ့ပါတယ် ဘာကြောင့်လဲဆိုရင်တော့ great tool တွေ့ အဆင့်သင့်ရှိထားပြီးတဲ့ အခါမှာ ငြိငွေ့စရာကောင်းလို့ဖြစ်ပါတယ်။ လူအများစုကတော့Adobe Illustrator တို့ကို သုံးပြီးတော့ ဆွဲကျပါတယ်၊ပြီးမှ SVG format export ထုတ်ပါတယ်။
SVGS AS Images
Web page ပေါ်မယ် svg createလုပ်ဖို့ဆိုရင် နည်းလမ်းနှစ်ခုရှိပါတယ်။ ပထမတစ်ခုကတော့ HTML document ထဲ့ကို embed svg တွေ့ကို တိုက်ရိုက်ထည့်နိုင်တာဖြစ်ပါတယ်၊ ဒါပေမဲ့ နောက်မှ လေ့လာမှာ ဖြစ်ပါတယ်။ နောက်တစ်ခုက png or jpges လို့image filesတွေ့ကို web page ပေါ်မယ် svg file တွေ့ တင်နိုင်ပါတယ်။ svgတွေ့ကို html element ရဲ့ image element နဲ့ရေးနိုင်ပြီ background images အဖြစ်လည်း ထားနိင်ပါတယ်။ ကျနော့်တို့ဟာ svg file တေ့ကို webpage တေ့ွ့ကို မှာ အသုံးမပြုခင်မှာ svg optimization တစ်ဆင့်ကို လုပ်ဆောင်ရပါတယ်။ အဲ့တာကို လုပ်ဆောင်ဖိုအတွက်git ပေါ်မယ် အမှန်တကယ်ကောင်းတဲ့ tool ဖြစ်တဲ့ SVGO (သို့) SVG Optimizer ကို အသုံးရမှာဖြစ်ပါတယ်။ အဲ့တာတွေ့က Mac နဲ့ Windwo အတွက် graphical user interface version ဖြစ်ပါတယ်။ svgo-gui ကို download ပြုလုပ်ပြီး အသုံးပြုနိုင်ပါတယ်။ ကျွန်တော်တို့အသုံးပြုချင်တဲ့ svg file ကိုavgo-gui ကိုဆွဲထည့်ပေးလိုက်လျှင် file size နဲ့မလိုအပ်တဲ့ metadata တွေကိုလျှော့ချပေးပါလိမ့်မယ်။အဲ့တာတွေကအမှန်တကယ်တော့ကြီးမားတဲ့အရာတွေမဟုတ်သေးပါဘူး။ ပိုပြီးရှုပ်ထွေးတဲ့ SVG file တွေရှိလာတဲ့အခါ အဲ့တာတွေက ကျွန်တော်တို့ page တွေရဲ့ load time တွေကိုလျှော့နည်းသွားစေဖို့အမှန်တကယ်ကိုကူညီပေးပါတယ်။ အောက်ပါ example ထဲမှာ svg image တွေကိုသုံးပြထားတာပဲဖြစ်ပါတယ်။svg file ကို text editor ထဲမှာဖွင့်ကြည့်တဲ့အခါ XML workspaces တွေကိုမြင်တွေ့ရမှာဖြစ်ပါတယ်။အဲ့တာတွေက html စီထားတာတွေနဲ့တူနေပြီးတော့ မတူညီတဲ့ element တွေဖြစ်တဲ့ circle တွေ path တွေကိုတော့သင်သတိထားမိပါလိမ့်မယ်။
Embedding SVGs
SVG data တွေ့ကို ကျနော့်တို့ရဲ့ HTML ထဲ့ကိုထည့်ပီ လေ့လာသွားမှာ ဖြစ်ပါတယ်။ SVG elements တွေ့ကို select လုပ်ပြီ တခြားသော HTML element တွေ့လို့ css ကိုသုံးဖို့ ခွင့်ပြုသွားမှာ ဖြစ်ပါတယ်၊အဲ့ပြီတော့ CSS styles တွေ့နဲ့ အသုံးချသွားမှာ ဖြစ်ပါတယ်။ အားလုံးကြီးလုပ်ဖို့တော့ မလိုအပ်ပါဘူး။ ပထမ ကျနော့်တို့ svg file ကိုtext editor နဲ့ဖွင့်ရမှာ ဖြစ်ပါတယ်။ ကျနော့်တို့ အဲ့လို့ဖွင့်ပြီပြီဆိုရင် အဖွင့်ပိတ်ကိုတကြောင်းချင်ဆီ ဆင်းခိုင်းပြီ၊ class ပေးပြီး css မှာ stroke တွေ့ fill တွေ့ထပ်ထည့်နိုင်ပါတယ်။နောက်ထပ် svg တွေကို weg page ထဲထည့်ဖို့ရာအခြားနည်းလမ်းတွေရှိသော်လည်း အဲ့တာတွေက အခြေခံတွေကိုပြုပြင်ထားတာပဲဖြစ်ပါတယ်။ နောက်ထပ်ကောင်းတာတစ်ခုကတော့ Http request တွေကိုလျှော့ချနိုင်မှာဖြစ်ပါတယ်။အဲ့တာက web page တွေကိုပိုပြီးတော့မြန်ဆန်စေတာပဲဖြစ်ပါတယ်။ HTML ထဲကိုထည့်မည့် SVGs တွေက file size သေးနေရပါမယ်။SVG file တိုင်းဟာ style sheet တွေမှန်ကန်ဖို့လိုအပ်ပါတယ်။
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg class="embed_img" height="67px" id="Layer_1" style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="67px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path class="embed_img" d="M29.765,50.32h6.744V33.998h4.499l0.596-5.624h-5.095 l0.007-2.816c0-1.466,0.14-2.253,2.244-2.253h2.812V17.68h-4.5c-5.405,0-7.307,2.729-7.307,7.317v3.377h-3.369v5.625h3.369V50.32z M34,64C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#3A589B;"/>
Optimizing SVGs
ကျနော့်တို့ SVG ကို ဘယ်လို့ပိုမိုကောင်းမွန်အောင် ဘယ်လို့နည်းလမ်းတွေ့ကို သုံးရမယ်ဆိုတာကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ အဲ့နည်းလမ်းတွေ့ကတော့ optimizing, organizing, structuring တို့ပဲ ဖြစ်ပါတယ်။ Optimization ကတော့ web ပေါ်မယ် SVG အဖြစ် မပြခင် အရေးကြီးတဲ့ အပိုင်းဖြစ်ပါတယ်။ သေးငယ်တဲ့ file လုပ်ခြင်းက users တွေ့အတွက် ကျနော့်တို့ရဲ့ site ကိုလျင်မြန်စေမှာ ဖြစ်ပါတယ်။ အဲ့တာက bandwidth ရဲ့ costတွေ့ maintenanceရဲ့ cost တွေ့နည်းခြင်းက မင်းရဲ့ company ကို save ဖြစ်စေတာဖြစ်ပါတယ်။ ကျော်ကြားတဲ့ SVG optimization toolသုံးခြင်းကို SVGO လို့ခေါ်ပါတယ်။ SVGO (သို့) SVG optimizer က command line tool ကို အခြေံထားတဲ့ node တစ်ခုပဲဖြစ်ပါတယ်။ SVG ကို စပြီးမသုံးခင် ကျနော့်တို့ရဲ့ computer မယ် npm install လုပ်ဖို့အတွက် nodejs ကို install လုပ်ထားရပါမယ်။ installလုပ်ပြီးတော့ကျနော့်တို့ node ကို ပြန်စစ်ရပါမယ်။ command line ကို မသုံးချင် node ကိုလည်းမသုံးချင်ရင်တော့ ခုနောက်ပိုင်းမှာ SVGO Web App ပေါ်ပေါက်လာတာဖြစ်ပါတယ်။ သူက node ကို မလိုအပ်ပါဘူး၊ cmd ကနေလည်းသွားစရာမလိုပါဘူး။ SVG file ထွက်လာပြီတဲ့နောက်မှာ များပြားလှတဲ့ information ကိုပေးတဲ့ SVG editor တွေ့များစွာ ထွက်ပေါ်လာတာဖြစ်ပါတယ်။ ဥပမာ- designer တယောက်က SVG file ကို ချုံ့တာလိုပြောတာ(သို့) SVG file က adobe editor ကဲ့သို့ editor သုံးပြီးတော့ SVG file ထုတ်တာလို့ပြောကျတာဖြစ်ပါတယ်။ SVG file မယ် မလိုအပ်တဲ့ comments,metadata, meaningless ID, tags, attributes တွေ့ပါနေတက်ပါတယ်။ အဲ့လို့ပါနေရင် ကျနော့်တို့က တခုချင်ဆီ လိုက်ဖြုတ်နေဖို့ မလိုပါဘူး ။ SVGO tool ကို သုံးပြီး ချုံ့နိုင်ပါတယ်။ svgo နဲ့ချုံမယ်ဆိုရင် terminal မှာ npm install -g svgo ဆိုပီ run ပေးရမှာ ဖြစ်ပါတယ်။ run ပီးရင် ကျနော့်တို့က ကိုယ့်ချုံ့မယ်မယ် svgo file ရှိတဲ့နေရာကို သွားပြီ terminal မှာ svgo-svgname.svg ဆိုပြီ ရိုက်ရမှာ ဖြစ်ပါတယ်။ svgo --pretty svgimage.svg ဆိုတာကတော့ ချုံ့လိုက်တဲ့fileကိုအစီအစဉ်တကျ linebreak တွေနဲ့ပြန်ပြီးဖော်ပြဖို့အတွက်ပဲဖြစ်ပါတယ်။ နောက်ထပ် svg တွေကို data URI အဖြစ်ပြောင်းနိုင်ပါတယ်။ 64 BIT data URI ကိုပြောင်းချင်တယ်ဆိုရင်တော့ svgo svgimage.svg --datauri=base64 ဆိုတဲ့ commend ကိုသုံးပြီးပြောင်းနိုင်ပါတယ်။ SVGOMG ရဲ့ generator link ကတော့ SVGOMG ဖြစ်ပါတယ်။
<svg xmlns="http://www.w3.org/2000/svg" width="612" height="502.174" viewBox="0 65.326 612 502.174">
<ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path d="M210.333 65.331c-105.966.774-222.682 85.306-209.277 211.118 4.303 40.393 18.533 63.704 52.171 79.03 36.307 16.544 57.022 54.556 50.406 112.954-9.935 4.88-17.405 11.031-19.132 20.015 7.531-.17 14.943-.312 22.59 4.341 20.333 12.375 31.296 27.363 42.979 51.72 1.714 3.572 8.192 2.849 8.312-3.078.17-8.467-1.856-17.454-5.226-26.933-2.955-8.313 3.059-7.985 6.917-6.106 6.399 3.115 16.334 9.43 30.39 13.098 5.392 1.407 5.995-3.877 5.224-6.991-1.864-7.522-11.009-10.862-24.519-19.229-4.82-2.984-.927-9.736 5.168-8.351l20.234 2.415c3.359.763 4.555-6.114.882-7.875-14.198-6.804-28.897-10.098-53.864-7.799-11.617-29.265-29.811-61.617-15.674-81.681 12.639-17.938 31.216-20.74 39.147 43.489-5.002 3.107-11.215 5.031-11.332 13.024 7.201-2.845 11.207-1.399 14.791 0 17.912 6.998 35.462 21.826 52.982 37.309 3.739 3.303 8.413-1.718 6.991-6.034-2.138-6.494-8.053-10.659-14.791-20.016-3.239-4.495 5.03-7.045 10.886-6.876 13.849.396 22.886 8.268 35.177 11.218 4.483 1.076 9.741-1.964 6.917-6.917-3.472-6.085-13.015-9.124-19.18-13.413-4.357-3.029-3.025-7.132 2.697-6.602 3.905.361 8.478 2.271 13.908 1.767 9.946-.925 7.717-7.169-.883-9.566-19.036-5.304-39.891-6.311-61.665-5.225-43.837-8.358-31.554-84.887 0-90.363 29.571-5.132 62.966-13.339 99.928-32.156 32.668-5.429 64.835-12.446 92.939-33.85 48.106-14.469 111.903 16.113 204.241 149.695 3.926 5.681 15.819 9.94 9.524-6.351-15.893-41.125-68.176-93.328-92.13-132.085-24.581-39.774-14.34-61.243-39.957-91.247-21.326-24.978-47.502-25.803-77.339-17.365-23.461 6.634-39.234-7.117-52.98-31.273-29.365-51.617-81.947-74.215-137.452-73.811zM445.731 203.01c6.12 0 11.112 4.919 11.112 11.038 0 6.119-4.994 11.111-11.112 11.111s-11.038-4.994-11.038-11.111a11.01 11.01 0 0 1 11.038-11.038z"/></svg>
Groupong & Refrencing SVGs
SVG တွေ့က graphicsဆွဲဖို့အတွက် circle paths , polygons ကဲ့သို့သော ပါဝင်တာမဟုတ်ဘဲ ကျနော့်တို့ရဲ့ svg file ထဲ့မယ် organizing structure အတွက်ပါ အသုံးဝင်တဲ့ element တွေ့ကိုထောက်ပံ့ပေးတာ ဖြစ်ပါတယ်။ SVG ရဲ့ element တွေ့ကတော့ , , , သူတို့ကို ဘယ်လို့သုံးရမယ်ဆိုတာကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ ပထမ g (သို့) group element က ကျနော့်တို့ရဲ့ SVG file ထဲ့မှာ grouping container အဖြစ် လုပ်ဆောင်သွားမှာ ဖြစ်ပါတယ်။ ဥပမာ - ကျနော့်တို့ HTML ရဲ့ div ကဲ့သို့ဖြစ်ပါတယ်။ နှစ်ခု(သို့) နှစ်ခုထက်ပိုတဲ့ SVG element တွေ့ကို တခုတည်းထည့်ပြီ animation လုပ်ချင်ရင်လည်း သုံးနိုင်ပါတယ်။ Vector အများစုကလည်း g tagကိုသုံးပြီ object ကို group လုပ်နိုင်ပါတယ်။ ဥပမာ ထည့်မယ်တော့ path နှစ်ခုပါတဲ့ g tag ကို သုံးသွားမှာ ဖြစ်ပါတယ်။ g tag ကို class ပေးပြီ CSS နဲ့ color fill လုပ်မှာ ဖြစ်ပါတယ်။ Defs element က content တွေ့ကို store လုပ်ပြီ နောက်မှ သုံးမယ့် element တွေ့ကို သတ်မှတ်ပေးတာဖြစ်ပါတယ်။ Defs element တွေ့ကို သုံးတဲ့အခါ ကျနေ့ာ်တို့ရဲ့ document ကို refrence လုပ်မပေးရင် ပြပေးမှာ မဟုတ်ပါဘူး။ အဲ့reference လုပ်ဖို့အတွက် use element တွေ့ကို လိုအပ်ပါတယ်။ use tag ထဲမှာ svg file ရဲ့ color ကိုဖြည့်ဖို့အတွက် CSS ထဲက property ကိုလည်းထည့်သုံးနိုင်ပါတယ်။နောက်ထပ် transform ဆိုတဲ့ attributes ကိုသုံးပြီးတော့ xy coordinates height တွေကိုလည်းသတ်မှတ်ပေးနိုင်ပါတယ်။
<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.8 96.2">
<defs>
<g class="heart" id="heart">
<path d="M96 0L67.5 5.2 56.9 23.3v72.8l56.9-55.6z"/>
<path d="M46.4 5.3L17.9.1 0 40.6l56.9 55.6.1-72.8z"/>
</g>
</defs>
<!-- usage -->
<use xlink:href="#heart" fill="#c44" transform="scale(.4)" />
<use xlink:href="#heart" fill="#41af5d" transform="scale(.3) translate(160)"/>
</svg>
</body>
Output Here
Reusing graphics with symbol
symbol element ကတော့ defs, g elemnts တွေ့နဲ့ တူပါတယ်။ svg file က svg အတွင်းမှာ သာမက HTML document tag ရဲ့ မည်သည့်နေရာကိုမဆို အလုပ်လုပ်နိင်ပါတယ်။ symbol element မှာတော့ viewBox attribute ကို သုံးနိင်ပါတယ်။ svg ရဲ့ viewBox ကို ဖြတ်တောက်ပြီ symbol tag ထည့်မယ် ထည့်နိုင်ပါတယ်။ အာ့ကြောင့် ကျနော့်တို့အစောက ရေးခဲ့တဲ့ g tag def tag မှာ symbol tag အစားထိုးပြီး သုံးနိုင်ပါတယ်။ ပုံတွေ့နောက်ထပ်ပွားတာကို Shadow DOM လို့ခေါ်ပြီ regular DOM နဲ့တူပါတယ်။ ဒါပေမဲ့ အဲ့တာကို target ထားပြီတော့ css apply မလုပ်နိုင်ပါဘူး။ two fill colors ပြုလုပ်နိုင်ပြီးတော့ တစ်ပိုင်းက light fill ဖြစ်ပြီးနောက်တစ်ပိုင်းက darker fill ဖြစ်ပါတယ်။ two fill colors ပြုလုပ်ဖို့အတွက် path ထဲ့မှာ fill attr မယ် currentColor ထည့်ပြီ css ထဲမှာ color ဆိုပြီ ကျွန်တော်တို့က ထပ်ထည့်ပေးရမှာပဲဖြစ်ပါတယ်။အပြည့်အစုံကိုတော့ အောက်ပါ ဥပမာထဲမှာကြည့်နိုင်ပါတယ်။
<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" >
<symbol id="heart" viewBox="0 0 113.8 96.2">
<path d="M96 0L67.5 5.2 56.9 23.3v72.8l56.9-55.6z"/>
<path fill="currentColor" d="M46.4 5.3L17.9.1 0 40.6l56.9 55.6.1-72.8z"/>
</symbol>
</svg>
<div class="main">
<!-- Red -->
<svg width="150" height="150">
<use xlink:href="#heart" class="heart-red" />
</svg>
<!-- Green -->
<svg width="130" height="130">
<use xlink:href="#heart" class="heart-green"/>
</svg>
<!-- Blue -->
<svg width="110" height="110">
<use xlink:href="#heart" class="heart-blue"/>
</svg>
</div>
</body>
Output Here
SVG Sprite Tool
ရိုးရှင်းတဲ့ element တစ်ခုကို reference လုပ်ပြီ များပြားတဲ့နေရာမယ် SVG graphicsတွေ့ကို ဘယ်လို့ပြမယ်ဆိုတာ လေ့လာသွားမှာ ဖြစ်ပါတယ်။ အဲ့တာက SVG ရဲ့အများဆုံး feature တစ်ခုက iconsတွေ့နဲ့ ဖြစ်ပါတယ်။ ဘာကြောင့်လဲဆိုတော့ code တွေ့မထပ်ဘဲနဲ့ icons တွေ့ကို render လုပ်နိုင်ပါတယ်။ ဒါပေမဲ့ တခြားဖိုင်းမှာ ရှိတဲ့ symbols တွေ့ကို reference လုပ်နိုင်တယ်၊ clone လုပ်နိုင်တယ်။ ခု အကြီးမားဆုံးရလဒ်ကတော့ icon တခုချင်ဆီမှာရှိတဲ့ img tag (သို့) CSS background တို့ကို နှိုင်ယှဉ်ပြီ render လုပ်နိုင်ပြီတော့ HTTP request ကို စလုပ်နိုင်တာဖြစ်ပါတယ်။ SVG file တစ်ခုမှာရှိတဲ့ မင်းရဲ့ icons တွေ့က မင်းရဲ့ website ကို ပိုမြန်စေတာဖြစ်ပါတယ်။ SVG file တစ်ခုကို ထည့်ချင်တာဖြစ်ဖြစ် (သို့) ဖြုတ်ချင်တာဖြစ်ဖြစ် tool တစ်ခုကို သုံးရမှာဖြစ်ပါတယ်။ အကောင်းဆုံး tool ကတော့ SVG sprites ကို generate ထုတ်ပေးပြီး svg-sprite လို့ခေါ်ပါတယ်။ svg-sprite က SVG file ယူပြီ optimizes လုပ်ပါတယ်၊ ပြီတော့ SVG sprite sheet ထဲ့ကို ထည့်ပါတယ်။ svg-sprite creator က Gulp ထဲ့ကို သူ့ရဲ့ port ထဲ့ပြီ font-end developement ထဲ့မယ် ကျော်ကြားတဲ့ tool တခုဖြစ်ပါတယ်။
3D in browser
အခုတစ်ခါမှာတော့ ကျွန်တော်တို့ web browser ထဲမှာရှိတဲ့ 3D state အကြောင်းတွေစလေ့လာရပါမယ်။ Web Browser တွေ့ဟာ 2D graphics အတွက် ပိုပြီး traditionally သိကျပါတယ်။ Browser တွေ့ဟာ 2D မှာ things တွေ့ကို ဖော်ပြဖို့ အလွန်ကောင်းတဲ့ အရာတွေ့ဖြစ်ပါတယ်။ ဒါကြောင့် computer များစုမယ် ရှိတဲ့ CPU လုပ်တဲ့ processing တွေ့ဟာ ဈေးကြီးတာဖြစ်ပါတယ်။ graphic processing unit (သို့) GPU တွေ့လည်းပါဝင်ပါတယ်။ web browser က GPU ကိုတော့ မယူပါဘူး၊ CPU တွေ့ကိုပဲ အမြဲအသုံးပြုပါတယ်။ကျွန်တော်တို့နောက်ထပ်ပြောမှာကတော့ three.js ၊ webGL နဲ့ အစုံလိုက်ဖြစ်တဲ့New technologies တွေအသုံးချပုံပဲဖြစ်ပါတယ်။ ဒါကြောင့် CPU နဲ့ GPU ကြားမယ်ရှိတဲ့ အပိုင်းအချို့ကို ပြောပြမှာ ဖြစ်ပါတယ်။ WebGL က Raw form ကို သုံးဖို့ ရှုပ်ထွေးတဲ့ အမျိုးအစားတစ်ခု ဖြစ်ပါတယ်။ အဲ့တာက web browser ထဲ့ကို သွားမယ် OpenGL port ဖြစ်ပါတယ်။ တကယ်တာ့ OpeGL က graphic technology ဖြစ်ပြီ real-time 3D game ကို render လုပ်ဖို့တောင် သုံးကျပါတယ်။ ဒါကြောင့် မင်းက Mac or iOS တွေ့မှာ ကစားနိုင်ပါတယ်။ OpenGL က real-time 3D graphics ကိုပြုလုပ်ဖို့ အလွန်သုံးဝင်တာဖြစ်ပါတယ်။ ယခု tech တွေ့က webGL form တွေ့ browser ထဲ့မှာပဲဖြစ်ပါတယ်။ Browser က အဲ့တာတွေ့ အရမ်းကြီးရင်တော့ support မပေးပါဘူး။ လက်ရှိသုံးနေတဲ့ browser က ထောက်ပံ့မှုပေးမပေးသချင်ရင်တော့ caniuse.com မှာ သွားစစ်နိုင်ပါတယ်။ 3D တွေ့ရုပ်ရှင်ထဲ့မယ် မြင်နေရတဲ့ 3Dအကြောင်းကို ပြောပြပေးမှာ ဖြစ်ပါတယ်။ အဲမှာ 3D glasses တွေ့တပ်ကြည့်တဲ့အခါ screen တွေ့ပေါ်မှာရှိတဲ့ imagesတွေ့ဟာ ပေါ်ထွက်လာသလို့ ပေါင်းစပ်ပြီး ဖန်တီးထားတာဖြစ်ပါတယ်။ကျွန်တော်တို့ browser ကနေ threejs.orgကိုသွားကြည့်တဲ့အခါမှာ 3D framework အတွက် example project တွေကိုတွေ့ရမှာပဲဖြစ်ပါတယ်။ 3D ပုံစံတွေနဲ့ပဲမြင်တွေရမှာဖြစ်ပြီးအစစ်အမှန်တွေကိုမြင်တွေနေရတဲ့သလို ကောင်းမွန်အောင်ရေးဆွဲထားတာတွေဖြစ်ပါတယ်။အခုအခါမှာတော့ company တွေက Web GL ကိုအသုံးပြုပြီး game engine တွေကိုတည်ဆောက်ကြပါတယ်။