HTML မိတ္ဆက္api.ning.com/files/NjlEt9fkBhkFpTLnzulC04oXSun0... · HTML ကိုေလ့လာမယ္ 1.Starting To Creat and Edit Webpage Notepad ျဖင့္စတင္ျခင္း

HTML မတဆက

ယေန႕အခါမာ Internet ဟာအလြနကယျပန႕လာျပး လတငးနးပါးအသးျပၾကေပသည။ ကၽြနေတာတ႕ေတြဟာလညး In-

ternet ေပၚမာ ကယပငေနရာမားက ကယပင Homepage မားက အလြယတက ယေဆာငႏငေလျပ။ Internet ဆတာက

အကယရငးမေနေတာပါဘး။ အလြယရငးရရငေတာ Internet ဆတာ ကမာၻ ေပၚရ ႏငငအခငးခငး ခတဆကထားေသာ

Network ကြနယကၾကးတစချဖစပါသည။ အဒလ Information ေတြ ဖလယဖ႕အတြက Web Page ေတြက ေရးဆြရပါတယ။

Web Page ေရးဆြဖ႕ရာအတြက HTML ဟာ အဓက ကပါတယ။ ေရးသားထားတ Web Page ေတြက Web Browser Soft-

ware န႕ ၾကညရႈရပါတယ။ 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 For Web Design Suit HTML မတဆက

Page 1

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 ထတြင အခလေရးသားလကပါ။

<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 အဖြင န႕ အပတၾကားမာ

မမ၏ ႏစသကရာ စာမားေရးသားႏငသည ။

HTML For Web Design Suit HTML ကေလလာမယ

Page 2

၂. အဒါက တေနရာ မာ 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 ေလးက dou-

ble click လပျပး ဖြငလကပါ ။

ဒါဆ page ေလးတစခတကလာတာက ျမငရပါမယ။

ထပပငးတြင 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 လပလ႕မရပါဘး။


Page 3

Header Tag

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>

<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 လပပေလးေတြ ဆကေျပာပါမယ။ လြယပါတယ။


Page 4

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

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

အလမးေရးလ႕ရပါတယ။ တခ႕လေတြက ေမးတတတယ။


Page 5

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

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


Page 6

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>


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


Page 7

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

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

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

အေၾကာငးေလးန႕ စလကရေအာင။

Body Color

<html>

<head>


</head>

<body bgcolor=silver>

Body BGCOLOR

</body>

</html>


Page 8

အဒ code ေလးက run လကရငေတာ အရငကလ background color က အျဖေရာငမဟတေတာပ

စမးႏေရာငေလးျဖစေနတာက ေတြ႕ရပါမယ။

ေအာကက Table မာ အသးမားတ color 16 ေရာငနာမညေတြပါ။

Silver Gray Maroon Green Navy Purple Olive TealWhite 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>

</html>

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

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


Page 9

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

Hr Attribute

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

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

<html>

<head>


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

ကေတာ မမၾကကႏစသကတအေရာငထညလ႕ရပါတယ။

List

List ပငးမာ order list န႕ unorder list ဆျပးရပါတယ။ တနညးအားျဖင နပါတစဥန႕ list န႕ နပါတစဥေတြမပါတ list ေပါ။

ေနာကျပး defination list ဆတာရပါေသးတယ။ လသးနညးပါတယ။ ပထမဆး unorder list အေၾကာငးေလးသြားရေအာင။

Unorder list


Page 10

<html>

<head>


</head>

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

<h5>Square</h5>

<ul type="square">

<li>First Item</li>


<li>Third Item</li>

</ul>

<h5>Circle</h5>

<ul type="circle">


Page 11

<li>First Item</li>


<li>Third Item</li>

</ul>

</body>

</html>

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

Ordered List

<html>

<head>


</head>

<body>

<h3>Ordered List</h3>

<ol>

<li>First Item</li>


<li>Third Item</li>

</ol>

</body>

</html>

<ol> ကေတာ order list ပါ။ အဒ code ေလးက run လကရင နပါတ

အစဥလကေပၚလာပါလမမယ။

