page 1 html by saturngod - · pdf fileနာမည္ေပးႏိုင္သည္။...

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


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


</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


ျပငမယဆရငေတာ

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


</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


အခဆ html အေၾကာငးနညးနညး နားလညလာေလာကပါျပ။ တကယတနးေတာ မခကပါဘး။ ဒါကအစပ ရပါေသးတယ။

ဒေလာကေလးန႕ပင စာေတြပပါတ page တစခေရးလ႕ရေနျပ။ ဒါေပမယ လအပတာေတြ ရေသးတာေပါ။ အခဆကျပး bold ၊

italic ၊ underline လပပေလးေတြ ဆကေျပာပါမယ။ လြယပါတယ။

Line Break

HTML မာ စာတစေၾကာငးဆငးခငရငေတာ <br/> ကသးပါတယ။ သ႕မာ close tag မပါဘး။ <br/>

ပေရးေရး <br> ပေရးေရးရပါတယ။

<html>

<head>


</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


</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>


</head>

<body>

<pre>Pre Tag, Now Enter

Now Tab Tab

</pre>

Page

HTML By Saturngod

8


</body>

</html>

Paragraph Tag

ကၽြနေတာတ႕ေတြ စာေတြက paragraph ပစေရးခငတယ။ စာပဒေတြန႕ ေရးမယေပါ။ ဒါဆရင <p> ကသးလ႕ရပါတယ။ သက

အပတ tag မပါလညးရပါတယ။ ထညရငေတာ ပေကာငးတာေပါ။

<html>

<head>


</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


Horizonal Line

ကၽြနေတာတ႕ေတြ horizonal မဥးသားခငတ အခါမာ သးလ႕ရပါတယ။ သးပသးနညးကေတာ <hr> ပါပ။ close tag မပါပါဘး။

<html>

<head>


</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


</html>

အထကပါ code က run လကရင ဒလျမငရမယ။ အမာ <hr> ထညထားတေနရာက line ေလးတားထားတာက

ျမငရပါလမမယ။

Attribue

ကၽြနေတာတ႕ေတြဟာ tag ေတြမာလညး attribute ေတြထညျပး သးႏငပါတယ။ attribute ဆတာကေတာ အဒ tag ပငဆငတ

properties ေပါ။ tag တငးမာေတာ attribute မရပါဘး။ အခ ဥးစြာ အရငဆး body မာပါတ color attribute အေၾကာငးေလးန႕

စလကရေအာင။

Body Color

<html>

<head>


</head>

<body bgcolor=silver>

Body BGCOLOR

</body>

</html>

Page

HTML By Saturngod

11


အဒ 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>


</head>

<body bgcolor=#e5bb2c>

Body BGCOLOR Hex code

</body>

Page

HTML By Saturngod

12


</html>

အခဆရငေတာ attribute ပငး န႕ color ပငးေလးက နညးနညးပါးပါးသေလာကျပလ႕ထငပါတယ။ attribute ထညလ႕ရတ tag

ေတြကလညး အမားၾကးရပါေသးတယ။ ျဖညးျဖညးျခငး ေျပာျပသြားမယ။ အခ ေနာကထပ tag တစချဖစတ <hr> ရ႕ attribute

အေၾကာငးေလးေျပာပါမယ။

Hr AttributeHr AttributeHr AttributeHr Attribute

ကၽြနေတာတ႕ေတြဟာ tag တစခရ႕ေနာကမာ attribute တစခထကမက လကလ႕ရပါတယ။ tag ေတြေနာကမာ attribute

တစခထကမကပါတာေတြက ေနာကပငးမာေတြ႕ရပါလမမယ။ အခေတာ hr အေၾကာငးေလး ဆကရေအာင။

<html>

<head>


Page

HTML By Saturngod

13


</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>


</head>

Page

HTML By Saturngod

14


<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>Third Item</li>

</ul>

Page

HTML By Saturngod

15


<h5>Square</h5>

<ul type="square">

<li>First Item</li>


