Web Design's note: 2013

Thursday, September 5, 2013

CSS Chapter 8 – List

List style နဲ.ပတ္သတ္ျပီး HTML Chapter 7 မွာ အေသးစိတ္ ရွင္းျပထားပါတယ္။ ၄င္းမွာေတာ့ HTML အေၾကာင္းကို အဓိကထား ေျပာထားတဲ့ အတြက္ inline style ကိုပဲအဓိကထားျပီး ေရးျပခဲ့ပါတယ္။ က်ေနာ္က HTML ကိုအရင္ေလ့လာျပီးမွ CSS ကိုေလ့လာဖို. တိုက္တြန္းထားပါတယ္။ ဒါေၾကာင့္ ယခု List နဲ.ပတ္သတ္ျပီး အက်ဥ္းခ်ဳပ္ျပန္ေျပာျပျပီး List ေတြကို HTML အခန္းမွာေျပာျပထားတဲ့ style ေတြအျပင္ ယခု CSS မွာ list style ေတြကို မိမိစိတ္ၾကိဳက္ ပံုေတြ နဲ.အစားထိုး ေရးသားနည္းကို အဓိကထားျပီး ေျပာျပေပးသြားမွာပါ။
List မွာ အဓိက ႏွစ္မ်ိဳးရွိပါတယ္။ ၄င္းတုိ.မွာ
Unordered Lists ႏွင့္
Ordered Lists တို.ျဖစ္ၾကပါတယ္။

ေအာက္ပါ Example တြင္ CSS မွာ Lists style ႏွစ္မ်ိဳး အတြက္ class selector ကိုအသံုးျပဳျပီး ေရးျပထားပါတယ္။

