ကိုသံုးလို႕ရပါတယ္။ သူက အပိတ္ tag မပါလည္းရပါတယ္။ ထည့္ရင္ေတာ့ ပိုေကာင္းတာေပါ့။

About Notepad

Notepad is a basic text editing program and it is most commonly used to view or edit text files. A

Page 6

HTML For Web Design Suit           HTML ကိုေလ့လာမယ္

text file is a file type typically identified by the .txt file name extension.

Changes to the font style and size affect all the text in the document.




Click the Format menu, and then click Font.




Make your selections in the Font, Font style, and Size boxes.




An example of how your font will look appears under Sample.




When you are finished making font selections, click OK.

About Notepad

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.

How do I change the font style and size?

Changes to the font style and size affect all the text in the document.


Page 7

HTML For Web Design Suit           HTML ကိုေလ့လာမယ္



Click the Format menu, and then click Font.




Make your selections in the Font, Font style, and Size boxes.




An example of how your font will look appears under Sample.




When you are finished making font selections, click OK.

Unorder List

• First Item





• Second Item





• Third Item

က unorder list ပါ။
• ကေတာ့ list ေပါ့။ list ၁ ခုပဲဆိုရင္
• 1
။ ၂ခုဆိုရင္
• 1
• 2
လို႕ေရးပါတယ္။ အေပၚက code ကို run လုိက္ရင္ list ေလးေတြကို ျမင္ရမွာပါ။ အကုန္လံုးက အဝိုင္းေလးေတြနဲ႕ List ပါပဲ။ ကဲ အခု attribute ေလးထည့္ျပီး ပံုစံေျပာင္းၾကည့္ရေအာင္။

Unorder List

Disc




• First Item





• Second Item





• Third Item




Square




• First Item





• Second Item





• Third Item




Circle

Page 11

HTML For Web Design Suit           HTML ကိုေလ့လာမယ္




• First Item





• Second Item





• Third Item



unorder list မွာ disc, square, circle ဆိုျပီး ၃ မ်ဳိးေျပာင္းလို႕ရပါတယ္။ default ကေတာ့ disc ပါ။ Ordered List

Ordered List




1. First Item





2. Second Item





3. Third Item



ကေတာ့ order list ပါ။ အဲဒီ code ေလးကို run လိုက္ရင္ နံပါတ္ အစဥ္လိုက္ေပၚလာပါလိမ့္မယ္။ သူ႕မွာလည္း attribute ေတြရိွပါတယ္။

Ordered List

Page 12


1. First Item


HTML For Web Design Suit           HTML ကိုေလ့လာမယ္




2. Second Item





3. Third Item




Type A




1. First Item





2. Second Item





3. Third Item




Type a




1. First Item





2. Second Item





3. Third Item




Type a




1. First Item





2. Second Item





3. Third Item




Type i




1. First Item





2. Second Item





3. Third Item



Order List တြင္လည္း Unorder List ကဲ့သို႕ပင္ type မ်ားရိွပါတယ္။ အဲဒါေတြကို အေပၚက code မွာ ေဖာ္ျပထားပါတယ္။ order list က unorder list နဲကမတူတဲ့ အခ်က္ကေတာ့ နံပါတ္စဥ္လိုက္ျဖစ္ပါတယ္။ မိမိၾကိဳက္တဲ့ နံပါတ္ကေန စႏိုင္တယ္။ မိမိၾကိဳက္တဲ့ နံပါတ္ကစႏိုင္ဖို႕ start ဆိုတဲ့ attribute ကိုသံုးႏိုင္ပါတယ္။
မွာဆိုရင္ေတာ့ D ကေနစမွာပါ။ ဒါဆိုရင္ေတာ့ HTML နဲ႕ list ေတြပါတဲ့ web page ေလးေရးလို႕ရျပီေပါ့။ ေနာက္ထပ္ list တစ္ခုက်န္ပါေသးတယ္။ definition list ပါ။ Page 13

HTML For Web Design Suit           HTML ကိုေလ့လာမယ္

Definition List အမ်ားအားျဖင့္ အဓိပၸာယ္ဖြင့္ဆိုခ်က္ေတြမွာ သံုးပါတယ္။

Definition List











HTML





Language used to develop Web Pages





Image





Any graphic such as an icon,bullet, line, photo , or illustration









Defination List က အျခား List ေတြနဲ႕ မတူပါဘူး။ သူ႕မွာက defination term နဲ႕ defination ပါ ပါတယ္။ စရင္ေတာ့ dl နဲက စရပါတယ္။ defination term ကိုေတာ့
အသံုးျပဳျပီး defination ကိုေတာ့
သံုးပါတယ္။ သူက အျခား list နဲ႕မတူတဲ့ ေနာက္တစ္ခ်က္ကေတာ့ tag အပိတ္မပါတာပဲ။ တစ္ခုပဲပါတယ္ဆိုတာကို ေတြ႕ႏိုင္ပါတယ္။ ကဲ... အခုဆိုရင္ေတာ့ HTML ကိုအၾကမ္းအားျဖင့္ေလာက္ေတာ့ သိေလာက္ျပီေပါ့။ အခုကၽြန္ေတာ္တို႕ေတြ ေနာက္ထပ္ ေသေသခ်ာခ်ာ သိရေအာင္ ေနာက္ထပ္ တစ္ခန္းသြားရေအာင္။

Page 14

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

Creating Web Page With Apperance And Link ကၽြန္ေတာ္တို႕ေတြ အစပိုင္းမွာ bold,italic,underline တို႕ကို သိခဲ့ျပီးပါျပီ။ အခု ဒီအခန္းမွာေတာ့ အရင္ဆံုး font အေၾကာင္းေလး စေျပာပါမယ္။ ကၽြန္ေတာ္တို႕ေတြ font ေတြေျပာင္းမယ္။ font size ေတြေျပာင္းမယ္။ စာလံုးေတြမွာ color ေတြထည့္မယ္။ အဲဒါေတြကို အျပင္ page တစ္ခုနဲ႕ တစ္ခု link ခ်ိတ္တာေတြလည္း ပါဝင္မွာပါ။ အဲဒါေတြကို မေျပာခင္မွာ အေၾကာင္းေလးနဲ႕ စလိုက္ရေအာင္။

Optional Tag Move To Center သူက စာလံုးေတြကို center ေရာက္ေအာင္လုပ္ေပးပါတယ္။





This is center



This is center ဆိုတာေလးက အလယ္ပိုင္းကိုေရာက္ေနတာကိုေတြ႕ရပါမယ္။ အဲဒါေလးကို သံုးျပီး စာေတြကို အလယ္ပိုင္းကို ေရြ႕ထားလို႕ရပါတယ္။
Test
အဲဒီ code မွာဆိုရင္ေတာ့ header ေတြက အလယ္ကိုေရာက္ေနတာကိုေတြ႕ရပါလိမ့္မယ္။

Marquee marquee ကေတာ့ စာလံုးေတြကို ေရြ႕ေနဖို႕လုပ္ေဆာင္ေပးတာပါ။ Page 15

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

<marquee>I’m moving အဲဒီ code မွာဆိုရင္ စာသားေလးက ေရြ႕ေနတာကိုေတြ႕ရပါမယ္။ ဘယ္ဘက္ကေန ညာဘက္ကိုေရြ႕လာတာပါ။ Marquee မွာရိွတဲ့ attribute ေတြကေတာ့ Attribute Name