<li>Third Item</li>

</ul>

<h5>Circle</h5>

<ul type="circle">

<li>First Item</li>


<li>Third Item</li>

</ul>

</body>

</html>

unorder list မာ disc, square, circle ဆျပး ၃ မးေျပာငးလ႕ရပါတယ။ default ကေတာ disc ပါ။

Ordered ListOrdered ListOrdered ListOrdered List

<html>

<head>


</head>

<body>

<h3>Ordered List</h3>

<ol>

<li>First Item</li>

Page

HTML By Saturngod

16



<li>Third Item</li>

</ol>

</body>

</html>

<ol> ကေတာ order list ပါ။ အဒ code ေလးက run လကရင နပါတ အစဥလကေပၚလာပါလမမယ။ သ႕မာလညး attribute

ေတြရပါတယ။

<html>

<head>

Page

HTML By Saturngod

17



</head>

<body>

<h3>Ordered List</h3>

<ol type="1">

<li>First Item</li>


<li>Third Item</li>

</ol>

<h5>Type A</h5>

<ol type="A">

<li>First Item</li>


<li>Third Item</li>

</ol>

<h5>Type a</h5>

<ol type="a">

<li>First Item</li>


<li>Third Item</li>

</ol>

<h5>Type a</h5>

<ol type="I">

<li>First Item</li>

Page

HTML By Saturngod

18



<li>Third Item</li>

</ol>

<h5>Type i</h5>

<ol type="i">

<li>First 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


<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


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>


<body>

<center>

This is center

</center>

</body>

</html>

This is center ဆတာေလးက အလယပငးကေရာကေနတာကေတြ႕ရပါမယ။ အဒါေလးက သးျပး စာေတြက အလယပငးက

ေရြ႕ထားလ႕ရပါတယ။

<html>


<body>

<h1 align="justify">Test</h1>

</body>

</html>

Page

HTML By Saturngod

21


အဒ code မာဆရငေတာ header ေတြက အလယကေရာကေနတာကေတြ႕ရပါလမမယ။

Marquee

marquee ကေတာ စာလးေတြက ေရြ႕ေနဖ႕လပေဆာငေပးတာပါ။

<html>


<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


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>


Page

HTML By Saturngod

23


<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


သးၾကပါတယ။

<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


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>



<a href="gallery.html">Gallery</a>

</body>

</html>

Gallery.htmlGallery.htmlGallery.htmlGallery.html

<html>

<head><title>Example</title>

<body>



<a href="index.html">Home</a>

</body>

</html>

အေပၚက code ကမရငးျပခင ေမးခငတာေလးေတြ ပါလာမယထငတယ။  က ဘာၾကးလဆျပးေတာ။ ေနာကျပးေတာ

home page က home.html န႕ သမးလ႕ေကာ မရဘးလား။ ဘာလ႕ index.html န႕သမးတာလ။ ဘာေတြကြာလ။

Page

HTML By Saturngod

26


 အဒါက 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


ေနာကပငး ဆကလကရငးျပပါအးမယ။

ဒပတလမးေၾကာငးေတြ အေၾကာငးေကာငးေကာငးသဖ႕လပါတယ။ ဘာျဖစလ႕လညးဆ ကယ site က ၾကးလာတာန႕ အမ site

structure က ရႈပေထြးလာမာပါ။ Link ေတြလညး မားလာမာျဖစလ႕ပါ။ ဒါေၾကာင ေသေသခာခာ သထားသငပါတယ။

က.. အခ ကၽြနေတာတ႕ေတြ page မာ ပေလးေတြ ထညရေအာင။

Image

ပေတြကေတာ web page တစခမာ မျဖစမေနပါဝငရပါတယ။ ကယတညေဆာကတ page က လပျပး အဓပၸာယျပညစဖ႕

အတြကပါ။ က... ပေလးေတြ ထညၾကညရေအာင။

<html>

<head>


</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


<head>


</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


ပ : img top

ပ : img bottom