သ႕မာလညး attribute ေတြရပါတယ။

<html>

<head>


</head>

<body>

<h3>Ordered List</h3>

<ol type="1">

<li>First Item</li>


Page 12


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


<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 ပါ။


Page 13

Definition List

အမားအားျဖင အဓပၸာယဖြငဆခကေတြမာ သးပါတယ။

<html>

<head><title>Example</title></head>

<body>

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

ေသေသခာခာ သရေအာင ေနာကထပ တစခနးသြားရေအာင။


Page 14

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>


<body>

<center>

This is center

</center>

</body>

</html>

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

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

<html>


<body>

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

</body>

</html>

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

Marquee

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

HTML For Web Design Suit Creating Web Page With Apperance And Link

Page 15

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

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>


Page 16

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 ပငးက ဆကလကေလလာရေအာင။

Font

Font ကေတာ HTML မာအေရးပါတ အပငးပါ။ Web Page တစခမာ ကယလခငတ font ကေျပာငးလဖ႕အတြက font tag

ကသမ ျဖစမာပါ။။

<html>


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


Page 17

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 ခနတာေပါ။ ကယစာပဒေလးက တစတညးတစသန႕ထ ေဖာျပခငတ

အခါမာ သးၾကပါတယ။

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

Page Link And Image Link

Page Link လပတယဆတာကေတာ page တစခကေန ေနာက page တစခက ခတဆကထားပါတယ။ ေအာကက exam-

ple ပေလးက ၾကညလကရင နားလညႏငပါတယ။

ကၽြနေတာတ႕ေတြ 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>



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

</body>

</html>

Gallery.html

<html>

<head><title>Example</title>

<body>



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

</body>

</html>

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

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

ဘာေတြကြာလ။

 အဒါက comment ေရးထားတာပါ။  ၾကားမာ ေရးထားတ စာေတြက အလပမလပပါဘး။

ကၽြနေတာတ႕ home page က ဘာလ႕ index.html န႕ သမးရလဆ web page ေတြမာ စတကတ page က index.html


Page 19

ပါ။ ဒါမ မဟတ 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:\exam-

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

ေတြကလညး တကရကေခၚလ႕ရပါတယ။ im-

age ပငးေတြက ကၽြနေတာ ေနာကပငး

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


Page 20

ဒပတလမးေၾကာငးေတြ အေၾကာငးေကာငးေကာငးသဖ႕လပါတယ။ ဘာျဖစလ႕လညးဆ ကယ 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>

<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 လ႕ေခၚတာပါ။


Page 21

Image ပငးမာ ေျပာစရာေတြ ေတာေတာမားပါတယ။ သ႕မာ attribute ေတြထပရေသးတယ။ ဘာလညးဆေတာ text align

ေပါ။ text align က img code ထမာ align ဆတ attribute ကသးတယ။

Align ရငးျပခက

top စာတစေၾကာငးက ပရ႕ ေဘးနားက align မာ အေပၚဆးမာ ေဖာျပေပးတာပါ။

bottom သကေတာ default ပါ။ စာသားက ပေအာကဘကမာ ေဖာျပတာကေတြ႕ရပါမယ။

middle စာသားက ပအလယမာ မာေပးတာပါ။

left သကေတာ ပက page ရ႕ ဘယဘကကပ႕လကျပး စာသားအကနလးက ပေဘးမာ ေဖာျပေပးတာပါ။

right သကလညး Left န႕ အတတပါပ။ ညာဘကက ပေရြ႕သြားျပ စာသားအားလးက ပရ႕ ဘယဘကမာ

ေဖာျပေပးပါမယ။

ပ : img top

ပ : img bottom

ပ : img middle

ပ : img left


Page 22

ပ : img right

အခဆရင image န႕ပတသကျပး ေတာေတာေလးသေလာကျပ

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

ႏပလကမ ပအၾကးၾကးေျပာငးသြားသလမးေလးေပါ။ ပ size က

width န႕ height attribute န႕ ခတာမဟတဘးေနာ။ ပႏစပ။