Properties

Descripton

behavior

alternate

ဘယ္ကေနညာ ၊ ညာကေန ဘယ္ျပန္သြား ပါတယ္။ <marquee behavior="alternate">I'm moving

scroll

သူက default value ပါ။ ဘယ္ကေန ညာ ၊ ညာဘက္ေရာက္သြားရင္ ဝင္သြားျပီး ဘယ္ဘက္ေန ျပန္စတာပါ။ <marquee behavior="scroll">I'm moving

slide

သူကေတာ့ ဘယ္ကေနညာ ျပီးရင္ ညာဘက္လည္းေရာက္ေရာ ရပ္သြားပါတယ္။ <marquee behavior="slide">I'm moving

direction

left

သူကေတာ့ default value ပါ။ ညာဘက္ကေန ဘယ္ဘက္ကိုသြားမယ္လို႕ ဆိုတာပါ။ <marquee direction="left" >I'm moving

right

သူကေတာ့ ဘယ္ဘက္ကေန ညာဘက္ကိုသြားမယ္လို႕ဆိုတာပါ။ <marquee direction="right" >I'm moving

up

သူကေတာ့ ေအာက္ကေန အေပၚလာမယ္လို႕ဆိုတာပါ။ <marquee direction="up" >I'm moving

down

သူကေတာ့ အေပၚကေန ေအာက္ဆင္းမယ္လို႕ဆိုတာပါ။ <marquee direction="down" >I'm moving

loop

[number]

သူကေတာ့ ကိုယ္ဘယ္ႏွစ္ၾကိမ္ marquee ကို လုပ္ခိုင္းမယ္ဆိုျပီး number တစ္လံုးထည့္ေပးရပါတယ္။ ၁ ဆို ၁ ၾကိမ္ပဲလုပ္မယ္ေပါ့။ <marquee loop="1" >I'm moving

scrollamount

[number]

တစ္ခါေရြ႕ရင္ ဘယ္ေလာက္ pixel ေရႊ႕မလဲဆိုျပီး ထည့္ေပးရတာပါ။ ထည့္လိုက္တဲ့ နံပါတ္မ်ားေလေလ ေဝးေဝးေရြ႕ ျမန္ျမန္သြားေလေလပဲ။ <marquee scrollamount="10">I'm moving

Page 16

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

scrolldelay

[number]

သူကေတာ့ ဘယ္ေလာက္ၾကာရင္ ေရႊ႕မလဲဆိုတာပါ။ သူက millisecond နဲ႕ပါ။ 1000 လို႕ထည့္လိုက္ရင္ 1 second ၾကာမွ တစ္ခါေရြ႕မွာပါ။ သူကေတာ့ နံပါတ္မ်ားေလေလ ၾကာေလေလပါပဲ။ <marquee scrolldelay="1000">I'm moving

bgcolor

[hex code] OR

သူကေတာ့ marquee ရဲ႕ back color အေရာင္ေလးပါ။ #009933 ဆိုရင္ေတာ့

[Color Name]

အစိမ္းေရာင္ေလးကို background ထားျပီး ေရႊ႕သြားမွာပါ။ color ပိုင္းကို ကၽြန္ေတာ္ အေပၚပိုင္းမွာ ေျပာခဲ့ျပီးပါျပီ။ <marquee bgcolor="#009933" >I'm moving

marquee ေလးလုပ္ရတာ ေပ်ာ္စရာေတာ့ေကာင္းပါတယ္။ စာလံုးေလးေတြက ေရြ႕ေရြ႕သြားတာေလးကို ၾကည့္ျပီး ေက်နပ္မႈေလးရႏိုင္ပါေစ။ အခု font ပိုင္းကို ဆက္လက္ေလ့လာရေအာင္။

Font Font ကေတာ့ HTML မွာအေရးပါတဲ့ အပိုင္းပါ။ Web Page တစ္ခုမွာ ကိုယ္လိုခ်င္တဲ့ font ကုိေျပာင္းလဲဖို႕အတြက္ font tag ကိုသိမွ ျဖစ္မွာပါ။။ Zawgyi Font ျဖင့္အသံုးျပဳထားသည္ အဲဒါဆိုရင္ နဲ႕ ၾကားမွာရိုက္ထားတဲ့ စာက zawgyi-one font နဲ႕ေပၚေနမွာပါ။ face="font name" ကိုထည့္ရတာပါ။ font tag မွာသံုးလို႕ရတဲ့ attribute ေတြကေတာ့ Name

Properties

Description

color

[hex code] OR

color ကေတာ့ သိျပီးသားပါ။ အေပၚမွာလည္း ကၽြန္ေတာ္ ေျပာခဲ့ဘူးပါတယ္။

[color name]

ဥပမာအေနနဲ႕ ဒီလိုသံုးလို႕ရပါတယ္ Zawgyi Font ျဖင့္အသံုးျပဳထားသည္

Page 17

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

size

[number]

သူကေတာ့ font ရဲ႕ အရြယ္အစားေျပာင္းတာပါ။ ပံုမွန္က size=3 ပါ။ စာလံုး size ၾကီးလိုလွ်င္ size=4 ကေန 7 ထိထည့္လို႕ရပါတယ္။ 1 ကေန 7 အထိရိွပါတယ္။ 3 ကေတာ့ ပံုမွန္စာလံုးပါ။ ေနာက္ျပီး +1 ကေန +6 ရိွပါတယ္။ ပံုမွန္ကို ဘယ္ေလာက္တိုးမယ္ဆိုပါ။ +2 ဆိုရင္ ပံုမွန္က 3 ဆိုေတာ့ 5 ျဖစ္သြားမွာေပါ့။ အဲလိုမ်ဳိးပဲ -1 ကေန -6 ထိရိွပါေသးတယ္။ -1 ဆိုရင္ ပံုမွန္က 3 ဆိုေတာ့ 2 ျဖစ္သြားမွာေပါ့။ ဒီလိုေလး သံုးလို႕ရပါတယ္။ Zawgyi Font ျဖင့္အသံုးျပဳထားသည္ Zawgyi Font ျဖင့္အသံုးျပဳထားသည္ Zawgyi Font ျဖင့္အသံုးျပဳထားသည္

ဒါေတြကေတာ့ အျခား text formatting tags ေတြပါ။ အခ်ဳိ႕ကေတာ့ အေပၚမွာေျပာခဲ့ဘူးပါတယ္။ Tag

Description



ဒါကိုေတာ့ အေပၚမွာလည္း ေျပာျပီးပါျပီ။ သူက font ကို blod လုပ္တာပါ။



သူကလည္း bold လုပ္တာပါပဲ။




ဒါကေတာ့ tab ခုန္တာေပါ့။ ကိုယ့္စာပိုဒ္ေလးကို တစ္တည္းတစ္သနု္႕ထဲ ေဖာ္ျပခ်င္တဲ့ အခါမွာ သံုးၾကပါတယ္။



italic လုပ္တာကို အေပၚမွာေျပာခဲ့ဘူးပါတယ္။

<pre>

ဒီ code ကိုလည္း သိမွာပါ။ ကၽြန္ေတာ္တို႕ေတြ enter ေတြ tab ေတြမလိုပဲ သံုးခဲ့တာေလ။

<small>

သူကေတာ့ စာလံုးကို ပံုမွန္ထက္ ေသးေအာင္ လုပ္ေပးတာပါ။

<strike>