ပ : img middle

ပ : img left

ပ : img right

အခဆရင image န႕ပတသကျပး ေတာေတာေလးသေလာကျပ ထငတယ။ ေနာကထပတစခ ထပေျပာအးမယ။

ပေသးေသးေလးက ႏပလကမ ပအၾကးၾကးေျပာငးသြားသလမးေလးေပါ။ ပ size က width န႕ height attribute န႕

ခတာမဟတဘးေနာ။ ပႏစပ။ တစပက အၾကး ၊ ေနာကတစပက အေသးေပါ။ Photo ေတြက size ေသးတာက ျပထားျပး ပက

Page

HTML By Saturngod

30


click လပလကမ size ၾကးတ ပက ျပ တပပါ။ အလဘာလ႕ လပရလဆ ပၾကးရင page တကတာၾကာပါတယ။ ဒါေၾကာင

ပေသးက အရငျပတယ။ click လပလကမ ပၾကးျဖစသြားမယ။

<html>

<head>


</head>

<body>

<a href="fullsize.jpg"> 



<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


ေျပာေနေသးတယ ၊ ေနာကျပး 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


အေပၚပက ၾကညလကပါ။ အကြကတစခလးအျပညဟာ table ပါ။ ေနာကျပး စာေရးထားတ အကြကေတြဟာ cell ေတြေပါ။ cell

ကြကေတြထမာပ စာေရးတာပါ။ က.. ပျပး နားလညသြားေအာင code ေလးေတြန႕စလကရေအာင။

<head>

<title>Example Table</title>

</head>

<body>

<table>

<tr> 

<td> 

Row

</td>

<td>

Page

HTML By Saturngod

33


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> 

<td> 

1

</td>

<td>

2

</td>

<td>

Page

HTML By Saturngod

34


3

</td>

</tr>

<tr> 

<td> 

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>


<body>

<table>

Page

HTML By Saturngod

35


<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr>

<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



<body>

<table width="100%">


<td>1</td>

<td>2</td>

<td>3</td>

</tr>


<td>3</td>

<td>4</td>

<td>5</td>

</tr>


<td>6</td>

<td>7</td>

<td>8</td>

</tr>

</table>

</body>

</html>

Page

HTML By Saturngod

37


အဒမာဆရင width က 100% ျဖစတအတြကေၾကာင browser အျပည table ကယပါမယ။

အဒက အေပၚဆး first row ကဒလျပငၾကညလကပါ။



<td width="30px">1</td>

<td>2</td>

<td>3</td>

</tr>

ဒါဆရငေတာ ပထမ column ရ႕ width က 30px လ႕သတမတလကပါျပ။ ပထမ row မာသတမတလကရင တျခား row ေတြရ႕

ပထမ column ကပါသတမတျပးသား ျဖစသြားပါလမမယ။ ကၽြနေတာတ႕ေတြဟာ px သာမက % န႕ပါ သတမတႏငပါတယ။

column ၃ ခလးက သတမတခငရငေတာ ဒလေရးလ႕ပါတယ။



<td width="45%">1</td>



</tr>

အဒမာဆရငေတာ column ရ႕ width က % န႕သတမတေပးမာပါ။ အဒမာ တတယ colum က width မထညလညး သ႕ဘာသာ

ခနညေပးႏငပါတယ။ က... table န႕ time table ေလးဆြၾကညရေအာင။

<html>


<body>


Page

HTML By Saturngod

38



<td>Date</td>

<td>Time</td>

<td>Subject</td>

</tr>


<td>Oct 07</td>

<td>1:00 PM - 3:00 PM</td>

<td>Hardware</td>

</tr>


<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


က.. အခဆရင လကေတြ႕ အသးျပတတေလာကျပ ထငတယ။ ကၽြနေတာတ႕ေတြ 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


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


ခပပါေတာမယ။ အဒါကေတာ column merge လပတအခါမာေပါ။ row ကလညး အလပါပ။ အခေတာ column merge လပတ

