html မိတ္ဆက ္ - · pdf fileျဖစ္ေနပါလ ိမ့္မယ္။...

1 | P a g e HTML BY SATURNGOD

http://saturngod.mysteryzillion.com

HTML မတဆက

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

ကၽြနေတာတ႕ေတြဟာလညး Internet ေပၚမာ ကယပငေနရာမားက ကယပင Homepage မားက အလြယတက

ယေဆာငႏငေလျပ။ Internet ဆတာက အကယရငးမေနေတာပါဘး။ အလြယရငးရရငေတာ Internet ဆတာ

ကမာၻ ေပၚရ ႏငငအခငးခငး ခတဆကထားေသာ Network ကြနယကၾကးတစချဖစပါသည။ အဒလ Information

ေတြ ဖလယဖ႕အတြက Web Page ေတြက ေရးဆြရပါတယ။ Web Page ေရးဆြဖ႕ရာအတြက HTML ဟာ အဓက

ကပါတယ။ ေရးသားထားတ Web Page ေတြက Web Browser Software န႕ ၾကညရႈရပါတယ။ Web Broswer

Software ေတြက Internet Explorer န႕ Firefox တ႕က နာမညၾကးေတြပါ။

HTML History

1989 ခက Tim Berners-Lee န႕ Rober Calliau ဟာ Research Documents ေတြက ပမျမနဆနေကာငးမြန မယ

နညးလမးက ရာေဖြခပါတယ။ ၂ ႏစ ေလာကၾကာေတာ Berners-Lee ဟာ browser ေတြက ၾကညရႈဖတသားႏငျပး

Tag မားႏင ဖြ႕စညးတညေဆာကထားတ နညးပညာတစခက ျပလပႏငခပါတယ။ ထ႕ေနာကအဒ tage ေတြထမာ

Hyper-Link န႕ document အခငးခငးခတဆကႏငတ tag ေတြပါထညသြငးႏငခပါသည။ Berners-Lee ရ႕

နညးပညာက Hyber Text Markup Language ဆတ HTML ပါပ။

Tag ဆတာဘာလ

Tag ဆတာကေတာ ရးရး Text ေတြန႕ HTML code ေတြက ခြျခားလ႕ရေအာငလပထားတာပါ။

ဘယလမးလဆရငေတာ <b>This is bold </b> ဆရင web browser န႕ ၾကညရင စာလးဟာ bold

ျဖစေနပါလမမယ။ အဒမာ <b> န႕ </b> တ႕ဟာ tag ေတြပါ။ အမားအားျဖင tag ေတြဟာ အဖြင န႕ အပတပါ

ပါတယ။ အပတဆရင / ေလးခထားေပးရပါတယ။

HTML အတြက Editor

HTML အတြက Editor ေတြ IDE ေတြအမားၾကးရပါတယ။ ကၽြနေတာကေတာ Dreamweaver အၾကကဆးပါပ။

သက HTML မတတရငေတာင Website တစခဆြလ႕ရပါတယ။ ဒါေပမယ Dreamweaver ကသးရငေတာ HTML

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

သမားေတြေပးထားတ website template ကျပငခငတယ။ ကယပငေသေသခာခာ HTML code

ေတြကသခငတယ။ ဒါဆရငေတာ ေလလာကာစမာ Notepad သးျပးေလလာပါ။ ေလကငပါ။ HTML က web site



ဆြရတ အထမာ အလြယဆးန႕ အေျခခအကဆးပ။ သ႕ကေသေသခာခာနားလညထားမ တျခား web

programming ေတြျဖစတ PHP, ASP.NET , JSP , Ruy On Rail တ႕မာ အေထာကအကျဖစမာပါ။

HTML ကေလလာမယ

1.Starting To Creat and Edit Webpage

Notepad ျဖငစတငျခငး

၁. Windows Key + R က ႏပလကပါ။ Run Dailog Box တကလာပါမည။ ထ႕ေနာက notepad လ႕ရကလကပါ။

ျပးလင OK က ႏပလကပါ။ ဒါဆရင notepad တကလာပါလမမယ။

၂. Notepad ထတြင Format ေအာကက word warp က check လပထားပါ ။ ဘာျဖစလ႕လညးဆရငေတာ Word

Warp က Notepad မာစာရကတာ ျပညသြားရင ေအာကတစေၾကာငး ဆငးသြားရနအတြက ျဖစသည။