အဲဒါေလးကေတာ့ စာလံုးေတြရဲ႕ အလယ္မွာ မ်ဥ္းသားလိုက္တာပါ။

<sub> <sup>

သူကေတာ့ စာလံုးကို ေအာက္နားဆင္းတာေလးေပါ့။ H2 လိုမ်ဳိးေလးအတြက္ေပါ့။ သူကေတာ့ စာလံုးကို အေပၚတင္တာပါ။ 22 လိုမ်ဳိးေပါ့။



ဒါက typing font ကိုေျပာတာပါ။ typing ရိုက္သလို စာလံုးေပၚေအာင္အတြက္ပါ။



ဒါကိုေတာ့ သိျပီးေလာက္ျပီလို႕ထင္ပါတယ္။ underline တားတာပါ။

အခုဆက္ျပီးေတာ့ Link ေတြအေၾကာင္းေျပာပါမယ္။ Link ကေတာ့ Web Page မွာအဓိက အခန္းက ပါဝင္ပါတယ္။ Page တစ္ခုနဲ႕ တစ္ခု ခ်ိတ္ဆက္ထားဖို႕ အတြက္ Link ခ်ိတ္တတ္ဖို႕လိုပါတယ္။

Page 18

HTML For Web Design Suit           Creating Web Page With Apperance And 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 Gallery Gallery.html Home အေပၚက code ကိုမရွင္းျပခင္ ေမးခ်င္တာေလးေတြ ပါလာမယ္ထင္တယ္။ က ဘာၾကီးလဲဆိုျပီးေတာ့။ ေနာက္ျပီးေတာ့ home page ကို home.html နဲ႕ သိမ္းလို႕ေကာ မရဘူးလား။ ဘာလို႕ index.html နဲ႕သိမ္းတာလဲ။ ဘာေတြကြာလဲ။ အဲဒါက comment ေရးထားတာပါ။ ၾကားမွာ ေရးထားတဲ့ စာေတြကို အလုပ္မလုပ္ပါဘူး။ ကၽြန္ေတာ္တို႕ home page ကို ဘာလို႕ index.html နဲ႕ သိမ္းရလဲဆို web page ေတြမွာ စတက္တဲ့ page က index.html Page 19

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

ပါ။ ဒါမွ မဟုတ္ default.html ေပါ့။ www.example.com လို႕ေခၚလိုက္ရင္ page တစ္ခုတက္လာမယ္။ တကယ္တမ္းေတာ့ www.example.com/index.html ဆိုတာကို သြားေခၚထားတာပါ။ အေနာက္က index.html မပါလည္း အလုပ္လုပ္ပါတယ္။ ဒါေၾကာင့္ Home Page ဆိုရင္ေတာ့ index.html ဆိုျပီးသံုးရပါတယ္။ ဒါမွမဟုတ္ default.html ဆိုလည္းရပါတယ္။ ကဲ.. Link အေၾကာင္းလည္း ဆက္သြားရေအာင္။ link ခ်ိတ္ခ်င္ရင္ Name ဆိုတဲ့ပံုစံမ်ဳိးနဲ႕ သြားရတာေပါ့။ address ဆိုတာကေတာ့ ကိုယ္ခ်ိတ္ခ်င္တဲ့ page ေပါ့။ Name ကေတာ့ ေပၚေစခ်င္တဲ့ နာမည္ေပါ့။ ထပ္ေမးစရာေလး တစ္ခုထပ္ေပၚလာတာကို ေတြ႕ရပါလိမ့္မယ္။ Link က အစကေတာ့ အျပာေရာင္။ ေနာက္ေတာ့ နီညိဳေရာင္ ေျပာင္းသြားတယ္။ ဘာျဖစ္လို႕လည္း ။ အဲဒါကေတာ့ vistied ျဖစ္ျပီးသြားလို႕ပါ။ တစ္ခါ click လုပ္ျပီးရင္ အဲလိုအေရာင္ ေျပာင္းသြားပါတယ္။ ကိုယ္ႏိွပ္ျပီးသားေပါ့။ အေရာင္မေျပာင္းခ်င္ရင္ေတာ့ body မွာ vlink ဆိုတဲ့ attribute နဲ႕ link ဆိုတဲ့ attribute မွာ အေရာင္ ျပင္လို႕ရပါတယ္။ အဲဒါဆိုရင္ေတာ့ link color က အစိမ္းေရာင္ျဖစ္ေနတာကို ေတြ႕ရမွာပါ။ link လုပ္ရင္ လူတိုင္းေမးတတ္တဲ့ ေမးခြန္းတစ္ခုရိွပါတယ္။ file ေတြကို download ခ်ေစခ်င္တယ္။ ဘယ္လိုေရးရမလဲ။ တကယ္တမ္းေတာ့ လြယ္ပါတယ္။ link address ကို file ကိုေပးလိုက္ရံုပဲေပါ့။ Download အဲလိုမ်ဳိးပံုစံေလးေပါ့။ ကဲ.. Link အေၾကာင္းေရာက္ရင္ေတာ့ path လမ္းေၾကာင္းေလး ေကာင္းေကာင္းသိဖို႕လိုတယ္။ ေတာ္ေတာ္မ်ားမ်ားက မသိဘူး။ ရႈပ္တယ္လို႕ထင္ၾကတယ္။ တကယ္တမ္းအဲလို မရႈပ္ပါဘူး။

Path For Link Path Path

ရွင္းလင္းခ်က္

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

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

ဒီပတ္လမ္းေၾကာင္းေတြ အေၾကာင္းေကာင္းေကာင္းသိဖို႕လိုပါတယ္။ ဘာျဖစ္လို႕လည္းဆို ကိုယ့္ site က ၾကီးလာတာနဲ႕ အမွ site structure က ရႈပ္ေထြးလာမွာပါ။ Link ေတြလည္း မ်ားလာမွာျဖစ္လို႕ပါ။ ဒါေၾကာင့္ ေသေသခ်ာခ်ာ သိထားသင့္ပါတယ္။ ကဲ.. အခု ကၽြန္ေတာ္တို႕ေတြ page မွာ ပံုေလးေတြ ထည့္ရေအာင္။

Image ပံုေတြကေတာ့ web page တစ္ခုမွာ မျဖစ္မေနပါဝင္ရပါတယ္။ ကိုယ္တည္ေဆာက္တဲ့ page ကို လွပျပီး အဓိပၸာယ္ျပည့္စံုဖို႕ အတြက္ပါ။ ကဲ... ပံုေလးေတြ ထည့္ၾကည့္ရေအာင္။





Apple Logo

တကယ္လို႕ ပံုမျမင္ရပဲ ၾကက္ေျခခတ္ (

) ပဲျမင္ရရင္တာ့

ထည့္ထားတဲ့ image ပတ္လမ္းေၾကာင္းမွားတာျဖစ္ႏိုင္သလို image extension မွားတာလည္း ျဖစ္ႏိုင္တယ္။ image ထည့္လို႕ရတဲ့ extension ေတြကေတာ့ jpg gif png ေတြပဲ။ image က size ၾကီးက ၾကီးေနတယ္။ ေသးခ်င္တယ္။ ျဖစ္ပါတယ္။





Apple Logo

