Web – Page 2 – MYSTERY ZILLION Blog

September 25, 2010September 28, 2010

How to learn web development

Web Development လုပ်တော့မယ်ဆိုရင် ကျွန်တော် ဒီပုံမှာ ပြခဲ့တာလေးကို တချက်ကြည့်စေချင်ပါတယ်။ ပုံထဲမှာ ကျွန်တော့်အနေနဲ့ Web Programming ကို မလေ့လာခင်မှာ HTML , CSS , Javascript ကို စတင်လေ့လာဖို့ ဆိုထားပါတယ်။ HTML , CSS က programming ပိုင်း မပါဝင်ပါဘူး။ တော်တော်များများဟာ HTML, CSS, Javascript က သေချာ မတတ်ကျွမ်းပဲနဲ့ Web Development ပိုင်းကို ကူးနေကြတာတွေကိုလည်း တွေ့ရပါတယ်။
Continue reading “How to learn web development”

September 15, 2010March 25, 2011

HTML , CSS Myanmar Ebook

Planet Creator ရေးထားတဲ့ စာအုပ်ဖြစ်ပြီး HTML နဲ့ CSS ကို အခြေခံမှ စပြီး သေသေချာချာ ရေးထားတဲ့ စာအုပ်ကောင်းလေး တစ်အုပ်ပါ။ စာမျက်နှာပေါင်း ၁၉၇ မျက်နှာ ပါရှိပြီး နားလည် သဘောပေါက်အောင် ရှင်းလင်းထားတဲ့အတွက် လေ့လာတဲ့သူတွေအတွက် အတော့်ကို အသုံးဝင်မယ့် စာအုပ်တစ်အုပ်ပါ။

http://www.worldwidemyanmar.com/news/headline/423-myanmar-version-html-css-ebook.html

မှာ သွားရောက်ယူနိုင်ပါတယ်။

July 11, 2010July 11, 2010

HTML5

HTML 5 ဆိုတာကတော့ အခုနောက်ပိုင်း ခေတ်စားလာပါတယ်။ အခုနောက်ပိုင်း Browser တွေဟာ HTML5 ကို support လုပ်လာပါပြီ။ နောက်ပိုင်းမှာ website တွေဟာ HTML5 ကို အဓိက အသုံးပြုတော့မှာပါ။ HTML5 ဆိုတာဘာလဲ။ HTML5 က ဘာတွေ ထူးလဲ။ HTML5 ကို ဘယ်မှာလေ့လာလို့ရမလဲ။

HTML 5 ~= HTML 5 + jsAPI + CSS3

လို့ ဆိုလို့ရပါတယ်။ HTML ဆိုတာက tag တွေပါပဲ။ ထူးထူးခြားခြားရယ်လို့ မရှိလာပေမယ့် HTML5 နဲ့ အတူ တွဲပါလာတဲ့ javascript API အသစ်တွေနဲ့ CSS3 က ထူးခြားမှုတွေ ဖြစ်စေပါတယ်။

Continue reading “HTML5”

June 26, 2010December 24, 2011

CSS – Part 3 : Text Formating

Text formatting ဆိုတာကတော့ စာလုံးတွေကို အရောင်ထည့်တာတွေ နောက်ပြီး font တွေပြောင်းတာ alignment လုပ်တာ စတာတွေကို css ကို ဆောင်ရွက်လို့ရပါတယ်။

Text Color

text color ကိုတော့ CSS မှာ color လို့သုံးပါတယ်။ အောက်မှာ ဥပမာ ကြည့်ပါ။