တစပက အၾကး ၊ ေနာကတစပက အေသးေပါ။ Photo ေတြက

size ေသးတာက ျပထားျပး ပက 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 က ဖတလကတာန႕ နားလညမယထငပါတယ။ အမာ ေမးစရာတစခထြကလာတယ။ bor-

der ဆတာဘာလေပါ။ ကၽြနေတာတ႕ href က သးလကတ အခါ image မာ အျပာေရာင border ျဖစသြားတယ။

အဓပၸာယကေတာ Link ရတယေပါ။ အဒါေလးက မေပၚခငလ႕ ေဖာကလကတာပါ။


Page 23

ပ : border မေဖာကထားေသာ န႕ image ပ : border ေဖာကထားေသာ ပ

အခဆရငေတာ ကၽြနေတာတ႕ေတြ link ေတြ လပတတသြားျပ။ page တစခကေန တစခက ေခၚတတသြားျပ။ ပေတြ

ထညတတသြားျပ။ အခအခနးမာ ကၽြနေတာက sample ေသးေသးေလးေတြပ ျပသြားတယ။ ကယတင စမးၾကညပါ။ ေပာဖ႕

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

ေဆာကလ႕မရေသးတာက ေတြ႕မာပါ။ ကၽြနေတာတ႕ table လအပေနေသးတာပါ။ ေနာကတစခနးမာ table န႕ frame

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


Page 24

Table And Frame

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 အေၾကာငးေလးပ ဆကလကရေအာင။

HTML For Web Design Suit Table And Frame

Page 25

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

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

<head>

<title>Example Table</title>

</head>

<body>

<table>

<tr> 

<td> 

Row

</td>

<td>

Row

</td>

</tr>

</table>


Page 26

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

3

</td>

</tr>

<tr> 

<td> 

4

</td>

<td>

5

</td>

<td>


Page 27

6

</td>

</tr>

</table>

အဒ Example က ၾကညလကရင နားလညႏငမလားမသဘး။ ကၽြနေတာတ႕ေတြ row ၂ ခန႕ column ၃ ခ ရတ ta-

ble တစခတညေဆာကခတာပါ။ table ပငးက ရႈပတယလ႕ ထငခငထငေနပါလမမယ။ ဟတပါတယ။ ရႈပပါတယ။

ဒါေပမယ နားလညသြားရင လြယျပး သးလ႕ေကာငးပါတယ။ ကၽြနေတာတ႕ေတြ table ပငးက ေသေသခာခာေလး

ေလလာဖ႕လပါလမမယ။ က... ေနာကထပ example တစခ ထပလပၾကညရေအာင ။ အခ ကၽြနေတာတ႕ေတြ row ၃ ခ

column ၃ ခ ရတ table တစခက ေဆာကၾကညရေအာင။

row ၃ခ ျဖစလ႕ <tr></tr> ၃ခပါမယ။ column ၃ ချဖစလ႕ <tr>န႕ </tr> ၾကားမာ <td></td> ၃ ခပါမယ။ အလေလး

စဥးစားလ႕ရသြားျပဆရင စျပး code ေရးၾကညရေအာင။

<html>


<body>

<table>

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


Page 28

က... အခေလာကဆ နားလညေလာကျပထငတယ။ ကၽြနေတာတ႕ ေရ႕ဆကရေအာင။ ကၽြနေတာတ႕ေတြဟာ ta-

ble ရ႕ width က ထနးခပႏငပါတယ။ table ရ႕ width က သတမတတအခါမာ % န႕သတမတတာန႕ pixel န႕

သတမတတာရယရပါတယ။

table ရ႕ width သာမက <td> ရ႕ width ေတြကပါသတမတႏငပါတယ။ % န႕ သတမတတာန႕ Pixel န႕ သတမတတာ

ဘာကြာသလဆရငေတာ % ကေတာ broswer ရ႕ အေပၚမာ မတညျပး width ကေျပာငးလပါတယ။ pixel ကေတာ

မေျပာငးလဘးေပါ။ အေသေပါ။ % န႕ဆရင broswer ခ႕လကတာန႕ လကကယသြားပါတယ။ pixel န႕ဆရငေတာ brows-