width နဲ႕ height ဆိုတဲ့ attribute က ပံုရဲ႕ size ကို ထိန္းခ်ဳပ္ေပးပါတယ္။ ကိုယ္ၾကိဳက္တဲ့ အလ်ားကို width မွာထည့္ျပီး အျမင့္ကိုေတာ့ height မွာထည့္ျပီး ပံုရဲ႕ size ကိုျပင္လို႕ရတယ္။ Apple Logo ဆိုရင္ေတာ့ alt ဆိုတဲ့အထဲမွာေရးထားတဲ့ စာသားကို ပံုေပၚ Mouse ေလးသြားတင္လိုက္ျပီး ခဏၾကာမွာ ေပၚလာမွာပါ။ ကၽြန္ေတာ္တို႕ကေတာ့ tool tip လို႕ေခၚတာပါ။ Page 21

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

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

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

ပံု : img right အခုဆိုရင္ image နဲ႕ပတ္သက္ျပီး ေတာ္ေတာ္ေလးသိေလာက္ျပီ ထင္တယ္။ ေနာက္ထပ္တစ္ခု ထပ္ေျပာအံုးမယ္။ ပံုေသးေသးေလးကို ႏိွပ္လိုက္မွ ပံုအၾကီးၾကီးေျပာင္းသြားသလိုမ်ဳိးေလးေပါ့။ ပံု size ကို width နဲ႕ height attribute နဲ႕ ခ်ဳံတာမဟုတ္ဘူးေနာ္။ ပံုႏွစ္ပံု။ တစ္ပံုက အၾကီး ၊ ေနာက္တစ္ပံုက အေသးေပ့ါ။ Photo ေတြကို size ေသးတာကို ျပထားျပီး ပံုကို click လုပ္လုိက္မွ size ၾကီးတဲ့ ပံုကို ျပ တဲ့ပံုပါ။ အဲလိုဘာလို႕ လုပ္ရလဲဆို ပံုၾကီးရင္ page တက္တာၾကာပါတယ္။ ဒါေၾကာင့္ ပံုေသးကို အရင္ျပတယ္။ click လုပ္လိုက္မွ ပံုၾကီးျဖစ္သြားမယ္။



















အေပၚက code ကို ဖတ္လိုက္တာနဲ႕ နားလည္မယ္ထင္ပါတယ္။ အဲမွာ ေမးစရာတစ္ခုထြက္လာတယ္။ border ဆိုတာဘာလဲေပါ့။ ကၽြန္ေတာ္တို႕ href ကို သံုးလိုက္တဲ့ အခါ image မွာ အျပာေရာင္ border ျဖစ္သြားတယ္။ အဓိပၸာယ္ကေတာ့ Link ရိွတယ္ေပါ့။ အဲဒါေလးကို မေပၚခ်င္လို႕ ေဖ်ာက္လိုက္တာပါ။

Page 23

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

ပံု : border မေဖ်ာက္ထားေသာ နဲ႕ image

ပံု : border ေဖ်ာက္ထားေသာ ပံု

အခုဆိုရင္ေတာ့ ကၽြန္ေတာ္တို႕ေတြ link ေတြ လုပ္တတ္သြားျပီ။ page တစ္ခုကေန တစ္ခုကို ေခၚတတ္သြားျပီ။ ပံုေတြ ထည့္တတ္သြားျပီ။ အခုအခန္းမွာ ကၽြန္ေတာ္က sample ေသးေသးေလးေတြပဲ ျပသြားတယ္။ ကိုယ္တိုင္ စမ္းၾကည့္ပါ။ ေပ်ာ္ဖို႕ တကယ္ေကာင္းပါတယ္။ ကိုယ့္ ပံုေလးေတြ နဲ႕ web page ေလး စမ္းေဆာက္လို႕ေတာ့ရျပီ။ ဒါေပမယ့္ ျပည့္ျပည့္စံုစံုျဖစ္ေအာင္ ေဆာက္လို႕မရေသးတာကို ေတြ႕မွာပါ။ ကၽြန္ေတာ္တို႕ table လိုအပ္ေနေသးတာပါ။ ေနာက္တစ္ခန္းမွာ table နဲ႕ frame ေတြအေၾကာင္း ေျပာျပပါမယ္။

Page 24

HTML For Web Design Suit           Table And 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 အေၾကာင္းေလးပဲ ဆက္လိုက္ရေအာင္။ Page 25

HTML For Web Design Suit           Table And Frame

အေပၚပံုကို ၾကည့္လိုက္ပါ။ အကြက္တစ္ခုလံုးအျပည့္ဟာ table ပါ။ ေနာက္ျပီး စာေရးထားတဲ့ အကြက္ေတြဟာ cell ေတြေပါ့။ cell ကြက္ေတြထဲမွာပဲ စာေရးတာပါ။ ကဲ.. ပိုျပီး နားလည္သြားေအာင္ code ေလးေတြနဲ႕စလိုက္ရေအာင္။


Row

Row
Page 26

HTML For Web Design Suit           Table And Frame

Table တစ္ခုစတင္ျပီဆိုရင္ေတာ့ ၁။ နဲ႕ စျပီး နဲ႕ပိတ္ရမွာပါ။ ၂။ ကိုယ္ထည့္ခ်င္တဲ့ Row အေရအတြက္ ရိွသေလာက္ကို ကိုသံုးရမွာပါ။ ကိုယ္က row ၂ ခုလိုခ်င္တယ္ဆိုပါစို႕။ဒါဆိုရင္ ဆိုျပီး ႏွစ္ခုသံုးရမွာေပါ့။ ၃။ကိုယ္ထည့္ခ်င္တဲ့ column အေရအတြက္ ရိွသေလာက္ကို ကိုသံုးရမွာပါ။ ကို နဲ႕ ၾကားမွာ ထည့္ျပီးသံုးရမွာပါ။ ကၽြန္ေတာ္တို႕ column ၂ ခုဆိုရင္ ဒါဆိုရင္ column ၂ ခုေပါ့။ ကဲ... ကၽြန္ေတာ္တို႕ေတြ row ၂ ခု column ၃ ခုလုပ္မယ္ေပါ့။ row ၂ ခုျဖစ္တဲ့အတြက္ေၾကာင့္ ၂ ခုသံုးရမယ္။ column ၃ ခုျဖစ္လို႕ ကို ၃ ခုသံုးမယ္။ ပထမ row မွာ ၃ခုဆို အျခား row ေတြမွာလည္း ၃ခုျဖစ္မွ table ေပၚလာမွာပါ။
























1	2	3
4	5	Page 27 HTML For Web Design Suit           Table And Frame 6
အဲဒီ Example ကို ၾကည့္လိုက္ရင္ နားလည္ႏိုင္မလားမသိဘူး။ ကၽြန္ေတာ္တို႕ေတြ row ၂ ခုနဲ႕ column ၃ ခု ရိွတဲ့ table တစ္ခုတည္ေဆာက္ခဲ့တာပါ။ table ပိုင္းကို ရႈပ္တယ္လို႕ ထင္ခ်င္ထင္ေနပါလိမ့္မယ္။ ဟုတ္ပါတယ္။ ရႈပ္ပါတယ္။ ဒါေပမယ့္ နားလည္သြားရင္ လြယ္ျပီး သံုးလို႕ေကာင္းပါတယ္။ ကၽြန္ေတာ္တို႕ေတြ table ပိုင္းကို ေသေသခ်ာခ်ာေလး ေလ့လာဖို႕လိုပါလိမ့္မယ္။ ကဲ... ေနာက္ထပ္ example တစ္ခု ထပ္လုပ္ၾကည့္ရေအာင္ ။ အခု ကၽြန္ေတာ္တို႕ေတြ row ၃ ခု column ၃ ခု ရိွတဲ့ table တစ္ခုကို ေဆာက္ၾကည့္ရေအာင္။ row ၃ခု ျဖစ္လို႕ ၃ခုပါမယ္။ column ၃ ခုျဖစ္လို႕ နဲ႕ ၾကားမွာ ၃ ခုပါမယ္။ အဲလိုေလး စဥ္းစားလို႕ရသြားျပီဆိုရင္ စျပီး code ေရးၾကည့္ရေအာင္။





































