code ေလးက ၾကညလကပါအး။

<html>

<head>


</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


</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


Cell 3

</td>

</tr>

<tr>

<td colspan="3">

Cell 1

</td>

</tr>

</table>

</body>

</html>

ကၽြနေတာတ႕ေတြ column က ၃ ခစလး ေပါငးလကတ အတြက စစေပါငး column ၁ ခပရေတာတယ။ ဒါေၾကာင <td>

တစခက ပသးတာပါ။ က... ဆကျပးေတာ example တစခေလာက ေဆာကၾကညရေအာင။

<html>

<head>


</head>

<body>

<table border="1">

<tr>

Page

HTML By Saturngod

44


<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


</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>


</head>

<body>

<table border="1">

<tr>

<td rowspan="2">

Cell Left

</td>

<td>

Cell 2

</td>

Page

HTML By Saturngod

46


</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>


</head>

<body>

<table border="1">

<tr>

Page

HTML By Saturngod

47


<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


</body>

</html>

ဒ example မာဆရင row span ကေကာငးေကာငးနားလညမယထငပါတယ။ Left န႕ Right ဆျပး row ႏစခေပါငးလကေတာ

ေအာကဆး row မာ column တစကြကပ ကနေတာတအတြက <td> တစခပ ေရးရတာပါ။

Appearnce

ကၽြနေတာတ႕ေတြဟာ Table ေတြမာ background color ေတြအသးျပႏငပါတယ။ border အသးျပနညးကေတာ အေပၚမာ

ေဖာျပျပးသြားပါျပ။ အခ ကယလခငတ cell မာ background အေရာငေလးေတြ ထညရေအာင။

<html>

<head>


</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


</tr>

</table>

</body>

</html>

အဒမာဆရင bgcolor ကေတြ႕မာပါ။ အဒါကေတာ background အေရာငထညတာပါ။ ကၽြနေတာတ႕ေတြ background

အေရာငကထညလ႕ရေပမယ စာလးအေရာငေတြ ထညလ႕မရပါဘး။ ကၽြနေတာတ႕ေတြ စာလးအေရာငထညခငရငေတာ font

color န႕ထညသြငးရပါတယ။ တျခားအဆငေျပတနညးကေတာ CSS အသးျပလကျခငးပါပ။ ဒစာအပထမာေတာ CSS

အေၾကာငးပါဝငျခငးမရေသးဘး။ အခဆရငေတာ bg color ကနညးနညးနားလညလာျပထငပါတယ။ တကယလ႕

ကၽြနေတာတ႕ေတြ row တစခလးက အေရာငထညခငရငေတာ <tr> မာ bgcolor ဆတ attribute သးရပါမယ။

<html>

<head>


</head>

<body>

<table border="1">

<tr>

<td bgcolor="blue">

<font color="#FFFFFF">BLUE</font>

</td>

<td bgcolor="red">

Red

Page

HTML By Saturngod

50


</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


မဟတပ HTML ကအေျခခက အစနားလညေအာင ေရးတတေအာင ေျပာျပထားတာေၾကာင အခလမး

နညးနညးလကဝငေပမယ နားလညေအာင ေလလာသငပါတယ။ အခေတာ frame အေၾကာငးေလးပ ဆကရေအာင။

FrameFrameFrameFrame Frame ကေတာ HTML Page ႏစခ ထကမက တာေတြက စာမကႏာ တစခထ မာ ေဖာျပျခငတ အခါေပါ။ ဘယလမးလ

ဆေတာ

အဒမာ ဆရင Frame ၃ ခန႕ Page တစခက ဖြ႕စညး တညေဆာကထားတာပါ။ အခေနာကပငးမာ Frame

ကအသးနညးသြားပါျပ။ AJAX ဆတ နညးပညာက ေျပာငးသးၾကပါတယ။ အရငတနးကေတာ Frame ကအသးမားခပါတယ။