er ကယလညး လကမကယသြားပါဘး။ က.. စလကရေအာင။

<html>


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

အဒမာဆရင 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>



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


Page 30


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

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


Page 31

border က ႏစထပျဖစေနတာက ေတြ႕ရပါလမမယ။ အဒါက cell padding ေၾကာငပါ။ cell padding န႕ cell spacing ဆျပး

ႏစမးရပါတယ။

cellpadding ဆတာကေတာ table အတြငး border န႕ စာ ေနရာအကြာအေဝးပါ။ cellpadding မားလာေလေလ စာက

အတြငးက ဝငေလေလျဖစမာပါ။ အခ cellpadding က 30 ထားလကတအခါမာ စာသားေတြန႕ border အရမးကသြားတာက

ေတြ႕ရပါလမမယ။

<table width="100%" border="1" cellpadding="30" bordercolor="#0066CC" >


Page 32

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 33

၂ ခပပါေတာမယ။ အဒါကေတာ 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>

</tr>

</table>

</body>

</html>

အေပၚက code မာ <td colspan="2"> ဆတာက ေတြ႕ႏငမယထငပါတယ။ အဒါကေတာ Cell ၂ ခေပါငးမယ

ဆတ အဓပၸာယပါ။ တကယလ႕ cell ၃ ခေပါငးခငရငေတာ <td colspan="3"> ပါ။ ကၽြနေတာ အလမး code


Page 34

ကေျပာငးေရးလကရင ဒလေတြ႕ရမာပါ။

<html>

<head>

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

</body>

</html>

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

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

<html>

<head>


Page 35


</head>

<body>

<table border="1">

<tr>

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

</table>

</body>

</html>


Page 36

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

</tr>

<tr>

<td>

Cell 3

</td>

</tr>

</table>

</body>

</html>

ပထမဆး Column မာ <td rowspan="2"> ဆတာေလးရပါတယ။ ပထမဆး Column မာ Row ၂


Page 37

ခကေပါငးမယ ဆတ အဓပၸာယပါ။ အေပၚမာ column ၂ ခရေပမယ ေနာကထပတစဆငမာေတာ

Column ၁ ခပရပါေတာမယ။ ဘာျဖစလ႕လညးဆရငေတာ First Column မာ သ႕ေအာကက First

Column န႕ ေပါငးလကေတာ Column တစခေပာကသြားတာေပါ။ ထပျပးရငးေအာင ေနာကထပ

example တစခ ထပျပပါမယ။

<html>

<head>


</head>

<body>

<table border="1">

<tr>

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


Page 38

</table>

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

</tr>

</table>

</body>


Page 39

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

</td>

<td bgcolor="#EABCDF">

Hex Color

</td>

</tr>

<tr bgcolor="#FF6699">

<td>

a

</td>

<td>

b

</td>

<td>


Page 40

c

</td>

</tr>

</table>

</body>

</html>

အဒမာဆရငေတာ <tr bgcolor="#FF6699"> ေၾကာင row တစခလး

အေရာငေျပာငးသြားတယဆတာက ေတြ႕ႏငမာပါ။ အခေလာကဆရငေတာ ta-

ble အေၾကာငးသေလာကပါျပ။ table က HTML န႕ေရးရတာ ေတာေတာလကဝငျပး

စတပကဖ႕ ေကာငးပါတယ။ Dreamweaver လမး software သးလကရငေတာ table

တစခေဆာကရတာ အရမးလြယပါတယ။ table က merge လပတာေတြကလညး dreamweav-

er မာ အလြယတကလပႏငပါတယ။ ဒစာအပမာ dreamweaver အေၾကာငးေျပာတာ မဟတပ

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

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

ဆကရေအာင။


Page 41

Frame

Frame ကေတာ HTML Page ႏစခ ထကမက တာေတြက စာမကႏာ တစခထ မာ ေဖာျပျခငတ

အခါေပါ။ ဘယလမးလ ဆေတာ

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

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

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