Page 28


1	2	3
3	4	5
6	7	8








HTML For Web Design Suit           Table And Frame

ကဲ... အခုေလာက္ဆို နားလည္ေလာက္ျပီထင္တယ္။ ကၽြန္ေတာ္တို႕ ေရွ႕ဆက္ရေအာင္။ ကၽြန္ေတာ္တို႕ေတြဟာ table ရဲ႕ width ကို ထိန္းခ်ဳပ္ႏိုင္ပါတယ္။ table ရဲ႕ width ကို သတ္မွတ္တဲ့အခါမွာ % နဲ႕သတ္မွတ္တာနဲ႕ pixel နဲ႕ သတ္မွတ္တာရယ္ရိွပါတယ္။ table ရဲ႕ width သာမက ရဲ႕ width ေတြကိုပါသတ္မွတ္ႏိုင္ပါတယ္။ % နဲ႕ သတ္မွတ္တာနဲ႕ Pixel နဲ႕ သတ္မွတ္တာ ဘာကြာသလဲဆိုရင္ေတာ့ % ကေတာ့ broswer ရဲ႕ အေပၚမွာ မူတည္ျပီး width ကေျပာင္းလဲပါတယ္။ pixel ကေတာ့ မေျပာင္းလဲဘူးေပါ့။ အေသေပါ့။ % နဲ႕ဆိုရင္ broswer ခ်ဲ႕လိုက္တာနဲ႕ လုိက္က်ယ္သြားပါတယ္။ pixel နဲ႕ဆိုရင္ေတာ့ browser က်ယ္လည္း လိုက္မက်ယ္သြားပါဘူး။ ကဲ.. စလိုက္ရေအာင္။





































































Page 29


1	2	3
3	4	5
6	7	8








HTML For Web Design Suit           Table And Frame

အဲဒီမွာဆိုရင္ width က 100% ျဖစ္တဲ့အတြက္ေၾကာင့္ browser အျပည့္ table ကယူပါမယ္။ အဲဒီက အေပၚဆံုး first row ကိုဒီလိုျပင္ၾကည့္လိုက္ပါ။



















ဒါဆိုရင္ေတာ့ ပထမ column ရဲ႕ width ကို 30px လို႕သတ္မွတ္လိုက္ပါျပီ။ ပထမ row မွာသတ္မွတ္လုိက္ရင္ တျခား row ေတြရဲ႕ ပထမ column ကိုပါသတ္မွတ္ျပီးသား ျဖစ္သြားပါလိမ့္မယ္။ ကၽြန္ေတာ္တို႕ေတြဟာ px သာမက % နဲ႕ပါ သတ္မွတ္ႏိုင္ပါတယ္။ column ၃ ခုလံုးကို သတ္မွတ္ခ်င္ရင္ေတာ့ ဒီလိုေရးလို႕ပါတယ္။
1

2

3




















အဲဒီမွာဆိုရင္ေတာ့ column ရဲ႕ width ကို % နဲ႕သတ္မွတ္ေပးမွာပါ။ အဲဒီမွာ တတိယ colum ကို width မထည့္လည္း သူ႕ဘာသာ ခ်ိန္ညိွေပးႏိုင္ပါတယ္။ ကဲ... table နဲ႕ time table ေလးဆြဲၾကည့္ရေအာင္။






1

2

3


































Page 30



HTML For Web Design Suit           Table And Frame








































Date	Time	Subject
Oct 07	1:00 PM - 3:00 PM	Hardware
Oct 08	1:00 PM - 3:00 PM	Software Install
Oct 08	1:00 PM - 3:00 PM	Windows Install




ကဲ.. အခုဆိုရင္ လက္ေတြ႕ အသံုးျပဳတတ္ေလာက္ျပီ ထင္တယ္။ ကၽြန္ေတာ္တို႕ေတြ table မွာ border ေတြကို ေပၚေစခ်င္ရင္ေတာ့ border ဆိုတဲ့ attribute ထည့္ရပါမယ္။

Border , Cellpadding, Cellspacing ဆိုရင္ေတာ့ border လည္းေပၚလာပါလိမ့္မယ္။ အထူအပါးကေတာ့ ၾကီးေလေလ border ထူေလေလေပါ့။ border ကိုအေရာင္ထည့္ခ်င္ရင္ေတာ့ bordercolordark ကေတာ့ အရိပ္ေပါ့။ bordercolorlight ကေတာ့ အေပၚအေရာင္ေပါ့။ ဒါမွမဟုတ္ bordercolor ဆိုျပီးလည္း အသံုးျပဳႏိုင္ပါတယ္။

Page 31

HTML For Web Design Suit           Table And Frame

border က ႏွစ္ထပ္ျဖစ္ေနတာကို ေတြ႕ရပါလိမ့္မယ္။ အဲဒါက cell padding ေၾကာင့္ပါ။ cell padding နဲ႕ cell spacing ဆိုျပီး ႏွစ္မ်ဳိးရိွပါတယ္။

cellpadding ဆိုတာကေတာ့ table အတြင္း border နဲ႕ စာ ေနရာအကြာအေဝးပါ။ cellpadding မ်ားလာေလေလ စာက အတြင္းကို ဝင္ေလေလျဖစ္မွာပါ။ အခု cellpadding ကို 30 ထားလိုက္တဲ့အခါမွာ စာသားေတြနဲ႕ border အရမ္းက်ဲသြားတာကို ေတြ႕ရပါလိမ့္မယ္။

Page 32

HTML For Web Design Suit           Table And Frame

cellspacing ကေတာ့ cell တစ္ခုနဲ႕ တစ္ခုၾကား အကြာအေဝးေပါ့။ အခု border ဟာ ႏွစ္ထပ္ျဖစ္ေနတာကိုေတြ႕ရပါလိမ့္မယ္။ အဲဒါကို တစ္ထပ္တည္း ျဖစ္ခ်င္ရင္ေတာ့ cellspacing ကို 0 ေပးလိုက္ရံုပါပဲ။

ကဲ... အခုဆိုရင္ေတာ့ နည္းနည္းေလး သိလာျပီထင္တယ္။ ဒီေလာက္ထိ နားလည္ျပီဆိုရင္ ကၽြန္ေတာ္တို႕ေတြ cell ေတြကို merge လုပ္တာေတြကို စလိုက္ရေအာင္။ နားမလည္ေသးရင္ေတာ့ ကိုယ္တိုင္ လက္ေတြ႕ စမ္းသပ္ၾကည့္ဖို႕လိုပါတယ္။ table ပိုင္းက ထင္သေလာက္ မရႈပ္ပါဘူး။ လက္ေတြ႕လုပ္လိုက္ရင္ နားလည္သြားမွာပါ။