HTML စတငေရးသားျခငး

၁. Notepad ထတြင အခလေရးသားလကပါ။



<html>

<head>

<title>This is title</title>

</head>

<body>

This is body

</body>

</html>

HTML န႕ စျပး HTML န႕ျပနပတရပါတယ။ အဒၾကားမာ html code

ေတြေရးရပါတယ။ Head Tag န႕ Head Tag အပတၾကားတြင Title

ထညထားသညက ေတြ႕ရမည။ Title သည Browser ၏ ထပ bar တြင

ေတြ႕ျမငရနျဖစသည။ Body အဖြင န႕ အပတၾကားမာ မမ၏ ႏစသကရာ

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

၂. အဒါက တေနရာ မာ save သြငးလကပါ။ Save Dialog box

တကလာရင filetype က All file လ႕ေပးလကပါ။ file name က firstrun.html လ႕ေပးလကပါ။ firstrun သည

မမ၏ ႏစသကရာ နာမညေပးႏငသည။ .html သည file extension ျဖစသည။ HTML ေရးထားေသာ page မားက

.html ႏင .htm လ႕ေပးမသာ browser တြင ေပၚပါလမမည။

၃. Save သြငးလကေသာ file လမးေၾကာငးက သြားလကပါ ။ first.html file

ေလးက double click လပျပး ဖြငလကပါ ။

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



ထပပငးတြင File ပတလမးေၾကာငးက address bar

တြငေတြ႕ရမညျဖစသည။ title tag ထတြင ေရးထားေသာ This is tile

ဆေသာ စာက Windos ၏ Title bar ႏင Tab Title bar တ႕တြင

ေတြ႕ရမည။ Body tag ထတြင ေရးထားေသာ This is body ဆေသာ

စာသားက စာမကႏာအျဖေပၚတြင ေပၚေနသညက ေတြ႕ရမညျဖစသည။

ျပငမယဆရငေတာ

IE7 မာဆရင

Page > View Source ကႏပလကပါက Notepad န႕ ကယေရးထားတ HTML ပြငလာပါမယ။

IE 6 မာဆရင

View > Source က ႏပလကပါက Notepad န႕ ကယေရးထားတ HTML ပြငလာပါမယ။

အဒမာ ေရးထားတ codeေတြက ဖတႏငသလ ကယစကထမာေရးထားတ page ဆရငေတာ ျပငျပး တစခါတညး

save လပႏငပါတယ။ Internet ေပၚက Web site ေတြကေတာ view > source ကေနဖြငျပငျပး save

လပလ႕မရပါဘး။

Header Tag



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

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>

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

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

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>

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

</html>



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

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

တစချဖစတ <hr> ရ႕ 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

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

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


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

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

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



2.Creating Web Page With Apperance And Link

ကၽြနေတာတ႕ေတြ အစပငးမာ bold,italic,underline တ႕က သချပးပါျပ။ အခ ဒအခနးမာေတာ အရငဆး font

အေၾကာငးေလး စေျပာပါမယ။ ကၽြနေတာတ႕ေတြ font ေတြေျပာငးမယ။ font size ေတြေျပာငးမယ။ စာလးေတြမာ

color ေတြထညမယ။ အဒါေတြက အျပင page တစခန႕ တစခ link ခတတာေတြလညး ပါဝငမာပါ။ အဒါေတြက

မေျပာခငမာ <center> အေၾကာငးေလးန႕ စလကရေအာင။

Optional Tag

Move To Center

သက စာလးေတြက center ေရာကေအာငလပေပးပါတယ။

<html>


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


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

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>

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 Link And Image Link Page Link လပတယဆတာကေတာ page တစခကေန ေနာက page တစခက ခတဆကထားပါတယ။ ေအာကက

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

ကၽြနေတာတ႕ေတြ Home Page ကေန Gallery Page က Go To Home ဆတ စာလးေလး ႏပလကတာန႕

ကးသြားမယ။ ေနာကျပး Gallery ကေနလညး Home Page က Home ဆတ စာလးေလးက ႏပလကတာန႕ Home

page က ျပနေရာကသြားမယ။ အဒလမးေလး ျဖစေအာင ကၽြနေတာတ႕ ေအာကကအတငး ေရးလကမယ။ File ၂