body { color:#FF0000; }

လို့ဆိုရင် body စာလုံးတွေက အနီရောင်နဲ့ ပြပေးမှာပါ။

Text alignment

text alignment ကတော့ left, right , center,justify ဆိုပြီး သတ်မှတ်ပေးတာပါ။ ကျွန်တော်တို့ html မှာက align နဲ့ လုပ်ခဲ့တာ မှတ်မိအုံးမယ်ထင်ပါတယ်။ CSS မှာကတော့

p&nbsp; { text-align: center; }
h1 { text-align: right; }
h2 { text-align : justify }

left ကတော့ default ပါ။ ဒါလေးတွေက လွယ်သေးတော့ ကိုယ့်ဘာသာ ကိုယ်စမ်းကြည့်လိုက်ပါ။

Text Transformation

ကျွန်တော်တို့တွေ HTML မှာ upper case တွေ lower case တွေပြောင်းချင်ရင် စာတွေ ပြန်ပြင်ရိုက်ရပါတယ်။ CSS သုံးရင် အဲလို ပြန်ပြင်ရိုက်တဲ့ ပြဿနာ ရှင်းသွားပါတယ်။ အောက်က example လေး ကို ကြည့်ကြည့်ပါ။

<html>
<head>
<title>Sample</title>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
<body>
<p class="uppercase">uppder case</p>
<p class="lowercase">LOWER CASE</p>
<p class="capitalize">capitalize</p>
</body>
</head>
</html>

Text Indentation

စာလုံးတွေကိုရွှေ့ချင်တယ်ဆိုရင် indentation ကို သုံးလို့ရပါတယ်။ အောက်က ဥပမာလေး ကိုကြည့်ကြည့်ပါ။

<html>
<head>
<title>Sample</title>
<style type="text/css">
p {text-indent:50px;}
</style>
<body>
<p>
Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
</p>
</body>
</head>
</html>

Space between characters

Characters တစ်ခုနဲ့ တစ်ခုကြား space တွေကို ခြားချင်ရင်တော့ letter-spacing ဆိုတာကို သုံးလို့ရပါတယ်။

<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>

Space Between Lines

Characters တစ်ခုနဲ့ တစ်ခုကြား space အကွာအဝေး ချိန်ညှိလို့ရသလို line တစ်ခုနဲ့ တစ်ခုကြားလည်း line-height နဲ့ ချိန်ညှိလို့ရပါတယ်။ အောက်က example လေးကို လေ့လာကြည့်ပါ။

<html>
<head>
<style type="text/css">
p.small {line-height:90%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
</p>

<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>

<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>

</body>
</html>

Right To Left Text

ဒါကတော့ ကျွန်တော်တို့တွေ သုံးခဲတယ်။ left to right ရေးရတဲ့ ဘာသာစကားတွေအတွက် သုံးတာပါ။ ဥပမာ တော့ မပြတော့ဘူး။ ဘယ်လိုပေါ်လဲ သိချင်ရင် စမ်းကြည့်နိုင်ပါတယ်။

p{direction:rtl;}

Word Spacing

Character spacing , line spacing တွေပြီးတော့ word spacing ပေါ့။

<html>
<head>
<style type="text/css">
p
{ 
word-spacing:30px;
}
</style>
</head>
<body>

<p>
This is some text. This is some text.
</p>

</body>
</html>

Nowrap

စာလုံးတွေကို wrap မဖြစ်ချင်ဘူး။ စာလုံးက တစ်တန်းပြည့်သွားပေမယ့် အောက်တစ်လိုင်း မဆင်းသွား စေချင်ဘူးဆိုရင် white-space ကို nowrap ပေးရပါတယ်။

p
{
white-space:nowrap;
}

ကိုယ့်ဘာသာ ကိုယ်စမ်းကြည့်လိုက်ပေါ့။

Vertical Align

image တွေမှာ ကျွန်တော်တို့တွေ HTML တုန်းက align တွေလိုက်ထည့်ရတယ်။ text align ညှိတာပေါ့။ အဲလိုမျိုးပဲ CSS မှာလည်း သုံးလို့ရပါတယ်။

<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p> 
<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.</p> 
<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>

Text-shadow

စာလုံးတွေနောက်မှာ shadow ထည့်ချင်တဲ့အခါမှာတော့ text-shadow ကို သုံးနိုင်ပါတယ်။

<html>
<head>
<style>
p.test {
&nbsp;&nbsp; &nbsp;text-shadow: #6374AB 20px 25px 2px;
}
</style>
</head>
<body>
<p class="test">This is txt shadow</p>
</body>
</html>

text-shadow: #အရောင် , X , Y, bluer ဆိုပြီး ထည့်ပေးရတာပါ။

CSS Text Properties

Property	Description	Values
color	text color	color
direction	text direction	ltr rtl
line-height	line တစ်ခုနဲ့ တစ်ခုကြား အမြင့်	normal number length %
letter-spacing	characters တစ်ခုနဲ့ တစ်ခုကြား အကွာအဝေး	normal length
text-align	text align ညှိခြင်း	left right center justify
text-decoration	add decoration to text	none underline overline line-through blink
text-indent	indent ရွှေ့ခြင်း	length %
text-shadow	အရိပ်ထည့်ခြင်း	none color length
text-transform	uppercase , lowercase ပြောင်းခြင်း	none capitalize uppercase lowercase
vertical-align	vertical align	baseline sub super top text-top middle bottom text-btoom length %
white-space	wrap text လုပ်မလုပ်	normal pre nowrap
word-spacing	word တစ်ခုနဲ့တစ်ခုကြား spacing	normal length

June 24, 2010July 3, 2010

Cheat Sheet For Web Essential

Cheat Sheet ဆိုတာကတော့ ကျွန်တော်တို့တွေ ပုံမှန် များပြားလှတဲ့ reference တွေကို လိုအပ်ပြီး အသုံးဝင်တာတွေ စုစည်းထားတာကို ဆိုတာပါ။ တနည်းပြောရင် quick reference လို့ ဆိုလို့ရပါတယ်။ ကျွန်တော် HTML, CSS , jQuery အကြောင်း MZ Edu မှာ ရေးခဲ့ဘူးပါတယ်။ အခု Web Development လုပ်မယ့်သူတွေအနေနဲ့ HTML, CSS , jQuery တို့ကို သိထားဖို့လိုအပ်ပါတယ်။ ရေးသားရာမှာလည်း လွယ်လွယ်ကူကူ reference လုပ်လို့ရအောင် cheat sheet လေးတွေ ဆောင်ထားဖို့လည်း လိုအပ်ပါတယ်။

Continue reading “Cheat Sheet For Web Essential”

June 23, 2010December 24, 2011

HTML5 Form

HTML အကြောင်းကို ကျွန်တော် ရေးခဲ့ပြီးပါပြီ။ ရေးထားခဲ့တဲ့ စာအုပ်က HTML4 အကြောင်းပါ။ အခု HTML5 မှာ ပါဝင်လာတဲ့ feature တွေထဲက form အကြောင်း ထပ်မံဖြည့်စွက်ထားပါတယ်။

Placeholder

textbox မှာ စာမဖြည့်ခင် textbox information ပြထားချင်တဲ့အခါမှာ အရင်တုန်းက jquery ကို သုံးပြီးရေးရတယ်။ အဲဒီလို ရေးမယ့် အစား HTML5 မှာ placeholder ဆိုတဲ့ attribute ကို သုံးလို့ရပါတယ်။ code ကိုတော့ ဒီလိုရေးတယ်။

<input type="text" placeholder="Enter Your Name" />

အဲဒီ code လေးက လက်ရှိ webkit borwser တွေမှာ အလုပ်လုပ်ပါတယ်။ Firefox 3.6 မှာတော့ အလုပ်မလုပ်သေးပါဘူး။ နောက်ပိုင်း version တွေမှာတော့ အလုပ်လုပ်မယ်ထင်တယ်။

Required

require validation စစ်ဗျို့အတွက် ကျွန်တော်တို့တွေ jquery ဖြစ်ဖြစ် javascript ဖြစ်ဖြစ် ရေးပြီး စစ်ခဲ့ရပါတယ်။ အခု HTML5 မှာ require ဆိုတဲ့ attribute နဲ့ တင်ရပါတယ်။ Safari မှာကတော့ error message မပြပေမယ့် form တစ်ခုကို မကူးသွားပါဘူး။ လိုအပ်တဲ့ field မှာ focus ဖြစ်သွားပါတယ်။ Opera မှာကတော့ message ကိုဖော်ပြပေးပါတယ်။ သူ့ကိုတော့ ဒီလိုလေးရေးတယ်။

<input type="text" placeholder="Enter Your Name" required />

Autofocus

HTML5 မှာ javascript နဲ့ textbox ကို focus လုပ်ဖြစ်အောင် ရေးစရာမလိုတော့ပါဘူး။ ဥပမာ။။ Google လိုမျိုး တက်တက်ချင်းမှာ textbox ကို focus ဖြစ်ချင်ရင် autofocus attribute ကို သုံးလိုက်ရုံပါပဲ။ jquery , javascript တွေနဲ့ သီးသန့် ထပ်ရေးနေဖို့မလိုတော့ဘူးပေါ့။ သို့ပေမယ့်လည်း browser တွေ အားလုံးမှာ မရသေးပါဘူး။ လက်ရှိ firefox 3.6 မှာတော့ အဲဒီ attribute အလုပ်မလုပ်သေးပါဘူး။

<input type="text" placeholder="Enter Your Name" required autofocus />

Type=email

HTML4 တုန်းက javascript နဲ့ email validation တွေ စစ်ခဲ့ကြပါတယ်။ အခုတော့ javascript မလိုအပ်ပဲ html5 မှာ စစ်လို့ရပါပြီ။

<input type="email" placeholder="yourmail@mail.com" required />

iPhone, iPodTouch တို့မှာဆိုရင်တော့ email keyboard ပြောင်းသွားပါလိမ့်မယ်။ Opera မှာဆိုရင်တော့ form submit လုပ်တဲ့အခါမှာ email format မှားနေတယ်ဆိုပြီး error message ပြပါလိမ့်မယ်။ Safari တို့ chrome တို့မှာတော့ submit လုပ်လို့မရပဲ focus ဖြစ်သွားပါလိမ့်မယ်။

type=tel

သူကတော့ HTML5 မှာ အသစ်ပါဝင်လာတာပေါ့။ Telephone number အတွက်ပါ။ iPhone , iPodTouch တို့မှာဆိုရင်တော့ phone number keyboard ပေါ်လာပါတယ်။ အခြား browser တွေမှာတော့ ထူးထူးခြားခြားရယ် မရှိပါဘူး။

<input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>

type=number

HTML5 မှာ number တွေ သီးသန့် ထပ်ပါလာပါတယ်။ number field ကို HTML5 မှာ ထပ်ပါလာပါပြီ။ number field ဖြစ်တဲ့အတွက် increase , decrease button လေး ဘေးမှာ ထပ်ပါလာပါတယ်။

<input id=cardnumber name=cardnumber type=number required>

type=date

ကျွန်တော်တို့တွေ date အတွက် javascriptနဲ့ဖြစ်ဖြစ် jqueyr ui နဲ့ ဖြစ်ဖြစ် အသုံးပြုခဲ့ကြပါတယ်။ HTML5 မှာ date field ပါလာပေမယ့် အခုလောလောဆယ်တော့ Opera တစ်ခုတည်းမှာပဲ ရပါသေးတယ်။

<input id=dob name=dob type=date  required>

HTML5 ဆိုင်ရာလေ့လာစရာများ

June 13, 2010December 24, 2011

CSS – Chapter 2

Chapter 2: CSS Styling

CSS မှာ property က အများကြီးရှိပါတယ်။ အရင် chapter တုန်းကတော့ color property နဲ့ပဲ ဥပမာ ပြသွားပါတယ်။

CSS Background

Background ကို မပြောခင် background နဲ့ လုပ်ထားတဲ့ CSS လေးကို ပြပါတယ်။

Continue reading “CSS – Chapter 2”

June 9, 2010July 3, 2010

MVC

MVC ဆိုတာကတော့ Model View Controller ဆိုတာ သိပြီးသားပြီးသားပါ။ ဒါပေမယ့် MVC ကို programming နဲ့ ရောထွေးနေကြတယ်။ MVC ဆိုတာ pattern တစ်ခုပါ။ Software Engineering မှာ အသုံးပြုတဲ့ architectural pattern လို့ဆိုရလိမ့်မယ်။ ဒါကြောင့် သူ့ကို Language တစ်ခုနဲ့ တစ်ခု အသုံးပြုပုံမတူဘူး။ နောက်ပြီး framework တစ်ခုနဲ့ တစ်ခု အသုံးပြုပုံမတူဘူး။ ဒါပေမယ့် သဘောတရားနဲ့ အနှစ်သာရကတော့ အတူတူပဲ။ CodeIgniter ရေးတတ်တာနဲ့ MVC ဆိုတာ ဒီလို ရေးရပါလားလို့ ထင်ရင်တော့ မဟုတ်ပါ။ CodeIgniter မှာ MVC ကို ရေးပုံနဲ့ Symfony မှာ ရေးပုံက မတူဘူး။ နောက်ပြီး iPhone SDK ကလည်း MVC ပဲ။ ဒါပေမယ့် တည်ဆောက်ပုံတွေ မတူဘူး။
Continue reading “MVC”

June 6, 2010July 3, 2010

Route Map

Programming Route

Web Route

June 2, 2010July 3, 2010

960gs

960gs css framework ကို ဘယ်လို အသုံးပြုရမလဲဆိုတာ video လေးနဲ့ ပြထားပါတယ်။
Continue reading “960gs”

May 20, 2010December 24, 2011

CSS (Cascading Style Sheet)

Intro
CSS ဆိုတာကတော့ Web Essential ပိုင်းမှာ မသိမဖြစ် လိုအပ်ပါတယ်။ Web ပိုင်းမှာ HTML တစ်ခုတည်းတတ်နေရုံနဲ့ မရပါဘူး။ HTML က သင့် site တစ်ခုလုံးကို လှသွားအောင် ဆောက်ရွက်ပေးနိုင်မှာမဟုတ်ဘူး။ CSS ကို HTML တတ်ပြီးတဲ့သူတိုင်း အလွယ်တကူ လေ့လာနိုင်ပါတယ်။ ကျွန်တော်တို့တွေ Internet website တွေမှာ မြင်နေရတဲ့ site တွေ အားလုံးဟာ CSS ကို အသုံးပြုထားပါတယ်။ HTML နဲ့ တည်ဆောက်ပြီး လှပအောင် တန်ဆာဆင်ဖို့ CSS ကို လေ့လာထားဖို့လိုအပ်ပါတယ်။
ကျွန်တော့်အနေနဲ့လည်း ဘယ်လိုရေးရလဲဆိုတဲ့ အခြေခံနဲ့ ဘာတွေ ရှိတယ်။ ဘာတွေ သုံးလို့ရလဲဆိုတော့ ကိုပဲ ရှင်းပြပေးနိုင်ပါတယ်။ CSS ဟာကျယ်ပြန့်ပြီးတော့ ကိုယ့် အတွေးအခေါ် ကိုယ့် design ပေါ်မှာ မူတည်ပြီး site ရဲ့ design ကလည်း ပြောင်းလဲသွားတာပါ။

Chapter 1: CSS Basic

CSS Syntax
CSS ကို ရေးသားပုံက HTML နဲ့ မတူတော့ ပဲ ရေးသားပုံတွေ ကွာခြားသွားပါတယ်။ css code လေးကို ကြည့်ရအောင်။

Selector ကတော့ ကိုယ် ဘာဟာကို CSS အသုံးပြုမလဲဆိုတာကို ပြောတာပါ။ အခု h1 ဆိုတဲ့ tag ကို select လုပ်ထားလိုက်တာပါ။ Declaration က တစ်ခုထက် ပိုထည့်နိုင်ပါတယ်။ တစ်ခု ဆုံးတိုင်း ; လေး ထည့်ပေးရပါတယ်။ Property နဲ့Value ရှိပါတယ်။ ကျွန်တော်တို့ HTML မှာတုန်းက attribute နဲ့ value ထည့်သလိုပေါ့။ property နဲ့ value ကို : လေး ခံပြီး ထည့်ပါတယ်။

color:blue; font-size:12px;

ဆိုတဲ့ သဘောက စာလုံးအပြောရောင် စာလုံးအရွယ် 12 px လို့ဆိုလိုက်တာပါ။
ဥပမာ။ အောက်က code လေးကို notepad မှာ ရေးပြီး စမ်းကြည့်လိုက်ပါ။

<html><head><title>CSS</title>
<style type="text/css">
p { color: red;}
</style>
</head>
<p>Hi! I am red.</p>
</html>

အဲဒါလေးကို save သိမ်းပြီး firefox နဲ့ ဖွင့်လိုက်ရင် အောက်ကပုံလို မြင်ရပါလိမ့်မယ်။

CSS ရေးမယ်ဆိုရင် နဲ့ စပြီး နဲ့ ဆုံးတဲ့ ကြားထဲမှာ ရေးရပါတယ်။ အများအားဖြင့်တော့ နဲ့ ကြားထဲမှာ ရေးရပါတယ်။ 

Comment

HTML မှာတုန်းကလည်း comment လုပ်ပုံပြောခဲ့ပါတယ်။ HTML comment ဆိုရင် နဲ့ရေးခဲ့တာ မှတ်မိအုံးမယ်ထင်ပါတယ်။ CSS မှာလည်း comment ရေးလို့ရပါတယ်။ သူကိုတော့ ဒီလိုရေးပါတယ်။

/* This is comment */  
/* နဲ့ စပြီး */ ဆုံး ပါတယ်။ ကြားထဲမှာ comment ရေးရတာပါ။   Selector  အပေါ်မှာ ကျွန်တော် ပြောခဲ့ဘူးပါတယ်။ Selector အကြောင်းပါ။ Select မှာ HTML element တွေ ဖြစ်တဲ့ p , h3 စတာတွေ သုံးလို့ရသလို id နဲ့class ကိုလည်း သုံးလို့ရပါတယ်။ HTML attribute မှာ id နဲ့class ဆိုတာ ရှိပါတယ်။

ID Selector
ကျွန်တော်တို့ html attribute id ဆိုတာကို ထည့်ပြီး အဲဒါကို css မှာ တွဲသုံးနိုင်ပါတယ်။ ဥပမာကို အောက်က code ကို လေ့လာကြည့်လို်က်ပါ။

<html> 
<head>
<title>CSS</title> 
<style type="text/css">
#red_id { color: red;} 
</style> 
</head> 
<p id="red_id">Hi! I am red id.</p> <p >Hi! I am normal.</p> 
</html>

အဲဒါလေးကို browser နဲ့ဖွင့် လိုက်ရင် အောက်ကလို မြင်ရပါမယ်။

id မှာ red_id ဆိုပြီးရေးထားပါတယ်။ အဲဒါကို ပြန်ခေါ်ဖို့ CSS မှာ #red_id နဲ့ပြန်ခေါ်ထားတာကို တွေ့မှာပါ။ အရင်တုန်းကတော့ p ဆိုတဲ့ html tag ကို ခေါ်ခဲ့ပေမယ့် အခု တစ်ခုထဲကို သီးသန့်ခေါ်ချင်တော့ id ပေးပြီး ခေါ်လိုက်တာပါ။

Class Selector
id လိုပဲ HTML attribute တစ်ခုဖြစ်တဲ့ class ဆိုတာကို သုံးနိုင်ပါတယ်။ id ကတော့ အများအားဖြင့် တစ်ခုတည်းကို နာမည်သဘောမျိုး identify သဘောမျိုးနဲ့ပေးတတ်ကြပြီး class ကတော့ အများကို ကိုယ်စားပြုတဲ့အနေနဲ့ပေးပါတယ်။ class ကိုလည်း id လိုမျိုးပဲ အသုံးပြုနိုင်ပါတယ်။ အောက်က code လေးကို ကြည့်လိုက်ပါ။

<html>
<head>
<title>CSS</title>
<style type="text/css">
.red_class { color: red;}
</style>
</head>
<p class="red_class">Hi! I am red class.</p>
<p> Hi! I am normal.</p>
<p class="red_class">Hi! I am red class.</p>
</html>

အဲဒါဆိုရင် Hi! I am red class ဆိုတဲ့ စာလုံးတွေက နီနေတာကို တွေ့မှာပါ။ ဒါလေးကိုတော့ ကိုယ်တိုင် စမ်းကြည့်နိုင်ပါတယ်။ ပုံလေးတော့ မပြတော့ဘူး။ အတူတူပဲမို့ပါ။ class ကို dot(.) ရှေ့မှာ ထားပြီး ရေးပါတယ်။ class ကို နောက်တစ်မျိုးရေးလို့ရပါတယ်။ ဥပမာ p tag မှာ သုံးထားတဲ့ class ဆိုရင်

p.red_class { color: red;}

ဆိုပြီး ရေးလို့ရပါတယ်။ h3 မှာ သုံးထားရင်

h3.red_class { color: red;}

ဆိုပြီးရေးလိုက်ရုံပါပဲ။ အောက်က code လေးကို ကြည့်လိုက်ပါ။

<html>
<head>
<title>CSS</title>
<style type="text/css">
h3.red_class { color: red;}
</style>
</head>
<h3 class="red_class">Hi I am H3</h3>
<p class="red_class">Hi! I am red id.</p>
<p> Hi! I am normal.</p>
<p class="red_class">Hi! I am red id.</p>
</html>

အဲဒါကို ဒီလိုလေး ထွက်လာမှာပါ။

p မှာ red_class လို့ထည့်ထားပေမယ့် css မှာ h3.red_class လို့ရေးထားပါတယ်။ red_class လို့ ကြေငြာထားတဲ့ h3 ကိုပဲ select လုပ်မယ်လို့ ဆိုလိုတာပါ။

CSS ဘယ်လိုထည့်မလဲ။

အပေါ်မှာတုန်းက ကျွန်တော် ပြောခဲ့ပါတယ်။ CSS ဘယ်လို ထည့်သွင်းရမယ်ဆိုတာကိုပေါ့။ နဲ့ ကြားမှာ style tag နဲ့ ထည့်တယ်လို့။ အဲဒါအပြင် အခြား ၂ နည်းရှိပါသေးတယ်။ စုစုပေါင်း ၃ မျိုးထည့်သွင်းလို့ရပါတယ်။

Internal Style Sheet
Inline Stye Sheet
External Style Sheet

Internal Style Sheet

ကျွန်တော်တို့ internal Style Sheet အကြောင်းပြောခဲ့ပြီးပါပြီ။ အပေါ်မှာ သုံးခဲ့တာတွေ အားလုံးက Internal style sheet သဘောတရားတွေပါ။

Inline Style Sheet

ကျွန်တော်တို့တွေအနေနဲ့ တစ်ခါတစ်လေမှာ style sheet တစ်ခုတည်းကို html tag ထဲတွဲသုံးချင်တဲ့အခါမှာ သုံးလို့ရအောင်ပါ။သူ့ကို ဒီလိုရေးပါတယ်။

<p style="color:red"> Hi! I am red.</p>

အဲဒါဆိုရင် Hi! I am red က အနီရောင်လေး ဖြစ်သွားတာကို တွေ့မှာပါ။ ကျွန်တော်တို့တွေအနေနဲ့ အချို့အခါတွေမှာ class တို့ id တို့ မကြေငြာပဲ ရေးချင်တဲ့အခါတွေ မှာ အသုံးပြုနိုင်ပါတယ်။

External Style Sheet

Internal Style Sheet က page တစ်ခုတည်းအတွက် အဆင်ပြေပေမယ့် page တွေက တစ်ခုထက်မက သုံးမယ်။ ဒီ style ပဲ သုံးမယ်ဆိုရင် Internal Style Sheet က အဆင်မပြေတော့ပါဘူး။ HTML အသစ် တစ်ခုဆောက်တိုင်း copy paste လိုက်လုပ်ရမယ်။ တစ်နေရာမှာ ပြောင်းလိုက်တိုင်း HTML files အားလုံးမှာ လိုက်ပြောင်းရမယ်။ အဲလို အခါ အဆင်မပြေတော့ဘူး။ ဒါကြောင့် HTML files တွေ တစ်ခုထက် မက သုံးမယ်ဆိုရင် External Style Sheet ကိုသုံးနိုင်ပါတယ်။ External Style Sheet ကို ခေါ်မယ်ဆိုရင် အောက်ကလို ခေါ်သုံးပါတယ်။

<head>
<link rel="stylesheet" type="text/css" href="external.css">
</head>

external.css ကတော့ သီးသန့် file ပါ။ file path တွေကိုတော့ HTML တုန်းက ပြောခဲ့ပြီးပါပြီ။ image path တွေ ခေါ်တဲ့နေရာမှာတုန်းက ရှင်းပြခဲ့ပါတယ်။ external.css ကိုလည်း အဲလို ခေါ်တာပါပဲ။

external.css ထဲမှာတော့ ဒီလိုရေးထားပါတယ်။

.red_class { color: red;}

တစ်ခြား ဘာမှ မပါပဲ css တွေ ချရေးထားရုံပါပဲ။ တခြား html tag တွေ ထည့်စရာလည်း မလိုပါဘူး။

အခု အခြေခံအချက်တွေနားလည်ပြီဆိုရင်တော့ CSS styling အကြောင်းတွေ စပြီးလေ့လာလို့ရပါပြီ။ property က color တစ်ခုတည်း မဟုတ်ပဲနဲ့ အခြား property အကြောင်းတွေကို နောက် chapter မှာ စပါမယ်။

October 24, 2009July 3, 2010

PHP Basic

What is PHP

PHP ဆိုတာ Hypertext Preprocessor ဖြစ်ပါသည်။ PHP သည် server-side scripting language တစ်ခုဖြစ်သည်။ နောက်ပြီး open source software လည်းဖြစ်သည်။PHP ကို Linux, Windows အစရှိတဲ့ OS တွေမှာအသုံးပြုနိုင်ပါတယ်။PHP support လုပ်တဲ့ database တွေလည်း အများကြီး ရှိပါတယ် ဒီထဲကမှ တချို့ ကိုပြောပြရရင် (MySQL,Oracle,PostgreSQL,Sybase) စသဖြင့်ပေါ့ ။

How to work PHP

PHP သည် server-side ဖြစ်လို့သူအလုပ်လုပ်တာကိုမမြင်ရပါဘူး။သူ့လုပ်ဆောင်ချက်က Client ဘက်(Browser) နဲ့ database တို့ကိုချိတ်ဆက်ပေးတာပေါ့။

ဥပမာဆိုရရင်…

ရေတွင်း၊ရေလှည်းနဲ့ ရေခပ်တဲ့ကြိုး နဲ့ ပုံး ပေါ့။ ရေလှည်းထဲကို ရေဖြည့်မယ်ဆို ရေတွင်းထဲက ရေကိုကြိုးနဲ့ပုံးမပါဘဲ ခပ်လို့မရပါဘူး။ ဒီနေရာမှာ ရေတွင်းဆိုတာက database ၊ရေလှည်းဆိုတာက Browser ၊ ပုံးနဲ့ကြိုးဆိုတာ PHP ပေါ့။ Continue reading “PHP Basic”

October 17, 2009July 3, 2010

HTML By Ccrazy

Web Page များကိုရေးသားခြင်း၏ အခြေခံအုတ်မြစ်ဖြစ်သော HTML (Hyper Text Markup Language) နှင့် CSS (Cascading Style Sheet) ဆိုင်ရာ လေ့ကျင့်ခန်းများကို (W3 Schools) မှ ဘာသာပြန်ဆိုတည်းဖြတ်၍ အတတ်နိုင်ဆုံး စုံလင်အောင် လေ့လာ ပြုစု တင်ပြထားသည်။

နည်းပညာလမ်းကြောင်းပေါ်မှာ အခြေခံအကျဆုံး အရိုးရှင်းဆုံးနဲ့ နားလည်အလွယ်ဆုံး Webpage ရေးနည်းကိုပြပါဆိုရင် HTML ပဲရှိပါတယ်… ဒါကိုနားမလည်ရင်.. ဘာမှ အလုပ်မဖြစ်ပါဘူး Pro မဖြစ်နိုင်ပါဘူး… ဘာပဲဖြစ်ဖြစ် ကြားနာမှတ်သားဖူးသမျှ ဝေမျှပါတယ်.. နားလည်ပြီးသူများအတွက် မရည်ရွယ်ပါ.. စတင်လေ့လာလိုသူများအတွက်သာ အထူးဦးတည် ရေးသားတာဖြစ်ပါတယ်.. ကျွန်တော် သိလွန်းလို့မဟုတ်ပါ.. အထက်မှာ ဆိုခဲ့သလို “ဧဝံမေ သုတံ ” ပါလို့ ထပ်ပြီး ၀န်ခံပါရစေ… Continue reading “HTML By Ccrazy”

October 12, 2009July 3, 2010

Learning Jquery 1.3

Chapter 2 : Selector

Jquery မှာ CSS မှာ အသုံးပြုတဲ့ selector တွေကို အသုံးပြုထားပြီး CSS လို့ Doucment Object Model (DOM) တွေကို မြန်မြန်ဆန်ဆန် ထိထိရောက် ခေါှယူနိုင်အောင်ပေါ့။ ဒီ Chapter မှာတော့ Selector တွေအကြောင်းပြောပြပြီး Jquery ရဲ့ ကိုယ်ပိုင် selector အနည်းငယ်ကိုလည်း ပြောပြသွားမှာပါ။

The Document Object Model

Jquery မှာ အရမ်းကောင်းမွန်တဲ့ အပိုင်းတစ်ခုပါ။ DOM ထဲမှာ ရှိတဲ့ elements တွေကို လွယ်လွယ်ကူကူ selecting လုပ်လို့ရတယ်။ Document Object Model ဟာ အစီအစဉ်တကျ ရှိတဲ့ family-tree structure ပါ။ HTML ဟာ အခြား markup language တွေလိုပဲ DOM ကို အသုံးပြုထားပါတယ်။ ကျွန်တောှတို့ဟာ same terminology ကို အသုံးပြုပြီး family relastionship တွေကို ခေါှယူနိုင်ပါတယ်။ parents, childern , … စတာတွေမျိုးပေါ့။ HTML မှာ ရှိတဲ့ family tree code လေးကို ဥပမာအနေနဲ့ ကြည့်ရအောင်။
Continue reading “Learning Jquery 1.3”