html ebook
DESCRIPTION
Html Ebook By MyanmarTRANSCRIPT
Page
HTML By Saturngod
1
http://wwww.saturngod.net
HTML HTML HTML 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 ဆြရတ အထမာ အလြယဆးန႕ အေျခခအကဆးပ။
သ႕ကေသေသခာခာနားလညထားမ တျခား web programming ေတြျဖစတ PHP, ASP.NET , JSP , Ruy On Rail တ႕မာ
အေထာကအကျဖစမာပါ။
HTML HTML HTML HTML ကေလလာမယကေလလာမယကေလလာမယကေလလာမယ
1.Starting To Creat and Edit Webpage1.Starting To Creat and Edit Webpage1.Starting To Creat and Edit Webpage1.Starting To Creat and Edit Webpage
Page
HTML By Saturngod
2
http://wwww.saturngod.net
Notepad ျဖငစတငျခငး
၁. Windows Key + R က ႏပလကပါ။ Run Dailog Box တကလာပါမည။ ထ႕ေနာက notepad လ႕ရကလကပါ။
ျပးလင OK က ႏပလကပါ။ ဒါဆရင notepad တကလာပါလမမယ။
၂. Notepad ထတြင Format ေအာကက word warp က check လပထားပါ ။ ဘာျဖစလ႕လညးဆရငေတာ Word Warp က
Notepad မာစာရကတာ ျပညသြားရင ေအာကတစေၾကာငး ဆငးသြားရနအတြက ျဖစသည။
HTML စတငေရးသားျခငး
၁. Notepad ထတြင အခလေရးသားလကပါ။
<html>
<head>
<title>This is title</title>
</head>
<body>
This is body
Page
HTML By Saturngod
3
http://wwww.saturngod.net
</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 ေလးတစခတကလာတာက ျမငရပါမယ။
ထပပငးတြင File ပတလမးေၾကာငးက address bar တြငေတြ႕ရမညျဖစသည။
title tag ထတြင ေရးထားေသာ This is tile ဆေသာ စာက Windos ၏ Title bar
ႏင Tab Title bar တ႕တြင ေတြ႕ရမည။ Body tag ထတြင ေရးထားေသာ This is
body ဆေသာ စာသားက စာမကႏာအျဖေပၚတြင ေပၚေနသညက
ေတြ႕ရမညျဖစသည။
Page
HTML By Saturngod
4
http://wwww.saturngod.net
ျပငမယဆရငေတာ
IE7 IE7 IE7 IE7 မာဆရငမာဆရငမာဆရငမာဆရင
Page > View Source ကႏပလကပါက Notepad န႕ ကယေရးထားတ HTML ပြငလာပါမယ။
IE 6 IE 6 IE 6 IE 6 မာဆမာဆမာဆမာဆရငရငရငရင
View > Source က ႏပလကပါက Notepad န႕ ကယေရးထားတ HTML ပြငလာပါမယ။
အဒမာ ေရးထားတ codeေတြက ဖတႏငသလ ကယစကထမာေရးထားတ page ဆရငေတာ ျပငျပး တစခါတညး save
လပႏငပါတယ။ Internet ေပၚက Web site ေတြကေတာ view > source ကေနဖြငျပငျပး save လပလ႕မရပါဘး။
Header Tag
notepad ထမာ ဒလရကလကပါ
<html>
<head>
<title>Example Of Header</title>
</head>
<body>
<h1>This is Header</h1>
This is normal text
Page
HTML By Saturngod
5
http://wwww.saturngod.net
</body>
</html>
အဒ code ေလးက notepad ထမာထညေရး.. ျပးေတာ run ၾကညလကပါ။ အခလျမငရပါလမမယ။ Head Tag က h1 ကေန h6
အထ ရပါတယ။ နပါတၾကးေလေလ ေသးသြားေလေလပ။ h6 ဆအေသးဆးက ေရာကသြားျပ။ က လကေတြ႕
စမးၾကညရေအာင။ notepad ထမာ ေအာကကလ ရကျပး save လပလက။ ျပးရင ဖြငၾကညလကရင ေတြ႕ရပါလမမယ။
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
</html>
Page
HTML By Saturngod
6
http://wwww.saturngod.net
အခဆ 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>
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/>
Page
HTML By Saturngod
7
http://wwww.saturngod.net
</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
ကၽြနေတာတ႕ေတြ စာတစေၾကာငးဆငးရမာ မၾကကဘး။ 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>
Page
HTML By Saturngod
8
http://wwww.saturngod.net
</body>
</html>
Paragraph Tag
ကၽြနေတာတ႕ေတြ စာေတြက paragraph ပစေရးခငတယ။ စာပဒေတြန႕ ေရးမယေပါ။ ဒါဆရင <p> ကသးလ႕ရပါတယ။ သက
အပတ tag မပါလညးရပါတယ။ ထညရငေတာ ပေကာငးတာေပါ။
<html>
<head>
<title>Example</title>
</head>
<body>
<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>
Page
HTML By Saturngod
9
http://wwww.saturngod.net
Horizonal Line
ကၽြနေတာတ႕ေတြ horizonal မဥးသားခငတ အခါမာ သးလ႕ရပါတယ။ သးပသးနညးကေတာ <hr> ပါပ။ close tag မပါပါဘး။
<html>
<head>
<title>Example</title>
</head>
<body>
<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>
Page
HTML By Saturngod
10
http://wwww.saturngod.net
</html>
အထကပါ code က run လကရင ဒလျမငရမယ။ အမာ <hr> ထညထားတေနရာက line ေလးတားထားတာက
ျမငရပါလမမယ။
Attribue
ကၽြနေတာတ႕ေတြဟာ 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>
Page
HTML By Saturngod
11
http://wwww.saturngod.net
အဒ 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 ကေနလညး ၾကကႏစသကတ အေရာငက ယျပးသးႏငပါတယ။ ဘယလယရမလဆရငေတာ
အရငဆး 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>
Page
HTML By Saturngod
12
http://wwww.saturngod.net
</html>
အခဆရငေတာ attribute ပငး န႕ color ပငးေလးက နညးနညးပါးပါးသေလာကျပလ႕ထငပါတယ။ attribute ထညလ႕ရတ tag
ေတြကလညး အမားၾကးရပါေသးတယ။ ျဖညးျဖညးျခငး ေျပာျပသြားမယ။ အခ ေနာကထပ tag တစချဖစတ <hr> ရ႕ attribute
အေၾကာငးေလးေျပာပါမယ။
Hr AttributeHr AttributeHr AttributeHr Attribute
ကၽြနေတာတ႕ေတြဟာ tag တစခရ႕ေနာကမာ attribute တစခထကမက လကလ႕ရပါတယ။ tag ေတြေနာကမာ attribute
တစခထကမကပါတာေတြက ေနာကပငးမာေတြ႕ရပါလမမယ။ အခေတာ hr အေၾကာငးေလး ဆကရေအာင။
<html>
<head>
<title>Example</title>
Page
HTML By Saturngod
13
http://wwww.saturngod.net
</head>
<body bgcolor=#e0e0e0>
Default HR
<hr>
Hr with size=1
<hr size=1>
Hr with size=5
<hr size=5>
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 ကေတာ
မမၾကကႏစသကတအေရာငထညလ႕ရပါတယ။
ListListListList
List ပငးမာ order list န႕ unorder list ဆျပးရပါတယ။ တနညးအားျဖင နပါတစဥန႕ list န႕ နပါတစဥေတြမပါတ list ေပါ။
ေနာကျပး defination list ဆတာရပါေသးတယ။ လသးနညးပါတယ။ ပထမဆး unorder list အေၾကာငးေလးသြားရေအာင။
Unorder listUnorder listUnorder listUnorder list
<html>
<head>
<title>Example</title>
</head>
Page
HTML By Saturngod
14
http://wwww.saturngod.net
<body>
<h3>Unorder List</h3>
<ul>
<li>First Item</li>
<li>Second Item</li>
<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>
Page
HTML By Saturngod
15
http://wwww.saturngod.net
<h5>Square</h5>
<ul type="square">
<li>First Item</li>
<li>Second Item</li>
<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 ListOrdered ListOrdered ListOrdered List
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Ordered List</h3>
<ol>
<li>First Item</li>
Page
HTML By Saturngod
16
http://wwww.saturngod.net
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
<ol> ကေတာ order list ပါ။ အဒ code ေလးက run လကရင နပါတ အစဥလကေပၚလာပါလမမယ။ သ႕မာလညး attribute
ေတြရပါတယ။
<html>
<head>
Page
HTML By Saturngod
17
http://wwww.saturngod.net
<title>Example</title>
</head>
<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>
Page
HTML By Saturngod
18
http://wwww.saturngod.net
<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 ListDefinition ListDefinition ListDefinition List
အမားအားျဖင အဓပၸာယဖြငဆခကေတြမာ သးပါတယ။
<html>
<head><title>Example</title></head>
<body>
<h3>Definition List</h3>
<dl>
Page
HTML By Saturngod
19
http://wwww.saturngod.net
<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 ကအၾကမးအားျဖငေလာကေတာ သေလာကျပေပါ။ အခကၽြနေတာတ႕ေတြ ေနာကထပ
ေသေသခာခာ သရေအာင ေနာကထပ တစခနးသြားရေအာင။
Page
HTML By Saturngod
20
http://wwww.saturngod.net
2.2.2.2.Creating Web Page With Apperance And LinkCreating Web Page With Apperance And LinkCreating Web Page With Apperance And LinkCreating 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>
</body>
</html>
Page
HTML By Saturngod
21
http://wwww.saturngod.net
အဒ 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 ပါ။ ညာဘကကေန ဘယဘကကသြားမယလ႕ ဆတာပါ။
<marquee direction="left" >I'm moving</marquee>
right
သကေတာ ဘယဘကကေန ညာဘကကသြားမယလ႕ဆတာပါ။
<marquee direction="right" >I'm moving</marquee>
Page
HTML By Saturngod
22
http://wwww.saturngod.net
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>
marquee ေလးလပရတာ ေပာစရာေတာေကာငးပါတယ။ စာလးေလးေတြက ေရြ႕ေရြ႕သြားတာေလးက ၾကညျပး
ေကနပမႈေလးရႏငပါေစ။ အခ font ပငးက ဆကလကေလလာရေအာင။
FontFontFontFont
Font ကေတာ HTML မာအေရးပါတ အပငးပါ။ Web Page တစခမာ ကယလခငတ font ကေျပာငးလဖ႕အတြက font tag
ကသမ ျဖစမာပါ။။
<html>
<head><title>Example</title></head>
Page
HTML By Saturngod
23
http://wwww.saturngod.net
<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 ျဖစသြားမာေပါ။ ဒလေလး သးလ႕ရပါတယ။
<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 ခနတာေပါ။ ကယစာပဒေလးက တစတညးတစသန႕ထ ေဖာျပခငတ အခါမာ
Page
HTML By Saturngod
24
http://wwww.saturngod.net
သးၾကပါတယ။
<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 တားတာပါ။
အခဆကျပးေတာ Link ေတြအေၾကာငးေျပာပါမယ။ Link ကေတာ Web Page မာအဓက အခနးက ပါဝငပါတယ။ Page တစခန႕
တစခ ခတဆကထားဖ႕ အတြက Link ခတတတဖ႕လပါတယ။
Page Link And Image LinkPage Link And Image LinkPage Link And Image LinkPage Link And Image Link
Page
HTML By Saturngod
25
http://wwww.saturngod.net
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.htmlIndex.htmlIndex.htmlIndex.html
<html>
<head><title>Example</title>
<body>
<!-- Link To Gallery Page -->
<a href="gallery.html">Gallery</a>
</body>
</html>
Gallery.htmlGallery.htmlGallery.htmlGallery.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 န႕သမးတာလ။ ဘာေတြကြာလ။
Page
HTML By Saturngod
26
http://wwww.saturngod.net
<!-- 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 လပရင လတငးေမးတတတ ေမးခြနးတစခရပါတယ။ 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 ပငးေတြက ကၽြနေတာ
Page
HTML By Saturngod
27
http://wwww.saturngod.net
ေနာကပငး ဆကလကရငးျပပါအးမယ။
ဒပတလမးေၾကာငးေတြ အေၾကာငးေကာငးေကာငးသဖ႕လပါတယ။ ဘာျဖစလ႕လညးဆ ကယ site က ၾကးလာတာန႕ အမ site
structure က ရႈပေထြးလာမာပါ။ Link ေတြလညး မားလာမာျဖစလ႕ပါ။ ဒါေၾကာင ေသေသခာခာ သထားသငပါတယ။
က.. အခ ကၽြနေတာတ႕ေတြ 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>
Page
HTML By Saturngod
28
http://wwww.saturngod.net
<head>
<title>Example</title>
</head>
<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 န႕ အတတပါပ။ ညာဘကက ပေရြ႕သြားျပ စာသားအားလးက ပရ႕ ဘယဘကမာ ေဖာျပေပးပါမယ။
Page
HTML By Saturngod
29
http://wwww.saturngod.net
ပ : img top
ပ : img bottom
ပ : img middle
ပ : img left
ပ : img right
အခဆရင image န႕ပတသကျပး ေတာေတာေလးသေလာကျပ ထငတယ။ ေနာကထပတစခ ထပေျပာအးမယ။
ပေသးေသးေလးက ႏပလကမ ပအၾကးၾကးေျပာငးသြားသလမးေလးေပါ။ ပ size က width န႕ height attribute န႕
ခတာမဟတဘးေနာ။ ပႏစပ။ တစပက အၾကး ၊ ေနာကတစပက အေသးေပါ။ Photo ေတြက size ေသးတာက ျပထားျပး ပက
Page
HTML By Saturngod
30
http://wwww.saturngod.net
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 FrameTable And FrameTable And FrameTable And Frame Table ဟာ web page တညေဆာကရာမာ အေရးပါပါတယ။ စတငေလလာသေတြအတြကေတာ table ကသာ web page
frame က ပစကေအာင လပေပးႏငတာပါ။ တကယလ႕ ကယက professional ျဖစသြားျပ ၊ stylesheet ေတြ
တတသြားျပဆရငေတာ div န႕ CSS က တြျပးေတာ ကယ page ကလျပေအာင လပႏငတာေပါ။ အခေတာ HTML အေၾကာငးပ
Page
HTML By Saturngod
31
http://wwww.saturngod.net
ေျပာေနေသးတယ ၊ ေနာကျပး CSS အေၾကာငးေတြ Advance ျဖစတအေၾကာငးေတြ မပါေသးဘး။ table သးျပးလညး သမား
web page ေတြလ လမလာပါလားလ႕ ေမးခငရင ေမးလာႏငလ႕ အခလေျဖထားတာပါ။ က table အေၾကာငးေလးစရေအာင။
Table Table 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 အေၾကာငးေလးပ
ဆကလကရေအာင။
Page
HTML By Saturngod
32
http://wwww.saturngod.net
အေပၚပက ၾကညလကပါ။ အကြကတစခလးအျပညဟာ table ပါ။ ေနာကျပး စာေရးထားတ အကြကေတြဟာ cell ေတြေပါ။ cell
ကြကေတြထမာပ စာေရးတာပါ။ က.. ပျပး နားလညသြားေအာင code ေလးေတြန႕စလကရေအာင။
<head>
<title>Example Table</title>
</head>
<body>
<table>
<tr> <!-- Row-->
<td> <!-- Column -->
Row
</td>
<td>
Page
HTML By Saturngod
33
http://wwww.saturngod.net
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>
2
</td>
<td>
Page
HTML By Saturngod
34
http://wwww.saturngod.net
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 ေရးၾကညရေအာင။
<html>
<head><title>Example</title></head>
<body>
<table>
Page
HTML By Saturngod
35
http://wwww.saturngod.net
<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>
က... အခေလာကဆ နားလညေလာကျပထငတယ။ ကၽြနေတာတ႕ ေရ႕ဆကရေအာင။ ကၽြနေတာတ႕ေတြဟာ
table ရ႕ width က ထနးခပႏငပါတယ။ table ရ႕ width က သတမတတအခါမာ % န႕သတမတတာန႕ pixel
န႕ သတမတတာရယရပါတယ။
table ရ႕ width သာမက <td> ရ႕ width ေတြကပါသတမတႏငပါတယ။ % န႕ သတမတတာန႕ Pixel န႕
သတမတတာ ဘာကြာသလဆရငေတာ % ကေတာ broswer ရ႕ အေပၚမာ မတညျပး width ကေျပာငးလပါတယ။ pixel
ကေတာ မေျပာငးလဘးေပါ။ အေသေပါ။ % န႕ဆရင broswer ခ႕လကတာန႕ လကကယသြားပါတယ။ pixel န႕ဆရငေတာ
browser ကယလညး လကမကယသြားပါဘး။ က.. စလကရေအာင။
<html>
Page
HTML By Saturngod
36
http://wwww.saturngod.net
<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>
</tr>
</table>
</body>
</html>
Page
HTML By Saturngod
37
http://wwww.saturngod.net
အဒမာဆရင 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>
</tr>
အဒမာဆရငေတာ column ရ႕ width က % န႕သတမတေပးမာပါ။ အဒမာ တတယ colum က width မထညလညး သ႕ဘာသာ
ခနညေပးႏငပါတယ။ က... table န႕ time table ေလးဆြၾကညရေအာင။
<html>
<head><title>Example</title></head>
<body>
<table width="100%">
Page
HTML By Saturngod
38
http://wwww.saturngod.net
<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>
<td>1:00 PM - 3:00 PM</td>
<td>Windows Install</td>
</tr>
</table>
</body>
</html>
Page
HTML By Saturngod
39
http://wwww.saturngod.net
က.. အခဆရင လကေတြ႕ အသးျပတတေလာကျပ ထငတယ။ ကၽြနေတာတ႕ေတြ 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" >
border က ႏစထပျဖစေနတာက ေတြ႕ရပါလမမယ။ အဒါက cell padding ေၾကာငပါ။ cell padding န႕ cell spacing ဆျပး
ႏစမးရပါတယ။
cellpadding ဆတာကေတာ table အတြငး border န႕ စာ ေနရာအကြာအေဝးပါ။ cellpadding မားလာေလေလ စာက
အတြငးက ဝငေလေလျဖစမာပါ။ အခ cellpadding က 30 ထားလကတအခါမာ စာသားေတြန႕ border အရမးကသြားတာက
ေတြ႕ရပါလမမယ။
<table width="100%" border="1" cellpadding="30" bordercolor="#0066CC" >
Page
HTML By Saturngod
40
http://wwww.saturngod.net
cellspacing ကေတာ cell တစခန႕ တစခၾကား အကြာအေဝးေပါ။ အခ border ဟာ ႏစထပျဖစေနတာကေတြ႕ရပါလမမယ။
အဒါက တစထပတညး ျဖစခငရငေတာ cellspacing က 0 ေပးလကရပါပ။
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
က... အခဆရငေတာ နညးနညးေလး သလာျပထငတယ။ ဒေလာကထ နားလညျပဆရင ကၽြနေတာတ႕ေတြ 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> ၂
Page
HTML By Saturngod
41
http://wwww.saturngod.net
ခပပါေတာမယ။ အဒါကေတာ column merge လပတအခါမာေပါ။ row ကလညး အလပါပ။ အခေတာ column merge လပတ
code ေလးက ၾကညလကပါအး။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td colspan="2">
Cell 1
</td>
<td>
Cell 3
</td>
Page
HTML By Saturngod
42
http://wwww.saturngod.net
</tr>
</table>
</body>
</html>
အေပၚက code မာ <td colspan="2"> ဆတာက ေတြ႕ႏငမယထငပါတယ။ အဒါကေတာ Cell ၂ ခေပါငးမယ ဆတ
အဓပၸာယပါ။ တကယလ႕ cell ၃ ခေပါငးခငရငေတာ <td colspan="3"> ပါ။ ကၽြနေတာ အလမး code ကေျပာငးေရးလကရင
ဒလေတြ႕ရမာပါ။
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Page
HTML By Saturngod
43
http://wwww.saturngod.net
Cell 3
</td>
</tr>
<tr>
<td colspan="3">
Cell 1
</td>
</tr>
</table>
</body>
</html>
ကၽြနေတာတ႕ေတြ column က ၃ ခစလး ေပါငးလကတ အတြက စစေပါငး column ၁ ခပရေတာတယ။ ဒါေၾကာင <td>
တစခက ပသးတာပါ။ က... ဆကျပးေတာ example တစခေလာက ေဆာကၾကညရေအာင။
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
Page
HTML By Saturngod
44
http://wwww.saturngod.net
<td colspan="3">
List Of Adboe Software
</td>
</tr>
<tr>
<td>
Adobe Acrobat
</td>
<td>
Adobe Dreamweaver
</td>
<td>
Adboe Flash
</td>
</tr>
<tr>
<td>
Adobe InDesign
</td>
<td>
Adobe Photoshop
</td>
<td>
Adboe Bridge
</td>
</tr>
Page
HTML By Saturngod
45
http://wwww.saturngod.net
</table>
</body>
</html>
အဒက 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>
Page
HTML By Saturngod
46
http://wwww.saturngod.net
</tr>
<tr>
<td>
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>
Page
HTML By Saturngod
47
http://wwww.saturngod.net
<td>
Row1 , Cell1
</td>
<td>
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>
Page
HTML By Saturngod
48
http://wwww.saturngod.net
</body>
</html>
ဒ 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>
Page
HTML By Saturngod
49
http://wwww.saturngod.net
</tr>
</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">
Red
Page
HTML By Saturngod
50
http://wwww.saturngod.net
</td>
<td bgcolor="#EABCDF">
Hex Color
</td>
</tr>
<tr bgcolor="#FF6699">
<td>
a
</td>
<td>
b
</td>
<td>
c
</td>
</tr>
</table>
</body>
</html>
အဒမာဆရငေတာ <tr bgcolor="#FF6699"> ေၾကာင row တစခလး အေရာငေျပာငးသြားတယဆတာက ေတြ႕ႏငမာပါ။
အခေလာကဆရငေတာ table အေၾကာငးသေလာကပါျပ။ table က HTML န႕ေရးရတာ ေတာေတာလကဝငျပး စတပကဖ႕
ေကာငးပါတယ။ Dreamweaver လမး software သးလကရငေတာ table တစခေဆာကရတာ အရမးလြယပါတယ။ table က
merge လပတာေတြကလညး dreamweaver မာ အလြယတကလပႏငပါတယ။ ဒစာအပမာ dreamweaver အေၾကာငးေျပာတာ
Page
HTML By Saturngod
51
http://wwww.saturngod.net
မဟတပ HTML ကအေျခခက အစနားလညေအာင ေရးတတေအာင ေျပာျပထားတာေၾကာင အခလမး
နညးနညးလကဝငေပမယ နားလညေအာင ေလလာသငပါတယ။ အခေတာ frame အေၾကာငးေလးပ ဆကရေအာင။
FrameFrameFrameFrame Frame ကေတာ HTML Page ႏစခ ထကမက တာေတြက စာမကႏာ တစခထ မာ ေဖာျပျခငတ အခါေပါ။ ဘယလမးလ
ဆေတာ
အဒမာ ဆရင Frame ၃ ခန႕ Page တစခက ဖြ႕စညး တညေဆာကထားတာပါ။ အခေနာကပငးမာ Frame
ကအသးနညးသြားပါျပ။ AJAX ဆတ နညးပညာက ေျပာငးသးၾကပါတယ။ အရငတနးကေတာ Frame ကအသးမားခပါတယ။
ဘာလ႕အသးျပရသလဆရငေတာ အေပၚက ပမာၾကညလကပါ။ ဘယဘကက menu ျဖစျပး ညာဘကကေတာ menu က
ႏပလကရင ေပၚလာမယ page ေပါ။ အေပၚဆးကေတာ Name ကေရးထားတာပါ။ အ.. အခ frame အေၾကာငး စလကေအာင။
Frame1.htmlFrame1.htmlFrame1.htmlFrame1.html
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
This is frame 1
</body>
</html>
Page
HTML By Saturngod
52
http://wwww.saturngod.net
Frame2.html
<html>
<head>
<title>Untitled Document</title>
</head>
This is frame 2
</html>
index.htmlindex.htmlindex.htmlindex.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>
<noframes><body>
</body>
</noframes></html>
frame တစခက တညေဆာကျပရငေတာ အနညးဆး file ၃ ခလပါတယ။ index.html ကေတာ Frame1 န႕ Frame2
ကခတဆကေဖာျပေပးမာျဖစျပး frame1 န႕ frame2 ကေတာ အဓကေပါ။
Page
HTML By Saturngod
53
http://wwww.saturngod.net
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 ၃ ခ
န႕လပၾကညရေအာင။
index.htmlindex.htmlindex.htmlindex.html
<html>
Page
HTML By Saturngod
54
http://wwww.saturngod.net
<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>
<frameset rows="20%,30%,*">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
Page
HTML By Saturngod
55
http://wwww.saturngod.net
ဘာေျပာငးသြားသလဆေတာ 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>
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
Page
HTML By Saturngod
56
http://wwww.saturngod.net
အဒမာ <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 က ဒလေလးျဖစသြားမာပါ။
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows="20%,30%,*">
<frame src="frame1.html" />
Page
HTML By Saturngod
57
http://wwww.saturngod.net
<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>
ရငးရငးေလးပါ။ ဒတယ rows မာ ျဖစေစခငလ႕ ဒတယ rows မာ frameset တစခထပထညရတာပါ။ အလမးပ columns
ေတြထမာ rows ေတြ ခြလ႕ရပါတယ။ အတတပါပ။ အေပၚက rows ေနရာမာ cols ေျပာငးျပးေတာ cols ေနရာမာ rows
ေျပာငးလကရင သမာပါ။ ကၽြနေတာ မေရးျပေတာဘး။ ကယတငပ ေရးျပး စမးၾကညလကေပါ။
Page
HTML By Saturngod
58
http://wwww.saturngod.net
အခ ဒစာအပရ႕ ေနာကဆးအခနးက ေနာကဆး အေၾကာငးပါပ။ ဘာလဆရငေတာ Link And Frame ပါ။ Frame တစခက Link
က ႏပလကရင ေနာက frame တစခက ေျပာငးသြားဖ႕ပါ။ ကၽြနေတာ အကနလးက အေျခခေလာကပ ေျပာႏငမာပါ။ Web
ပငးမာ ေလလာစရာေတြ အမားၾကးပါ။ HTML ဆတာ လးဝ စကာစ အေျခခအဆငေလးပါ။ က.. ေနာကဆး အခနးေလး
ဆကလကရေအာင။
Link And Frame
Page
HTML By Saturngod
59
http://wwww.saturngod.net
ကၽြနေတာတ႕ အေပၚမာ ေျပာဘးပါတယ။ ဘယဘကက Link က ႏပလကရင ညာဘကမာ သကဆငရာ Page က
ေျပာငးသြားမယဆျပးေတာ။ အခအလမး ဘယဘကက frame ကေန ႏပလကရင ညာဘကက frame မာ သကဆငရာ Page
ေျပာငးသြား ေအာငလပပါမယ။ ပထမဆး frame ၂ ခအတြက index.html ကစေရးပါမယ။
<html>
<head>
<title>Menu</title>
</head>
<frameset cols="100,*">
<frame src="menu.html" id="menu">
<frame src="home.html" name="main">
</frameset>
<noframes></noframes>
</html>
အမာ.. name="main" လ႕ေပးခတာက ေတြ႕မာပါ။ အလမးနာမည ထညခမ menu ကေန အဒ frame မာ သြားေပၚဆျပး
ေျပာလ႕ရမာ။ က.. အခ menu.html မာေရးထားတာက ၾကညလကရေအာင...
<html>
<head>
<title>Menu</title>
</head>
Page
HTML By Saturngod
60
http://wwww.saturngod.net
<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 မာပ သြားေပၚပါမယ။
အဒေလာကဆရင နားလည သရျပလ႕ထငပါတယ။
အခဆကျပး နညးနညးအပေလး ထညေျပာျပရေစ။
Page
HTML By Saturngod
61
http://wwww.saturngod.net
menu.html page ထမာပ home.html ေလးက လမးျပး ေခၚျပတနညးပါ။ အဒါေလးကေတာ အသးဝငပါတယ။ Home Page မာ
news ေတြက ေဖာျပတအခါ မာအသးဝငလပါတယ။
<html>
<head>
<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 က ဒါအတြကေရးထားတာ"
အေလာကပ စြမးေဆာင ေပးႏငမာပါ။ ငါဒလဆြခငတယ။ ဒါေၾကာင ဒါက သးရမယ ဆတာကေတာ မမရ႕ အာရ ကြန႕ျမးမႈန႕
ဒစာအပက ေပါငးျပး အသးခရရင ရႏငမာပါ။
Page
HTML By Saturngod
62
http://wwww.saturngod.net
ကၽြနေတာတ႕ေတြ ဘာေတြ ဆကျပးေလလာဖ႕လေသးလဆေတာ အမားၾကးပါ။ 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 က
ေသေသခာခာ တတကၽြမးထားဖ႕လပါတယ။