Cell Merge Cell Merge ပိုင္းကေတာ့ table ပိုင္းကို ေသခ်ာသိထားရင္ နားလည္လြယ္မယ္လို႕ထင္ပါတယ္။ Cell Merge ကေတာ့ Cell ႏွစ္ခု ဒါမွမဟုတ္ Cell ႏွစ္ခုထက္ ေပါင္းတာေပါ့။ Cell Merge ကို ဒီလိုေပါင္းရမွာပါ။ table တစ္ခုကို စခဲ့တုန္းက row ေတြကို နဲ႕ေရးရမွာပါ။ တစ္ခုမွာ မွာလည္း

Hex Color

HTML For Web Design Suit           Table And Frame

အဲဒီမွာဆိုရင္ bgcolor ကိုေတြ႕မွာပါ။ အဲဒါကေတာ့ background အေရာင္ထည့္တာပါ။ ကၽြန္ေတာ္တို႕ေတြ background အေရာင္ကိုထည့္လို႕ရေပမယ့္ စာလံုးအေရာင္ေတြ ထည့္လို႕မရပါဘူး။ ကၽြန္ေတာ္တို႕ေတြ စာလံုးအေရာင္ထည့္ခ်င္ရင္ေတာ့ font color နဲ႕ထည့္သြင္းရပါတယ္။ တျခားအဆင္ေျပတဲ့နည္းကေတာ့ CSS အသံုးျပဳလိုက္ျခင္းပါပဲ။ ဒီစာအုပ္ထဲမွာေတာ့ CSS အေၾကာင္းပါဝင္ျခင္းမရိွေသးဘူး။ အခုဆိုရင္ေတာ့ bg color ကိုနည္းနည္းနားလည္လာျပီထင္ပါတယ္။ တကယ္လို႕ ကၽြန္ေတာ္တို႕ေတြ row တစ္ခုလံုးကို အေရာင္ထည့္ခ်င္ရင္ေတာ့ မွာ bgcolor ဆိုတဲ့ attribute သံုးရပါမယ္။
၂ ခုပါရင္ ေနာက္ထပ္
၂ ခုပါဝင္ရမွာပါ။ ဒါေပမယ့္ cell ေတြကို merge လုပ္လိုက္ရင္ အနည္းငယ္ ေျပာင္းလဲကုန္ပါတယ္။ အေပၚမွာ column သံုးခု ။ ဒါေၾကာင့္	၃ ခုပါမယ္။ ဒါေပမယ့္ ေအာက္မွာက column ၃ ခုမွာ ႏွစ္ခုကို ေပါင္းလိုက္တယ္။ ဒါဆိုရင္ cell က ၂ ခုပဲရိွေတာ့မယ္။ ဒါဆိုရင္ေတာ့	Page 33 HTML For Web Design Suit           Table And Frame ၂ ခုပဲပါေတာ့မယ္။ အဲဒါကေတာ့ column merge လုပ္တဲ့အခါမွာေပါ့။ row ကလည္း အဲလိုပါပဲ။ အခုေတာ့ column merge လုပ္တဲ့ code ေလးကို ၾကည့္လိုက္ပါအံုး။ Cell 1 Cell 2 Cell 3 Cell 1 Cell 3 အေပၚက code မွာ	ဆိုတာကို ေတြ႕ႏိုင္မယ္ထင္ပါတယ္။ အဲဒါကေတာ့ Cell ၂ ခုေပါင္းမယ္ ဆိုတဲ့ အဓိပၸာယ္ပါ။ တကယ္လို႕ cell ၃ ခုေပါင္းခ်င္ရင္ေတာ့		ပါ။ ကၽြန္ေတာ္ အဲလိုမ်ဳိး code Page 34 HTML For Web Design Suit           Table And Frame ကိုေျပာင္းေရးလိုက္ရင္ ဒီလိုေတြ႕ရမွာပါ။ Cell 1 Cell 2 Cell 3 Cell 1 ကၽြန္ေတာ္တို႕ေတြ column ကုိ ၃ ခုစလံုး ေပါင္းလိုက္တဲ့ အတြက္ စုစုေပါင္း column ၁ ခုပဲရိွေတာ့တယ္။ ဒါေၾကာင့္			တစ္ခုကို ပဲသံုးတာပါ။ ကဲ... ဆက္ျပီးေတာ့ example တစ္ခုေလာက္ ေဆာက္ၾကည့္ရေအာင္။ Page 35 HTML For Web Design Suit           Table And Frame List Of Adboe Software Adobe Acrobat Adobe Dreamweaver Adboe Flash Adobe InDesign Adobe Photoshop Adboe Bridge Page 36 HTML For Web Design Suit           Table And Frame အဲဒီက code မွာဆိုရင္ေတာ့ List Of Adboe Sofware အတြက္ Column ၃ ခုလံုးကို merge လုပ္ထားတာကို ေတြ႕မွာပါ။ Column ၃ ခုကို merge လုပ္လိုက္တဲ့အတြက္ column ၁ ခုပဲရိွပါေတာ့တယ္။ ဒါေၾကာင့္	တစ္ခုပဲ လိုအပ္ပါေတာ့တယ္။ အခုေလာက္ဆိုရင္ေတာ့ Column Merge ကိုသိေလာက္ျပီထင္ပါတယ္။ ဆက္ျပီး Row Merge အေၾကာင္းေလး ေလ့လာရေအာင္။ Row ေတြ Merge လုပ္တဲ့အခါမွာလည္း column merge လုပ္သလိုပါပဲ။ အရင္ဆံုး code ေလးစေရးလိုက္ရေအာင္။ Cell Left Cell 2 Cell 3 ပထမဆံုး Column မွာ	ဆိုတာေလးရိွပါတယ္။ ပထမဆံုး Column မွာ Row ၂ Page 37 HTML For Web Design Suit           Table And Frame ခုကိုေပါင္းမယ္ ဆိုတဲ့ အဓိပၸာယ္ပါ။ အေပၚမွာ column ၂ ခုရိွေပမယ့္ ေနာက္ထပ္တစ္ဆင့္မွာေတာ့ Column ၁ ခုပဲရိွပါေတာ့မယ္။ ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ First Column မွာ သူ႕ေအာက္က First Column နဲ႕ ေပါင္းလိုက္ေတာ့ Column တစ္ခုေပ်ာက္သြားတာေပါ့။ ထပ္ျပီးရွင္းေအာင္ ေနာက္ထပ္ example တစ္ခု ထပ္ျပပါမယ္။ Row1 , Cell1 Row1 , Cell2 Row1 , Cell3 Page 38 Right HTML For Web Design Suit           Table And Frame Left Center Cell 1 ဒီ example မွာဆိုရင္ row span ကုိေကာင္းေကာင္းနားလည္မယ္ထင္ပါတယ္။ Left နဲ႕ Right ဆိုျပီး row ႏွစ္ခုေပါင္းလိုက္ေတာ့ ေအာက္ဆံုး row မွာ column တစ္ကြက္ပဲ က်န္ေတာ့တဲ့အတြက္	တစ္ခုပဲ ေရးရတာပါ။ Appearnce ကၽြန္ေတာ္တို႕ေတြဟာ Table ေတြမွာ background color ေတြအသံုးျပဳႏိုင္ပါတယ္။ border အသံုးျပဳနည္းကိုေတာ့ အေပၚမွာ ေဖာ္ျပျပီးသြားပါျပီ။ အခု ကိုယ္လိုခ်င္တဲ့ cell မွာ background အေရာင္ေလးေတြ ထည့္ရေအာင္။ BLUE Red Page 39



