<!DOCTYPE html>
<html>
<head>
<style>
ul.c {list-style-type:circle;}
ul.s {list-style-type:square;}
ol.r {list-style-type:upper-roman;}
ol.a {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>Example of unordered lists:</p>
<ul class="c">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<ul class="s">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="r">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ol class="a">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
</body>
</html>

<Style> tag ထဲမွ upper-roman ေနရာမွာ lower-roman ႏွင့္ lower-alpha ေနရာမွာ upper-alpha အျဖစ္ေျပာင္းေရးလို. လဲရပါတယ္။

ဒီတစ္ခါေတာ့ က်ေနာ္တို.ကိုယ္တိုင္ ဖန္တီးထားတဲ့ image နဲ. Bullet ေနရာေတြမွာ ထည့္သံုးၾကည့္္ပါမယ္။ က်ေနာ္ကေတာ့ ေအာက္ပါပံုေလးကို အသံုးျပဳပါမယ္။ name ကိုေတာ့ arrow လို.ေပးထားျပီး .png file အမ်ိဳးအစားျဖစ္ပါတယ္။

CSS Chapter 7 – Link

CSS မွာ Link နဲ.ပတ္သတ္ျပီး ေလးမ်ိဳး ေရးရပါတယ္။ ၄င္းတို.မွာ

a:link (unvisited link)

a:visited (visited link)

a:hover (mouse over link)

a:active (selected link)

CSS မွာ link proerties ေတြေရးတဲ့ အခါ အထက္ပါ order အတိုင္းေရးရပါတယ္။ ေအာက္က Example မွာေရးျပထားပါတယ္။

Example

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="">This is a link</a></b></p>
</body>
</html>

Browser မွာ run ၾကည့္ျပီး This is a link ေပၚမွာ Pointer ကိုတင္ၾကည့္ပါ။ ေျပာင္းလဲမွဳေတြကိုေတြ.ရ ပါမယ္။ a:visited လုပ္ေဆာင္မွဳကေတာ့ ဒီေနရာမွာ မသိတာပါဘူး။ a:hover ကေတာ့ pointer တင္လိုက္ရင္ CSS မွာေရးထားတဲ့ အေရာင္ေျပာင္းသြားမွာျဖစ္ျပီး a:active ကေတာ့ link ရွိေသာစာကို click ႏွိပ္လိုက္တဲ့ အခ်ိန္မွာ အျပာေရာင္ေျပာင္းသြားမွာျဖစ္ပါတယ္။

က်ေနာ္တို. အမွန္တကယ္ Web page ေတြဖန္တီးတဲ့ အခါမွာ ေတာ့ ဒီ link ေရးနည္း ေပၚမွာပဲ အေျခခံျပီး မိမိလိုခ်င္တဲ့ Link ပံုစံကို CSS မွာ selector ေတြနဲ. စိတ္ၾကိဳက္ျပန္ဖန္တီးယူပါတယ္။ ဒါကိုသိထားမွလည္း ဖန္တီးလို.ရမွာျဖစ္တဲ့ အတြက္ link အတြက္ေရးရတဲ့ အေျခခံကို နားလည္ဖို.လိုပါတယ္။

အထက္ပါ Example မွာ This is a link ဆိုတဲ့ link စာေၾကာင္းမွာ underline ပါေနတာေတြ.ရပါမယ္။ link ရွိတယ္ဆိုတာကို သိတာေစဖို. Underline က default အေနနဲ. ပါေနတာပါ။ က်ေနာ္တို. ဒါကို ျဖတ္လို.ရပါတယ္။ အထက္ပါ Example ရဲ့ style မွာ ေအာက္မွာ ေရးျပထားတဲ့ အတိုင္း text-decoration:none ကို ထည့္ေရးလိုက္ပါ။ Browser မွာေဖာ္ျပတဲ့ အခါ underline မပါေတာ့ပါဘူး။

<style>
a:link {color:#FF0000;text-decoration:none;}    /* unvisited link */
a:visited {color:#00FF00;text-decoration:none;} /* visited link */
a:hover {color:#FF00FF;text-decoration:none;}   /* mouse over link */
a:active {color:#0000FF;text-decoration:none;} /* selected link */
</style>

CSS Chapter 6 _ Styling fonts

CSS ၏ font properties မ်ားမွာ ေအာက္ပါအတိုင္းျဖစ္ပါတယ္။

font-family

font-size

font-style

font-variant

font-weight

font

font-family, font-size ႏွင့္ font တို.ကေတာ့ အသံုးမ်ားပါတယ္။ font-style, font-variant ႏွင့္ font-weight တို.ကို Internet Explorer version တိုင္းမွာ support မလုပ္ေတာ့ သိပ္ျပီးမသံုးၾကပါဘူး။

Computer မွာအသံုးျပဳတဲ့ Basic font (၂) မ်ိဳးရွိပါတယ္။ ၄င္းတို.မွာ Sans-Serif ႏွင့္ Serif တို.ပဲျဖစ္ပါတယ္။ ေအာက္တြင္ Sans-serif ႏွင့္ Serif fonts တို.ရဲ့ ျခားနားျခင္းကိုေဖာ္ျပထားပါတယ္။

This example is from www.w3schools.com

Computer screens မွာေတာ့ Sans-serif font က Serif font ထက္ ဖက္ရတာ ရွင္းလင္းျပီး အဆင္ေျပလို. Sans-serif font ကိုပဲေရြးခ်ယ္အသံုး ျပဳၾကပါတယ္။

The font-family property

Font-family ကို အသံုးျပဳမယ့္ font အမ်ိဳးအစား ကို declaration လုပ္ဖို.သံုးပါတယ္။ font-family မွာ fallback system အေနနဲ. Several font ကိုသံုးျပီးလုပ္ေဆာင္ႏိုင္ပါတယ္။ တစ္ခါတေလက်ေနာ္တို.သံုးလုိက္တဲ့ font အမ်ိဳးအစားကို browser က support မလုပ္ေပးႏိုင္တဲ့အခါမ်ိဳးမွာ ေနာက္တစ္ခုကို choice လုပ္ျပီး ေဖာ္ျပေပးသြားပါတယ္။ ဆိုလိုတာက ပထမ ဦးစားေပး declaration လုပ္ထားတာ ကို support မလုပ္ႏိုင္ရင္ ေနာက္တစ္ခု declaration လုပ္ထားတာကို အစားထိုးေဖာ္ျပေပးသြားမွာပါ။

font-family အတြက္ value ေရးတဲ့ အခါမွာ မိမိအသံုးျပဳခ်င္တဲ့ font အမည္ကို အရင္ေရးရျပီး ေနာက္ဆံုးမွာေတာ့ generic family name (sans-serit or serif) နဲ. အဆံုးသတ္ေရးရပါတယ္။ က်ေနာ္တို. သတ္မွတ္ေပးတဲ့ font အမ်ိဳးအမည္ေတြ ကို user ရဲ့ browser က support မလုပ္ႏိုင္တဲ့အခါမွာ ၄င္း၏ base font အမ်ိဳးအစား တစ္ခုနဲ.အစားထိုးျပီးျပသြားေပးဖို.အတြက္ generic family name ကို ေနာက္ဆံုးမွာေရးသားရျခင္းျဖစ္ပါတယ္။

ေအာက္က example မွာ font-family အသံုးျပဳျပီး ေရးသားပံုကို ေလ့လာၾကည့္ပါ။

CSS Chapter 5 _ Styling Text

CSS text နဲ.ပတ္သတ္ျပီးေတာ့ အသံုးမ်ားတဲ့ text properties ေတြကိုပဲ ရွင္းျပသြားပါမယ္။ ၄င္းတို.မွာ

color

text-align

text-decoration

text-transform

text-indent

letter-spacing

line-height

word-spacing

Text Color

Text color အတြက္ color porperty ကိုသံုးပါတယ္။

Example of color property:
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is paragraph</p>
<p class="ex">This is paragraph using class attribute of CSS.</p>
</body>
</html>

This is paragraph မွာ အနီေရာင္ ျဖစ္ေနရျခင္းမွာ body {color:red;} လို.ေရးထားလို.ျဖစ္ပါတယ္။ body ထဲမွာရွိေသာ text color မွန္သမ်ွ အနီေရာင္လို. Style သတ္မွတ္ေပးလိုက္ျခင္း ျဖစ္ပါတယ္။ ဒါေၾကာင့္ ေနာက္ထပ္ <p> element ကိုေတာ့ အနီေရာင္ မသံုးျခင္လို. p.ex ဆိုျပီး style တစ္ခုေရးသားျခင္းျဖစ္ပါတယ္။

အကယ္၍ p ကိုပဲ p {color:rgb(0,0,255);} လို. Style ေရးလိုက္လ်င္ <p> tag နဲ.ေရးလိုက္တိုင္း အားလံုး အျပာေရာင္ေတြျဖစ္ကုန္မွာပါ။ ဒါေၾကာင့္ ေျပာင္းခ်င္တဲ့ <p> element အတြက္ပဲ class နဲ. Style ယူသံုးလို.ရေအာင္ p.ex ျဖင့္ style ေရးသားျခင္း ျဖစ္ပါတယ္။

CSS Chapter 4 _ Styling Background

CSS background properties မ်ားကို element တစ္ခု၏ background effects မ်ားအတြက္သံုးပါတယ္။ Background effects မ်ားအတြက္ CSS properties မ်ားမွာ

background-color

background-image

background-repeat

background-position

background-attachment

background-color

background-color ကို Element ေတြရဲ့ background အေရာင္အတြက္ သံုးပါတယ္။

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:#ffffff;}
h1{background-color:#888888;}
p{background-color:#eeffff;}
div{background-color:#b0c4dd;}
</style>
</head>
<body>
<h1>This is heading </h1>
<p> This is paragraph.</p>
<div>
This is a text inside a div element.
<p>This is paragraph between div tag </p>
This is also inside a div element.<br><br>
</div>
</body>
</html>

CSS မွာ color ကို HEX value, RGB value, color name တို.ျဖင့္ ေရးသားႏိုင္ပါတယ္။
HEX value syntax: #0000ff;
RGB value syntax: rgb(255,0,0)
Color name syntax: red

CSS Chapter 3 _ Insert CSS

CSS ေရးနည္း သံုးမ်ိဳး ရွိပါတယ္။ ၄င္းတို.မွာ...

Inline style

Internal style sheet

External style sheet

Inline Style

Inline Style ကို Element တစ္ခုတည္းမွာပဲ unique style ေတြ ေျပာင္းလဲဖုိ.အတြက္ အသံုးျပဳပါတယ္။ ထို.ေၾကာင့္ CSS ကို မိမိ ျပဳလုပ္လိုေသာ HTML element ၏ Start Tag အတြင္းတြင္ style attribute ျဖင့္ ထည့္သြင္းေရးသားရပါတယ္။ Style attribute တြင္ CSS ၏ properties မ်ားအားလံုးကို အသံုးျပဳေရးသား ႏိုင္ပါတယ္။

Example:

<h1 style=”color:#ff0000; text-align:center;”>This is center-aligned heading</h1>
<p style=”color:blue; margin-left:20px;”>This is paragraph</p>

CSS Chapter 2 _ Selector

Selector

CSS မွာ HTML အတြက္ style ေတြေရးလ်င္ ၄င္းတို. ၏ p, body, h1 စသည္ျဖင့္ tagname ကိုသာသံုးျပီး ေရးပါတယ္။ ဥပမာ က်ေနာ္တို. <p> tag အတြက္ CSS မွာ color style အနီေရာင္ ကို ေရးထားတယ္ ဆိုပါေတာ့၊ HTML မွာ ရွိတဲ့ <p> tag ျဖင့္ ေရးထားတဲ့ element ေတြအားလံုး တညီတည္း အနီေရာင္ေတြ ျဖစ္ကုန္ပါတယ္။ ဒီလို problem ေတြမျဖစ္ေအာင္ html tagname ေတြမပာုတ္ပဲ ကိုယ္တိုင္ နာမည္ေပးသတ္မွတ္ ျပီး HTML မွာ Style setting မ်ား ေပါင္းထည့္ လုပ္ေဆာင္ျခင္းကို selection လို.ေခၚပါတယ္။ အဲဒီလို လုပ္ေဆာင္ႏိုင္ဖို. Selector ပံုစံ ၂ မ်ိုဳးကို css က ဖန္တီးေပးထားပါတယ္။ ၄င္းတို.မွာ id selector ႏွင့္ class selector တို.ျဖစ္ပါတယ္။

The id Selector

Each element can have one ID

Each page can have only one element with that ID

id selector ဆိုတာ a single, unique element (element တစ္ခုတည္း) အတြက္သံုးပါတယ္။ HTML တြင္ id selector ကိုသံုးဖို. Attribute မွာ id ျဖစ္ျပီး ၄င္း၏ value အတြက္ CSS ေရးရာတြင္ မိမိေပးခ်င္ေသာ နာမည္၏ ေရွ့တြင္ # ကို ထည့္ေပးရပါတယ္။

CSS Chapter 1 _ Introduction

CSS ကိုမေလ့လာခင္မွာ HTML အေၾကာင္းကို Basic ေလာက္သိထားဖို.လုိပါတယ္။ CSS tutorials လုပ္တဲ့ အခါမွာ HTML ႏွင့္ တြဲလုပ္ရပါတယ္။ ဒါေၾကာင့္ HTML ကို အရင္ေလ့လာျပီးမွ CSS ကိုေလ့လာဖို. တိုက္တြန္းခ်င္ ပါတယ္။

What is CSS?

CSS ဆိုသည္ မွာ Cascading Style Sheets ျဖစ္ပါတယ္။

HTML elements မ်ား၏ styles မ်ား အတြက္ အသံုးျပဳ ပါတယ္။

External Style Sheets မ်ားက works ေတြကို လုပ္ေဆာင္ရသက္သာေစပါတယ္။

Multiple Web pages မ်ားကို CSS တစ္ခုတည္းျဖင့္လည္း Control လုပ္ႏိုင္ပါတယ္။

CSS Syntax

Css syntax တစ္ခု ကို CSS rule ျဖစ္ေသာ အဓိက အပိုင္း ၂ ပိုင္းျဖစ္ ဖြဲစည္းထားပါတယ္။ ၄င္းတုိ.မွာ...

Selector

Declaration

HTML Chapter 15 _ Quick List

HTML Basic Document

<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>

Basic Tags

<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

HTML Chapter 14 _ Entities

တခ်ိဳ.ေသာ characters မ်ားကို Web page မွာေဖာ္ျပဖို.အတြက္ html မွာ character အတိုင္းေရးလို.မရပါဘူး။ ဥပမာ HTML document တြင္ <p> The answer of 3 < 5 is ture. </p> လို.ေရးလိုက္ပါက less than (<) ကို HTML တြင္ tag အျဖစ္ပဲ မွတ္ယူသြားပါတယ္။ Browser ထိုေၾကာင့္ ၄င္း character ျဖင့္ ေဖာ္ျပလိုပါက (<) ၏ Entity name ျဖစ္ေသာ < သို.မပာုတ္ Entity number ျဖစ္ေသာ #160; ျဖင့္အသံုးျပဳ ေရးသားရပါတယ္။ word တစ္ခုႏွင္ တစ္ခုၾကား space အမ်ားၾကီးထားခ်င္လ်င္လည္း HTML entity ကို အသံုးျပဳရပါတယ္။

Example:

<p> The answer of 3 < 5 is true. </p> or <p> The answer of 3 #160; 5 is true. </p>

ေအာက္တြင္ HTML useful character entities မ်ားကို ေဖာ္ျပေပးထားပါတယ္။ Entity name ႏွင့္ Entity number မ်ားမွ မိမိႏွစ္ သက္ရာကို အသံုးျပဳႏိုင္ပါတယ္။

HTML Chapter 13 _ Making Layout

HTML Layouts – Using <div>

Web page တစ္ခုစလုပ္ဖို. Layout plan ကို Step by step စဥ္းစားရေအာင္...

ပထမဆံုး view point အတြက္စဥ္းစားၾကည့္ပါမယ္။ Webpage မ်ားကို browser မွာၾကည့္တဲ့အခါမွာ horizontal scholl bar မထြက္ဖို. အလြန္ အေရးၾကီးပါတယ္။ ဒါေၾကာင့္ ယခုေခတ္ computers မ်ား၏ monitor resolution ကိုသံုးသပ္ၾကည့္ပါမယ္။ အနည္းဆံုး monitor resolution ကေတာ့ 1024x768 လို.ေယဘုယ် သတ္မွတ္ႏိုင္ပါတယ္။ ဥပမာ က်ေနာ္တို. Layout ခ်တဲ့အခါ Width ကို 1300 px နဲ.တာ layout လုပ္လိုက္မယ္ဆိုရင္ horizontal scholl bar ထြက္လာျပီး user ေတြသံုးရတာ အဆင္မေျပ ျဖစ္သြား ႏိုင္ပါတယ္။ ဒါေၾကာင့္ Web Designer ေတာ္ေတာ္မ်ားမ်ားက monitor အာလံုးႏွင့္ ကိုက္ညီေအာင္ Width ကို 960 px ျဖင့္ ဆြဲၾကပါတယ္။

Website ေတြမွာ ေယဘုယ် အားျဖင့္ Header, Content, Footer ပာူ၍ သံုးပိုင္းပါ၀င္ ပါတယ္။ Header တြင္ Logo, Navigation စသည္တို. ပါ၀င္ေလ့ရွိျပီး Content မွာေတာ့ အေၾကာင္းအရာမ်ားကို paragraphs, images, photos, videos တို.ျဖင့္ ေဖာ္ျပေလ့ရွိပါတယ္။ Footer တြင္ေတာ့ ပံုမွန္အားျဖင့္ website ရဲ့ copy right ကို ေရးသားထားေလ့ ရွိပါတယ္။

<div> ျဖင့္ layout မလုပ္ခင္ က်ေနာ္တို. Sketch layout ေလးလုပ္ၾကည့္ ရေအာင္...

HTML Comment  Tag

Comment tag ကို အမွတ္အသားျပဳလုပ္ေသာ အခါတြင္သံုးပါတယ္။ HTML တြင္ comment tag ကို ေရးေပမယ့္ Browser မွာမေဖာ္ျပ ေပးပါဘူး။ comment ေရးသားျခင္း ၏ေကာင္းေသာ အခ်က္မ်ားက HTML document ကို edit ျပန္လုပ္ေသာ အခါ ရွာေဖြရလြယ္ကူပါတယ္။ web page တစ္ခု ေဆာက္ရာတြင္ HTML source code ေပါင္းမ်ားစြာ ျဖင့္ ျပဳလုပ္ရေသာေၾကာင့္ edit လုပ္ရာတြင္ ရွာေဖြရ ၾကာတတ္ပါတယ္။ comment tag သံုးထားျခင္းျဖင့္ ရွာေဖြရလြယ္ကူပါတယ္။

Example:

<div id="wrapper">

<div id="header"> This is header </div>

<div id="content"> This is content </div>

<div id="footer"> This is footer </div>

</div>

Website Layout

Website အမ်ားစုသည္ ၄င္းတို.၏ content မ်ားကို magazine, newspaper တို.ကဲ့သို. multiple columns ျဖင့္ ေဖာ္ျပေလ့ ရွိပါတယ္။ webpage မွာ multiple columns ဖန္တီးဖို. <div> သို.မပာုတ္ <table> elements မ်ားကို သံုးရပါတယ္။ ၄င္း <div> ႏွင့္ <table> element တို.၏ Position အတြက္ CSS ကို အသံုးျပဳရပါတယ္။ <tabel> ျဖင့္ layout ခ်ႏိုင္ ေသာ္လည္း table မွာ ဇယားျဖင့္ ျပရေသာ (tabular data) မ်ားအတြက္ အသံုးျပဳဖို.ျဖစ္ျပီး Layout tool မပာုတ္ပါဘူး။

Webpage တစ္ခု၏ layout ကို သံုးပိုင္း ပိုင္းျခားျပီး ဆြဲလ်င္ အလြန္လြယ္ကူပါတယ္။ မည္သည့္ website ပဲျဖစ္ပါေစ အေျခခံ အားျဖင့္ သံုပိုင္းပါ၀င္ပါတယ္။ ၄င္းတို.မွာ header, content, footer တို.ပဲျဖစ္ပါတယ္။

Block Level Elements

Block level element ဆိုသည္မွာ content မ်ားကို Browser တြင္ ေနာက္တစ္ေၾကာင္းသို. ဆင္း၍ ေဖာ္ျပေစေသာ tags မ်ားကို ေခၚပါတယ္။ Example: <h1>, <p>, <ul>, <table> ဥပမာႏွင့္ ရွင္းျပရလ်င္...

က်ေနာ္ တို. HTML document မွာ <h1> This is heading </h1><p> This is paragraph </p> လို. ကပ္ေရးထားတယ္ဆိုပါစို.။

Browser မွာ ေအာက္ပါပံု အတိုင္ တစ္ေၾကာင္းစီပဲ ျပပါတယ္။

This is heading

This is paragraph

ဘာလို.လဲဆိုေတာ့ block elements မ်ား ရဲ့ အစ က အေရွ့ element ၏ အဆံု မွ ကပ္ျပီး browser မွာေဖာ္ျပေလ့မရွိပါဘူး။ ဒါေၾကာင့္ <p> tag အတြင္းမွာ ပါ၀င္ တဲ့ content က <h1> tag မွာေရးထားတဲ့ content ေဘးကပ္လ်က္ မေဖာ္ျပပဲ ေနာက္တစ္ေၾကာင္းမွ စျပီး ေဖာ္ျပျခင္းျဖစ္ပါတယ္။ HTML document တြင္ တစ္ေၾကာင္းတည္း ကပ္ေရးထားေသာ္လည္း browser တြင္ေဖာ္ျပေသာ အခါတြင္ ေနာက္တစ္ေၾကာင္းသို. ဆင္းျပီးမွသာ ေဖာ္ျပေပး ပါတယ္။

HTML Chapter 10 _ Color Value

HTML တြင္ color ကို Red, Green, Blue တို.၏ တန္ဖိုးျဖင့္ ေပါင္းစပ္ထားပါတယ္။ ၄င္းတို.၏ပါ၀င္မွဳ ပမာဏတန္ဖိုးကို Hexadecimal (HEX) နဲ.သတ္မွတ္ပါတယ္။ color တန္ဖိုး အနည္းဆံုးမွာ 0 (HEX တန္ဖိုးျဖင့္ ေဖာ္ျပပါက 00) ျဖစ္ပါတယ္။ အမ်ားဆံုး မွာ 255 (HEX တန္ဖိုးျဖင့္ ေဖာ္ျပပါက FF) ျဖစ္ ပါတယ္။
HTML document တြင္ အသံုးျပဳမည့္ color အေရာင္ကို HEX ျဖင့္ ေရးလိုပါက # ႏွင့္တြဲျပီး ေဖာ္ျပရပါတယ္။ Red, Green, Blue တို.ကို ရည္ညြန္းေသာ rgb( - ,- , - ) ပံုစံျဖင့္လည္း ေရးသားႏိုင္သည့္အျပင္ color ၏ အမည္ ျဖင့္လည္း ေရသားႏိုင္ပါတယ္။

HTML တြင္ #000000 ၏တန္ဖိုးသည္ အနက္ေရာင္ ျဖစ္ပါတယ္။ ေရွ့ဆံုးမွ သုည ႏွစ္လံုး (00) သည္ အနီေရာင္ ရဲ့ HEX တန္ဖိုးျဖစ္ျပီး၊ အလယ္မွ 00 မွာ အစိမ္းေရာင္၏ HEX တန္ဖိုး ျဖစ္ကာ ေနာက္ဆံုး 00 မွာ အျပာေရာင္ ၏ ပါ၀င္မွဳ ပမာဏ တန္ဖိုးျဖစ္ပါတယ္။ HTML တြင္ color ၏ အတိုေကာက္မွာ RGB ျဖစ္ပါတယ္။

HTML Chapter 9 _ Styles (CSS)

HTML တြင္ CSS (Cascading Style Sheets) ကို HTML elements မ်ားရဲ့ style information ေရးသားဖို. အတြက္အသံုးျပဳပါတယ္။ HTML တြင္ CSS ကိုပံုစံ သံုးမ်ိဳး ျဖင့္ ေရးသားႏိုင္ပါတယ္။ ၄င္းတို.မွာ_

Inline: <> tag မ်ားတြင္ style attribute ျဖင့္ေရးျခင္း
Internal: <head> ႏွင့္ </head> အတြင္းမွာ <style>element ျဖင့္ ေရးျခင္း
External: CSS file တစ္ခုအေနျဖင့္ သီးသန္.ေရးသားထားျပီးမွ <head> section မွ <link> ျဖင့္ ခ်ိတ္ဆက္ အသံုးျပဳျခင္းတို. ျဖစ္ပါတယ္။

HTML Basic chapters မ်ားကို အလံုးစံု ေလ့လာျပီးပါက CSS အေၾကာင္းကို ဆက္လက္ ေလ့လာ ႏိုင္ဖို. post ေရးတင္ပါမယ္။ ဒီမွာေတာ့ HTML ကို အဓိကထားေျပာတာျဖစ္တဲ့ အတြက္ HTML tag မွာ ေရးသားရေသာ ပံုစံ ႏွင့္ CSS file ျဖင့္ ခ်ိတ္ဆက္ပံုကို ပဲ ရွင္းျပထား ပါတယ္။

Inline Style

HTML Chapter 8 _ HTML Forms

HTML form တြင္ input elements မ်ားျဖစ္ေသာ text fields, checkboxs, radio-buttons, submit buttons စသည္တို. အျပင္ select lists, textarea, fieldset, legend and label elements ေတြလည္း ပါ၀င္ႏိုင္ ပါတယ္။ HTML form ကို <form> tag ျဖင့္ ေရးရပါတယ္။ <form> tag ထဲမွာမွ input elements ေတြအတြက္ <input type=”text”> tag ျဖင့္ ေရးပါတယ္။ တစ္ခုျခင္းစီ ကို example မ်ားျဖင့္ ေလ့လာၾကည့္ပါ။

Text Fields

<!DOCTYPE html>
<html>
<body>
    <form>
    First name: <input type="text" name="firstname"><br><br>
    Last name:<input type="text" name="lastname">
    </form>
</body>
</html>

HTML Chapter 7 _ Lists

Unordered Lists

Unordered list ကို <ul> tag ျဖင့္ စေရးရျပီး ၄င္း tag အတြင္းမွာမွ list ျဖင့္ ေဖာ္ျပ လိုေသာ syntax မ်ားကို <li> tag မ်ားျဖင့္ ေရးရပါတယ္။ Unordered lists မ်ားကို Browser တြင္ bullets မ်ားျဖင့္ ေဖာ္ျပေပးပါတယ္။

Example:

<!DOCTYPE html>
<html>
<body>
    <ul>
    <li>Acer</li>
    <li>Dell</li>
    <li>Toshiba</li>
    </ul>
</body>
</html>

HTML Chapter 6 _ HTML Table

HTML document မွာ table ကို <table> tag နဲ.ေဖာ္ျပရပါတယ္။
Table တစ္ခုမွာ Rows ႏွင့္ Data cells (column) ဆိုျပီး ၂ ပိုင္း ပါ၀င္ ပါတယ္။ Table ၏ Row အတြက္ <tr> tag ကို အသံုးျပဳျပီး Data cell အတြက္ <td> tag ကိုအသံုးျပဳရပါတယ္။ td ဆိုသည္မွာ table data ကိုရည္ညြန္းျခင္း ျဖစ္ပါတယ္။ <td> tag အတြင္းမွာ text, links, images, lists, forms, စသည္တို.ကိုထည့္သြင္းေဖာ္ျပ ႏိုင္သည့္အျပင္ ေနာက္ထပ္ tables မ်ားပါ ထပ္ထည့္ ႏိုင္ပါတယ္။
Table တစ္ခုကို HTML တြင္ စေရးေတာ့မည္ဆုိလ်င္...

<table> tag ကို အရင္ ေရးရပါတယ္။
<table> ႏွင့္ </table> ထဲမွာမွ Row <tr> tag ကို အျမဲတမ္းအရင္ဦးဆံုး ေရးရပါတယ္။
<tr> ႏွင့္ </tr> အတြင္းမွာ မွ data cell <td> ကိုေရးရပါတယ္။ Data cell (column) အေရအတြက္ အမ်ားၾကီးထည့္လို.ပါက <td></td> tags မ်ားကို ၾကိမ္ၾကိမ္ အသံုးျပဳျပီး ေရးသားႏိုင္ပါတယ္။

Table ၏ boder attribute ကိုေတာ့ border နဲပဲေရးသားျပီး border ကို web page တြင္ မျမင္ခ်င္ပါက border တန္ဖို.ကို 0 (zero) ထည့္ေပးရပါတယ္။

HTML Chapter 5 _ HTML Image

HTML တြင္ Image အတြက္ <img> tag အကိုအသံုးျပဳရျပီး ၄င္း၏ attribute မွာ src ျဖစ္ပါတယ္။ src ဆိုသည္မွာ Soruce ကို ရည္ညြန္းျခင္း ျဖစ္ပါတယ္။ <img> tag တြင္ end tag မရွိပါ။

Syntax of HTML image: <img src="url" alt="some_text">

url ဆိုသည္မွာ image file တည္ရွိရာ ေနရာ ကိုေျပာျခင္းျဖစ္ပါတယ္။ alt ေနရာမွာေတာ့ မိမိ ေပးခ်င္ေသာ image ၏ နာမည္ ကိုေရးရမွာျဖစ္ပါတယ္။ image file ၏ နာမည္ ကို ေျပာတာမပာုတ္ပါဘူး။ Browser မွ image ကို loading လုပ္ျပီး မျပေပးႏိုင္တဲ့ အေျခအေနမ်ိဳးမွာ alt မွာ ေရးထားေသာ နာမည္ ကို ေဖာ္ျပေပးမွာ ျဖစ္ပါတယ္။

Example:

<img src="image/yourphotoname.jpg" alt="This is my photo">

အထက္ပါ example မွ image/yourphotoname.jpg တြင္ image ဆိုသည္မွာ photo သို.မပာုတ္ image ထည့္ထားေသာ folder name ျဖစ္ျပီး၊ yourphotoname ေနရာတြင္ မိမိ အသံုးျပဳမည့္ photofile ၏ name ကိုထည့္းေပးရမွာပါ။ .jpg ေနရာမွာ တကယ္လို. မိမိသံုးတဲ့ photo file က png အမ်ိဳးအစားျဖစ္လ်င္ .png လို.ေရးရျပီး gif ျဖစ္လ်င္ .gif လို. ေရးရမွာပါ။ ထို file extention မမွန္လ်င္ Browser က ပံုမ်ားကို မေဖာ္ျပေပးႏိုင္ပါဘူး။ ထို.ေၾကာင့္ မိမိ၏ folder name, image file name ႏွင့္ file extention တို. မွန္ကန္ေအာင္ ေရးဖို. လိုအပ္ပါတယ္။

HTML Chapter 4_Element, Attribute, Hyperlink

HTML Elements

Element ဆိုသည္မွာ Start tag က ေနစ၍ end tag ဆံုးသည့္ တိုင္ေအာင္ ပါ၀င္မွဳအားလံုးကို ေခၚပါတယ္။

အထက္ပါ ပံုတြင္ start tag <p> မွ စျပီး end tag </p> အဆံုးထိ တစ္ေၾကာင္းလံုးကို element လို.ေခၚပါတယ္။ <p> tag ျဖင့္ ေရးထားေသာေၾကာင့္ <p> element လို.ေခၚပါတယ္။

Empty HTML Element

Content မပါ၀င္ေသာ HTML element ေတြကိုေတာ့ empty element လို.ေခၚပါတယ္။ ဥပမာ <br> ႏွင့္ <hr> တို.ျဖစ္ၾက ပါတယ္။ <br> သည္ empty html element ျဖစ္ျပီး ၄င္းသည္ keyboard မွ enter key function ကဲ့သို. လုပ္ေဆာင္ေပးပါတယ္။ <hr> tag ကို horizontal line ျပဳလုပ္ရာမွာ သံုးပါတယ္။ ၄င္းတုိ.သည္ Empty html element မ်ား ျဖစ္ေသာေၾကာင့္ end tags </br>, </hr> မ်ား မရွိပါ။

HTML Chapter 3_Writing HTML Using notepad or notepad++

က်ေနာ္တို. Notepad သို.မပာုတ္ notepad++ ကို အသံုးျပဳျပီး web page တစ္ခုေလာက္ ဖန္တီးၾကည့္ရေအာင္...

Notepad++ မရွိေသးေသာ သူမ်ား http://notepad-plus-plus.org/ မွာ download ရယူႏိုင္ပါတယ္။ HTML ကိုေလ့က်င့္ ရာတြင္ notepad++ ျဖင့္ ေရးသားေလ့က်င့္သြားဖို. တိုက္တြန္းပါတယ္။ HTML ကို စတင္ ေလ့လာသူမ်ား အတြက္ notepad သို. Notepad++ ကအေကာင္းဆံုးပါပဲ။ http://www.w3schools.com တြင္လည္း Adobe Dreamweaver ကဲ့သို. professional HTML editor ေတြအမ်ားၾကီး ရွိေပမယ့္ simple text editor မ်ား ျဖင့္ HTML ေလ့လာျခင္းကို ေကာင္းမြန္တဲ့ နည္းလမ္း အျဖစ္ မွတ္ခ်က္ ေပးထားပါတယ္။

HTML document တစ္ခု ကို ေအာက္ပါ Steps မ်ား အတိုင္း စနစ္တက် ေရးသြားပါမယ္ ...

HTML Chapter 2_How to write HTML Web page

HTML document တစ္ခုကို ေရးသား ရာတြင္....

<!DOCTYPE> ကို အရင္ဆံုးေရးရပါတယ္။
<html> start tag ႏွင့္ </html> end tag တို. ပါရွိရပါမယ္။
<html> ႏွင့္ </html> အတြင္းတြင္ <head> tag ႏွင့္<body> tag တို.ကိုေရးရပါတယ္။

HTML Chapter 1_ Introduction

HTML အေၾကာင္းကို Examples, tutorials မ်ားႏွင့္ အတူ Chapters 15 ခု ျဖင့္ blog မွာ post လုပ္သြားပါမယ္။ ၄င္း ၁၅ ခန္းလံုးကို ေလ့လာျပီးပါက HTML အေၾကာင္းကို ေတာ္ေတာ္ေလး နာလည္ျပီး ေရးတတ္သြားမွာပါ။ Web designer တစ္ေယာက္အတြက္ HTML ကအေရးၾကီးဆံုးပါပဲ။ ဒါေၾကာင့္ အရွင္းဆံုး ျဖစ္ေအာင္ အတတ္ႏိုင္ဆံုး ၾကိဳးစားျပီး ေရးသားထား ပါတယ္။ တစ္ေန.ကို တစ္ခန္းႏွဳန္းျဖင့္ ေလ့လာသြားပါက စုစုေပါင္း ၁၅ ရက္ပဲ အခ်ိန္ေပးရမွာပါ။ ေလ့လာမွဳ ျပီးဆံုးပါကလည္း Web sites မ်ားေရးဆက္လက္ ေရးသားေလ့က်င့္ ရန္အတြက္ HTML tags မ်ား ၏ Reference post ကိုေရးေပးသြားမွာပါ။

What is HTML?

HTML ၏ အျပည့္အစံုမွာ Hyper Text Markup Language ျဖစ္ပါတယ္။

HTML သည္ Markup language အမ်ိဳးအစား ျဖစ္ပါတယ္။

Markup language ဆိုသည္မွာ a set of markup tags အမ်ိဳးအစားျဖစ္ပါတယ္။

Tags ေတြက document မွာ ပါမည့္ content (အေၾကာင္းအရာ) ေတြကို ေဖာ္ျပေပးဖို. ျဖစ္ပါတယ္၊ တနည္းေျပာရလ်င္ Browser မွာ ေဖာ္ျပဖို.အတြက္ လုပ္ေဆာင္ေပးပါတယ္။

HTML document တစ္ခုတြင္ HTML tag နဲ. Plain text ဆိုျပီး ၂ ခုပါ၀င္ပါတယ္။

HTML Content

Chapter 1 _ Introduction

What is HTML?
Markup Tag (HTML tag)
HTML Page Structure

Chapter 2 _ Making Web page

The <!DOCTYPE> Declaration
The <html> tag
The <head> tag
The <body> tag

Chapter 3

Writing HTML using notepad or notepad++

Chapter 4

Element
Attribute
Hyperlink

Chapter 5

Image

Chapter 6

Table

Chapter 7 _ Lists

Unordered Lists
Different Types of Unordered Lists
Ordered Lists
Different Type of Ordered Lists
Nested List
Description Lists

Chapter 8 _ Forms

Text Fields
Password Field
Radio Buttons
Checkboxes
Submit Button

Chapter 9 _ Styles (CSS)

Inline Style
Internal Style Sheet
External Style sheet

Chapter 10

Color Value

Chapter 11

Block level elements
Inline elements
<div>
<span>

Chapter 12

Comment  Tag
Website layout

Chapter 13

HTML Layouts_using <div>

Chapter 14

Entities

Chapter 15

Quick list

Thursday, September 5, 2013

Wednesday, September 4, 2013

Example

Thursday, July 25, 2013

The font-family property

Monday, July 22, 2013

Text Color

Sunday, July 21, 2013

background-color

Example:

Saturday, July 20, 2013

Inline Style

Example:

Friday, July 19, 2013

Selector

The id Selector

Wednesday, July 17, 2013

What is CSS?

CSS Syntax

Monday, July 15, 2013

HTML Basic Document

Basic Tags

Example:

HTML Layouts – Using <div>

HTML Comment  Tag

Example:

Website Layout

Block Level Elements

This is heading

Sunday, July 14, 2013

Inline Style

Text Fields

Saturday, July 13, 2013

Unordered Lists

Example:

Thursday, July 11, 2013

Example:

<img src="image/yourphotoname.jpg" alt="This is my photo">

Wednesday, July 10, 2013

HTML Elements

Empty HTML Element

Tuesday, July 9, 2013

Monday, July 8, 2013

What is HTML?