HTML Basic (2)
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>
<head><title>Example</title></head>
<body>
<center>
This is center
</center>
</body>
</html>
This is center ဆိုတာေလးက အလယ္ပိုင္းကိုေရာက္ေနတာကိုေတြ႕ရပါမယ္။ အဲဒါေလးကို သံုးျပီး စာေတြကို
အလယ္ပိုင္းကို ေရြ႕ထားလို႕ရပါတယ္။
<html>
<head><title>Example</title></head>
<body>
<h1 align="justify">Test</h1>
</body>
</html>
အဲဒီ code မွာဆိုရင္ေတာ့ header ေတြက အလယ္ကိုေရာက္ေနတာကိုေတြ႕ရပါလိမ့္မယ္။
Marquee
marquee ကေတာ့ စာလံုးေတြကို ေရြ႕ေနဖို႕လုပ္ေဆာင္ေပးတာပါ။
<html>
<head><title>Example</title></head>
<body>
<marquee>I’m moving</marquee>
</body>
</html>
အဲဒီ code မွာဆိုရင္ စာသားေလးက ေရြ႕ေနတာကိုေတြ႕ရပါမယ္။ ဘယ္ဘက္ကေန ညာဘက္ကိုေရြ႕လာတာပါ။
Marquee မွာရိွတ့ ဲ attribute ေတြကေတာ့
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>
<head><title>Example</title></head>
<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 တစ္ခုကို ခ်ိတ္ဆက္ထားပါတယ္။ ေအာက္က
ကၽြန္ေတာ္တို႕ေတြ 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>
<!-- Link To Gallery Page -->
<a href="gallery.html">Gallery</a>
</body>
</html>
Gallery.html
<html>
<head><title>Example</title>
<body>
<!-- Link To Home Page -->
<a href="index.html">Home</a>
</body>
</html>
အေပၚက code ကိုမရွင္းျပခင္ ေမးခ်င္တာေလးေတ ြ ပါလာမယ္ထင္တယ္။ <!-- --> က ဘာၾကီးလဲဆိုျပီးေတာ့။
ေနာက္ျပီးေတာ့ home page ကို home.html နဲ႕ သိမ္းလို႕ေကာ မရဘူးလား။ ဘာလို႕ index.html နဲ႕သိမ္းတာလဲ။
ဘာေတြကြာလဲ။
<!-- comment --> အဲဒါက comment ေရးထားတာပါ။ <!-- နဲ႕ --> ၾကားမွာ ေရးထားတ့ ဲ စာေတြကို
အလုပ္မလုပ္ပါဘူး။ ကၽြန္ေတာ္တို႕ home page ကို ဘာလို႕ index.html နဲ႕ သိမ္းရလဲဆို web page ေတြမွာ
စတက္တ့ ဲ page က index.html ပါ။ ဒါမွ မဟုတ္ default.html ေပါ့။ www.example.com လို႕ေခၚလိုက္ရင္ page
တစ္ခုတက္လာမယ္။ တကယ္တမ္းေတာ့ www.example.com/index.html ဆိုတာကို သြားေခၚထားတာပါ။
အေနာက္က index.html မပါလည္း အလုပ္လုပ္ပါတယ္။ ဒါေၾကာင့္ Home Page ဆိုရင္ေတာ့ index.html
ဆိုျပီးသံုးရပါတယ္။ ဒါမွမဟုတ္ default.html ဆိုလည္းရပါတယ္။
ကဲ.. Link အေၾကာင္းလည္း ဆက္သြားရေအာင္။ link ခ်ိတ္ခ်င္ရင္ <a href="address">Name</a>
ဆိုတ့ပဲ ုံစံမ်ဳိးနဲ႕ သြားရတာေပါ့။ address ဆိုတာကေတာ့ ကိုယ္ခ်ိတ္ခ်င္တ့ ဲ page ေပါ့။ Name ကေတာ့ ေပၚေစခ်င္တ့ ဲ
နာမည္ေပါ့။ ထပ္ေမးစရာေလး တစ္ခုထပ္ေပၚလာတာကို ေတြ႕ရပါလိမ့္မယ္။ Link က အစကေတာ့ အျပာေရာင္။
ေနာက္ေတာ့ နီညိဳေရာင္ ေျပာင္းသြားတယ္။ ဘာျဖစ္လို႕လည္း ။ အဲဒါကေတာ့ vistied ျဖစ္ျပီးသြားလို႕ပါ။ တစ္ခါ click
လုပ္ျပီးရင္ အဲလိုအေရာင္ ေျပာင္းသြားပါတယ္။ ကိုယ္ႏိွပ္ျပီးသားေပါ့။ အေရာင္မေျပာင္းခ်င္ရင္ေတာ့ body မွာ vlink
ဆိုတ့ ဲ attribute နဲ႕ link ဆိုတ့ ဲ attribute မွာ အေရာင္ ျပင္လို႕ရပါတယ္။ <body vlink="green" link="green">
အဲဒါဆိုရင္ေတာ့ link color က အစိမ္းေရာင္ျဖစ္ေနတာကို ေတြ႕ရမွာပါ။ link လုပ္ရင္ လူတိုင္းေမးတတ္တ့ ဲ
ေမးခြန္းတစ္ခုရိွပါတယ္။ file ေတြကို download ခ်ေစခ်င္တယ္။ ဘယ္လိုေရးရမလဲ။ တကယ္တမ္းေတာ့
လြယ္ပါတယ္။ link address ကို file ကိုေပးလိုက္ရံုပဲေပါ့။
<a href="file.zip>Download</a> အဲလိုမ်ဳိးပံုစံေလးေပါ့။ ကဲ.. Link အေၾကာင္းေရာက္ရင္ေတာ့ path
လမ္းေၾကာင္းေလး ေကာင္းေကာင္းသိဖို႕လိုတယ္။ေတာ္ေတာ္မ်ားမ်ားကမသိဘူး။ရႈပ္တယ္လို႕ထင္ၾကတယ္။
တကယ္တမ္းအဲလို မရႈပ္ပါဘူး။
Path For Link
Path <a href=" ေအာက္က path link">Path</a> ရွင္းလင္းခ်က္
./file.html OR file.html ေနရာတစ္ခုထဲမွာ အတူတူ သိမ္းရင္
အဲလိုေခၚလို႕ရပါတယ္။ C:\example\index.html
ကေန C:\example\gallery.html ကိုေခၚရင္ေပ့ါ။ ./
ကေတာ့ directory တူတူပဲလို႕ ဆိုတာပါ။
./download/download.html OR download/download.html ဒါကေတာ့ ကိုယ့္ folder ေအာက္က folder ကို
ထပ္ေခၚတာပါ။
../file.html သူကတာ့ မတူေတာ့ဘူး။ folder ကို up လုပ္ျပီး
ေခၚတာပါ။ ဘယ္လိုမ်ဳိးလဲဆိုရင္ေတာ့
C:\example\download\index.html ကေန
C:\example\gallery.html ကိုေခၚတာေပါ့။ download
ဆိုတ့ ဲ folder အေပၚတဆင့္က file ကိုေခၚတာေပါ့။
ႏွစ္ဆင့္ ေခၚခ်င္ရင္ေတာ့ ../../file.html ေပါ့။ ../
ဆိုတာက folder directory ကို up လုပ္လိုက္တာပါ။
http://www.mysteryzillion.com ဒါကေတာ့တျခား website တစ္ခုကို လွမ္းေခၚတာပါ။
./download/file.zip OR download/file.zip download ခ်ဖို႕အတြက္ file ေတြ image file
ေတြကိုလည္း တိုက္ရိုက္ေခၚလို႕ရပါတယ္။ image
ပိုင္းေတြကို ကၽြန္ေတာ္ ေနာက္ပိုင္း
ဆက္လက္ရွင္းျပပါအံုးမယ္။
ဒီပတ္လမ္းေၾကာင္းေတြ အေၾကာင္းေကာင္းေကာင္းသိဖို႕လိုပါတယ္။ ဘာျဖစ္လို႕လည္းဆို ကိုယ့္ site က
ၾကီးလာတာနဲ႕ အမွ site structure က ရႈပ္ေထြးလာမွာပါ။ Link ေတြလည္း မ်ားလာမွာျဖစ္လို႕ပါ။ ဒါေၾကာင့္
ေသေသခ်ာခ်ာ သိထားသင့္ပါတယ္။
ကဲ.. အခု ကၽြန္ေတာ္တို႕ေတြ page မွာ ပုံေလးေတ ြ ထည့္ရေအာင္။
Image
ပုံေတြကေတာ့ web page တစ္ခုမွာ မျဖစ္မေနပါဝင္ရပါတယ္။ ကိုယ္တည္ေဆာက္တ့ ဲ page ကို လွပျပီး
အဓိပၸာယ္ျပည့္စံုဖို႕ အတြက္ပါ။ ကဲ... ပံုေလးေတြ ထည့္ၾကည့္ရေအာင္။
<html>
<head>
<title>Example</title>
</head>
<body>
<img src="Apple-logo.jpg"> Apple Logo</body>
</html>
တကယ္လို႕ ပုံမျမင္ရပဲ ၾကက္ေျခခတ္ ( ) ပဲျမင္ရရင္တာ့ ထည့္ထားတ့ ဲ image
ပတ္လမ္းေၾကာင္းမွားတာျဖစ္ႏိုင္သလို image extension မွားတာလည္း ျဖစ္ႏိုင္တယ္။ image ထည့္လို႕ရတဲ့
extension ေတြကေတာ့ jpg gif png ေတြပဲ။ image က size ၾကီးက ၾကီးေနတယ္။ ေသးခ်င္တယ္။ ျဖစ္ပါတယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<img src="Apple-logo.jpg" width=80px height=80px> Apple Logo</body>
</html>
width နဲ႕ height ဆိုတ့ ဲ attribute က ပုံရဲ႕ size ကို ထိန္းခ်ဳပ္ေပးပါတယ္။ ကိုယ္ၾကိဳက္တ့ ဲ အလ်ားကို width
မွာထည့္ျပီး အျမင့္ကိုေတာ့ height မွာထည့္ျပီး ပံုရဲ႕ size ကိုျပင္လို႕ရတယ္။
<img src="Apple-logo.jpg" width=80px height=80px alt="Apple Logo"> Apple Logo
ဆိုရင္ေတာ့ alt ဆိုတ့အဲ ထဲမွာေရးထားတ့ ဲ စာသားကို ပုံေပၚ Mouse ေလးသြားတင္လိုက္ျပီး ခဏၾကာမွာ
ေပၚလာမွာပါ။ ကၽြန္ေတာ္တို႕ကေတာ့ tool tip လို႕ေခၚတာပါ။
Image ပိုင္းမွာ ေျပာစရာေတြ ေတာ္ေတာ္မ်ားပါတယ္။ သူ႕မွာ attribute ေတြထပ္ရိွေသးတယ္။ ဘာလည္းဆိုေတာ့
text align ေပါ့။ text align ကို img code ထဲမွာ align ဆိုတ့ ဲ attribute ကိုသုံးတယ္။
Align ရွင္းျပခ်က္
top စာတစ္ေၾကာင္းကို ပံုရဲ႕ ေဘးနားက align မွာ အေပၚဆံုးမွာ ေဖာ္ျပေပးတာပါ။
bottom သူကေတာ့ default ပါ။ စာသားကို ပံုေအာက္ဘက္မွာ ေဖာ္ျပတာကိုေတြ႕ရပါမယ္။
middle စာသားကို ပံုအလယ္မွာ မွာေပးတာပါ။
left သူကေတာ့ ပံုကို page ရဲ႕ ဘယ္ဘက္ကိုပို႕လိုက္ျပီး စာသားအကုန္လံုးကို ပံုေဘးမွာ ေဖာ္ျပေပးတာပါ။
right သူကလည္း Left နဲ႕ အတူတူပါပဲ။ ညာဘက္ကို ပံုေရြ႕သြားျပီ စာသားအားလံုးကို ပံုရဲ႕ ဘယ္ဘက္မွာ
ေဖာ္ျပေပးပါမယ္။
အခုဆိုရင္ image နဲ႕ပတ္သက္ျပီး ေတာ္ေတာ္ေလးသိေလာက္ျပီ ထင္တယ္။ ေနာက္ထပ္တစ္ခု ထပ္ေျပာအံုးမယ္။
ပံုေသးေသးေလးကို ႏိွပ္လိုက္မွ ပံုအၾကီးၾကီးေျပာင္းသြားသလိုမ်ဳိးေလးေပါ့။ ပံု size ကို width နဲ႕ height attribute နဲ႕
ခ်ဳံတာမဟုတ္ဘူးေနာ္။ ပံုႏွစ္ပံု။ တစ္ပံုက အၾကီး ၊ ေနာက္တစ္ပံုက အေသးေပ့ါ။ Photo ေတြကို size ေသးတာကိုျပထားျပီး ပံုကို click လုပ္လိုက္မွ size ၾကီးတ့ ဲ ပုံကို ျပ တ့ပဲ ုံပါ။ အဲလိုဘာလို႕ လုပ္ရလဲဆို ပုံၾကီးရင္ page
တက္တာၾကာပါတယ္။ ဒါေၾကာင့္ ပံုေသးကို အရင္ျပတယ္။ click လုပ္လိုက္မွ ပံုၾကီးျဖစ္သြားမယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="fullsize.jpg"> <!-- Full size when click -->
<!-- img src is small size -->
<img src="smallsize.jpg" width=80px height=80px border=0>
</a>
</body>
</html>
အေပၚက code ကို ဖတ္လိုက္တာနဲ႕ နားလည္မယ္ထင္ပါတယ္။ အဲမွာ ေမးစရာတစ္ခုထြက္လာတယ္။ border
ဆိုတာဘာလဲေပါ့။ ကၽြန္ေတာ္တို႕ href ကို သုံးလိုက္တ့ ဲ အခါ image မွာ အျပာေရာင္ border ျဖစ္သြားတယ္။
အဓိပၸာယ္ကေတာ့ Link ရိွတယ္ေပါ့။ အဲဒါေလးကို မေပၚခ်င္လို႕ ေဖ်ာက္လိုက္တာပါ။
ပံု : border မေဖ်ာက္ထားေသာ နဲ႕ image ပံု : border ေဖ်ာက္ထားေသာ ပံု
အခုဆိုရင္ေတာ့ ကၽြန္ေတာ္တို႕ေတြ link ေတြ လုပ္တတ္သြားျပီ။ page တစ္ခုကေန တစ္ခုကို ေခၚတတ္သြားျပီ။ ပံုေတြ
ထည့္တတ္သြားျပီ။ အခုအခန္းမွာ ကၽြန္ေတာ္က sample ေသးေသးေလးေတြပဲ ျပသြားတယ္။ ကိုယ္တိုင္ စမ္းၾကည့္ပါ။
ေပ်ာ္ဖို႕ တကယ္ေကာင္းပါတယ္။ ကိုယ့္ ပံုေလးေတြ နဲ႕ web page ေလး စမ္းေဆာက္လို႕ေတာ့ရျပီ။ ဒါေပမယ့္
ျပည့္ျပည့္စံုစံုျဖစ္ေအာင္ ေဆာက္လို႕မရေသးတာကို ေတြ႕မွာပါ။ ကၽြန္ေတာ္တို႕ table လိုအပ္ေနေသးတာပါ။
ေနာက္တစ္ခန္းမွာ table နဲ႕ frame ေတြအေၾကာင္း ေျပာျပပါမယ္။
Table And 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> <!-- Row-->
<td> <!-- Column -->
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> <!-- First Row -->
<td> <!-- First Column -->
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr> <!-- Second Row -->
<td> <!-- Second Column -->
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</table>
အဲဒီ Example ကို ၾကည့္လိုက္ရင္ နားလည္ႏိုင္မလားမသိဘူး။ ကၽြန္ေတာ္တို႕ေတြ row ၂ ခုနဲ႕ column ၃ ခု ရိွတ့ ဲ
table တစ္ခုတည္ေဆာက္ခ့တဲ ာပါ။ table ပိုင္းကို ရႈပ္တယ္လို႕ ထင္ခ်င္ထင္ေနပါလိမ့္မယ္။ ဟုတ္ပါတယ္။ ရႈပ္ပါတယ္။
ဒါေပမယ့္ နားလည္သြားရင္ လြယ္ျပီး သံုးလို႕ေကာင္းပါတယ္။ ကၽြန္ေတာ္တို႕ေတြ table ပိုင္းကို ေသေသခ်ာခ်ာေလး
ေလ့လာဖို႕လိုပါလိမ့္မယ္။ ကဲ... ေနာက္ထပ္ example တစ္ခု ထပ္လုပ္ၾကည့္ရေအာင္ ။ အခု ကၽြန္ေတာ္တို႕ေတြ row
၃ ခု column ၃ ခု ရိွတ့ ဲ table တစ္ခုကို ေဆာက္ၾကည့္ရေအာင္။
row ၃ခု ျဖစ္လို႕ <tr></tr> ၃ခုပါမယ္။ column ၃ ခုျဖစ္လို႕ <tr>နဲ႕ </tr> ၾကားမွာ <td></td> ၃ ခုပါမယ္။
အဲလိုေလး စဥ္းစားလို႕ရသြားျပီဆိုရင္ စျပီး code ေရးၾကည့္ရေအာင္။
<html>
<head><title>Example</title></head>
<body>
<table>
<tr><!-- First Row -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><!--Second Row -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr><!-- Third Row -->
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
ကဲ... အခုေလာက္ဆို နားလည္ေလာက္ျပီထင္တယ္။ ကၽြန္ေတာ္တို႕ ေရွ႕ဆက္ရေအာင္။
ကၽြန္ေတာ္တို႕ေတြဟာ table ရဲ႕ width ကို ထိန္းခ်ဳပ္ႏိုင္ပါတယ္။ table ရဲ႕ width ကို
သတ္မွတ္တ့အဲ ခါမွာ % နဲ႕သတ္မွတ္တာနဲ႕ pixel န႕ဲ သတ္မွတ္တာရယ္ရိွပါတယ္။
table ရဲ႕ width သာမက <td> ရဲ႕ width ေတြကိုပါသတ္မွတ္ႏိုင္ပါတယ္။ % နဲ႕ သတ္မွတ္တာနဲ႕ Pixel နဲ႕
သတ္မွတ္တာ ဘာကြာသလဲဆိုရင္ေတာ့ % ကေတာ့ broswer ရဲ႕ အေပၚမွာ မူတည္ျပီး width ကေျပာင္းလဲပါတယ္။
pixel ကေတာ့ မေျပာင္းလဲဘူးေပါ့။ အေသေပါ့။ % နဲ႕ဆိုရင္ broswer ခ်ဲ႕လိုက္တာနဲ႕ လုိက္က်ယ္သြားပါတယ္။
pixel နဲ႕ဆိုရင္ေတာ့ browser က်ယ္လည္း လိုက္မက်ယ္သြားပါဘူး။ ကဲ.. စလိုက္ရေအာင္။
<html>
<head><title>Example</title></head>
<body>
<table width="100%">
<tr><!-- First Row -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><!--Second Row -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr><!-- Third Row -->
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
အဲဒီမွာဆိုရင္ width က 100% ျဖစ္တ့အဲ တြက္ေၾကာင့္ browser အျပည့္ table ကယူပါမယ္။
အဲဒီက အေပၚဆံုး first row ကိုဒီလိုျပင္ၾကည့္လိုက္ပါ။
<table width="100%">
<tr><!-- First Row -->
<td width="30px">1</td>
<td>2</td>
<td>3</td>
</tr>
ဒါဆိုရင္ေတာ့ ပထမ column ရဲ႕ width ကို 30px လို႕သတ္မွတ္လိုက္ပါျပီ။ ပထမ row မွာသတ္မွတ္လုိက္ရင္ တျခား
row ေတြရဲ႕ ပထမ column ကိုပါသတ္မွတ္ျပီးသား ျဖစ္သြားပါလိမ့္မယ္။ ကၽြန္ေတာ္တို႕ေတြဟာ px သာမက % နဲ႕ပါ
သတ္မွတ္ႏိုင္ပါတယ္။ column ၃ ခုလံုးကို သတ္မွတ္ခ်င္ရင္ေတာ့ ဒီလိုေရးလို႕ပါတယ္။
<table width="100%">
<tr><!-- First Row -->
<td width="45%">1</td>
<td width="20%">2</td>
<td width="35%">3</td>
</tr>
အဲဒီမွာဆိုရင္ေတာ့ column ရဲ႕ width ကို % နဲ႕သတ္မွတ္ေပးမွာပါ။ အဲဒီမွာ တတိယ colum ကို width
မထည့္လည္း သူ႕ဘာသာ ခ်ိန္ညိွေပးႏိုင္ပါတယ္။ ကဲ... table နဲ႕ time table ေလးဆြဲၾကည့္ရေအာင္။
<html>
<head><title>Example</title></head>
<body>
<table width="100%">
<tr><!-- First Row -->
<td>Date</td>
<td>Time</td>
<td>Subject</td>
</tr>
<tr><!--Second Row -->
<td>Oct 07</td>
<td>1:00 PM - 3:00 PM</td>
<td>Hardware</td>
</tr>
<tr><!-- Third Row -->
<td>Oct 08</td>
<td>1:00 PM - 3:00 PM</td>
<td>Software Install</td>
</tr>
<tr>
<td>Oct 08</td>
<td>1:00 PM - 3:00 PM</td>
<td>Windows Install</td>
</tr>
</table>
</body>
</html>
ကဲ.. အခုဆိုရင္ လက္ေတြ႕ အသံုးျပဳတတ္ေလာက္ျပီ ထင္တယ္။ ကၽြန္ေတာ္တို႕ေတြ 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>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td colspan="2">
Cell 1
</td>
<td>
Cell 3
</td>
</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>
<title>Untitled Document</title>
</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>
<title>Untitled Document</title>
</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>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td>
Row1 , Cell1
</td>
<td>
50 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
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>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td bgcolor="blue">
<font color="#FFFFFF">BLUE</font>
</td>
<td bgcolor="red">
Red
</td>
<td bgcolor="#EABCDF">
Hex Color
</td>
</tr>
</table>
</body>
</html>
အဲဒီမွာဆိုရင္ bgcolor ကိုေတြ႕မွာပါ။ အဲဒါကေတာ့ background အေရာင္ထည့္တာပါ။ ကၽြန္ေတာ္တို႕ေတြ
background အေရာင္ကိုထည့္လို႕ရေပမယ့္ စာလံုးအေရာင္ေတြ ထည့္လို႕မရပါဘူး။ ကၽြန္ေတာ္တို႕ေတြ
စာလံုးအေရာင္ထည့္ခ်င္ရင္ေတာ့ font color နဲ႕ထည့္သြင္းရပါတယ္။ တျခားအဆင္ေျပတ့နဲ ည္းကေတာ့ CSS
အသံုးျပဳလိုက္ျခင္းပါပဲ။ ဒီစာအုပ္ထဲမွာေတာ့ CSS အေၾကာင္းပါဝင္ျခင္းမရိွေသးဘူး။ အခုဆိုရင္ေတာ့ bg color
ကိုနည္းနည္းနားလည္လာျပီထင္ပါတယ္။ တကယ္လို႕ ကၽြန္ေတာ္တို႕ေတြ row တစ္ခုလံုးကို
အေရာင္ထည့္ခ်င္ရင္ေတာ့ <tr> မွာ bgcolor ဆိုတ့ ဲ attribute သုံးရပါမယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td bgcolor="blue">
<font color="#FFFFFF">BLUE</font>
</td>
<td bgcolor="red">
Red
</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>
<title>Untitled Document</title>
</head>
<body>
This is frame 1
</body>
</html>
Frame2.html
<html>
<head>
<title>Untitled Document</title>
</head>
This is frame 2
</html>
index.html
<html >
<head>
<title>Untitled Document</title>
</head>
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="frame1.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" />
<frame src="frame2.html" name="mainFrame" id="mainFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>
frame တစ္ခုကို တည္ေဆာက္ျပီရင္ေတာ့ အနည္းဆံုး file ၃ ခုလိုပါတယ္။ index.html ကေတာ့ Frame1 နဲ႕
Frame2 ကိုခ်ိတ္ဆက္ေဖာ္ျပေပးမွာျဖစ္ျပီး frame1 နဲ႕ frame2 ကေတာ့ အဓိကေပါ့။
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>
<title>Untitled Document</title>
</head>
<frameset cols="20%,30%,*">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes>Your Browser Don’t Support Frame</noframes></html>
ေမးစရာ တစ္ခုေပၚလာျပီ။ ဘာလဲဆိုရင္ေတာ့ <noframes> ။ အဲဒါက ဘာလဲဆိုရင္ေတာ့ ဟိုးအရင္က browser
ေတြက frame ေတြကို support မလုပ္ပါဘူး။ ဒါေၾကာင့္ frame ေတြကို support မလုပ္တ့ ဲ browser ေတြျဖစ္ေနရင္
Message ေလးေဖာ္ျပေပးပါမယ္။ အခုေနာက္ပို္င္း browser ေတြက support လုပ္ပါတယ္။ ကဲ.. အခု code ေလးကို
နည္းနည္းေလး ေျပာင္းၾကည့္လိုက္ရေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows="20%,30%,*">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
ဘာေျပာင္းသြားသလဲဆိုေတာ့ frameser ပါ။ cols ကေန rows
ျဖစ္သြားပါတယ္။ cols နဲ႕ rows ေလးပဲ ကြာတာပါ။ က်န္တာ
အတူတူပါပဲ။ frame အထဲမွာလည္း ထပ္ျပီး
ထပ္မံခြဲထုတ္လို႕ရပါေသးတယ္။ အခု အေပၚဆံုးက rows ကို
column ထပ္ျပီး ခြဲပါမယ္။
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows="20%,30%,*">
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame1.html" />
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
အဲဒီမွာ <frameset> ေအာက္မွာ <frameset> ထပ္ထည့္ထားတာကို ေတြ႕ရမွာပါ။
<frameset rows="20%,30%,*">
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame1.html" />
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
ကၽြန္ေတာ္တို႕ အေပၚဆံုးက rows ကို ထပ္ျပီး cols ခြဲတာပါ။ ဒါေၾကာင့္ အေပၚဆံုး rows မွာ columns
ႏွစ္ခုျဖစ္သြားပါျပီ။ ဒါေၾကာင့္ <frame> ႏွစ္ခု ေရးရတာပါ။ တကယ္လို႕ ဒုတိယ rows မွာပဲ colums
ထပ္ထည့္ခ်င္ရင္ေတာ့ code က ဒီလိုေလးျဖစ္သြားမွာပါ။
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows="20%,30%,*">
<frame src="frame1.html" />
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame2.html" />
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
ရွင္းရွင္းေလးပါ။ ဒုတိယ rows မွာ ျဖစ္ေစခ်င္လို႕ ဒုတိယ rows မွာ frameset တစ္ခုထပ္ထည့္ရတာပါ။ အဲလိုမ်ဳိးပဲ
columns ေတြထဲမွာ rows ေတြ ခြဲလို႕ရပါတယ္။ အတူတူပါပဲ။ အေပၚက rows ေနရာမွာ cols ေျပာင္းျပီးေတာ့ cols
ေနရာမွာ rows ေျပာင္းလိုက္ရင္ သိမွာပါ။ ကၽြန္ေတာ္ မေရးျပေတာ့ဘူး။ ကိုယ္တိုင္ပဲ ေရးျပီး စမ္းၾကည့္လိုက္ေပါ့။
အခု ဒီစာအုပ္ရဲ႕ ေနာက္ဆံုးအခန္းက ေနာက္ဆံုး အေၾကာင္းပါပဲ။ ဘာလဲဆိုရင္ေတာ့ 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 ကို
ေသေသခ်ာခ်ာ တတ္ကၽြမ္းထားဖုိ႕လိုပါတယ္။
Comments
Post a Comment