ခရရမယေပါ။ index.html န႕ gallery.html ေပါ။ ေနရာအတတပ သမးထားေနာ။ C:\example\index.html န႕

C:\example\gallery.html အလမးေလး ေနရာအတတျဖစရမယ။

Index.html

<html>

<head><title>Example</title>

<body>

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

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

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

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

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

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

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

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

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

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

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

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

ျပညျပညစစျဖစေအာင ေဆာကလ႕မရေသးတာက ေတြ႕မာပါ။ ကၽြနေတာတ႕ table လအပေနေသးတာပါ။

ေနာကတစခနးမာ table န႕ frame ေတြအေၾကာငး ေျပာျပပါမယ။

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

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

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

<head>

<title>Example Table</title>

</head>

<body>

<table>

<tr> 

<td> 

Row

</td>

<td>

Row

</td>

</tr>

</table>

</body>

</html>

Table တစခစတငျပဆရငေတာ

၁။ <table>န႕ စျပး </table> န႕ပတရမာပါ။

၂။ ကယထညခငတ Row အေရအတြက ရသေလာကက <tr></tr> ကသးရမာပါ။ ကယက row ၂

ခလခငတယဆပါစ႕။ဒါဆရင <tr></tr><tr></tr> ဆျပး ႏစခသးရမာေပါ။

၃။ကယထညခငတ column အေရအတြက ရသေလာကက <td></td> ကသးရမာပါ။ <td></td> က <tr> န႕

</tr> ၾကားမာ ထညျပးသးရမာပါ။ ကၽြနေတာတ႕ column ၂ ခဆရင <tr><td></td><td></tr> ဒါဆရင

column ၂ ခေပါ။

က... ကၽြနေတာတ႕ေတြ row ၂ ခ column ၃ ခလပမယေပါ။

row ၂ ချဖစတအတြကေၾကာင <tr> </tr> ၂ ခသးရမယ။ column ၃ ချဖစလ႕ <td></td> က ၃ ခသးမယ။

ပထမ row မာ ၃ခဆ အျခား row ေတြမာလညး ၃ချဖစမ table ေပၚလာမာပါ။

<table>

<tr> 

<td> 

1

</td>

<td>

2

</td>

<td>

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



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

ကၽြနေတာတ႕ေတြဟာ table ရ႕ width က ထနးခပႏငပါတယ။ table ရ႕ width က

သတမတတအခါမာ % န႕သတမတတာန႕ pixel န႕ သတမတတာရယရပါတယ။

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

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

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

pixel န႕ဆရငေတာ browser ကယလညး လကမကယသြားပါဘး။ က.. စလကရေအာင။

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

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


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



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

spacing ဆျပး ႏစမးရပါတယ။

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

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

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

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

cellspacing ကေတာ cell တစခန႕ တစခၾကား အကြာအေဝးေပါ။ အခ border ဟာ

ႏစထပျဖစေနတာကေတြ႕ရပါလမမယ။ အဒါက တစထပတညး ျဖစခငရငေတာ cellspacing က 0 ေပးလကရပါပ။

<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >



က... အခဆရငေတာ နညးနညးေလး သလာျပထငတယ။ ဒေလာကထ နားလညျပဆရင ကၽြနေတာတ႕ေတြ cell

ေတြက merge လပတာေတြက စလကရေအာင။ နားမလညေသးရငေတာ ကယတင လကေတြ႕

စမးသပၾကညဖ႕လပါတယ။ table ပငးက ထငသေလာက မရႈပပါဘး။ လကေတြ႕လပလကရင နားလညသြားမာပါ။

Cell Merge

Cell Merge ပငးကေတာ table ပငးက ေသခာသထားရင နားလညလြယမယလ႕ထငပါတယ။ Cell Merge ကေတာ

Cell ႏစခ ဒါမမဟတ Cell ႏစခထက ေပါငးတာေပါ။ Cell Merge က ဒလေပါငးရမာပါ။ table တစခက စခတနးက

row ေတြက <tr> န႕ေရးရမာပါ။ <tr> တစခမာ <td> ၂ ခပါရင ေနာကထပ <tr> မာလညး <td> ၂

ခပါဝငရမာပါ။ ဒါေပမယ cell ေတြက merge လပလကရင အနညးငယ ေျပာငးလကနပါတယ။ အေပၚမာ column

