1 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
HTML မိတ္ဆက္
ယေန႕အခါမွာ Internet ဟာအလြန္က်ယ္ျပန္႕လာျပီး လူတိုင္းနီးပါးအသံုးျပဳၾကေပသည္။
ကၽြန္ေတာ္တို႕ေတြဟာလည္း Internet ေပၚမွာ ကိုယ္ပိုင္ေနရာမ်ားကို
ကိုယ္ပိုင္ Homepage မ်ားကို အလြယ္တကူ
ယူေဆာင္ႏိုင္ေလျပီ။ Internet ဆိုတာကို အက်ယ္ရွင္းမေနေတာ့ပါဘူး။
အလြယ္ရွင္းရရင္ေတာ့ Internet ဆိုတာ
ကမာၻ ေပၚရိွ ႏိုင္ငံအခ်င္းခ်င္း ခ်ိတ္ဆက္ထားေသာ Network
ကြန္ယက္ၾကီးတစ္ခုျဖစ္ပါသည္။ အဲဒီလို Information
ေတြ ဖလွယ္ဖို႕အတြက္ Web Page ေတြကို ေရးဆြဲရပါတယ္။ Web Page
ေရးဆြဲဖို႕ရာအတြက္ HTML ဟာ အဓိက
က်ပါတယ္။ ေရးသားထားတ့ ဲ Web Page ေတြကို Web Browser Software နဲ႕
ၾကည့္ရႈရပါတယ္။ Web Broswer
Software ေတြက Internet Explorer နဲ႕ Firefox တို႕က နာမည္ၾကီးေတြပါ။
HTML History
1989 ခုက Tim Berners-Lee နဲ႕ Rober Calliau ဟာ Research Documents
ေတြကို ပိုမိုျမန္ဆန္ေကာင္းမြန္ မယ့္
နည္းလမ္းကို ရွာေဖြခ့ပဲ ါတယ္။ ၂ ႏွစ္ ေလာက္ၾကာေတာ့ Berners-Lee ဟာ
browser ေတြက ၾကည့္ရႈဖတ္သားႏိုင္ျပီး
Tag မ်ားႏွင့္ ဖြဲ႕စည္းတည္ေဆာက္ထားတ့ ဲ နည္းပညာတစ္ခုကို ျပဳလုပ္ႏိုင္ခ့ပဲ
ါတယ္။ ထို႕ေနာက္အဲဒီ tage ေတြထဲမွာ
Hyper-Link နဲ႕ document အခ်င္းခ်င္းခ်ိတ္ဆက္ႏိုင္တ့ ဲ tag
ေတြပါထည့္သြင္းႏိုင္ခ့ပဲ ါသည္။ Berners-Lee ရဲ႕
နည္းပညာကို Hyber Text Markup Language ဆိုတ့ ဲ HTML ပါပဲ။
Tag ဆိုတာဘာလဲ
Tag ဆိုတာကေတာ့ ရိုးရိုး Text ေတြနဲ႕ HTML code ေတြကို
ခြဲျခားလို႕ရေအာင္လုပ္ထားတာပါ။
ဘယ္လိုမ်ဳိးလဲဆိုရင္ေတာ့ <b>This is bold </b> ဆိုရင္ web browser နဲ႕
ၾကည့္ရင္ စာလံုးဟာ bold
ျဖစ္ေနပါလိမ့္မယ္။ အဲဒီမွာ <b> နဲ႕ </b> တို႕ဟာ tag ေတြပါ။ အမ်ားအားျဖင့္
tag ေတြဟာ အဖြင့္ နဲ႕ အပိတ္ပါ
ပါတယ္။ အပိတ္ဆိုရင္ / ေလးခံထားေပးရပါတယ္။
HTML အတြက္ Editor
HTML အတြက္ Editor ေတြ IDE ေတြအမ်ားၾကီးရိွပါတယ္။ ကၽြန္ေတာ္ကေတာ့
Dreamweaver အၾကိဳက္ဆံုးပါပဲ။
သူက HTML မတတ္ရင္ေတာင္ Website တစ္ခုဆြဲလို႕ရပါတယ္။ ဒါေပမယ့္ Dreamweaver
ကိုသံုးရင္ေတာ့ HTML
code ေတြသိလာမွာ မဟုတ္သလို တျခား website ေတြကို
ျပင္ရတာလည္းခက္ပါလိမ့္မယ္။ ကၽြန္ေတာ္တို႕ေတြ
သူမ်ားေတြေပးထားတ့ ဲ website template ကိုျပင္ခ်င္တယ္။
ကိုယ္ပိုင္ေသေသခ်ာခ်ာ HTML code
ေတြကိုသိခ်င္တယ္။ ဒါဆိုရင္ေတာ့ ေလ့လာကာစမွာ Notepad သံုးျပီးေလ့လာပါ။
ေလ့က်င့္ပါ။ HTML က web site
2 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ဆြဲရတ့ ဲ အထမဲ ွာ အလြယ္ဆုံးနဲ႕ အေျခခံအက်ဆုံးပဲ။
သူ႕ကိုေသေသခ်ာခ်ာနားလည္ထားမွ တျခား web
programming ေတြျဖစ္တ့ ဲ PHP, ASP.NET , JSP , Ruy On Rail တို႕မွာ
အေထာက္အကူျဖစ္မွာပါ။
HTML ကိုေလ့လာမယ္
1.Starting To Creat and Edit Webpage
Notepad ျဖင့္စတင္ျခင္း
၁. Windows Key + R ကို ႏိွပ္လိုက္ပါ။ Run Dailog Box တက္လာပါမည္။
ထို႕ေနာက္ notepad လုိ႕ရိုက္လိုက္ပါ။
ျပီးလွ်င္ OK ကို ႏိွပ္လိုက္ပါ။ ဒါဆိုရင္ notepad တက္လာပါလိမ့္မယ္။
၂. Notepad ထဲတြင္ Format ေအာက္က word warp ကို check လုပ္ထားပါ ။
ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ Word
Warp က Notepad မွာစာရိုက္တာ ျပည့္သြားရင္ ေအာက္တစ္ေၾကာင္း
ဆင္းသြားရန္အတြက္ ျဖစ္သည္။
HTML စတင္ေရးသားျခင္း
၁. Notepad ထဲတြင္ အခုလိုေရးသားလိုက္ပါ။
3 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<html>
<head>
<title>This is title</title>
</head>
<body>
This is body
</body>
</html>
HTML နဲ႕ စျပီး HTML နဲ႕ျပန္ပိတ္ရပါတယ္။ အဲဒီၾကားမွာ html code
ေတြေရးရပါတယ္။ Head Tag နဲ႕ Head Tag အပိတ္ၾကားတြင္ Title
ထည့္ထားသည္ကို ေတြ႕ရမည္။ Title သည္ Browser ၏ ထိပ္ bar တြင္
ေတြ႕ျမင္ရန္ျဖစ္သည္။ Body အဖြင့္ နဲ႕ အပိတ္ၾကားမွာ မိမိ၏ ႏွစ္သက္ရာ
စာမ်ားေရးသားႏိုင္သည္ ။
၂. အဲဒါကို တေနရာ မွာ save သြင္းလိုက္ပါ။ Save Dialog box
တက္လာရင္ filetype ကို All file လို႕ေပးလိုက္ပါ။ file name ကို
firstrun.html လို႕ေပးလိုက္ပါ။ firstrun သည္
မိမိ၏ ႏွစ္သက္ရာ နာမည္ေပးႏိုင္သည္။ .html သည္ file extension ျဖစ္သည္။
HTML ေရးထားေသာ page မ်ားကို
.html ႏွင့္ .htm လို႕ေပးမွသာ browser တြင္ ေပၚပါလိမ့္မည္။
၃. Save သြင္းလိုက္ေသာ file လမ္းေၾကာင္းကို သြားလိုက္ပါ ။ first.html file
ေလးကို double click လုပ္ျပီး ဖြင့္လိုက္ပါ ။
ဒါဆို page ေလးတစ္ခုတက္လာတာကို ျမင္ရပါမယ္။
4 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ထိပ္ပိုင္းတြင္ File ပတ္လမ္းေၾကာင္းကို address bar
တြင္ေတြ႕ရမည္ျဖစ္သည္။ title tag ထဲတြင္ ေရးထားေသာ This is tile
ဆိုေသာ စာကို Windos ၏ Title bar ႏွင့္ Tab Title bar တို႕တြင္
ေတြ႕ရမည္။ Body tag ထဲတြင္ ေရးထားေသာ This is body ဆိုေသာ
စာသားကို စာမ်က္ႏွာအျဖဴေပၚတြင္ ေပၚေနသည္ကို ေတြ႕ရမည္ျဖစ္သည္။
ျပင္မယ္ဆိုရင္ေတာ့
IE7 မွာဆိုရင္
Page > View Source ကိုႏိွပ္လိုက္ပါက Notepad န႕ဲ ကိုယ္ေရးထားတ့ ဲ HTML
ပြင့္လာပါမယ္။
IE 6 မွာဆိုရင္
View > Source ကို ႏိွပ္လိုက္ပါက Notepad နဲ႕ ကိုယ္ေရးထားတ့ ဲ HTML ပြင့္လာပါမယ္။
အဲဒီမွာ ေရးထားတ့ ဲ codeေတြကို ဖတ္ႏိုင္သလို ကိုယ့္စက္ထဲမွာေရးထားတ့ ဲ
page ဆိုရင္ေတာ့ ျပင္ျပီး တစ္ခါတည္း
save လုပ္ႏိုင္ပါတယ္။ Internet ေပၚက Web site ေတြကိုေတာ့ view > source
ကေနဖြင့္ျပင္ျပီး save
လုပ္လို႕မရပါဘူး။
Header Tag
5 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
notepad ထဲမွာ ဒီလိုရိုက္လိုက္ပါ
<html>
<head>
<title>Example Of Header</title>
</head>
<body>
<h1>This is Header</h1>
This is normal text
</body>
</html>
အဲဒီ code ေလးကို notepad ထဲမွာထည့္ေရး.. ျပီးေတာ့ run ၾကည့္လိုက္ပါ။
အခုလိုျမင္ရပါလိမ့္မယ္။ Head Tag က
h1 ကေန h6 အထိ ရိွပါတယ္။ နံပါတ္ၾကီးေလေလ ေသးသြားေလေလပဲ။ h6
ဆိုအေသးဆံုးကို ေရာက္သြားျပီ။ ကဲ
လက္ေတြ႕ စမ္းၾကည့္ရေအာင္။ notepad ထဲမွာ ေအာက္ကလို ရိုက္ျပီး save
လုပ္လိုက္။ ျပီးရင္ ဖြင့္ၾကည့္လိုက္ရင္
ေတြ႕ရပါလိမ့္မယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
6 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
</html>
အခုဆို html အေၾကာင္းနည္းနည္း နားလည္လာေလာက္ပါျပီ။ တကယ္တန္းေတာ့
မခက္ပါဘူး။ ဒါကအစပ ဲ
ရိွပါေသးတယ္။ ဒီေလာက္ေလးန႕ဲ ပင္ စာေတြပဲပါတ့ ဲ page တစ္ခုေရးလို႕ရေနျပီ။
ဒါေပမယ့္ လိုအပ္တာေတ ြ
ရိွေသးတာေပါ့။ အခုဆက္ျပီး bold ၊ italic ၊ underline လုပ္ပံုေလးေတြ
ဆက္ေျပာပါမယ္။ လြယ္ပါတယ္။
Line Break
HTML မွာ စာတစ္ေၾကာင္းဆင္းခ်င္ရင္ေတာ့ <br/> ကိုသံုးပါတယ္။ သူ႕မွာ close tag
မပါဘူး။ <br/> ပဲေရးေရး <br> ပဲေရးေရးရပါတယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
First Line<br/>Second Line<br>Third Line
</body>
</html>
7 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Bold, Italic , Underline Tag
bold မို႕လို႕ ကၽြန္ေတာ္တို႕ေတြ <b> ကိုသံုးပါမယ္။ ေနာက္ျပီး italic
မို႕လို႕ <i> ေပါ့။ ဒါဆိုရင္ Underline
ကဘာလဲဆိုရင္ သိျပီးသားေလာက္ပါ။ ကၽြန္ေတာ္တို႕ေတြ <u> ကိုသံုးပါမယ္။
အဲဒါကို notepad ထဲမွာ ဒီလိုေရးျပီး
run လိုက္ရင္ရပါတယ္။
<html>
<body>
<b>This is bold</b> <br/>
<i>This is italic</i> <br/>
<u>This is underline</u> <br/>
</body>
</html>
Bold လုပ္မယ္။ ေနာက္ျပီး အဲဒါကို underline သားမယ္။ ဒါမွ မဟုတ္ italic
လုပ္မယ္။ အဲလိုမ်ဳိးလုပ္ခ်င္တယ္။
ရပါတယ္။ tag ေတြထဲမွာ tag ေတြထည့္လိုက္ေပါ့။ ဒီလိုထည့္လို႕ရပါတယ္။
<i><b>This is bold italic </b></i>
<u><i><b>This is bold italic </b></i></u>
အဲလိုမ်ဳိးေရးလို႕ရပါတယ္။ တခ်ဳိ႕လူေတြက ေမးတတ္တယ္။
<i> နဲ႕စမွ ရမွာလား။ ဒီလိုတိုင္း အစဥ္တိုင္းေရးမွ ရမွာလား။ ေနာက္ျပီး
<b><i></b></i> အဲလိုမ်ဳိးေတြေကာ
ပိတ္လို႕မရဘူးလား။
ဘာနဲ႕ စစရပါတယ္။ အစဥ္တိုင္းမဟုတ္ပဲ <b><i> This is bold italic </i></b>
လို႕ေရးလည္းျဖစ္ပါတယ္။
ေနာက္ျပီး tag အဖြင့္ေတြ အပိတ္ေတြက ၾကိဳက္သလိုျဖစ္ေနလို႕ရပါတယ္။ ဒါေပမယ့္
structure က်က်ေလး။
ပံုစံက်က်ေလး ျဖစ္ေနရင္ေကာင္းတာေပါ့။ ေနာက္မို႕ဆို code ကိုျပန္ဖတ္ရခက္တာေပါ့။
Pre Tag
8 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကၽြန္ေတာ္တို႕ေတြ စာတစ္ေၾကာင္းဆင္းရမွာ မၾကိဳက္ဘူး။ Enter
ေခါက္လိုက္ရံုနဲ႕တင္ တစ္ေၾကာင္းဆင္းခ်င္တယ္။
အလြယ္ဆံုး နည္းလမ္းကေတာ့ dream weaver သံုးလိုက္ျခင္းပဲ။ အဲဒါဆိုရင္ေတာ့ HTML
နားလည္မွာမဟုတ္ေတာ့ဘူး။ ေနာက္တစ္နည္းကေတာ့ <pre> ပါ။ ဒါေပမယ့္ သူက font
ပံုစံေျပာင္းသြားတယ္။
အဲဒါက ကိစၥ မရိွပါဘူး။ ေနာက္ပိုင္း font ေတြဘယ္လိုေျပာင္းရလဲ
ဆိုတာသိလာရင္ လာျပင္လုိက္လို႕ရပါတယ္။
ေနာက္ျပီး <pre> မွာ သူက tab ေခါက္ထားတာေတြ အစသိပါတယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<pre>Pre Tag, Now Enter
Now Tab Tab
</pre>
</body>
</html>
Paragraph Tag
ကၽြန္ေတာ္တို႕ေတြ စာေတြကို paragraph ပံုစံေရးခ်င္တယ္။ စာပိုဒ္ေတြနဲ႕
ေရးမယ္ေပါ့။ ဒါဆိုရင္ <p>
ကိုသံုးလို႕ရပါတယ္။ သူက အပိတ္ tag မပါလည္းရပါတယ္။ ထည့္ရင္ေတာ့ ပိုေကာင္းတာေပါ့။
<html>
<head>
<title>Example</title>
</head>
<body>
9 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly
used to view or edit
text files. A text file is a file type typically identified by the
.txt file name extension.</p>
<b> How do I change the font style and size?</b>
<p>Changes to the font style and size affect all the text in the document.<br/>
Click the Format menu, and then click Font.<br/>
Make your selections in the Font, Font style, and Size boxes.<br/>
An example of how your font will look appears under Sample.<br/>
When you are finished making font selections, click OK.<br></p>
</body>
</html>
Horizonal Line
ကၽြန္ေတာ္တို႕ေတြ horizonal မ်ဥ္းသားခ်င္တ့ ဲ အခါမွာ သုံးလို႕ရပါတယ္။
သုံးပုံသုံးနည္းကေတာ့ <hr> ပါပဲ။ close
tag မပါပါဘူး။
<html>
<head>
<title>Example</title>
</head>
<body>
10 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly
used to view or edit
text files. A text file is a file type typically identified by the
.txt file name extension. </p>
<hr>
<h1> How do I change the font style and size?</h1>
<p>Changes to the font style and size affect all the text in the document.<br/>
Click the Format menu, and then click Font.<br/>
Make your selections in the Font, Font style, and Size boxes.<br/>
An example of how your font will look appears under Sample.<br/>
When you are finished making font selections, click OK.<br></p>
</body>
</html>
အထက္ပါ code ကို run လိုက္ရင္ ဒီလိုျမင္ရမယ္။ အဲမွာ <hr> ထည့္ထားတ့ေဲ
နရာက line ေလးတားထားတာကို
ျမင္ရပါလိမ့္မယ္။
Attribue
11 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကၽြန္ေတာ္တို႕ေတြဟာ tag ေတြမွာလည္း attribute ေတြထည့္ျပီး
သံုးႏိုင္ပါတယ္။ attribute ဆိုတာကေတာ့ အဲဒီ
tag ပိုင္ဆိုင္တ့ ဲ properties ေပါ့။ tag တိုင္းမွာေတာ့ attribute
မရိွပါဘူး။ အခု ဦးစြာ အရင္ဆုံး body မွာပါတဲ့ color
attribute အေၾကာင္းေလးနဲ႕ စလိုက္ရေအာင္။
Body Color
<html>
<head>
<title>Example</title>
</head>
<body bgcolor=silver>
Body BGCOLOR
</body>
</html>
အဲဒီ code ေလးကို run လုိက္ရင္ေတာ့ အရင္ကလို background color က
အျဖဴေရာင္မဟုတ္ေတာ့ပဲ
စိမ္းႏုေရာင္ေလးျဖစ္ေနတာကို ေတြ႕ရပါမယ္။
ေအာက္က Table မွာ အသုံးမ်ားတ့ ဲ color 16 ေရာင္နာမည္ေတပြ ါ။
Silver
Gray
Maroon
Green
Navy
Purple
Olive
Teal
White
Black
Red
Lime
Blue
Magenta
Yellow
Cyan
ကၽြန္ေတာ္တို႕ေတြဟာ color ေတြကို code အေနနဲ႕လည္း အသံုးျပဳႏိုင္ပါတယ္။
သံုးရမွာကေတာ့ RGB color ပါ။
Hex code number ကိုအသံုးျပဳရပါတယ္။ #FF0000 ဆိုရင္ေတာ့အနီေရာင္ပါ။
ေရွ႕ဆံုး ၂ လံုးက အနီေရာင္ျဖစ္ျပီး
အလယ္ ၂ လံုးက အစိမ္းေရာင္ပါ။ ေနာက္ဆံုး ၂လံုးကေတာ့ အျပာေရာင္ေပါ့။ အဲဒီ
အေရာင္ ၃ေရာင္ကို စပ္ျပီး
သုံးရပါတယ္။ တကယ္လို႕ color ေတြကို မသိဘူးဆိုရင္ photoshop ကေနလည္း
ၾကိဳက္ႏွစ္သက္တ့ ဲ အေရာင္ကို
12 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ယူျပီးသံုးႏိုင္ပါတယ္။ ဘယ္လိုယူရမလဲဆိုရင္ေတာ့ အရင္ဆံုး photoshop
ကိုဖြင့္လိုက္။ ဘယ္ဘက္ ေအာက္နားမွာ
color ေရြးဖို႕ေလးပါတယ္။
အဲဒါေလးကို double click လုပ္လိုက္ပါ။ color dialog box တက္လာပါမယ္။
ျပီးရင္ ႏွစ္သက္ရာ အေရာင္ေရြးပါ။
color အေရာင္ေရြးျပီးရင္ ေအာက္နားမွာ hex code ေလးကို copy
ကူးလိုက္ရံုပါပဲ။ ကၽြန္ေတာ္တို႕ေတြ color
အေနနဲ႕သံုးခ်င္ရင္ # ေလးကို ေရွ႕မွာ ခံျပီးသံုးလိုက္ရံုပါပဲ။
<html>
<head>
<title>Example</title>
</head>
<body bgcolor=#e5bb2c>
Body BGCOLOR Hex code
</body>
</html>
13 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အခုဆိုရင္ေတာ့ attribute ပိုင္း နဲ႕ color ပိုင္းေလးကို
နည္းနည္းပါးပါးသိေလာက္ျပီလို႕ထင္ပါတယ္။ attribute
ထည့္လို႕ရတ့ ဲ tag ေတကြ လည္း အမ်ားၾကီးရိွပါေသးတယ္။ ျဖည္းျဖည္းျခင္း
ေျပာျပသြားမယ္။ အခု ေနာက္ထပ ္ tag
တစ္ခုျဖစ္တ့ ဲ <hr> ရဲ႕ attribute အေၾကာင္းေလးေျပာပါမယ္။
Hr Attribute
ကၽြန္ေတာ္တို႕ေတြဟာ tag တစ္ခုရဲ႕ေနာက္မွာ attribute တစ္ခုထက္မက
လိုက္လို႕ရပါတယ္။ tag ေတြေနာက္မွာ
attribute တစ္ခုထက္မကပါတာေတြကို ေနာက္ပိုင္းမွာေတြ႕ရပါလိမ့္မယ္။ အခုေတာ့
hr အေၾကာင္းေလး
ဆက္ရေအာင္။
<html>
<head>
<title>Example</title>
</head>
<body bgcolor=#e0e0e0>
Default HR
<hr>
Hr with size=1
<hr size=1>
Hr with size=5
<hr size=5>
14 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Hr with size=10
<hr size=10>
Hr with size=10 and noshade
<hr size=10 noshade>
Hr with size=5 and color
<hr size=5 color=#D60000>
</body>
</html>
အဲမွာ size ကေတာ့ အရြယ္အစားပါ။ noshade ဆိုတာကေတာ့ shade မပါတ့ဟဲ ာကို
ေျပာတာပါ။ ေျဗာင္ၾကီးေပါ့။
color ကေတာ့ မိမိၾကိဳက္ႏွစ္သက္တ့အဲ ေရာင္ထည့္လို႕ရပါတယ္။
List
List ပိုင္းမွာ order list နဲ႕ unorder list ဆိုျပီးရိွပါတယ္။
တနည္းအားျဖင့္ နံပါတ္စဥ္နဲ႕ list နဲ႕ နံပါတ္စဥ္ေတြမပါတ့ ဲ
list ေပါ့။
ေနာက္ျပီး defination list ဆိုတာရိွပါေသးတယ္။ လူသံုးနည္းပါတယ္။ ပထမဆံုး
unorder list
အေၾကာင္းေလးသြားရေအာင္။
Unorder list
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Unorder List</h3>
<ul>
<li>First Item</li>
<li>Second Item</li>
15 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<li>Third Item</li>
</ul>
</body>
</html>
<ul> က unorder list ပါ။ <li> ကေတာ့ list ေပါ့။ list ၁ ခုပဲဆိုရင္
<li>1</li>။ ၂ခုဆိုရင္ <li>1</li>
<li>2</li> လို႕ေရးပါတယ္။ အေပၚက code ကို run လုိက္ရင္ list ေလးေတြကို
ျမင္ရမွာပါ။ အကုန္လံုးက
အဝိုင္းေလးေတြနဲ႕ List ပါပဲ။ ကဲ အခု attribute ေလးထည့္ျပီး
ပံုစံေျပာင္းၾကည့္ရေအာင္။
<html>
<body>
<h3>Unorder List</h3>
<h5>Disc</h5>
<ul type="disc">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<h5>Square</h5>
<ul type="square">
<li>First Item</li>
<li>Second Item</li>
16 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<li>Third Item</li>
</ul>
<h5>Circle</h5>
<ul type="circle">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
unorder list မွာ disc, square, circle ဆိုျပီး ၃
မ်ဳိးေျပာင္းလို႕ရပါတယ္။ default ကေတာ့ disc ပါ။
Ordered List
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Ordered List</h3>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
17 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</body>
</html>
<ol> ကေတာ့ order list ပါ။ အဲဒီ code ေလးကို run လိုက္ရင္ နံပါတ္
အစဥ္လိုက္ေပၚလာပါလိမ့္မယ္။ သူ႕မွာလည္း
attribute ေတြရိွပါတယ္။
<html>
<head>
<title>Example</title>
</head>
18 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<body>
<h3>Ordered List</h3>
<ol type="1">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type A</h5>
<ol type="A">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type a</h5>
<ol type="a">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type a</h5>
<ol type="I">
<li>First Item</li>
19 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type i</h5>
<ol type="i">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
Order List တြင္လည္း Unorder List က့သဲ ို႕ပင္ type မ်ားရိွပါတယ္။
အဲဒါေတြကို အေပၚက code မွာ ေဖာ္ျပထားပါတယ္။ order list က unorder
list နဲကမတူတ့ ဲ အခ်က္ကေတာ့ နံပါတ္စဥ္လိုက္ျဖစ္ပါတယ္။ မိမိၾကိဳက္တ့ ဲ
နံပါတ္ကေန စႏိုင္တယ္။ မိမိၾကိဳက္တ့ ဲ နံပါတ္ကစႏိုင္ဖို႕ start ဆိုတ့ ဲ attribute
ကိုသံုးႏိုင္ပါတယ္။
<ol type="A" start=4> မွာဆိုရင္ေတာ့ D ကေနစမွာပါ။ ဒါဆိုရင္ေတာ့
HTML န႕ဲ list ေတြပါတ့ ဲ web page ေလးေရးလို႕ရျပီေပါ့။ ေနာက္ထပ္ list
တစ္ခုက်န္ပါေသးတယ္။ definition list ပါ။
Definition List
အမ်ားအားျဖင့္ အဓိပၸာယ္ဖြင့္ဆိုခ်က္ေတြမွာ သံုးပါတယ္။
<html>
<head><title>Example</title></head>
<body>
20 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<h3>Definition List</h3>
<dl>
<dt>HTML
<dd>Language used to develop Web Pages
<dt>Image
<dd>Any graphic such as an icon,bullet, line, photo , or illustration
</dl>
</body>
</html>
Defination List က အျခား List ေတြနဲ႕ မတူပါဘူး။ သူ႕မွာက defination term
နဲ႕ defination ပါ ပါတယ္။
စရင္ေတာ့ dl နဲက စရပါတယ္။ defination term ကိုေတာ့ <dt> အသံုးျပဳျပီး
defination ကိုေတာ့ <dd>
သံုးပါတယ္။ သူက အျခား list နဲ႕မတူတ့ ဲ ေနာက္တစ္ခ်က္ကေတာ့ tag အပိတ္မပါတာပဲ။ </dl>
တစ္ခုပဲပါတယ္ဆိုတာကို ေတြ႕ႏိုင္ပါတယ္။
ကဲ... အခုဆိုရင္ေတာ့ HTML ကိုအၾကမ္းအားျဖင့္ေလာက္ေတာ့ သိေလာက္ျပီေပါ့။
အခုကၽြန္ေတာ္တို႕ေတြ
ေနာက္ထပ္ ေသေသခ်ာခ်ာ သိရေအာင္ ေနာက္ထပ္ တစ္ခန္းသြားရေအာင္။
21 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
2.Creating Web Page With Apperance And Link
ကၽြန္ေတာ္တို႕ေတြ အစပိုင္းမွာ bold,italic,underline တို႕ကို
သိခ့ျဲပီးပါျပီ။ အခု ဒီအခန္းမွာေတာ့ အရင္ဆုံး font
အေၾကာင္းေလး စေျပာပါမယ္။ ကၽြန္ေတာ္တို႕ေတြ font ေတြေျပာင္းမယ္။ font size
ေတြေျပာင္းမယ္။ စာလံုးေတြမွာ
color ေတြထည့္မယ္။ အဲဒါေတြကို အျပင္ page တစ္ခုနဲ႕ တစ္ခု link
ခ်ိတ္တာေတြလည္း ပါဝင္မွာပါ။ အဲဒါေတြကို
မေျပာခင္မွာ <center> အေၾကာင္းေလးနဲ႕ စလိုက္ရေအာင္။
Optional Tag
Move To Center
သူက စာလံုးေတြကို center ေရာက္ေအာင္လုပ္ေပးပါတယ္။
<html>
<head><title>Example</title></head>
<body>
<center>
This is center
</center>
</body>
</html>
This is center ဆိုတာေလးက အလယ္ပိုင္းကိုေရာက္ေနတာကိုေတြ႕ရပါမယ္။
အဲဒါေလးကို သံုးျပီး စာေတြကို
အလယ္ပိုင္းကို ေရြ႕ထားလို႕ရပါတယ္။
<html>
<head><title>Example</title></head>
<body>
<h1 align="justify">Test</h1>
22 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</body>
</html>
အဲဒီ code မွာဆိုရင္ေတာ့ header ေတြက အလယ္ကိုေရာက္ေနတာကိုေတြ႕ရပါလိမ့္မယ္။
Marquee
marquee ကေတာ့ စာလံုးေတြကို ေရြ႕ေနဖို႕လုပ္ေဆာင္ေပးတာပါ။
<html>
<head><title>Example</title></head>
<body>
<marquee>I'm moving</marquee>
</body>
</html>
အဲဒီ code မွာဆိုရင္ စာသားေလးက ေရြ႕ေနတာကိုေတြ႕ရပါမယ္။ ဘယ္ဘက္ကေန
ညာဘက္ကိုေရြ႕လာတာပါ။
Marquee မွာရိွတ့ ဲ attribute ေတြကေတာ့
Attribute Name
Properties
Descripton
behavior
alternate
ဘယ္ကေနညာ ၊ ညာကေန ဘယ္ျပန္သြား ပါတယ္။
<marquee behavior="alternate">I'm moving</marquee>
scroll
သူက default value ပါ။ ဘယ္ကေန ညာ ၊ ညာဘက္ေရာက္သြားရင္ ဝင္သြားျပီး
ဘယ္ဘက္ေန ျပန္စတာပါ။
<marquee behavior="scroll">I'm moving</marquee>
slide
သူကေတာ့ ဘယ္ကေနညာ ျပီးရင္ညာဘက္လည္းေရာက္ေရာ ရပ္သြားပါတယ္။
<marquee behavior="slide">I'm moving</marquee>
direction left သူကေတာ့ default value ပါ။ ညာဘက္ကေန ဘယ္ဘက္ကိုသြားမယ္လို႕
23 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ဆိုတာပါ။
<marquee direction="left" >I'm moving</marquee>
right
သူကေတာ့ ဘယ္ဘက္ကေန ညာဘက္ကိုသြားမယ္လို႕ဆိုတာပါ။
<marquee direction="right" >I'm moving</marquee>
up
သူကေတာ့ ေအာက္ကေန အေပၚလာမယ္လို႕ဆိုတာပါ။
<marquee direction="up" >I'm moving</marquee>
down
သူကေတာ့ အေပၚကေန ေအာက္ဆင္းမယ္လို႕ဆိုတာပါ။
<marquee direction="down" >I'm moving</marquee>
loop
[number]
သူကေတာ့ ကိုယ္ဘယ္ႏွစ္ၾကိမ္ marquee ကို လုပ္ခိုင္းမယ္ဆိုျပီး number
တစ္လံုးထည့္ေပးရပါတယ္။ ၁ ဆို ၁ ၾကိမ္ပဲလုပ္မယ္ေပါ့။
<marquee loop="1" >I'm moving</marquee>
scrollamount
[number]
တစ္ခါေရြ႕ရင္ ဘယ္ေလာက္ pixel ေရႊ႕မလဲဆိုျပီး ထည့္ေပးရတာပါ။
ထည့္လိုက္တ့ ဲ နံပါတ္မ်ားေလေလ ေဝးေဝးေရြ႕ ျမန္ျမန္သြားေလေလပဲ။
<marquee scrollamount="10">I'm moving</marquee>
scrolldelay
[number]
သူကေတာ့ ဘယ္ေလာက္ၾကာရင္ ေရႊ႕မလဲဆိုတာပါ။ သူက millisecond နဲ႕ပါ။
1000 လို႕ထည့္လိုက္ရင္ 1 second ၾကာမွ တစ္ခါေရြ႕မွာပါ။ သူကေတာ့
နံပါတ္မ်ားေလေလ ၾကာေလေလပါပဲ။
<marquee scrolldelay="1000">I'm moving</marquee>
Bgcolor
[hex code] OR
[Color Name]
သူကေတာ့ marquee ရဲ႕ back color အေရာင္ေလးပါ။ #009933 ဆိုရင္ေတာ့
အစိမ္းေရာင္ေလးကို background ထားျပီး ေရႊ႕သြားမွာပါ။ color ပိုင္းကို
ကၽြန္ေတာ္ အေပၚပိုင္းမွာ ေျပာခ့ျဲပီးပါျပီ။
<marquee bgcolor="#009933" >I'm moving</marquee>
24 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
marquee ေလးလုပ္ရတာ ေပ်ာ္စရာေတာ့ေကာင္းပါတယ္။ စာလံုးေလးေတြက
ေရြ႕ေရြ႕သြားတာေလးကို ၾကည့္ျပီး
ေက်နပ္မႈေလးရႏိုင္ပါေစ။ အခု font ပိုင္းကို ဆက္လက္ေလ့လာရေအာင္။
Font
Font ကေတာ့ HTML မွာအေရးပါတ့ ဲ အပိုင္းပါ။ Web Page တစ္ခုမွာ
ကိုယ္လိုခ်င္တ့ ဲ font ကိုေျပာင္းလဲဖို႕အတြက္
font tag ကိုသိမွ ျဖစ္မွာပါ။။
<html>
<head><title>Example</title></head>
<body>
<font face="Zawgyi-one">Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font>
</body>
</html>
အဲဒါဆိုရင္ <font> နဲ႕ </font> ၾကားမွာရိုက္ထားတ့ ဲ စာက zawgyi-one font
နဲ႕ေပၚေနမွာပါ။ face="font name"
ကိုထည့္ရတာပါ။
font tag မွာသုံးလို႕ရတ့ ဲ attribute ေတြကေတာ့
Name Properties Description
color [hex code] OR
[color name]
color ကေတာ့ သိျပီးသားပါ။ အေပၚမွာလည္း ကၽြန္ေတာ္ ေျပာခ့ဘဲ ူးပါတယ္။
ဥပမာအေနနဲ႕ ဒီလိုသံုးလို႕ရပါတယ္
<font face="Zawgyi-one" color="#006699">Zawgyi Font
ျဖင့္အသံုးျပဳထားသည္</font>
size [number] သူကေတာ့ font ရဲ႕ အရြယ္အစားေျပာင္းတာပါ။ ပံုမွန္က size=3
ပါ။ စာလံုး size
ၾကီးလိုလွ်င္ size=4 ကေန 7 ထိထည့္လို႕ရပါတယ္။ 1 ကေန 7 အထိရိွပါတယ္။ 3
ကေတာ့ ပံုမွန္စာလံုးပါ။ ေနာက္ျပီး +1 ကေန +6 ရိွပါတယ္။ ပံုမွန္ကို
ဘယ္ေလာက္တိုးမယ္ဆိုပါ။ +2 ဆိုရင္ ပံုမွန္က 3 ဆိုေတာ့ 5 ျဖစ္သြားမွာေပါ့။
အဲလိုမ်ဳိးပဲ
-1 ကေန -6 ထိရိွပါေသးတယ္။ -1 ဆိုရင္ ပံုမွန္က 3 ဆိုေတာ့ 2 ျဖစ္သြားမွာေပါ့။
ဒီလိုေလး သံုးလို႕ရပါတယ္။
25 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<font face="Zawgyi-one" size="5">Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font>
<font face="Zawgyi-one" size="+2">Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font>
<font face="Zawgyi-one" size="-2">Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font>
ဒါေတြကေတာ့ အျခား text formatting tags ေတြပါ။ အခ်ဳိ႕ကေတာ့
အေပၚမွာေျပာခ့ဘဲ ူးပါတယ္။
Tag Description
<b></b> ဒါကိုေတာ့ အေပၚမွာလည္း ေျပာျပီးပါျပီ။ သူက font ကို blod လုပ္တာပါ။
<big></big> သူကလည္း bold လုပ္တာပါပဲ။
<blockquote></blockquote> ဒါကေတာ့ tab ခုန္တာေပါ့။ ကိုယ့္စာပိုဒ္ေလးကို
တစ္တည္းတစ္သနု္႕ထ ဲ ေဖာ္ျပခ်င္တ့ ဲ
အခါမွာ သံုးၾကပါတယ္။
<i></i> italic လုပ္တာကို အေပၚမွာေျပာခ့ဘဲ ူးပါတယ္။
<pre></pre> ဒီ code ကိုလည္း သိမွာပါ။ ကၽြန္ေတာ္တို႕ေတြ enter ေတြ tab ေတြမလိုပဲ
သုံးခ့တဲ ာေလ။
<small></small> သူကေတာ့ စာလံုးကို ပံုမွန္ထက္ ေသးေအာင္ လုပ္ေပးတာပါ။
<strike></strike> အဲဒါေလးကေတာ့ စာလံုးေတြရဲ႕ အလယ္မွာ မ်ဥ္းသားလိုက္တာပါ။
<sub></sub> သူကေတာ့ စာလံုးကို ေအာက္နားဆင္းတာေလးေပါ့။ H2 လိုမ်ဳိးေလးအတြက္ေပါ့။
<sup></sup> သူကေတာ့ စာလံုးကို အေပၚတင္တာပါ။ 22 လိုမ်ဳိးေပါ့။
<tt></tt> ဒါက typing font ကိုေျပာတာပါ။ typing ရိုက္သလို စာလံုးေပၚေအာင္အတြက္ပါ။
<u></u> ဒါကိုေတာ့သိျပီးေလာက္ျပီလို႕ထင္ပါတယ္။ underline တားတာပါ။
26 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အခုဆက္ျပီးေတာ့ Link ေတြအေၾကာင္းေျပာပါမယ္။ Link ကေတာ့ Web Page မွာအဓိက
အခန္းက ပါဝင္ပါတယ္။
Page တစ္ခုနဲ႕ တစ္ခု ခ်ိတ္ဆက္ထားဖို႕ အတြက္ Link ခ်ိတ္တတ္ဖို႕လိုပါတယ္။
Page Link And Image Link
Page Link လုပ္တယ္ဆိုတာကေတာ့ page တစ္ခုကေန ေနာက္ page တစ္ခုကို
ခ်ိတ္ဆက္ထားပါတယ္။ ေအာက္က
example ပံုေလးကို ၾကည့္လိုက္ရင္ နားလည္ႏိုင္ပါတယ္။
ကၽြန္ေတာ္တို႕ေတြ Home Page ကေန Gallery Page က ို Go To Home ဆိုတ့ ဲ
စာလုံးေလး ႏိွပ္လိုက္တာနဲ႕
ကူးသြားမယ္။ ေနာက္ျပီး Gallery ကေနလည္း Home Page ကို Home ဆိုတ့ ဲ
စာလုံးေလးကို ႏိွပ္လိုက္တာနဲ႕ Home
page ကို ျပန္ေရာက္သြားမယ္။ အဲဒီလိုမ်ဳိးေလး ျဖစ္ေအာင္ ကၽြန္ေတာ္တို႕
ေအာက္ကအတိုင္း ေရးလိုက္မယ္။ File ၂
ခုရိွရမယ္ေပါ့။ index.html နဲ႕ gallery.html ေပါ့။ ေနရာအတူတူပဲ
သိမ္းထားေနာ္။ C:\example\index.html နဲ႕
C:\example\gallery.html အဲလိုမ်ဳိးေလး ေနရာအတူတူျဖစ္ရမယ္။
Index.html
<html>
<head><title>Example</title>
<body>
<!-- Link To Gallery Page -->
27 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<a href="gallery.html">Gallery</a>
</body>
</html>
Gallery.html
<html>
<head><title>Example</title>
<body>
<!-- Link To Home Page -->
<a href="index.html">Home</a>
</body>
</html>
အေပၚက code ကိုမရွင္းျပခင္ ေမးခ်င္တာေလးေတ ြ ပါလာမယ္ထင္တယ္။ <!-- --> က
ဘာၾကီးလဲဆိုျပီးေတာ့။
ေနာက္ျပီးေတာ့ home page ကို home.html နဲ႕ သိမ္းလို႕ေကာ မရဘူးလား။
ဘာလို႕ index.html နဲ႕သိမ္းတာလဲ။
ဘာေတြကြာလဲ။
<!-- comment --> အဲဒါက comment ေရးထားတာပါ။ <!-- နဲ႕ --> ၾကားမွာ
ေရးထားတ့ ဲ စာေတြကို
အလုပ္မလုပ္ပါဘူး။ ကၽြန္ေတာ္တို႕ home page ကို ဘာလို႕ index.html နဲ႕
သိမ္းရလဲဆို web page ေတြမွာ
စတက္တ့ ဲ page က index.html ပါ။ ဒါမွ မဟုတ္ default.html ေပါ့။
www.example.com လို႕ေခၚလိုက္ရင္ page
တစ္ခုတက္လာမယ္။ တကယ္တမ္းေတာ့ www.example.com/index.html ဆိုတာကို သြားေခၚထားတာပါ။
အေနာက္က index.html မပါလည္း အလုပ္လုပ္ပါတယ္။ ဒါေၾကာင့္ Home Page
ဆိုရင္ေတာ့ index.html
ဆိုျပီးသံုးရပါတယ္။ ဒါမွမဟုတ္ default.html ဆိုလည္းရပါတယ္။
ကဲ.. Link အေၾကာင္းလည္း ဆက္သြားရေအာင္။ link ခ်ိတ္ခ်င္ရင္ <a
href="address">Name</a>
ဆိုတ့ပဲ ုံစံမ်ဳိးနဲ႕ သြားရတာေပါ့။ address ဆိုတာကေတာ့ ကိုယ္ခ်ိတ္ခ်င္တ့
ဲ page ေပါ့။ Name ကေတာ့ ေပၚေစခ်င္တ့ ဲ
နာမည္ေပါ့။ ထပ္ေမးစရာေလး တစ္ခုထပ္ေပၚလာတာကို ေတြ႕ရပါလိမ့္မယ္။ Link က
အစကေတာ့ အျပာေရာင္။
ေနာက္ေတာ့ နီညိဳေရာင္ ေျပာင္းသြားတယ္။ ဘာျဖစ္လို႕လည္း ။ အဲဒါကေတာ့
vistied ျဖစ္ျပီးသြားလို႕ပါ။ တစ္ခါ click
လုပ္ျပီးရင္ အဲလိုအေရာင္ ေျပာင္းသြားပါတယ္။ ကိုယ္ႏိွပ္ျပီးသားေပါ့။
အေရာင္မေျပာင္းခ်င္ရင္ေတာ့ body မွာ vlink
ဆိုတ့ ဲ attribute နဲ႕ link ဆိုတ့ ဲ attribute မွာ အေရာင္
ျပင္လို႕ရပါတယ္။ <body vlink="green" link="green">
အဲဒါဆိုရင္ေတာ့ link color က အစိမ္းေရာင္ျဖစ္ေနတာကို ေတြ႕ရမွာပါ။ link
လုပ္ရင္ လူတိုင္းေမးတတ္တ့ ဲ
28 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ေမးခြန္းတစ္ခုရိွပါတယ္။ file ေတြကို download ခ်ေစခ်င္တယ္။
ဘယ္လိုေရးရမလဲ။ တကယ္တမ္းေတာ့
လြယ္ပါတယ္။ link address ကို file ကိုေပးလိုက္ရံုပဲေပါ့။
<a href="file.zip>Download</a> အဲလိုမ်ဳိးပံုစံေလးေပါ့။ ကဲ.. Link
အေၾကာင္းေရာက္ရင္ေတာ့ path
လမ္းေၾကာင္းေလး ေကာင္းေကာင္းသိဖို႕လိုတယ္။ ေတာ္ေတာ္မ်ားမ်ားက မသိဘူး။
ရႈပ္တယ္လို႕ထင္ၾကတယ္။
တကယ္တမ္းအဲလို မရႈပ္ပါဘူး။
Path For Link
Path <a href=" ေအာက္က path link">Path</a> ရွင္းလင္းခ်က္
./file.html OR file.html ေနရာတစ္ခုထဲမွာ အတူတူ သိမ္းရင္
အဲလိုေခၚလို႕ရပါတယ္။ C:\example\index.html
ကေန C:\example\gallery.html ကိုေခၚရင္ေပ့ါ။ ./
ကေတာ့ directory တူတူပဲလို႕ ဆိုတာပါ။
./download/download.html OR download/download.html ဒါကေတာ့ ကိုယ့္
folder ေအာက္က folder ကို
ထပ္ေခၚတာပါ။
../file.html သူကတာ့ မတူေတာ့ဘူး။ folder ကို up လုပ္ျပီး
ေခၚတာပါ။ ဘယ္လိုမ်ဳိးလဲဆိုရင္ေတာ့
C:\example\download\index.html ကေန
C:\example\gallery.html ကိုေခၚတာေပါ့။ download
ဆိုတ့ ဲ folder အေပၚတဆင့္က file ကိုေခၚတာေပါ့။
ႏွစ္ဆင့္ ေခၚခ်င္ရင္ေတာ့ ../../file.html ေပါ့။ ../
ဆိုတာက folder directory ကို up လုပ္လိုက္တာပါ။
http://www.mysteryzillion.com ဒါကေတာ့တျခား website တစ္ခုကို လွမ္းေခၚတာပါ။
./download/file.zip OR download/file.zip download ခ်ဖို႕အတြက္ file ေတြ
image file
ေတြကိုလည္း တိုက္ရိုက္ေခၚလို႕ရပါတယ္။ image
ပိုင္းေတြကို ကၽြန္ေတာ္ ေနာက္ပိုင္း
ဆက္လက္ရွင္းျပပါအံုးမယ္။
ဒီပတ္လမ္းေၾကာင္းေတြ အေၾကာင္းေကာင္းေကာင္းသိဖို႕လိုပါတယ္။
ဘာျဖစ္လို႕လည္းဆို ကိုယ့္ site က
ၾကီးလာတာနဲ႕ အမွ site structure က ရႈပ္ေထြးလာမွာပါ။ Link ေတြလည္း
မ်ားလာမွာျဖစ္လို႕ပါ။ ဒါေၾကာင့္
ေသေသခ်ာခ်ာ သိထားသင့္ပါတယ္။
29 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကဲ.. အခု ကၽြန္ေတာ္တို႕ေတြ page မွာ ပုံေလးေတ ြ ထည့္ရေအာင္။
Image
ပုံေတြကေတာ့ web page တစ္ခုမွာ မျဖစ္မေနပါဝင္ရပါတယ္။ ကိုယ္တည္ေဆာက္တ့ ဲ
page ကို လွပျပီး
အဓိပၸာယ္ျပည့္စံုဖို႕ အတြက္ပါ။ ကဲ... ပံုေလးေတြ ထည့္ၾကည့္ရေအာင္။
<html>
<head>
<title>Example</title>
</head>
<body>
<img src="Apple-logo.jpg"> Apple Logo</body>
</html>
တကယ္လို႕ ပုံမျမင္ရပဲ ၾကက္ေျခခတ္ ( ) ပဲျမင္ရရင္တာ့ ထည့္ထားတ့ ဲ image
ပတ္လမ္းေၾကာင္းမွားတာျဖစ္ႏိုင္သလို image extension မွားတာလည္း
ျဖစ္ႏိုင္တယ္။ image ထည့္လို႕ရတဲ့
extension ေတြကေတာ့ jpg gif png ေတြပဲ။ image က size ၾကီးက ၾကီးေနတယ္။
ေသးခ်င္တယ္။ ျဖစ္ပါတယ္။
<html>
<head>
<title>Example</title>
</head>
30 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<body>
<img src="Apple-logo.jpg" width=80px height=80px> Apple Logo</body>
</html>
width နဲ႕ height ဆိုတ့ ဲ attribute က ပုံရဲ႕ size ကို
ထိန္းခ်ဳပ္ေပးပါတယ္။ ကိုယ္ၾကိဳက္တ့ ဲ အလ်ားကို width
မွာထည့္ျပီး အျမင့္ကိုေတာ့ height မွာထည့္ျပီး ပံုရဲ႕ size ကိုျပင္လို႕ရတယ္။
<img src="Apple-logo.jpg" width=80px height=80px alt="Apple Logo"> Apple Logo
ဆိုရင္ေတာ့ alt ဆိုတ့အဲ ထဲမွာေရးထားတ့ ဲ စာသားကို ပုံေပၚ Mouse
ေလးသြားတင္လိုက္ျပီး ခဏၾကာမွာ
ေပၚလာမွာပါ။ ကၽြန္ေတာ္တို႕ကေတာ့ tool tip လို႕ေခၚတာပါ။
Image ပိုင္းမွာ ေျပာစရာေတြ ေတာ္ေတာ္မ်ားပါတယ္။ သူ႕မွာ attribute
ေတြထပ္ရိွေသးတယ္။ ဘာလည္းဆိုေတာ့
text align ေပါ့။ text align ကို img code ထဲမွာ align ဆိုတ့ ဲ attribute
ကိုသုံးတယ္။
Align ရွင္းျပခ်က္
top စာတစ္ေၾကာင္းကို ပံုရဲ႕ ေဘးနားက align မွာ အေပၚဆံုးမွာ ေဖာ္ျပေပးတာပါ။
bottom သူကေတာ့ default ပါ။ စာသားကို ပံုေအာက္ဘက္မွာ ေဖာ္ျပတာကိုေတြ႕ရပါမယ္။
middle စာသားကို ပံုအလယ္မွာ မွာေပးတာပါ။
left သူကေတာ့ ပံုကို page ရဲ႕ ဘယ္ဘက္ကိုပို႕လိုက္ျပီး စာသားအကုန္လံုးကို
ပံုေဘးမွာ ေဖာ္ျပေပးတာပါ။
right သူကလည္း Left နဲ႕ အတူတူပါပဲ။ ညာဘက္ကို ပံုေရြ႕သြားျပီ
စာသားအားလံုးကို ပံုရဲ႕ ဘယ္ဘက္မွာ
ေဖာ္ျပေပးပါမယ္။
31 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ပံု : img top
ပံု : img bottom
ပံု : img middle
ပံု : img left
ပံု : img right
အခုဆိုရင္ image နဲ႕ပတ္သက္ျပီး ေတာ္ေတာ္ေလးသိေလာက္ျပီ ထင္တယ္။
ေနာက္ထပ္တစ္ခု ထပ္ေျပာအံုးမယ္။
ပံုေသးေသးေလးကို ႏိွပ္လိုက္မွ ပံုအၾကီးၾကီးေျပာင္းသြားသလိုမ်ဳိးေလးေပါ့။
ပံု size ကို width နဲ႕ height attribute နဲ႕
ခ်ဳံတာမဟုတ္ဘူးေနာ္။ ပံုႏွစ္ပံု။ တစ္ပံုက အၾကီး ၊ ေနာက္တစ္ပံုက အေသးေပ့ါ။
Photo ေတြကို size ေသးတာကို
32 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ျပထားျပီး ပံုကို click လုပ္လိုက္မွ size ၾကီးတ့ ဲ ပုံကို ျပ တ့ပဲ ုံပါ။
အဲလိုဘာလို႕ လုပ္ရလဲဆို ပုံၾကီးရင္ page
တက္တာၾကာပါတယ္။ ဒါေၾကာင့္ ပံုေသးကို အရင္ျပတယ္။ click လုပ္လိုက္မွ
ပံုၾကီးျဖစ္သြားမယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="fullsize.jpg"> <!-- Full size when click -->
<!-- img src is small size -->
<img src="smallsize.jpg" width=80px height=80px border=0>
</a>
</body>
</html>
အေပၚက code ကို ဖတ္လိုက္တာနဲ႕ နားလည္မယ္ထင္ပါတယ္။ အဲမွာ
ေမးစရာတစ္ခုထြက္လာတယ္။ border
ဆိုတာဘာလဲေပါ့။ ကၽြန္ေတာ္တို႕ href ကို သုံးလိုက္တ့ ဲ အခါ image မွာ
အျပာေရာင္ border ျဖစ္သြားတယ္။
အဓိပၸာယ္ကေတာ့ Link ရိွတယ္ေပါ့။ အဲဒါေလးကို မေပၚခ်င္လို႕ ေဖ်ာက္လိုက္တာပါ။
ပံု : border မေဖ်ာက္ထားေသာ နဲ႕ image ပံု : border ေဖ်ာက္ထားေသာ ပံု
အခုဆိုရင္ေတာ့ ကၽြန္ေတာ္တို႕ေတြ link ေတြ လုပ္တတ္သြားျပီ။ page တစ္ခုကေန
တစ္ခုကို ေခၚတတ္သြားျပီ။ ပံုေတြ
ထည့္တတ္သြားျပီ။ အခုအခန္းမွာ ကၽြန္ေတာ္က sample ေသးေသးေလးေတြပဲ
ျပသြားတယ္။ ကိုယ္တိုင္ စမ္းၾကည့္ပါ။
ေပ်ာ္ဖို႕ တကယ္ေကာင္းပါတယ္။ ကိုယ့္ ပံုေလးေတြ နဲ႕ web page ေလး
စမ္းေဆာက္လို႕ေတာ့ရျပီ။ ဒါေပမယ့္
ျပည့္ျပည့္စံုစံုျဖစ္ေအာင္ ေဆာက္လို႕မရေသးတာကို ေတြ႕မွာပါ။ ကၽြန္ေတာ္တို႕
table လိုအပ္ေနေသးတာပါ။
ေနာက္တစ္ခန္းမွာ table နဲ႕ frame ေတြအေၾကာင္း ေျပာျပပါမယ္။
Table And Frame
33 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Table ဟာ web page တည္ေဆာက္ရာမွာ အေရးပါပါတယ္။ စတင္ေလ့လာသူေတြအတြက္ေတာ့ table ကသာ
web page frame ကို ပံုစံက်ေအာင္ လုပ္ေပးႏိုင္တာပါ။ တကယ္လို႕ ကိုယ္က
professional ျဖစ္သြားျပီ ၊ stylesheet
ေတြ တတ္သြားျပီဆိုရင္ေတာ့ div နဲ႕ CSS ကို တြဲျပီးေတာ့ ကိုယ့္ page
ကိုလွျပေအာင္ လုပ္ႏိုင္တာေပါ့။ အခုေတာ့
HTML အေၾကာင္းပဲ ေျပာေနေသးတယ္ ၊ ေနာက္ျပီး CSS အေၾကာင္းေတ ြ Advance
ျဖစ္တ့အဲ ေၾကာင္းေတြ
မပါေသးဘူး။ table သံုးျပီးလည္း သူမ်ား web page ေတြလို လွမလာပါလားလို႕
ေမးခ်င္ရင္ ေမးလာႏိုင္လို႕
အခုလိုေျဖထားတာပါ။ ကဲ table အေၾကာင္းေလးစရေအာင္။
Table ဆိုတာ
Table တစ္ခုကိုတည္ေဆာက္ရာမွာ အေျခခံအားျဖင့္ roll နဲ႕ column ပါဝင္ပါတယ္။
ေနာက္ျပီး cell ကြက္ေလးေတြ
နဲ႕ တည္ေဆာက္ထားပါတယ္။ Table တစ္ခုဟာ ကၽြန္ေတာ္ အေပၚမွာ ေျပာခ့သဲ လို
HTML တစ္ခုတည္းနဲ႕ web site
တစ္ခု တည္ေဆာက္ရာမွာ ေတာ္ေတာ္ေလးအသံုးဝင္ပါတယ္။ ေနာက္ျပီး Gallery Page
ေတြ တည္ေဆာက္ရာမွာ
အရမ္းအသံုးဝင္တယ္။ Page တစ္ခုလံုး Layout ကို CSS ကိုသာအသံုးျပဳတတ္မယ္ဆို
Table ထက္စာရင္ CSS ကို
အသံုးျပဳသင့္တယ္။ CSS ဆိုတာ ဘာလဲဆိုေတာ့ Cascading Style Sheets ပါ။
ဒီစာအုပ္မွာေတာ့ CSS
အေၾကာင္းပါဝင္မွာ မဟုတ္ပါဘူး။ ဒီစာအုပ္ဟာ Web Page ကိုစေလ့လာခါစ
အေျခခံအက်ဆုံးျဖစ္တ့ ဲ HTML
အေၾကာင္းကိုသာ ေျပာသြားတာပါ။ HTML ကိုေသေသခ်ာခ်ာနားလည္သြားရင္ CSS န႕ဲ
တသဲြ ုံတ့အဲ ခါမွာေတာ့ ကိုယ့္
site ေလးဟာ ေသသပ္လွပလာမွာပါ။ အခုေတာ့ HTML အေၾကာင္းေလးပဲ ဆက္လိုက္ရေအာင္။
34 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အေပၚပံုကို ၾကည့္လိုက္ပါ။ အကြက္တစ္ခုလံုးအျပည့္ဟာ table ပါ။ ေနာက္ျပီး
စာေရးထားတ့ ဲ အကြက္ေတြဟာ cell
ေတြေပါ့။ cell ကြက္ေတြထဲမွာပဲ စာေရးတာပါ။ ကဲ.. ပိုျပီး နားလည္သြားေအာင္
code ေလးေတြနဲ႕စလိုက္ရေအာင္။
<head>
<title>Example Table</title>
</head>
<body>
<table>
<tr> <!-- Row-->
<td> <!-- Column -->
Row
</td>
35 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<td>
Row
</td>
</tr>
</table>
</body>
</html>
Table တစ္ခုစတင္ျပီဆိုရင္ေတာ့
၁။ <table>နဲ႕ စျပီး </table> နဲ႕ပိတ္ရမွာပါ။
၂။ ကိုယ္ထည့္ခ်င္တ့ ဲ Row အေရအတြက္ ရိွသေလာက္ကို <tr></tr>
ကိုသုံးရမွာပါ။ ကိုယ္က row ၂
ခုလိုခ်င္တယ္ဆိုပါစို႕။ဒါဆိုရင္ <tr></tr><tr></tr> ဆိုျပီး ႏွစ္ခုသံုးရမွာေပါ့။
၃။ကိုယ္ထည့္ခ်င္တ့ ဲ column အေရအတြက္ ရိွသေလာက္ကို <td></td>
ကိုသုံးရမွာပါ။ <td></td> ကို <tr> နဲ႕
</tr> ၾကားမွာ ထည့္ျပီးသံုးရမွာပါ။ ကၽြန္ေတာ္တို႕ column ၂ ခုဆိုရင္
<tr><td></td><td></tr> ဒါဆိုရင္
column ၂ ခုေပါ့။
ကဲ... ကၽြန္ေတာ္တို႕ေတြ row ၂ ခု column ၃ ခုလုပ္မယ္ေပါ့။
row ၂ ခုျဖစ္တ့အဲ တြက္ေၾကာင့္ <tr> </tr> ၂ ခုသုံးရမယ္။ column ၃
ခုျဖစ္လို႕ <td></td> ကို ၃ ခုသုံးမယ္။
ပထမ row မွာ ၃ခုဆို အျခား row ေတြမွာလည္း ၃ခုျဖစ္မွ table ေပၚလာမွာပါ။
<table>
<tr> <!-- First Row -->
<td> <!-- First Column -->
1
</td>
<td>
36 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
2
</td>
<td>
3
</td>
</tr>
<tr> <!-- Second Row -->
<td> <!-- Second Column -->
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</table>
အဲဒီ Example ကို ၾကည့္လိုက္ရင္ နားလည္ႏိုင္မလားမသိဘူး။ ကၽြန္ေတာ္တို႕ေတြ
row ၂ ခုနဲ႕ column ၃ ခု ရိွတ့ ဲ
table တစ္ခုတည္ေဆာက္ခ့တဲ ာပါ။ table ပိုင္းကို ရႈပ္တယ္လို႕
ထင္ခ်င္ထင္ေနပါလိမ့္မယ္။ ဟုတ္ပါတယ္။ ရႈပ္ပါတယ္။
ဒါေပမယ့္ နားလည္သြားရင္ လြယ္ျပီး သံုးလို႕ေကာင္းပါတယ္။ ကၽြန္ေတာ္တို႕ေတြ
table ပိုင္းကို ေသေသခ်ာခ်ာေလး
ေလ့လာဖို႕လိုပါလိမ့္မယ္။ ကဲ... ေနာက္ထပ္ example တစ္ခု
ထပ္လုပ္ၾကည့္ရေအာင္ ။ အခု ကၽြန္ေတာ္တို႕ေတြ row
၃ ခု column ၃ ခု ရိွတ့ ဲ table တစ္ခုကို ေဆာက္ၾကည့္ရေအာင္။
row ၃ခု ျဖစ္လို႕ <tr></tr> ၃ခုပါမယ္။ column ၃ ခုျဖစ္လို႕ <tr>နဲ႕ </tr>
ၾကားမွာ <td></td> ၃ ခုပါမယ္။
အဲလိုေလး စဥ္းစားလို႕ရသြားျပီဆိုရင္ စျပီး code ေရးၾကည့္ရေအာင္။
37 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<html>
<head><title>Example</title></head>
<body>
<table>
<tr><!-- First Row -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><!--Second Row -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr><!-- Third Row -->
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
38 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကဲ... အခုေလာက္ဆို နားလည္ေလာက္ျပီထင္တယ္။ ကၽြန္ေတာ္တို႕ ေရွ႕ဆက္ရေအာင္။
ကၽြန္ေတာ္တို႕ေတြဟာ table ရဲ႕ width ကို ထိန္းခ်ဳပ္ႏိုင္ပါတယ္။ table ရဲ႕ width ကို
သတ္မွတ္တ့အဲ ခါမွာ % နဲ႕သတ္မွတ္တာနဲ႕ pixel န႕ဲ သတ္မွတ္တာရယ္ရိွပါတယ္။
table ရဲ႕ width သာမက <td> ရဲ႕ width ေတြကိုပါသတ္မွတ္ႏိုင္ပါတယ္။ % နဲ႕
သတ္မွတ္တာနဲ႕ Pixel နဲ႕
သတ္မွတ္တာ ဘာကြာသလဲဆိုရင္ေတာ့ % ကေတာ့ broswer ရဲ႕ အေပၚမွာ မူတည္ျပီး
width ကေျပာင္းလဲပါတယ္။
pixel ကေတာ့ မေျပာင္းလဲဘူးေပါ့။ အေသေပါ့။ % နဲ႕ဆိုရင္ broswer
ခ်ဲ႕လိုက္တာနဲ႕ လုိက္က်ယ္သြားပါတယ္။
pixel နဲ႕ဆိုရင္ေတာ့ browser က်ယ္လည္း လိုက္မက်ယ္သြားပါဘူး။ ကဲ.. စလိုက္ရေအာင္။
<html>
<head><title>Example</title></head>
<body>
<table width="100%">
<tr><!-- First Row -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><!--Second Row -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr><!-- Third Row -->
<td>6</td>
<td>7</td>
<td>8</td>
39 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</tr>
</table>
</body>
</html>
အဲဒီမွာဆိုရင္ width က 100% ျဖစ္တ့အဲ တြက္ေၾကာင့္ browser အျပည့္ table ကယူပါမယ္။
အဲဒီက အေပၚဆံုး first row ကိုဒီလိုျပင္ၾကည့္လိုက္ပါ။
<table width="100%">
<tr><!-- First Row -->
<td width="30px">1</td>
<td>2</td>
<td>3</td>
</tr>
ဒါဆိုရင္ေတာ့ ပထမ column ရဲ႕ width ကို 30px လို႕သတ္မွတ္လိုက္ပါျပီ။ ပထမ
row မွာသတ္မွတ္လုိက္ရင္ တျခား
row ေတြရဲ႕ ပထမ column ကိုပါသတ္မွတ္ျပီးသား ျဖစ္သြားပါလိမ့္မယ္။
ကၽြန္ေတာ္တို႕ေတြဟာ px သာမက % နဲ႕ပါ
သတ္မွတ္ႏိုင္ပါတယ္။ column ၃ ခုလံုးကို သတ္မွတ္ခ်င္ရင္ေတာ့ ဒီလိုေရးလို႕ပါတယ္။
<table width="100%">
<tr><!-- First Row -->
<td width="45%">1</td>
<td width="20%">2</td>
<td width="35%">3</td>
40 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</tr>
အဲဒီမွာဆိုရင္ေတာ့ column ရဲ႕ width ကို % နဲ႕သတ္မွတ္ေပးမွာပါ။ အဲဒီမွာ
တတိယ colum ကို width
မထည့္လည္း သူ႕ဘာသာ ခ်ိန္ညိွေပးႏိုင္ပါတယ္။ ကဲ... table နဲ႕ time table
ေလးဆြဲၾကည့္ရေအာင္။
<html>
<head><title>Example</title></head>
<body>
<table width="100%">
<tr><!-- First Row -->
<td>Date</td>
<td>Time</td>
<td>Subject</td>
</tr>
<tr><!--Second Row -->
<td>Oct 07</td>
<td>1:00 PM - 3:00 PM</td>
<td>Hardware</td>
</tr>
<tr><!-- Third Row -->
<td>Oct 08</td>
<td>1:00 PM - 3:00 PM</td>
<td>Software Install</td>
</tr>
<tr>
<td>Oct 08</td>
41 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<td>1:00 PM - 3:00 PM</td>
<td>Windows Install</td>
</tr>
</table>
</body>
</html>
ကဲ.. အခုဆိုရင္ လက္ေတြ႕ အသံုးျပဳတတ္ေလာက္ျပီ ထင္တယ္။ ကၽြန္ေတာ္တို႕ေတြ
table မွာ border ေတြကို
ေပၚေစခ်င္ရင္ေတာ့ border ဆိုတ့ ဲ attribute ထည့္ရပါမယ္။
Border , Cellpadding, Cellspacing
<table width="100%" border="1"> ဆိုရင္ေတာ့ border လည္းေပၚလာပါလိမ့္မယ္။
အထူအပါးကေတာ့
ၾကီးေလေလ border ထူေလေလေပါ့။
border ကိုအေရာင္ထည့္ခ်င္ရင္ေတာ့
<table width="100%" border="1" bordercolordark="red" bordercolorlight="#FF3300">
bordercolordark ကေတာ့ အရိပ္ေပါ့။ bordercolorlight ကေတာ့
အေပၚအေရာင္ေပါ့။ ဒါမွမဟုတ္ bordercolor
ဆိုျပီးလည္း အသံုးျပဳႏိုင္ပါတယ္။
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
42 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
border က ႏွစ္ထပ္ျဖစ္ေနတာကို ေတြ႕ရပါလိမ့္မယ္။ အဲဒါက cell padding
ေၾကာင့္ပါ။ cell padding နဲ႕ cell
spacing ဆိုျပီး ႏွစ္မ်ဳိးရိွပါတယ္။
cellpadding ဆိုတာကေတာ့ table အတြင္း border နဲ႕ စာ ေနရာအကြာအေဝးပါ။
cellpadding မ်ားလာေလေလ
စာက အတြင္းကို ဝင္ေလေလျဖစ္မွာပါ။ အခု cellpadding ကို 30 ထားလိုက္တ့အဲ
ခါမွာ စာသားေတြနဲ႕ border
အရမ္းက်ဲသြားတာကို ေတြ႕ရပါလိမ့္မယ္။
<table width="100%" border="1" cellpadding="30" bordercolor="#0066CC" >
cellspacing ကေတာ့ cell တစ္ခုနဲ႕ တစ္ခုၾကား အကြာအေဝးေပါ့။ အခု border ဟာ
ႏွစ္ထပ္ျဖစ္ေနတာကိုေတြ႕ရပါလိမ့္မယ္။ အဲဒါကို တစ္ထပ္တည္း ျဖစ္ခ်င္ရင္ေတာ့
cellspacing ကို 0 ေပးလိုက္ရံုပါပဲ။
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
43 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကဲ... အခုဆိုရင္ေတာ့ နည္းနည္းေလး သိလာျပီထင္တယ္။ ဒီေလာက္ထိ
နားလည္ျပီဆိုရင္ ကၽြန္ေတာ္တို႕ေတြ cell
ေတြကို merge လုပ္တာေတြကို စလိုက္ရေအာင္။ နားမလည္ေသးရင္ေတာ့ ကိုယ္တိုင္ လက္ေတြ႕
စမ္းသပ္ၾကည့္ဖို႕လိုပါတယ္။ table ပိုင္းက ထင္သေလာက္ မရႈပ္ပါဘူး။
လက္ေတြ႕လုပ္လိုက္ရင္ နားလည္သြားမွာပါ။
Cell Merge
Cell Merge ပိုင္းကေတာ့ table ပိုင္းကို ေသခ်ာသိထားရင္
နားလည္လြယ္မယ္လို႕ထင္ပါတယ္။ Cell Merge ကေတာ့
Cell ႏွစ္ခု ဒါမွမဟုတ္ Cell ႏွစ္ခုထက္ ေပါင္းတာေပါ့။ Cell Merge ကို
ဒီလိုေပါင္းရမွာပါ။ table တစ္ခုကို စခ့တဲ ုန္းက
row ေတြကို <tr> နဲ႕ေရးရမွာပါ။ <tr> တစ္ခုမွာ <td> ၂ ခုပါရင္ ေနာက္ထပ္
<tr> မွာလည္း <td> ၂
ခုပါဝင္ရမွာပါ။ ဒါေပမယ့္ cell ေတြကို merge လုပ္လိုက္ရင္ အနည္းငယ္
ေျပာင္းလဲကုန္ပါတယ္။ အေပၚမွာ column
သံုးခု ။ ဒါေၾကာင့္ <td> ၃ ခုပါမယ္။ ဒါေပမယ့္ ေအာက္မွာက column ၃ ခုမွာ
ႏွစ္ခုကို ေပါင္းလိုက္တယ္။ ဒါဆိုရင္
cell က ၂ ခုပဲရိွေတာ့မယ္။ ဒါဆိုရင္ေတာ့ <td> ၂ ခုပဲပါေတာ့မယ္။ အဲဒါကေတာ့
column merge
လုပ္တ့အဲ ခါမွာေပါ့။ row ကလည္း အဲလိုပါပဲ။ အခုေတာ့ column merge လုပ္တ့ ဲ
code ေလးကို ၾကည့္လိုက္ပါအုံး။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
44 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td colspan="2">
Cell 1
</td>
<td>
Cell 3
</td>
</tr>
</table>
</body>
</html>
အေပၚက code မွာ <td colspan="2"> ဆိုတာကို ေတြ႕ႏိုင္မယ္ထင္ပါတယ္။
အဲဒါကေတာ့ Cell ၂ ခုေပါင္းမယ္
ဆိုတ့ ဲ အဓိပၸာယ္ပါ။ တကယ္လို႕ cell ၃ ခုေပါင္းခ်င္ရင္ေတာ့ <td
colspan="3"> ပါ။ ကၽြန္ေတာ္ အဲလိုမ်ဳိး code
ကိုေျပာင္းေရးလိုက္ရင္ ဒီလိုေတြ႕ရမွာပါ။
<html>
<head>
45 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td colspan="3">
Cell 1
</td>
</tr>
</table>
46 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</body>
</html>
ကၽြန္ေတာ္တို႕ေတြ column ကုိ ၃ ခုစလုံး ေပါင္းလိုက္တ့ ဲ အတြက္ စုစုေပါင္း
column ၁ ခုပဲရိွေတာ့တယ္။ ဒါေၾကာင့္
<td> တစ္ခုကို ပဲသံုးတာပါ။ ကဲ... ဆက္ျပီးေတာ့ example တစ္ခုေလာက္ ေဆာက္ၾကည့္ရေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">
List Of Adboe Software
</td>
</tr>
<tr>
<td>
Adobe Acrobat
</td>
<td>
47 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Adobe Dreamweaver
</td>
<td>
Adboe Flash
</td>
</tr>
<tr>
<td>
Adobe InDesign
</td>
<td>
Adobe Photoshop
</td>
<td>
Adboe Bridge
</td>
</tr>
</table>
</body>
</html>
48 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အဲဒီက code မွာဆိုရင္ေတာ့ List Of Adboe Sofware အတြက္ Column ၃
ခုလံုးကို merge လုပ္ထားတာကို
ေတြ႕မွာပါ။ Column ၃ ခုကို merge လုပ္လိုက္တ့အဲ တြက္ column ၁
ခုပဲရိွပါေတာ့တယ္။ ဒါေၾကာင့္ <td> တစ္ခုပ ဲ
လိုအပ္ပါေတာ့တယ္။ အခုေလာက္ဆိုရင္ေတာ့ Column Merge
ကိုသိေလာက္ျပီထင္ပါတယ္။ ဆက္ျပီး Row Merge
အေၾကာင္းေလး ေလ့လာရေအာင္။
Row ေတ ြ Merge လုပ္တ့အဲ ခါမွာလည္း column merge လုပ္သလိုပါပဲ။ အရင္ဆုံး
code ေလးစေရးလိုက္ရေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">
Cell Left
</td>
<td>
Cell 2
</td>
</tr>
<tr>
<td>
49 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Cell 3
</td>
</tr>
</table>
</body>
</html>
ပထမဆံုး Column မွာ <td rowspan="2"> ဆိုတာေလးရိွပါတယ္။ ပထမဆံုး Column
မွာ Row ၂ ခုကိုေပါင္းမယ္
ဆိုတ့ ဲ အဓိပၸာယ္ပါ။ အေပၚမွာ column ၂ ခုရိွေပမယ့္
ေနာက္ထပ္တစ္ဆင့္မွာေတာ့ Column ၁ ခုပဲရိွပါေတာ့မယ္။
ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ First Column မွာ သူ႕ေအာက္က First Column နဲ႕
ေပါင္းလိုက္ေတာ့ Column
တစ္ခုေပ်ာက္သြားတာေပါ့။ ထပ္ျပီးရွင္းေအာင္ ေနာက္ထပ္ example တစ္ခု ထပ္ျပပါမယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td>
Row1 , Cell1
</td>
<td>
50 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Row1 , Cell2
</td>
<td>
Row1 , Cell3
</td>
</tr>
<tr>
<td rowspan="2">
Left
</td>
<td>
Center
</td>
<td rowspan="2">
Right
</td>
</tr>
<tr>
<td> Cell 1</td>
</tr>
</table>
</body>
</html>
51 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ဒီ example မွာဆိုရင္ row span ကုိေကာင္းေကာင္းနားလည္မယ္ထင္ပါတယ္။ Left
နဲ႕ Right ဆိုျပီး row
ႏွစ္ခုေပါင္းလိုက္ေတာ့ ေအာက္ဆံုး row မွာ column တစ္ကြက္ပ ဲ က်န္ေတာ့တ့အဲ
တြက္ <td> တစ္ခုပ ဲ ေရးရတာပါ။
Appearnce
ကၽြန္ေတာ္တို႕ေတြဟာ Table ေတြမွာ background color
ေတြအသံုးျပဳႏိုင္ပါတယ္။ border အသံုးျပဳနည္းကိုေတာ့
အေပၚမွာ ေဖာ္ျပျပီးသြားပါျပီ။ အခု ကိုယ္လိုခ်င္တ့ ဲ cell မွာ background
အေရာင္ေလးေတ ြ ထည့္ရေအာင္။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td bgcolor="blue">
<font color="#FFFFFF">BLUE</font>
</td>
<td bgcolor="red">
Red
</td>
<td bgcolor="#EABCDF">
Hex Color
</td>
</tr>
52 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</table>
</body>
</html>
အဲဒီမွာဆိုရင္ bgcolor ကိုေတြ႕မွာပါ။ အဲဒါကေတာ့ background
အေရာင္ထည့္တာပါ။ ကၽြန္ေတာ္တို႕ေတြ
background အေရာင္ကိုထည့္လို႕ရေပမယ့္ စာလံုးအေရာင္ေတြ ထည့္လို႕မရပါဘူး။
ကၽြန္ေတာ္တို႕ေတြ
စာလံုးအေရာင္ထည့္ခ်င္ရင္ေတာ့ font color နဲ႕ထည့္သြင္းရပါတယ္။
တျခားအဆင္ေျပတ့နဲ ည္းကေတာ့ CSS
အသံုးျပဳလိုက္ျခင္းပါပဲ။ ဒီစာအုပ္ထဲမွာေတာ့ CSS
အေၾကာင္းပါဝင္ျခင္းမရိွေသးဘူး။ အခုဆိုရင္ေတာ့ bg color
ကိုနည္းနည္းနားလည္လာျပီထင္ပါတယ္။ တကယ္လို႕ ကၽြန္ေတာ္တို႕ေတြ row တစ္ခုလံုးကို
အေရာင္ထည့္ခ်င္ရင္ေတာ့ <tr> မွာ bgcolor ဆိုတ့ ဲ attribute သုံးရပါမယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td bgcolor="blue">
<font color="#FFFFFF">BLUE</font>
</td>
<td bgcolor="red">
53 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Red
</td>
<td bgcolor="#EABCDF">
Hex Color
</td>
</tr>
<tr bgcolor="#FF6699">
<td>
a
</td>
<td>
b
</td>
<td>
c
</td>
</tr>
</table>
</body>
</html>
54 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အဲဒီမွာဆိုရင္ေတာ့ <tr bgcolor="#FF6699"> ေၾကာင့္ row တစ္ခုလံုး
အေရာင္ေျပာင္းသြားတယ္ဆိုတာကို
ေတြ႕ႏိုင္မွာပါ။ အခုေလာက္ဆိုရင္ေတာ့ table အေၾကာင္းသိေလာက္ပါျပီ။ table က
HTML နဲ႕ေရးရတာ
ေတာ္ေတာ္လက္ဝင္ျပီး စိတ္ပ်က္ဖို႕ ေကာင္းပါတယ္။ Dreamweaver လိုမ်ဳိး
software သံုးလိုက္ရင္ေတာ့ table
တစ္ခုေဆာက္ရတာ အရမ္းလြယ္ပါတယ္။ table ကို merge လုပ္တာေတြကလည္း dreamweaver မွာ
အလြယ္တကူလုပ္ႏိုင္ပါတယ္။ ဒီစာအုပ္မွာ dreamweaver အေၾကာင္းေျပာတာ မဟုတ္ပဲ
HTML ကိုအေျခခံက
အစနားလည္ေအာင္ ေရးတတ္ေအာင္ ေျပာျပထားတာေၾကာင့္ အခုလိုမ်ဳိး
နည္းနည္းလက္ဝင္ေပမယ့္ နားလည္ေအာင္
ေလ့လာသင့္ပါတယ္။ အခုေတာ့ frame အေၾကာင္းေလးပ ဲ ဆက္ရေအာင္။
Frame
Frame ကေတာ့ HTML Page ႏွစ္ခု ထက္မက တာေတြကို စာမ်က္ႏွာ တစ္ခုထ ဲ မွာ
ေဖာ္ျပျခင္တ့ ဲ အခါေပါ့။
ဘယ္လိုမ်ဳိးလဲ ဆိုေတာ့
အဲဒီမွာ ဆိုရင္ Frame ၃ ခုနဲ႕ Page တစ္ခုကို ဖြဲ႕စည္း တည္ေဆာက္ထားတာပါ။
အခုေနာက္ပိုင္းမွာ Frame
ကိုအသုံးနည္းသြားပါျပီ။ AJAX ဆိုတ့ ဲ နည္းပညာကို ေျပာင္းသုံးၾကပါတယ္။
အရင္တုန္းကေတာ့ Frame
ကိုအသုံးမ်ားခ့ပဲ ါတယ္။ ဘာလို႕အသုံးျပဳရသလဲဆိုရင္ေတာ့ အေပၚက
ပုံမွာၾကည့္လိုက္ပါ။ ဘယ္ဘက္က menu
ျဖစ္ျပီး ညာဘက္ကေတာ့ menu က ႏိွပ္လိုက္ရင္ ေပၚလာမယ့္ page ေပါ့။ အေပၚဆံုးကေတာ့ Name
ကိုေရးထားတာပါ။ အဲ.. အခု frame အေၾကာင္း စလိုက္ေအာင္။
Frame1.html
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
55 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
This is frame 1
</body>
</html>
Frame2.html
<html>
<head>
<title>Untitled Document</title>
</head>
This is frame 2
</html>
index.html
<html >
<head>
<title>Untitled Document</title>
</head>
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="frame1.html" name="leftFrame" scrolling="No"
noresize="noresize" id="leftFrame" />
<frame src="frame2.html" name="mainFrame" id="mainFrame" />
</frameset>
56 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<noframes><body>
</body>
</noframes></html>
frame တစ္ခုကို တည္ေဆာက္ျပီရင္ေတာ့ အနည္းဆံုး file ၃ ခုလိုပါတယ္။
index.html ကေတာ့ Frame1 နဲ႕
Frame2 ကိုခ်ိတ္ဆက္ေဖာ္ျပေပးမွာျဖစ္ျပီး frame1 နဲ႕ frame2 ကေတာ့ အဓိကေပါ့။
index.html ကို ၾကည့္လိုက္ပါ။ ထူးျခားတာ တစ္ခုပါ ပါတယ္။ အဲဒါကေတာ့ <body>
မပါျခင္းပဲ။ frame ရဲ႕ Main
Page ဟာ Body ထည့္စရာမလိုပါဘူး။ frameset ပဲ ထည့္ရမွာပါ။ HTML မွာ frame
သံုးရတာ လက္ဝင္လွပါတယ္။
အေကာင္းဆံုးကေတာ့ IDE ေတြထဲက Dreamweaver ကိုအသံုးျပဳလိုက္ရင္ေတာ့
လြယ္လင့္တကူ frame
ကိုေရးသားႏိုင္မွာပါ။ အခုေတာ့ သိေအာင္ ကိုယ္တိုင္ပဲ ေရးၾကည့္ရတာေပါ့။
<frameset> နဲ႕ စျပီး </frameset> နဲ႕ ေရးရပါမယ္။cols ဆိုတာကေတာ့ column
အေရအတြက္ေပါ့။ အခု
column ၂ ခုပဲပါတ့အဲ တြက္ cols="80,*" လို႕ေရးလိုက္ပါတယ္။ အဲဒီ အဓိပၸာယ္က
ေရွ႕က column အက်ယ္ကို 80
px ယူမယ္ ေနာက္ကေတာ့ က်န္တာ အကုန္ယူဆိုတ့ ဲ အဓိပၸာယ္ပါ။ ကၽြန္ေတာ္တို႕
percentage နဲ႕လည္း
အသံုးျပဳလို႕ရပါတယ္။ cols="50%,*" လို႕ေျပာင္းေရးလိုက္ရင္ေတာ့ ေရွ႕က 50%
ျဖစ္ျပီး ေနာက္က frame
ကလည္း က်န္တ့ ဲ 50% ေပါ့။ frameborder="no" ဆိုတာကေတာ့ frame မွာ boder
မပါဘူးဆိုတ့ ဲ အဓိပၸာယ္ပါ။
border="0" framespacing="0" အဲဒါကေတာ့ border အထူက 0 ျဖစ္ျပီး frame
တစ္ခုနဲ႕ တစ္ခုၾကားက spacing
က 0 လို႕ေျပာတာပါ။ အခု column ၂ ခုမဟုတ္လား။ ဒီေတာ့ ကၽြန္ေတာ္တို႕ေတြ
<frame> ႏွစ္ခု ထည့္ရမယ္။
ဒါေၾကာင့္
<frame src="frame1.html" name="leftFrame" scrolling="No" noresize="noresize" />
<frame src="frame2.html" name="mainFrame" id="mainFrame" />
အဲလိုမ်ဳိးေရးလိုက္တာ။ အဲမွာ src ဆိုတာကေတာ့ frame ရဲ႕ Link ေပါ့။
ကၽြန္ေတာ္တို႕ေတြ file ၃ ခုလံုးကို
တစ္ေနရာတည္းမွာထည့္ထားတယ္။ ဒါေၾကာင့္ တိုက္ရိုက္ လွမ္းေခၚလိုက္ရံုပဲ။
Name ကေတာ့ နာမည္ပါ။
မထည့္လည္းရပါတယ္.. scrolling ဆိုတာကေတာ့ ေဘးနားက scrollbar ေပၚမေပၚေပါ့။
ေပၚေစခ်င္ရင္ Yes ေပါ့။
noresize ကေတာ့ frame ကို resize လုပ္လို႕မရေအာင္ လုပ္ထားတာပါ။ ဒါဆို
frame ကို resize လုပ္ခ်င္ရင္ေတာ့
အဲဒါကို မထည့္နဲ႕ေပါ့။ အခု column ၃ ခု နဲ႕လုပ္ၾကည့္ရေအာင္။
57 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
index.html
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset cols="20%,30%,*">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes>Your Browser Don't Support Frame</noframes></html>
ေမးစရာ တစ္ခုေပၚလာျပီ။ ဘာလဲဆိုရင္ေတာ့ <noframes> ။ အဲဒါက ဘာလဲဆိုရင္ေတာ့
ဟိုးအရင္က browser
ေတြက frame ေတြကို support မလုပ္ပါဘူး။ ဒါေၾကာင့္ frame ေတြကို support
မလုပ္တ့ ဲ browser ေတြျဖစ္ေနရင္
Message ေလးေဖာ္ျပေပးပါမယ္။ အခုေနာက္ပို္င္း browser ေတြက support
လုပ္ပါတယ္။ ကဲ.. အခု code ေလးကို
နည္းနည္းေလး ေျပာင္းၾကည့္လိုက္ရေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
58 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<frameset rows="20%,30%,*">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
ဘာေျပာင္းသြားသလဲဆိုေတာ့ frameser ပါ။ cols ကေန rows
ျဖစ္သြားပါတယ္။ cols နဲ႕ rows ေလးပဲ ကြာတာပါ။ က်န္တာ
အတူတူပါပဲ။ frame အထဲမွာလည္း ထပ္ျပီး
ထပ္မံခြဲထုတ္လို႕ရပါေသးတယ္။ အခု အေပၚဆံုးက rows ကို
column ထပ္ျပီး ခြဲပါမယ္။
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows="20%,30%,*">
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame1.html" />
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
59 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
အဲဒီမွာ <frameset> ေအာက္မွာ <frameset> ထပ္ထည့္ထားတာကို ေတြ႕ရမွာပါ။
<frameset rows="20%,30%,*">
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame1.html" />
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
ကၽြန္ေတာ္တို႕ အေပၚဆံုးက rows ကို ထပ္ျပီး cols ခြဲတာပါ။ ဒါေၾကာင့္
အေပၚဆံုး rows မွာ columns
ႏွစ္ခုျဖစ္သြားပါျပီ။ ဒါေၾကာင့္ <frame> ႏွစ္ခု ေရးရတာပါ။ တကယ္လို႕ ဒုတိယ
rows မွာပဲ colums
ထပ္ထည့္ခ်င္ရင္ေတာ့ code က ဒီလိုေလးျဖစ္သြားမွာပါ။
60 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows="20%,30%,*">
<frame src="frame1.html" />
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame2.html" />
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
61 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ရွင္းရွင္းေလးပါ။ ဒုတိယ rows မွာ ျဖစ္ေစခ်င္လို႕ ဒုတိယ rows မွာ frameset
တစ္ခုထပ္ထည့္ရတာပါ။ အဲလိုမ်ဳိးပဲ
columns ေတြထဲမွာ rows ေတြ ခြဲလို႕ရပါတယ္။ အတူတူပါပဲ။ အေပၚက rows ေနရာမွာ
cols ေျပာင္းျပီးေတာ့ cols
ေနရာမွာ rows ေျပာင္းလိုက္ရင္ သိမွာပါ။ ကၽြန္ေတာ္ မေရးျပေတာ့ဘူး။
ကိုယ္တိုင္ပဲ ေရးျပီး စမ္းၾကည့္လိုက္ေပါ့။
အခု ဒီစာအုပ္ရဲ႕ ေနာက္ဆံုးအခန္းက ေနာက္ဆံုး အေၾကာင္းပါပဲ။ ဘာလဲဆိုရင္ေတာ့
Link And Frame ပါ။ Frame
တစ္ခုက Link က ႏိွပ္လိုက္ရင္ ေနာက္ frame တစ္ခုက ေျပာင္းသြားဖို႕ပါ။
ကၽြန္ေတာ္ အကုန္လံုးကို
အေျခခံေလာက္ပဲ ေျပာႏိုင္မွာပါ။ Web ပိုင္းမွာ ေလ့လာစရာေတ ြ အမ်ားၾကီးပါ။
HTML ဆိုတာ လုံးဝ စကာစ
အေျခခံအဆင့္ေလးပါ။ ကဲ.. ေနာက္ဆံုး အခန္းေလး ဆက္လိုက္ရေအာင္။
62 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Link And Frame
ကၽြန္ေတာ္တို႕ အေပၚမွာ ေျပာဘူးပါတယ္။ ဘယ္ဘက္က Link ကို ႏိွပ္လိုက္ရင္
ညာဘက္မွာ သက္ဆိုင္ရာ Page ကို
ေျပာင္းသြားမယ္ဆိုျပီးေတာ့။ အခုအဲလိုမ်ဳိး ဘယ္ဘက္က frame ကေန
ႏိွပ္လိုက္ရင္ ညာဘက္က frame မွာ
သက္ဆိုင္ရာ Page ေျပာင္းသြား ေအာင္လုပ္ပါမယ္။ ပထမဆံုး frame ၂ ခုအတြက္
index.html ကိုစေရးပါ့မယ္။
<html>
<head>
<title>Menu</title>
</head>
<frameset cols="100,*">
<frame src="menu.html" id="menu">
63 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<frame src="home.html" name="main">
</frameset>
<noframes></noframes>
</html>
အဲမွာ.. name="main" လို႕ေပးခ့တဲ ာကို ေတြ႕မွာပါ။ အဲလိုမ်ဳိးနာမည္
ထည့္ခ့မဲ ွ menu ကေန အဲဒီ frame မွာ
သြားေပၚဆိုျပီး ေျပာလို႕ရမွာ။ ကဲ.. အခု menu.html မွာေရးထားတာကို
ၾကည့္လိုက္ရေအာင္...
<html>
<head>
<title>Menu</title>
</head>
<body>
<a href="home.html" target="main">Home</a><br>
<a href="download.html" target="main">Download</a><br>
<a href="link.html" target="main">Link</a><br>
</body>
</html>
အဲမွာ link ေတြအကုန္လံုးမွာ target ဆိုတာေလး ပါတာကိုေတြ႕ရပါလိမ့္မယ္။
ကၽြန္ေတာ္တို႕ index.html မွာ
name="main" ဆိုတ့ ဲ frame မွာ သြားေပၚမယ္ဆိုတ့ ဲ အဓိပၸာယ္ေပါ့။ download
ဆိုတာကို ႏိွပ္လိုက္ရင္ ညာဘက္က
frame မွာ download.html ဆိုတ့ ဲ page ေလးေပၚသြားပါမယ္။ Home
ကိုႏိွပ္လိုက္လည္း home.html ဟာ
ညာဘက္က frame မွာပဲ သြားေပၚပါမယ္။ အဲဒီေလာက္ဆိုရင္ နားလည္ သိရိွျပီလို႕ထင္ပါတယ္။
64 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အခုဆက္ျပီး နည္းနည္းအပိုေလး ထည့္ေျပာျပရေစ။
menu.html page ထဲမွာပဲ home.html ေလးကို လွမ္းျပီး ေခၚျပတ့နဲ ည္းပါ။
အဲဒါေလးကေတာ့ အသုံးဝင္ပါတယ္။
Home Page မွာ news ေတြကို ေဖာ္ျပတဲ့အခါ မွာအသံုးဝင္လွပါတယ္။
<html>
<head>
65 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<title>Menu</title>
</head>
<body>
<iframe src="home.html" width="500" height="200"></iframe>
</body>
</html>
code ေလးက ရွင္းပါတယ္။ <iframe> ပါ။ src ကေတာ့ ဘယ္ page ကို
ခ်ိတ္မလဲဆိုတာပါ။ width နဲ႕ height
ကေတာ့ ကိုယ္ေဖာ္ျပခ်င္သေလာက္ေပါ့။ အခုဆိုရင္ေတာ့ ကၽြန္ေတာ္တို႕ေတြ HTML
အေျခခံေလးကို
ေလ့လာလို႕ျပီးသြားပါျပီ။ ဒီစာအုပ္ကို ဖတ္ျပီးရင္ေတာ့ ဘာ code က
ဘာကိုေျပာတာလဲဆိုတာပဲ သိႏိုင္မွာပါ။
ဘာလိုခ်င္ရင္ ဘယ္လိုလုပ္ရမလဲ ဆိုတာေတာ့ မိမိရဲ႕ ေလ့လာမႈစြမ္းအားေပၚ
မူတည္ပါတယ္။ စာအုပ္ဖတ္ရံုနဲ႕
မရပါဘူး ။ လုိက္ေတြးပါ။ စမ္းၾကည့္ပါ။ ဒါမွ တိုးတက္မႈကို ရမွာပါ။
မ်က္စိနဲ႕ ၾကည့္ရံုနဲ႕ေတာ့ တိုးတက္မႈရိွမွာ
မဟုတ္ပါဘူး။ ဒီစာအုပ္ ဖတ္ျပီးရင္ေတာ့ "ေအာ္.. ဒီ code က ဒါအတြက္ေရးထားတာ"
အဲေလာက္ပဲ စြမ္းေဆာင္
ေပးႏိုင္မွာပါ။ ငါဒီလိုဆြဲခ်င္တယ္။ ဒါေၾကာင့္ ဒါကို သံုးရမယ္ ဆိုတာကေတာ့
မိမိရဲ႕ အာရံု ကြန္႕ျမဴးမႈနဲ႕ ဒီစာအုပ္ကို
ေပါင္းျပီး အသံုးခ်ရရင္ ရႏိုင္မွာပါ။
ကၽြန္ေတာ္တို႕ေတ ြ ဘာေတ ြ ဆက္ျပီးေလ့လာဖို႕လိုေသးလဲဆိုေတာ့ အမ်ားၾကီးပါ။
HTML ကို ဒီစာအုပ္
အဆင့္ေလာက္ သိသြားျပီဆိုရင္ေတာ့ CSS ကိုဆက္ျပီး ေလ့လာဖို႕လိုပါတယ္။
အဲဒီႏွစ္ခုတတ္ျပီးရင္ေတာ့
နည္းနည္းေလး ေရးဆြဲရတာ လြယ္သြားေအာင္ Dreamweaver
သံုးျပီးဆြဲေစခ်င္ပါတယ္။ ျပီးရင္ေတာ့ Javascript
ေပါ့။ အဲဒီဟာေတြ ျပီးသြားရင္ photoshop နဲ႕ Flash
နည္းနည္းသံုးတတ္ဖို႕လိုပါတယ္။ Webdesigner
တစ္ေယာက္အေနနဲ႕ ေလ့လာဖို႕ေျပာတာပါ။ web developer အေနနဲ႕လည္း CSS ,
Javascript, Phtoshop, Flash
တို႕ကို အနည္းအက်ဥ္းေလး သိရိွနားလည္ထားဖို႕လိုပါတယ္။ ျပီးရင္ web
programming ေတြ ေလ့လာရမွာပါ။ .NET
သမားေတြဆိုရင္ေတာ့ ASP.NET ေပါ့။ Java သမားဆိုရင္ေတာ့ JSP ရိွပါတယ္။
အျခား လြယ္ကူစြာ
ေလ့လာခ်င္ရင္ေတာ့ php က အလြယ္ဆုံးပါ။ ေနာက္ဆုံး technology ေတြနဲ႕
ေကာင္းေကာင္းေရးလို႕ရတ့ ဲ Ruby On
Rails နဲ႕ python တို႕ကိုလည္း ေလ့လာႏိုင္ပါေသးတယ္။ အမ်ားၾကီး
ေလ့လာဖို႕ေတြရိွပါတယ္။ ဦးစြာေတာ့ HTML ကို
ေသေသခ်ာခ်ာ တတ္ကၽြမ္းထားဖုိ႕လိုပါတယ္။
CSS By Saturngod…… coming soon…………….
No comments:
Post a Comment