ME Computer & Mobile Centre
0
About ME Computer & Mobile Centre
Welcome to ME Computer & Mobile Centre
Tags
Description
Our goal is to create enhanced public awareness and build strong image through a comprehensive marketing campaign that will result in increased sales, servicing and training.
Anynomous
"
၂၀၁၉-၂၀၂၀ တက္ကသိုလ်ဝင်တန်းကို ထူးချွန်စွာ အောင်မြင်ခဲ့ကြသော ကျောင်းသူကျောင်းသူများအား မိသားစုနှင့် ထပ်တူ ဝမ်းမြေက်ဂုဏ်ယူမိပါတယ်ခင်ဗျာ တိုးတက်နေတဲ့ နည်းပညာဘာသာရပ်များကိုလည်း ခေတ်နဲ့အညီ လေ့လာသင်ယူနိုင်ကြပါစေခင်ဗျာ …
" 10 August 2023Anynomous
"
ကဲ ဒီနေ့သင်ခန်းစာကတော့ CSS ရဲ့ နောက်ဆုံးသင်ခန်းစာပဲ ဖြစ်ပါတယ်ခင်ဗျာ နောက်လည်း အချိန်ရရင် ရသလို အလျဉ်းသင့်သလို သင်ခန်းစာလေးတွေကို ရေးပြီး တင်ပေးနိုင်ဖို့ ကြိုးစားနေပါတယ် ခုလို အချိန်ပေး ဖတ်ရှု့လေ့လာပေးကြတဲ့အတွက် ကျေးဇူးအများကြီး တင်ပါတယ်ခင်ဗျာ အသိပညာများ တိုးပွားကြလို့လည်း ဝမ်းသာမိပါတယ် ...
day 17 - Responsive Design 4
Responsive Design အတွက် ဆက်လေ့လာမှာက grid ပါ။ row, column ပုံစံနဲ့ layout ချပြီး content ထည့် အသုံးပြုမှာပါ။ grid အသုံးပြုမယ်ဆိုရင် display properties မှာ grid... value အသုံးပြုရမှာပါ။ row နဲ့ column ကြား အကွာအဝေးအတွက် grid-column-gap နဲ့ grid-row-gap properties အသုံးပြုရပါမယ်။ gird-template-columns properties ကတော့ column အရေအတွက်နဲ့ အကျယ်ပြောပေးတာပါ။ grid.html file ကို လေ့လာကြည့်ပါ။ grid-item selector အသုံးပြုပြီး div တစ်ခုချင်းအတွက် ပြင်ပေးထားပါတယ်။ grid.html <!DOCTYPE html> <html> <head> <title>My Web Page!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .grid { background-color: green; display: grid; padding: 20px; grid-column-gap: 20px; grid-row-gap: 10px; grid-template-columns: 200px 200px auto; } .grid-item { background-color: white; font-size: 20px; padding: 20px; text-align: center; } </style> </head> <body> <div class="grid"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> <div class="grid-item">10</div> <div class="grid-item">11</div> <div class="grid-item">12</div> </div> </body> </html>
See More " 29 July 2023Anynomous
"
day 15 - Responsive Design 2
Responsive Desing အတွက် viewport အသုံးပြုပုံ ဆက်လေ့လာပါမယ်။ viewport ဆိုတာ web page တွေ ကြည့်တဲ့အခါ user မြင်တွေ့ရတဲ့ visible area ပါ။ viewport သုံးဖို့အတွက်ဆိုရင် head element အတွင်းမှာ meta element ကို အသုံးပြုရပါမယ်။ meta tag အတွင်းမှာ name attribute မှာ viewport ထား content attribute မှာတော့ device တွေရဲ့ အရွယ်အစားပေါ်လိုက်ပြီး ပြင်ပေးနိုင်အောင် " width နဲ့ initial scale" ပြင်ပေးရမှာပါ။ responsive0.html file လေး ကြည့်လိုက်ပါ။
responsive0.html... <!DOCTYPE html> <html> <head> <title>My Web Page!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @media (min-width : 500px ) { body { background-color: red; } @media (max-width : 499px) { body { background-color: blue; } } </style> </head> <body> <h1>Welcome to My Web Page!</h1> </body> </html>
သူ့မှာ screen size 500px နှင့်အထက်ဆို background color ၁ရောင်ထားပေးထားပါတယ်။ min-width properties အသုံးပြုပြီး ရေးထားပါတယ်။ တခါ max-width properties အသုံးပြုပြီး screen width 499px နှင့် အောက်ဆို background color ၁ရောင်ထားထားပါတယ်။ responsive1.html မှာလည်း min-width, max-width properties အသုံးပြုပြီး heading1 ရဲ့အစမှာ content ထည့်ပေးထားပုံလေး Pesudoelement selector အသုံးပြုထားပုံ လေ့လာကြည့်ပါဦး။
responsive1.html <!DOCTYPE html> <html> <head> <title>My Web Page!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @media (min-width: 500px) { h1::before { content: "Welcome to My Web Page!"; } } @media (max-width: 499px) { h1::before { content: "Welcoe!"; } } </style> </head> <body> <h1></h1> </body> </html>
See More " 27 July 2023Anynomous
"
ဆက် လေ့လာကြပါစို့
day 14 - Responsive Design 1
Website တွေကြည့်တဲ့အခါ computer အပြင် အခြား mobile devices တွေ အသုံးပြုကြပါလိမ့်မယ်။ screen size မတူတာတွေကို screen size အမျိုးမျိုးပေါ် လိုက်ပြီး အဆင်ပြေအောင် ချိန်ညှိဖော်ပြပေးနိုင်တာကို Responsive Design လို့ ခေါ်တာပါ။... Web page ကို ကြည့်ရှုသူ၏ screen အရွယ်အစားပေါ် မူတည်ပြီး menu bar, page layout, format ပုံစံတွေကို အဆင်ပြေအောင် ချိန်ညှိဖော်ပြပါလိမ့်မယ်။
Web page ကို Responsive Design ပုံစံဖြစ်အောင် HTML, CSS စတာတွေ အသုံးပြုပြီး လုပ်ငန်း လုပ်ပေးနိုင်ပါတယ်။ ကိုယ်ရေးတဲ့ web page က Responsive Design ဖြစ်မှသာ user က desktops, tablets and phone အစရှိတဲ့ devices အားလုံးနဲ့ အဆင်ပြေပြေ ကြည့်ရှုနိုင်မှာပါ။ အဲလို Responsive Design ဖြစ်ဖို့ media query အသုံးပြုပုံလေးက စလေ့လာရအောင်ပါ။ print.html file လေးကို စကြည့်လိုက်ကြရအောင်။
print.html <!DOCTYPE html> <html> <head> <title>My Web Page!</title> <style> @media print { screen-only { display : none; } } </style> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p class ="screen-only">This paragraph won't appear when you print this page.<p> </body> </html>
@media ဆိုတာ media query ပါ။ အခြေအနေပေါ်လိုက်ပြီး လုပ်ငန်းလုပ်ပေးစေချင်လို့ media query အသုံးပြုတာပါ။ web page ထဲမှာပါတဲ့ content တွေကို print ထုတ်မှသာ ပြစေချင်လို့ print selector အတွင်းမှာ screen-only ဆိုတဲ့ class selector ထည့်ရေးပြီး သူ့ထဲမှာ display properties မှာ none value ထားပေးလိုက်ပါတယ်။ ဒါဆို screen-only အသုံးပြုတဲ့ စာပိုဒ်က ပုံမှန်အချိန် web page ကို ကြည့်ရင် မမြန်ရပဲ preview ကြည့် print ထုတ်မှသာ မြင်ရမှာ ဖြစ်ပါတယ်။
See More " 24 July 2023Anynomous
"
day 12 - CSS attribute – example
attribute.html ကို လေ့လာကြည့်ကြရအောင် attribute selector သုံးပြီး form ကို ပြင်ပေးထားတာပါ။ text box တွေမှာ text input နဲ့ number input အတွက်ဆိုပြီး background color သီးသန့်ခွဲ ပြင်ပေးထားပါတယ်။
...attribute.html <!DOCTYPE html> <html> <head> <title>My Web Page</title> <style> input[type=text] { background-color: red; } input[type=number] { background-color: yellow; } </style> </head> <body> <form> <input name="name" type="text" placeholder="First Name"> <input name="name" type="text" placeholder="Last Name"> <input name="name" type="number" placeholder="Age"> </form> </body> </html>
hover.html file ဆက်ကြည့်ရအောင်ပါ။ type selector အသုံးပြုပြီး button ကို width, height properties သုံးပြီး အရွယ်အစား ပြင်ပေးထားပါတယ်။ font-size property နဲ့ size 24px ထားပြီး background color လည်း ပြင်ထားပါတယ်။ pseudoclass အသုံးပြုပြီး mouse pointer ကို button ပေါ် ရှပ်ပြီးသွားရင် အရောင် background color ပြင်ပေးလိုက်ပါတယ်။
hover.html <!DOCTYPE html> <html> <head> <title>My Web Page!</title> <style> button { width: 200px; height: 50px; font-size: 24px; background-color: gree; } button:hover { background-color: orange; } </style> </head> <body> <button>Click me!</button> </body> </html>
See More " 22 July 2023Anynomous
"
ဆက် လေ့လာကြရအောင် ...
day 11 - CSS selector – example 2
Decendant selector အသုံးပြုပုံလေးလည်း လေ့လာကြည့်ပါဦးမယ်။ decendant.html file ကိုကြည့်ပါ။ ol (order list) အောက်က ဆင်းသက်လာတဲ့ list တွေ အားလုံးအတွက် ပြင်ပေးသွားပါလိမ့်မယ်။ child.html file လေးနဲ့ ယှဉ်ပြီး လေ့လာကြည့်ပါ။ ol ရဲ့ child ဖြစ်တဲ့ list item ကိုပဲ ပြင်ပေးမှာ ဖြစ်ပါတယ်။
...decendant.html <!DOCTYPE html> <html> <head> <title>My Web Page!</title> <style> ol li { color: red; } </style> </head> <body> <ol> <li>list item one</li> <li>list item two</li> <ul> <li>sublist item one</li> <li>sublist item two</li> </ul> <li>list item three</li> </ol> <ul> <li>second list here</li> <li>another item</li> </ul> </body> </html>
child.html <!DOCTYPE html> <html> <head> <title>My Web Page</title> <style> ol > li { color: red; } </style> </head> <body> <ol> <li>list item one</li> <li>list item two</li> <ul> <li>sublist item one</li> <li>sublist item two</li> </ul> <li>list item three</li> </ol> </body> </html>
See More " 21 July 2023Anynomous
"
Font properties ကို ဆက်သွားကြမယ် day 9 - Font Properties
font-size ➡️ Web page မှာ စာသားတွေရဲ့ အရွယ်အစား size ကို သီးခြားသတ်မှတ်မထားရင် default font size က 16px ပါ။ Absolute size ➡️ font size က ပေးထားတဲ့ pixel (px) အတိုင်း တိတိကျကျ လိုအပ်တယ်ဆိုရင် အသုံးပြုတာဖြစ်ပါတယ်။ OS-independent ဖြစ်သလို cross-browser မှာဆိုရင်လည်း ဘယ် browser မှာပဲဖြစ်ဖြစ် pixels number အတိုင်း render လုပ်ပါလိမ့်မယ်။... Relative size ➡️ parent element's ရဲ့ font-size နဲ့ နှီးနွယ်ပြင်ချင်ရင်တော့ percentage(%), em, rem တို့ အသုံးပြုလို့ ရပါတယ်။ Browser ရဲ့ default size နဲ့ နှီးနွယ်ဆက်စပ် ပြင်တာဖြစ်တယ်။ 100% ဆို 16px 200% ဆိုတော့ 32px ပါ။
percentage(%) နဲ့ ပြင်မယ်ဆိုရင် em ကတော့ capital letter M ရဲ့ အကျယ်နဲ့ ပြောတာပါ။ parent element ရဲ့ size ကို ဆက်ခံပြီး ပြင်ပေးရတာပါ။ ဥပမာ 1em = 16px and 2em = 32px ပါ။ rem ကတော့ root em ပါ။ default font size ပေါ် နှီးနွယ်ဆက်စပ်ပြီး parent element ပေါ်မှာတော့ မပက်သက်ပါဘူး။ ဥပမာ body { font-size : 16px ; } p { font-size : 1.5 rem ; } ဒါဆို p (paragraph) ရဲ့ size က 24px ပါ။
Font-weight ➡️ စာသားအထူပြင်ဖို့ bold လုပ်ချင်ရင် အသုံးပြုလို့ ရပါတယ်။ သူ့မှာ value က normal နဲ့ bold ဆိုပြီး ရှိပါတယ်။ Line-height ➡️ စာကြောင်းတွေနဲ့ ကြားအကွာအဝေး ပြင်ပေးချင်ရင် line-height property သုံးပြင်ပါ။
Color ➡️ စာသားတွေအတွက် foreground color ပြင်ပေးချင်ရင် color property အသုံးပြုရပါမယ်။ color အသုံးပြုရန် နည်လမ်း ၃မျိုး ရှိတယ်။ ၁. color အမည်တွေကို တိုက်ရိုက် ထည့်သုံးတာရှိမယ်။ example red, blue ; ၂. RGB values – red, green, blue color value ပေးပြီး color စပ် သုံးတာ ရှိမယ်။ example rgb (200, 200, 200); ၃. Hex codes – six digit codes ရှေ့က # hash sign ထည့်ပြီး Hex values ပေးပြီး color စပ်တဲ့ ပုံစံ example #66cdaa text-decoration ➡️ စာသားကို underline သားပေးချင်ရင် underline value အသုံးပြုပါ။ text-decoration မှာ အသုံးပြုနိုင်တဲ့ value တွေကတော့ none – link တွေ အသုံးပြုလို့ လိုင်းသားပြတာ မကြိုက်လို့ ဖြုတ်ချင်ရင် none value သုံးပါ။ underline - လိုင်းသားဖို့ စာသားအောက်ကနေ လိုင်းမျဉ်းသားပေးဖို့ပါ။ overline - စာရဲ့ အပေါ်ဘက်မှာ လိုင်းထည့်ဖို့ပါ။ line-through - စာပေါ်ကနေ ဖြတ်မျဉ်းလိုင်းသားပေးဖို့ပါ။ blink – link လုပ်တဲ့ စာမှာ animate ပုံစံထည့် တာပါ။
အောက်မှာ ပြထားတဲ့ font.html file လေး ကြည့်ပါဦး။ font-family property နဲ့ font ကို Arial ပြင်ပေးတာပါ။ Arial မရှိရင် sans-serif သုံးပါ။ font-size property နဲ့ 28px သုံးပေးလိုက်တယ်။ font-weight property နဲ့ bold လည်း လုပ်ပေးထားပါတယ်။
font.html <!DOCTYPE html> <html> <head> <title>My Web Page!</title> <style> div { font-family : Arial, sans-serif; font-size : 28px; font-weight : bold; } </style> </head> <body> <div> Hello, World! </div> </body> </html>
See More " 17 July 2023