အခုလဲသူငယ္ခ်င္းတစ္ေယာက္က၀က္ဆိုဒ္မွာေလးလုပ္ထားဒါတယ္တဲ ့သူဆိုဒ္မွာလိုဒါေလးေတြထဲလိုရေအာင္ဆိုဒ္နဲ ့ပတ္သက္ဒါေလးေတြပဲ
ေရြးျပိတင္ေပးပါဆိုလိုဆိုဒ္နဲ ့ပတ္သက္ဒါေလးေရြးတင္လိုက္ပါတယ္အခုတင္မယ္ဟာကလြယ္ကူရိုးရွင္းပါတယ္
Marquee အေၾကာင္းေလးအရင္းေျပာပါမယ္
စာလံုးေလးေတြဟိုသြားလိုက္ဒိသြားလိုက္နဲ ့ ဒိဇိုင္းလွလွေလးေတြလုပ္ဒါေလးေပါ့
အရင္ဆံုးသူငယ္ခ်င္းတို notepad ေလးအရင္ဖြင့္ထားေပါ့လက္ေတြ ့လုပ္ၾကည္မွမွတ္မိလြယ္မယ္ထင္တယ
ကဲ notepad ထဲကိုေအာက္ကဟာေလးထဲျပိ Save မွတ္လိုက္ၾကည္
Save မွတ္ျပိ file name ေပးတယ္ေနရာမွာ filename.html လိုထဲျပိေပးလိုက္ပါ
အေနာက္မွာ html လိုဘာလိုထဲရလဲဆိုေတာ့
အဲ့ဒါမွ page ေလးတစ္ခုတက္လာတာကို ျမင္ရပါမယ္။
္
html>
<head><title>Example</title></head>
<body>
<marquee>I'm moving</marquee>
</body>
</html>
အဲဒီ code မွာဆိုရင္ စာသားေလးက ေရြ႕ေနတာကိုေတြ႕ရပါမယ္။ ဘယ္ဘက္ကေန ညာဘက္ကိုေရြ႕လာတာပါ။
Marquee မွာရိွတဲ့ attribute ေတြကေတာ့
ဘယ္ကေနညာ ၊ ညာကေန ဘယ္ျပန္သြား ပါတယ္။
<marquee behavior="alternate">I'm moving</marquee>
<marquee behavior="alternate">I'm moving</marquee>
scroll
သူက default value ပါ။ ဘယ္ကေန ညာ ၊ ညာဘက္ေရာက္သြားရင္ ဝင္သြားျပီး ဘယ္ဘက္ေန ျပန္စတာပါ။
<marquee behavior="scroll">I'm moving</marquee>
<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 ေတြကေတာ့
[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 ခ်ိတ္တတ္ဖို႕လိုပါတယ္။
HTML For Web Design Suit Creating Web Page With Apperance And Link
သူကေတာ့ ဘယ္ကေနညာ ျပီးရင္ ညာဘက္လည္းေရာက္ေရာ ရပ္သြားပါတယ္။
<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 ေတြကေတာ့
[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 ခ်ိတ္တတ္ဖို႕လိုပါတယ္။
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
<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 ပိုင္းေတြကို ကၽြန္ေတာ္ ေနာက္ပိုင္း ဆက္လက္ရွင္းျပပါအံုးမယ္။
HTML For Web Design Suit Creating Web Page With Apperance And Link
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 နဲ႕ ၀က္ဆိုဒ္လမ္းညြန္း ေလးဆြဲၾကည့္ရေအာင္။
<html>
<head><title>Example</title></head>
<body>
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
<html>
<head><title>Example</title></head>
<body>
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
<tr><!-- First Row -->
<td>Website Name</td>
<td>Website link</td>
<td>website label</td>
</tr>
<tr><!--Second Row -->
<td>ေကာင္းမင္းထက္</td>
<td>www.kaungminhtat.co.cc</td>
<td>Softwares & Games</td>
</tr>
<tr><!-- Third Row -->
<td>myanmar-it</td>
<td>www.myanmar-it.webs.com</td>
<td>Software To technology</td>
</tr>
<tr>
<td>အၾကင္နာနန္းေတာ္</td>
<td>www.akyinnarnantaw.co.cc</td>
<td>Softwares & Games</td>
</tr>
</table>
</body>
</html>
လိုတလိုသံုးၾကည္ေပ့ါ
ေနာက္မွစာအုပ္တင္ေပးလိုက္မယ္အမ်ားၾကိးဆုိေတာ့ blog page မွာေရးလိုမေကာင္းဘူးရွုပ္ကုန္မွာဆိုလို DOWNLOAD FROM MEDIAFIRE
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>
<!-- 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 ပိုင္းေတြကို ကၽြန္ေတာ္ ေနာက္ပိုင္း ဆက္လက္ရွင္းျပပါအံုးမယ္။
HTML For Web Design Suit Creating Web Page With Apperance And Link
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 နဲ႕ ၀က္ဆိုဒ္လမ္းညြန္း ေလးဆြဲၾကည့္ရေအာင္။
<html>
<head><title>Example</title></head>
<body>
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
<html>
<head><title>Example</title></head>
<body>
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
<tr><!-- First Row -->
<td>Website Name</td>
<td>Website link</td>
<td>website label</td>
</tr>
<tr><!--Second Row -->
<td>ေကာင္းမင္းထက္</td>
<td>www.kaungminhtat.co.cc</td>
<td>Softwares & Games</td>
</tr>
<tr><!-- Third Row -->
<td>myanmar-it</td>
<td>www.myanmar-it.webs.com</td>
<td>Software To technology</td>
</tr>
<tr>
<td>အၾကင္နာနန္းေတာ္</td>
<td>www.akyinnarnantaw.co.cc</td>
<td>Softwares & Games</td>
</tr>
</table>
</body>
</html>
| Website Name | Website link | website label |
| Kaung Min Htet | www.kaungminhtat.co.cc | Softwares & Games |
| myanmar-it | www.myanmar-it.webs.com | Software To technology |
| A Kyin Nar Nan Taw | www.akyinnarnantaw.co.cc | Softwares & Games |
လိုတလိုသံုးၾကည္ေပ့ါ
ေနာက္မွစာအုပ္တင္ေပးလိုက္မယ္အမ်ားၾကိးဆုိေတာ့ blog page မွာေရးလိုမေကာင္းဘူးရွုပ္ကုန္မွာဆိုလို DOWNLOAD FROM MEDIAFIRE
0 Comments