html မိတ္ဆက ္ - · pdf fileျဖစ္ေနပါလ ိမ့္မယ္။...
TRANSCRIPT
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…………….