BLUE	Red	Hex Color
a	b	Page 40 HTML For Web Design Suit           Table And Frame c
အဲဒီမွာဆိုရင္ေတာ့ ေၾကာင့္ row တစ္ခုလံုး အေရာင္ေျပာင္းသြားတယ္ဆိုတာကို ေတြ႕ႏိုင္မွာပါ။ အခုေလာက္ဆိုရင္ေတာ့ table အေၾကာင္းသိေလာက္ပါျပီ။ table က HTML နဲ႕ေရးရတာ ေတာ္ေတာ္လက္ဝင္ျပီး စိတ္ပ်က္ဖို႕ ေကာင္းပါတယ္။ Dreamweaver လိုမ်ဳိး software သံုးလိုက္ရင္ေတာ့ table တစ္ခုေဆာက္ရတာ အရမ္းလြယ္ပါတယ္။ table ကို merge လုပ္တာေတြကလည္း dreamweaver မွာ အလြယ္တကူလုပ္ႏိုင္ပါတယ္။ ဒီစာအုပ္မွာ dreamweaver အေၾကာင္းေျပာတာ မဟုတ္ပဲ HTML ကိုအေျခခံက အစနားလည္ေအာင္ ေရးတတ္ေအာင္ ေျပာျပထားတာေၾကာင့္ အခုလိုမ်ဳိး နည္းနည္းလက္ဝင္ေပမယ့္ နားလည္ေအာင္ ေလ့လာသင့္ပါတယ္။ အခုေတာ့ frame အေၾကာင္းေလးပဲ ဆက္ရေအာင္။

Page 41

HTML For Web Design Suit           Table And Frame

Frame Frame ကေတာ့ HTML Page ႏွစ္ခု ထက္မက တာေတြကို စာမ်က္ႏွာ တစ္ခုထဲ မွာ ေဖာ္ျပျခင္တဲ့ အခါေပါ့။ ဘယ္လိုမ်ဳိးလဲ ဆိုေတာ့

အဲဒီမွာ ဆိုရင္ Frame ၃ ခုနဲ႕ Page တစ္ခုကို ဖြဲ႕စည္း တည္ေဆာက္ထားတာပါ။ အခုေနာက္ပိုင္းမွာ Frame ကိုအသံုးနည္းသြားပါျပီ။ AJAX ဆိုတဲ့ နည္းပညာကို ေျပာင္းသုံးၾကပါတယ္။ အရင္တုန္းကေတာ့ Frame ကိုအသံုးမ်ားခဲ့ပါတယ္။ ဘာလို႕အသံုးျပဳရသလဲဆိုရင္ေတာ့ အေပၚက ပံုမွာၾကည့္လိုက္ပါ။ ဘယ္ဘက္က menu ျဖစ္ျပီး ညာဘက္ကေတာ့ menu က ႏိွပ္လိုက္ရင္ ေပၚလာမယ့္ page ေပါ့။ အေပၚဆံုးကေတာ့ Name ကိုေရးထားတာပါ။ အဲ.. အခု frame အေၾကာင္း စလိုက္ေအာင္။ Frame1.html This is frame 1 Frame2.html

Page 42

HTML For Web Design Suit           Table And Frame

This is frame 2 index.html

<noframes> frame တစ္ခုကို တည္ေဆာက္ျပီရင္ေတာ့ အနည္းဆံုး file ၃ ခုလိုပါတယ္။ index.html ကေတာ့ Frame1 နဲ႕ Frame2 ကိုခ်ိတ္ဆက္ေဖာ္ျပေပးမွာျဖစ္ျပီး frame1 နဲ႕ frame2 ကေတာ့ အဓိကေပါ့။ index.html ကို ၾကည့္လိုက္ပါ။ ထူးျခားတာ တစ္ခုပါ ပါတယ္။ အဲဒါကေတာ့ မပါျခင္းပဲ။ frame ရဲ႕ Main Page ဟာ Body ထည့္စရာမလိုပါဘူး။ frameset ပဲ ထည့္ရမွာပါ။ HTML မွာ frame သံုးရတာ လက္ဝင္လွပါတယ္။ အေကာင္းဆံုးကေတာ့ IDE ေတြထဲက Dreamweaver ကိုအသံုးျပဳလိုက္ရင္ေတာ့ လြယ္လင့္တကူ frame ကိုေရးသားႏိုင္မွာပါ။ အခုေတာ့ သိေအာင္ ကိုယ္တိုင္ပဲ ေရးၾကည့္ရတာေပါ့။

Page 43

HTML For Web Design Suit           Table And Frame

နဲ႕ စျပီး နဲ႕ ေရးရပါမယ္။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 ၂ ခုမဟုတ္လား။ ဒီေတာ့ ကၽြန္ေတာ္တို႕ေတြ ႏွစ္ခု ထည့္ရမယ္။ ဒါေၾကာင့္ အဲလိုမ်ဳိးေရးလိုက္တာ။ အဲမွာ src ဆိုတာကေတာ့ frame ရဲ႕ Link ေပါ့။ ကၽြန္ေတာ္တို႕ေတြ file ၃ ခုလံုးကို တစ္ေနရာတည္းမွာထည့္ထားတယ္။ ဒါေၾကာင့္ တိုက္ရိုက္ လွမ္းေခၚလိုက္ရံုပဲ။ Name ကေတာ့ နာမည္ပါ။ မထည့္လည္းရပါတယ္.. scrolling ဆိုတာကေတာ့ ေဘးနားက scrollbar ေပၚမေပၚေပါ့။ ေပၚေစခ်င္ရင္ Yes ေပါ့။ noresize ကေတာ့ frame ကို resize လုပ္လို႕မရေအာင္ လုပ္ထားတာပါ။ ဒါဆို frame ကို resize လုပ္ခ်င္ရင္ေတာ့ အဲဒါကို မထည့္နဲ႕ေပါ့။ အခု column ၃ ခု နဲ႕လုပ္ၾကည့္ရေအာင္။ index.html

Page 44

HTML For Web Design Suit           Table And Frame

<noframes>Your Browser Don’t Support Frame ေမးစရာ တစ္ခုေပၚလာျပီ။ ဘာလဲဆိုရင္ေတာ့ <noframes> ။ အဲဒါက ဘာလဲဆိုရင္ေတာ့ ဟိုးအရင္က browser ေတြက frame ေတြကို support မလုပ္ပါဘူး။ ဒါေၾကာင့္ frame ေတြကို support မလုပ္တဲ့ browser ေတြျဖစ္ေနရင္ Message ေလးေဖာ္ျပေပးပါမယ္။ အခုေနာက္ပို္င္း browser ေတြက support လုပ္ပါတယ္။ ကဲ.. အခု code ေလးကို နည္းနည္းေလး ေျပာင္းၾကည့္လိုက္ရေအာင္။ <noframes> ဘာေျပာင္းသြားသလဲဆိုေတာ့ frameser ပါ။ cols ကေန rows ျဖစ္သြားပါတယ္။ cols နဲ႕ rows ေလးပဲ ကြာတာပါ။ က်န္တာ အတူတူပါပဲ။ frame အထဲမွာလည္း ထပ္ျပီး ထပ္မံခြဲထုတ္လို႕ရပါေသးတယ္။ အခု အေပၚဆံုးက rows ကို column ထပ္ျပီး ခြဲပါမယ္။