ဘယဘကက menu ျဖစျပး ညာဘကကေတာ menu က ႏပလကရင ေပၚလာမယ page ေပါ။

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

Frame1.html

<html>

<head>


</head>

<body>

This is frame 1

</body>

</html>

Frame2.html


Page 42

<html>

<head>


</head>

This is frame 2

</html>

index.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 ကေတာ အဓကေပါ။

index.html က ၾကညလကပါ။ ထးျခားတာ

တစခပါ ပါတယ။ အဒါကေတာ <body>

မပါျခငးပ။ frame ရ႕ Main Page ဟာ Body

ထညစရာမလပါဘး။ frameset ပ ထညရမာပါ။

HTML မာ frame သးရတာ လကဝငလပါတယ။

အေကာငးဆးကေတာ IDE ေတြထက

Dreamweaver ကအသးျပလကရငေတာ လြယလငတက frame ကေရးသားႏငမာပါ။ အခေတာ

သေအာင ကယတငပ ေရးၾကညရတာေပါ။


Page 43

<frameset> န႕ စျပး </frameset> န႕ ေရးရပါမယ။cols ဆတာကေတာ column အေရအတြကေပါ။

အခ column ၂ ခပပါတအတြက cols="80,*" လ႕ေရးလကပါတယ။ အဒ အဓပၸာယက ေရ႕က column

အကယက 80 px ယမယ ေနာကကေတာ ကနတာ အကနယဆတ အဓပၸာယပါ။ ကၽြနေတာတ႕ per-

centage န႕လညး အသးျပလ႕ရပါတယ။ 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.html

<html>

<head>


</head>

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

<frame src="frame1.html" />




Page 44

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

ဘာေျပာငးသြားသလဆေတာ frame-

ser ပါ။ cols ကေန rows ျဖစသြားပါတယ။

cols န႕ rows ေလးပ ကြာတာပါ။ ကနတာ

အတတပါပ။ frame အထမာလညး ထပျပး

ထပမခြထတလ႕ရပါေသးတယ။ အခ အေပၚဆးက

rows က column ထပျပး ခြပါမယ။

<html>

<head>


</head>


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



Page 45

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

noresize>

</frameset>



</frameset>

<noframes><body>

</body>

</noframes></html>

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




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

noresize>

</frameset>

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

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


Page 46

ထပထညခငရငေတာ code က ဒလေလးျဖစသြားမာပါ။

<html>

<head>


</head>





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

</frameset>


</frameset>

<noframes><body>

</body>

</noframes></html>

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

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

ေျပာငးျပးေတာ cols ေနရာမာ rows ေျပာငးလကရင သမာပါ။ ကၽြနေတာ မေရးျပေတာဘး။ ကယတငပ


Page 47

ေရးျပး စမးၾကညလကေပါ။

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

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

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

ဆကလကရေအာင။

Link And Frame

ကၽြနေတာတ႕ အေပၚမာ ေျပာဘးပါတယ။ ဘယဘကက Link က ႏပလကရင ညာဘကမာ သကဆငရာ Page က

ေျပာငးသြားမယဆျပးေတာ။ အခအလမး ဘယဘကက frame ကေန ႏပလကရင ညာဘကက frame မာ သကဆငရာ


Page 48

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>

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


Page 49

</html>

အမာ link ေတြအကနလးမာ target ဆတာေလး ပါတာကေတြ႕ရပါလမမယ။ ကၽြနေတာတ႕ index.html မာ name="main"

ဆတ frame မာ သြားေပၚမယဆတ အဓပၸာယေပါ။ download ဆတာက ႏပလကရင ညာဘကက frame မာ down-

load.html ဆတ page ေလးေပၚသြားပါမယ။ Home ကႏပလကလညး home.html ဟာ ညာဘကက frame မာပ

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

အခဆကျပး နညးနညးအပေလး ထညေျပာျပရေစ။

menu.html page ထမာပ home.html ေလးက လမးျပး ေခၚျပတနညးပါ။ အဒါေလးကေတာ အသးဝငပါတယ။ Home Page


Page 50

မာ 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 51