သးခ ။ ဒါေၾကာင <td> ၃ ခပါမယ။ ဒါေပမယ ေအာကမာက column ၃ ခမာ ႏစခက ေပါငးလကတယ။ ဒါဆရင

cell က ၂ ခပရေတာမယ။ ဒါဆရငေတာ <td> ၂ ခပပါေတာမယ။ အဒါကေတာ column merge

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

<html>

<head>


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

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

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


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



အဒက 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 ၂ ခကေပါငးမယ

ဆတ အဓပၸာယပါ။ အေပၚမာ 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>

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

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

c

</td>

</tr>

</table>

</body>

</html>



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

ေတြ႕ႏငမာပါ။ အခေလာကဆရငေတာ table အေၾကာငးသေလာကပါျပ။ table က HTML န႕ေရးရတာ

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

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

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

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

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

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

ဘယလမးလ ဆေတာ

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

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

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

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

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

Frame1.html

<html>

<head>


</head>

<body>



This is frame 1

</body>

</html>

Frame2.html

<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

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

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

<html>

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

ဘာေျပာငးသြားသလဆေတာ 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>

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





</frameset>

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

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

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



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

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

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

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

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

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

အေျခခအဆငေလးပါ။ က.. ေနာကဆး အခနးေလး ဆကလကရေအာင။



Link And Frame

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

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

သကဆငရာ Page ေျပာငးသြား ေအာငလပပါမယ။ ပထမဆး frame ၂ ခအတြက index.html ကစေရးပါမယ။

<html>

<head>

<title>Menu</title>

</head>

<frameset cols="100,*">

<frame src="menu.html" id="menu">



<frame src="home.html" name="main">

</frameset>

<noframes></noframes>

</html>

အမာ.. name="main" လ႕ေပးခတာက ေတြ႕မာပါ။ အလမးနာမည ထညခမ menu ကေန အဒ frame မာ

သြားေပၚဆျပး ေျပာလ႕ရမာ။ က.. အခ menu.html မာေရးထားတာက ၾကညလကရေအာင...

<html>

<head>

<title>Menu</title>

</head>

<body>

<a href="home.html" target="main">Home</a><br>

<a href="download.html" target="main">Download</a><br>

<a href="link.html" target="main">Link</a><br>

</body>

</html>

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

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

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

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



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

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 က ဒါအတြကေရးထားတာ" အေလာကပ စြမးေဆာင

ေပးႏငမာပါ။ ငါဒလဆြခငတယ။ ဒါေၾကာင ဒါက သးရမယ ဆတာကေတာ မမရ႕ အာရ ကြန႕ျမးမႈန႕ ဒစာအပက

ေပါငးျပး အသးခရရင ရႏငမာပါ။

ကၽြနေတာတ႕ေတြ ဘာေတြ ဆကျပးေလလာဖ႕လေသးလဆေတာ အမားၾကးပါ။ HTML က ဒစာအပ

အဆငေလာက သသြားျပဆရငေတာ CSS ကဆကျပး ေလလာဖ႕လပါတယ။ အဒႏစခတတျပးရငေတာ

နညးနညးေလး ေရးဆြရတာ လြယသြားေအာင Dreamweaver သးျပးဆြေစခငပါတယ။ ျပးရငေတာ Javascript

ေပါ။ အဒဟာေတြ ျပးသြားရင photoshop န႕ Flash နညးနညးသးတတဖ႕လပါတယ။ Webdesigner

တစေယာကအေနန႕ ေလလာဖ႕ေျပာတာပါ။ web developer အေနန႕လညး CSS , Javascript, Phtoshop, Flash

တ႕က အနညးအကဥးေလး သရနားလညထားဖ႕လပါတယ။ ျပးရင web programming ေတြ ေလလာရမာပါ။ .NET

သမားေတြဆရငေတာ ASP.NET ေပါ။ Java သမားဆရငေတာ JSP ရပါတယ။ အျခား လြယကစြာ

ေလလာခငရငေတာ php က အလြယဆးပါ။ ေနာကဆး technology ေတြန႕ ေကာငးေကာငးေရးလ႕ရတ Ruby On

Rails န႕ python တ႕ကလညး ေလလာႏငပါေသးတယ။ အမားၾကး ေလလာဖ႕ေတြရပါတယ။ ဥးစြာေတာ HTML က

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

CSS By Saturngod…… coming soon…………….