Page 45



HTML For Web Design Suit           Table And Frame




noresize>



<noframes>

အဲဒီမွာ ေအာက္မွာ ထပ္ထည့္ထားတာကို ေတြ႕ရမွာပါ။








noresize>



ကၽြန္ေတာ္တို႕ အေပၚဆံုးက rows ကို ထပ္ျပီး cols ခြဲတာပါ။ ဒါေၾကာင့္ အေပၚဆံုး rows မွာ columns ႏွစ္ခုျဖစ္သြားပါျပီ။ ဒါေၾကာင့္ ႏွစ္ခု ေရးရတာပါ။ တကယ္လို႕ ဒုတိယ rows မွာပဲ colums Page 46

HTML For Web Design Suit           Table And Frame

ထပ္ထည့္ခ်င္ရင္ေတာ့ code က ဒီလိုေလးျဖစ္သြားမွာပါ။







<noframes>

ရွင္းရွင္းေလးပါ။ ဒုတိယ rows မွာ ျဖစ္ေစခ်င္လို႕ ဒုတိယ rows မွာ frameset တစ္ခုထပ္ထည့္ရတာပါ။ အဲလိုမ်ဳိးပဲ columns ေတြထဲမွာ rows ေတြ ခြဲလို႕ရပါတယ္။ အတူတူပါပဲ။ အေပၚက rows ေနရာမွာ cols ေျပာင္းျပီးေတာ့ cols ေနရာမွာ rows ေျပာင္းလိုက္ရင္ သိမွာပါ။ ကၽြန္ေတာ္ မေရးျပေတာ့ဘူး။ ကိုယ္တိုင္ပဲ Page 47

HTML For Web Design Suit           Table And Frame

ေရးျပီး စမ္းၾကည့္လိုက္ေပါ့။

အခု ဒီစာအုပ္ရဲ႕ ေနာက္ဆံုးအခန္းက ေနာက္ဆံုး အေၾကာင္းပါပဲ။ ဘာလဲဆိုရင္ေတာ့ Link And Frame ပါ။ Frame တစ္ခုက Link က ႏိွပ္လိုက္ရင္ ေနာက္ frame တစ္ခုက ေျပာင္းသြားဖို႕ပါ။ ကၽြန္ေတာ္ အကုန္လံုးကို အေျခခံေလာက္ပဲ ေျပာႏိုင္မွာပါ။ Web ပိုင္းမွာ ေလ့လာစရာေတြ အမ်ားၾကီးပါ။ HTML ဆိုတာ လံုးဝ စကာစ အေျခခံအဆင့္ေလးပါ။ ကဲ.. ေနာက္ဆံုး အခန္းေလး ဆက္လိုက္ရေအာင္။

Link And Frame

ကၽြန္ေတာ္တို႕ အေပၚမွာ ေျပာဘူးပါတယ္။ ဘယ္ဘက္က Link ကို ႏိွပ္လိုက္ရင္ ညာဘက္မွာ သက္ဆိုင္ရာ Page ကို ေျပာင္းသြားမယ္ဆိုျပီးေတာ့။ အခုအဲလိုမ်ဳိး ဘယ္ဘက္က frame ကေန ႏိွပ္လိုက္ရင္ ညာဘက္က frame မွာ သက္ဆိုင္ရာ Page 48

HTML For Web Design Suit           Table And Frame

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

<noframes> အဲမွာ.. name="main" လို႕ေပးခဲ့တာကို ေတြ႕မွာပါ။ အဲလိုမ်ဳိးနာမည္ ထည့္ခဲ့မွ menu ကေန အဲဒီ frame မွာ သြားေပၚဆိုျပီး ေျပာလို႕ရမွာ။ ကဲ.. အခု menu.html မွာေရးထားတာကို ၾကည့္လိုက္ရေအာင္... Home
Download
Link
Page 49

HTML For Web Design Suit           Table And Frame

အဲမွာ link ေတြအကုန္လံုးမွာ target ဆိုတာေလး ပါတာကိုေတြ႕ရပါလိမ့္မယ္။ ကၽြန္ေတာ္တို႕ index.html မွာ name="main" ဆိုတဲ့ frame မွာ သြားေပၚမယ္ဆိုတဲ့ အဓိပၸာယ္ေပါ့။ download ဆိုတာကို ႏိွပ္လိုက္ရင္ ညာဘက္က frame မွာ download.html ဆိုတဲ့ page ေလးေပၚသြားပါမယ္။ Home ကိုႏိွပ္လိုက္လည္း home.html ဟာ ညာဘက္က frame မွာပဲ သြားေပၚပါမယ္။ အဲဒီေလာက္ဆိုရင္ နားလည္ သိရိွျပီလို႕ထင္ပါတယ္။

အခုဆက္ျပီး နည္းနည္းအပိုေလး ထည့္ေျပာျပရေစ။

menu.html page ထဲမွာပဲ home.html ေလးကို လွမ္းျပီး ေခၚျပတဲ့နည္းပါ။ အဲဒါေလးကေတာ့ အသံုးဝင္ပါတယ္။ Home Page Page 50

HTML For Web Design Suit           Table And Frame

မွာ news ေတြကို ေဖာ္ျပတဲ့အခါ မွာအသံုးဝင္လွပါတယ္။ <iframe src="home.html" width="500" height="200"> code ေလးက ရွင္းပါတယ္။ <iframe> ပါ။ src ကေတာ့ ဘယ္ page ကို ခ်ိတ္မလဲဆိုတာပါ။ width နဲ႕ height ကေတာ့ ကိုယ္ေဖာ္ျပခ်င္သေလာက္ေပါ့။ အခုဆိုရင္ေတာ့ ကၽြန္ေတာ္တို႕ေတြ HTML အေျခခံေလးကို ေလ့လာလို႕ျပီးသြားပါျပီ။ ဒီစာအုပ္ကို ဖတ္ျပီးရင္ေတာ့ ဘာ code က ဘာကိုေျပာတာလဲဆိုတာပဲ သိႏိုင္မွာပါ။ ဘာလိုခ်င္ရင္ ဘယ္လိုလုပ္ရမလဲ ဆိုတာေတာ့ မိမိရဲ႕ ေလ့လာမႈစြမ္းအားေပၚ မူတည္ပါတယ္။ စာအုပ္ဖတ္ရံုနဲ႕ မရပါဘူး ။ လုိက္ေတြးပါ။ စမ္းၾကည့္ပါ။ ဒါမွ တိုးတက္မႈကို ရမွာပါ။ မ်က္စိနဲ႕ ၾကည့္ရံုနဲ႕ေတာ့ တိုးတက္မႈရိွမွာ မဟုတ္ပါဘူး။ ဒီစာအုပ္ ဖတ္ျပီးရင္ေတာ့ "ေအာ္.. ဒီ code က ဒါအတြက္ေရးထားတာ" အဲေလာက္ပဲ စြမ္းေဆာင္ ေပးႏိုင္မွာပါ။ ငါဒီလိုဆြဲခ်င္တယ္။ ဒါေၾကာင့္ ဒါကို သံုးရမယ္ ဆိုတာကေတာ့ မိမိရဲ႕ အာရံု ကြန္႕ျမဴးမႈနဲ႕ ဒီစာအုပ္ကို ေပါင္းျပီး အသံုးခ်ရရင္ ရႏိုင္မွာပါ။

Page 51