Posted on

CSS Myanmar EBook

ဒီစာအုပ်ကို ရေးတာ ဘယ်လောက် ကြာလို့ ကြာသွားမှန်းတောင် မသိတော့ဘူး။ သေချာတာကတော့ ၁ နှစ်ကျော်သွားပြီဆိုတာပဲ။ ၁ နှစ်အတွင်းမှာ အားတဲ့ အချိန်တွေမှာ တဖြည်းဖြည်းခြင်းရေးခဲ့တာ အခုတော့ ပြီးသွားပါပြီ။ ကျွန်တော် ရေးတဲ့အချိန်တုန်းက CSS 3 က ပေါ်ကစဖြစ်ပြီး browser အားလုံး support မလုပ်သေးပါဘူး။ ဒါကြောင့် အခု CSS စာအုပ်မှာ CSS 3 အကြောင်းမပါလာခဲ့ပါဘူး။ စာလုံးပေါင်းမှားနေတာ ရေးထားတာမှားနေတာတွေကို ဝေဖန်ထောက်ပြနိုင်ပါတယ်ဗျာ။

Download

Posted on

HTML , CSS Myanmar Ebook

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

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

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

Posted on

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”

Posted on

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 {
&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
Posted on

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”

Posted on

CSS – Chapter 2

Chapter 2: CSS Styling

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

CSS Background

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

Continue reading “CSS – Chapter 2”

Posted on

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 နဲ့ ထည့်တယ်လို့။ အဲဒါအပြင် အခြား ၂ နည်းရှိပါသေးတယ်။ စုစုပေါင်း ၃ မျိုးထည့်သွင်းလို့ရပါတယ်။

  1. Internal Style Sheet
  2. Inline Stye Sheet
  3. 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 မှာ စပါမယ်။