ဒီစာအုပ်ကို ရေးတာ ဘယ်လောက် ကြာလို့ ကြာသွားမှန်းတောင် မသိတော့ဘူး။ သေချာတာကတော့ ၁ နှစ်ကျော်သွားပြီဆိုတာပဲ။ ၁ နှစ်အတွင်းမှာ အားတဲ့ အချိန်တွေမှာ တဖြည်းဖြည်းခြင်းရေးခဲ့တာ အခုတော့ ပြီးသွားပါပြီ။ ကျွန်တော် ရေးတဲ့အချိန်တုန်းက CSS 3 က ပေါ်ကစဖြစ်ပြီး browser အားလုံး support မလုပ်သေးပါဘူး။ ဒါကြောင့် အခု CSS စာအုပ်မှာ CSS 3 အကြောင်းမပါလာခဲ့ပါဘူး။ စာလုံးပေါင်းမှားနေတာ ရေးထားတာမှားနေတာတွေကို ဝေဖန်ထောက်ပြနိုင်ပါတယ်ဗျာ။
JSON with javascript
Json ဆိုတာကတောာ့ avaScript Object Notation ဖြစ်ပြီး အခုနောက်ပိုင်း အသုံးများတဲ့ format ဆိုလည်း မမှားပါဘူး ။ web developer ဆိုရင်လည်း json ကို သိထားသင့်ပြီး iOS developer တွေ အနေနဲ့လည်း apple က plist နဲ့ တူတဲ့ အတွက်ကြောင့် သိထားသင့်ပါတယ်။json ကို JavaScript မှာ လွယ်လွယ်ကူကူ အသုံးပြုနိုင်ပါတယ်။ အခြား ဘာ addon မှ မလိုပဲ အသုံးပြုနိုင်သလို php မှာလည်း ပါပြီးသားပါ။ language တော်တော်များများမှာတော့ JSON ကို ထည့်သွင်းလာပါတယ်။ နောက်ပြီး web api တွေ အများစုကလည်း json ကို အသုံးပြုပါတယ်။ facebook ရဲ့ graph api ဆိုလည်း JSON ပါပဲ။
Writing jQuery Plugin Tutorial
jQuery မှာ plugin တွေ ဘယ်လောက် အသုံးဝင်သလဲဆိုတာ သိမှာပါ။ ကျွန်တော်တို့ ကိုယ်တိုင်လည်း jquery plugin တွေ ရေးလို့ရပါတယ်။ plugin ဆိုတာကလည်း function လိုပါပဲ။ ကျွန်တော်တို့ ထပ်ခါ ထပ်ခါလုပ်နေရတာကို လွယ်ကူအောင် ဖန်တီးပေးတာပါ။ ဥပမာ။။ အောက်က code လေးကို ကြည့်လိုက်ပါ။
<html>
<head>
<title>jQuery Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src = "bgcolor.js"></script>
<script>
$(document).ready(function(){
changecolor($("#sample"),"red");
changecolor($("#sample2"),"#FF00FF");
});
function changecolor(id,value)
{
$(id).css("background-color",value);
}
</script>
</head>
<body>
<div id="sample">This is sample<div>
<div id="sample2">This is sample<div>
</body>
</html>
အဲဒီမှာ changecolor ဆိုတဲ့ function လေး ရေးထားပါတယ်။ အဲဒါကို ကျွန်တော်တို့ plugin ပြောင်းကြည့်ရအောင်။ function ခေါ်ရေးရင် ရပေမယ့် user friendly ဖြစ်သွားအောင် plugin ပြောင်းရေးတာပါ။ plugin ပြောင်းရေးလိုက်ရင် ကျွန်တော်တို့ အောက်ကလို ပြောင်းပြီး ခေါ်လို့ရသွားမှာပါ။
[lang name=”js”]
$(“#sample”).bgcolor();
$(“#sample2″).bgcolor({
value:”#FF00FF”
});
[/xhtml]
ပိုပြီး user friendly ဖြစ်ပြီး code ကြည့်လိုက်တာနဲ့ နားလည် လွယ်တာပေါ့။
အရင်ဆုံး bgcolor.js မှာ အောက်ကလို ရေးလိုက်ပါတယ်။
(function(jQuery){
jQuery.fn.bgcolor = function(options) {
return this.each(function() {
//write code in here
});
};
})( jQuery );
အဲဒါက jquery plugin ရေးဖို့ပေါ့။
jQuery.fn.bgcolor က bgcolor function ကို extend လုပ်လိုက်တာပေါ့။ selector တွေကနေ တဆင့် bgcolor ဆိုတဲ့ function ခေါ်လို့ရအောင်ပါ။ ကျွန်တော် code ကို အောက်ကလို ပြင်ရေးလိုက်ပါမယ်။
(function(jQuery){
jQuery.fn.bgcolor = function(options) {
var defaults = {
value:"red"
};
var options = jQuery.extend(defaults, options);
return this.each(function() {
$(this).css("background-color",options.value);
});
};
})( jQuery );
defaults က red လို့ပေးထားပါတယ်။ အဲဒါက JSON format ပါ။ JSON format ကို merge လုပ်ဖို့အတွက်
var options = jQuery.extend(defaults, options);
options ဆိုတဲ့ JSON parmater က value ပါလာရင် red ကို ဖျက်ပြီး အသစ်ပြောင်းသွားမှာပါ။
return this.each(function() {
//ဒီမှာ code ရေးရပါတယ်။
}
အဲဒီမှာက ကိုယ် ဖြစ်ချင်တဲ့ code ရေးရပါတယ်။ ကျွန်တောက်တော့ ရောက်လာတဲ့ selector ကို background color ပြောင်းထားပါတယ်။
HTML မှာ
<script src = "bgcolor.js"></script>
ထည့်ပြီးတော့ bgcolor ဆိုတဲ့ function ကို ခေါ်လိုက်ရင် background ပြောင်းသွားပါလိမ့်မယ်။ ပေါ်ချင်တဲ့ အရောင်ကိုတော့ value ကို ထည့်ပြီး ပြောင်းပေးလို့ရပါတယ်။
$("#sample").bgcolor();
$("#sample2").bgcolor({
value:"#FF00FF"
});
စမ်းကြည့်ချင်ရင်တော့ code ကို download ချပြီး စမ်းနိုင်ပါတယ်။
HTML , CSS Myanmar Ebook
Planet Creator ရေးထားတဲ့ စာအုပ်ဖြစ်ပြီး HTML နဲ့ CSS ကို အခြေခံမှ စပြီး သေသေချာချာ ရေးထားတဲ့ စာအုပ်ကောင်းလေး တစ်အုပ်ပါ။ စာမျက်နှာပေါင်း ၁၉၇ မျက်နှာ ပါရှိပြီး နားလည် သဘောပေါက်အောင် ရှင်းလင်းထားတဲ့အတွက် လေ့လာတဲ့သူတွေအတွက် အတော့်ကို အသုံးဝင်မယ့် စာအုပ်တစ်အုပ်ပါ။
http://www.worldwidemyanmar.com/news/headline/423-myanmar-version-html-css-ebook.html
မှာ သွားရောက်ယူနိုင်ပါတယ်။
HTML5
HTML 5 ဆိုတာကတော့ အခုနောက်ပိုင်း ခေတ်စားလာပါတယ်။ အခုနောက်ပိုင်း Browser တွေဟာ HTML5 ကို support လုပ်လာပါပြီ။ နောက်ပိုင်းမှာ website တွေဟာ HTML5 ကို အဓိက အသုံးပြုတော့မှာပါ။ HTML5 ဆိုတာဘာလဲ။ HTML5 က ဘာတွေ ထူးလဲ။ HTML5 ကို ဘယ်မှာလေ့လာလို့ရမလဲ။
HTML 5 ~= HTML 5 + jsAPI + CSS3
လို့ ဆိုလို့ရပါတယ်။ HTML ဆိုတာက tag တွေပါပဲ။ ထူးထူးခြားခြားရယ်လို့ မရှိလာပေမယ့် HTML5 နဲ့ အတူ တွဲပါလာတဲ့ javascript API အသစ်တွေနဲ့ CSS3 က ထူးခြားမှုတွေ ဖြစ်စေပါတယ်။
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 { 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 {
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 |
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”
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 ဆိုင်ရာလေ့လာစရာများ
CSS – Chapter 2
Chapter 2: CSS Styling
CSS မှာ property က အများကြီးရှိပါတယ်။ အရင် chapter တုန်းကတော့ color property နဲ့ပဲ ဥပမာ ပြသွားပါတယ်။
CSS Background
Background ကို မပြောခင် background နဲ့ လုပ်ထားတဲ့ CSS လေးကို ပြပါတယ်။
960gs
960gs css framework ကို ဘယ်လို အသုံးပြုရမလဲဆိုတာ video လေးနဲ့ ပြထားပါတယ်။
Continue reading “960gs”
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 မှာ စပါမယ်။
HTML By Ccrazy
Web Page များကိုရေးသားခြင်း၏ အခြေခံအုတ်မြစ်ဖြစ်သော HTML (Hyper Text Markup Language) နှင့် CSS (Cascading Style Sheet) ဆိုင်ရာ လေ့ကျင့်ခန်းများကို (W3 Schools) မှ ဘာသာပြန်ဆိုတည်းဖြတ်၍ အတတ်နိုင်ဆုံး စုံလင်အောင် လေ့လာ ပြုစု တင်ပြထားသည်။
နည်းပညာလမ်းကြောင်းပေါ်မှာ အခြေခံအကျဆုံး အရိုးရှင်းဆုံးနဲ့ နားလည်အလွယ်ဆုံး Webpage ရေးနည်းကိုပြပါဆိုရင် HTML ပဲရှိပါတယ်… ဒါကိုနားမလည်ရင်.. ဘာမှ အလုပ်မဖြစ်ပါဘူး Pro မဖြစ်နိုင်ပါဘူး… ဘာပဲဖြစ်ဖြစ် ကြားနာမှတ်သားဖူးသမျှ ဝေမျှပါတယ်.. နားလည်ပြီးသူများအတွက် မရည်ရွယ်ပါ.. စတင်လေ့လာလိုသူများအတွက်သာ အထူးဦးတည် ရေးသားတာဖြစ်ပါတယ်.. ကျွန်တော် သိလွန်းလို့မဟုတ်ပါ.. အထက်မှာ ဆိုခဲ့သလို “ဧဝံမေ သုတံ ” ပါလို့ ထပ်ပြီး ၀န်ခံပါရစေ… Continue reading “HTML By Ccrazy”
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”
HTML
ယနေ့အခါမှာ Internet ဟာအလွန်ကျယ်ပြန့်လာပြီး လူတိုင်းနီးပါးအသုံးပြုကြပေသည်။ ကျွန်တော်တို့တွေဟာလည်း Internet ပေါ်မှာ ကိုယ်ပိုင်နေရာများကို ကိုယ်ပိုင် Homepage များကို အလွယ်တကူ ယူဆောင်နိုင်လေပြီ။ Internet ဆိုတာကို အကျယ်ရှင်းမနေတော့ပါဘူး။ အလွယ်ရှင်းရရင်တော့ Internet ဆိုတာ ကမ္ဘာ ပေါ်ရှိ နိုင်ငံအချင်းချင်း ချိတ်ဆက်ထားသော Network ကွန်ယက်ကြီးတစ်ခုဖြစ်ပါသည်။ အဲဒီလို Information တွေ ဖလှယ်ဖို့အတွက် Web Page တွေကို ရေးဆွဲရပါတယ်။ Web Page ရေးဆွဲဖို့ရာအတွက် HTML ဟာ အဓိက ကျပါတယ်။ ရေးသားထားတဲ့ Web Page တွေကို Web Browser Software နဲ့ ကြည့်ရှုရပါတယ်။ Web Broswer Software တွေက Internet Explorer နဲ့ Firefox တို့က နာမည်ကြီးတွေပါ။ ဒါကြောင့် web site တွေကို ဖန်တီးရာမှာ အခြေခံအကျဆုံး HTML ကို စာအုပ်လေးရေးသားထားပါ့တယ်။ Size သေးအောင် 7Zip နဲ့ချံု့ထားပါတယ်။ ဒါကြောင့် 7Zip ကိုသွင်းဖို့တော့ လိုပါလိမ့်မယ်။ ဒါမှမဟုတ် browser တွေမှာ ဖတ်လို့ရအောင် .swf file လေးလည်း ပေးထားပါတယ်။ နှစ်သက်ရာကို download ချယူနိုင်ပါတယ်။
Learning Jquery 1.3
Chapter 1 : Getting Start
အခုအချိန်မှာတော့ Web လောကမှာ dynamic တွေဖြစ်ကုန်ပြီး site တွေကို ဆွဲဆောင်မှုရှိလာအောင် interactive ဖြစ်လာအောင် developer တွေက ဖန်တီးလာတယ်။ အဲဒီလို ဖန်တီးရာမှာ လွယ်ကူလာအောင် JQuery လိုမျိုး javascript library တွေ အသုံးပြုလာတယ်။ Jquery ဟာ javascript library ဖြစ်ပြီး အခုအချိန်မှာ လူတောှတောှများများ အသုံးပြုရွေးချယ်နေကြပါတယ်။ Jquery မှာ function တွေအများအပြားရှိပြီးတော့ အခြား plugin တွေများပြားလို့လည်း လူသုံးများလာတယ်ဆို မမှားပါဘူး။ Jquery ဟာ HTML သာမက Cascading Style Sheets (CSS) တို့မှာရှိတဲ့ function တွေကို ခေါှပြီး အသုံးပြုလို့ရတယ်။ JQuery ကို အသုံးပြုမယ်ဆိုရင် programming skill အနည်းငယ်ရှိရမှာ ဖြစ်ပြီး web developers တွေအနေနဲ့ကတော့ programming experience ရှိပြီး javascript တတ်ကျွမ်းထားပြီးတွေ ဖြစ်တဲ့အတွက်ကြောင့် web developer တွေအနေနဲ့ jquery ကို လွယ်လွယ်နဲ့ လေ့လာနိုင်ပါတယ်။ အဲ တခြားအပိုင်းတွေ မပြောသေးခင် Jquery ဘာတွေ လုပ်နိုင်လဲဆိုတာ စပြောရအောင်။ Continue reading “Learning Jquery 1.3”