ဘာလ႕အသးျပရသလဆရငေတာ အေပၚက ပမာၾကညလကပါ။ ဘယဘကက menu ျဖစျပး ညာဘကကေတာ menu က

ႏပလကရင ေပၚလာမယ page ေပါ။ အေပၚဆးကေတာ Name ကေရးထားတာပါ။ အ.. အခ frame အေၾကာငး စလကေအာင။

Frame1.htmlFrame1.htmlFrame1.htmlFrame1.html

<html>

<head>


</head>

<body>

This is frame 1

</body>

</html>

Page

HTML By Saturngod

52


Frame2.html

<html>

<head>


</head>

This is frame 2

</html>

index.htmlindex.htmlindex.htmlindex.html

<html >

<head>


</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


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


<head>


</head>

<frameset cols="20%,30%,*">

<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>


</head>

<frameset rows="20%,30%,*">




</frameset>

<noframes><body>

</body>

</noframes></html>

Page

HTML By Saturngod

55


ဘာေျပာငးသြားသလဆေတာ frameser ပါ။ cols ကေန rows ျဖစသြားပါတယ။ cols န႕ rows ေလးပ ကြာတာပါ။ ကနတာ

အတတပါပ။ frame အထမာလညး ထပျပး ထပမခြထတလ႕ရပါေသးတယ။ အခ အေပၚဆးက rows က column ထပျပး

ခြပါမယ။

<html>

<head>


</head>


<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">


<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>

</frameset>



</frameset>

<noframes><body>

</body>

</noframes></html>

Page

HTML By Saturngod

56


အဒမာ <frameset> ေအာကမာ <frameset> ထပထညထားတာက ေတြ႕ရမာပါ။





</frameset>

ကၽြနေတာတ႕ အေပၚဆးက rows က ထပျပး cols ခြတာပါ။ ဒါေၾကာင အေပၚဆး rows မာ columns ႏစချဖစသြားပါျပ။ ဒါေၾကာင

<frame> ႏစခ ေရးရတာပါ။ တကယလ႕ ဒတယ rows မာပ colums ထပထညခငရငေတာ code က ဒလေလးျဖစသြားမာပါ။

<html>

<head>


</head>



Page

HTML By Saturngod

57





</frameset>


</frameset>

<noframes><body>

</body>

</noframes></html>

ရငးရငးေလးပါ။ ဒတယ rows မာ ျဖစေစခငလ႕ ဒတယ rows မာ frameset တစခထပထညရတာပါ။ အလမးပ columns

ေတြထမာ rows ေတြ ခြလ႕ရပါတယ။ အတတပါပ။ အေပၚက rows ေနရာမာ cols ေျပာငးျပးေတာ cols ေနရာမာ rows

ေျပာငးလကရင သမာပါ။ ကၽြနေတာ မေရးျပေတာဘး။ ကယတငပ ေရးျပး စမးၾကညလကေပါ။

Page

HTML By Saturngod

58


အခ ဒစာအပရ႕ ေနာကဆးအခနးက ေနာကဆး အေၾကာငးပါပ။ ဘာလဆရငေတာ Link And Frame ပါ။ Frame တစခက Link

က ႏပလကရင ေနာက frame တစခက ေျပာငးသြားဖ႕ပါ။ ကၽြနေတာ အကနလးက အေျခခေလာကပ ေျပာႏငမာပါ။ Web

ပငးမာ ေလလာစရာေတြ အမားၾကးပါ။ HTML ဆတာ လးဝ စကာစ အေျခခအဆငေလးပါ။ က.. ေနာကဆး အခနးေလး

ဆကလကရေအာင။

Link And Frame

Page

HTML By Saturngod

59


ကၽြနေတာတ႕ အေပၚမာ ေျပာဘးပါတယ။ ဘယဘကက 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


<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


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


ကၽြနေတာတ႕ေတြ ဘာေတြ ဆကျပးေလလာဖ႕လေသးလဆေတာ အမားၾကးပါ။ 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 က

ေသေသခာခာ တတကၽြမးထားဖ႕လပါတယ။