Website ရေးကြမယ် (၃)
အခုမှ စဖတ်မယ့် သူတွေအတွက် အရင်ပို့စ်တွေကို ပြန်ညွှန်းလိုပါတယ်…
ပီးခဲ့တဲ့ ၂ ခုမှာ ကျနော်တို့တွေ web page တွေရဲ့ အခြေခံ သဘောတရားကိုလဲ သိပီးပီ။ ဆိုက်ကိုလဲ ပုံစံကျကျ ဆောက်ပီးသွားပီ။ navigation ပါ ထည့်ပီးသွားပီ။ ပုံစံ အကြမ်းတော့ ပေါ်သွားပီ။ ကြည့်လို့ မကောင်းသေးဖူး။ layout ခွဲတာတို့၊ စာလုံး အရောင် ပြောင်းတာတို့၊ နောက်ခံပုံ ထည့်တာတို့ လုပ်ပီး ကြည့်ကောင်းအောင် ပြင်ရဦးမယ်။ အဲဒီ style တွေ ထည့်ဖို့ကိုတော့ Cascading Style Sheets — CSS ကို သုံးရပါမယ်။ style တွေ apply လုပ်ရာမှာ ၃ မျိုးလုပ်လို့ရပါတယ်။
Inline Styles
ဒီမျိုးအစားကတော့ လိုချင်တဲ့ စာတစ်ပိုဒ်၊ စာတစ်ကြောင်း၊ စာတစ်လုံး လောက်လေးမှာ ကွက်ပီး အရောင် ပြောင်းတာတို့၊ စာလုံးဆိုဒ် ပိုကြီးတာတို့ ပြောင်းချင်တဲ့ အခါမှာသုံးပါတယ်။ code နဲ့ဆိုရင် ဒီလိုပေါ့။
<p style="color: red;">The quick brown fox jumps over the lazy dog.</p>
ဒီဥပမာမှာဆိုရင် p tag ထဲမှာ style attribute ကို သုံးပီး ရေးထားတာပါ.. အဲလို element/tag တွေထဲမှာ attribute အနေနဲ့ သုံးတဲ့ပုံစံကို Inline Style လို့ခေါ်ပါတယ်။ style attribute မှာ declaration တစ်ခု (သို့) တစ်ခုထက် ပိုပါလို့ရပါတယ်။ declaration တစ်ခုကိုတော့ အပိုင်း ၂ ပိုင်း၊ property ရယ် value ရယ်နဲ့ ရေးပေး ရပါမယ်။ အပေါ်က color: red; မှာဆိုရင် color က property.. red; က value ပေါ့။
နောက်ထပ် declaration ထပ်ထည့်ချင်သေးရင်၊ ဥပမာ စာလုံးကို အထူ ပြောင်းမယ် ဆိုပါတော့။ ဒီလိုဖြစ်မယ်။
<p style="color: red; font-weight: bold;">The quick brown fox jumps over the lazy dog.</p>
Adding Inline Styles
ကဲ ကျနော်တို့ရဲ့ about.html ဖိုင်ကို ဖွင့်လိုက်ပါ.. About Us ရဲ့ အောက်က ပထမဆုံး စာပိုဒ်ကို bold လုပ်ပီး။ အပြာရောင် ပြောင်းလိုက်ပါ။ code က ဒီလို ဖြစ်ပါမယ်။
<p style="color: blue; font-weight: bold;">Bubble Under is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs of accommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>
save လုပ်ပီး browser မှာ ကြည့်ကြည့်ပါ။ အောက်ကလို ပေါ်ပါမယ်။
The span Element
အပေါ်မှာလို စာတစ်ပိုဒ်လုံး ပြောင်းချင်ရင်တော့ လွယ်တာပေါ့။ p element ထဲမှာ style ထည့်ရေးပေး လိုက်ရုံပဲ။ ဒါပေမယ့် ကျနော်တို့တွေ စာပိုဒ်ထဲကမှ တချို့ စာလုံးတွေပဲ ကွက်ပီး ပြောင်းချင်တာမျိုး ကြုံလာမှာပါ။ အဲလိုအခါမျိုးမှာ span element ကို သုံးရပါတော့မယ်။ စောစောက ပြောင်းထားတာကို ပြန်ပြင်ပါမယ်။ စာတစ်ပိုဒ်လုံး မဟုတ်တော့ဘဲ။ ပထမ ၂ လုံး Bubble Under ကိုတင် blue, bold လုပ်ပါမယ်။
<p><span style="color: blue; font-weight: bold;">Bubble Under</span> is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs of accommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>
save လုပ်ပီး ကြည့်ကြည့်ပါ။ ဒီလိုဖြစ်ပါမယ်။
Embedded Styles
Inline Style တွေကတော့ document (page) တစ်ခုရဲ့ အစိတ်အပိုင်း တွေကို style ထည့်တဲ့ နေရာမှာ သုံးရပါမယ်။ လွယ်လွယ်နဲ့လဲ သုံးလို့ရပါတယ်။ ထားပါတော့ document တစ်ခုထဲမှာ paragraph ၅၀ ပါမယ်။ အကုန်လုံးကို အပြာရောင် ပြောင်းချင်တယ် ဆိုရင်၊ p tag တိုင်း အခု ၅၀ လုံးမှာ style attribute တွေ လိုက်ရေးမှာလား။ copy/paste နဲ့တော့ လွယ်တာပေါ့။ စနစ်တော့ မကျပါဖူး။ ဟုတ်ပီ အဲလို ရေးထားမယ်။ နောက်ကျ အနီရောင် ပြောင်းချင်ရင် ၅၀ လုံး လိုက်ပြောင်းမှာလား။ အဲလို page တစ်ခုလုံး အတွက် ခြံုပီး style သတ်မှတ် ပေးချင်ရင်တော့ Embedded Style ကို သုံးရပါတော့မယ်.. Embedded Style ဆိုတာ head element ထဲမှာ <style> element ထည့်ရေးတာပါပဲ။ ပုံစံတော့ နည်းနည်း ကွဲသွားတာပေါ့။
<head>
<title>Bubble Under - The diving club for the south-west UK</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p {
font-weight: bold;
}
</style>
</head>
Embedded Style ကို <style type=”text/css”> tag နဲ့ဖွင့်ပီး </style> tag နဲ့ ပိတ်ရပါမယ်။ style declaration တွေကိုတော့ တွန့်ကွင်း (curly braces) { နဲ့ } ကြားထဲမှာ ရေးရပါမယ်။ တွန့်ကွင်းတွေရဲ့ရှေ့မှာတော့ ကိုယ် style ထည့်ချင်တဲ့ element ရဲ့ နာမည်ကို ရေးပေးရမှာ ဖြစ်ပါတယ်။ <> ပါဖို့ မလိုပါဖူး။ ဒါကို selector လို့ ခေါ်ပါတယ်။ selector, curly braces, declaration တွေကို ပေါင်းပီး rule လို့ခေါ်ပါတယ်။ ရှင်းအောင် ပုံနဲ့ ကြည့်လိုက်ပါ။
External Style Sheets
Inline style တွေရဲ့ ထပ်ခါထပ်ခါ ထည့်ရမယ့် ကိစ္စကို Embedded style က ဖြေရှင်း ပေးပီးပါပြီ။ အခုတစ်ခါ ဆိုက်တစ်ခုမှာက document (page) တစ်ခုထဲ ပါမှာမှ မဟုတ်ဘဲ.. အဲတော့ page အသစ်ရေးတိုင်း Embedded style code တွေ လိုက်ထည့် နေရလဲ page ၁၀၀၀ ချီရှိတဲ့ ဆိုက်ဆို သေရလိမ့်မယ်။ ဒီလိုမျိုး ဆိုက်တစ်ခုလုံး အတွက် style ကို သတ်မှတ် ပေးချင်ရင်တော့ External Style Sheet ကို သုံးရတော့မယ်။ သူကတော့ style rule တွေပါတဲ့ text file ပါ။ .css extension နဲ့ သိမ်းရပါတယ်။
Creating an External CSS file
CSS ရေးဖို့လဲ editor ထူးထွေပီး မလိုပါဖူး Notepad++ နဲ့သာ ရေးပါ။ syntax highlighting လဲ ပါပီးသားပဲ။ ကြည့်ရတာလဲ အဆင်ပြေပါတယ်။ ကဲ ရေးမယ်။
/*
CSS for Bubble Under site
*/
p {
font-weight: bold;
color: blue;
}
ပီးရင် ကျနော်တို့ html file တွေ ရှိတဲ့ ဖိုဒါထဲမှာပဲ style1.css ဆိုပီး သိမ်းလိုက်ပါ။ အဲ.. အပေါ်ဆုံးက လိုင်းတွေက comment တွေနော်။ css comment က xhtml comment နဲ့ မတူတော့ဖူး။ သူကကျ C တို့လိုဖြစ်သွားပီ။ /* နဲ့စပီး */ နဲ့ ပြန်ပိတ်ပေးရတယ်။ လိုင်း ကြိုက်သလောက် ရေးလို့ရတယ်။
Linking CSS to a Web Page
External CSS file ကို သုံးရင်တော့ page နဲ့ ပြန်လင့်ချိတ် ပေးရမယ်။ ဒါကိုလုပ်ဖို့တော့ link element သုံးရမှာပေါ့။ head element ထဲမှာပဲ ရေးရမှာပဲ။ ကဲ home page မှာရေးမယ်။
<head>
<title>Bubble Under - The diving club for the south-west UK</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
ပီးရင် save လုပ်ပီး။ ကျန်တဲ့ about နဲ့ contact မှာပါ ထပ်ထည့်ပေးပါ။
ဒီနေရာမှာ href attribute က anchor element တုန်းမှာလိုပဲ target file ကို ညွှန်းပေး ရပါတယ်။ အခုတော့ ဖိုဒါတစ်ခုထဲမို့ path မလိုဖူးနော်.. rel နဲ့ type ကတော့ browser ကို အဲဒီဖိုင်က ဘာအမျိုးအစားလဲဆိုတာ ပြောပြတာပါ။ ပီးတော့ ဒီ link element ကလဲ empty element ပဲနော်။ သူ့မှာ content မလိုဖူး။ အဲတော့ /> နဲ့ ပိတ်လိုက်ရုံပဲ။
ကဲ.. page သုံးခုစလုံး သေချာ save မှတ်ပီးတော့ browser မှာကြည့်ကြည့်ပါ။ paragraph တွေမှာ အပြာရောင် bold စာလုံး ဖြစ်နေပီ ဆိုရင် မှန်ပါပီ။ (မပြောင်းသေးရင် Refresh/Reload လုပ်ကြည့်ဦးနော်)
Starting to Build our Style Sheet
ကဲ.. ကျနော်တို့ တကယ်သုံးမယ့် style sheet ကို စရေး ပါတော့မယ်။ web designer တွေ ပထမဆုံး လုပ်တတ်ကြ တာကတော့ font ပြောင်းတာပါပဲ။ အခုထိ ကျနော်တို့ browser မှာ မြင်နေရ တာတွေက Times New Roman font ပါ။ သူက စာအုပ်တွေ ပေါ်မှာသာ ဖတ်လို့ ကောင်းတာပါ။ ပီးတော့ နေရာတကာမှာလဲ သုံးနေတော့ web ပေါ်မှာကျ နည်းနည်း ပုံစံ အ, တတ ဖြစ်နေပါတယ်။ font ပြောင်းဖို့ အတွက်ကတော့ font-family property ကို သုံးရပါမယ်။ body element မှာ ထည့်ပေးလိုက်ရင် page တစ်ခုလုံးအတွက် အကောင်းဆုံးပါပဲ။ ကျန်တဲ့ element တွေက သူ့အောက်မှာ ရှိနေမှာကိုး။ အဲတော့ စောစောက style1.css ကို ပြန်ပြင်မယ်။
/*
CSS for Bubble Under site
*/
body {
font-family: Verdana;
}
ကဲ ဟုတ်ပီ Verdana font ရွေးလိုက်ပီ။ ကိုယ့်ဆိုက်ကို ကြည့်တဲ့သူဆီမှာ အဲ font မရှိရင် ဘယ်လိုလုပ်မလဲ။ browser က အဆင်ပြေတဲ့ တစ်ခုခု ယူပြသွားမှာပေါ့။ အဲလိုဆို ဘယ်ဟုတ်တော့မလဲ။ အဲတော့ တခြား ရှိနိုင်တဲ့ font တွေ ထပ်ထည့် ပေးလိုက်မှာပေါ့။
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
ပီးရင် save လုပ်ပီး browser မှာကြည့်ကြည့်ပါ။ ဒီလို ဖြစ်သွားပါမယ်။
ဒီနေရာမှာ တစ်ခုပြောချင်ပါတယ်။ screen ပေါ်မှာ ပြဖို့အတွက် ဆိုရင်တော့ Sans-Serif font အမျိုးအစား တွေက ပိုကောင်းပါတယ်။ Serif font အမျိုးအစားက စာလုံး အစွန်းထွက်လေးတွေမှာ အတက်ကလေးတွေ ပါပါတယ် Sans Serif font အမျိုးအစားက မပါပါဖူး။ အောက်မှာ Georgia (Serif) font ကို ပြပါမယ်။
Stylish Headings
နောက်ပြီး ကျနော်တို့ style ထည့်ရ မှာကတော့ level 1 heading ဖြစ်တဲ့ h1 element ကိုပါ။ ရေးလိုက်ပါ။
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
ကဲ save လုပ်ပီး home page ကို refresh လုပ်လိုက်ပါ။
အဲ.. font name တွေရေးတဲ့အခါမှာ space ခြားတဲ့ ဟာတွေဆို double quote ထဲမှာ ထည့်ရေး ပေးရပါမယ်။ “Trebuchet MS” လိုမျိုးပေါ့။
ကဲ နောက်ထပ် style တွေ ထပ်ထည့်မယ်ဗျာ။ CSS file ကို အောက်က အတိုင်းဖြစ်အောင် ပြင်စရာရှိတာ ပြင်ပီး လိုတာတွေ ထပ်ထည့်ပေးပါ။
/*
CSS for Bubble Under site
*/
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li {
font-size: small;
}
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
p {
font-size: small;
color: navy;
}
ပီးသွားရင် Save လုပ်ပီး ကြည့်ကြည့်ပါ။ ဒီတိုင်း ဖြစ်ပါလိမ့်မယ်။
ကဲ CSS file မှာ ထပ်ထည့် တာလေးတွေ လေ့လာကြည့် ရအောင်။ body style မှာ အရင်ကြည့်မယ်။
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
padding: 15px;
line-height: 125%;
}
background-color property က element တိုင်းလိုလိုမှာ ထည့်လို့ရပါတယ်။ သူ့ value ကို သတ်မှတ် ပေးဖို့ကလဲ နည်းအမျိုးမျိုး ရှိပါတယ်။ အလွယ်ဆုံးကတော့ အရောင်နာမည်တွေ navy, blue, red, yellow, … ပေါ့။ ဒါပေမယ့် ကြားကျတဲ့ အရောင်တွေကိုကျ hexadecimal နံပါတ်နဲ့ သတ်မှတ် ပေးရပါတယ်။
background-color: #e2edff;
ဒီဟာက အပြာနုရောင်ပါ။ ဒီ code ကိုမြင်လို့ အပြာနုလို့ တန်းသိဖို့ကတော့ ခဲယဉ်းပါတယ်။ ဒါပေမယ့် ကိုယ်ကြိုက်တဲ့ အရောင် ရွေးလိုက်ရင် hex code ထည့်ပေးတဲ့ Tool တွေ အများကြီးပါ။ ဒီ hex code နဲ့ ကာလာ ပေးပုံကို နည်းနည်း ရှင်းရရင်၊ ဂဏန်း ၆ လုံးပေးရပါမယ်၊ ရှေ့ဆုံး ၂ လုံးရဲ့တန်ဖိုးက အနီရောင် (red)၊ အလယ် ၂ လုံးက အစိမ်း (green)၊ နောက်ဆုံး ၂ လုံးက အပြာ (blue) ကို ကိုယ်စားပြုပါတယ်။ အဲတော့ #ff0000 ဆိုရင် အနီရောင်၊ #00ff00 ဆို အစိမ်း၊ #0000ff ဆို အပြာရောင်ပေါ့။ ဒီလောက်ဆို နားလည် လောက်ပါပီ။ အရောင် စပ်တာတွေတော့ ဦးနှောက်ခြောက် ခံမနေနဲ့ software တွေသာ သုံးလိုက်ပါ။
ပီးရင် padding property။ သူကတော့ element ရဲ့ အပြင်ဖက် အစွန်းကနေ အထဲမှာရှိမယ့် content (စာသား/ပုံ) နဲ့ ကြားထဲက space ကိုပြောတာပါ။ padding အကြောင်းကို နောက်ပိုင်းကျရင် အကျယ် ထပ်ပြောပါဦးမယ်။ သူ့မှာထည့်တဲ့ value ကတော့ space ဘယ်လောက် ကျယ်ကျယ် ထားမလဲပေါ့။ အခုကျနော်တို့ 15px (15 pixels) ထား, ထားပါတယ်။
line-height property ကတော့ စာသားတွေရဲ့ လိုင်း တစ်လိုင်းနဲ့ တစ်လိုင်းကြားက space ကို ပြောတာပါ။ အခုတော့ 125% ပေးထားပါတယ်။ တန်ဖိုးကို ဟိုပြောင်းဒီပြောင်း ပြောင်းပီး၊ ဘယ်လို ကွာသွားလဲဆိုတာ ကြည့်ကြည့်ပါ။ ပီးရင်တော့ 125% ပဲ ပြန်ထားပီး save လုပ်ပေးပါ။
paragraph style ကို ကြည့်ကြမယ်။
p {
font-size: small;
color: navy;
}
color ကတော့ ရှင်းပါတယ်။ အပေါ်မှာ ပြောပီးသားပဲ။ font-size ဒါလဲ ရှင်းပါတယ်။ စာလုံး အရွယ်အစားပေါ့။ အခု small ဆိုတော့ အသေးပေါ့။ keyword နဲ့ value ကို သတ်မှတ် ပေးတာပါ။ %, px တို့နဲ့လဲ value ကိုပေးလို့ ရပါသေးတယ်။ font size keyword တွေက xx-small ကနေ xx-large ထိရှိပါတယ်။ ဒါပေမယ့် ဒီ keyword တွေရဲ့ size က browser တစ်ခုနဲ့ တစ်ခု ပြတာခြင်း မတူပါဖူး။ အဲတော့ keyword သုံးထားရင် browser တိုင်းမှာ အရွယ်အစား တညီထဲ ပေါ်မယ်လို့ အာမခံလို့မရပါဖူး။ ဒါပေမယ့် သိသွားအောင်လို့တော့ လောလောဆယ် keyword ပဲ သုံးထားပါမယ်။
နောက် ကျနော်တို့ site ရဲ့ အဓိကခေါင်းစီး (h1) မှာ font size ကို extra large (x-large) သုံးထားပါတယ်။ h2 က h1 ထက် သေးရမှာ ဆိုတော့ medium ပဲ သုံးလိုက်ပါတယ်။
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
browser တွေမှာက default အနေနဲ့ heading တွေကို bold နဲ့ ပြတတ် ကြပါတယ်။ အဲဒါကို ကျနော်တို့က font-weight property သုံးပီး ပုံမှန် စာလုံးဖြစ်အောင် normal ပေးပီး ပြင်ထားပါတယ်။
A Beginner’s Palette of Styling Options
color, background-color — ဒီ ၂ ခုစလုံးရဲ့ value ကို color keyword (e.g: red, blue, green, or yellow) တွေနဲ့ ပေးလို့ရတယ်။ hexadecimal code (#ff0000) နဲ့လဲ ပေးလို့ရတယ်။
font-family — ဒါကတော့ font မရှိနိုင်တဲ့ ပြသနာ ဖြစ်နိုင်တာကြောင့် font name တွေ list လိုက်ထည့် ပေးရတာပါ။ သတိထားရမှာက computer တိုင်းမှာ ရှိတတ်တဲ့ font မျိုးကို ရွေးထည့်ပေးဖို့ပါ။ ဥပမာ Arial, Verdana တို့လိုပေါ့။ ပီးရင် font အမျိုးအစား အလိုက် Serif/Sans-Serif နဲ့ အဆုံးသတ် ပေးသင့်ပါတယ်။ ဒါမှ ကိုယ်ရွေးထားတဲ့ font မရှိခဲ့ရင်တောင်မှ အမျိုးအစားတူ တစ်ခု ရှာပြပေးမှာ ဆိုတော့ ပုံစံ သိပ်မကွာတော့ဖူးပေါ့။
font-size — ဒီ property ရဲ့ value မှာတော့ အောက်က unit တွေထဲက တစ်မျိုးမျိုးနဲ့ ထည့်နိုင်ပါတယ်။
font size keywords
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
a relative unit
percentage (e.g. 140%)fixed font sizes
pixels (e.g. 20px)
points (e.g. 12pt)fixed font size တွေက user တွေက browser ကနေ ချံု့/ချဲ့လုပ်တဲ့ အခါမှာ အဆင်မပြေ နိုင်ပါဖူး။ relative font size ကတော့ အကောင်းဆုံး ဖြစ်မှာပါပဲ။
font-weight — bold or normal
font-style — normal or italic
text-decoration — none, underline, overline, or line-through
ကဲ အခုဆိုရင် ကျနော်တို့ ဆိုက်မှာ style အတွက် CSS file အကြမ်းတော့ ပီးသွားပီ။ နောက် ပြင်ချင်ရင် ဒီမှာပဲ လာပြင်ရုံနဲ့ ဆိုက်တစ်ခုလုံးကို အပြောင်းအလွဲ လုပ်လို့ရပီ။ အခု နောက်ထပ် တခြား element တွေမှာ ဆက်ထည့်ရအောင်။
Changing the Emphasis
about.html ကို text editor မှာ ဖွင့်ပါ။ ပီးရင် အောက်ကလို emphasis element (em) ထည့်လိုက်ပါ။
<p>And when we're not diving, we often meet up in a local pub to talk about our recent adventures (<em>any</em>excuse,eh?).</p>
ပီးရင် save ပီး browser မှာ ကြည့်ပါ..
browser တွေက em element ကို စာလုံးစောင်း (italic) နဲ့ ပြပေးတတ်ပါတယ်။ အခု ကျနော်တို့ အဲဒါကို ပြင်ပါမယ်။ css file ရဲ့ အောက်ဆုံးမှာ အောက်က code တွေ ရိုက်ထည့်ပါ။
em {
font-style: normal;
text-transform: uppercase;
}
save ပီး ကြည့်ကြည့်ပါ။
ကဲ default စာလုံးစောင်း အတိုင်းပဲ ပြန်ထားမယ်.. ဒါပေမယ့် Capital letter တော့ဖြစ်ရမယ်။ လွယ်ပါတယ် font-style declaration ကို ဖျက်လိုက်ရုံပပေါ့။
Emphasis vs Italics
ဒီနေရာမှာ မေးစရာရှိပါတယ်။ emphasis text က စာလုံးစောင်းနဲ့ ပြတာဆိုတော့ html ရဲ့ italic element <i> ကို သုံးလို့ မရဖူးလားဆိုရင်၊ browser ပေါ်မှာ ပေါ်တာခြင်း တူပေမယ့် အဓိပ္ပာယ် ကွဲပါတယ်။ အဲလိုပါပဲ bold <b> နဲ့ <strong> ဆိုရင် strong ကိုသုံးပါ။ ဘာလို့လဲ ဆိုတော့ <b> နဲ့ <i> က display ပြတဲ့ နေရာမှာပဲ အထူရယ်၊ အစောင်းရယ် ထည့်ပြ သွားတာပါ။ browser ကို ဒီစာလုံးက အရေးပါတဲ့ စာလုံးလားဆိုတာ ပြောမပြသွားပါဖူး။ screen မှာ ကြည့်ရင်တော့ အမြင်ချင်းတော့ တူတာပေါ့။ တကယ်လို့ မျက်မမြင် တစ်ယောက် ဆိုရင် Screen Reader (Text-to-Speech) software သုံးပီး နားထောင်မှာပေါ့။ သူဆိုရင် အစောင်းတွေ၊ အထူတွေ မသိတော့ဖူး။ အဲမှာ screen reader က <b> တို့ <i> တို့ကို ဒီတိုင်းဖတ်သွားမယ်။ ကြားရတဲ့လူက အရေးကြီးလား မကြီးလား မသိလိုက်တော့ဖူး။ <strong> နဲ့ ရေးထားရင် နှေးနှေးနဲ့ မာမာ ဖတ်မယ်။ <em> ဆို နည်းနည်းလေး ဖိဖတ်ပေးမယ်။ ပီးတော့ search engine တွေအတွက်လဲ ဘယ်စာလုံးက အဓိကကျတယ် ဆိုတာ ခွဲလို့ရသွားတယ်။ ပီးတော့ underline <u> ရှိသေးတယ်။ မသုံးပါနဲ့ လင့်တွေနဲ့ ရောကုန်မယ်။ တခြားနည်းလမ်းနဲ့ ထင်ရှားအောင်လုပ်ပါ။ တကယ်လို့ မျဉ်းတားချင်ရင်တောင်မှ css မှာ text-decoration: underline; နဲ့ လုပ်ပါ။
Facebook comments:
One Response
Leave a comment
About the Author
Goo Goo
ေန႔နဲ႔ည မွားေနေသာ လူတစ္ပိုင္း ဇီးကြက္တစ္ပိုင္း။ မ်က္စိႏွစ္လံုး ပြင့္တာနဲ႔ ကီးဘုတ္ေပၚ လက္ေရာက္ေနတတ္သူ။ ကြန္ပ်ဳတာ နည္းပညာမ်ား အားလံုးလိုလို စိတ္ဝင္စားေသာ္လည္း ဝဘ္ဒီဇိုင္းကို အားသန္သူ။ စိတ္ပါလွ်င္ ဂီတာတီး၊ သီခ်င္းေရးတတ္ေသာ အခ်ိန္ပိုင္း အသံဖမ္းအင္ဂ်င္နီယာ။
Ads
Thanks,